fix(radio): fix cascader bug caused by radio also removed ElFormItemSize (#521)

packages/cascader-panel/src/node.vue

@@ -33,6 +33,7 @@
       :label="node.uid"
       :disabled="isDisabled"
       @change="handleCheck"
+      @update:model-value="handleCheck"
       @click.stop
     >
       <!-- add an empty element to avoid render label -->

packages/element-plus/index.ts

@@ -59,8 +59,6 @@ import ElPopover from '@element-plus/popover'
 import ElCascader from '@element-plus/cascader'
 import ElCascaderPanel from '@element-plus/cascader-panel'
 
-import { ElFormItemSize } from '@element-plus/form/src/token'
-
 export {
   ElAlert,
   ElAvatar,
@@ -121,12 +119,12 @@ export {
 }
 
 interface InstallOptions {
-  size: ElFormItemSize
+  size: ComponentSize
   zIndex: number
 }
 
 const defaultInstallOpt =  {
-  size: '' as ElFormItemSize,
+  size: '' as ComponentSize,
   zIndex: 2000,
 }
 

packages/form/src/form-item.vue

@@ -62,7 +62,7 @@ import { RuleItem } from 'async-validator'
 import LabelWrap from './label-wrap'
 import { getPropByPath, useGlobalConfig } from '@element-plus/utils/util'
 import mitt from 'mitt'
-import { elFormKey, elFormItemKey, ValidateFieldCallback, ElFormItemSize } from './token'
+import { elFormKey, elFormItemKey, ValidateFieldCallback } from './token'
 
 export default defineComponent({
   name: 'ElFormItem',
@@ -90,7 +90,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    size: String as PropType<ElFormItemSize>,
+    size: String as PropType<ComponentSize>,
   },
   setup(props) {
     const formItemMitt = mitt()
@@ -317,10 +317,8 @@ export default defineComponent({
       formItemMitt.off('el.form.change', onFieldChange)
     }
 
-    const refedProps = toRefs(props)
     const elFormItem = reactive({
-      ...refedProps,
-      elFormItemSize: refedProps.size,
+      ...toRefs(props),
       removeValidateEvents,
       addValidateEvents,
       resetField,

packages/form/src/token.ts

@@ -4,12 +4,6 @@ import type {
   FieldErrorList,
 } from 'async-validator'
 
-export enum ElFormItemSize {
-  MINI = 'mini',
-  SMALL = 'small',
-  MEDIUM = 'medium',
-}
-
 export interface ElFormContext {
   registerLabelWidth(width: number, oldWidth: number): void
   deregisterLabelWidth(width: number): void
@@ -36,7 +30,6 @@ export interface ValidateFieldCallback {
 export interface ElFormItemContext {
   prop?: string
   formItemMitt: Emitter
-  elFormItemSize: ElFormItemSize
   validate(trigger?: string, callback?: ValidateFieldCallback): void
   updateComputedLabelWidth(width: number): void
   addValidateEvents(): void
@@ -44,7 +37,7 @@ export interface ElFormItemContext {
   resetField(): void
   clearValidate(): void
 
-  size?: string
+  size?: ComponentSize
 }
 
 // TODO: change it to symbol

packages/radio/src/radio-button.vue

@@ -68,8 +68,6 @@ export default {
       return radioGroup.radioGroupSize || elFormItemSize.value || ELEMENT.size
     })
 
-    console.log(size.value)
-
     const value = computed<boolean | string | number>({
       get() {
         return radioGroup.modelValue

packages/radio/src/radio-group.vue

@@ -25,7 +25,6 @@ import { ElFormItemContext, elFormItemKey } from '@element-plus/form/src/token'
 import radioGroupKey from './token'
 
 import type { PropType } from 'vue'
-import type { ElFormItemSize } from '@element-plus/form/src/token'
 
 export default {
   name: 'ElRadioGroup',
@@ -38,7 +37,7 @@ export default {
       default: '',
     },
     size: {
-      type: String as PropType<ElFormItemSize>,
+      type: String as PropType<ComponentSize>,
       validator: (val: string) => {
         return ['mini', 'small', 'medium'].includes(val)
       },
@@ -61,8 +60,8 @@ export default {
 
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
 
-    const radioGroupSize = computed<ElFormItemSize>(() => {
-      return props.size || elFormItem.elFormItemSize || '' as ElFormItemSize
+    const radioGroupSize = computed<ComponentSize>(() => {
+      return props.size || elFormItem.size || '' as ComponentSize
     })
 
     const modelValue = computed<boolean | string | number>({

packages/radio/src/token.ts

@@ -1,12 +1,11 @@
 import type { InjectionKey } from 'vue'
-import { ElFormItemSize } from '@element-plus/form/src/token'
 
 type IModelType = boolean | string | number
 
 export interface RadioGroupContext {
   name: string
   changeEvent: (val: IModelType) => void
-  radioGroupSize: ElFormItemSize
+  radioGroupSize: ComponentSize
   fill: string
   textColor: string
   disabled: boolean

packages/radio/src/useRadio.ts

@@ -15,7 +15,7 @@ export const useRadio = () => {
   const radioGroup = inject(radioGroupKey, {} as RadioGroupContext)
   const focus = ref(false)
   const isGroup = computed(() => radioGroup?.name === 'ElRadioGroup')
-  const elFormItemSize = computed(() => elFormItem.elFormItemSize || ELEMENT.size)
+  const elFormItemSize = computed(() => elFormItem.size || ELEMENT.size)
 
   return {
     isGroup,