fix(components): circular referencing issue (#11777)

* fix(components): circular referencing issue

* Move sizes related into hooks.
* Remove size definitions in forms only re-exports.

* chore: fix failing tests

packages/components/button/src/button.ts

@@ -1,4 +1,4 @@
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { buildProps, iconPropType } from '@element-plus/utils'
 import { Loading } from '@element-plus/icons-vue'
 import type { ExtractPropTypes } from 'vue'
@@ -23,7 +23,7 @@ export const buttonProps = buildProps({
   /**
    * @description button size
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description disable the button
    */

packages/components/cascader/src/cascader.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from '@element-plus/components/cascader-panel'
 import { buildProps, definePropType, isBoolean } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { useTooltipContentProps } from '@element-plus/components/tooltip'
 import { tagProps } from '@element-plus/components/tag'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
@@ -14,7 +14,7 @@ export const cascaderProps = buildProps({
   /**
    * @description size of input
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description placeholder of input
    */

packages/components/checkbox/src/checkbox-group.ts

@@ -1,5 +1,5 @@
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { buildProps, definePropType, isArray } from '@element-plus/utils'
 
 import type { ExtractPropTypes } from 'vue'
@@ -31,7 +31,7 @@ export const checkboxGroupProps = buildProps({
   /**
    * @description size of checkbox
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description label for screen reader
    */

packages/components/checkbox/src/checkbox.ts

@@ -1,5 +1,5 @@
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { isBoolean, isNumber, isString } from '@element-plus/utils'
 
 import type { ExtractPropTypes } from 'vue'
@@ -75,7 +75,7 @@ export const checkboxProps = {
   /**
    * @description size of the Checkbox
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description input tabindex
    */

packages/components/color-picker/src/color-picker.ts

@@ -1,6 +1,6 @@
 import { isNil } from 'lodash-unified'
 import { buildProps, definePropType, isString } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 
 import type { ComputedRef, ExtractPropTypes, InjectionKey } from 'vue'
@@ -30,7 +30,7 @@ export const colorPickerProps = buildProps({
   /**
    * @description size of ColorPicker
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description custom class name for ColorPicker's dropdown
    */

packages/components/config-provider/src/config-provider-props.ts

@@ -1,5 +1,5 @@
 import { buildProps, definePropType } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 
 import type { ExtractPropTypes } from 'vue'
 import type { Language } from '@element-plus/locale'
@@ -27,7 +27,7 @@ export const configProviderProps = buildProps({
   /**
    * @description global component size
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description button related configuration, [see the following table](#button-attributes)
    */

packages/components/config-provider/src/hooks/use-global-config.ts

@@ -1,6 +1,7 @@
 import { computed, getCurrentInstance, inject, provide, ref, unref } from 'vue'
 import { debugWarn, keysOf } from '@element-plus/utils'
 import {
+  SIZE_INJECTION_KEY,
   localeContextKey,
   namespaceContextKey,
   zIndexContextKey,
@@ -74,6 +75,10 @@ export const provideGlobalConfig = (
     computed(() => context.value.zIndex)
   )
 
+  provideFn(SIZE_INJECTION_KEY, {
+    size: computed(() => context.value.size || ''),
+  })
+
   if (global || !globalConfig.value) {
     globalConfig.value = context.value
   }

packages/components/descriptions/src/description.ts

@@ -1,5 +1,5 @@
 import { buildProps } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 
 import type Description from './description.vue'
 
@@ -17,7 +17,7 @@ export const descriptionProps = buildProps({
     values: ['horizontal', 'vertical'],
     default: 'horizontal',
   },
-  size: useFormSizeProp,
+  size: useSizeProp,
   title: {
     type: String,
     default: '',

packages/components/form/src/hooks/use-form-common-props.ts

@@ -1,19 +1,10 @@
 import { computed, inject, ref, unref } from 'vue'
-import { buildProp } from '@element-plus/utils'
-import { componentSizes } from '@element-plus/constants'
-import { useProp } from '@element-plus/hooks'
-import { useGlobalConfig } from '@element-plus/components/config-provider'
+import { useGlobalSize, useProp } from '@element-plus/hooks'
 import { formContextKey, formItemContextKey } from '../constants'
 
 import type { ComponentSize } from '@element-plus/constants'
 import type { MaybeRef } from '@vueuse/core'
 
-export const useFormSizeProp = buildProp({
-  type: String,
-  values: componentSizes,
-  required: false,
-} as const)
-
 export const useFormSize = (
   fallback?: MaybeRef<ComponentSize | undefined>,
   ignore: Partial<Record<'prop' | 'form' | 'formItem' | 'global', boolean>> = {}
@@ -21,7 +12,7 @@ export const useFormSize = (
   const emptyRef = ref(undefined)
 
   const size = ignore.prop ? emptyRef : useProp<ComponentSize>('size')
-  const globalConfig = ignore.global ? emptyRef : useGlobalConfig('size')
+  const globalConfig = ignore.global ? emptyRef : useGlobalSize()
   const form = ignore.form
     ? { size: undefined }
     : inject(formContextKey, undefined)
@@ -51,4 +42,3 @@ export const useFormDisabled = (fallback?: MaybeRef<boolean | undefined>) => {
 // These exports are used for preventing breaking changes
 export const useSize = useFormSize
 export const useDisabled = useFormDisabled
-export const useSizeProp = useFormSizeProp

packages/components/input-number/src/input-number.ts

@@ -1,5 +1,5 @@
 import { isNil } from 'lodash-unified'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { buildProps, isNumber } from '@element-plus/utils'
 import {
   CHANGE_EVENT,
@@ -57,7 +57,7 @@ export const inputNumberProps = buildProps({
   /**
    * @description size of the component
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description whether to enable the control buttons
    */

packages/components/input/src/input.ts

@@ -6,7 +6,7 @@ import {
   mutable,
 } from '@element-plus/utils'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import type Input from './input.vue'
 import type { ExtractPropTypes, StyleValue } from 'vue'
 
@@ -23,7 +23,7 @@ export const inputProps = buildProps({
   /**
    * @description input box size
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description whether to disable
    */

packages/components/radio/src/radio-group.ts

@@ -1,5 +1,5 @@
 import { buildProps } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { radioEmits } from './radio'
 import type { ExtractPropTypes } from '@vue/runtime-core'
 import type RadioGroup from './radio-group.vue'
@@ -15,7 +15,7 @@ export const radioGroupProps = buildProps({
   /**
    * @description the size of radio buttons or bordered radios
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description whether the nesting radios are disabled
    */

packages/components/radio/src/radio.ts

@@ -1,6 +1,6 @@
 import { buildProps, isBoolean, isNumber, isString } from '@element-plus/utils'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import type { ExtractPropTypes } from 'vue'
 import type Radio from './radio.vue'
 
@@ -8,7 +8,7 @@ export const radioPropsBase = buildProps({
   /**
    * @description size of the Radio
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description whether Radio is disabled
    */

packages/components/rate/src/rate.ts

@@ -7,7 +7,7 @@ import {
   isNumber,
   mutable,
 } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import type { Component, ExtractPropTypes } from 'vue'
 import type Rate from './rate.vue'
 
@@ -138,7 +138,7 @@ export const rateProps = buildProps({
   /**
    * @description size of Rate
    */
-  size: useFormSizeProp,
+  size: useSizeProp,
   /**
    * @description same as `aria-label` in Rate
    */

packages/components/slider/src/slider.ts

@@ -10,7 +10,7 @@ import {
   INPUT_EVENT,
   UPDATE_MODEL_EVENT,
 } from '@element-plus/constants'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import type { Arrayable } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
 import type { SliderMarkerProps } from './marker'
@@ -52,8 +52,8 @@ export const sliderProps = buildProps({
     type: Boolean,
     default: true,
   },
-  size: useFormSizeProp,
-  inputSize: useFormSizeProp,
+  size: useSizeProp,
+  inputSize: useSizeProp,
   showStops: Boolean,
   showTooltip: {
     type: Boolean,

packages/components/table/src/table/defaults.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import type {
   CSSProperties,
   ComponentInternalInstance,
@@ -183,7 +183,7 @@ export default {
     type: Array as PropType<DefaultRow[]>,
     default: () => [],
   },
-  size: useFormSizeProp,
+  size: useSizeProp,
   width: [String, Number],
   height: [String, Number],
   maxHeight: [String, Number],

packages/components/time-picker/src/common/props.ts

@@ -1,5 +1,5 @@
 import { buildProps, definePropType } from '@element-plus/utils'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import { CircleClose } from '@element-plus/icons-vue'
 import { disabledTimeListsProps } from '../props/shared'
 
@@ -60,7 +60,7 @@ export const timePickerDefaultProps = buildProps({
     type: definePropType<string | Component>([String, Object]),
     default: '',
   },
-  size: useFormSizeProp,
+  size: useSizeProp,
   readonly: {
     type: Boolean,
     default: false,

packages/components/time-select/src/time-select.ts

@@ -1,6 +1,6 @@
 import { buildProps, definePropType } from '@element-plus/utils'
 import { CircleClose, Clock } from '@element-plus/icons-vue'
-import { useFormSizeProp } from '@element-plus/components/form'
+import { useSizeProp } from '@element-plus/hooks'
 import type TimeSelect from './time-select.vue'
 import type { Component, ExtractPropTypes, PropType } from 'vue'
 
@@ -23,7 +23,7 @@ export const timeSelectProps = buildProps({
     type: Boolean,
     default: true,
   },
-  size: useFormSizeProp,
+  size: useSizeProp,
   placeholder: String,
   start: {
     type: String,

packages/hooks/index.ts

@@ -26,3 +26,4 @@ export * from './use-z-index'
 export * from './use-floating'
 export * from './use-cursor'
 export * from './use-ordered-children'
+export * from './use-size'

packages/hooks/use-size/index.ts

@@ -0,0 +1,30 @@
+import { computed, inject, unref } from 'vue'
+import { buildProp } from '@element-plus/utils'
+import { componentSizes } from '@element-plus/constants'
+
+import type { InjectionKey, Ref } from 'vue'
+import type { ComponentSize } from '@element-plus/constants'
+
+export const useSizeProp = buildProp({
+  type: String,
+  values: componentSizes,
+  required: false,
+} as const)
+
+export const useSizeProps = {
+  size: useSizeProp,
+}
+
+export interface SizeContext {
+  size: Ref<ComponentSize>
+}
+
+export const SIZE_INJECTION_KEY: InjectionKey<SizeContext> = Symbol('size')
+
+export const useGlobalSize = () => {
+  const injectedSize = inject(SIZE_INJECTION_KEY, {} as SizeContext)
+
+  return computed<ComponentSize>(() => {
+    return unref(injectedSize.size) || ''
+  })
+}