vectis-ui 0.13.0 → 0.14.0

package/dist/components/VSelect/VSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,23 +1,23 @@
 import { useMessages as e } from "../../i18n/state.js";
 import { useControlShape as t } from "../../composables/useControlShape.js";
 import n from "../VSpinner/VSpinner.js";
-import { useRootAttrs as r } from "../../composables/useRootAttrs.js";
-import { expand_more as i } from "../VIcon/icons/expand_more.js";
-import { useTimer as a } from "../../composables/useTimer.js";
-import { createNormalizedCache as ee, normalizeText as te } from "../../utils/text.js";
-import { toggleValue as ne } from "../../utils/array.js";
-import { iconStartListener as re } from "../../composables/useIconClickHandlers.js";
-import { canClear as ie } from "../../composables/useClearable.js";
-import { inputGroupKey as ae } from "../VInput/context.js";
-import oe from "../VInput/VInput.js";
-import { partitionAttrs as se } from "../../utils/attrs.js";
-import ce from "../VListbox/VListboxChevron.js";
-import le from "../VListbox/VListboxPanel.js";
-import ue from "../VListbox/VListboxValues.js";
-import { chipScaleFor as de } from "../../utils/chip.js";
-import { useFocusoutDismiss as fe } from "../../composables/useFocusoutDismiss.js";
-import { selectionOf as pe, useListbox as me } from "../../composables/useListbox.js";
-import { Fragment as he, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createVNode as ge, defineComponent as f, guardReactiveProps as p, inject as _e, mergeModels as m, mergeProps as h, normalizeClass as ve, normalizeProps as g, normalizeStyle as ye, onBeforeUnmount as be, onMounted as xe, openBlock as _, ref as v, renderList as Se, renderSlot as y, toDisplayString as b, unref as x, useId as Ce, useModel as we, watch as S, withCtx as C } from "vue";
+import { useRootAttrs as ee } from "../../composables/useRootAttrs.js";
+import { expand_more as r } from "../VIcon/icons/expand_more.js";
+import { createNormalizedCache as te } from "../../utils/text.js";
+import { useTypeahead as ne } from "../../composables/useTypeahead.js";
+import { toggleValue as re } from "../../utils/array.js";
+import { iconStartListener as ie } from "../../composables/useIconClickHandlers.js";
+import { canClear as ae } from "../../composables/useClearable.js";
+import { inputGroupKey as oe } from "../VInput/context.js";
+import se from "../VInput/VInput.js";
+import { partitionAttrs as ce } from "../../utils/attrs.js";
+import le from "../VListbox/VListboxChevron.js";
+import ue from "../VListbox/VListboxPanel.js";
+import de from "../VListbox/VListboxValues.js";
+import { chipScaleFor as fe } from "../../utils/chip.js";
+import { useFocusoutDismiss as pe } from "../../composables/useFocusoutDismiss.js";
+import { selectionOf as me, useListbox as he } from "../../composables/useListbox.js";
+import { Fragment as ge, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createVNode as u, defineComponent as d, guardReactiveProps as f, inject as _e, mergeModels as p, mergeProps as m, normalizeClass as ve, normalizeProps as h, normalizeStyle as ye, onBeforeUnmount as be, onMounted as xe, openBlock as g, ref as _, renderList as Se, renderSlot as v, toDisplayString as y, unref as b, useId as Ce, useModel as we, watch as x, withCtx as S } from "vue";
 //#region src/components/VSelect/VSelect.vue?vue&type=script&setup=true&lang.ts
 var Te = [
 	"data-size",
@@ -39,10 +39,10 @@ var Te = [
 ], ke = {
 	key: 0,
 	value: ""
-}, Ae = ["value", "disabled"], w = "a, button, input, select, textarea, [tabindex]", T = /*@__PURE__*/ f({
+}, Ae = ["value", "disabled"], C = "a, button, input, select, textarea, [tabindex]", w = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "VSelect",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ p({
 		options: {},
 		multiple: {
 			type: Boolean,
@@ -86,7 +86,7 @@ var Te = [
 		},
 		iconStart: { default: void 0 },
 		iconStartLabel: { default: void 0 },
-		expandIcon: { default: () => i },
+		expandIcon: { default: () => r },
 		loading: {
 			type: Boolean,
 			default: !1
@@ -102,253 +102,247 @@ var Te = [
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ m(["clear", "click:icon-start"], ["update:modelValue"]),
-	setup(i, { expose: f, emit: m }) {
-		let T = i, je = e(), Me = o(() => T.clearLabel ?? je.value.select.clear), Ne = m, { size: E, compact: D, disabled: O } = t(T, _e(ae, null)), Pe = o(() => de(E.value, D.value)), k = we(i, "modelValue"), { rootClass: Fe, rootStyle: Ie, forwardedAttrs: Le } = r(), Re = [
+	emits: /*@__PURE__*/ p(["clear", "click:icon-start"], ["update:modelValue"]),
+	setup(r, { expose: d, emit: p }) {
+		let w = r, je = e(), Me = i(() => w.clearLabel ?? je.value.select.clear), T = p, { size: E, compact: D, disabled: O } = t(w, _e(oe, null)), k = i(() => fe(E.value, D.value)), A = we(r, "modelValue"), { rootClass: Ne, rootStyle: Pe, forwardedAttrs: Fe } = ee(), Ie = [
 			"name",
 			"form",
 			"autocomplete"
-		], ze = o(() => se(Le.value, Re)), Be = o(() => ze.value.picked), Ve = re((e) => Ne("click:icon-start", e)), He = o(() => ({
-			...ze.value.rest,
-			...Ve
-		})), Ue = v(null), A = v(null), j = v(null), We = v(null), M = Ce(), N = v(!1), P = v(!1), F = o(() => pe(k.value, T.multiple)), { allOptions: I, visible: L, optionOf: Ge, labelOf: R, remember: Ke, activeIndex: z, optionId: qe, highlightFirst: B, highlightLast: V, highlightSelected: Je, move: H, page: U, hover: Ye, blocks: Xe, measureRow: Ze } = me({
-			items: () => T.options,
-			selected: () => F.value,
-			open: () => N.value,
-			id: M,
-			panelEl: () => We.value?.el ?? null,
+		], j = i(() => ce(Fe.value, Ie)), Le = i(() => j.value.picked), Re = ie((e) => T("click:icon-start", e)), ze = i(() => ({
+			...j.value.rest,
+			...Re
+		})), M = _(null), N = _(null), P = _(null), F = _(null), I = Ce(), L = _(!1), R = _(!1), z = i(() => me(A.value, w.multiple)), { allOptions: B, visible: V, optionOf: Be, labelOf: H, remember: Ve, activeIndex: U, optionId: He, highlightFirst: Ue, highlightLast: We, highlightSelected: Ge, move: Ke, page: qe, hover: Je, blocks: Ye, measureRow: Xe } = he({
+			items: () => w.options,
+			selected: () => z.value,
+			open: () => L.value,
+			id: I,
+			panelEl: () => F.value?.el ?? null,
 			virtual: () => !1,
 			size: () => E.value,
 			compact: () => D.value
-		}), W = o(() => F.value.map(R).join(", ")), Qe = o(() => T.multiple && T.display === "text"), $e = o(() => T.multiple && !P.value && !N.value), et = o(() => ie(T, O.value, F.value.length > 0)), G = v(!1);
-		function K() {
-			O.value || T.readonly || N.value || (N.value = !0, Je());
+		}), Ze = i(() => z.value.map(H).join(", ")), Qe = i(() => w.multiple && w.display === "text"), $e = i(() => w.multiple && !R.value && !L.value), et = i(() => ae(w, O.value, z.value.length > 0)), W = _(!1);
+		function G() {
+			O.value || w.readonly || L.value || (L.value = !0, Ge());
 		}
-		function q() {
-			N.value && (N.value = !1, z.value = -1);
+		function K() {
+			L.value && (L.value = !1, U.value = -1);
 		}
 		function tt() {
-			N.value ? q() : K();
+			L.value ? K() : G();
 		}
-		let nt = fe(Ue, () => {
-			P.value = !1, q();
+		let nt = pe(M, () => {
+			R.value = !1, K();
 		});
 		function rt(e) {
-			e.disabled || T.readonly || O.value || (Ke(e), T.multiple ? k.value = ne(F.value, e.value) : (k.value !== e.value && (k.value = e.value), q()));
+			e.disabled || w.readonly || O.value || (Ve(e), w.multiple ? A.value = re(z.value, e.value) : (A.value !== e.value && (A.value = e.value), K()));
 		}
-		function J() {
-			let e = L.value[z.value];
+		function q() {
+			let e = V.value[U.value];
 			e && rt(e);
 		}
 		function it(e) {
-			!T.multiple || T.readonly || O.value || (k.value = F.value.filter((t) => t !== e), A.value?.focus());
+			!w.multiple || w.readonly || O.value || (A.value = z.value.filter((t) => t !== e), N.value?.focus());
 		}
 		function at() {
-			k.value = T.multiple ? [] : "", A.value?.focus(), Ne("clear");
+			A.value = w.multiple ? [] : "", N.value?.focus(), T("clear");
 		}
-		let ot = ee(), Y = "", st = a();
-		function X(e) {
-			Y += te(e), st.start(() => Y = "", 500);
-			let t = L.value;
-			if (t.length === 0) return;
-			let n = [...Y].every((e) => e === Y[0]), r = n ? Y[0] : Y, i = z.value + (Y.length === 1 || n ? 1 : 0);
-			for (let e = 0; e < t.length; e++) {
-				let n = (Math.max(i, 0) + e) % t.length, a = t[n];
-				if (!a.disabled && ot(a, a.label).startsWith(r)) {
-					z.value = n;
-					return;
-				}
-			}
+		let ot = te(), { find: st, typing: ct } = ne();
+		function J(e) {
+			let t = V.value, n = st(e, t.length, U.value, (e) => {
+				let n = t[e];
+				return n.disabled ? void 0 : ot(n, n.label);
+			});
+			n >= 0 && (U.value = n);
 		}
-		let ct = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
+		let Y = (e) => e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey;
 		function lt(e) {
-			if (!N.value) {
+			if (!L.value) {
 				switch (e.key) {
 					case "ArrowDown":
 					case "ArrowUp":
 					case "Enter":
 					case " ":
-						e.preventDefault(), K();
+						e.preventDefault(), G();
 						return;
 					case "Home":
-						e.preventDefault(), K(), N.value && B();
+						e.preventDefault(), G(), L.value && Ue();
 						return;
 					case "End":
-						e.preventDefault(), K(), N.value && V();
+						e.preventDefault(), G(), L.value && We();
 						return;
 				}
-				ct(e) && (K(), N.value && X(e.key));
+				Y(e) && (G(), L.value && J(e.key));
 				return;
 			}
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), H(1);
+					e.preventDefault(), Ke(1);
 					break;
 				case "ArrowUp":
-					e.preventDefault(), e.altKey ? (J(), q()) : H(-1);
+					e.preventDefault(), e.altKey ? (q(), K()) : Ke(-1);
 					break;
 				case "Home":
-					e.preventDefault(), B();
+					e.preventDefault(), Ue();
 					break;
 				case "End":
-					e.preventDefault(), V();
+					e.preventDefault(), We();
 					break;
 				case "PageDown":
-					e.preventDefault(), U(10);
+					e.preventDefault(), qe(10);
 					break;
 				case "PageUp":
-					e.preventDefault(), U(-10);
+					e.preventDefault(), qe(-10);
 					break;
 				case " ":
-					e.preventDefault(), Y ? X(" ") : J();
+					e.preventDefault(), ct() ? J(" ") : q();
 					break;
 				case "Enter":
-					e.preventDefault(), J();
+					e.preventDefault(), q();
 					break;
 				case "Escape":
-					e.preventDefault(), q();
+					e.preventDefault(), K();
 					break;
 				case "Tab":
-					T.multiple || J(), q();
+					w.multiple || q(), K();
 					break;
-				default: ct(e) && X(e.key);
+				default: Y(e) && J(e.key);
 			}
 		}
 		function ut(e) {
 			let t = e.target;
-			t.closest(".v-input-field") && !t.closest(w) && e.preventDefault();
+			t.closest(".v-input-field") && !t.closest(C) && e.preventDefault();
 		}
 		function dt(e) {
 			let t = e.target;
-			O.value || !t.closest(".v-input-field") || t.closest(w) || (A.value?.focus(), tt());
+			O.value || !t.closest(".v-input-field") || t.closest(C) || (N.value?.focus(), tt());
 		}
-		function Z() {
-			let e = j.value;
+		function X() {
+			let e = P.value;
 			if (e) {
 				for (let t of e.options) t.selected = t.value !== "" && ft.value.has(t.value);
-				!T.multiple && F.value.length === 0 && (e.value = "");
+				!w.multiple && z.value.length === 0 && (e.value = "");
 			}
 		}
-		let ft = o(() => new Set(F.value.map(String)));
-		S([F, I], Z, { flush: "post" }), S(F, () => {
-			G.value &&= !j.value?.checkValidity();
+		let ft = i(() => new Set(z.value.map(String)));
+		x([z, B], X, { flush: "post" }), x(z, () => {
+			W.value &&= !P.value?.checkValidity();
 		}, { flush: "post" });
 		function pt() {
-			let e = j.value;
+			let e = P.value;
 			if (!e) return;
-			let t = [...e.selectedOptions].map((e) => I.value.find((t) => String(t.value) === e.value)).filter((e) => e !== void 0).map((e) => e.value);
-			k.value = T.multiple ? t : t[0] ?? "";
+			let t = [...e.selectedOptions].map((e) => B.value.find((t) => String(t.value) === e.value)).filter((e) => e !== void 0).map((e) => e.value);
+			A.value = w.multiple ? t : t[0] ?? "";
 		}
-		let Q = "", $ = null;
-		function mt() {
-			k.value = Array.isArray(Q) ? [...Q] : Q, G.value = !1, setTimeout(Z);
+		let Z = "", Q = null;
+		function $() {
+			A.value = Array.isArray(Z) ? [...Z] : Z, W.value = !1, setTimeout(X);
 		}
 		return xe(() => {
-			Q = Array.isArray(k.value) ? [...k.value] : k.value, Z(), $ = j.value?.form ?? null, $?.addEventListener("reset", mt);
-		}), be(() => $?.removeEventListener("reset", mt)), f({
-			focus: (e) => A.value?.focus(e),
-			el: A
-		}), (e, t) => (_(), l("div", {
+			Z = Array.isArray(A.value) ? [...A.value] : A.value, X(), Q = P.value?.form ?? null, Q?.addEventListener("reset", $);
+		}), be(() => Q?.removeEventListener("reset", $)), d({
+			focus: (e) => N.value?.focus(e),
+			el: N
+		}), (e, t) => (g(), s("div", {
 			ref_key: "rootEl",
-			ref: Ue,
-			class: ve(["v-select", x(Fe)]),
-			style: ye([{ "--chip-height": Pe.value.height }, x(Ie)]),
-			"data-size": x(E),
-			"data-multiple": i.multiple ? "" : void 0,
-			"data-open": N.value ? "" : void 0,
-			onFocusin: t[3] ||= (e) => P.value = !0,
-			onFocusout: t[4] ||= (...e) => x(nt) && x(nt)(...e)
-		}, [u("div", {
+			ref: M,
+			class: ve(["v-select", b(Ne)]),
+			style: ye([{ "--chip-height": k.value.height }, b(Pe)]),
+			"data-size": b(E),
+			"data-multiple": r.multiple ? "" : void 0,
+			"data-open": L.value ? "" : void 0,
+			onFocusin: t[3] ||= (e) => R.value = !0,
+			onFocusout: t[4] ||= (...e) => b(nt) && b(nt)(...e)
+		}, [c("div", {
 			class: "v-select-control",
 			onMousedown: ut,
 			onClick: dt
-		}, [ge(oe, h({ class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !Qe.value }] }, He.value, {
-			label: i.label,
-			hint: i.hint,
-			error: i.error,
-			required: i.required,
-			"hide-label": i.hideLabel,
-			"label-position": i.labelPosition,
-			size: x(E),
-			compact: x(D),
-			invalid: i.invalid || G.value,
-			disabled: x(O),
-			readonly: i.readonly,
-			"icon-start": i.iconStart,
-			"icon-start-label": i.iconStartLabel,
-			clearable: i.clearable,
+		}, [u(se, m({ class: ["v-input-end-pinned", { "v-input-chips": r.multiple && !Qe.value }] }, ze.value, {
+			label: r.label,
+			hint: r.hint,
+			error: r.error,
+			required: r.required,
+			"hide-label": r.hideLabel,
+			"label-position": r.labelPosition,
+			size: b(E),
+			compact: b(D),
+			invalid: r.invalid || W.value,
+			disabled: b(O),
+			readonly: r.readonly,
+			"icon-start": r.iconStart,
+			"icon-start-label": r.iconStartLabel,
+			clearable: r.clearable,
 			"clear-visible": et.value,
 			"clear-label": Me.value,
 			onClear: at
-		}), d({
-			control: C(({ controlProps: e }) => [u("button", h({
+		}), l({
+			control: S(({ controlProps: e }) => [c("button", m({
 				ref_key: "triggerEl",
-				ref: A,
+				ref: N,
 				type: "button",
 				role: "combobox",
-				"aria-expanded": N.value,
-				"aria-controls": x(M),
-				"aria-activedescendant": N.value && x(z) >= 0 ? x(qe)(x(z)) : void 0,
-				"aria-required": i.required || void 0,
-				"aria-readonly": i.readonly || void 0
+				"aria-expanded": L.value,
+				"aria-controls": b(I),
+				"aria-activedescendant": L.value && b(U) >= 0 ? b(He)(b(U)) : void 0,
+				"aria-required": r.required || void 0,
+				"aria-readonly": r.readonly || void 0
 			}, e, {
 				class: "v-select-trigger",
 				onClick: tt,
 				onKeydown: lt
-			}), [W.value ? (_(), l("span", {
+			}), [Ze.value ? (g(), s("span", {
 				key: 0,
-				class: ve(["v-select-value", { "v-visually-hidden": i.multiple }])
-			}, b(W.value), 3)) : i.placeholder ? (_(), l("span", De, b(i.placeholder), 1)) : c("", !0)], 16, Ee), u("select", h({
+				class: ve(["v-select-value", { "v-visually-hidden": r.multiple }])
+			}, y(Ze.value), 3)) : r.placeholder ? (g(), s("span", De, y(r.placeholder), 1)) : o("", !0)], 16, Ee), c("select", m({
 				ref_key: "nativeEl",
-				ref: j
-			}, Be.value, {
+				ref: P
+			}, Le.value, {
 				class: "v-select-native v-hidden-input",
 				tabindex: "-1",
 				"aria-hidden": "true",
-				multiple: i.multiple || void 0,
-				required: i.required || void 0,
-				disabled: x(O) || void 0,
+				multiple: r.multiple || void 0,
+				required: r.required || void 0,
+				disabled: b(O) || void 0,
 				onChange: pt,
-				onFocus: t[0] ||= (e) => A.value?.focus(),
-				onInvalid: t[1] ||= (e) => G.value = !0
-			}), [i.multiple ? c("", !0) : (_(), l("option", ke)), (_(!0), l(he, null, Se(x(I), (e, t) => (_(), l("option", {
+				onFocus: t[0] ||= (e) => N.value?.focus(),
+				onInvalid: t[1] ||= (e) => W.value = !0
+			}), [r.multiple ? o("", !0) : (g(), s("option", ke)), (g(!0), s(ge, null, Se(b(B), (e, t) => (g(), s("option", {
 				key: t,
 				value: String(e.value),
 				disabled: e.disabled
-			}, b(e.label), 9, Ae))), 128))], 16, Oe)]),
-			end: C(() => [i.loading ? (_(), s(n, {
+			}, y(e.label), 9, Ae))), 128))], 16, Oe)]),
+			end: S(() => [r.loading ? (g(), a(n, {
 				key: 0,
 				class: "v-select-spinner v-input-icon-end",
-				label: i.loadingText
-			}, null, 8, ["label"])) : (_(), s(ce, {
+				label: r.loadingText
+			}, null, 8, ["label"])) : (g(), a(le, {
 				key: 1,
-				icon: i.expandIcon,
-				open: N.value
+				icon: r.expandIcon,
+				open: L.value
 			}, null, 8, ["icon", "open"]))]),
 			_: 2
-		}, [i.multiple || e.$slots.start ? {
+		}, [r.multiple || e.$slots.start ? {
 			name: "start",
-			fn: C(() => [i.multiple ? (_(), s(ue, {
+			fn: S(() => [r.multiple ? (g(), a(de, {
 				key: 0,
-				values: F.value,
-				display: i.display,
-				max: i.max,
+				values: z.value,
+				display: r.display,
+				max: r.max,
 				collapsed: $e.value,
-				"overflow-text": i.overflowText,
-				scale: Pe.value,
-				removable: !i.readonly,
-				disabled: x(O),
+				"overflow-text": r.overflowText,
+				scale: k.value,
+				removable: !r.readonly,
+				disabled: b(O),
 				"hide-text": "",
-				"label-of": x(R),
-				"option-of": x(Ge),
+				"label-of": b(H),
+				"option-of": b(Be),
 				onRemove: it
-			}, d({ _: 2 }, [e.$slots.chip ? {
+			}, l({ _: 2 }, [e.$slots.chip ? {
 				name: "chip",
-				fn: C((t) => [y(e.$slots, "chip", g(p(t)))]),
+				fn: S((t) => [v(e.$slots, "chip", h(f(t)))]),
 				key: "0"
 			} : void 0, e.$slots.overflow ? {
 				name: "overflow",
-				fn: C((t) => [y(e.$slots, "overflow", g(p(t)))]),
+				fn: S((t) => [v(e.$slots, "overflow", h(f(t)))]),
 				key: "1"
 			} : void 0]), 1032, [
 				"values",
@@ -361,11 +355,11 @@ var Te = [
 				"disabled",
 				"label-of",
 				"option-of"
-			])) : c("", !0), y(e.$slots, "start")]),
+			])) : o("", !0), v(e.$slots, "start")]),
 			key: "0"
 		} : void 0, e.$slots["value-end"] ? {
 			name: "value-end",
-			fn: C(() => [y(e.$slots, "value-end")]),
+			fn: S(() => [v(e.$slots, "value-end")]),
 			key: "1"
 		} : void 0]), 1040, [
 			"class",
@@ -385,25 +379,25 @@ var Te = [
 			"clearable",
 			"clear-visible",
 			"clear-label"
-		])], 32), ge(le, {
-			id: x(M),
+		])], 32), u(ue, {
+			id: b(I),
 			ref_key: "panelRef",
-			ref: We,
-			open: N.value,
-			"onUpdate:open": t[2] ||= (e) => N.value = e,
+			ref: F,
+			open: L.value,
+			"onUpdate:open": t[2] ||= (e) => L.value = e,
 			anchor: "--select-anchor",
-			placement: i.placement,
+			placement: r.placement,
 			class: "v-select-panel",
-			size: x(E),
-			compact: x(D),
-			multiple: i.multiple,
-			blocks: x(Xe),
-			measure: x(Ze),
+			size: b(E),
+			compact: b(D),
+			multiple: r.multiple,
+			blocks: b(Ye),
+			measure: b(Xe),
 			onSelect: rt,
-			onHighlight: x(Ye)
-		}, d({ _: 2 }, [e.$slots.option ? {
+			onHighlight: b(Je)
+		}, l({ _: 2 }, [e.$slots.option ? {
 			name: "option",
-			fn: C((t) => [y(e.$slots, "option", g(p(t)))]),
+			fn: S((t) => [v(e.$slots, "option", h(f(t)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"id",
@@ -419,6 +413,6 @@ var Te = [
 	}
 });
 //#endregion
-export { T as default };
+export { w as default };
 
 //# sourceMappingURL=VSelect.vue_vue_type_script_setup_true_lang.js.map