@indielayer/ui 2.0.0 → 2.1.0

package/lib/components/select/Select.vue_vue_type_script_setup_true_lang.js

@@ -14,130 +14,165 @@ import { useEventListener as se, useResizeObserver as ce } from "../../node_modu
 import le from "../label/Label.js";
 import ue from "../input/Input.js";
 import de from "../menu/MenuItem.js";
-import s from "../popover/Popover.js";
-import c from "../popover/PopoverContainer.js";
-import { useVirtualList as fe } from "../../composables/useVirtualList.js";
-import pe from "../tag/Tag.js";
-import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as me, createTextVNode as h, createVNode as g, defineComponent as _, inject as he, mergeModels as v, mergeProps as y, nextTick as b, normalizeClass as x, normalizeStyle as ge, onUnmounted as _e, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, toHandlers as ve, unref as D, useModel as ye, vModelSelect as be, watch as O, withCtx as k, withDirectives as xe, withModifiers as Se } from "vue";
+import fe from "../popover/Popover.js";
+import s from "../popover/PopoverContainer.js";
+import { useVirtualList as pe } from "../../composables/useVirtualList.js";
+import me from "../tag/Tag.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as he, createTextVNode as m, createVNode as h, defineComponent as g, inject as ge, mergeModels as _, mergeProps as v, nextTick as y, normalizeClass as b, normalizeStyle as _e, onUnmounted as ve, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, toHandlers as ye, unref as E, useModel as be, vModelSelect as xe, watch as D, withCtx as O, withDirectives as Se, withModifiers as Ce } from "vue";
 //#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
