refactor(checkbox-group): optimize code

varletjs · May 19, 2024 · e3b2132 · e3b2132
1 parent 76bb016
commit e3b2132
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue b/packages/varlet-ui/src/checkbox-group/CheckboxGroup.vue
@@ -1,8 +1,16 @@
 <template>
   <div :class="n('wrap')">
     <div :class="classes(n(), n(`--${direction}`))">
-      <checkbox-group-option v-if="checkboxGroupOptions.length" :options="checkboxGroupOptions" />
-      <slot v-else />
+      <template v-if="checkboxGroupOptions.length">
+        <checkbox-group-option
+          v-for="option in checkboxGroupOptions"
+          :key="option.value.toString()"
+          :checked-value="option.value"
+          :label="option.label"
+          :disabled="option.disabled"
+        />
+      </template>
+      <slot />
     </div>
     <var-form-details :error-message="errorMessage" />
   </div>
@@ -16,7 +24,7 @@ import { props, type CheckboxGroupValidateTrigger } from './props'
 import { useValidation, createNamespace } from '../utils/components'
 import { useCheckboxes, type CheckboxGroupProvider } from './provide'
 import { useForm } from '../form/provide'
-import { uniq, call, isArray, isFunction } from '@varlet/shared'
+import { uniq, call, isArray } from '@varlet/shared'
 
 const { name, n, classes } = createNamespace('checkbox-group')
 
@@ -143,7 +151,6 @@ export default defineComponent({
       reset,
       validate,
       resetValidation,
-      isFunction,
     }
   },
 })

diff --git a/packages/varlet-ui/src/checkbox-group/CheckboxGroupOption.tsx b/packages/varlet-ui/src/checkbox-group/CheckboxGroupOption.tsx
@@ -1,5 +1,4 @@
-import { defineComponent } from 'vue'
-import { CheckboxGroupOption } from './props'
+import { defineComponent, type RenderFunction, type PropType } from 'vue'
 import Checkbox from '../checkbox'
 import { isFunction } from '@varlet/shared'
 
@@ -8,17 +7,15 @@ import '../checkbox/checkbox.less'
 export default defineComponent({
   name: 'CheckboxGroupOption',
   props: {
-    options: {
-      type: Array<CheckboxGroupOption>,
-      default: () => [],
-    },
+    label: [String, Function] as PropType<string | RenderFunction>,
+    checkedValue: [String, Number, Boolean, Object, Array] as PropType<any>,
+    disabled: Boolean,
   },
   setup(props) {
-    return () =>
-      props.options.map((option) => (
-        <Checkbox key={option.value.toString()} checkedValue={option.value} disabled={option.disabled}>
-          {isFunction(option.label) ? option.label() : option.label}
-        </Checkbox>
-      ))
+    return () => (
+      <Checkbox checkedValue={props.checkedValue} disabled={props.disabled}>
+        {isFunction(props.label) ? props.label() : props.label}
+      </Checkbox>
+    )
   },
 })