refactor:checkbox (#6248)

* refactor:checkbox

* docs:update & refactor: checkbox type

Author: shifeng1993

components/checkbox/Checkbox.tsx

@@ -11,6 +11,9 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 import type { CheckboxChangeEvent, CheckboxProps } from './interface';
 import { CheckboxGroupContextKey, checkboxProps } from './interface';
 
+// CSSINJS
+import useStyle from './style';
+
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ACheckbox',
@@ -22,6 +25,10 @@ export default defineComponent({
     const formItemContext = useInjectFormItemContext();
     const formItemInputContext = FormItemInputContext.useInject();
     const { prefixCls, direction } = useConfigInject('checkbox', props);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
     const uniId = Symbol('checkboxUniId');
 
@@ -90,12 +97,16 @@ export default defineComponent({
           [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
         },
         className,
+        hashId.value,
+      );
+      const checkboxClass = classNames(
+        {
+          [`${prefixCls.value}-indeterminate`]: indeterminate,
+        },
+        hashId.value,
       );
-      const checkboxClass = classNames({
-        [`${prefixCls.value}-indeterminate`]: indeterminate,
-      });
       const ariaChecked = indeterminate ? 'mixed' : undefined;
-      return (
+      return wrapSSR(
         <label
           class={classString}
           style={style as CSSProperties}
@@ -109,7 +120,7 @@ export default defineComponent({
             ref={checkboxRef}
           />
           {children.length ? <span>{children}</span> : null}
-        </label>
+        </label>,
       );
     };
   },

components/checkbox/Group.tsx

@@ -5,14 +5,23 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 import type { CheckboxOptionType } from './interface';
 import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
 
+// CSSINJS
+import useStyle from './style';
+
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ACheckboxGroup',
+  inheritAttrs: false,
   props: checkboxGroupProps(),
   // emits: ['change', 'update:value'],
-  setup(props, { slots, emit, expose }) {
+  setup(props, { slots, attrs, emit, expose }) {
     const formItemContext = useInjectFormItemContext();
     const { prefixCls, direction } = useConfigInject('checkbox', props);
+    const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
+
+    // style
+    const [wrapSSR, hashId] = useStyle(groupPrefixCls);
+
     const mergedValue = ref((props.value === undefined ? props.defaultValue : props.value) || []);
     watch(
       () => props.value,
@@ -87,7 +96,6 @@ export default defineComponent({
     return () => {
       const { id = formItemContext.id.value } = props;
       let children = null;
-      const groupPrefixCls = `${prefixCls.value}-group`;
       if (options.value && options.value.length > 0) {
         children = options.value.map(option => (
           <Checkbox
@@ -98,19 +106,25 @@ export default defineComponent({
             value={option.value}
             checked={mergedValue.value.indexOf(option.value) !== -1}
             onChange={option.onChange}
-            class={`${groupPrefixCls}-item`}
+            class={`${groupPrefixCls.value}-item`}
           >
             {option.label === undefined ? slots.label?.(option) : option.label}
           </Checkbox>
         ));
       }
-      return (
+      return wrapSSR(
         <div
-          class={[groupPrefixCls, { [`${groupPrefixCls}-rtl`]: direction.value === 'rtl' }]}
+          {...attrs}
+          class={[
+            groupPrefixCls.value,
+            { [`${groupPrefixCls.value}-rtl`]: direction.value === 'rtl' },
+            attrs.class,
+            hashId.value,
+          ]}
           id={id}
         >
           {children || slots.default?.()}
-        </div>
+        </div>,
       );
     };
   },

components/checkbox/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Entry
 title: Checkbox
-cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Checkbox component.

components/checkbox/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 subtitle: 多选框
 type: 数据录入
 title: Checkbox
-cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 多选框。

components/checkbox/interface.ts

@@ -1,7 +1,8 @@
-import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue';
+import type { ExtractPropTypes, InjectionKey, Ref } from 'vue';
 import type { MouseEventHandler } from '../_util/EventInterface';
 import type { VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
+import { booleanType, functionType, stringType, arrayType } from '../_util/type';
 
 export type CheckboxValueType = string | number | boolean;
 export interface CheckboxOptionType {
@@ -27,10 +28,9 @@ export const abstractCheckboxGroupProps = () => {
   return {
     name: String,
     prefixCls: String,
-    options: {
-      type: Array as PropType<Array<CheckboxOptionType | string | number>>,
-      default: () => [] as Array<CheckboxOptionType | string | number>,
-    },
+    options: arrayType<Array<CheckboxOptionType | string | number>>(
+      [] as Array<CheckboxOptionType | string | number>,
+    ),
     disabled: Boolean,
     id: String,
   };
@@ -39,12 +39,10 @@ export const abstractCheckboxGroupProps = () => {
 export const checkboxGroupProps = () => {
   return {
     ...abstractCheckboxGroupProps(),
-    defaultValue: { type: Array as PropType<Array<CheckboxValueType>> },
-    value: { type: Array as PropType<Array<CheckboxValueType>> },
-    onChange: { type: Function as PropType<(checkedValue: Array<CheckboxValueType>) => void> },
-    'onUpdate:value': {
-      type: Function as PropType<(checkedValue: Array<CheckboxValueType>) => void>,
-    },
+    defaultValue: arrayType<Array<CheckboxValueType>>(),
+    value: arrayType<Array<CheckboxValueType>>(),
+    onChange: functionType<(checkedValue: Array<CheckboxValueType>) => void>(),
+    'onUpdate:value': functionType<(checkedValue: Array<CheckboxValueType>) => void>(),
   };
 };
 
@@ -53,27 +51,27 @@ export type CheckboxGroupProps = Partial<ExtractPropTypes<ReturnType<typeof chec
 export const abstractCheckboxProps = () => {
   return {
     prefixCls: String,
-    defaultChecked: { type: Boolean, default: undefined },
-    checked: { type: Boolean, default: undefined },
-    disabled: { type: Boolean, default: undefined },
-    isGroup: { type: Boolean, default: undefined },
+    defaultChecked: booleanType(),
+    checked: booleanType(),
+    disabled: booleanType(),
+    isGroup: booleanType(),
     value: PropTypes.any,
     name: String,
     id: String,
-    indeterminate: { type: Boolean, default: undefined },
-    type: { type: String, default: 'checkbox' },
-    autofocus: { type: Boolean, default: undefined },
-    onChange: Function as PropType<(e: CheckboxChangeEvent) => void>,
-    'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
-    onClick: Function as PropType<MouseEventHandler>,
-    skipGroup: { type: Boolean, default: false },
+    indeterminate: booleanType(),
+    type: stringType('checkbox'),
+    autofocus: booleanType(),
+    onChange: functionType<(e: CheckboxChangeEvent) => void>(),
+    'onUpdate:checked': functionType<(checked: boolean) => void>(),
+    onClick: functionType<MouseEventHandler>(),
+    skipGroup: booleanType(false),
   };
 };
 
 export const checkboxProps = () => {
   return {
     ...abstractCheckboxProps(),
-    indeterminate: { type: Boolean, default: false },
+    indeterminate: booleanType(false),
   };
 };