vxe-table-demonic/lib/tag/src/tag.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");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = (0, _vue.defineComponent)({
  name: 'vxeTag',
  props: {
    content: [String, Number],
    color: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    },
    closable: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    round: Boolean,
    tagStyle: {
      type: String,
      default: 'default'
    },
    icon: String,
    iconSet: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'middle'
    }
  },
  emits: ['close', 'update:content', 'icon-click', 'edit'],
  setup: function (props, context) {
    var slots = context.slots,
      emit = context.emit;
    var xID = _xeUtils.default.uniqueId();
    var tagStyleList = ['default', 'outline', 'flag', 'dashed', 'mark', 'arrow'];
    var reactData = (0, _vue.reactive)({
      inited: false,
      editing: false
    });
    var refElem = (0, _vue.ref)();
    var refContent = (0, _vue.ref)();
    var refMaps = {
      refElem: refElem
    };
    var closeTag = function (event) {
      return new Promise(function () {
        event.stopPropagation();
        emit('close', {
          $event: {
            tag: $vxtag
          }
        });
      });
    };
    var startEditing = function () {
      return new Promise(function (resolve) {
        if (props.editable && !reactData.editing) {
          reactData.editing = true;
          (0, _vue.nextTick)(function () {
            refContent.value.focus();
            var range = document.createRange();
            range.selectNodeContents(refContent.value);
            var selection = window.getSelection();
            selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
            selection === null || selection === void 0 ? void 0 : selection.addRange(range);
            resolve(true);
          });
        } else {
          resolve(true);
        }
      });
    };
    var handleContentEdited = function () {
      if (props.editable) {
        if (reactData.editing) {
          emit('update:content', refContent.value.innerText);
          emit('edit', refContent.value.innerText);
        }
        reactData.editing = false;
      }
    };
    var handleIconClick = function () {
      emit('icon-click', {
        $event: {
          tag: $vxtag
        }
      });
    };
    var tagMethods = {};
    var $vxtag = {
      xID: xID,
      props: props,
      context: context,
      reactData: reactData,
      getRefMaps: function () {
        return refMaps;
      }
    };
    tagMethods = {
      dispatchEvent: function (type, params, event) {
        emit(type, Object.assign({
          $tag: $vxtag,
          $event: event
        }, params));
      },
      close: closeTag,
      startEditing: startEditing
    };
    Object.assign($vxtag, tagMethods);
    var renderContent = function () {
      var _a, _b;
      return (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : (0, _utils.getFuncText)(props.content);
    };
    var renderIcon = function () {
      var _a, _b;
      return (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.icon) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : props.icon ? (0, _vue.h)('i', {
        class: ['vxe-tag--icon', props.iconSet, props.icon],
        onClick: handleIconClick
      }) : null;
    };
    var renderVN = function () {
      var _a, _b;
      var presetColors = ['default', 'info', 'primary', 'success', 'warning', 'danger', 'error', 'perfect'];
      return (0, _vue.h)('span', {
        ref: refElem,
        class: ['vxe-tag', props.editable && reactData.editing ? 'is--editing' : '', props.closable ? 'vxe-tag--closable' : '', "size--".concat(props.size), "vxe-tag-type--".concat(tagStyleList.includes(props.tagStyle) ? props.tagStyle : 'default'), props.round ? 'is--round' : '', "vxe-tag-align--".concat(props.align), props.color ? presetColors.includes(props.color) ? "vxe-tag-color--".concat(props.color) : '' : 'vxe-tag-color--default', {
          closable: props.closable
        }],
        style: presetColors.includes(props.color) ? null : {
          '--tag-color': props.color
        }
      }, [props.closable ? (0, _vue.h)('div', {
        class: 'vxe-tag-close-icon',
        onClick: function (event) {
          // closeTag(event)
          tagMethods.dispatchEvent('close', {}, event);
        }
      }, ['x']) : null, (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.avatar) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : null, (0, _vue.h)('span', {
        class: ['vxe-tag-content', {
          'tag-select-none': props.editable
        }],
        ref: refContent,
        contentEditable: props.editable && reactData.editing,
        onClick: startEditing,
        onBlur: handleContentEdited,
        onKeydown: function (event) {
          if (event.key === 'Enter') {
            handleContentEdited();
          } else if (event.key === 'Escape') {
            handleContentEdited();
          } else if (event.key === 'Tab') {
            handleContentEdited();
          }
        }
      }, renderContent()), renderIcon()]);
    };
    $vxtag.renderVN = renderVN;
    return $vxtag;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;