vxe-table-demonic/lib/checkbox/src/checkbox.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _utils = require("../../tools/utils");
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _size = require("../../hooks/size");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = (0, _vue.defineComponent)({
  name: 'VxeCheckbox',
  props: {
    modelValue: [String, Number, Boolean],
    label: {
      type: [String, Number],
      default: null
    },
    indeterminate: Boolean,
    title: [String, Number],
    checkedValue: {
      type: [String, Number, Boolean],
      default: true
    },
    uncheckedValue: {
      type: [String, Number, Boolean],
      default: false
    },
    content: [String, Number],
    disabled: Boolean,
    size: {
      type: String,
      default: function () {
        return _conf.default.checkbox.size || _conf.default.size;
      }
    }
  },
  emits: ['update:modelValue', 'change'],
  setup: function (props, context) {
    var slots = context.slots,
      emit = context.emit;
    var $xeform = (0, _vue.inject)('$xeform', null);
    var $xeformiteminfo = (0, _vue.inject)('$xeformiteminfo', null);
    var xID = _xeUtils.default.uniqueId();
    var $xecheckbox = {
      xID: xID,
      props: props,
      context: context
    };
    var checkboxMethods = {};
    var computeSize = (0, _size.useSize)(props);
    var $xecheckboxgroup = (0, _vue.inject)('$xecheckboxgroup', null);
    var computeIsChecked = (0, _vue.computed)(function () {
      if ($xecheckboxgroup) {
        return _xeUtils.default.includes($xecheckboxgroup.props.modelValue, props.label);
      }
      return props.modelValue === props.checkedValue;
    });
    var computeIsDisabled = (0, _vue.computed)(function () {
      if (props.disabled) {
        return true;
      }
      if ($xecheckboxgroup) {
        var groupProps = $xecheckboxgroup.props;
        var computeIsMaximize = $xecheckboxgroup.getComputeMaps().computeIsMaximize;
        var isMaximize = computeIsMaximize.value;
        var isChecked = computeIsChecked.value;
        return groupProps.disabled || isMaximize && !isChecked;
      }
      return false;
    });
    var changeEvent = function (evnt) {
      var checkedValue = props.checkedValue,
        uncheckedValue = props.uncheckedValue;
      var isDisabled = computeIsDisabled.value;
      if (!isDisabled) {
        var checked = evnt.target.checked;
        var value = checked ? checkedValue : uncheckedValue;
        var params = {
          checked: checked,
          value: value,
          label: props.label
        };
        if ($xecheckboxgroup) {
          $xecheckboxgroup.handleChecked(params, evnt);
        } else {
          emit('update:modelValue', value);
          checkboxMethods.dispatchEvent('change', params, evnt);
          // 自动更新校验状态
          if ($xeform && $xeformiteminfo) {
            $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
          }
        }
      }
    };
    checkboxMethods = {
      dispatchEvent: function (type, params, evnt) {
        emit(type, Object.assign({
          $checkbox: $xecheckbox,
          $event: evnt
        }, params));
      }
    };
    Object.assign($xecheckbox, checkboxMethods);
    var renderVN = function () {
      var _a;
      var vSize = computeSize.value;
      var isDisabled = computeIsDisabled.value;
      var isChecked = computeIsChecked.value;
      var indeterminate = props.indeterminate;
      return (0, _vue.h)('label', {
        class: ['vxe-checkbox', (_a = {}, _a["size--".concat(vSize)] = vSize, _a['is--indeterminate'] = indeterminate, _a['is--disabled'] = isDisabled, _a['is--checked'] = isChecked, _a)],
        title: props.title
      }, [(0, _vue.h)('input', {
        class: 'vxe-checkbox--input',
        type: 'checkbox',
        disabled: isDisabled,
        checked: isChecked,
        onChange: changeEvent
      }), (0, _vue.h)('span', {
        class: ['vxe-checkbox--icon', indeterminate ? 'vxe-icon-checkbox-indeterminate' : isChecked ? 'vxe-icon-checkbox-checked' : 'vxe-icon-checkbox-unchecked']
      }), (0, _vue.h)('span', {
        class: 'vxe-checkbox--label'
      }, slots.default ? slots.default({}) : (0, _utils.getFuncText)(props.content))]);
    };
    $xecheckbox.renderVN = renderVN;
    return $xecheckbox;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;