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,16 +70,20 @@ export default function useFormItem<T extends AllowedSize = FormItemSize> (
           return defaultSize as T
         }
   )
-  const mergedDisabledRef = computed(() => {
-    const { disabled } = props
-    if (disabled !== undefined) {
-      return disabled
-    }
-    if (NFormItem) {
-      return NFormItem.disabled.value
-    }
-    return false
-  })
+  const mergedDisabledRef = computed(
+    mergedDisabled
+      ? () => mergedDisabled(NFormItem)
+      : () => {
+          const { disabled } = props
+          if (disabled !== undefined) {
+            return disabled
+          }
+          if (NFormItem) {
+            return NFormItem.disabled.value
+          }
+          return false
+        }
+  )
   onBeforeUnmount(() => {
     if (NFormItem) {
       NFormItem.restoreValidation()

src/checkbox/src/Checkbox.tsx

@@ -93,10 +93,41 @@ export default defineComponent({
           if (mergedSize !== undefined) return mergedSize.value
         }
         return 'medium'
+      },
+      mergedDisabled (NFormItem) {
+        const { disabled } = props
+        if (disabled !== undefined) return disabled
+        if (NCheckboxGroup) {
+          if (NCheckboxGroup.disabledRef.value) return true
+          const {
+            maxRef: { value: max },
+            checkedCountRef
+          } = NCheckboxGroup
+          if (
+            max !== undefined &&
+            checkedCountRef.value >= max &&
+            !renderedCheckedRef.value
+          ) {
+            return true
+          }
+          const {
+            minRef: { value: min }
+          } = NCheckboxGroup
+          if (
+            min !== undefined &&
+            checkedCountRef.value <= min &&
+            renderedCheckedRef.value
+          ) {
+            return true
+          }
+        }
+        if (NFormItem) {
+          return NFormItem.disabled.value
+        }
+        return false
       }
     })
-    const { mergedSizeRef, mergedDisabledRef: mergedFormItemDisabledRef } =
-      formItem
+    const { mergedDisabledRef, mergedSizeRef } = formItem
     const NCheckboxGroup = inject(checkboxGroupInjectionKey, null)
     const uncontrolledCheckedRef = ref(props.defaultChecked)
     const controlledCheckedRef = toRef(props, 'checked')
@@ -115,37 +146,6 @@ export default defineComponent({
         return mergedCheckedRef.value
       }
     })
-    const mergedDisabledRef = useMemo(() => {
-      if (props.disabled) return true
-      if (NCheckboxGroup) {
-        if (NCheckboxGroup.disabledRef.value) return true
-        const {
-          maxRef: { value: max },
-          checkedCountRef
-        } = NCheckboxGroup
-        if (
-          max !== undefined &&
-          checkedCountRef.value >= max &&
-          !renderedCheckedRef.value
-        ) {
-          return true
-        }
-        const {
-          minRef: { value: min }
-        } = NCheckboxGroup
-        if (
-          min !== undefined &&
-          checkedCountRef.value <= min &&
-          renderedCheckedRef.value
-        ) {
-          return true
-        }
-      }
-      if (formItem) {
-        return mergedFormItemDisabledRef.value
-      }
-      return false
-    })
     const themeRef = useTheme(
       'Checkbox',
       'Checkbox',

src/radio/src/use-radio.ts

@@ -23,10 +23,7 @@ const radioProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
-  defaultChecked: {
-    type: Boolean,
-    default: false
-  },
+  defaultChecked: Boolean,
   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 } =
-    formItem
+  const { mergedSizeRef, mergedDisabledRef } = 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) {