vectis-ui 0.12.0 → 0.13.0

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

@@ -1,26 +1,26 @@
 import { useMessages as e } from "../../i18n/state.js";
-import { iconProps as t } from "../VIcon/iconProps.js";
-import n from "../VIcon/VIcon.js";
-import r from "../VPopover/VPopover.js";
-import { useControlShape as i } from "../../composables/useControlShape.js";
-import a from "../VSpinner/VSpinner.js";
-import { expand_more as o } from "../VIcon/icons/expand_more.js";
-import { useRootAttrs as ee } from "../../composables/useRootAttrs.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 { useTimer as oe } from "../../composables/useTimer.js";
-import se from "../VChip/VChip.js";
-import ce from "./VComboboxOption.js";
-import le from "./VComboboxGroup.js";
-import ue from "./VComboboxSeparator.js";
-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, 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";
+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 { 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";
 //#region src/components/VCombobox/VCombobox.vue?vue&type=script&setup=true&lang.ts
 var Ee = [
 	"data-size",
@@ -29,26 +29,20 @@ var Ee = [
 	"data-collapsed",
 	"data-open"
 ], De = {
-	key: 0,
-	class: "v-combobox-text"
-}, Oe = {
-	key: 1,
-	class: "v-combobox-overflow"
-}, ke = {
 	key: 0,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, Ae = {
+}, Oe = {
 	key: 1,
 	class: "v-combobox-state",
 	"aria-hidden": "true"
-}, je = {
+}, ke = {
 	class: "v-visually-hidden",
 	role: "status"
-}, w = /*@__PURE__*/ _e({
+}, S = /*@__PURE__*/ f({
 	inheritAttrs: !1,
 	__name: "VCombobox",
-	props: /*@__PURE__*/ ye({
+	props: /*@__PURE__*/ m({
 		options: {},
 		multiple: {
 			type: Boolean,
@@ -62,6 +56,16 @@ var Ee = [
 		},
 		label: { default: void 0 },
 		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
 		size: { default: "md" },
 		compact: {
 			type: Boolean,
@@ -82,11 +86,7 @@ var Ee = [
 		},
 		iconStart: { default: void 0 },
 		iconStartLabel: { default: void 0 },
-		expandIcon: { default: () => o },
-		hideExpandIcon: {
-			type: Boolean,
-			default: !1
-		},
+		expandIcon: { default: () => i },
 		clearable: {
 			type: Boolean,
 			default: !1
@@ -107,347 +107,255 @@ var Ee = [
 			type: Boolean,
 			default: !1
 		},
+		virtual: {
+			type: Boolean,
+			default: !1
+		},
 		placement: { default: "bottom-start" }
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ ye([
+	emits: /*@__PURE__*/ m([
 		"search",
 		"load-more",
 		"clear",
 		"click:icon-start"
 	], ["update:modelValue"]),
-	setup(o, { expose: _e, emit: ye }) {
-		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);
+	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, { size: D, compact: O, disabled: k } = t(S, ye(ae, null)), A = a(() => pe(D.value, O.value)), j = Te(i, "modelValue"), { rootClass: je, rootStyle: Me, forwardedAttrs: Ne } = r(), Pe = re((e) => E("click:icon-start", e)), Fe = a(() => ({
+			...Ne.value,
+			...Pe
+		})), M = _(null), N = _(null), P = we(), F = _(!1), I = _(""), L = _(!1), R = _(!1), z = a(() => ge(j.value, S.multiple)), Ie = ee(), Le = (e) => Ie(e, e.label), B = a(() => R.value ? I.value.trim() : ""), V = _(null), H = _(null), { allOptions: U, visible: W, optionOf: Re, labelOf: G, remember: ze, activeIndex: K, optionId: Be, highlightFirst: q, highlightSelected: Ve, move: J, hover: He, blocks: Ue, measureRow: We } = _e({
+			items: () => S.options,
+			filter: (e) => {
+				let t = S.filter;
+				if (t === !1) return e;
+				let n = V.value ?? B.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));
+			},
+			selected: () => z.value,
+			open: () => F.value,
+			id: P,
+			panelEl: () => H.value?.el ?? null,
+			virtual: () => S.virtual,
+			hasMore: () => S.hasMore,
+			size: () => D.value,
+			compact: () => O.value
+		}), Ge = a(() => !F.value || W.value.length > 0 ? "" : S.loading ? T.value : w.value), { request: Y, cancel: Ke } = ve({
+			delay: () => S.searchDebounce,
+			active: () => F.value,
+			report: (e) => E("search", e)
 		});
-		let He = c(() => {
-			let e = /* @__PURE__ */ new Map();
-			for (let t of V.value) e.has(t.value) || e.set(t.value, t);
-			return e;
-		}), Ue = c(() => new Set(B.value));
-		function We(e) {
-			return He.value.get(e) ?? H.get(e);
-		}
-		function U(e) {
-			return We(e)?.label ?? String(e);
-		}
-		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 = 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 || 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 (Me(t)) {
-					r.length > 0 && (i = `sep:${e}`);
-					continue;
-				}
-				let a;
-				if (w(t)) {
-					let r = t.options.map((t, r) => n(t, `${e}.${r}`)).filter((e) => e !== null);
-					a = r.length > 0 ? {
-						kind: "group",
-						key: `group:${e}`,
-						label: t.label,
-						options: r
-					} : null;
-				} else a = n(t, String(e));
-				a && (i !== null && (r.push({
-					kind: "separator",
-					key: i
-				}), i = null), r.push(a));
-			}
-			return r;
-		}), Ye = oe(), Xe, q = Ye.cancel;
-		function Ze(e, t = !1) {
-			q(), e !== Xe && Ye.start(() => {
-				I.value && (Xe = e, O("search", e));
-			}, t ? 0 : T.searchDebounce);
-		}
-		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));
+		b(B, (e) => {
+			F.value && (q(), Ze.restart(), Y(e));
 		});
-		function J() {
-			let e = T.multiple ? void 0 : B.value[0];
-			return e === void 0 ? "" : U(e);
-		}
-		L.value = J(), S([V, B], () => {
-			T.multiple || I.value || z.value || (L.value = J());
-		}, { flush: "post" });
-		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 it(e) {
-			let t = e.index === R.value, n = Ue.value.has(e.option.value);
-			return {
-				...e,
-				row: {
-					id: rt(e.index),
-					icon: e.option.icon,
-					active: t,
-					selected: n,
-					disabled: e.option.disabled
-				},
-				slot: {
-					option: e.option,
-					index: e.index,
-					active: t,
-					selected: n
-				}
-			};
+		function X() {
+			let e = S.multiple ? void 0 : z.value[0];
+			return e === void 0 ? "" : G(e);
 		}
-		let at = c(() => Je.value.map((e) => e.kind === "option" ? it(e) : e.kind === "group" ? {
-			...e,
-			options: e.options.map(it)
-		} : e));
-		function ot(e) {
-			e.option.disabled || (R.value = e.index);
-		}
-		S(R, (e) => {
-			e < 0 || document.getElementById(rt(e))?.scrollIntoView?.({ block: "nearest" });
+		I.value = X(), b([U, z], () => {
+			S.multiple || F.value || R.value || (I.value = X());
 		}, { flush: "post" });
-		function Q() {
-			if (j.value || T.readonly || I.value) return;
-			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 qe = a(() => S.multiple && S.display === "text"), Je = a(() => S.multiple && z.value.length > 0 && (!L.value || qe.value && S.readonly)), Ye = a(() => ie(S, k.value, z.value.length > 0 || I.value.length > 0));
+		function Z() {
+			k.value || S.readonly || F.value || (V.value = null, F.value = !0, Ve(), Y(B.value, !0));
 		}
-		let st = _(null), ct = de({
-			sentinelEl: st,
-			canLoad: () => I.value && T.hasMore && !T.loading,
-			loaded: () => V.value,
-			onLoadMore: () => O("load-more")
+		let Xe = _(null), Ze = he({
+			sentinelEl: Xe,
+			root: (e) => e.closest("[role=\"listbox\"]"),
+			canLoad: () => F.value && S.hasMore && !S.loading,
+			loaded: () => U.value,
+			onLoadMore: () => E("load-more")
 		});
-		function $() {
-			I.value && (q(), ct.reset(), G.value = W.value, I.value = !1, R.value = -1, z.value = !1, L.value = J());
+		function Q(e = X()) {
+			F.value && (Ke(), Ze.reset(), V.value = B.value, F.value = !1, K.value = -1, R.value = !1, I.value = e);
 		}
-		S(() => T.readonly || j.value, (e) => {
-			e && $();
+		b(() => S.readonly || k.value, (e) => {
+			e && Q();
 		});
-		let lt = he(Be, $);
-		function ut(e) {
-			e.preventDefault();
-		}
-		function dt() {
-			z.value = !0, Q();
+		let Qe = me(M, () => Q());
+		function $e() {
+			R.value = !0, Z();
 		}
-		function ft() {
-			!T.multiple && L.value && P.value?.select();
+		function et() {
+			!S.multiple && I.value && N.value?.select();
 		}
-		function pt() {
-			Ve.value = !0, ft();
+		function tt() {
+			L.value = !0, et();
 		}
-		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 nt = (e) => e.target instanceof Element && e.target.closest(".v-combobox-chevron, .v-combobox-spinner") !== null;
+		function rt(e) {
+			nt(e) && e.preventDefault();
 		}
-		function gt(e) {
-			if (!j.value) {
-				if (P.value?.focus(), I.value && mt(e)) {
-					$();
+		function it(e) {
+			if (!k.value) {
+				if (N.value?.focus(), F.value && nt(e)) {
+					Q();
 					return;
 				}
-				Q(), ft();
+				Z(), et();
 			}
 		}
-		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 vt(e) {
-			!T.multiple || T.readonly || (N.value = B.value.filter((t) => t !== e), P.value?.focus());
+		function at(e) {
+			e.disabled || S.readonly || k.value || (ze(e), S.multiple ? (R.value = !1, j.value = ne(z.value, e.value), I.value = "", N.value?.focus()) : (j.value = e.value, Q(e.label)));
 		}
-		function yt() {
-			N.value = T.multiple ? [] : "", z.value = !1, R.value = I.value ? K.value.findIndex((e) => !e.disabled) : -1, O("clear");
+		function $(e) {
+			!S.multiple || S.readonly || k.value || (j.value = z.value.filter((t) => t !== e), N.value?.focus());
 		}
-		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 ot() {
+			j.value = S.multiple ? [] : "", R.value = !1, F.value ? q() : K.value = -1, E("clear");
 		}
-		function xt(e) {
+		function st(e) {
 			switch (e.key) {
 				case "ArrowDown":
-					e.preventDefault(), I.value ? bt(1) : Q();
+					e.preventDefault(), F.value ? J(1) : Z();
 					break;
 				case "ArrowUp":
-					e.preventDefault(), I.value ? bt(-1) : Q();
+					e.preventDefault(), F.value ? J(-1) : Z();
 					break;
 				case "Enter":
-					if (I.value && R.value >= 0) {
+					if (F.value && K.value >= 0) {
 						e.preventDefault();
-						let t = K.value[R.value];
-						t && _t(t);
+						let t = W.value[K.value];
+						t && at(t);
 					}
 					break;
 				case "Escape":
-					I.value && (e.preventDefault(), $());
+					F.value && (e.preventDefault(), Q());
 					break;
 				case "Tab":
-					$();
+					Q();
 					break;
 				case "Backspace":
-					if (T.multiple && !L.value) {
-						let e = B.value.at(-1);
-						e !== void 0 && vt(e);
+					if (S.multiple && !I.value) {
+						let e = z.value.at(-1);
+						e !== void 0 && $(e);
 					}
 					break;
 			}
 		}
-		return _e({
-			focus: (e) => P.value?.focus(e),
-			select: () => P.value?.select(),
-			el: c(() => P.value?.el ?? null)
-		}), (e, i) => (g(), d("div", {
+		return f({
+			focus: (e) => N.value?.focus(e),
+			select: () => N.value?.select(),
+			el: a(() => N.value?.el ?? null)
+		}), (e, t) => (g(), c("div", {
 			ref_key: "rootEl",
-			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(lt) && x(lt)(...e)
+			ref: M,
+			class: xe(["v-combobox", y(je)]),
+			style: Se([{ "--chip-height": A.value.height }, y(Me)]),
+			"data-size": y(D),
+			"data-compact": y(O) ? "" : void 0,
+			"data-multiple": i.multiple ? "" : void 0,
+			"data-collapsed": Je.value ? "" : void 0,
+			"data-open": F.value ? "" : void 0,
+			onFocusout: t[3] ||= (...e) => y(Qe) && y(Qe)(...e)
 		}, [
-			f("div", {
+			l("div", {
 				class: "v-combobox-control",
-				onMousedown: ht,
-				onClick: gt
-			}, [m(ae, h({
+				onMousedown: rt,
+				onClick: it
+			}, [d(oe, be({
 				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 && !Y.value }],
+				ref: N,
+				modelValue: I.value,
+				"onUpdate:modelValue": t[0] ||= (e) => I.value = e,
+				class: ["v-input-end-pinned", { "v-input-chips": i.multiple && !qe.value }],
 				role: "combobox",
 				"aria-haspopup": "listbox",
 				"aria-autocomplete": "list",
-				"aria-expanded": I.value,
-				"aria-controls": x(F)
-			}, ze.value, {
-				label: o.label,
-				hint: o.hint,
-				size: x(k),
-				compact: x(A),
-				invalid: o.invalid,
-				disabled: x(j),
-				readonly: o.readonly,
-				"icon-start": o.iconStart,
-				"icon-start-label": o.iconStartLabel,
-				clearable: o.clearable,
-				"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(() => [
-						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($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: U(t),
-							remove: () => vt(t),
-							size: M.value.size,
-							compact: M.value.compact
-						}, () => [m(se, {
-							tone: "accent",
-							size: M.value.size,
-							compact: M.value.compact,
-							dismissible: !o.readonly && !x(j),
-							"dismiss-label": x(E).common.remove(U(t)),
-							disabled: x(j),
-							onDismiss: (e) => vt(t)
-						}, {
-							default: C(() => [p(b(U(t)), 1)]),
-							_: 2
-						}, 1032, [
-							"size",
-							"compact",
-							"dismissible",
-							"dismiss-label",
-							"disabled",
-							"onDismiss"
-						])], void 0, t)), 128)),
-						o.multiple && !Y.value && Z.value > 0 ? y(e.$slots, "overflow", {
-							count: Z.value,
-							size: M.value.size,
-							compact: M.value.compact
-						}, () => [m(se, {
-							class: "v-combobox-overflow-chip",
-							tone: "neutral",
-							size: M.value.size,
-							compact: M.value.compact,
-							disabled: x(j)
-						}, {
-							default: C(() => [p(b($e.value), 1)]),
-							_: 1
-						}, 8, [
-							"size",
-							"compact",
-							"disabled"
-						])], void 0, 2) : u("", !0),
-						y(e.$slots, "start")
-					]),
+				"aria-expanded": F.value,
+				"aria-controls": y(P)
+			}, Fe.value, {
+				label: i.label,
+				hint: i.hint,
+				error: i.error,
+				required: i.required,
+				"hide-label": i.hideLabel,
+				"label-position": i.labelPosition,
+				size: y(D),
+				compact: y(O),
+				invalid: i.invalid,
+				disabled: y(k),
+				readonly: i.readonly,
+				"icon-start": i.iconStart,
+				"icon-start-label": i.iconStartLabel,
+				clearable: i.clearable,
+				"clear-visible": Ye.value,
+				"clear-label": Ae.value,
+				placeholder: z.value.length === 0 ? i.placeholder : void 0,
+				"aria-activedescendant": F.value && y(K) >= 0 ? y(Be)(y(K)) : void 0,
+				onInput: $e,
+				onKeydown: st,
+				onFocus: tt,
+				onBlur: t[1] ||= (e) => L.value = !1,
+				onClear: ot
+			}), u({
+				end: x(() => [i.loading ? (g(), o(n, {
+					key: 0,
+					class: "v-combobox-spinner v-input-icon-end",
+					"aria-hidden": "true"
+				})) : (g(), o(ue, {
+					key: 1,
+					class: "v-combobox-chevron",
+					icon: i.expandIcon,
+					open: F.value
+				}, null, 8, ["icon", "open"]))]),
+				_: 2
+			}, [i.multiple || e.$slots.start ? {
+				name: "start",
+				fn: x(() => [i.multiple ? (g(), o(fe, {
+					key: 0,
+					values: z.value,
+					display: i.display,
+					max: i.max,
+					collapsed: Je.value,
+					"overflow-text": i.overflowText,
+					scale: A.value,
+					removable: !i.readonly,
+					disabled: y(k),
+					"label-of": y(G),
+					"option-of": y(Re),
+					onRemove: $
+				}, u({ _: 2 }, [e.$slots.chip ? {
+					name: "chip",
+					fn: x((t) => [v(e.$slots, "chip", h(p(t)))]),
 					key: "0"
-				} : void 0,
-				e.$slots["value-end"] ? {
-					name: "value-end",
-					fn: C(() => [y(e.$slots, "value-end")]),
+				} : void 0, e.$slots.overflow ? {
+					name: "overflow",
+					fn: x((t) => [v(e.$slots, "overflow", h(p(t)))]),
 					key: "1"
-				} : void 0,
-				o.loading || !o.hideExpandIcon ? {
-					name: "end",
-					fn: C(() => [o.loading ? (g(), l(a, {
-						key: 0,
-						class: "v-combobox-spinner v-input-icon-end",
-						"aria-hidden": "true"
-					})) : (g(), l(n, h({ key: 1 }, x(t)(o.expandIcon), {
-						class: "v-combobox-chevron v-input-icon-end",
-						"aria-hidden": "true"
-					}), null, 16))]),
-					key: "2"
-				} : void 0
-			]), 1040, [
+				} : void 0]), 1032, [
+					"values",
+					"display",
+					"max",
+					"collapsed",
+					"overflow-text",
+					"scale",
+					"removable",
+					"disabled",
+					"label-of",
+					"option-of"
+				])) : s("", !0), v(e.$slots, "start")]),
+				key: "0"
+			} : void 0, e.$slots["value-end"] ? {
+				name: "value-end",
+				fn: x(() => [v(e.$slots, "value-end")]),
+				key: "1"
+			} : void 0]), 1040, [
 				"modelValue",
 				"class",
 				"aria-expanded",
 				"aria-controls",
 				"label",
 				"hint",
+				"error",
+				"required",
+				"hide-label",
+				"label-position",
 				"size",
 				"compact",
 				"invalid",
@@ -461,70 +369,61 @@ var Ee = [
 				"placeholder",
 				"aria-activedescendant"
 			])], 32),
-			m(r, {
-				id: x(F),
-				open: I.value,
-				"onUpdate:open": i[2] ||= (e) => I.value = e,
-				mode: "manual",
+			d(de, {
+				id: y(P),
+				ref_key: "panelRef",
+				ref: H,
+				open: F.value,
+				"onUpdate:open": t[2] ||= (e) => F.value = e,
 				anchor: "--combobox-anchor",
-				"match-trigger": "",
-				placement: o.placement,
-				role: "listbox",
-				class: "v-combobox-panel v-control",
-				"data-size": x(k),
-				"data-compact": x(A) ? "" : void 0,
-				"aria-multiselectable": o.multiple ? "true" : void 0,
-				onMousedown: ut
-			}, {
-				default: C(() => [
-					(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) => _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"]))), 128))]),
-						_: 2
-					}, 1032, ["label"])) : (g(), l(ce, h({
-						key: 2,
-						ref_for: !0
-					}, t.row, {
-						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 && 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: st,
-						class: "v-combobox-more",
-						"aria-hidden": "true"
-					}, [o.loading ? (g(), l(a, {
-						key: 0,
-						label: D.value
-					}, null, 8, ["label"])) : u("", !0)], 512)) : u("", !0)
-				]),
-				_: 3
-			}, 8, [
+				placement: i.placement,
+				class: "v-combobox-panel",
+				size: y(D),
+				compact: y(O),
+				multiple: i.multiple,
+				virtual: i.virtual,
+				blocks: y(Ue),
+				measure: y(We),
+				onSelect: at,
+				onHighlight: y(He)
+			}, u({
+				default: x(() => [i.loading && y(W).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(W).length === 0 ? (g(), c("div", Oe, [v(e.$slots, "empty", { query: B.value }, () => [d(se, {
+					size: "sm",
+					class: "v-combobox-empty",
+					icon: B.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,
+					class: "v-combobox-more",
+					"aria-hidden": "true"
+				}, [i.loading ? (g(), o(n, {
+					key: 0,
+					label: T.value
+				}, null, 8, ["label"])) : s("", !0)], 512)) : s("", !0)]),
+				_: 2
+			}, [e.$slots.option ? {
+				name: "option",
+				fn: x((t) => [v(e.$slots, "option", h(p(t)))]),
+				key: "0"
+			} : void 0]), 1032, [
 				"id",
 				"open",
 				"placement",
-				"data-size",
-				"data-compact",
-				"aria-multiselectable"
+				"size",
+				"compact",
+				"multiple",
+				"virtual",
+				"blocks",
+				"measure",
+				"onHighlight"
 			]),
-			f("span", je, b(qe.value), 1)
+			l("span", ke, Ce(Ge.value), 1)
 		], 46, Ee));
 	}
 });
 //#endregion
-export { w as default };
+export { S as default };
 
 //# sourceMappingURL=VCombobox.vue_vue_type_script_setup_true_lang.js.map