vectis-ui 0.16.0 → 0.17.0

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

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