| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _vue = require("vue");
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
- var _Checkbox = _interopRequireDefault(require("./Checkbox"));
- var _FormItemContext = require("../form/FormItemContext");
- var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
- var _interface = require("./interface");
- var _style = _interopRequireDefault(require("./style"));
- // CSSINJS
- var _default = exports.default = (0, _vue.defineComponent)({
- compatConfig: {
- MODE: 3
- },
- name: 'ACheckboxGroup',
- inheritAttrs: false,
- props: (0, _interface.checkboxGroupProps)(),
- // emits: ['change', 'update:value'],
- setup(props, _ref) {
- let {
- slots,
- attrs,
- emit,
- expose
- } = _ref;
- const formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
- const {
- prefixCls,
- direction
- } = (0, _useConfigInject.default)('checkbox', props);
- const groupPrefixCls = (0, _vue.computed)(() => `${prefixCls.value}-group`);
- // style
- const [wrapSSR, hashId] = (0, _style.default)(groupPrefixCls);
- const mergedValue = (0, _vue.ref)((props.value === undefined ? props.defaultValue : props.value) || []);
- (0, _vue.watch)(() => props.value, () => {
- mergedValue.value = props.value || [];
- });
- const options = (0, _vue.computed)(() => {
- return props.options.map(option => {
- if (typeof option === 'string' || typeof option === 'number') {
- return {
- label: option,
- value: option
- };
- }
- return option;
- });
- });
- const triggerUpdate = (0, _vue.ref)(Symbol());
- const registeredValuesMap = (0, _vue.ref)(new Map());
- const cancelValue = id => {
- registeredValuesMap.value.delete(id);
- triggerUpdate.value = Symbol();
- };
- const registerValue = (id, value) => {
- registeredValuesMap.value.set(id, value);
- triggerUpdate.value = Symbol();
- };
- const registeredValues = (0, _vue.ref)(new Map());
- (0, _vue.watch)(triggerUpdate, () => {
- const valuseMap = new Map();
- for (const value of registeredValuesMap.value.values()) {
- valuseMap.set(value, true);
- }
- registeredValues.value = valuseMap;
- });
- const toggleOption = option => {
- const optionIndex = mergedValue.value.indexOf(option.value);
- const value = [...mergedValue.value];
- if (optionIndex === -1) {
- value.push(option.value);
- } else {
- value.splice(optionIndex, 1);
- }
- if (props.value === undefined) {
- mergedValue.value = value;
- }
- const val = value.filter(val => registeredValues.value.has(val)).sort((a, b) => {
- const indexA = options.value.findIndex(opt => opt.value === a);
- const indexB = options.value.findIndex(opt => opt.value === b);
- return indexA - indexB;
- });
- emit('update:value', val);
- emit('change', val);
- formItemContext.onFieldChange();
- };
- (0, _vue.provide)(_interface.CheckboxGroupContextKey, {
- cancelValue,
- registerValue,
- toggleOption,
- mergedValue,
- name: (0, _vue.computed)(() => props.name),
- disabled: (0, _vue.computed)(() => props.disabled)
- });
- expose({
- mergedValue
- });
- return () => {
- var _a;
- const {
- id = formItemContext.id.value
- } = props;
- let children = null;
- if (options.value && options.value.length > 0) {
- children = options.value.map(option => {
- var _a;
- return (0, _vue.createVNode)(_Checkbox.default, {
- "prefixCls": prefixCls.value,
- "key": option.value.toString(),
- "disabled": 'disabled' in option ? option.disabled : props.disabled,
- "indeterminate": option.indeterminate,
- "value": option.value,
- "checked": mergedValue.value.indexOf(option.value) !== -1,
- "onChange": option.onChange,
- "class": `${groupPrefixCls.value}-item`
- }, {
- default: () => [slots.label !== undefined ? (_a = slots.label) === null || _a === void 0 ? void 0 : _a.call(slots, option) : option.label]
- });
- });
- }
- return wrapSSR((0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
- "class": [groupPrefixCls.value, {
- [`${groupPrefixCls.value}-rtl`]: direction.value === 'rtl'
- }, attrs.class, hashId.value],
- "id": id
- }), [children || ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots))]));
- };
- }
- });
|