@aifuxi/semi-ui-vue 0.1.0-alpha.0

package/dist/tag-input-SxUfNqF0.js

@@ -0,0 +1,784 @@
+import "./src-DNBBthjO.js";
+import { _ as e, h as t, p as n, t as r, u as i, v as a } from "./foundation-Cawx37mp.js";
+import { r as o } from "./keyCode-DMNg63wX.js";
+import { t as s } from "./isEnterPress-HTy0eCBp.js";
+import { t as c } from "./Tooltip-Bq7HZwnS.js";
+import { t as l } from "./Input-BYWFIgNn.js";
+import { t as u } from "./arrayMove-ByVCXfhS.js";
+import { t as d } from "./config-context-CyynTtDb.js";
+import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, getCurrentInstance as ee, guardReactiveProps as b, h as x, inject as S, isVNode as C, markRaw as w, mergeProps as T, nextTick as E, normalizeClass as D, normalizeProps as O, normalizeStyle as te, onBeforeUnmount as ne, onMounted as k, openBlock as A, reactive as j, renderList as M, renderSlot as N, shallowRef as P, toDisplayString as F, unref as I, useAttrs as re, useSlots as ie, useTemplateRef as L, watch as R, withCtx as z, withModifiers as B } from "vue";
+import { IconClear as ae, IconClose as V, IconHandle as H } from "@aifuxi/semi-icons-vue";
+//#region bundled-foundation
+var U = (n, r) => {
+	let a = [];
+	if ((0, e.default)(r) || (0, t.default)(r)) a = n.split(r);
+	else if ((0, i.default)(r)) {
+		let e = r[0];
+		a = n;
+		for (let t = 1; t < r.length; t++) a = a.split(r[t]).join(e);
+		a = a.split(e);
+	} else a.push(n);
+	return a;
+}, W = class extends r {
+	constructor(e) {
+		super({ ...e }), this.handleInputChange = (e) => {
+			let { value: t } = e.target, { entering: n } = this.getStates();
+			(n || this._checkInputChangeValid(t)) && this._onInputChange(t, e);
+		}, this.handleInputCompositionStart = (e) => {
+			let { maxLength: n } = this.getProps();
+			(0, t.default)(n) && this._adapter.setEntering(!0);
+		}, this._splitArray = (e, t) => {
+			let { split: r } = this.getProps();
+			return (0, n.default)(r) ? r(e, t) : U(e, t);
+		}, this.handleInputCompositionEnd = (e) => {
+			let { value: r } = e.target, { maxLength: i, onInputExceed: a, separator: o } = this.getProps();
+			if (!(0, t.default)(i)) return;
+			this._adapter.setEntering(!1);
+			let s = !0, c = this._splitArray(r, o), l = 0;
+			for (; l < c.length; l++) if (c[l].length > i) {
+				s = !1, (0, n.default)(a) && a(r);
+				break;
+			}
+			if (s) this._adapter.setInputValue(r);
+			else {
+				let e = c.slice(0, l);
+				l < c.length && e.push(c[l].slice(0, i)), this._adapter.setInputValue(e.join(o));
+			}
+		}, this._checkInputChangeValid = (e) => {
+			let { maxLength: r, onInputExceed: i, separator: o } = this._adapter.getProps(), { inputValue: s } = this._adapter.getStates(), c = !0;
+			if ((0, t.default)(r)) {
+				let t = this._splitArray(e, o), l = this._splitArray(s, o), u = Math.max(t.length, l.length);
+				for (let o = 0; o < u; o++) if (!(0, a.default)(t[o]) && ((0, a.default)(l[o]) || t[o].length > l[o].length) && t[o].length > r) {
+					c = !1, (0, n.default)(i) && i(e);
+					break;
+				}
+			}
+			return c;
+		}, this.handleKeyDown = (e) => {
+			let { inputValue: t, tagsArray: n } = this._adapter.getStates(), r = e.keyCode;
+			r === o.ENTER && (e.preventDefault(), t !== "" && this._handleAddTags(e));
+			let { length: i } = n;
+			if (r === o.BACKSPACE && t === "" && i > 0) {
+				let e = n.slice(0, i - 1), t = n[i - 1];
+				this._onRemove(e, t, i - 1);
+			}
+			this._adapter.notifyKeyDown(e);
+		};
+	}
+	_handleAddTags(r) {
+		let { separator: i, max: a, onExceed: o, allowDuplicates: s } = this._adapter.getProps(), { inputValue: c, tagsArray: l } = this._adapter.getStates(), u = this._splitArray(c, i);
+		u = u.filter((t, n) => !s && (l.includes(t) || u.indexOf(t) !== n) ? !1 : (0, e.default)(t) && t.trim() !== "");
+		let d = l.concat(u);
+		(0, t.default)(a) && d.length > a && ((0, n.default)(o) && o(d), d = d.slice(0, a), u = u.slice(0, a - l.length)), u.length > 0 && this._onAdd(d, u), this._onInputChange("", r);
+	}
+	handleInputBlur(e) {
+		let { addOnBlur: t } = this._adapter.getProps();
+		t === !0 && this._handleAddTags(e), this._adapter.setFocusing(!1), this._adapter.notifyBlur(e);
+	}
+	handleInputFocus(e) {
+		this._adapter.setFocusing(!0), this._adapter.notifyFocus(e);
+	}
+	/* istanbul ignore next */
+	handleClearEnterPress(e) {
+		s(e) && this.handleClearBtn(e);
+	}
+	handleClearBtn(e) {
+		let { inputValue: t, tagsArray: n } = this._adapter.getStates();
+		n.length > 0 && (this._adapter.setTagsArray([]), this._adapter.notifyTagChange([])), t.length > 0 && this._onInputChange("", e), e.stopPropagation();
+	}
+	handleTagClose(e) {
+		let { tagsArray: t } = this._adapter.getStates(), n = [...t];
+		n.splice(e, 1);
+		let r = t[e];
+		this._onRemove(n, r, e);
+	}
+	handleInputMouseEnter() {
+		this._adapter.setHovering(!0);
+	}
+	handleInputMouseLeave() {
+		this._adapter.setHovering(!1);
+	}
+	handleClick(e) {
+		let { disabled: t } = this.getProps();
+		t || this._adapter.getClickOutsideHandler() || (this._adapter.setActive(!0), this._adapter.registerClickOutsideHandler((e) => this.clickOutsideCallBack()));
+	}
+	clickOutsideCallBack() {
+		this._adapter.unregisterClickOutsideHandler(), this._adapter.setActive(!1);
+	}
+	handleClickPrefixOrSuffix(e) {
+		let { disabled: t } = this._adapter.getProps(), { isFocus: n } = this._adapter.getStates();
+		!t && !n && this._adapter.toggleFocusing(!0);
+	}
+	handlePreventMouseDown(e) {
+		e && (0, n.default)(e.preventDefault) && e.preventDefault();
+	}
+	_onRemove(e, t, n) {
+		this._isControlledComponent() || this._adapter.setTagsArray(e), this._adapter.notifyTagChange(e), this._adapter.notifyTagRemove(t, n);
+	}
+	_onAdd(e, t) {
+		this._isControlledComponent() || this._adapter.setTagsArray(e), this._adapter.notifyTagChange(e), this._adapter.notifyTagAdd(t);
+	}
+	_onInputChange(e, t) {
+		this._adapter.setInputValue(e), this._adapter.notifyInputChange(e, t);
+	}
+	handleSortEnd(e) {
+		let { oldIndex: t, newIndex: n } = e, { tagsArray: r } = this.getStates(), i = u(r, t, n);
+		this._isControlledComponent() || this._adapter.setTagsArray(i), this._adapter.notifyTagChange(i);
+	}
+}, G = y({
+	name: "TagInputNodeRenderer",
+	props: { content: {
+		type: null,
+		default: void 0
+	} },
+	setup(e) {
+		return () => x(f, null, Array.isArray(e.content) ? e.content : [e.content]);
+	}
+}), K = { class: "semi-popover-content" }, oe = /* @__PURE__ */ y({
+	__name: "TagInputRestPopover",
+	props: {
+		disabled: { type: Boolean },
+		popoverProps: {},
+		restCount: {}
+	},
+	setup(e) {
+		let t = e, n = S(d, void 0), r = p(() => n ? n.value : {
+			direction: "ltr",
+			getPopupContainer: void 0
+		}), i = p(() => {
+			let e = {
+				autoAdjustOverflow: t.popoverProps?.autoAdjustOverflow ?? !0,
+				mouseEnterDelay: t.popoverProps?.mouseEnterDelay ?? 50,
+				mouseLeaveDelay: t.popoverProps?.mouseLeaveDelay ?? 50,
+				position: t.popoverProps?.position ?? "top",
+				prefixCls: "semi-popover",
+				role: "dialog",
+				zIndex: t.popoverProps?.zIndex ?? 1030
+			}, n = t.popoverProps?.getPopupContainer ?? r.value.getPopupContainer;
+			return n && (e.getPopupContainer = n), t.popoverProps?.className !== void 0 && (e.class = t.popoverProps.className), t.popoverProps?.style !== void 0 && (e.style = t.popoverProps.style), e;
+		});
+		return (e, n) => (A(), m(c, O(b(i.value)), {
+			content: z(() => [_("div", K, [N(e.$slots, "default")])]),
+			default: z(() => [_("span", { class: D(["semi-tagInput-wrapper-n", t.disabled ? "semi-tagInput-wrapper-n-disabled" : void 0]) }, "+" + F(t.restCount), 3)]),
+			_: 3
+		}, 16));
+	}
+}), q = [
+	"aria-label",
+	"draggable",
+	"tabindex"
+], J = { class: "semi-tag-content semi-tag-content-center" }, Y = [
+	"aria-label",
+	"draggable",
+	"tabindex"
+], X = { class: "semi-tag-content semi-tag-content-center" }, Z = /* @__PURE__ */ y({
+	__name: "TagInputTag",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		index: {},
+		showContentTooltip: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		size: { default: "default" },
+		value: {}
+	},
+	emits: [
+		"close",
+		"dragEnd",
+		"dragStart",
+		"drop"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = L("content"), a = P(!1), o = p(() => [
+			"semi-tag",
+			n.size === "small" ? "semi-tag-small" : "semi-tag-large",
+			"semi-tag-square",
+			"semi-tag-light",
+			"semi-tag-white-light",
+			n.disabled ? void 0 : "semi-tag-closable",
+			"semi-tagInput-wrapper-tag",
+			`semi-tagInput-wrapper-tag-size-${n.size}`,
+			n.draggable ? "semi-tagInput-wrapper-tag-icon semi-tagInput-sortable-item" : void 0
+		]), s = p(() => {
+			let e = typeof n.showContentTooltip == "object" ? n.showContentTooltip : void 0, { className: t, ...r } = e?.opts ?? {};
+			return {
+				...e?.type?.toLowerCase() === "popover" ? {
+					prefixCls: "semi-popover",
+					role: "dialog",
+					showArrow: !0,
+					zIndex: 1030
+				} : {},
+				...r,
+				class: r.class ?? t,
+				condition: a.value,
+				content: n.value,
+				mouseEnterDelay: r.mouseEnterDelay ?? 0,
+				mouseLeaveDelay: r.mouseLeaveDelay ?? 0
+			};
+		});
+		function l() {
+			let e = i.value;
+			a.value = !!(e && e.scrollWidth > e.clientWidth);
+		}
+		k(() => void E(l)), R(() => n.value, () => void E(l));
+		function u(e) {
+			e.stopPropagation(), n.disabled || r("close", n.index);
+		}
+		function d(e) {
+			(e.key === "Backspace" || e.key === "Delete") && !n.disabled ? (e.preventDefault(), r("close", n.index)) : e.key === "Escape" && e.currentTarget.blur();
+		}
+		return (e, t) => n.showContentTooltip ? (A(), m(c, O(T({ key: 0 }, s.value)), {
+			default: z(() => [_("div", {
+				"aria-label": `${n.disabled ? "" : "Closable "}Tag: ${n.value}`,
+				class: D(o.value),
+				draggable: n.draggable,
+				role: "button",
+				tabindex: n.disabled ? void 0 : 0,
+				onDragend: t[0] ||= (e) => r("dragEnd"),
+				onDragstart: t[1] ||= (e) => r("dragStart", n.index),
+				onDragover: t[2] ||= B(() => {}, ["prevent"]),
+				onDrop: t[3] ||= B((e) => r("drop", n.index), ["prevent"]),
+				onKeydown: d,
+				onMouseenter: l
+			}, [
+				n.draggable ? (A(), m(I(H), {
+					key: 0,
+					class: "semi-tagInput-drag-handler"
+				})) : h("", !0),
+				_("div", J, [_("span", {
+					ref: "content",
+					class: D([
+						"semi-typography",
+						"semi-typography-primary",
+						"semi-typography-ellipsis-single-line",
+						"semi-tagInput-wrapper-typo",
+						n.disabled ? "semi-tagInput-wrapper-typo-disabled" : void 0
+					])
+				}, F(n.value), 3)]),
+				n.disabled ? h("", !0) : (A(), g("div", {
+					key: 1,
+					class: "semi-tag-close",
+					onClick: u
+				}, [v(I(V), { size: "small" })]))
+			], 42, q)]),
+			_: 1
+		}, 16)) : (A(), g("div", {
+			key: 1,
+			"aria-label": `${n.disabled ? "" : "Closable "}Tag: ${n.value}`,
+			class: D(o.value),
+			draggable: n.draggable,
+			role: "button",
+			tabindex: n.disabled ? void 0 : 0,
+			onDragend: t[4] ||= (e) => r("dragEnd"),
+			onDragstart: t[5] ||= (e) => r("dragStart", n.index),
+			onDragover: t[6] ||= B(() => {}, ["prevent"]),
+			onDrop: t[7] ||= B((e) => r("drop", n.index), ["prevent"]),
+			onKeydown: d
+		}, [
+			n.draggable ? (A(), m(I(H), {
+				key: 0,
+				class: "semi-tagInput-drag-handler"
+			})) : h("", !0),
+			_("div", X, [_("span", { class: D([
+				"semi-typography",
+				"semi-typography-primary",
+				"semi-typography-ellipsis-single-line",
+				"semi-tagInput-wrapper-typo",
+				n.disabled ? "semi-tagInput-wrapper-typo-disabled" : void 0
+			]) }, F(n.value), 3)]),
+			n.disabled ? h("", !0) : (A(), g("div", {
+				key: 1,
+				class: "semi-tag-close",
+				onClick: u
+			}, [v(I(V), { size: "small" })]))
+		], 42, Y));
+	}
+});
+//#endregion
+//#region src/tag-input/use-tag-input-foundation.ts
+function se(e) {
+	let { props: t } = e, n = j({
+		active: !1,
+		entering: !1,
+		focusing: !1,
+		hovering: !1,
+		inputValue: e.controlledInput.value ? e.controlledInputValue.value ?? "" : "",
+		inputWidth: void 0,
+		tagsArray: e.controlled.value ? [...e.controlledValue.value ?? []] : [...t.defaultValue ?? []]
+	}), r = /* @__PURE__ */ new Map(), i = null;
+	function a() {
+		let n = {
+			addOnBlur: t.addOnBlur ?? !1,
+			allowDuplicates: t.allowDuplicates ?? !0,
+			disabled: t.disabled ?? !1,
+			max: t.max,
+			maxLength: t.maxLength,
+			onExceed: e.emitExceed,
+			onInputExceed: e.emitInputExceed,
+			separator: t.separator ?? ",",
+			split: t.split
+		};
+		return e.controlled.value && (n.value = e.controlledValue.value), n;
+	}
+	let o = {
+		getContext: () => void 0,
+		getContexts: () => void 0,
+		getProp: (e) => a()[e],
+		getProps: a,
+		getState: (e) => n[e],
+		getStates: () => ({
+			...n,
+			isFocus: n.focusing
+		}),
+		setState: (e, t) => {
+			Object.assign(n, e), t?.();
+		},
+		getCache: (e) => r.get(e),
+		getCaches: () => r,
+		setCache: (e, t) => r.set(String(e), t),
+		stopPropagation: (e) => e.stopPropagation?.(),
+		persistEvent: () => void 0,
+		setInputValue: (e) => {
+			n.inputValue = e;
+		},
+		setTagsArray: (e) => {
+			n.tagsArray = [...e];
+		},
+		setFocusing: (e) => {
+			n.focusing = e;
+		},
+		toggleFocusing: (r) => {
+			r ? e.input.value?.focus({ preventScroll: t.preventScroll ?? !1 }) : e.input.value?.blur(), n.focusing = r;
+		},
+		setHovering: (e) => {
+			n.hovering = e;
+		},
+		setActive: (e) => {
+			n.active = e;
+		},
+		setEntering: (e) => {
+			n.entering = e;
+		},
+		getClickOutsideHandler: () => i,
+		registerClickOutsideHandler: (t) => {
+			i = (n) => {
+				let r = n.target, i = n.composedPath?.() ?? [];
+				e.root.value && (!(r instanceof Node) || !e.root.value.contains(r)) && !i.includes(e.root.value) && t(n);
+			}, document.addEventListener("click", i);
+		},
+		unregisterClickOutsideHandler: () => {
+			i && document.removeEventListener("click", i), i = null;
+		},
+		notifyBlur: e.emitBlur,
+		notifyFocus: e.emitFocus,
+		notifyInputChange: (t, r) => {
+			e.emitInputChange(t, r), e.controlledInput.value && E(() => {
+				n.inputValue = e.controlledInputValue.value ?? "";
+			});
+		},
+		notifyTagChange: e.emitChange,
+		notifyTagAdd: e.emitAdd,
+		notifyTagRemove: e.emitRemove,
+		notifyKeyDown: e.emitKeyDown
+	}, s = w(new W(o));
+	return R(e.controlledValue, (t) => {
+		e.controlled.value && (n.tagsArray = [...t ?? []]);
+	}), R(e.controlledInputValue, (t) => {
+		e.controlledInput.value && (n.inputValue = t ?? "");
+	}), k(() => {
+		s.init(), !t.disabled && t.autoFocus && (e.input.value?.focus({ preventScroll: t.preventScroll ?? !1 }), s.handleClick());
+	}), ne(() => {
+		o.unregisterClickOutsideHandler(), s.destroy();
+	}), {
+		foundation: s,
+		state: n
+	};
+}
+//#endregion
+//#region src/tag-input/TagInput.vue?vue&type=script&setup=true&lang.ts
+var ce = [
+	"aria-disabled",
+	"aria-invalid",
+	"aria-label"
+], le = ["id"], ue = { class: "semi-tagInput-wrapper" }, Q = /* @__PURE__ */ y({
+	name: "TagInput",
+	inheritAttrs: !1,
+	__name: "TagInput",
+	props: {
+		ariaLabel: {},
+		addOnBlur: {
+			type: Boolean,
+			default: !1
+		},
+		allowDuplicates: {
+			type: Boolean,
+			default: !0
+		},
+		autoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		className: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		clearIcon: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		defaultValue: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		expandRestTagsOnClick: {
+			type: Boolean,
+			default: !0
+		},
+		inputValue: {},
+		insetLabel: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		insetLabelId: {},
+		max: {},
+		maxLength: {},
+		maxTagCount: {},
+		modelValue: {},
+		placeholder: { default: "" },
+		prefix: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		preventScroll: { type: Boolean },
+		renderTagItem: {},
+		restTagsPopoverProps: {},
+		separator: { default: "," },
+		showClear: {
+			type: Boolean,
+			default: !1
+		},
+		showContentTooltip: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		showRestTagsPopover: {
+			type: Boolean,
+			default: !0
+		},
+		size: { default: "default" },
+		split: {},
+		style: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		suffix: { type: [
+			Object,
+			String,
+			Number,
+			Boolean,
+			null,
+			Array
+		] },
+		validateStatus: { default: "default" },
+		value: {}
+	},
+	emits: [
+		"add",
+		"blur",
+		"change",
+		"exceed",
+		"focus",
+		"inputChange",
+		"inputExceed",
+		"keyDown",
+		"remove",
+		"update:inputValue",
+		"update:modelValue",
+		"update:value"
+	],
+	setup(e, { expose: t, emit: n }) {
+		let r = e, i = n, a = re(), o = ie(), s = ee(), c = L("root"), u = L("inputComponent"), d = L("inputMirror"), y = P(null);
+		function b(e) {
+			let t = s?.vnode.props, n = e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+			return !!(t && (Object.prototype.hasOwnProperty.call(t, e) || Object.prototype.hasOwnProperty.call(t, n)));
+		}
+		let x = p(() => b("modelValue")), S = p(() => b("value")), w = p(() => x.value || S.value), O = p(() => x.value ? r.modelValue : S.value ? r.value : void 0), ne = p(() => b("inputValue")), k = p(() => r.inputValue), j = p(() => u.value?.input ?? null), { foundation: B, state: V } = se({
+			controlled: w,
+			controlledInput: ne,
+			controlledInputValue: k,
+			controlledValue: O,
+			emitAdd: (e) => i("add", e),
+			emitBlur: (e) => i("blur", e),
+			emitChange: (e) => {
+				i("change", e), i("update:value", e), i("update:modelValue", e);
+			},
+			emitExceed: (e) => i("exceed", e),
+			emitFocus: (e) => i("focus", e),
+			emitInputChange: (e, t) => {
+				i("inputChange", e, t), i("update:inputValue", e);
+			},
+			emitInputExceed: (e) => i("inputExceed", e),
+			emitKeyDown: (e) => i("keyDown", e),
+			emitRemove: (e, t) => i("remove", e, t),
+			input: j,
+			props: r,
+			root: c
+		});
+		function H(e, t) {
+			return o[e]?.() ?? t;
+		}
+		function U(e) {
+			return Array.isArray(e) ? e.find((e) => C(e)) : C(e) ? e : void 0;
+		}
+		function W(e) {
+			let t = U(e);
+			if (!t || typeof t.type != "object" && typeof t.type != "function") return !1;
+			let n = t.type;
+			return /Icon/.test(n.name ?? n.__name ?? "");
+		}
+		let K = p(() => H("prefix", r.prefix)), q = p(() => H("insetLabel", r.insetLabel)), J = p(() => K.value || q.value), Y = p(() => H("suffix", r.suffix)), X = p(() => H("clearIcon", r.clearIcon)), Q = p(() => !!r.maxTagCount && (r.maxTagCount ?? 0) < V.tagsArray.length && (!V.active || !r.expandRestTagsOnClick)), de = p(() => {
+			let e = V.tagsArray.map((e, t) => ({
+				index: t,
+				value: e
+			}));
+			return Q.value ? e.slice(0, r.maxTagCount) : e;
+		}), $ = p(() => Q.value ? V.tagsArray.map((e, t) => ({
+			index: t,
+			value: e
+		})).slice(r.maxTagCount) : []), fe = p(() => [
+			"semi-tagInput",
+			a.class,
+			r.className,
+			V.focusing || V.active ? "semi-tagInput-focus" : void 0,
+			r.disabled ? "semi-tagInput-disabled" : void 0,
+			V.hovering && !r.disabled ? "semi-tagInput-hover" : void 0,
+			r.validateStatus === "error" ? "semi-tagInput-error" : void 0,
+			r.validateStatus === "warning" ? "semi-tagInput-warning" : void 0,
+			r.size === "small" ? "semi-tagInput-small" : void 0,
+			r.size === "large" ? "semi-tagInput-large" : void 0,
+			J.value ? "semi-tagInput-with-prefix" : void 0,
+			Y.value ? "semi-tagInput-with-suffix" : void 0
+		]), pe = p(() => ["semi-tagInput-wrapper-input", `semi-tagInput-wrapper-input-${r.size}`]), me = p(() => typeof V.inputWidth == "number" ? { width: `${V.inputWidth}px` } : void 0), he = p(() => Object.fromEntries(Object.entries(a).filter(([e]) => e.startsWith("data-"))));
+		function ge() {
+			let e = j.value, t = d.value;
+			if (!e || !t) return;
+			if (!V.inputValue) {
+				V.inputWidth = void 0;
+				return;
+			}
+			let n = window.getComputedStyle(e);
+			t.style.font = n.font, t.style.letterSpacing = n.letterSpacing, t.style.textTransform = n.textTransform, t.style.paddingLeft = n.paddingLeft, t.style.paddingRight = n.paddingRight, t.style.borderLeftWidth = n.borderLeftWidth, t.style.borderRightWidth = n.borderRightWidth, t.style.boxSizing = n.boxSizing, t.textContent = V.inputValue || " ";
+			let r = Math.ceil(t.scrollWidth + 2);
+			Number.isFinite(r) && r > 0 && (V.inputWidth = r);
+		}
+		function _e(e, t) {
+			B.handleInputChange(t);
+		}
+		function ve(e) {
+			if (y.value === null || y.value === e) {
+				y.value = null;
+				return;
+			}
+			let t = y.value;
+			B.handleSortEnd({
+				oldIndex: t,
+				newIndex: e
+			}), y.value = null;
+		}
+		function ye(e, t) {
+			return r.renderTagItem?.(e, t, () => B.handleTagClose(t));
+		}
+		function be() {
+			r.disabled || (j.value?.focus({ preventScroll: r.preventScroll ?? !1 }), B.handleClick());
+		}
+		function xe() {
+			j.value?.blur(), B.clickOutsideCallBack();
+		}
+		return R(() => [
+			V.inputValue,
+			V.tagsArray.length,
+			r.size,
+			r.placeholder
+		], () => void E(ge), { immediate: !0 }), t({
+			blur: xe,
+			focus: be
+		}), (e, t) => (A(), g("div", T(he.value, {
+			ref_key: "root",
+			ref: c,
+			"aria-disabled": r.disabled,
+			"aria-invalid": r.validateStatus === "error",
+			"aria-label": r.ariaLabel ?? I(a)["aria-label"],
+			class: fe.value,
+			style: [I(a).style, r.style],
+			onClick: t[15] ||= (e) => I(B).handleClick(e),
+			onMouseenter: t[16] ||= (e) => I(B).handleInputMouseEnter(),
+			onMouseleave: t[17] ||= (e) => I(B).handleInputMouseLeave()
+		}), [
+			J.value ? (A(), g("div", {
+				key: 0,
+				id: r.insetLabelId,
+				class: D([
+					"semi-tagInput-prefix",
+					q.value ? "semi-tagInput-inset-label" : void 0,
+					typeof J.value == "string" ? "semi-tagInput-prefix-text" : void 0,
+					W(J.value) ? "semi-tagInput-prefix-icon" : void 0
+				]),
+				"x-semi-prop": "prefix",
+				onClick: t[0] ||= (e) => I(B).handleClickPrefixOrSuffix(e),
+				onMousedown: t[1] ||= (e) => I(B).handlePreventMouseDown(e)
+			}, [K.value ? N(e.$slots, "prefix", {}, () => [v(I(G), { content: r.prefix }, null, 8, ["content"])], void 0, 0) : N(e.$slots, "insetLabel", {}, () => [v(I(G), { content: r.insetLabel }, null, 8, ["content"])], void 0, 1)], 42, le)) : h("", !0),
+			_("div", ue, [
+				(A(!0), g(f, null, M(de.value, (n) => N(e.$slots, "tag", {
+					close: () => I(B).handleTagClose(n.index),
+					index: n.index,
+					value: n.value
+				}, () => [r.renderTagItem ? (A(), m(I(G), {
+					key: 0,
+					content: ye(n.value, n.index)
+				}, null, 8, ["content"])) : (A(), m(Z, {
+					key: 1,
+					disabled: r.disabled,
+					draggable: I(V).active && r.draggable,
+					index: n.index,
+					"show-content-tooltip": r.showContentTooltip,
+					size: r.size,
+					value: n.value,
+					onClose: t[2] ||= (e) => I(B).handleTagClose(e),
+					onDragStart: t[3] ||= (e) => y.value = e,
+					onDragend: t[4] ||= (e) => y.value = null,
+					onDrop: ve
+				}, null, 8, [
+					"disabled",
+					"draggable",
+					"index",
+					"show-content-tooltip",
+					"size",
+					"value"
+				]))], void 0, `${n.index}-${n.value}`)), 128)),
+				$.value.length && r.showRestTagsPopover ? (A(), m(oe, {
+					key: 0,
+					disabled: r.disabled,
+					"popover-props": r.restTagsPopoverProps,
+					"rest-count": $.value.length
+				}, {
+					default: z(() => [(A(!0), g(f, null, M($.value, (n) => N(e.$slots, "tag", {
+						close: () => I(B).handleTagClose(n.index),
+						index: n.index,
+						value: n.value
+					}, () => [r.renderTagItem ? (A(), m(I(G), {
+						key: 0,
+						content: ye(n.value, n.index)
+					}, null, 8, ["content"])) : (A(), m(Z, {
+						key: 1,
+						disabled: r.disabled,
+						index: n.index,
+						"show-content-tooltip": !1,
+						size: r.size,
+						value: n.value,
+						onClose: t[5] ||= (e) => I(B).handleTagClose(e)
+					}, null, 8, [
+						"disabled",
+						"index",
+						"size",
+						"value"
+					]))], void 0, `rest-${n.index}-${n.value}`)), 128))]),
+					_: 3
+				}, 8, [
+					"disabled",
+					"popover-props",
+					"rest-count"
+				])) : $.value.length ? (A(), g("span", {
+					key: 1,
+					class: D(["semi-tagInput-wrapper-n", r.disabled ? "semi-tagInput-wrapper-n-disabled" : void 0])
+				}, "+" + F($.value.length), 3)) : h("", !0),
+				_("span", {
+					ref_key: "inputMirror",
+					ref: d,
+					class: "semi-tagInput-wrapper-inputMirror"
+				}, null, 512),
+				v(l, {
+					ref_key: "inputComponent",
+					ref: u,
+					"aria-label": "input value",
+					"class-name": pe.value,
+					disabled: r.disabled,
+					placeholder: I(V).tagsArray.length === 0 ? r.placeholder : "",
+					"prevent-scroll": r.preventScroll,
+					size: r.size,
+					style: te(me.value),
+					value: I(V).inputValue,
+					onBlur: t[6] ||= (e) => I(B).handleInputBlur(e),
+					onChange: _e,
+					onCompositionEnd: t[7] ||= (e) => I(B).handleInputCompositionEnd(e),
+					onCompositionStart: t[8] ||= (e) => I(B).handleInputCompositionStart(e),
+					onFocus: t[9] ||= (e) => I(B).handleInputFocus(e),
+					onKeydown: t[10] ||= (e) => I(B).handleKeyDown(e)
+				}, null, 8, [
+					"class-name",
+					"disabled",
+					"placeholder",
+					"prevent-scroll",
+					"size",
+					"style",
+					"value"
+				])
+			]),
+			r.showClear ? (A(), g("div", {
+				key: 1,
+				class: D(["semi-tagInput-clearBtn", !I(V).hovering || !I(V).inputValue && I(V).tagsArray.length === 0 || r.disabled ? "semi-tagInput-clearBtn-invisible" : void 0]),
+				"aria-label": "Clear TagInput value",
+				role: "button",
+				tabindex: "0",
+				onClick: t[11] ||= (e) => I(B).handleClearBtn(e),
+				onKeydown: t[12] ||= (e) => I(B).handleClearEnterPress(e)
+			}, [N(e.$slots, "clearIcon", {}, () => [X.value ? (A(), m(I(G), {
+				key: 0,
+				content: X.value
+			}, null, 8, ["content"])) : (A(), m(I(ae), { key: 1 }))])], 34)) : h("", !0),
+			Y.value ? (A(), g("div", {
+				key: 2,
+				class: D([
+					"semi-tagInput-suffix",
+					typeof Y.value == "string" ? "semi-tagInput-suffix-text" : void 0,
+					W(Y.value) ? "semi-tagInput-suffix-icon" : void 0
+				]),
+				"x-semi-prop": "suffix",
+				onClick: t[13] ||= (e) => I(B).handleClickPrefixOrSuffix(e),
+				onMousedown: t[14] ||= (e) => I(B).handlePreventMouseDown(e)
+			}, [N(e.$slots, "suffix", {}, () => [v(I(G), { content: r.suffix }, null, 8, ["content"])])], 34)) : h("", !0)
+		], 16, ce));
+	}
+});
+//#endregion
+export { Q as t };