feat(components): [el-config-provider] add size (#4730)

packages/components/button/src/button.ts

@@ -1,4 +1,4 @@
-import { useFormItemProps } from '@element-plus/hooks'
+import { useSizeProp } from '@element-plus/hooks'
 import { buildProps, definePropType } from '@element-plus/utils/props'
 import type { ExtractPropTypes, Component } from 'vue'
 import type button from './button.vue'
@@ -17,7 +17,8 @@ export const buttonSize = ['', 'large', 'medium', 'small', 'mini'] as const
 export const buttonNativeType = ['button', 'submit', 'reset'] as const
 
 export const buttonProps = buildProps({
-  ...useFormItemProps,
+  size: useSizeProp,
+  disabled: Boolean,
   type: {
     type: String,
     values: buttonType,
@@ -40,6 +41,7 @@ export const buttonProps = buildProps({
   color: String,
   autoInsertSpace: {
     type: Boolean,
+    default: undefined,
   },
 } as const)
 

packages/components/button/src/button.vue

@@ -38,7 +38,12 @@
 import { computed, inject, defineComponent, Text, ref } from 'vue'
 import { useCssVar } from '@vueuse/core'
 import { ElIcon } from '@element-plus/components/icon'
-import { useFormItem, useGlobalConfig } from '@element-plus/hooks'
+import {
+  useDisabled,
+  useFormItem,
+  useGlobalConfig,
+  useSize,
+} from '@element-plus/hooks'
 import { buttonGroupContextKey } from '@element-plus/tokens'
 import { Loading } from '@element-plus/icons-vue'
 
@@ -60,10 +65,11 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const buttonRef = ref()
     const buttonGroupContext = inject(buttonGroupContextKey, undefined)
-    const globalConfig = useGlobalConfig()
-    const autoInsertSpace = computed(() => {
-      return props.autoInsertSpace ?? globalConfig?.button.autoInsertSpace
-    })
+    const globalConfig = useGlobalConfig('button')
+    const autoInsertSpace = computed(
+      () =>
+        props.autoInsertSpace ?? globalConfig.value?.autoInsertSpace ?? false
+    )
 
     // add space between two characters in Chinese
     const shouldAddSpace = computed(() => {
@@ -78,13 +84,9 @@ export default defineComponent({
       return false
     })
 
-    const {
-      form,
-      size: buttonSize,
-      disabled: buttonDisabled,
-    } = useFormItem({
-      size: computed(() => buttonGroupContext?.size),
-    })
+    const { form } = useFormItem()
+    const buttonSize = useSize(computed(() => buttonGroupContext?.size))
+    const buttonDisabled = useDisabled()
     const buttonType = computed(
       () => props.type || buttonGroupContext?.type || 'default'
     )

packages/components/cascader/src/index.vue

@@ -169,12 +169,11 @@ import ElIcon from '@element-plus/components/icon'
 
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 import { ClickOutside as Clickoutside } from '@element-plus/directives'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useSize } from '@element-plus/hooks'
 
 import { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 import isServer from '@element-plus/utils/isServer'
-import { useGlobalConfig } from '@element-plus/utils/util'
 import {
   addResizeListener,
   removeResizeListener,
@@ -302,7 +301,6 @@ export default defineComponent({
     let pressDeleteCount = 0
 
     const { t } = useLocale()
-    const $ELEMENT = useGlobalConfig()
     const elForm = inject(elFormKey, {} as ElFormContext)
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
 
@@ -324,9 +322,7 @@ export default defineComponent({
     const inputPlaceholder = computed(
       () => props.placeholder || t('el.cascader.placeholder')
     )
-    const realSize: ComputedRef<ComponentSize> = computed(
-      () => props.size || elFormItem.size || $ELEMENT.size
-    )
+    const realSize = useSize()
     const tagSize = computed(() =>
       ['small', 'mini'].includes(realSize.value) ? 'mini' : 'small'
     )

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

@@ -15,6 +15,7 @@ import {
 } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import { useSize } from '@element-plus/hooks'
 import { useCheckboxGroup } from './useCheckbox'
 
 import type { PropType } from 'vue'
@@ -54,10 +55,8 @@ export default defineComponent({
   emits: [UPDATE_MODEL_EVENT, 'change'],
 
   setup(props, ctx) {
-    const { elFormItem, elFormItemSize, ELEMENT } = useCheckboxGroup()
-    const checkboxGroupSize = computed(
-      () => props.size || elFormItemSize.value || ELEMENT.size
-    )
+    const { elFormItem } = useCheckboxGroup()
+    const checkboxGroupSize = useSize()
 
     const changeEvent = (value) => {
       ctx.emit(UPDATE_MODEL_EVENT, value)

packages/components/checkbox/src/checkbox.type.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef } from 'vue'
-import type { AnyFunction } from '@element-plus/utils/types'
+import type { AnyFunction, ComponentSize } from '@element-plus/utils/types'
 export interface ICheckboxGroupInstance {
   name?: string
   modelValue?: ComputedRef
@@ -9,6 +9,6 @@ export interface ICheckboxGroupInstance {
   size?: ComputedRef<string>
   fill?: ComputedRef<string>
   textColor?: ComputedRef<string>
-  checkboxGroupSize?: ComputedRef<string>
+  checkboxGroupSize?: ComputedRef<ComponentSize>
   changeEvent?: AnyFunction<any>
 }

packages/components/checkbox/src/useCheckbox.ts

@@ -1,9 +1,9 @@
 import { ref, computed, inject, getCurrentInstance, watch } from 'vue'
 import { toTypeString } from '@vue/shared'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { useGlobalConfig } from '@element-plus/utils/util'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 
+import { useSize } from '@element-plus/hooks'
 import type { ExtractPropTypes } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
 import type { PartialReturnType } from '@element-plus/utils/types'
@@ -39,7 +39,6 @@ export const useCheckboxProps = {
 export type IUseCheckboxProps = ExtractPropTypes<typeof useCheckboxProps>
 
 export const useCheckboxGroup = () => {
-  const ELEMENT = useGlobalConfig()
   const elForm = inject(elFormKey, {} as ElFormContext)
   const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
   const checkboxGroup = inject<ICheckboxGroupInstance>('CheckboxGroup', {})
@@ -53,7 +52,6 @@ export const useCheckboxGroup = () => {
     isGroup,
     checkboxGroup,
     elForm,
-    ELEMENT,
     elFormItemSize,
     elFormItem,
   }
@@ -95,14 +93,9 @@ const useCheckboxStatus = (
   props: IUseCheckboxProps,
   { model }: PartialReturnType<typeof useModel>
 ) => {
-  const { isGroup, checkboxGroup, elFormItemSize, ELEMENT } = useCheckboxGroup()
+  const { isGroup, checkboxGroup } = useCheckboxGroup()
   const focus = ref(false)
-  const size = computed<string | undefined>(
-    () =>
-      checkboxGroup?.checkboxGroupSize?.value ||
-      elFormItemSize.value ||
-      ELEMENT.size
-  )
+  const size = useSize(checkboxGroup?.checkboxGroupSize, { prop: true })
   const isChecked = computed<boolean>(() => {
     const value = model.value
     if (toTypeString(value) === '[object Boolean]') {
@@ -115,12 +108,12 @@ const useCheckboxStatus = (
       return !!value
     }
   })
-  const checkboxSize = computed(() => {
-    const temCheckboxSize = props.size || elFormItemSize.value || ELEMENT.size
-    return isGroup.value
-      ? checkboxGroup?.checkboxGroupSize?.value || temCheckboxSize
-      : temCheckboxSize
-  })
+
+  const checkboxSize = useSize(
+    computed(() =>
+      isGroup.value ? checkboxGroup?.checkboxGroupSize?.value : undefined
+    )
+  )
 
   return {
     isChecked,

packages/components/color-picker/src/index.vue

@@ -111,11 +111,10 @@ import ElButton from '@element-plus/components/button'
 import ElIcon from '@element-plus/components/icon'
 import { ClickOutside } from '@element-plus/directives'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useSize } from '@element-plus/hooks'
 import ElPopper, { Effect } from '@element-plus/components/popper'
 import ElInput from '@element-plus/components/input'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
-import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { Close, ArrowDown } from '@element-plus/icons-vue'
 import AlphaSlider from './components/alpha-slider.vue'
@@ -161,7 +160,6 @@ export default defineComponent({
   },
   emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
-    const ELEMENT = useGlobalConfig()
     const { t } = useLocale()
     const elForm = inject(elFormKey, {} as ElFormContext)
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
@@ -187,9 +185,7 @@ export default defineComponent({
       }
       return displayedRgb(color, props.showAlpha)
     })
-    const colorSize = computed(() => {
-      return props.size || elFormItem.size || ELEMENT.size
-    })
+    const colorSize = useSize()
     const colorDisabled = computed(() => {
       return props.disabled || elForm.disabled
     })

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

@@ -1,16 +1,16 @@
 import { useLocaleProps } from '@element-plus/hooks'
-import { buildProp, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 import type { ButtonConfigContext } from '@element-plus/components/button'
 
-export const configProviderProps = {
+export const configProviderProps = buildProps({
   ...useLocaleProps,
-  // Add more configs
-  button: buildProp({
+
+  size: {
+    type: String,
+    values: ['large', 'medium', 'small', 'mini'],
+  },
+
+  button: {
     type: definePropType<ButtonConfigContext>(Object),
-    default: () => {
-      return mutable({
-        autoInsertSpace: false,
-      } as const)
-    },
-  }),
-}
+  },
+} as const)

packages/components/descriptions/src/index.vue

@@ -31,9 +31,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide } from 'vue'
-import { useGlobalConfig } from '@element-plus/utils/util'
+import { defineComponent, provide } from 'vue'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import { useSize } from '@element-plus/hooks'
 import DescriptionsRow from './descriptions-row.vue'
 import { elDescriptionsKey } from './token'
 
@@ -74,10 +74,7 @@ export default defineComponent({
   setup(props, { slots }) {
     provide(elDescriptionsKey, props)
 
-    const $ELEMENT = useGlobalConfig()
-    const descriptionsSize = computed(() => {
-      return props.size || $ELEMENT.size
-    })
+    const descriptionsSize = useSize()
 
     const flattedChildren = (children) => {
       const temp = Array.isArray(children) ? children : [children]

packages/components/dropdown/src/dropdown.vue

@@ -68,7 +68,7 @@ import ElIcon from '@element-plus/components/icon'
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
 import { addUnit } from '@element-plus/utils/util'
 import { ArrowDown } from '@element-plus/icons-vue'
-import { useDropdown } from './useDropdown'
+import { useSize } from '@element-plus/hooks'
 
 import type { Placement } from '@element-plus/components/popper'
 import type { PropType, ComponentPublicInstance, CSSProperties } from 'vue'
@@ -131,7 +131,6 @@ export default defineComponent({
   emits: ['visible-change', 'click', 'command'],
   setup(props, { emit }) {
     const _instance = getCurrentInstance()
-    const { ELEMENT } = useDropdown()
 
     const timeout = ref<Nullable<number>>(null)
 
@@ -224,7 +223,7 @@ export default defineComponent({
       triggerElm.value?.blur?.()
     }
 
-    const dropdownSize = computed(() => props.size || ELEMENT.size)
+    const dropdownSize = useSize()
 
     function commandHandler(...args) {
       emit('command', ...args)

packages/components/dropdown/src/useDropdown.ts

@@ -1,5 +1,5 @@
 import { inject, computed, ref } from 'vue'
-import { generateId, useGlobalConfig } from '@element-plus/utils/util'
+import { generateId } from '@element-plus/utils/util'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { on, addClass } from '@element-plus/utils/dom'
 
@@ -7,12 +7,10 @@ import type { Nullable } from '@element-plus/utils/types'
 import type { IElDropdownInstance } from './dropdown'
 
 export const useDropdown = () => {
-  const ELEMENT = useGlobalConfig()
   const elDropdown = inject<IElDropdownInstance>('elDropdown', {})
   const _elDropdownSize = computed(() => elDropdown?.dropdownSize)
 
   return {
-    ELEMENT,
     elDropdown,
     _elDropdownSize,
   }

packages/components/form/src/form-item.vue

@@ -53,13 +53,10 @@ import {
 } from 'vue'
 import { NOOP } from '@vue/shared'
 import AsyncValidator from 'async-validator'
-import {
-  addUnit,
-  getPropByPath,
-  useGlobalConfig,
-} from '@element-plus/utils/util'
+import { addUnit, getPropByPath } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { elFormItemKey, elFormKey } from '@element-plus/tokens'
+import { useSize } from '@element-plus/hooks'
 import LabelWrap from './label-wrap'
 
 import type { PropType, CSSProperties } from 'vue'
@@ -102,8 +99,6 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
-    const $ELEMENT = useGlobalConfig()
-
     const elForm = inject(elFormKey, {} as ElFormContext)
     const validateState = ref('')
     const validateMessage = ref('')
@@ -196,10 +191,7 @@ export default defineComponent({
       }
       return required
     })
-    const elFormItemSize = computed(() => props.size || elForm.size)
-    const sizeClass = computed<ComponentSize>(() => {
-      return elFormItemSize.value || $ELEMENT.size
-    })
+    const sizeClass = useSize(undefined, { formItem: false })
 
     const validate = (
       trigger: string,

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

@@ -69,7 +69,7 @@ import {
 
 import { ElIcon } from '@element-plus/components/icon'
 import { RepeatClick } from '@element-plus/directives'
-import { useFormItem } from '@element-plus/hooks'
+import { useDisabled, useSize } from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
 import { isNumber } from '@element-plus/utils/util'
 import { debugWarn } from '@element-plus/utils/error'
@@ -126,8 +126,8 @@ export default defineComponent({
       return props.controls && props.controlsPosition === 'right'
     })
 
-    const { size: inputNumberSize, disabled: inputNumberDisabled } =
-      useFormItem({})
+    const inputNumberSize = useSize()
+    const inputNumberDisabled = useDisabled()
 
     const displayValue = computed(() => {
       if (data.userInput !== null) {

packages/components/input/src/input.ts

@@ -1,14 +1,15 @@
 import { isString } from '@vue/shared'
-import { useFormItemProps } from '@element-plus/hooks'
 import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import { useSizeProp } from '@element-plus/hooks'
 import type { StyleValue } from '@element-plus/utils/types'
 import type { ExtractPropTypes, Component } from 'vue'
 
 type AutoSize = { minRows?: number; maxRows?: number } | boolean
 
 export const inputProps = buildProps({
-  ...useFormItemProps,
+  size: useSizeProp,
+  disabled: Boolean,
   modelValue: {
     type: definePropType<string | number | null | undefined>(undefined),
     default: '',

packages/components/input/src/input.vue

@@ -136,7 +136,6 @@
 <script lang="ts">
 import {
   defineComponent,
-  inject,
   computed,
   watch,
   nextTick,
@@ -149,8 +148,12 @@ import {
 import { ElIcon } from '@element-plus/components/icon'
 import { CircleClose, View as IconView } from '@element-plus/icons-vue'
 import { ValidateComponentsMap } from '@element-plus/utils/icon'
-import { elFormKey, elFormItemKey } from '@element-plus/tokens'
-import { useAttrs, useFormItem } from '@element-plus/hooks'
+import {
+  useAttrs,
+  useDisabled,
+  useFormItem,
+  useSize,
+} from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isObject } from '@element-plus/utils/util'
 import isServer from '@element-plus/utils/isServer'
@@ -181,10 +184,9 @@ export default defineComponent({
     const instance = getCurrentInstance()!
     const attrs = useAttrs()
 
-    const elForm = inject(elFormKey, undefined)
-    const elFormItem = inject(elFormItemKey, undefined)
-
-    const { size: inputSize, disabled: inputDisabled } = useFormItem({})
+    const { form, formItem } = useFormItem()
+    const inputSize = useSize()
+    const inputDisabled = useDisabled()
 
     const input = ref<HTMLInputElement>()
     const textarea = ref<HTMLTextAreaElement>()
@@ -196,8 +198,8 @@ export default defineComponent({
 
     const inputOrTextarea = computed(() => input.value || textarea.value)
 
-    const needStatusIcon = computed(() => elForm?.statusIcon ?? false)
-    const validateState = computed(() => elFormItem?.validateState || '')
+    const needStatusIcon = computed(() => form?.statusIcon ?? false)
+    const validateState = computed(() => formItem?.validateState || '')
     const validateIcon = computed(
       () => ValidateComponentsMap[validateState.value]
     )
@@ -337,7 +339,7 @@ export default defineComponent({
       focused.value = false
       emit('blur', event)
       if (props.validateEvent) {
-        elFormItem?.validate?.('blur')
+        formItem?.validate?.('blur')
       }
     }
 
@@ -392,7 +394,7 @@ export default defineComponent({
       () => {
         nextTick(resizeTextarea)
         if (props.validateEvent) {
-          elFormItem?.validate?.('change')
+          formItem?.validate?.('change')
         }
       }
     )

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

@@ -1,10 +1,11 @@
 import { buildProps } from '@element-plus/utils/props'
-import { useFormItemProps } from '@element-plus/hooks'
+import { useSizeProp } from '@element-plus/hooks'
 import { radioEmits } from './radio'
 import type { ExtractPropTypes } from '@vue/runtime-core'
 
 export const radioGroupProps = buildProps({
-  ...useFormItemProps,
+  size: useSizeProp,
+  disabled: Boolean,
   modelValue: {
     type: [String, Number, Boolean],
     default: '',

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

@@ -34,7 +34,7 @@ export default defineComponent({
 
   setup(props, ctx) {
     const radioGroupRef = ref<HTMLDivElement>()
-    const { size, disabled, formItem } = useFormItem({})
+    const { formItem } = useFormItem()
 
     const changeEvent = (value: RadioGroupProps['modelValue']) => {
       ctx.emit(UPDATE_MODEL_EVENT, value)
@@ -100,8 +100,6 @@ export default defineComponent({
     )
 
     return {
-      size,
-      disabled,
       radioGroupRef,
       handleKeydown,
     }

packages/components/radio/src/radio.ts

@@ -3,11 +3,12 @@ import { buildProps } from '@element-plus/utils/props'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import { isBool, isString, isNumber } from '@element-plus/utils/util'
 import { radioGroupKey } from '@element-plus/tokens'
-import { useFormItem, useFormItemProps } from '@element-plus/hooks'
+import { useDisabled, useSize, useSizeProp } from '@element-plus/hooks'
 import type { ExtractPropTypes, SetupContext } from 'vue'
 
 export const radioPropsBase = buildProps({
-  ...useFormItemProps,
+  size: useSizeProp,
+  disabled: Boolean,
   label: {
     type: [String, Number, Boolean],
     default: '',
@@ -56,10 +57,8 @@ export const useRadio = (
     },
   })
 
-  const { size, disabled } = useFormItem({
-    size: computed(() => radioGroup?.size),
-    disabled: computed(() => radioGroup?.disabled),
-  })
+  const size = useSize(computed(() => radioGroup?.size))
+  const disabled = useDisabled(computed(() => radioGroup?.disabled))
   const focus = ref(false)
   const tabIndex = computed(() => {
     return disabled.value || (isGroup.value && modelValue.value !== props.label)

packages/components/select-v2/src/useSelect.ts

@@ -11,14 +11,14 @@ import {
 import { isArray, isFunction, isObject } from '@vue/shared'
 import isEqual from 'lodash/isEqual'
 import lodashDebounce from 'lodash/debounce'
-import { elFormKey, elFormItemKey } from '@element-plus/tokens'
-import { useLocale } from '@element-plus/hooks'
+import { elFormKey } from '@element-plus/tokens'
+import { useLocale, useSize } from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 import {
   addResizeListener,
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
-import { getValueByPath, useGlobalConfig } from '@element-plus/utils/util'
+import { getValueByPath } from '@element-plus/utils/util'
 import { Effect } from '@element-plus/components/popper'
 
 import { ArrowUp } from '@element-plus/icons-vue'
@@ -29,7 +29,7 @@ import { flattenOptions } from './util'
 import { useInput } from './useInput'
 import type { SelectProps } from './defaults'
 import type { ExtractPropTypes, CSSProperties } from 'vue'
-import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
+import type { ElFormContext } from '@element-plus/tokens'
 import type { OptionType, Option } from './select.types'
 
 const DEFAULT_INPUT_PLACEHOLDER = ''
@@ -43,8 +43,6 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
   // inject
   const { t } = useLocale()
   const elForm = inject(elFormKey, {} as ElFormContext)
-  const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
-  const $ELEMENT = useGlobalConfig()
 
   const states = reactive({
     inputValue: DEFAULT_INPUT_PLACEHOLDER,
@@ -182,9 +180,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     filteredOptions.value.every((option) => option.disabled)
   )
 
-  const selectSize = computed(
-    () => props.size || elFormItem.size || $ELEMENT.size
-  )
+  const selectSize = useSize()
 
   const collapseTagSize = computed(() =>
     ['small', 'mini'].indexOf(selectSize.value) > -1 ? 'mini' : 'small'

packages/components/select/src/useSelect.ts

@@ -13,11 +13,11 @@ import lodashDebounce from 'lodash/debounce'
 import isEqual from 'lodash/isEqual'
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useSize } from '@element-plus/hooks'
 import isServer from '@element-plus/utils/isServer'
 import scrollIntoView from '@element-plus/utils/scroll-into-view'
 import { isKorean } from '@element-plus/utils/isDef'
-import { getValueByPath, useGlobalConfig } from '@element-plus/utils/util'
+import { getValueByPath } from '@element-plus/utils/util'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 
 import type { QueryChangeCtx, SelectOptionProxy } from './token'
@@ -56,7 +56,6 @@ export function useSelectStates(props) {
 type States = ReturnType<typeof useSelectStates>
 
 export const useSelect = (props, states: States, ctx) => {
-  const ELEMENT = useGlobalConfig()
   const { t } = useLocale()
 
   // template refs
@@ -146,9 +145,7 @@ export const useSelect = (props, states: States, ctx) => {
     )
   })
 
-  const selectSize = computed(
-    () => props.size || elFormItem.size || ELEMENT.size
-  )
+  const selectSize = useSize()
 
   const collapseTagSize = computed(() =>
     ['small', 'mini'].indexOf(selectSize.value) > -1 ? 'mini' : 'small'

packages/components/table/src/table/style-helper.ts

@@ -13,8 +13,8 @@ import {
   addResizeListener,
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
-import { useGlobalConfig } from '@element-plus/utils/util'
 import { on, off } from '@element-plus/utils/dom'
+import { useSize } from '@element-plus/hooks'
 import { parseHeight } from '../util'
 
 import type { ResizableElement } from '@element-plus/utils/resize-event'
@@ -29,7 +29,6 @@ function useStyle<T>(
   store: Store<T>,
   table: Table<T>
 ) {
-  const $ELEMENT = useGlobalConfig()
   const isHidden = ref(false)
   const renderExpanded = ref(null)
   const resizeProxyVisible = ref(false)
@@ -207,9 +206,7 @@ function useStyle<T>(
       doLayout()
     }
   }
-  const tableSize = computed(() => {
-    return props.size || $ELEMENT.size
-  })
+  const tableSize = useSize()
   const bodyWidth = computed(() => {
     const { bodyWidth: bodyWidth_, scrollY, gutterWidth } = layout
     return bodyWidth_.value

packages/components/tag/src/tag.vue

@@ -27,9 +27,9 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import ElIcon from '@element-plus/components/icon'
-import { useGlobalConfig } from '@element-plus/utils/util'
 import { Close } from '@element-plus/icons-vue'
 
+import { useSize } from '@element-plus/hooks'
 import { tagProps, tagEmits } from './tag'
 
 export default defineComponent({
@@ -41,9 +41,7 @@ export default defineComponent({
   emits: tagEmits,
 
   setup(props, { emit }) {
-    const ELEMENT = useGlobalConfig()
-
-    const tagSize = computed(() => props.size || ELEMENT.size)
+    const tagSize = useSize()
     const classes = computed(() => {
       const { type, hit, effect } = props
       return [

packages/components/time-picker/src/common/picker.vue

@@ -146,14 +146,14 @@ import {
 } from 'vue'
 import dayjs from 'dayjs'
 import isEqual from 'lodash/isEqual'
-import { useLocale } from '@element-plus/hooks'
+import { useLocale, useSize } from '@element-plus/hooks'
 import { ClickOutside } from '@element-plus/directives'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
 import ElInput from '@element-plus/components/input'
 import ElIcon from '@element-plus/components/icon'
 import ElPopper, { Effect } from '@element-plus/components/popper'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { useGlobalConfig, isEmpty } from '@element-plus/utils/util'
+import { isEmpty } from '@element-plus/utils/util'
 import { Clock, Calendar } from '@element-plus/icons-vue'
 import { timePickerDefaultProps } from './props'
 
@@ -226,7 +226,6 @@ export default defineComponent({
   props: timePickerDefaultProps,
   emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],
   setup(props, ctx) {
-    const ELEMENT = useGlobalConfig()
     const { lang } = useLocale()
 
     const elForm = inject(elFormKey, {} as ElFormContext)
@@ -415,9 +414,7 @@ export default defineComponent({
       return props.type.indexOf('range') > -1
     })
 
-    const pickerSize = computed(() => {
-      return props.size || elFormItem.size || ELEMENT.size
-    })
+    const pickerSize = useSize()
 
     const popperPaneRef = computed(() => {
       return refPopper.value?.popperRef

packages/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use-attrs'
+export * from './use-common-props'
 export * from './use-focus'
 export * from './use-form-item'
 export * from './use-global-config'
@@ -8,6 +9,7 @@ export * from './use-modal'
 export * from './use-model-toggle'
 export * from './use-popper'
 export * from './use-prevent-global'
+export * from './use-prop'
 export * from './use-restore-active'
 export * from './use-same-target'
 export * from './use-teleport'

packages/hooks/use-common-props/index.ts

@@ -0,0 +1,49 @@
+import { ref, unref, inject, computed } from 'vue'
+import { useGlobalConfig as useGlobalConfigLegacy } from '@element-plus/utils/util'
+import { elFormItemKey, elFormKey } from '@element-plus/tokens'
+import { buildProp, componentSize } from '@element-plus/utils/props'
+import { useProp, useGlobalConfig } from '..'
+import type { ComponentSize } from '@element-plus/utils/types'
+import type { MaybeRef } from '@vueuse/core'
+
+export const useSizeProp = buildProp({
+  type: String,
+  values: ['', ...componentSize],
+  default: '',
+} as const)
+
+export const useSize = (
+  fallback?: MaybeRef<ComponentSize | '' | undefined>,
+  ignore: Partial<Record<'prop' | 'form' | 'formItem' | 'global', boolean>> = {}
+) => {
+  const emptyRef = ref(undefined)
+
+  const size = ignore.prop ? emptyRef : useProp<ComponentSize>('size')
+  const globalConfig = ignore.global ? emptyRef : useGlobalConfig('size')
+  const globalConfigLegacy = ignore.global
+    ? { size: undefined }
+    : useGlobalConfigLegacy()
+  const form = ignore.form ? { size: undefined } : inject(elFormKey, undefined)
+  const formItem = ignore.formItem
+    ? { size: undefined }
+    : inject(elFormItemKey, undefined)
+
+  return computed(
+    () =>
+      size.value ||
+      unref(fallback) ||
+      formItem?.size ||
+      form?.size ||
+      globalConfig.value ||
+      globalConfigLegacy.size ||
+      ''
+  )
+}
+
+export const useDisabled = (fallback?: MaybeRef<boolean | undefined>) => {
+  const disabled = useProp<boolean>('disabled')
+  const form = inject(elFormKey, undefined)
+  return computed(
+    () => disabled.value || unref(fallback) || form?.disabled || false
+  )
+}

packages/hooks/use-form-item/index.ts

@@ -1,53 +1,10 @@
-import { inject, computed, getCurrentInstance, unref } from 'vue'
+import { inject } from 'vue'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
-import { buildProps, componentSize } from '@element-plus/utils/props'
-import { useGlobalConfig } from '@element-plus/utils/util'
 
-import type { ExtractPropTypes } from 'vue'
-import type { MaybeRef } from '@vueuse/core'
-
-const sizes = ['', ...componentSize] as const
-
-export const useFormItemProps = buildProps({
-  size: {
-    type: String,
-    values: sizes,
-    default: '',
-  },
-  disabled: Boolean,
-} as const)
-export type UseFormItemProps = ExtractPropTypes<typeof useFormItemProps>
-
-export type LocalFallbacks = {
-  size?: MaybeRef<UseFormItemProps['size'] | undefined>
-  disabled?: MaybeRef<UseFormItemProps['disabled'] | undefined>
-}
-
-export const useFormItem = ({ size, disabled }: LocalFallbacks = {}) => {
-  const vm = getCurrentInstance()!
-  const $ELEMENT = useGlobalConfig()
-
-  const props = vm.proxy?.$props as UseFormItemProps
+export const useFormItem = () => {
   const form = inject(elFormKey, undefined)
   const formItem = inject(elFormItemKey, undefined)
-
   return {
-    size: computed(() => {
-      // TODO, fallback to default size like 'medium/large' instead of empty string
-      return (
-        props.size ||
-        unref(size) ||
-        formItem?.size ||
-        form?.size ||
-        $ELEMENT.size ||
-        ''
-      )
-    }),
-    disabled: computed(() => {
-      return (
-        props.disabled === true || unref(disabled) || form?.disabled || false
-      )
-    }),
     form,
     formItem,
   }

packages/hooks/use-global-config/index.ts

@@ -1,12 +1,17 @@
-import { inject } from 'vue'
+import { inject, toRef } from 'vue'
 import { configProviderContextKey } from '@element-plus/tokens'
+import type { Ref } from 'vue'
 import type { ConfigProviderContext } from '@element-plus/tokens'
 
-const defaultConfig: ConfigProviderContext = {
-  button: {
-    autoInsertSpace: false,
-  },
+export function useGlobalConfig<K extends keyof ConfigProviderContext>(
+  key: K
+): Ref<ConfigProviderContext[K]>
+export function useGlobalConfig(): ConfigProviderContext
+export function useGlobalConfig(key?: keyof ConfigProviderContext) {
+  const config = inject(configProviderContextKey, {})
+  if (key) {
+    return toRef(config, key)
+  } else {
+    return config
+  }
 }
-
-export const useGlobalConfig = () =>
-  inject(configProviderContextKey, defaultConfig)

packages/hooks/use-prop/index.ts

@@ -0,0 +1,7 @@
+import { getCurrentInstance, computed } from 'vue'
+import type { ComputedRef } from 'vue'
+
+export const useProp = <T>(name: string): ComputedRef<T | undefined> => {
+  const vm = getCurrentInstance()!
+  return computed(() => vm.proxy?.$props[name] ?? undefined)
+}

packages/tokens/form.ts

@@ -16,7 +16,7 @@ export interface ElFormContext {
   inline?: boolean
   inlineMessage?: boolean
   model?: Record<string, unknown>
-  size?: string
+  size?: ComponentSize
   showMessage?: boolean
   labelPosition?: string
   labelWidth?: string | number

packages/utils/util.ts

@@ -17,7 +17,7 @@ import isServer from './isServer'
 import { debugWarn, throwError } from './error'
 
 import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue'
-import type { TimeoutHandle, Nullable } from './types'
+import type { TimeoutHandle, Nullable, ComponentSize } from './types'
 
 export const SCOPE = 'Util'
 
@@ -178,7 +178,10 @@ export function isUndefined(val: any): val is undefined {
   return val === undefined
 }
 
-export function useGlobalConfig() {
+/**
+ * @deprecated please use `useGlobalConfig` in hooks.
+ */
+export function useGlobalConfig(): { size?: ComponentSize; zIndex?: number } {
   const vm: any = getCurrentInstance()
   if ('$ELEMENT' in vm.proxy) {
     return vm.proxy.$ELEMENT