refactor(use-form-item): add mergedDisabled option

src/_mixins/use-form-item.ts

@@ -28,6 +28,7 @@ export const formItemInjectionKey: InjectionKey<FormItemInjection> =
 interface UseFormItemOptions<T> {
   defaultSize?: FormItemSize
   mergedSize?: (formItem: FormItemInjection | null) => T
+  mergedDisabled?: (formItem: FormItemInjection | null) => boolean
 }
 
 interface UseFormItemProps<T> {
@@ -46,7 +47,11 @@ export interface UseFormItem<T> {
 
 export default function useFormItem<T extends AllowedSize = FormItemSize> (
   props: UseFormItemProps<T>,
-  { defaultSize = 'medium', mergedSize }: UseFormItemOptions<T> = {}
+  {
+    defaultSize = 'medium',
+    mergedSize,
+    mergedDisabled
+  }: UseFormItemOptions<T> = {}
 ): UseFormItem<T> {
   const NFormItem = inject(formItemInjectionKey, null)
   provide(formItemInjectionKey, null)
@@ -65,7 +70,10 @@ export default function useFormItem<T extends AllowedSize = FormItemSize> (
           return defaultSize as T
         }
   )
-  const mergedDisabledRef = computed(() => {
+  const mergedDisabledRef = computed(
+    mergedDisabled
+      ? () => mergedDisabled(NFormItem)
+      : () => {
           const { disabled } = props
           if (disabled !== undefined) {
             return disabled
@@ -74,7 +82,8 @@ export default function useFormItem<T extends AllowedSize = FormItemSize> (
             return NFormItem.disabled.value
           }
           return false
-  })
+        }
+  )
   onBeforeUnmount(() => {
     if (NFormItem) {
       NFormItem.restoreValidation()

src/checkbox/src/Checkbox.tsx

@@ -93,30 +93,10 @@ export default defineComponent({
           if (mergedSize !== undefined) return mergedSize.value
         }
         return 'medium'
-      }
+      },
-    })
+      mergedDisabled (NFormItem) {
-    const { mergedSizeRef, mergedDisabledRef: mergedFormItemDisabledRef } =
+        const { disabled } = props
-      formItem
+        if (disabled !== undefined) return disabled
-    const NCheckboxGroup = inject(checkboxGroupInjectionKey, null)
-    const uncontrolledCheckedRef = ref(props.defaultChecked)
-    const controlledCheckedRef = toRef(props, 'checked')
-    const mergedCheckedRef = useMergedState(
-      controlledCheckedRef,
-      uncontrolledCheckedRef
-    )
-    const renderedCheckedRef = useMemo(() => {
-      if (NCheckboxGroup) {
-        const groupValueSet = NCheckboxGroup.valueSetRef.value
-        if (groupValueSet && props.value !== undefined) {
-          return groupValueSet.has(props.value)
-        }
-        return false
-      } else {
-        return mergedCheckedRef.value
-      }
-    })
-    const mergedDisabledRef = useMemo(() => {
-      if (props.disabled) return true
         if (NCheckboxGroup) {
           if (NCheckboxGroup.disabledRef.value) return true
           const {
@@ -141,10 +121,30 @@ export default defineComponent({
             return true
           }
         }
-      if (formItem) {
+        if (NFormItem) {
-        return mergedFormItemDisabledRef.value
+          return NFormItem.disabled.value
         }
         return false
+      }
+    })
+    const { mergedDisabledRef, mergedSizeRef } = formItem
+    const NCheckboxGroup = inject(checkboxGroupInjectionKey, null)
+    const uncontrolledCheckedRef = ref(props.defaultChecked)
+    const controlledCheckedRef = toRef(props, 'checked')
+    const mergedCheckedRef = useMergedState(
+      controlledCheckedRef,
+      uncontrolledCheckedRef
+    )
+    const renderedCheckedRef = useMemo(() => {
+      if (NCheckboxGroup) {
+        const groupValueSet = NCheckboxGroup.valueSetRef.value
+        if (groupValueSet && props.value !== undefined) {
+          return groupValueSet.has(props.value)
+        }
+        return false
+      } else {
+        return mergedCheckedRef.value
+      }
     })
     const themeRef = useTheme(
       'Checkbox',

src/radio/src/use-radio.ts

@@ -23,10 +23,7 @@ const radioProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  defaultChecked: {
+  defaultChecked: Boolean,
-    type: Boolean,
-    default: false
-  },
   disabled: {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
@@ -96,10 +93,15 @@ function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
         return NFormItem.mergedSize.value
       }
       return 'medium'
+    },
+    mergedDisabled (NFormItem) {
+      if (props.disabled) return true
+      if (NRadioGroup?.disabledRef.value) return true
+      if (NFormItem?.disabled.value) return true
+      return false
     }
   })
-  const { mergedSizeRef, mergedDisabledRef: mergedFormItemDisabledRef } =
+  const { mergedSizeRef, mergedDisabledRef } = formItem
-    formItem
   const inputRef = ref<HTMLElement | null>(null)
   const labelRef = ref<HTMLElement | null>(null)
   const NRadioGroup = inject(radioGroupInjectionKey, null)
@@ -118,16 +120,6 @@ function setup (props: ExtractPropTypes<typeof radioProps>): UseRadio {
     if (name !== undefined) return name
     if (NRadioGroup) return NRadioGroup.nameRef.value
   })
-  const mergedDisabledRef = useMemo(() => {
-    if (props.disabled) return true
-    if (NRadioGroup) {
-      return NRadioGroup.disabledRef.value
-    }
-    if (formItem) {
-      return mergedFormItemDisabledRef.value
-    }
-    return false
-  })
   const focusRef = ref(false)
   function doUpdateChecked (): void {
     if (NRadioGroup) {