vxe-pc-ui/lib/checkbox/src/group.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _ui = require("../../ui");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _checkbox = _interopRequireDefault(require("./checkbox"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'VxeCheckboxGroup',
  props: {
    modelValue: Array,
    options: Array,
    optionProps: Object,
    disabled: {
      type: Boolean,
      default: null
    },
    max: {
      type: [String, Number],
      default: null
    },
    size: {
      type: String,
      default: () => (0, _ui.getConfig)().checkboxGroup.size || (0, _ui.getConfig)().size
    }
  },
  emits: ['update:modelValue', 'change'],
  setup(props, context) {
    const {
      slots,
      emit
    } = context;
    const $xeForm = (0, _vue.inject)('$xeForm', null);
    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
    const xID = _xeUtils.default.uniqueId();
    const reactData = (0, _vue.reactive)({});
    const computeIsDisabled = (0, _vue.computed)(() => {
      const {
        disabled
      } = props;
      if (disabled === null) {
        if ($xeForm) {
          return $xeForm.props.readonly || $xeForm.props.disabled;
        }
        return false;
      }
      return disabled;
    });
    const computeIsMaximize = (0, _vue.computed)(() => {
      const {
        modelValue,
        max
      } = props;
      if (max) {
        return (modelValue ? modelValue.length : 0) >= _xeUtils.default.toNumber(max);
      }
      return false;
    });
    const computePropsOpts = (0, _vue.computed)(() => {
      return Object.assign({}, props.optionProps);
    });
    const computeLabelField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.label || 'label';
    });
    const computeValueField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.value || 'value';
    });
    const computeDisabledField = (0, _vue.computed)(() => {
      const propsOpts = computePropsOpts.value;
      return propsOpts.disabled || 'disabled';
    });
    const computeMaps = {
      computeIsMaximize,
      computeIsDisabled
    };
    const $xeCheckboxGroup = {
      xID,
      props,
      context,
      reactData,
      getComputeMaps: () => computeMaps
    };
    (0, _ui.useSize)(props);
    const dispatchEvent = (type, params, evnt) => {
      emit(type, (0, _ui.createEvent)(evnt, {
        $checkboxGroup: $xeCheckboxGroup
      }, params));
    };
    const checkboxGroupMethods = {
      dispatchEvent
    };
    const checkboxGroupPrivateMethods = {
      handleChecked(params, evnt) {
        const {
          checked,
          label
        } = params;
        const checklist = props.modelValue || [];
        const checkIndex = checklist.indexOf(label);
        if (checked) {
          if (checkIndex === -1) {
            checklist.push(label);
          }
        } else {
          checklist.splice(checkIndex, 1);
        }
        emit('update:modelValue', checklist);
        $xeCheckboxGroup.dispatchEvent('change', Object.assign({
          checklist
        }, params), evnt);
        // 自动更新校验状态
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, checklist);
        }
      }
    };
    Object.assign($xeCheckboxGroup, checkboxGroupMethods, checkboxGroupPrivateMethods);
    const renderVN = () => {
      const {
        options
      } = props;
      const defaultSlot = slots.default;
      const valueField = computeValueField.value;
      const labelField = computeLabelField.value;
      const disabledField = computeDisabledField.value;
      return (0, _vue.h)('div', {
        class: 'vxe-checkbox-group'
      }, defaultSlot ? defaultSlot({}) : options ? options.map(item => {
        return (0, _vue.h)(_checkbox.default, {
          key: item[valueField],
          label: item[valueField],
          content: item[labelField],
          disabled: item[disabledField]
        });
      }) : []);
    };
    (0, _vue.provide)('$xeCheckboxGroup', $xeCheckboxGroup);
    $xeCheckboxGroup.renderVN = renderVN;
    return renderVN;
  }
});