vectis-ui 0.10.0 → 0.10.2

package/dist/components/VCombobox/VCombobox.vue_vue_type_script_setup_true_lang.js

@@ -20,29 +20,29 @@ import { useInfiniteScroll as de } from "./infiniteScroll.js";
 import { chipScaleFor as fe } from "../../utils/chip.js";
 import { createNormalizedCache as pe, normalizeText as me } from "../../utils/text.js";
 import { useFocusoutDismiss as he } from "../../composables/useFocusoutDismiss.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as ge, createTextVNode as p, createVNode as m, defineComponent as _e, inject as ve, mergeModels as ye, mergeProps as h, nextTick as be, normalizeClass as xe, normalizeStyle as Se, openBlock as g, reactive as Ce, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useId as we, useModel as Te, watch as S, watchEffect as Ee, withCtx as C } from "vue";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as ge, createTextVNode as p, createVNode as m, defineComponent as _e, inject as ve, mergeModels as ye, mergeProps as h, normalizeClass as be, normalizeStyle as xe, openBlock as g, reactive as Se, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useId as Ce, useModel as we, watch as S, watchEffect as Te, withCtx as C } from "vue";
 //#region src/components/VCombobox/VCombobox.vue?vue&type=script&setup=true&lang.ts
-var De = [
+var Ee = [
 	"data-size",
 	"data-compact",
 	"data-multiple",
 	"data-collapsed",
 	"data-open"
-], Oe = {
+], De = {
 	key: 0,
 	class: "v-combobox-text"
-}, ke = {
+}, Oe = {
 	key: 1,
 	class: "v-combobox-overflow"
-}, Ae = {
+}, ke = {
 	key: 0,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, je = {
+}, Ae = {
 	key: 1,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, Me = {
+}, je = {
 	class: "v-visually-hidden",
 	role: "status"
 }, w = /*@__PURE__*/ _e({
@@ -119,43 +119,43 @@ var De = [
 		"click:icon-start"
 	], ["update:modelValue"]),
 	setup(o, { expose: _e, emit: ye }) {
-		let w = (e) => "options" in e, Ne = (e) => "separator" in e, T = o, E = e(), Pe = c(() => T.emptyText ?? E.value.combobox.empty), Fe = c(() => T.clearLabel ?? E.value.combobox.clear), D = c(() => T.loadingText ?? E.value.common.loading), O = ye, { size: k, compact: A, disabled: j } = i(T, ve(ie, null)), M = c(() => fe(k.value, A.value)), N = Te(o, "modelValue"), { rootClass: Ie, rootStyle: Le, forwardedAttrs: Re } = ee(), ze = ne((e) => O("click:icon-start", e)), Be = c(() => ({
-			...Re.value,
-			...ze
-		})), Ve = _(null), P = _(null), F = we(), I = _(!1), L = _(""), R = _(-1), z = _(!1), B = _(!1), V = c(() => T.multiple ? Array.isArray(N.value) ? N.value : [] : !Array.isArray(N.value) && N.value !== "" ? [N.value] : []), H = c(() => T.options.flatMap((e) => Ne(e) ? [] : w(e) ? e.options : [e])), U = Ce(/* @__PURE__ */ new Map());
-		Ee(() => {
-			let e = new Set(V.value);
-			for (let t of H.value) e.has(t.value) && U.set(t.value, t);
-			for (let t of U.keys()) e.has(t) || U.delete(t);
+		let w = (e) => "options" in e, Me = (e) => "separator" in e, T = o, E = e(), Ne = c(() => T.emptyText ?? E.value.combobox.empty), Pe = c(() => T.clearLabel ?? E.value.combobox.clear), D = c(() => T.loadingText ?? E.value.common.loading), O = ye, { size: k, compact: A, disabled: j } = i(T, ve(ie, null)), M = c(() => fe(k.value, A.value)), N = we(o, "modelValue"), { rootClass: Fe, rootStyle: Ie, forwardedAttrs: Le } = ee(), Re = ne((e) => O("click:icon-start", e)), ze = c(() => ({
+			...Le.value,
+			...Re
+		})), Be = _(null), P = _(null), F = Ce(), I = _(!1), L = _(""), R = _(-1), Ve = _(!1), z = _(!1), B = c(() => T.multiple ? Array.isArray(N.value) ? N.value : [] : !Array.isArray(N.value) && N.value !== "" ? [N.value] : []), V = c(() => T.options.flatMap((e) => Me(e) ? [] : w(e) ? e.options : [e])), H = Se(/* @__PURE__ */ new Map());
+		Te(() => {
+			let e = new Set(B.value);
+			for (let t of V.value) e.has(t.value) && H.set(t.value, t);
+			for (let t of H.keys()) e.has(t) || H.delete(t);
 		});
 		let He = c(() => {
 			let e = /* @__PURE__ */ new Map();
-			for (let t of H.value) e.has(t.value) || e.set(t.value, t);
+			for (let t of V.value) e.has(t.value) || e.set(t.value, t);
 			return e;
-		}), Ue = c(() => new Set(V.value));
+		}), Ue = c(() => new Set(B.value));
 		function We(e) {
-			return He.value.get(e) ?? U.get(e);
+			return He.value.get(e) ?? H.get(e);
 		}
-		function W(e) {
+		function U(e) {
 			return We(e)?.label ?? String(e);
 		}
-		let Ge = pe(), Ke = (e) => Ge(e, e.label), G = c(() => B.value ? L.value.trim() : ""), K = _(null), q = c(() => {
-			let e = T.filter, t = H.value;
+		let Ge = pe(), Ke = (e) => Ge(e, e.label), W = c(() => z.value ? L.value.trim() : ""), G = _(null), K = c(() => {
+			let e = T.filter, t = V.value;
 			if (e === !1) return t;
-			let n = K.value ?? G.value;
+			let n = G.value ?? W.value;
 			if (!n) return t;
 			if (typeof e == "function") return t.filter((t) => e(t, n));
 			let r = me(n);
 			return t.filter((e) => Ke(e).includes(r));
-		}), qe = c(() => !I.value || q.value.length > 0 ? "" : T.loading ? D.value : Pe.value), Je = c(() => {
-			let e = new Set(q.value), t = 0, n = (n, r) => e.has(n) ? {
+		}), qe = c(() => !I.value || K.value.length > 0 ? "" : T.loading ? D.value : Ne.value), Je = c(() => {
+			let e = new Set(K.value), t = 0, n = (n, r) => e.has(n) ? {
 				kind: "option",
 				key: `option:${r}`,
 				option: n,
 				index: t++
 			} : null, r = [], i = null;
 			for (let [e, t] of T.options.entries()) {
-				if (Ne(t)) {
+				if (Me(t)) {
 					r.length > 0 && (i = `sep:${e}`);
 					continue;
 				}
@@ -175,34 +175,34 @@ var De = [
 				}), i = null), r.push(a));
 			}
 			return r;
-		}), Ye = oe(), Xe, J = Ye.cancel;
+		}), Ye = oe(), Xe, q = Ye.cancel;
 		function Ze(e, t = !1) {
-			J(), e !== Xe && Ye.start(() => {
+			q(), e !== Xe && Ye.start(() => {
 				I.value && (Xe = e, O("search", e));
 			}, t ? 0 : T.searchDebounce);
 		}
-		S(G, (e) => {
-			I.value && (R.value = q.value.findIndex((e) => !e.disabled), lt.restart(), Ze(e));
-		}), S(q, (e) => {
+		S(W, (e) => {
+			I.value && (R.value = K.value.findIndex((e) => !e.disabled), ct.restart(), Ze(e));
+		}), S(K, (e) => {
 			I.value && (R.value < 0 || R.value >= e.length) && (R.value = e.findIndex((e) => !e.disabled));
 		});
-		function Y() {
-			let e = T.multiple ? void 0 : V.value[0];
-			return e === void 0 ? "" : W(e);
+		function J() {
+			let e = T.multiple ? void 0 : B.value[0];
+			return e === void 0 ? "" : U(e);
 		}
-		L.value = Y(), S([H, V], () => {
-			T.multiple || I.value || B.value || (L.value = Y());
+		L.value = J(), S([V, B], () => {
+			T.multiple || I.value || z.value || (L.value = J());
 		}, { flush: "post" });
-		let X = c(() => T.multiple && T.display === "text"), Qe = c(() => T.multiple && V.value.length > 0 && (!z.value || X.value && T.readonly)), $e = c(() => Qe.value && T.max ? V.value.slice(0, T.max) : V.value), Z = c(() => V.value.length - $e.value.length), et = c(() => T.overflowText ? T.overflowText(Z.value) : `+${Z.value}`), tt = c(() => X.value ? $e.value.map(W).join(", ") : ""), nt = c(() => re(T, j.value, V.value.length > 0 || L.value.length > 0)), rt = c(() => new Map(H.value.map((e, t) => [e, t]))), it = (e) => {
-			let t = q.value[e];
-			return `${F}-option-${t ? rt.value.get(t) : e}`;
+		let Y = c(() => T.multiple && T.display === "text"), Qe = c(() => T.multiple && B.value.length > 0 && (!Ve.value || Y.value && T.readonly)), X = c(() => Qe.value && T.max ? B.value.slice(0, T.max) : B.value), Z = c(() => B.value.length - X.value.length), $e = c(() => T.overflowText ? T.overflowText(Z.value) : `+${Z.value}`), et = c(() => Y.value ? X.value.map(U).join(", ") : ""), tt = c(() => re(T, j.value, B.value.length > 0 || L.value.length > 0)), nt = c(() => new Map(V.value.map((e, t) => [e, t]))), rt = (e) => {
+			let t = K.value[e];
+			return `${F}-option-${t ? nt.value.get(t) : e}`;
 		};
-		function at(e) {
+		function it(e) {
 			let t = e.index === R.value, n = Ue.value.has(e.option.value);
 			return {
 				...e,
 				row: {
-					id: it(e.index),
+					id: rt(e.index),
 					icon: e.option.icon,
 					active: t,
 					selected: n,
@@ -216,91 +216,89 @@ var De = [
 				}
 			};
 		}
-		let ot = c(() => Je.value.map((e) => e.kind === "option" ? at(e) : e.kind === "group" ? {
+		let at = c(() => Je.value.map((e) => e.kind === "option" ? it(e) : e.kind === "group" ? {
 			...e,
-			options: e.options.map(at)
+			options: e.options.map(it)
 		} : e));
-		function st(e) {
+		function ot(e) {
 			e.option.disabled || (R.value = e.index);
 		}
 		S(R, (e) => {
-			e < 0 || be(() => {
-				document.getElementById(it(e))?.scrollIntoView?.({ block: "nearest" });
-			});
-		});
+			e < 0 || document.getElementById(rt(e))?.scrollIntoView?.({ block: "nearest" });
+		}, { flush: "post" });
 		function Q() {
 			if (j.value || T.readonly || I.value) return;
-			K.value = null, I.value = !0;
-			let e = q.value, t = e.findIndex((e) => !e.disabled && Ue.value.has(e.value));
-			R.value = t >= 0 ? t : e.findIndex((e) => !e.disabled), Ze(G.value, !0);
+			G.value = null, I.value = !0;
+			let e = K.value, t = e.findIndex((e) => !e.disabled && Ue.value.has(e.value));
+			R.value = t >= 0 ? t : e.findIndex((e) => !e.disabled), Ze(W.value, !0);
 		}
-		let ct = _(null), lt = de({
-			sentinelEl: ct,
+		let st = _(null), ct = de({
+			sentinelEl: st,
 			canLoad: () => I.value && T.hasMore && !T.loading,
-			loaded: () => H.value,
+			loaded: () => V.value,
 			onLoadMore: () => O("load-more")
 		});
 		function $() {
-			I.value && (J(), lt.reset(), K.value = G.value, I.value = !1, R.value = -1, B.value = !1, L.value = Y());
+			I.value && (q(), ct.reset(), G.value = W.value, I.value = !1, R.value = -1, z.value = !1, L.value = J());
 		}
 		S(() => T.readonly || j.value, (e) => {
 			e && $();
 		});
-		let ut = he(Ve, $);
-		function dt(e) {
+		let lt = he(Be, $);
+		function ut(e) {
 			e.preventDefault();
 		}
+		function dt() {
+			z.value = !0, Q();
+		}
 		function ft() {
-			B.value = !0, Q();
+			!T.multiple && L.value && P.value?.select();
 		}
 		function pt() {
-			!T.multiple && L.value && P.value?.select();
+			Ve.value = !0, ft();
 		}
-		function mt() {
-			z.value = !0, pt();
+		let mt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
+		function ht(e) {
+			mt(e) && e.preventDefault();
 		}
-		let ht = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
 		function gt(e) {
-			ht(e) && e.preventDefault();
-		}
-		function _t(e) {
 			if (!j.value) {
-				if (P.value?.focus(), I.value && ht(e)) {
+				if (P.value?.focus(), I.value && mt(e)) {
 					$();
 					return;
 				}
-				Q(), pt();
+				Q(), ft();
 			}
 		}
-		function vt(e) {
-			e.disabled || T.readonly || j.value || (U.set(e.value, e), T.multiple || (K.value = G.value), B.value = !1, T.multiple ? (N.value = te(V.value, e.value), L.value = "", P.value?.focus()) : (N.value = e.value, J(), lt.reset(), L.value = e.label, I.value = !1, R.value = -1));
+		function _t(e) {
+			e.disabled || T.readonly || j.value || (H.set(e.value, e), T.multiple || (G.value = W.value), z.value = !1, T.multiple ? (N.value = te(B.value, e.value), L.value = "", P.value?.focus()) : (N.value = e.value, q(), ct.reset(), L.value = e.label, I.value = !1, R.value = -1));
 		}
-		function yt(e) {
-			!T.multiple || T.readonly || (N.value = V.value.filter((t) => t !== e), P.value?.focus());
+		function vt(e) {
+			!T.multiple || T.readonly || (N.value = B.value.filter((t) => t !== e), P.value?.focus());
 		}
-		function bt() {
-			N.value = T.multiple ? [] : "", B.value = !1, R.value = I.value ? q.value.findIndex((e) => !e.disabled) : -1, O("clear");
+		function yt() {
+			N.value = T.multiple ? [] : "", z.value = !1, R.value = I.value ? K.value.findIndex((e) => !e.disabled) : -1, O("clear");
 		}
-		function xt(e) {
-			let t = q.value;
+		function bt(e) {
+			let t = K.value;
 			if (t.length === 0) return;
 			let n = R.value < 0 && e < 0 ? 0 : R.value;
 			for (let r = 0; r < t.length && (n = (n + e + t.length) % t.length, t[n]?.disabled); r++);
 			R.value = n;
 		}
-		function St(e) {
+		function xt(e) {
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), I.value ? xt(1) : Q();
+					e.preventDefault(), I.value ? bt(1) : Q();
 					break;
 				case "ArrowUp":
-					e.preventDefault(), I.value ? xt(-1) : Q();
+					e.preventDefault(), I.value ? bt(-1) : Q();
 					break;
 				case "Enter":
 					if (I.value && R.value >= 0) {
 						e.preventDefault();
-						let t = q.value[R.value];
-						t && vt(t);
+						let t = K.value[R.value];
+						t && _t(t);
 					}
 					break;
 				case "Escape":
@@ -311,8 +309,8 @@ var De = [
 					break;
 				case "Backspace":
 					if (T.multiple && !L.value) {
-						let e = V.value.at(-1);
-						e !== void 0 && yt(e);
+						let e = B.value.at(-1);
+						e !== void 0 && vt(e);
 					}
 					break;
 			}
@@ -323,32 +321,32 @@ var De = [
 			el: c(() => P.value?.el ?? null)
 		}), (e, i) => (g(), d("div", {
 			ref_key: "rootEl",
-			ref: Ve,
-			class: xe(["v-combobox", x(Ie)]),
-			style: Se([{ "--chip-height": M.value.height }, x(Le)]),
+			ref: Be,
+			class: be(["v-combobox", x(Fe)]),
+			style: xe([{ "--chip-height": M.value.height }, x(Ie)]),
 			"data-size": x(k),
 			"data-compact": x(A) ? "" : void 0,
 			"data-multiple": o.multiple ? "" : void 0,
 			"data-collapsed": Qe.value ? "" : void 0,
 			"data-open": I.value ? "" : void 0,
-			onFocusout: i[3] ||= (...e) => x(ut) && x(ut)(...e)
+			onFocusout: i[3] ||= (...e) => x(lt) && x(lt)(...e)
 		}, [
 			f("div", {
 				class: "v-combobox-control",
-				onMousedown: gt,
-				onClick: _t
+				onMousedown: ht,
+				onClick: gt
 			}, [m(ae, h({
 				ref_key: "inputRef",
 				ref: P,
 				modelValue: L.value,
 				"onUpdate:modelValue": i[0] ||= (e) => L.value = e,
-				class: ["v-input-end-pinned", { "v-input-chips": o.multiple && !X.value }],
+				class: ["v-input-end-pinned", { "v-input-chips": o.multiple && !Y.value }],
 				role: "combobox",
 				"aria-haspopup": "listbox",
 				"aria-autocomplete": "list",
 				"aria-expanded": I.value,
 				"aria-controls": x(F)
-			}, Be.value, {
+			}, ze.value, {
 				label: o.label,
 				hint: o.hint,
 				size: x(k),
@@ -359,30 +357,30 @@ var De = [
 				"icon-start": o.iconStart,
 				"icon-start-label": o.iconStartLabel,
 				clearable: o.clearable,
-				"clear-visible": nt.value,
-				"clear-label": Fe.value,
-				placeholder: V.value.length === 0 ? o.placeholder : void 0,
-				"aria-activedescendant": I.value && R.value >= 0 ? it(R.value) : void 0,
-				onInput: ft,
-				onKeydown: St,
-				onFocus: mt,
-				onBlur: i[1] ||= (e) => z.value = !1,
-				onClear: bt
+				"clear-visible": tt.value,
+				"clear-label": Pe.value,
+				placeholder: B.value.length === 0 ? o.placeholder : void 0,
+				"aria-activedescendant": I.value && R.value >= 0 ? rt(R.value) : void 0,
+				onInput: dt,
+				onKeydown: xt,
+				onFocus: pt,
+				onBlur: i[1] ||= (e) => Ve.value = !1,
+				onClear: yt
 			}), ge({ _: 2 }, [
 				o.multiple || e.$slots.start ? {
 					name: "start",
 					fn: C(() => [
-						tt.value ? (g(), d("span", Oe, b(tt.value), 1)) : u("", !0),
-						X.value && Z.value > 0 ? (g(), d("span", ke, [y(e.$slots, "overflow", {
+						et.value ? (g(), d("span", De, b(et.value), 1)) : u("", !0),
+						Y.value && Z.value > 0 ? (g(), d("span", Oe, [y(e.$slots, "overflow", {
 							count: Z.value,
 							size: M.value.size,
 							compact: M.value.compact
-						}, () => [p(b(et.value), 1)])])) : u("", !0),
-						(g(!0), d(s, null, v(o.multiple && !X.value ? $e.value : [], (t) => y(e.$slots, "chip", {
+						}, () => [p(b($e.value), 1)])])) : u("", !0),
+						(g(!0), d(s, null, v(o.multiple && !Y.value ? X.value : [], (t) => y(e.$slots, "chip", {
 							value: t,
 							option: We(t),
-							label: W(t),
-							remove: () => yt(t),
+							label: U(t),
+							remove: () => vt(t),
 							size: M.value.size,
 							compact: M.value.compact
 						}, () => [m(se, {
@@ -390,11 +388,11 @@ var De = [
 							size: M.value.size,
 							compact: M.value.compact,
 							dismissible: !o.readonly && !x(j),
-							"dismiss-label": x(E).common.remove(W(t)),
+							"dismiss-label": x(E).common.remove(U(t)),
 							disabled: x(j),
-							onDismiss: (e) => yt(t)
+							onDismiss: (e) => vt(t)
 						}, {
-							default: C(() => [p(b(W(t)), 1)]),
+							default: C(() => [p(b(U(t)), 1)]),
 							_: 2
 						}, 1032, [
 							"size",
@@ -404,7 +402,7 @@ var De = [
 							"disabled",
 							"onDismiss"
 						])], void 0, t)), 128)),
-						o.multiple && !X.value && Z.value > 0 ? y(e.$slots, "overflow", {
+						o.multiple && !Y.value && Z.value > 0 ? y(e.$slots, "overflow", {
 							count: Z.value,
 							size: M.value.size,
 							compact: M.value.compact
@@ -415,7 +413,7 @@ var De = [
 							compact: M.value.compact,
 							disabled: x(j)
 						}, {
-							default: C(() => [p(b(et.value), 1)]),
+							default: C(() => [p(b($e.value), 1)]),
 							_: 1
 						}, 8, [
 							"size",
@@ -476,16 +474,16 @@ var De = [
 				"data-size": x(k),
 				"data-compact": x(A) ? "" : void 0,
 				"aria-multiselectable": o.multiple ? "true" : void 0,
-				onMousedown: dt
+				onMousedown: ut
 			}, {
 				default: C(() => [
-					(g(!0), d(s, null, v(ot.value, (t) => (g(), d(s, { key: t.key }, [t.kind === "separator" ? (g(), l(ue, { key: 0 })) : t.kind === "group" ? (g(), l(le, {
+					(g(!0), d(s, null, v(at.value, (t) => (g(), d(s, { key: t.key }, [t.kind === "separator" ? (g(), l(ue, { key: 0 })) : t.kind === "group" ? (g(), l(le, {
 						key: 1,
 						label: t.label
 					}, {
 						default: C(() => [(g(!0), d(s, null, v(t.options, (t) => (g(), l(ce, h({ key: t.key }, { ref_for: !0 }, t.row, {
-							onSelect: (e) => vt(t.option),
-							onPointermove: (e) => st(t)
+							onSelect: (e) => _t(t.option),
+							onPointermove: (e) => ot(t)
 						}), {
 							default: C(() => [y(e.$slots, "option", h({ ref_for: !0 }, t.slot), () => [p(b(t.option.label), 1)])]),
 							_: 2
@@ -495,17 +493,17 @@ var De = [
 						key: 2,
 						ref_for: !0
 					}, t.row, {
-						onSelect: (e) => vt(t.option),
-						onPointermove: (e) => st(t)
+						onSelect: (e) => _t(t.option),
+						onPointermove: (e) => ot(t)
 					}), {
 						default: C(() => [y(e.$slots, "option", h({ ref_for: !0 }, t.slot), () => [p(b(t.option.label), 1)])]),
 						_: 2
 					}, 1040, ["onSelect", "onPointermove"]))], 64))), 128)),
-					o.loading && q.value.length === 0 ? (g(), d("div", Ae, [y(e.$slots, "loading", {}, () => [m(a, { label: D.value }, null, 8, ["label"]), f("span", null, b(D.value), 1)])])) : q.value.length === 0 ? (g(), d("div", je, [y(e.$slots, "empty", { query: G.value }, () => [p(b(Pe.value), 1)])])) : u("", !0),
+					o.loading && K.value.length === 0 ? (g(), d("div", ke, [y(e.$slots, "loading", {}, () => [m(a, { label: D.value }, null, 8, ["label"]), f("span", null, b(D.value), 1)])])) : K.value.length === 0 ? (g(), d("div", Ae, [y(e.$slots, "empty", { query: W.value }, () => [p(b(Ne.value), 1)])])) : u("", !0),
 					o.hasMore ? (g(), d("div", {
 						key: 2,
 						ref_key: "sentinelEl",
-						ref: ct,
+						ref: st,
 						class: "v-combobox-more",
 						"aria-hidden": "true"
 					}, [o.loading ? (g(), l(a, {
@@ -522,8 +520,8 @@ var De = [
 				"data-compact",
 				"aria-multiselectable"
 			]),
-			f("span", Me, b(qe.value), 1)
-		], 46, De));
+			f("span", je, b(qe.value), 1)
+		], 46, Ee));
 	}
 });
 //#endregion