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

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

var __assign = (this && this.__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 = (this && this.__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));
};
import { computed, defineComponent, h, reactive, ref, resolveComponent, unref } from 'vue';
import { isFunction, isObject, isString, pick, uniqueId } from 'xe-utils';
export default 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 = uniqueId();
        var reactData = reactive({
            inited: false,
            innerTags: props.modelValue
        });
        var refElem = ref();
        var refTags = ref([]);
        var activeTag = 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 = computed(function () {
            var extendProps = pick(__assign({}, props), [
                'color',
                'size',
                'closable',
                'editable',
                'round',
                'tagStyle',
                'icon',
                'iconSet',
                'align'
            ]);
            if (props.creator) {
                extendProps.editable = true;
            }
            return extendProps;
        });
        var isSimple = computed(function () { return props.modelValue.every(function (item) { return !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 h(resolveComponent('vxe-tag'), __assign({ key: uniqueId(), ref: refTags.value[index], onClose: function () { return closeTag(index); }, onEdit: function (value) {
                    if (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 h(resolveComponent('vxe-button'), {
                icon: 'vxe-icon-square-plus-square',
                type: 'text',
                status: 'primary',
                onClick: function () {
                    var _a;
                    if (props.creator) {
                        var created = isFunction(props.creator) ? props.creator(props.modelValue) : '';
                        var tag = isSimple.value
                            ? isString(created) ? created : created === null || created === void 0 ? void 0 : created.content
                            : created === ''
                                ? __assign(__assign({}, 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 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();
    }
});