-var Ce = { class: "relative" }, we = {
+var we = { class: "relative" }, Te = {
 	key: 0,
 	class: "text-secondary-400 dark:text-secondary-500"
-}, Te = { key: 1 }, Ee = {
+}, Ee = { key: 1 }, De = {
 	key: 0,
 	class: "flex items-center"
-}, De = {
+}, Oe = {
 	key: 0,
 	class: "mr-2 shrink-0"
-}, Oe = { class: "flex-1 truncate" }, ke = {
+}, ke = { class: "flex-1 truncate" }, Ae = {
 	key: 1,
 	class: "ml-1 shrink-0"
-}, Ae = {
+}, je = {
 	key: 0,
 	class: "flex items-center"
-}, je = {
+}, Me = {
 	key: 0,
 	class: "mr-2 shrink-0"
-}, Me = { class: "flex-1 truncate" }, Ne = {
+}, Ne = { class: "flex-1 truncate" }, Pe = {
 	key: 1,
 	class: "ml-1 shrink-0"
-}, Pe = {
+}, Fe = {
 	key: 0,
 	class: "text-secondary-400 dark:text-secondary-500"
-}, Fe = { key: 1 }, Ie = {
+}, Ie = { key: 1 }, Le = {
 	key: 0,
 	class: "p-2 text-center text-secondary-400"
-}, Le = {
+}, Re = {
 	key: 0,
 	class: "flex items-center"
-}, Re = {
+}, ze = {
 	key: 0,
 	class: "mr-2 shrink-0"
-}, ze = { class: "flex-1 truncate" }, Be = {
+}, Be = { class: "flex-1 truncate" }, Ve = {
 	key: 1,
 	class: "ml-1 shrink-0"
-}, Ve = [
+}, He = [
 	"id",
 	"name",
 	"disabled",
 	"multiple",
 	"readonly"
-], He = ["value", "disabled"], A = {
+], Ue = ["value", "disabled"], k = {
 	...t.props("secondary"),
 	...i.props(),
 	...re.props(),
 	...o.props(),
-	placeholder: String,
-	options: Array,
-	multiple: r(),
-	multipleCheckbox: r(),
-	truncate: r(),
-	flat: r(),
-	native: r(),
-	filterable: r(),
-	clearable: r(),
+	placeholder: {
+		type: String,
+		description: "Placeholder shown when no option is selected."
+	},
+	options: {
+		type: Array,
+		description: "Available options (`value`, `label`, optional prefix/suffix/disabled)."
+	},
+	multiple: r("Allows selecting more than one option."),
+	multipleCheckbox: r("Multiple selection with checkbox-style items."),
+	truncate: r("Truncates selected labels when space is limited."),
+	flat: r("Removes elevation and border emphasis on the trigger."),
+	native: r("Renders a native HTML select instead of the custom popover."),
+	filterable: r("Shows a filter input inside the options list."),
+	clearable: r("Shows a clear control when a value is selected."),
 	filterPlaceholder: {
 		type: String,
-		default: "Filter by..."
+		default: "Filter by...",
+		description: "Placeholder for the filter input when `filterable` is enabled."
+	},
+	filterablePrefix: r("Includes option prefixes when filtering."),
+	filterableSuffix: r("Includes option suffixes when filtering."),
+	hideSelectedOptionSlots: r("Hides prefix/suffix slots on the selected value display."),
+	virtualList: r("Virtualizes the options list for large datasets."),
+	virtualListOffsetTop: {
+		type: Number,
+		description: "Extra top offset (px) for the virtual list viewport."
+	},
+	virtualListOffsetBottom: {
+		type: Number,
+		description: "Extra bottom offset (px) for the virtual list viewport."
 	},
-	filterablePrefix: r(),
-	filterableSuffix: r(),
-	hideSelectedOptionSlots: r(),
-	virtualList: r(),
-	virtualListOffsetTop: Number,
-	virtualListOffsetBottom: Number,
 	virtualListItemHeight: {
 		type: Number,
-		default: 33
+		default: 33,
+		description: "Estimated row height (px) used by the virtual list."
 	},
 	virtualListOverscan: {
 		type: Number,
-		default: 10
+		default: 10,
+		description: "Extra rows rendered above/below the visible virtual list window."
 	},
-	placement: String
-}, j = /* @__PURE__ */ _({
+	placement: {
+		type: String,
+		description: "Popover placement for the options menu."
+	}
+}, A = /* @__PURE__ */ g({
 	name: "XSelect",
 	validators: { ...i.validators() },
-	props: /* @__PURE__ */ v(A, {
+	docs: {
+		slots: {
+			prefix: "Prefix content for an option or the selected value (`item`).",
+			suffix: "Suffix content for an option or the selected value (`item`).",
+			label: "Custom label content for an option (`item`).",
+			input: "Custom trigger content (popover, selected value, disabled, label).",
+			"content-header": "Content above the options list (default includes the filter).",
+			"content-footer": "Content below the options list.",
+			icon: "Custom chevron/icon on the trigger."
+		},
+		emits: {
+			...o.emitDocs(),
+			open: "Emitted when the options popover opens.",
+			close: "Emitted when the options popover closes."
+		},
+		methods: { ...o.methodDocs() }
+	},
+	props: /* @__PURE__ */ _(k, {
 		filter: { default: "" },
 		filterModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /* @__PURE__ */ _([
 		...o.emits(),
 		"close",
 		"open"
 	], ["update:filter"]),
 	setup(t, { expose: r, emit: i }) {
-		let _ = t, v = i, A = u(() => _.multiple || _.multipleCheckbox), j = C(null), M = C(null), N = C(null), P = C(null), F = C(null), I = C(), L = ye(t, "filter"), R = C(null), Ue = he(e, {
+		let g = t, _ = i, k = l(() => g.multiple || g.multipleCheckbox), A = S(null), j = S(null), M = S(null), N = S(null), P = S(null), F = S(), I = be(t, "filter"), L = S(null), R = ge(e, {
 			registerChild: () => {},
 			unregisterChild: () => {},
 			registerInput: () => {},
 			unregisterInput: () => {},
 			getPosition: () => "only",
-			childOrder: u(() => []),
+			childOrder: l(() => []),
 			isInsideInputGroup: !1,
 			groupProps: {}
-		}), z = u(() => _.disabled || _.loading || _.readonly || !!Ue.groupProps?.disabled), We = u(() => !_.loading && !_.readonly && !_.disabled && _.clearable && !W(B.value)), B = u({
+		}), z = l(() => g.disabled || g.loading || g.readonly || !!R.groupProps?.disabled), We = l(() => !g.loading && !g.readonly && !g.disabled && g.clearable && !W(B.value)), B = l({
 			get() {
-				return A.value ? _.modelValue ? Array.isArray(_.modelValue) ? _.modelValue : [_.modelValue] : [] : _.modelValue;
+				return k.value ? g.modelValue ? Array.isArray(g.modelValue) ? g.modelValue : [g.modelValue] : [] : g.modelValue;
 			},
 			set(e) {
-				v("update:modelValue", e);
+				_("update:modelValue", e);
 			}
-		}), Ge = u(() => _.options ? new Map(_.options.map((e) => [e.value, e])) : /* @__PURE__ */ new Map()), Ke = u(() => _.options ? new Map(_.options.map((e) => [e, {
+		}), Ge = l(() => g.options ? new Map(g.options.map((e) => [e.value, e])) : /* @__PURE__ */ new Map()), Ke = l(() => g.options ? new Map(g.options.map((e) => [e, {
 			label: e.label.toLowerCase(),
-			prefix: _.filterablePrefix && e.prefix ? e.prefix.toLowerCase() : void 0,
-			suffix: _.filterableSuffix && e.suffix ? e.suffix.toLowerCase() : void 0
+			prefix: g.filterablePrefix && e.prefix ? e.prefix.toLowerCase() : void 0,
+			suffix: g.filterableSuffix && e.suffix ? e.suffix.toLowerCase() : void 0
 		}])) : /* @__PURE__ */ new Map());
 		function qe(e, t) {
 			let n = Ke.value.get(e);
 			return n ? n.label.includes(t) || n.prefix?.includes(t) || n.suffix?.includes(t) : !1;
 		}
-		let V = u(() => {
-			if (!_.options || _.options.length === 0) return [];
-			let e = L.value.toLowerCase(), t = L.value !== "", n = new Set(A.value && Array.isArray(B.value) ? B.value : []), r = A.value ? null : B.value;
-			return _.options.filter((n) => !t || qe(n, e)).map((e) => {
-				let t = A.value ? n.has(e.value) : e.value === r;
+		let V = l(() => {
+			if (!g.options || g.options.length === 0) return [];
+			let e = I.value.toLowerCase(), t = I.value !== "", n = new Set(k.value && Array.isArray(B.value) ? B.value : []), r = k.value ? null : B.value;
+			return g.options.filter((n) => !t || qe(n, e)).map((e) => {
+				let t = k.value ? n.has(e.value) : e.value === r;
 				return {
 					value: e.value,
 					label: e.label,
@@ -145,50 +180,50 @@ var Ce = { class: "relative" }, we = {
 					prefix: e.prefix,
 					suffix: e.suffix,
 					disabled: e.disabled,
-					iconRight: !_.multipleCheckbox && t ? ee : void 0,
+					iconRight: !g.multipleCheckbox && t ? ee : void 0,
 					keepOpenOnClick: e.keepOpenOnClick,
 					onClick: () => nt(e.value)
 				};
 			});
-		}), Je = u(() => V.value.filter((e) => !e.disabled)), { list: Ye, scrollTo: Xe, containerProps: Ze, wrapperProps: Qe } = fe(V, {
-			disabled: !_.virtualList,
-			itemHeight: _.virtualListItemHeight,
-			topOffset: _.virtualListOffsetTop || 0,
-			bottomOffset: _.virtualListOffsetBottom || 0,
-			overscan: _.virtualListOverscan
-		}), H = u(() => P.value?.isOpen), $e = u(() => !!D(H.value));
-		O(L, (e) => {
-			e && (I.value = void 0, U(-1));
-		}), O(H, (e) => {
-			e ? (et(), (A.value || I.value === void 0) && U(-1), setTimeout(() => {
+		}), Je = l(() => V.value.filter((e) => !e.disabled)), { list: Ye, scrollTo: Xe, containerProps: Ze, wrapperProps: Qe } = pe(V, {
+			disabled: !g.virtualList,
+			itemHeight: g.virtualListItemHeight,
+			topOffset: g.virtualListOffsetTop || 0,
+			bottomOffset: g.virtualListOffsetBottom || 0,
+			overscan: g.virtualListOverscan
+		}), H = l(() => N.value?.isOpen), $e = l(() => !!E(H.value));
+		D(I, (e) => {
+			e && (F.value = void 0, U(-1));
+		}), D(H, (e) => {
+			e ? (et(), (k.value || F.value === void 0) && U(-1), setTimeout(() => {
 				requestAnimationFrame(() => {
-					tt(I.value || 0), _.filterable && R.value?.focus();
+					tt(F.value || 0), g.filterable && L.value?.focus();
 				});
-			}, 50), v("open")) : (_.filterable && (L.value = ""), v("close"));
+			}, 50), _("open")) : (g.filterable && (I.value = ""), _("close"));
 		});
 		function et() {
-			if (A.value) {
+			if (k.value) {
 				if (Array.isArray(B.value) && B.value.length > 0) {
 					let e = V.value.findIndex((e) => e.value === B.value[0]);
-					e !== -1 && (I.value = e);
+					e !== -1 && (F.value = e);
 				}
 			} else {
 				let e = V.value.findIndex((e) => e.value === B.value);
-				e !== -1 && (I.value = e);
+				e !== -1 && (F.value = e);
 			}
 		}
 		function tt(e) {
-			_.virtualList ? Xe(e) : N.value && N.value[e]?.$el.scrollIntoView({
+			g.virtualList ? Xe(e) : M.value && M.value[e]?.$el.scrollIntoView({
 				block: "nearest",
 				inline: "nearest"
 			});
 		}
-		O(I, (e) => {
-			e !== void 0 && N.value && tt(e);
+		D(F, (e) => {
+			e !== void 0 && M.value && tt(e);
 		});
 		function U(e, t = "down") {
 			if (!Je.value || Je.value.length === 0) {
-				I.value = void 0;
+				F.value = void 0;
 				return;
 			}
 			e === void 0 && (e = t === "down" ? -1 : 1);
@@ -196,34 +231,34 @@ var Ce = { class: "relative" }, we = {
 			if (t === "down") {
 				let t = e + 1;
 				for (t > n - 1 && (t = 0); V.value[t].disabled;) if (++t > n - 1 && (t = 0), ++r >= n) {
-					I.value = void 0;
+					F.value = void 0;
 					return;
 				}
-				I.value = t;
+				F.value = t;
 			} else {
 				let t = e - 1;
 				for (t < 0 && (t = n - 1); V.value[t].disabled;) if (--t < 0 && (t = n - 1), ++r >= n) {
-					I.value = void 0;
+					F.value = void 0;
 					return;
 				}
-				I.value = t;
+				F.value = t;
 			}
 		}
 		function nt(e) {
 			let t = G(e);
 			if (!(!t || t.disabled)) if (t.onClick) t.onClick();
 			else {
-				if (A.value) {
+				if (k.value) {
 					if (Array.isArray(B.value)) {
 						let t = B.value.indexOf(e);
 						t === -1 ? B.value.push(e) : B.value.splice(t, 1);
 					} else B.value = [e];
-					v("update:modelValue", B.value), _.filterable && setTimeout(() => {
-						R.value?.focus();
+					_("update:modelValue", B.value), g.filterable && setTimeout(() => {
+						L.value?.focus();
 					});
 				} else B.value = e;
-				_.native || b(() => {
-					ut(), M.value?.$el.focus();
+				g.native || y(() => {
+					ut(), j.value?.$el.focus();
 				});
 			}
 		}
@@ -233,7 +268,7 @@ var Ce = { class: "relative" }, we = {
 		function rt(e, t) {
 			if (e.stopPropagation(), z.value || !Array.isArray(B.value)) return;
 			let n = B.value.indexOf(t);
-			n !== -1 && (B.value.splice(n, 1), v("update:modelValue", B.value));
+			n !== -1 && (B.value.splice(n, 1), _("update:modelValue", B.value));
 		}
 		function G(e) {
 			if (!Array.isArray(e)) return Ge.value.get(e);
@@ -248,55 +283,55 @@ var Ce = { class: "relative" }, we = {
 				label: e?.toString() || ""
 			};
 		}
-		let { focus: it, blur: at } = re(j), { errorInternal: ot, hideFooterInternal: st, hideLabelInternal: ct, inputListeners: lt, reset: J, validate: ut, setError: dt, isFocused: ft, isInsideForm: pt, isInsideInputGroup: mt, inputGroupPosition: ht } = o(_, {
+		let { focus: it, blur: at } = re(A), { errorInternal: ot, hideFooterInternal: st, hideLabelInternal: ct, inputListeners: lt, reset: J, validate: ut, setError: dt, isFocused: ft, isInsideForm: pt, isInsideInputGroup: mt, inputGroupPosition: ht } = o(g, {
 			focus: it,
-			emit: v,
+			emit: _,
 			withListeners: !0
-		}), gt = u(() => Ue.groupProps?.size ?? _.size), _t = u(() => ct.value ? void 0 : _.label), vt = u(() => ({
-			..._,
+		}), gt = l(() => R.groupProps?.size ?? g.size), _t = l(() => ct.value ? void 0 : g.label), vt = l(() => ({
+			...g,
 			size: gt.value,
 			disabled: z.value
-		})), yt = u(() => {
-			let { focus: e, blur: t } = D(lt);
+		})), yt = l(() => {
+			let { focus: e, blur: t } = E(lt);
 			return {
 				focus: e,
 				blur: t
 			};
 		}), Y = null;
-		O([ft, H], ([e, t]) => {
+		D([ft, H], ([e, t]) => {
 			e || t ? Y ||= se(document, "keydown", bt) : Y &&= (Y(), null);
-		}, { immediate: !0 }), _e(() => {
+		}, { immediate: !0 }), ve(() => {
 			Y && Y();
 		});
 		function bt(e) {
 			if (V.value.length !== 0) if (e.code === "ArrowDown") {
 				if (e.preventDefault(), !H.value) {
-					P.value?.show();
+					N.value?.show();
 					return;
 				}
-				U(I.value, "down");
+				U(F.value, "down");
 			} else if (e.code === "ArrowUp") {
 				if (e.preventDefault(), !H.value) {
-					P.value?.show();
+					N.value?.show();
 					return;
 				}
-				U(I.value, "up");
+				U(F.value, "up");
 			} else if (e.code === "Enter" || e.code === "Space") {
-				if (e.code === "Space" && _.filterable) return;
+				if (e.code === "Space" && g.filterable) return;
 				if (e.preventDefault(), e.stopPropagation(), !H.value) {
-					P.value?.show();
+					N.value?.show();
 					return;
 				}
-				if (I.value !== void 0 && V.value[I.value]) {
-					let e = V.value[I.value];
-					nt(e.value), !e.keepOpenOnClick && (!A.value || _.multipleCheckbox) && P.value?.hide();
+				if (F.value !== void 0 && V.value[F.value]) {
+					let e = V.value[F.value];
+					nt(e.value), !e.keepOpenOnClick && (!k.value || g.multipleCheckbox) && N.value?.hide();
 				}
-			} else e.code === "Tab" && H.value && (e.preventDefault(), P.value?.hide(), _.native || b(() => {
-				M.value?.$el.focus();
+			} else e.code === "Tab" && H.value && (e.preventDefault(), N.value?.hide(), g.native || y(() => {
+				j.value?.$el.focus();
 			}));
 		}
-		let X = C(null), xt = C(null), Z = C(!1), Q = C(0), St = oe(() => {
-			A.value && _.truncate && b(() => {
+		let X = S(null), xt = S(null), Z = S(!1), Q = S(0), St = oe(() => {
+			k.value && g.truncate && y(() => {
 				let e = Ct();
 				e < B.value.length ? (Z.value = !0, Q.value = B.value.length - e) : (Z.value = !1, Q.value = 0);
 			});
@@ -313,7 +348,7 @@ var Ce = { class: "relative" }, we = {
 			}
 			return r;
 		}
-		O(B, (e) => {
+		D(B, (e) => {
 			St();
 		}, {
 			immediate: !0,
@@ -331,69 +366,69 @@ var Ce = { class: "relative" }, we = {
 			reset: J,
 			validate: ut,
 			setError: dt,
-			filterRef: R
-		}), (e, t) => (S(), d(le, y({
+			filterRef: L
+		}), (e, t) => (x(), u(le, v({
 			ref_key: "labelRef",
-			ref: M,
+			ref: j,
 			tabindex: "0",
-			class: ["group", [D(Tt), D($).wrapper]],
-			style: D(wt),
+			class: ["group", [E(Tt), E($).wrapper]],
+			style: E(wt),
 			disabled: z.value,
 			required: e.required,
-			"is-inside-form": D(pt),
-			"is-inside-input-group": D(mt),
+			"is-inside-form": E(pt),
+			"is-inside-input-group": E(mt),
 			label: _t.value,
 			tooltip: e.tooltip
-		}, ve(yt.value)), {
-			default: k(() => [m("div", Ce, [
-				e.native && !A.value ? (S(), p("div", {
+		}, ye(yt.value)), {
+			default: O(() => [p("div", we, [
+				e.native && !k.value ? (x(), f("div", {
 					key: 0,
-					class: x(D($).box),
-					onClick: t[0] ||= (e) => j.value?.click()
-				}, [W(B.value) ? (S(), p(l, { key: 1 }, [e.placeholder ? (S(), p("div", we, E(e.placeholder), 1)) : (S(), p("div", Te, "\xA0"))], 64)) : (S(), p(l, { key: 0 }, [h(E(K(B.value)), 1)], 64))], 2)) : (S(), p(l, { key: 1 }, [g(s, {
+					class: b(E($).box),
+					onClick: t[0] ||= (e) => A.value?.click()
+				}, [W(B.value) ? (x(), f(c, { key: 1 }, [e.placeholder ? (x(), f("div", Te, T(e.placeholder), 1)) : (x(), f("div", Ee, "\xA0"))], 64)) : (x(), f(c, { key: 0 }, [m(T(K(B.value)), 1)], 64))], 2)) : (x(), f(c, { key: 1 }, [h(fe, {
 					ref_key: "popoverRef",
-					ref: P,
+					ref: N,
 					disabled: z.value,
 					placement: e.placement
 				}, {
-					content: k(() => [g(c, { class: x(D($).content) }, {
-						default: k(() => [
-							T(e.$slots, "content-header", {}, () => [e.filterable ? (S(), p("div", {
+					content: O(() => [h(s, { class: b(E($).content) }, {
+						default: O(() => [
+							w(e.$slots, "content-header", {}, () => [e.filterable ? (x(), f("div", {
 								key: 0,
-								class: x(D($).search)
-							}, [g(ue, {
+								class: b(E($).search)
+							}, [h(ue, {
 								ref_key: "filterRef",
-								ref: R,
-								modelValue: L.value,
-								"onUpdate:modelValue": t[2] ||= (e) => L.value = e,
+								ref: L,
+								modelValue: I.value,
+								"onUpdate:modelValue": t[2] ||= (e) => I.value = e,
 								placeholder: e.filterPlaceholder,
 								"skip-form-registry": "",
 								"data-1p-ignore": "",
 								size: "sm"
-							}, null, 8, ["modelValue", "placeholder"])], 2)) : f("", !0)]),
-							m("div", y(D(Ze), { class: D($).contentBody }), [m("div", y(D(Qe), { class: "space-y-0.5" }), [(S(!0), p(l, null, w(D(Ye), (t) => (S(), d(de, {
+							}, null, 8, ["modelValue", "placeholder"])], 2)) : d("", !0)]),
+							p("div", v(E(Ze), { class: E($).contentBody }), [p("div", v(E(Qe), { class: "space-y-0.5" }), [(x(!0), f(c, null, C(E(Ye), (t) => (x(), u(de, {
 								key: t.index,
 								ref_for: !0,
 								ref_key: "itemsRef",
-								ref: N,
+								ref: M,
 								item: t.data,
 								size: e.size,
 								disabled: t.data.disabled,
-								selected: t.index === I.value,
+								selected: t.index === F.value,
 								checkbox: e.multipleCheckbox && !t.data.keepOpenOnClick,
 								color: e.color,
 								filled: "",
-								onClick: () => !t.data.keepOpenOnClick && (!A.value || e.multipleCheckbox) && P.value?.hide()
-							}, me({
-								default: k(() => [T(e.$slots, "label", { item: t.data })]),
+								onClick: () => !t.data.keepOpenOnClick && (!k.value || e.multipleCheckbox) && N.value?.hide()
+							}, he({
+								default: O(() => [w(e.$slots, "label", { item: t.data })]),
 								_: 2
 							}, [e.$slots.prefix || t.data.prefix ? {
 								name: "prefix",
-								fn: k(() => [T(e.$slots, "prefix", { item: t.data }, () => [h(E(t.data.prefix), 1)])]),
+								fn: O(() => [w(e.$slots, "prefix", { item: t.data }, () => [m(T(t.data.prefix), 1)])]),
 								key: "0"
 							} : void 0, e.$slots.suffix || t.data.suffix ? {
 								name: "suffix",
-								fn: k(() => [T(e.$slots, "suffix", { item: t.data }, () => [h(E(t.data.suffix), 1)])]),
+								fn: O(() => [w(e.$slots, "suffix", { item: t.data }, () => [m(T(t.data.suffix), 1)])]),
 								key: "1"
 							} : void 0]), 1032, [
 								"item",
@@ -403,39 +438,39 @@ var Ce = { class: "relative" }, we = {
 								"checkbox",
 								"color",
 								"onClick"
-							]))), 128))], 16), D(Ye).length === 0 ? (S(), p("div", Ie, " No options ")) : f("", !0)], 16),
-							T(e.$slots, "content-footer")
+							]))), 128))], 16), E(Ye).length === 0 ? (x(), f("div", Le, " No options ")) : d("", !0)], 16),
+							w(e.$slots, "content-footer")
 						]),
 						_: 3
 					}, 8, ["class"])]),
-					default: k(() => [T(e.$slots, "input", {
-						popover: P.value,
+					default: O(() => [w(e.$slots, "input", {
+						popover: N.value,
 						selected: B.value,
 						disabled: z.value,
 						label: K(B.value)
-					}, () => [m("div", { class: x([D($).box]) }, [A.value && Array.isArray(B.value) && B.value.length > 0 ? (S(), p("div", {
+					}, () => [p("div", { class: b([E($).box]) }, [k.value && Array.isArray(B.value) && B.value.length > 0 ? (x(), f("div", {
 						key: 0,
 						ref_key: "tagsRef",
 						ref: X,
-						class: x(["flex gap-1 relative", {
+						class: b(["flex gap-1 relative", {
 							"flex-wrap": !e.truncate,
 							"overflow-hidden": e.truncate
 						}])
-					}, [(S(!0), p(l, null, w(B.value, (t, n) => (S(), d(pe, {
+					}, [(x(!0), f(c, null, C(B.value, (t, n) => (x(), u(me, {
 						key: t,
 						size: "xs",
 						removable: "",
 						outlined: !(z.value || G(t)?.disabled),
 						disabled: z.value || G(t)?.disabled,
-						style: ge({ "max-width": n === 0 && F.value ? `calc(100% - ${F.value.offsetWidth + 6 + "px"})` : void 0 }),
+						style: _e({ "max-width": n === 0 && P.value ? `calc(100% - ${P.value.offsetWidth + 6 + "px"})` : void 0 }),
 						onRemove: (e) => {
 							rt(e, t);
 						}
 					}, {
-						default: k(() => [e.hideSelectedOptionSlots ? (S(), p(l, { key: 1 }, [h(E(K(t)), 1)], 64)) : (S(), p("div", Ee, [
-							e.$slots.prefix || G(t)?.prefix ? (S(), p("span", De, [T(e.$slots, "prefix", { item: G(t) || q(t) }, () => [h(E(G(t)?.prefix), 1)])])) : f("", !0),
-							m("span", Oe, E(K(t)), 1),
-							e.$slots.suffix || G(t)?.suffix ? (S(), p("span", ke, [T(e.$slots, "suffix", { item: G(t) || q(t) }, () => [h(E(G(t)?.suffix), 1)])])) : f("", !0)
+						default: O(() => [e.hideSelectedOptionSlots ? (x(), f(c, { key: 1 }, [m(T(K(t)), 1)], 64)) : (x(), f("div", De, [
+							e.$slots.prefix || G(t)?.prefix ? (x(), f("span", Oe, [w(e.$slots, "prefix", { item: G(t) || q(t) }, () => [m(T(G(t)?.prefix), 1)])])) : d("", !0),
+							p("span", ke, T(K(t)), 1),
+							e.$slots.suffix || G(t)?.suffix ? (x(), f("span", Ae, [w(e.$slots, "suffix", { item: G(t) || q(t) }, () => [m(T(G(t)?.suffix), 1)])])) : d("", !0)
 						]))]),
 						_: 2
 					}, 1032, [
@@ -443,19 +478,19 @@ var Ce = { class: "relative" }, we = {
 						"disabled",
 						"style",
 						"onRemove"
-					]))), 128)), Z.value ? (S(), p("div", {
+					]))), 128)), Z.value ? (x(), f("div", {
 						key: 0,
 						ref_key: "hiddenTagsCounterRef",
-						ref: F,
-						class: x(D($).truncateCounter),
-						onClick: t[1] ||= Se((e) => xt.value?.toggle(), ["stop"])
-					}, "+" + E(Q.value), 3)) : f("", !0)], 2)) : !A.value && !W(B.value) && K(B.value) !== "" ? (S(), p(l, { key: 1 }, [e.hideSelectedOptionSlots ? (S(), p(l, { key: 1 }, [h(E(K(B.value)), 1)], 64)) : (S(), p("div", Ae, [
-						e.$slots.prefix || G(B.value)?.prefix ? (S(), p("span", je, [T(e.$slots, "prefix", { item: G(B.value) || q(B.value) }, () => [h(E(G(B.value)?.prefix), 1)])])) : f("", !0),
-						m("span", Me, E(K(B.value)), 1),
-						e.$slots.suffix || G(B.value)?.suffix ? (S(), p("span", Ne, [T(e.$slots, "suffix", { item: G(B.value) || q(B.value) }, () => [h(E(G(B.value)?.suffix), 1)])])) : f("", !0)
-					]))], 64)) : (S(), p(l, { key: 2 }, [e.placeholder ? (S(), p("div", Pe, E(e.placeholder), 1)) : (S(), p("div", Fe, "\xA0"))], 64))], 2)])]),
+						ref: P,
+						class: b(E($).truncateCounter),
+						onClick: t[1] ||= Ce((e) => xt.value?.toggle(), ["stop"])
+					}, "+" + T(Q.value), 3)) : d("", !0)], 2)) : !k.value && !W(B.value) && K(B.value) !== "" ? (x(), f(c, { key: 1 }, [e.hideSelectedOptionSlots ? (x(), f(c, { key: 1 }, [m(T(K(B.value)), 1)], 64)) : (x(), f("div", je, [
+						e.$slots.prefix || G(B.value)?.prefix ? (x(), f("span", Me, [w(e.$slots, "prefix", { item: G(B.value) || q(B.value) }, () => [m(T(G(B.value)?.prefix), 1)])])) : d("", !0),
+						p("span", Ne, T(K(B.value)), 1),
+						e.$slots.suffix || G(B.value)?.suffix ? (x(), f("span", Pe, [w(e.$slots, "suffix", { item: G(B.value) || q(B.value) }, () => [m(T(G(B.value)?.suffix), 1)])])) : d("", !0)
+					]))], 64)) : (x(), f(c, { key: 2 }, [e.placeholder ? (x(), f("div", Fe, T(e.placeholder), 1)) : (x(), f("div", Ie, "\xA0"))], 64))], 2)])]),
 					_: 3
-				}, 8, ["disabled", "placement"]), A.value && e.truncate && Z.value ? (S(), d(s, {
+				}, 8, ["disabled", "placement"]), k.value && e.truncate && Z.value ? (x(), u(fe, {
 					key: 0,
 					ref_key: "multipleHiddenRef",
 					ref: xt,
@@ -464,8 +499,8 @@ var Ce = { class: "relative" }, we = {
 					class: "inline-block !absolute right-0",
 					placement: "auto-start"
 				}, {
-					content: k(() => [g(c, { class: "p-2 flex gap-2 flex-wrap" }, {
-						default: k(() => [(S(!0), p(l, null, w(B.value?.slice(B.value.length - Q.value), (t) => (S(), d(pe, {
+					content: O(() => [h(s, { class: "p-2 flex gap-2 flex-wrap" }, {
+						default: O(() => [(x(!0), f(c, null, C(B.value?.slice(B.value.length - Q.value), (t) => (x(), u(me, {
 							key: t,
 							size: "xs",
 							removable: "",
@@ -475,10 +510,10 @@ var Ce = { class: "relative" }, we = {
 								rt(e, t);
 							}
 						}, {
-							default: k(() => [e.hideSelectedOptionSlots ? (S(), p(l, { key: 1 }, [h(E(K(t)), 1)], 64)) : (S(), p("div", Le, [
-								e.$slots.prefix || G(t)?.prefix ? (S(), p("span", Re, [T(e.$slots, "prefix", { item: G(t) || q(t) }, () => [h(E(G(t)?.prefix), 1)])])) : f("", !0),
-								m("span", ze, E(K(t)), 1),
-								e.$slots.suffix || G(t)?.suffix ? (S(), p("span", Be, [T(e.$slots, "suffix", { item: G(t) || q(t) }, () => [h(E(G(t)?.suffix), 1)])])) : f("", !0)
+							default: O(() => [e.hideSelectedOptionSlots ? (x(), f(c, { key: 1 }, [m(T(K(t)), 1)], 64)) : (x(), f("div", Re, [
+								e.$slots.prefix || G(t)?.prefix ? (x(), f("span", ze, [w(e.$slots, "prefix", { item: G(t) || q(t) }, () => [m(T(G(t)?.prefix), 1)])])) : d("", !0),
+								p("span", Be, T(K(t)), 1),
+								e.$slots.suffix || G(t)?.suffix ? (x(), f("span", Ve, [w(e.$slots, "suffix", { item: G(t) || q(t) }, () => [m(T(G(t)?.suffix), 1)])])) : d("", !0)
 							]))]),
 							_: 2
 						}, 1032, [
@@ -489,46 +524,46 @@ var Ce = { class: "relative" }, we = {
 						_: 3
 					})]),
 					_: 3
-				}, 512)) : f("", !0)], 64)),
-				xe(m("select", y({
+				}, 512)) : d("", !0)], 64)),
+				Se(p("select", v({
 					id: e.id,
 					ref_key: "elRef",
-					ref: j,
+					ref: A,
 					"onUpdate:modelValue": t[3] ||= (e) => B.value = e,
 					tabindex: "-1",
-					class: e.native && !A.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
+					class: e.native && !k.value ? "absolute inset-0 w-full h-full cursor-pointer opacity-0" : "hidden",
 					name: e.name,
 					disabled: e.disabled || e.loading,
-					multiple: A.value,
+					multiple: k.value,
 					readonly: e.readonly
-				}, ve(D(lt), !0)), [e.native ? (S(!0), p(l, { key: 0 }, w(e.options, (e, t) => (S(), p("option", {
+				}, ye(E(lt), !0)), [e.native ? (x(!0), f(c, { key: 0 }, C(e.options, (e, t) => (x(), f("option", {
 					key: t,
 					value: e.value,
 					disabled: e.disabled
-				}, E(e.label), 9, He))), 128)) : f("", !0)], 16, Ve), [[be, B.value]]),
-				We.value ? (S(), p("button", {
+				}, T(e.label), 9, Ue))), 128)) : d("", !0)], 16, He), [[xe, B.value]]),
+				We.value ? (x(), f("button", {
 					key: 2,
 					type: "button",
 					"aria-label": "Clean value",
-					class: x(D($).clearButton),
-					onClick: t[4] ||= (...e) => D(J) && D(J)(...e)
-				}, [g(a, {
-					icon: D(te),
-					class: x([D($).icon, "cursor-pointer"])
-				}, null, 8, ["icon", "class"])], 2)) : f("", !0),
-				e.$slots.input ? f("", !0) : (S(), p("div", {
+					class: b(E($).clearButton),
+					onClick: t[4] ||= (...e) => E(J) && E(J)(...e)
+				}, [h(a, {
+					icon: E(te),
+					class: b([E($).icon, "cursor-pointer"])
+				}, null, 8, ["icon", "class"])], 2)) : d("", !0),
+				e.$slots.input ? d("", !0) : (x(), f("div", {
 					key: 3,
-					class: x(D($).iconWrapper)
-				}, [e.loading ? (S(), d(ie, {
+					class: b(E($).iconWrapper)
+				}, [e.loading ? (x(), u(ie, {
 					key: 0,
 					size: e.size
-				}, null, 8, ["size"])) : T(e.$slots, "icon", { key: 1 }, () => [g(a, {
-					icon: D(ne),
-					class: x(D($).icon)
+				}, null, 8, ["size"])) : w(e.$slots, "icon", { key: 1 }, () => [h(a, {
+					icon: E(ne),
+					class: b(E($).icon)
 				}, null, 8, ["icon", "class"])])], 2))
-			]), D(st) ? f("", !0) : (S(), d(ae, {
+			]), E(st) ? d("", !0) : (x(), u(ae, {
 				key: 0,
-				error: D(ot),
+				error: E(ot),
 				helper: e.helper
 			}, null, 8, ["error", "helper"]))]),
 			_: 3
@@ -545,4 +580,4 @@ var Ce = { class: "relative" }, we = {
 	}
 });
 //#endregion
-export { j as default };
+export { A as default };