feat(checkbox): update checkbox

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';
@@ -51,6 +52,7 @@ app
  .use(Skeleton)
  .use(Spin)
  .use(Empty)
+ .use(Checkbox)
  .use(Timeline)
  .use(Col)
  .use(Row)