vectis-ui 0.15.0 → 0.16.0

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

@@ -20,26 +20,25 @@ import { useFocusoutDismiss as me } from "../../composables/useFocusoutDismiss.j
 import { useInfiniteScroll as he } from "../../composables/useInfiniteScroll.js";
 import { selectionOf as ge, useListbox as _e } from "../../composables/useListbox.js";
 import { useDebouncedSearch as ve } from "../../composables/useDebouncedSearch.js";
-import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createVNode as d, defineComponent as f, guardReactiveProps as p, inject as ye, mergeModels as m, mergeProps as be, normalizeClass as xe, normalizeProps as h, normalizeStyle as Se, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, unref as b, useId as Ce, useModel as we, watch as x, withCtx as S } from "vue";
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createVNode as d, defineComponent as f, guardReactiveProps as p, inject as ye, mergeModels as m, mergeProps as be, normalizeClass as xe, normalizeProps as h, normalizeStyle as Se, openBlock as g, ref as _, renderSlot as v, toDisplayString as Ce, unref as y, useId as we, useModel as Te, watch as b, withCtx as x } from "vue";
 //#region src/components/VCombobox/VCombobox.vue?vue&type=script&setup=true&lang.ts
-var Te = [
+var Ee = [
 	"data-size",
-	"data-compact",
 	"data-multiple",
 	"data-collapsed",
 	"data-open"
-], Ee = {
+], De = {
 	key: 0,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, De = {
+}, Oe = {
 	key: 1,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, Oe = {
+}, ke = {
 	class: "v-visually-hidden",
 	role: "status"
-}, C = /*@__PURE__*/ f({
+}, S = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "VCombobox",
 	props: /*@__PURE__*/ m({
@@ -67,10 +66,6 @@ var Te = [
 		},
 		labelPosition: { default: "top" },
 		size: { default: "md" },
-		compact: {
-			type: Boolean,
-			default: !1
-		},
 		placeholder: { default: void 0 },
 		disabled: {
 			type: Boolean,
@@ -123,170 +118,167 @@ var Te = [
 		"click:icon-start"
 	], ["update:modelValue"]),
 	setup(i, { expose: f, emit: m }) {
-		let C = i, w = e(), T = a(() => C.emptyText ?? w.value.combobox.empty), ke = a(() => C.clearLabel ?? w.value.combobox.clear), E = a(() => C.loadingText ?? w.value.common.loading), D = m, Ae = ye(ae, null), { size: O, compact: k, disabled: A } = t(C, Ae), j = a(() => pe(O.value, k.value)), M = we(i, "modelValue"), { rootClass: je, rootStyle: Me, forwardedAttrs: Ne } = r(), Pe = re((e) => D("click:icon-start", e)), Fe = a(() => ({
-			...Ne.value,
-			...Pe
-		})), N = _(null), P = _(null), F = Ce(), I = _(!1), L = _(""), R = _(!1), z = _(!1), B = a(() => ge(M.value, C.multiple)), Ie = ee(), Le = (e) => Ie(e, e.label), V = a(() => z.value ? L.value.trim() : ""), H = _(null), U = _(null), { allOptions: W, visible: G, optionOf: Re, labelOf: K, remember: ze, activeIndex: q, optionId: Be, highlightFirst: J, highlightSelected: Ve, move: Y, hover: He, blocks: Ue, measureRow: We } = _e({
-			items: () => C.options,
+		let S = i, C = e(), w = a(() => S.emptyText ?? C.value.combobox.empty), Ae = a(() => S.clearLabel ?? C.value.combobox.clear), T = a(() => S.loadingText ?? C.value.common.loading), E = m, je = ye(ae, null), { size: D, disabled: O } = t(S, je), k = a(() => pe(D.value)), A = Te(i, "modelValue"), { rootClass: Me, rootStyle: Ne, forwardedAttrs: Pe } = r(), Fe = re((e) => E("click:icon-start", e)), Ie = a(() => ({
+			...Pe.value,
+			...Fe
+		})), j = _(null), M = _(null), N = we(), P = _(!1), F = _(""), I = _(!1), L = _(!1), R = a(() => ge(A.value, S.multiple)), Le = ee(), Re = (e) => Le(e, e.label), z = a(() => L.value ? F.value.trim() : ""), B = _(null), V = _(null), { allOptions: H, visible: U, optionOf: ze, labelOf: W, remember: Be, activeIndex: G, optionId: Ve, highlightFirst: K, highlightSelected: He, move: q, hover: Ue, blocks: We, measureRow: Ge } = _e({
+			items: () => S.options,
 			filter: (e) => {
-				let t = C.filter;
+				let t = S.filter;
 				if (t === !1) return e;
-				let n = H.value ?? V.value;
+				let n = B.value ?? z.value;
 				if (!n) return e;
 				if (typeof t == "function") return e.filter((e) => t(e, n));
 				let r = te(n);
-				return e.filter((e) => Le(e).includes(r));
+				return e.filter((e) => Re(e).includes(r));
 			},
-			selected: () => B.value,
-			open: () => I.value,
-			id: F,
-			panelEl: () => U.value?.el ?? null,
-			virtual: () => C.virtual,
-			hasMore: () => C.hasMore,
-			size: () => O.value,
-			compact: () => k.value
-		}), Ge = a(() => !I.value || G.value.length > 0 ? "" : C.loading ? E.value : T.value), { request: X, cancel: Ke } = ve({
-			delay: () => C.searchDebounce,
-			active: () => I.value,
-			report: (e) => D("search", e)
+			selected: () => R.value,
+			open: () => P.value,
+			id: N,
+			panelEl: () => V.value?.el ?? null,
+			virtual: () => S.virtual,
+			hasMore: () => S.hasMore,
+			size: () => D.value
+		}), Ke = a(() => !P.value || U.value.length > 0 ? "" : S.loading ? T.value : w.value), { request: J, cancel: qe } = ve({
+			delay: () => S.searchDebounce,
+			active: () => P.value,
+			report: (e) => E("search", e)
 		});
-		x(V, (e) => {
-			I.value && (J(), Ze.restart(), X(e));
+		b(z, (e) => {
+			P.value && (K(), Xe.restart(), J(e));
 		});
-		function Z() {
-			let e = C.multiple ? void 0 : B.value[0];
-			return e === void 0 ? "" : K(e);
+		function Y() {
+			let e = S.multiple ? void 0 : R.value[0];
+			return e === void 0 ? "" : W(e);
 		}
-		L.value = Z(), x([W, B], () => {
-			C.multiple || I.value || z.value || (L.value = Z());
+		F.value = Y(), b([H, R], () => {
+			S.multiple || P.value || L.value || (F.value = Y());
 		}, { flush: "post" });
-		let qe = a(() => C.multiple && C.display === "text"), Je = a(() => C.multiple && B.value.length > 0 && (!R.value || qe.value && C.readonly)), Ye = a(() => ie(C, A.value, B.value.length > 0 || L.value.length > 0));
+		let X = a(() => S.multiple && S.display === "text"), Z = a(() => S.multiple && R.value.length > 0 && (!I.value || X.value && S.readonly)), Je = a(() => ie(S, O.value, R.value.length > 0 || F.value.length > 0));
 		function Q() {
-			A.value || C.readonly || I.value || (H.value = null, I.value = !0, Ve(), X(V.value, !0));
+			O.value || S.readonly || P.value || (B.value = null, P.value = !0, He(), J(z.value, !0));
 		}
-		let Xe = _(null), Ze = he({
-			sentinelEl: Xe,
+		let Ye = _(null), Xe = he({
+			sentinelEl: Ye,
 			root: (e) => e.closest("[role=\"listbox\"]"),
-			canLoad: () => I.value && C.hasMore && !C.loading,
-			loaded: () => W.value,
-			onLoadMore: () => D("load-more")
+			canLoad: () => P.value && S.hasMore && !S.loading,
+			loaded: () => H.value,
+			onLoadMore: () => E("load-more")
 		});
-		function $(e = Z()) {
-			I.value && (Ke(), Ze.reset(), H.value = V.value, I.value = !1, q.value = -1, z.value = !1, L.value = e);
+		function $(e = Y()) {
+			P.value && (qe(), Xe.reset(), B.value = z.value, P.value = !1, G.value = -1, L.value = !1, F.value = e);
 		}
-		x(() => C.readonly || A.value, (e) => {
+		b(() => S.readonly || O.value, (e) => {
 			e && $();
 		});
-		let Qe = me(N, () => $());
+		let Ze = me(j, () => $());
+		function Qe() {
+			L.value = !0, Q();
+		}
 		function $e() {
-			z.value = !0, Q();
+			!S.multiple && F.value && M.value?.select();
 		}
 		function et() {
-			!C.multiple && L.value && P.value?.select();
+			I.value = !0, $e();
 		}
-		function tt() {
-			R.value = !0, et();
+		let tt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
+		function nt(e) {
+			tt(e) && e.preventDefault();
 		}
-		let nt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
 		function rt(e) {
-			nt(e) && e.preventDefault();
+			O.value || (M.value?.focus(), P.value && tt(e) ? $() : (Q(), $e()));
 		}
 		function it(e) {
-			A.value || (P.value?.focus(), I.value && nt(e) ? $() : (Q(), et()));
+			e.disabled || S.readonly || O.value || (Be(e), S.multiple ? (L.value = !1, A.value = ne(R.value, e.value), F.value = "", M.value?.focus()) : (A.value = e.value, $(e.label)));
 		}
 		function at(e) {
-			e.disabled || C.readonly || A.value || (ze(e), C.multiple ? (z.value = !1, M.value = ne(B.value, e.value), L.value = "", P.value?.focus()) : (M.value = e.value, $(e.label)));
-		}
-		function ot(e) {
-			!C.multiple || C.readonly || A.value || (M.value = B.value.filter((t) => t !== e), P.value?.focus());
+			!S.multiple || S.readonly || O.value || (A.value = R.value.filter((t) => t !== e), M.value?.focus());
 		}
-		function st() {
-			M.value = C.multiple ? [] : "", z.value = !1, I.value ? J() : q.value = -1, D("clear");
+		function ot() {
+			A.value = S.multiple ? [] : "", L.value = !1, P.value ? K() : G.value = -1, E("clear");
 		}
-		function ct(e) {
+		function st(e) {
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), I.value ? Y(1) : Q();
+					e.preventDefault(), P.value ? q(1) : Q();
 					break;
 				case "ArrowUp":
-					e.preventDefault(), I.value ? Y(-1) : Q();
+					e.preventDefault(), P.value ? q(-1) : Q();
 					break;
 				case "Enter":
-					if (I.value && q.value >= 0) {
+					if (P.value && G.value >= 0) {
 						e.preventDefault();
-						let t = G.value[q.value];
-						t && at(t);
+						let t = U.value[G.value];
+						t && it(t);
 					}
 					break;
 				case "Escape":
-					I.value && (e.preventDefault(), $());
+					P.value && (e.preventDefault(), $());
 					break;
 				case "Tab":
 					$();
 					break;
-				case "Backspace": if (C.multiple && !L.value) {
-					let e = B.value.at(-1);
-					e !== void 0 && ot(e);
+				case "Backspace": if (S.multiple && !F.value) {
+					let e = R.value.at(-1);
+					e !== void 0 && at(e);
 				}
 			}
 		}
 		return f({
-			focus: (e) => P.value?.focus(e),
-			select: () => P.value?.select(),
-			el: a(() => P.value?.el ?? null)
+			focus: (e) => M.value?.focus(e),
+			select: () => M.value?.select(),
+			el: a(() => M.value?.el ?? null)
 		}), (e, t) => (g(), c("div", {
 			ref_key: "rootEl",
-			ref: N,
-			class: xe(["v-combobox", b(je)]),
-			style: Se([{ "--chip-height": j.value.height }, b(Me)]),
-			"data-size": b(O),
-			"data-compact": b(k) ? "" : void 0,
+			ref: j,
+			class: xe(["v-combobox", y(Me)]),
+			style: Se([{ "--chip-height": k.value.height }, y(Ne)]),
+			"data-size": y(D),
 			"data-multiple": i.multiple ? "" : void 0,
-			"data-collapsed": Je.value ? "" : void 0,
-			"data-open": I.value ? "" : void 0,
-			onFocusout: t[3] ||= (...e) => b(Qe) && b(Qe)(...e)
+			"data-collapsed": Z.value ? "" : void 0,
+			"data-open": P.value ? "" : void 0,
+			onFocusout: t[3] ||= (...e) => y(Ze) && y(Ze)(...e)
 		}, [
 			l("div", {
 				class: "v-combobox-control",
-				onMousedown: rt,
-				onClick: it
+				onMousedown: nt,
+				onClick: rt
 			}, [d(oe, be({
 				ref_key: "inputRef",
-				ref: P,
-				modelValue: L.value,
-				"onUpdate:modelValue": t[0] ||= (e) => L.value = e,
-				class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !qe.value }],
+				ref: M,
+				modelValue: F.value,
+				"onUpdate:modelValue": t[0] ||= (e) => F.value = e,
+				class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !X.value }],
 				role: "combobox",
 				"aria-haspopup": "listbox",
 				"aria-autocomplete": "list",
-				"aria-expanded": I.value,
-				"aria-controls": b(F)
-			}, Fe.value, {
+				"aria-expanded": P.value,
+				"aria-controls": y(N)
+			}, Ie.value, {
 				label: i.label,
 				hint: i.hint,
 				error: i.error,
 				required: i.required,
 				"hide-label": i.hideLabel,
 				"label-position": i.labelPosition,
-				size: b(O),
-				compact: b(k),
+				size: y(D),
 				invalid: i.invalid,
-				disabled: b(A),
+				disabled: y(O),
 				readonly: i.readonly,
 				"icon-start": i.iconStart,
 				"icon-start-label": i.iconStartLabel,
 				clearable: i.clearable,
-				"clear-visible": Ye.value,
-				"clear-label": ke.value,
-				placeholder: B.value.length === 0 ? i.placeholder : void 0,
-				"aria-activedescendant": I.value && b(q) >= 0 ? b(Be)(b(q)) : void 0,
-				onInput: $e,
-				onKeydown: ct,
-				onFocus: tt,
-				onBlur: t[1] ||= (e) => R.value = !1,
-				onClear: st
+				"clear-visible": Je.value,
+				"clear-label": Ae.value,
+				placeholder: R.value.length === 0 ? i.placeholder : void 0,
+				"aria-activedescendant": P.value && y(G) >= 0 ? y(Ve)(y(G)) : void 0,
+				onInput: Qe,
+				onKeydown: st,
+				onFocus: et,
+				onBlur: t[1] ||= (e) => I.value = !1,
+				onClear: ot
 			}), u({
-				end: S(() => [i.loading ? (g(), o(n, {
+				end: x(() => [i.loading ? (g(), o(n, {
 					key: 0,
 					class: "v-combobox-spinner v-input-icon-end",
 					"aria-hidden": "true"
@@ -294,31 +286,31 @@ var Te = [
 					key: 1,
 					class: "v-combobox-chevron",
 					icon: i.expandIcon,
-					open: I.value
+					open: P.value
 				}, null, 8, ["icon", "open"]))]),
 				_: 2
 			}, [i.multiple || e.$slots.start ? {
 				name: "start",
-				fn: S(() => [i.multiple ? (g(), o(fe, {
+				fn: x(() => [i.multiple ? (g(), o(fe, {
 					key: 0,
-					values: B.value,
+					values: R.value,
 					display: i.display,
 					max: i.max,
-					collapsed: Je.value,
+					collapsed: Z.value,
 					"overflow-text": i.overflowText,
-					scale: j.value,
+					scale: k.value,
 					removable: !i.readonly,
-					disabled: b(A),
-					"label-of": b(K),
-					"option-of": b(Re),
-					onRemove: ot
+					disabled: y(O),
+					"label-of": y(W),
+					"option-of": y(ze),
+					onRemove: at
 				}, u({ _: 2 }, [e.$slots.chip ? {
 					name: "chip",
-					fn: S((t) => [v(e.$slots, "chip", h(p(t)))]),
+					fn: x((t) => [v(e.$slots, "chip", h(p(t)))]),
 					key: "0"
 				} : void 0, e.$slots.overflow ? {
 					name: "overflow",
-					fn: S((t) => [v(e.$slots, "overflow", h(p(t)))]),
+					fn: x((t) => [v(e.$slots, "overflow", h(p(t)))]),
 					key: "1"
 				} : void 0]), 1032, [
 					"values",
@@ -335,7 +327,7 @@ var Te = [
 				key: "0"
 			} : void 0, e.$slots["value-end"] ? {
 				name: "value-end",
-				fn: S(() => [v(e.$slots, "value-end")]),
+				fn: x(() => [v(e.$slots, "value-end")]),
 				key: "1"
 			} : void 0]), 1040, [
 				"modelValue",
@@ -349,7 +341,6 @@ var Te = [
 				"hide-label",
 				"label-position",
 				"size",
-				"compact",
 				"invalid",
 				"disabled",
 				"readonly",
@@ -362,60 +353,58 @@ var Te = [
 				"aria-activedescendant"
 			])], 32),
 			d(de, {
-				id: b(F),
+				id: y(N),
 				ref_key: "panelRef",
-				ref: U,
-				open: I.value,
-				"onUpdate:open": t[2] ||= (e) => I.value = e,
+				ref: V,
+				open: P.value,
+				"onUpdate:open": t[2] ||= (e) => P.value = e,
 				anchor: "--combobox-anchor",
 				placement: i.placement,
 				class: "v-combobox-panel",
-				size: b(O),
-				compact: b(k),
+				size: y(D),
 				multiple: i.multiple,
 				virtual: i.virtual,
-				blocks: b(Ue),
-				measure: b(We),
-				onSelect: at,
-				onHighlight: b(He)
+				blocks: y(We),
+				measure: y(Ge),
+				onSelect: it,
+				onHighlight: y(Ue)
 			}, u({
-				default: S(() => [i.loading && b(G).length === 0 ? (g(), c("div", Ee, [v(e.$slots, "loading", {}, () => [d(n, { label: E.value }, null, 8, ["label"]), l("span", null, y(E.value), 1)])])) : b(G).length === 0 ? (g(), c("div", De, [v(e.$slots, "empty", { query: V.value }, () => [d(se, {
+				default: x(() => [i.loading && y(U).length === 0 ? (g(), c("div", De, [v(e.$slots, "loading", {}, () => [d(n, { label: T.value }, null, 8, ["label"]), l("span", null, Ce(T.value), 1)])])) : y(U).length === 0 ? (g(), c("div", Oe, [v(e.$slots, "empty", { query: z.value }, () => [d(se, {
 					size: "sm",
 					class: "v-combobox-empty",
-					icon: V.value ? b(le) : b(ce),
-					title: T.value
+					icon: z.value ? y(le) : y(ce),
+					title: w.value
 				}, null, 8, ["icon", "title"])])])) : s("", !0), i.hasMore ? (g(), c("div", {
 					key: 2,
 					ref_key: "sentinelEl",
-					ref: Xe,
+					ref: Ye,
 					class: "v-combobox-more",
 					"aria-hidden": "true"
 				}, [i.loading ? (g(), o(n, {
 					key: 0,
-					label: E.value
+					label: T.value
 				}, null, 8, ["label"])) : s("", !0)], 512)) : s("", !0)]),
 				_: 2
 			}, [e.$slots.option ? {
 				name: "option",
-				fn: S((t) => [v(e.$slots, "option", h(p(t)))]),
+				fn: x((t) => [v(e.$slots, "option", h(p(t)))]),
 				key: "0"
 			} : void 0]), 1032, [
 				"id",
 				"open",
 				"placement",
 				"size",
-				"compact",
 				"multiple",
 				"virtual",
 				"blocks",
 				"measure",
 				"onHighlight"
 			]),
-			l("span", Oe, y(Ge.value), 1)
-		], 46, Te));
+			l("span", ke, Ce(Ke.value), 1)
+		], 46, Ee));
 	}
 });
 //#endregion
-export { C as default };
+export { S as default };
 
 //# sourceMappingURL=VCombobox.vue_vue_type_script_setup_true_lang.js.map