vxe-table-demonic/lib/switch/src/switch.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 _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _size = require("../../hooks/size");
var _utils = require("../../tools/utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = (0, _vue.defineComponent)({
  name: 'VxeSwitch',
  props: {
    modelValue: [String, Number, Boolean],
    disabled: Boolean,
    size: {
      type: String,
      default: function () {
        return _conf.default.switch.size || _conf.default.size;
      }
    },
    openLabel: String,
    closeLabel: String,
    openValue: {
      type: [String, Number, Boolean],
      default: true
    },
    closeValue: {
      type: [String, Number, Boolean],
      default: false
    },
    openIcon: {
      type: String,
      default: function () {
        return _conf.default.switch.openIcon;
      }
    },
    closeIcon: {
      type: String,
      default: function () {
        return _conf.default.switch.closeIcon;
      }
    }
  },
  emits: ['update:modelValue', 'change', 'focus', 'blur'],
  setup: function (props, context) {
    var emit = context.emit;
    var $xeform = (0, _vue.inject)('$xeform', null);
    var $xeformiteminfo = (0, _vue.inject)('$xeformiteminfo', null);
    var xID = _xeUtils.default.uniqueId();
    var computeSize = (0, _size.useSize)(props);
    var reactData = (0, _vue.reactive)({
      isActivated: false,
      hasAnimat: false,
      offsetLeft: 0
    });
    var $xeswitch = {
      xID: xID,
      props: props,
      context: context,
      reactData: reactData
    };
    var refButton = (0, _vue.ref)();
    var switchMethods = {};
    var computeOnShowLabel = (0, _vue.computed)(function () {
      return (0, _utils.getFuncText)(props.openLabel);
    });
    var computeOffShowLabel = (0, _vue.computed)(function () {
      return (0, _utils.getFuncText)(props.closeLabel);
    });
    var computeIsChecked = (0, _vue.computed)(function () {
      return props.modelValue === props.openValue;
    });
    var _atimeout;
    var clickEvent = function (evnt) {
      if (!props.disabled) {
        var isChecked = computeIsChecked.value;
        clearTimeout(_atimeout);
        var value = isChecked ? props.closeValue : props.openValue;
        reactData.hasAnimat = true;
        emit('update:modelValue', value);
        switchMethods.dispatchEvent('change', {
          value: value
        }, evnt);
        // 自动更新校验状态
        if ($xeform && $xeformiteminfo) {
          $xeform.triggerItemEvent(evnt, $xeformiteminfo.itemConfig.field, value);
        }
        _atimeout = setTimeout(function () {
          reactData.hasAnimat = false;
        }, 400);
      }
    };
    var focusEvent = function (evnt) {
      reactData.isActivated = true;
      switchMethods.dispatchEvent('focus', {
        value: props.modelValue
      }, evnt);
    };
    var blurEvent = function (evnt) {
      reactData.isActivated = false;
      switchMethods.dispatchEvent('blur', {
        value: props.modelValue
      }, evnt);
    };
    switchMethods = {
      dispatchEvent: function (type, params, evnt) {
        emit(type, Object.assign({
          $switch: $xeswitch,
          $event: evnt
        }, params));
      },
      focus: function () {
        var btnElem = refButton.value;
        reactData.isActivated = true;
        btnElem.focus();
        return (0, _vue.nextTick)();
      },
      blur: function () {
        var btnElem = refButton.value;
        btnElem.blur();
        reactData.isActivated = false;
        return (0, _vue.nextTick)();
      }
    };
    Object.assign($xeswitch, switchMethods);
    var renderVN = function () {
      var _a;
      var disabled = props.disabled,
        openIcon = props.openIcon,
        closeIcon = props.closeIcon;
      var isChecked = computeIsChecked.value;
      var vSize = computeSize.value;
      var onShowLabel = computeOnShowLabel.value;
      var offShowLabel = computeOffShowLabel.value;
      return (0, _vue.h)('div', {
        class: ['vxe-switch', isChecked ? 'is--on' : 'is--off', (_a = {}, _a["size--".concat(vSize)] = vSize, _a['is--disabled'] = disabled, _a['is--animat'] = reactData.hasAnimat, _a)]
      }, [(0, _vue.h)('button', {
        ref: refButton,
        class: 'vxe-switch--button',
        type: 'button',
        disabled: disabled,
        onClick: clickEvent,
        onFocus: focusEvent,
        onBlur: blurEvent
      }, [(0, _vue.h)('span', {
        class: 'vxe-switch--label vxe-switch--label-on'
      }, [openIcon ? (0, _vue.h)('i', {
        class: ['vxe-switch--label-icon', openIcon]
      }) : (0, _vue.createCommentVNode)(), onShowLabel]), (0, _vue.h)('span', {
        class: 'vxe-switch--label vxe-switch--label-off'
      }, [closeIcon ? (0, _vue.h)('i', {
        class: ['vxe-switch--label-icon', closeIcon]
      }) : (0, _vue.createCommentVNode)(), offShowLabel]), (0, _vue.h)('span', {
        class: 'vxe-switch--icon'
      })])]);
    };
    $xeswitch.renderVN = renderVN;
    return $xeswitch;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;