2019-09-10 18:57:08 +08:00
|
|
|
import PropTypes from '../_util/vue-types';
|
2019-01-12 11:33:27 +08:00
|
|
|
import Checkbox from './Checkbox';
|
|
|
|
import hasProp from '../_util/props-util';
|
2019-03-15 11:20:37 +08:00
|
|
|
import { ConfigConsumerProps } from '../config-provider';
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
function noop() {}
|
2017-10-26 15:18:08 +08:00
|
|
|
export default {
|
2018-04-08 21:17:20 +08:00
|
|
|
name: 'ACheckboxGroup',
|
2019-02-01 17:23:00 +08:00
|
|
|
model: {
|
|
|
|
prop: 'value',
|
|
|
|
},
|
2017-10-26 15:18:08 +08:00
|
|
|
props: {
|
2019-09-10 18:57:08 +08:00
|
|
|
prefixCls: PropTypes.string,
|
|
|
|
defaultValue: PropTypes.array,
|
|
|
|
value: PropTypes.array,
|
|
|
|
options: PropTypes.array.def([]),
|
|
|
|
disabled: PropTypes.bool,
|
2017-10-26 15:18:08 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
provide() {
|
2017-11-06 17:46:08 +08:00
|
|
|
return {
|
2017-11-07 11:58:47 +08:00
|
|
|
checkboxGroupContext: this,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2017-11-06 17:46:08 +08:00
|
|
|
},
|
2019-03-15 11:20:37 +08:00
|
|
|
inject: {
|
2019-09-11 22:35:25 +08:00
|
|
|
configProvider: { default: () => ConfigConsumerProps },
|
2019-03-15 11:20:37 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
data() {
|
|
|
|
const { value, defaultValue } = this;
|
2017-11-02 11:48:38 +08:00
|
|
|
return {
|
2018-08-09 09:41:54 +08:00
|
|
|
sValue: value || defaultValue || [],
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2017-11-02 11:48:38 +08:00
|
|
|
},
|
2018-09-05 21:28:54 +08:00
|
|
|
watch: {
|
2019-01-12 11:33:27 +08:00
|
|
|
value(val) {
|
|
|
|
this.sValue = val;
|
2017-10-26 15:18:08 +08:00
|
|
|
},
|
2018-09-05 21:28:54 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
getOptions() {
|
|
|
|
const { options, $scopedSlots } = this;
|
2018-01-16 15:41:00 +08:00
|
|
|
return options.map(option => {
|
|
|
|
if (typeof option === 'string') {
|
|
|
|
return {
|
|
|
|
label: option,
|
|
|
|
value: option,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-01-16 15:41:00 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
let label = option.label;
|
2019-01-02 20:21:01 +08:00
|
|
|
if (label === undefined && $scopedSlots.label) {
|
2019-01-12 11:33:27 +08:00
|
|
|
label = $scopedSlots.label(option);
|
2019-01-02 20:21:01 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return { ...option, label };
|
|
|
|
});
|
2018-01-16 15:41:00 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
toggleOption(option) {
|
|
|
|
const optionIndex = this.sValue.indexOf(option.value);
|
|
|
|
const value = [...this.sValue];
|
2018-01-16 15:41:00 +08:00
|
|
|
if (optionIndex === -1) {
|
2019-01-12 11:33:27 +08:00
|
|
|
value.push(option.value);
|
2018-01-16 15:41:00 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
value.splice(optionIndex, 1);
|
2018-01-16 15:41:00 +08:00
|
|
|
}
|
|
|
|
if (!hasProp(this, 'value')) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.sValue = value;
|
2018-01-16 15:41:00 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
this.$emit('input', value);
|
|
|
|
this.$emit('change', value);
|
2018-01-16 15:41:00 +08:00
|
|
|
},
|
2017-10-26 15:18:08 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
const { $props: props, $data: state, $slots } = this;
|
2019-03-15 11:20:37 +08:00
|
|
|
const { prefixCls: customizePrefixCls, options } = props;
|
2019-09-11 22:35:25 +08:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-15 11:20:37 +08:00
|
|
|
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
let children = $slots.default;
|
|
|
|
const groupPrefixCls = `${prefixCls}-group`;
|
2018-01-16 15:41:00 +08:00
|
|
|
if (options && options.length > 0) {
|
|
|
|
children = this.getOptions().map(option => (
|
|
|
|
<Checkbox
|
2018-09-05 21:28:54 +08:00
|
|
|
prefixCls={prefixCls}
|
|
|
|
key={option.value.toString()}
|
2018-01-16 15:41:00 +08:00
|
|
|
disabled={'disabled' in option ? option.disabled : props.disabled}
|
|
|
|
value={option.value}
|
|
|
|
checked={state.sValue.indexOf(option.value) !== -1}
|
2018-11-30 22:58:46 +08:00
|
|
|
onChange={option.onChange || noop}
|
2018-09-05 21:28:54 +08:00
|
|
|
class={`${groupPrefixCls}-item`}
|
2018-01-16 15:41:00 +08:00
|
|
|
>
|
|
|
|
{option.label}
|
|
|
|
</Checkbox>
|
2019-01-12 11:33:27 +08:00
|
|
|
));
|
2018-01-16 15:41:00 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return <div class={groupPrefixCls}>{children}</div>;
|
2017-10-26 15:18:08 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|