vxe-table-demonic/lib/tag/src/tags.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = require("xe-utils");
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
    if (ar || !(i in from)) {
      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
      ar[i] = from[i];
    }
  }
  return to.concat(ar || Array.prototype.slice.call(from));
};
var _default = (0, _vue.defineComponent)({
  name: 'vxeTags',
  props: {
    modelValue: {
      type: Array,
      default: function () {
        return [];
      }
    },
    color: {
      type: String,
      default: 'default'
    },
    size: {
      type: String,
      default: 'medium'
    },
    closable: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    tagStyle: {
      type: String,
      default: 'default'
    },
    icon: {
      type: String
    },
    iconSet: {
      type: String,
      default: ''
    },
    align: {
      type: String,
      default: 'middle'
    },
    creator: {
      type: [Function, Boolean]
    }
  },
  emits: ['update:modelValue', 'close', 'edit', 'icon-click', 'tag-created'],
  setup: function (props, context) {
    var slots = context.slots,
      emit = context.emit;
    var xID = (0, _xeUtils.uniqueId)();
    var reactData = (0, _vue.reactive)({
      inited: false,
      innerTags: props.modelValue
    });
    var refElem = (0, _vue.ref)();
    var refTags = (0, _vue.ref)([]);
    var activeTag = (0, _vue.ref)();
    var refMaps = {
      refElem: refElem,
      refTags: refTags,
      activeTag: activeTag
    };
    var $vxtags = {
      xID: xID,
      props: props,
      context: context,
      reactData: reactData,
      getRefMaps: function () {
        return refMaps;
      }
    };
    var parentProps = (0, _vue.computed)(function () {
      var extendProps = (0, _xeUtils.pick)(__assign({}, props), ['color', 'size', 'closable', 'editable', 'round', 'tagStyle', 'icon', 'iconSet', 'align']);
      if (props.creator) {
        extendProps.editable = true;
      }
      return extendProps;
    });
    var isSimple = (0, _vue.computed)(function () {
      return props.modelValue.every(function (item) {
        return !(0, _xeUtils.isObject)(item);
      });
    });
    var closeTag = function (index) {
      var innerTags = reactData.innerTags;
      innerTags.splice(index, 1);
      emit('update:modelValue', innerTags);
    };
    var interleave = function (arr, x) {
      return arr.flatMap(function (e) {
        return [e, x];
      }).slice(0, -1);
    };
    var renderTags = function () {
      var innerTags = reactData.innerTags;
      var tags = innerTags.map(function (item, index) {
        return (0, _vue.h)((0, _vue.resolveComponent)('vxe-tag'), __assign({
          key: (0, _xeUtils.uniqueId)(),
          ref: refTags.value[index],
          onClose: function () {
            return closeTag(index);
          },
          onEdit: function (value) {
            if ((0, _xeUtils.isString)(innerTags[index])) {
              innerTags[index] = value;
            } else {
              innerTags[index].content = value;
            }
            emit('update:modelValue', innerTags);
            emit('edit', {
              $event: {
                index: index,
                tag: item
              }
            });
          },
          content: isSimple.value ? item : item.content
        }, isSimple.value ? parentProps.value : __assign(__assign({}, parentProps.value), item)));
      });
      var separator = renderSeparator();
      return interleave(tags, separator);
    };
    var renderCreator = function () {
      return (0, _vue.h)((0, _vue.resolveComponent)('vxe-button'), {
        icon: 'vxe-icon-square-plus-square',
        type: 'text',
        status: 'primary',
        onClick: function () {
          var _a;
          if (props.creator) {
            var created = (0, _xeUtils.isFunction)(props.creator) ? props.creator(props.modelValue) : '';
            var tag = isSimple.value ? (0, _xeUtils.isString)(created) ? created : created === null || created === void 0 ? void 0 : created.content : created === '' ? __assign(__assign({}, (0, _vue.unref)(parentProps)), {
              content: ''
            }) : created;
            reactData.innerTags.push(tag);
            emit('update:modelValue', reactData.innerTags);
            emit('tag-created', {
              $event: {
                tag: tag
              }
            });
            activeTag.value = refTags.value[refTags.value.length - 1];
            /* activeTag 进入编辑状态 */
            (_a = activeTag.value) === null || _a === void 0 ? void 0 : _a.startEditing();
          }
        }
      });
    };
    var renderSeparator = function () {
      var _a, _b;
      return (_b = (_a = slots === null || slots === void 0 ? void 0 : slots.separator) === null || _a === void 0 ? void 0 : _a.call(slots)) !== null && _b !== void 0 ? _b : null;
    };
    var renderVN = function () {
      return (0, _vue.h)('span', {
        ref: refElem,
        class: ['vxe-tags-wrapper']
      }, __spreadArray(__spreadArray([], renderTags(), true), [props.creator ? renderCreator() : null], false));
    };
    $vxtags.renderVN = renderVN;
    return $vxtags;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;