feat(checkbox): update checkbox (#2376)

* feat(checkbox): update checkbox

* feat(checkbox): code review

* feat(checkbox): code review

* feat(checkbox): fix lint

components/_util/vue-types/utils.js

@@ -82,8 +82,7 @@ export const withDefault = function(type) {
         return this;
       }
       this.default =
-        isArray(def) ||
-        isPlainObject(def)
+        isArray(def) || isPlainObject(def)
           ? function() {
               return def;
             }

components/checkbox/Checkbox.jsx

@@ -1,18 +1,15 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import VcCheckbox from '../vc-checkbox';
-import hasProp, { getOptionProps, getAttrs, getListeners } from '../_util/props-util';
+import hasProp, { getOptionProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
-function noop() {}
 
 export default {
   name: 'ACheckbox',
   inheritAttrs: false,
   __ANT_CHECKBOX: true,
-  model: {
-    prop: 'checked',
-  },
   props: {
     prefixCls: PropTypes.string,
     defaultChecked: PropTypes.bool,
@@ -26,10 +23,14 @@ export default {
     type: PropTypes.string.def('checkbox'),
     autoFocus: PropTypes.bool,
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-    checkboxGroupContext: { default: () => undefined },
+
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+      checkboxGroupContext: inject('checkboxGroupContext', undefined),
+    };
   },
+
   watch: {
     value(value, prevValue) {
       this.$nextTick(() => {
@@ -41,6 +42,7 @@ export default {
       });
     },
   },
+
   mounted() {
     const { value, checkboxGroupContext: checkboxGroup = {} } = this;
     if (checkboxGroup.registerValue) {
@@ -74,41 +76,48 @@ export default {
   },
 
   render() {
-    const { checkboxGroupContext: checkboxGroup, $slots } = this;
     const props = getOptionProps(this);
-    const children = $slots.default;
-    const { mouseenter = noop, mouseleave = noop, input, ...restListeners } = getListeners(this);
-    const { prefixCls: customizePrefixCls, indeterminate, ...restProps } = props;
+    const { checkboxGroupContext: checkboxGroup, $slots, $attrs } = this;
+    const children = $slots.default && $slots.default();
+    const { indeterminate, prefixCls: customizePrefixCls, ...restProps } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-
+    const { onMouseenter, onMouseleave, onInput, class: className, style, ...restAttrs } = $attrs;
     const checkboxProps = {
-      props: { ...restProps, prefixCls },
-      on: restListeners,
-      attrs: getAttrs(this),
+      ...restProps,
+      prefixCls,
+      ...restAttrs,
     };
     if (checkboxGroup) {
-      checkboxProps.on.change = (...args) => {
+      checkboxProps.onChange = (...args) => {
         this.$emit('change', ...args);
         checkboxGroup.toggleOption({ label: children, value: props.value });
       };
-      checkboxProps.props.name = checkboxGroup.name;
-      checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1;
-      checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled;
-      checkboxProps.props.indeterminate = indeterminate;
+      checkboxProps.name = checkboxGroup.name;
+      checkboxProps.checked = checkboxGroup.sValue.indexOf(props.value) !== -1;
+      checkboxProps.disabled = props.disabled || checkboxGroup.disabled;
+      checkboxProps.indeterminate = indeterminate;
     } else {
-      checkboxProps.on.change = this.handleChange;
+      checkboxProps.onChange = this.handleChange;
     }
-    const classString = classNames({
-      [`${prefixCls}-wrapper`]: true,
-      [`${prefixCls}-wrapper-checked`]: checkboxProps.props.checked,
-      [`${prefixCls}-wrapper-disabled`]: checkboxProps.props.disabled,
-    });
+    const classString = classNames(
+      {
+        [`${prefixCls}-wrapper`]: true,
+        [`${prefixCls}-wrapper-checked`]: checkboxProps.checked,
+        [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
+      },
+      className,
+    );
     const checkboxClass = classNames({
       [`${prefixCls}-indeterminate`]: indeterminate,
     });
     return (
-      <label class={classString} onMouseenter={mouseenter} onMouseleave={mouseleave}>
+      <label
+        class={classString}
+        style={style}
+        onMouseenter={onMouseenter}
+        onMouseenter={onMouseleave}
+      >
         <VcCheckbox {...checkboxProps} class={checkboxClass} ref="vcCheckbox" />
         {children !== undefined && <span>{children}</span>}
       </label>

components/checkbox/Group.jsx

@@ -1,3 +1,4 @@
+import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import Checkbox from './Checkbox';
 import hasProp from '../_util/props-util';
@@ -17,14 +18,7 @@ export default {
     options: PropTypes.array.def([]),
     disabled: PropTypes.bool,
   },
-  provide() {
-    return {
-      checkboxGroupContext: this,
-    };
-  },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
+
   data() {
     const { value, defaultValue } = this;
     return {
@@ -37,9 +31,13 @@ export default {
       this.sValue = val || [];
     },
   },
+  created() {
+    (this.configProvider = inject('configProvider', ConfigConsumerProps)),
+      provide('checkboxGroupContext', this);
+  },
   methods: {
     getOptions() {
-      const { options, $scopedSlots } = this;
+      const { options, $slots } = this;
       return options.map(option => {
         if (typeof option === 'string') {
           return {
@@ -48,8 +46,8 @@ export default {
           };
         }
         let label = option.label;
-        if (label === undefined && $scopedSlots.label) {
-          label = $scopedSlots.label(option);
+        if (label === undefined && $slots.label) {
+          label = $slots.label(option);
         }
         return { ...option, label };
       });
@@ -90,7 +88,6 @@ export default {
     const { prefixCls: customizePrefixCls, options } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-
     let children = $slots.default;
     const groupPrefixCls = `${prefixCls}-group`;
     if (options && options.length > 0) {

components/checkbox/index.js

@@ -1,14 +1,12 @@
 import Checkbox from './Checkbox';
 import CheckboxGroup from './Group';
-import Base from '../base';
 
 Checkbox.Group = CheckboxGroup;
 
 /* istanbul ignore next */
-Checkbox.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Checkbox.name, Checkbox);
-  Vue.component(CheckboxGroup.name, CheckboxGroup);
+Checkbox.install = function(app) {
+  app.component(Checkbox.name, Checkbox);
+  app.component(CheckboxGroup.name, CheckboxGroup);
 };
 
 export default Checkbox;

components/radio/Group.jsx

@@ -82,13 +82,9 @@ export default {
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
     const groupPrefixCls = `${prefixCls}-group`;
-    const classString = classNames(
-      groupPrefixCls,
-      `${groupPrefixCls}-${buttonStyle}`,
-      {
-        [`${groupPrefixCls}-${props.size}`]: props.size,
-      },
-    );
+    const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
+      [`${groupPrefixCls}-${props.size}`]: props.size,
+    });
 
     let children = filterEmpty(getSlot(this));
 
@@ -122,12 +118,6 @@ export default {
       });
     }
 
-    return (
-      <div
-        class={classString}
-      >
-        {children}
-      </div>
-    );
+    return <div class={classString}>{children}</div>;
   },
 };

components/radio/Radio.jsx

@@ -69,16 +69,14 @@ export default {
     } else {
       radioProps.onChange = this.handleChange;
     }
-    const wrapperClassString = classNames( {
+    const wrapperClassString = classNames({
       [`${prefixCls}-wrapper`]: true,
       [`${prefixCls}-wrapper-checked`]: radioProps.checked,
       [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
     });
 
     return (
-      <label
-        class={wrapperClassString}
-      >
+      <label class={wrapperClassString}>
         <VcCheckbox {...radioProps} ref="vcCheckbox" />
         {$slots.default && <span>{$slots.default()}</span>}
       </label>

components/table/Table.jsx

@@ -158,7 +158,7 @@ export default {
       sPagination: this.getDefaultPagination(this.$props),
       pivot: undefined,
       sComponents: createComponents(this.components),
-      filterDataCnt: 0
+      filterDataCnt: 0,
     };
   },
   watch: {

components/vc-checkbox/src/Checkbox.jsx

@@ -108,6 +108,7 @@ export default {
       value,
       ...others
     } = getOptionProps(this);
+    const { class: className } = this.$attrs;
     const globalProps = Object.keys({ ...others, ...this.$attrs }).reduce((prev, key) => {
       if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
         prev[key] = others[key];
@@ -116,31 +117,29 @@ export default {
     }, {});
 
     const { sChecked } = this;
-    const classString = classNames(prefixCls, {
+    const classString = classNames(prefixCls, className, {
       [`${prefixCls}-checked`]: sChecked,
       [`${prefixCls}-disabled`]: disabled,
     });
+    const inputProps = {
+      name,
+      id,
+      type,
+      readOnly,
+      disabled,
+      tabIndex,
+      class: `${prefixCls}-input`,
+      checked: !!sChecked,
+      autoFocus,
+      value,
+      ...globalProps,
+      onChange: this.handleChange,
+      onClick: this.onClick,
+    };
 
     return (
       <span class={classString}>
-        <input
-          name={name}
-          id={id}
-          type={type}
-          readOnly={readOnly}
-          disabled={disabled}
-          tabIndex={tabIndex}
-          class={`${prefixCls}-input`}
-          checked={!!sChecked}
-          autoFocus={autoFocus}
-          ref="input"
-          value={value}
-          onChange={this.handleChange}
-          onClick={this.onClick}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          {...globalProps}
-        />
+        <input ref="input" {...inputProps} />
         <span class={`${prefixCls}-inner`} />
       </span>
     );

examples/index.js

@@ -18,6 +18,7 @@ import PageHeader from 'ant-design-vue/page-header';
 import Skeleton from 'ant-design-vue/skeleton';
 import Empty from 'ant-design-vue/empty';
 import Timeline from 'ant-design-vue/timeline';
+import Checkbox from 'ant-design-vue/checkbox';
 import Col from 'ant-design-vue/col';
 import Row from 'ant-design-vue/row';
 import Tooltip from 'ant-design-vue/tooltip';
@@ -63,6 +64,7 @@ app
   .use(Skeleton)
   .use(Spin)
   .use(Empty)
+  .use(Checkbox)
   .use(Timeline)
   .use(Col)
   .use(Row)