@bridge-ui/vue 0.0.8 → 0.0.10

package/dist/Components/Autocomplete/composables/useAutocomplete.js

@@ -1,23 +1,26 @@
 import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t } from "../../../Utils/slotOrProp.js";
-import { mergePartBind as n, resolveFieldAdornmentIconSize as r, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { useBreakpoint as n } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as r, resolveFieldAdornmentIconSize as i, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
 import { formFieldBridgeKeys as te, useFormField as ne } from "../../FormField/composables/useFormField.js";
 import { useListboxNavigation as re } from "../../Listbox/composables/useListboxNavigation.js";
-import { Comment as ie, Text as ae, computed as a, nextTick as o, onBeforeUnmount as oe, onMounted as se, ref as s, useAttrs as ce, useId as le, useSlots as ue, watch as c } from "vue";
-import { adjustAutosizeTextareaHeight as de, cn as l, commitFreeSoloValue as fe, createSelectAsyncSearch as pe, filterListboxEntries as me, flattenListboxOptions as u, mergeBridgeUILayeredClasses as d, normalizeListboxEntries as f, normalizeSelectOptions as p, resolveSelectAsyncDebounce as he, resolveSelectAsyncOptions as ge, selectValuesEqual as m, splitComponentProps as _e } from "@bridge-ui/core";
-import { get as h, isNil as ve, omit as ye } from "es-toolkit/compat";
-import { colorProps as be, invalidatedProps as xe } from "@bridge-ui/core/Tokens/Listbox";
+import { Comment as ie, Text as ae, computed as o, nextTick as s, onBeforeUnmount as oe, onMounted as se, ref as c, useAttrs as ce, useId as le, useSlots as ue, watch as l } from "vue";
+import { adjustAutosizeTextareaHeight as de, cn as u, commitFreeSoloValue as d, createSelectAsyncSearch as fe, filterListboxEntries as pe, flattenListboxOptions as f, mergeBridgeUILayeredClasses as p, normalizeListboxEntries as me, normalizeSelectOptions as he, resolveFieldShowFooter as ge, resolveSelectAsyncDebounce as _e, resolveSelectAsyncOptions as ve, selectValuesEqual as m, splitComponentProps as ye } from "@bridge-ui/core";
+import { get as h, isNil as be, omit as xe } from "es-toolkit/compat";
+import { colorProps as Se, invalidatedProps as Ce } from "@bridge-ui/core/Tokens/Listbox";
 //#region src/Components/Autocomplete/composables/useAutocomplete.ts
-var Se = [
+var we = [
 	"classes",
 	"loading",
 	"options",
+	"overlay",
 	"freeSolo",
 	"multiple",
 	"asyncData",
 	"clearable",
 	"maxHeight",
 	"searchable",
+	"showFooter",
 	"flipOptions",
 	"optionLabel",
 	"optionValue",
@@ -30,106 +33,106 @@ var Se = [
 	"minItemsForSearch",
 	"optionDescription"
 ];
-function g(g, _, v, y, Ce) {
-	let we = ce(), b = ue(), x = le(), S = e(), C = s(!1), w = s(""), T = s(-1), E = s(null), D = s(!1), O = s([]), k = null, A = s([]), j = a(() => _e({
+function g(g, _, v, y, Te) {
+	let Ee = ce(), b = ue(), x = le(), De = n(), S = e(), C = c(!1), w = c(""), T = c(-1), E = c([]), Oe = c(null), D = c(!1), O = c([]), k = null, A = c([]), ke = o(() => ye({
 		props: {
-			...we,
+			...Ee,
 			...g
 		},
-		bridgeKeys: Se
-	})), M = a(() => j.value.componentProps), Te = a(() => ({ classes: M.value.classes })), { components: Ee, entry: De } = ee({
+		bridgeKeys: we
+	})), j = o(() => ke.value.componentProps), Ae = o(() => ({ classes: j.value.classes })), { components: je, entry: Me } = ee({
 		componentName: "Autocomplete",
-		props: () => Te.value
-	}), N = i({
-		entry: De,
-		props: () => Te.value
-	}), P = a(() => !!M.value.multiple), F = a(() => ({
-		optionLabel: M.value.optionLabel ?? "label",
-		optionValue: M.value.optionValue ?? "value",
-		optionDescription: M.value.optionDescription ?? "description"
-	})), I = a(() => Ce.value.length > 0 ? Ce.value.map((e) => ({
+		props: () => Ae.value
+	}), M = a({
+		entry: Me,
+		props: () => Ae.value
+	}), N = o(() => !!j.value.multiple), P = o(() => ({
+		optionLabel: j.value.optionLabel ?? "label",
+		optionValue: j.value.optionValue ?? "value",
+		optionDescription: j.value.optionDescription ?? "description"
+	})), F = o(() => Te.value.length > 0 ? Te.value.map((e) => ({
 		option: e,
 		type: "option"
-	})) : f(M.value.options, F.value)), Oe = a(() => u(I.value)), L = s([]);
-	function ke(e) {
+	})) : me(j.value.options, P.value)), Ne = o(() => f(F.value)), I = c([]);
+	function Pe(e) {
 		if (!e || typeof e != "object") return !1;
 		let t = e.type;
 		if (!t || typeof t != "object") return !1;
 		let n = t.name, r = t.__name;
 		return n === "AutocompleteOption" || r === "AutocompleteOption";
 	}
-	function Ae() {
+	function Fe() {
 		return t(b, "default") ? (b.default?.({}) ?? []).some((e) => {
 			if (!e || typeof e != "object") return !1;
 			let t = e.type;
-			return t === ie || t === ae || t === void 0 || typeof t == "symbol" ? !1 : !ke(e);
+			return t === ie || t === ae || t === void 0 || typeof t == "symbol" ? !1 : !Pe(e);
 		}) : !1;
 	}
-	let R = a(() => Ae() && !M.value.options?.length), z = a(() => {
-		if (R.value) return [];
+	let L = o(() => Fe() && !j.value.options?.length), R = o(() => {
+		if (L.value) return [];
 		if (O.value.length > 0) {
-			let e = f(O.value, F.value);
-			return M.value.flipOptions ? [...e].reverse() : e;
+			let e = me(O.value, P.value);
+			return j.value.flipOptions ? [...e].reverse() : e;
 		}
-		return M.value.flipOptions ? [...I.value].reverse().map((e) => e.type === "section" ? {
+		return j.value.flipOptions ? [...F.value].reverse().map((e) => e.type === "section" ? {
 			...e,
 			options: [...e.options].reverse()
-		} : e) : I.value;
-	}), je = a(() => R.value ? L.value : u(z.value)), B = a(() => {
+		} : e) : F.value;
+	}), Ie = o(() => L.value ? I.value : f(R.value)), z = o(() => {
 		let e = _.value;
-		return P.value ? Array.isArray(e) ? e : [] : !ve(e) && e !== "" ? [e] : [];
-	}), V = a(() => {
+		return N.value ? Array.isArray(e) ? e : [] : !be(e) && e !== "" ? [e] : [];
+	}), Le = o(() => ge(j.value.showFooter, De.mobile)), Re = o(() => Le.value ? E.value : z.value), B = o(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of [...je.value, ...A.value]) e.set(t.value, t);
-		return B.value.map((t) => e.get(t) ?? {
+		for (let t of [...Ie.value, ...A.value]) e.set(t.value, t);
+		return z.value.map((t) => e.get(t) ?? {
 			value: t,
 			label: String(t)
 		});
-	}), Me = a(() => B.value.length > 0), Ne = a(() => M.value.clearable !== !1), H = a(() => !!M.value.asyncData), U = a(() => {
-		if (H.value || (M.value.searchable ?? !0)) return !0;
-		let e = M.value.minItemsForSearch ?? 11;
-		return Oe.value.length >= e;
-	}), W = a(() => C.value && U.value), Pe = a(() => !!M.value.loading || D.value), Fe = a(() => {
-		if (R.value) return [];
-		if (!W.value || !w.value.trim()) return z.value;
+	}), V = o(() => z.value.length > 0), ze = o(() => j.value.clearable !== !1), H = o(() => !!j.value.asyncData), U = o(() => {
+		if (H.value || (j.value.searchable ?? !0)) return !0;
+		let e = j.value.minItemsForSearch ?? 11;
+		return Ne.value.length >= e;
+	}), W = o(() => C.value && U.value), Be = o(() => !!j.value.loading || D.value), Ve = o(() => {
+		if (L.value) return [];
+		if (!W.value || !w.value.trim()) return R.value;
 		let e = w.value.trim().toLowerCase();
-		return me(z.value, (t) => t.label.toLowerCase().includes(e));
-	}), G = a(() => R.value ? L.value : u(Fe.value)), K = re(() => G.value, T, x), Ie = a(() => g.readonly || g.disabled ? !0 : !W.value), Le = a(() => W.value || P.value ? w.value : V.value[0]?.label ?? ""), Re = (e) => {
-		E.value = e instanceof HTMLElement ? e : null;
+		return pe(R.value, (t) => t.label.toLowerCase().includes(e));
+	}), G = o(() => L.value ? I.value : f(Ve.value)), K = re(() => G.value, T, x), He = o(() => g.readonly || g.disabled ? !0 : !W.value), Ue = o(() => W.value || N.value ? w.value : B.value[0]?.label ?? ""), We = (e) => {
+		Oe.value = e instanceof HTMLElement ? e : null;
 	};
-	function ze(e) {
+	function Ge(e) {
 		e.preventDefault();
 	}
-	function Be(e) {
+	function Ke(e) {
 		if (g.disabled || g.readonly) return;
 		let t = e.target;
 		if (!t.closest("[data-autocomplete-clear]") && !(t.closest(".wrapper-start-slot") || t.closest(".wrapper-end-slot"))) {
 			if (!C.value) {
-				Q();
+				Z();
 				return;
 			}
-			W.value || ($(), v.value?.focus({ preventScroll: !0 }));
+			W.value || (Q(), v.value?.focus({ preventScroll: !0 }));
 		}
 	}
-	let Ve = a(() => {
-		let e = _e({
+	let qe = o(() => {
+		let e = xe(ke.value.inheritedAttrs, ["class"]), n = ye({
 			bridgeKeys: te,
-			props: ye(j.value.inheritedAttrs, ["class"])
-		}).componentProps, r = e.endIcon ?? (t(b, "end") ? void 0 : "chevronUpDown"), { listbox: ee, ...i } = e.customProps ?? {};
+			props: e
+		}).componentProps, i = n.endIcon ?? (t(b, "end") ? void 0 : "chevronUpDown"), { listbox: ee, ...a } = n.customProps ?? {};
 		return {
-			...e,
-			endIcon: r,
-			classes: N.value,
+			...n,
+			endIcon: i,
+			classes: M.value,
 			customProps: {
-				...i,
-				container: n(i.container, {}, {
-					ref: Re,
-					onClick: Be,
-					class: l({ "cursor-pointer": !g.disabled && !g.readonly && !W.value })
+				...a,
+				container: r(a.container, {}, {
+					ref: We,
+					onClick: Ke,
+					class: u({ "cursor-pointer": !g.disabled && !g.readonly && !W.value })
 				})
 			}
 		};
-	}), He = a(() => g.customProps?.listbox), q = ne(() => Ve.value, {
+	}), Je = o(() => g.customProps?.listbox), q = ne(() => qe.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
@@ -137,19 +140,19 @@ function g(g, _, v, y, Ce) {
 		showErrorIcon: !0
 	}, {
 		componentName: "Autocomplete",
-		likeInput: () => P.value,
-		control: () => P.value ? "textarea" : "input"
-	}), J = (e) => {
-		!e || !P.value || de(e);
+		likeInput: () => N.value,
+		control: () => N.value ? "textarea" : "input"
+	}), Ye = o(() => V.value && ze.value && !g.readonly && !q.isDisabled.value), J = (e) => {
+		!e || !N.value || de(e);
 	};
-	function Y(e) {
-		return B.value.some((t) => m(t, e));
+	function Xe(e) {
+		return Re.value.some((t) => m(t, e));
 	}
-	function X(e) {
+	function Y(e) {
 		_.value = e;
 	}
-	function Z(e) {
-		if (P.value) {
+	function X(e) {
+		if (N.value) {
 			let t = Array.isArray(e) ? e : [];
 			y("update:modelValue", t), y("change", t);
 			return;
@@ -157,67 +160,90 @@ function g(g, _, v, y, Ce) {
 		let t = e ?? "";
 		y("update:modelValue", t), y("change", t);
 	}
-	function Q() {
-		g.disabled || g.readonly || C.value || (C.value = !0, w.value = "", K.highlightCurrentSelection(Y), y("open"), H.value && M.value.asyncData && k?.searchImmediate(""));
+	function Z() {
+		g.disabled || g.readonly || C.value || (E.value = [...z.value], C.value = !0, w.value = "", K.highlightCurrentSelection((e) => z.value.some((t) => m(t, e))), y("open"), H.value && j.value.asyncData && k?.searchImmediate(""));
 	}
-	function $(e) {
+	function Q(e) {
 		k?.cancel();
 		let t = C.value;
-		if (t && e?.commitFreeSolo && M.value.freeSolo !== !1) {
-			let e = fe(w.value, B.value, P.value);
-			e != null && (X(e), Z(e), P.value && o(() => {
+		if (t && e?.commitFreeSolo && j.value.freeSolo !== !1) {
+			let e = d(w.value, z.value, N.value);
+			e != null && (Y(e), X(e), N.value && s(() => {
 				J(v.value), v.value?.focus({ preventScroll: !0 });
 			}));
 		}
 		w.value = "", T.value = -1, t && (C.value = !1, y("close"));
 	}
-	function Ue(e) {
+	function Ze(e) {
 		if (!e.disabled) {
-			if (P.value) {
-				let t = [...B.value], n = t.findIndex((t) => m(t, e.value));
-				n >= 0 ? (t.splice(n, 1), y("deselect", e)) : (t.push(e.value), y("select", e)), X(t), Z(t), w.value = "", T.value = -1, o(() => {
+			if (Le.value) {
+				if (N.value) {
+					let t = [...E.value], n = t.findIndex((t) => m(t, e.value));
+					n >= 0 ? (t.splice(n, 1), y("deselect", e)) : (t.push(e.value), y("select", e)), E.value = t, w.value = "", T.value = -1, s(() => {
+						v.value?.focus({ preventScroll: !0 });
+					});
+					return;
+				}
+				E.value = [e.value], y("select", e), w.value = "", T.value = -1;
+				return;
+			}
+			if (N.value) {
+				let t = [...z.value], n = t.findIndex((t) => m(t, e.value));
+				n >= 0 ? (t.splice(n, 1), y("deselect", e)) : (t.push(e.value), y("select", e)), Y(t), X(t), w.value = "", T.value = -1, s(() => {
 					J(v.value), v.value?.focus({ preventScroll: !0 });
 				});
 				return;
 			}
-			X(e.value), Z(e.value), y("select", e), $();
+			Y(e.value), X(e.value), y("select", e), Q();
 		}
 	}
-	function We() {
-		if (M.value.freeSolo === !1) return !1;
-		let e = fe(w.value, B.value, P.value);
-		return e == null ? !1 : (X(e), Z(e), w.value = "", T.value = -1, P.value ? (o(() => {
+	function Qe() {
+		if (N.value) Y(E.value), X(E.value);
+		else {
+			let e = E.value[0] ?? null;
+			Y(e), X(e);
+		}
+		Q();
+	}
+	function $e() {
+		E.value = [...z.value], Q(), y("cancel");
+	}
+	function et() {
+		if (j.value.freeSolo === !1) return !1;
+		let e = d(w.value, z.value, N.value);
+		return e != null && (Y(e), X(e), w.value = "", T.value = -1, N.value ? (s(() => {
 			J(v.value), v.value?.focus({ preventScroll: !0 });
-		}), !0) : ($(), !0));
+		}), !0) : (Q(), !0));
 	}
-	function Ge(e) {
-		e?.preventDefault(), e?.stopPropagation(), P.value ? (X([]), Z([])) : (X(null), Z(null)), y("clear"), $();
+	function tt(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(g.disabled || g.readonly) && (N.value ? (Y([]), X([])) : (Y(null), X(null)), y("clear"), Q());
 	}
-	function Ke(e, t) {
-		if (t.preventDefault(), t.stopPropagation(), !P.value) return;
-		let n = B.value.filter((t) => !m(t, e.value));
-		X(n), Z(n), y("deselect", e), o(() => J(v.value));
+	function nt(e, t) {
+		if (t.preventDefault(), t.stopPropagation(), !N.value) return;
+		let n = z.value.filter((t) => !m(t, e.value));
+		Y(n), X(n), y("deselect", e), s(() => J(v.value));
 	}
-	function qe() {
+	function rt() {
 		let e = K.getHighlightedOption();
-		return e ? (Ue(e), !0) : !1;
+		return e ? (Ze(e), !0) : !1;
 	}
-	function Je(e) {
-		w.value = e.target.value, y("search", w.value), C.value || Q(), K.resetHighlight(), H.value && k?.searchDebounced(w.value);
+	function it(e) {
+		let t = e.target;
+		w.value = t.value, y("search", w.value), C.value || Z(), K.resetHighlight(), H.value && k?.searchDebounced(w.value);
 	}
-	function Ye(e) {
+	function at(e) {
 		if (!(g.disabled || g.readonly)) switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), C.value ? K.moveHighlight(1) : Q();
+				e.preventDefault(), C.value ? K.moveHighlight(1) : Z();
 				break;
 			case "ArrowUp":
-				e.preventDefault(), C.value ? K.moveHighlight(-1) : Q();
+				e.preventDefault(), C.value ? K.moveHighlight(-1) : Z();
 				break;
 			case "Enter":
-				e.preventDefault(), C.value ? qe() || We() : Q();
+				e.preventDefault(), C.value ? rt() || et() : Z();
 				break;
 			case "Escape":
-				e.preventDefault(), $();
+				e.preventDefault(), Q();
 				break;
 			case "Home":
 				C.value && (e.preventDefault(), K.highlightFirst());
@@ -226,109 +252,107 @@ function g(g, _, v, y, Ce) {
 				C.value && (e.preventDefault(), K.highlightLast());
 				break;
 			case "Backspace":
-				if (P.value && !w.value && V.value.length > 0) {
+				if (N.value && !w.value && B.value.length > 0) {
 					e.preventDefault();
-					let t = V.value.at(-1);
-					t && Ke(t, e);
+					let t = B.value.at(-1);
+					t && nt(t, e);
 				}
 				break;
-			case "Tab":
-				$({ commitFreeSolo: !0 });
-				break;
-			default: break;
+			case "Tab": Q({ commitFreeSolo: !0 });
 		}
 	}
-	async function Xe(e) {
-		let t = M.value.asyncData;
+	async function ot(e) {
+		let t = j.value.asyncData;
 		if (t) {
 			D.value = !0;
 			try {
-				let { options: n, resolvedSelected: r } = await ge(t, e, B.value, (e) => p(e, F.value));
+				let { options: n, resolvedSelected: r } = await ve(t, e, z.value, (e) => he(e, P.value));
 				r.length > 0 && (A.value = r), O.value = n;
 			} finally {
 				D.value = !1;
 			}
 		}
 	}
-	async function Ze() {
-		let e = M.value.asyncData;
-		!e?.resolve || B.value.length === 0 || (A.value = p(await e.resolve(B.value), F.value));
+	async function st() {
+		let e = j.value.asyncData;
+		!e?.resolve || z.value.length === 0 || (A.value = he(await e.resolve(z.value), P.value));
 	}
-	let Qe = a(() => {
-		let e = h(d(be, h(Ee.value, [
+	let $ = o(() => {
+		let e = p(Se, h(je.value, [
 			"Autocomplete",
 			"tokens",
 			"listbox",
 			"color"
-		])), q.merged.value.color ?? "primary");
-		return q.invalidated.value ? d(xe, h(Ee.value, [
+		])), t = h(e, q.merged.value.color ?? "primary");
+		return q.invalidated.value ? p(Ce, h(je.value, [
 			"Autocomplete",
 			"tokens",
 			"listbox",
 			"invalidated"
-		])) : e;
-	}), $e = a(() => Qe.value?.value), et = a(() => {
-		let e = !g.disabled && !g.readonly && !W.value, t = !g.disabled && !g.readonly && W.value && U.value, r = Me.value && !P.value && !W.value;
-		return n({
+		])) : t;
+	}), ct = o(() => $.value?.value), lt = o(() => {
+		let e = !g.disabled && !g.readonly && !W.value, t = !g.disabled && !g.readonly && W.value && U.value, n = V.value && !N.value && !W.value;
+		return r({
 			role: "combobox",
-			value: Le.value,
+			value: Ue.value,
 			"aria-controls": x,
 			"aria-expanded": C.value,
-			readonly: Ie.value,
-			onKeydown: Ye,
-			placeholder: M.value.placeholder,
+			readonly: He.value,
+			onKeydown: at,
+			placeholder: j.value.placeholder,
 			"aria-autocomplete": U.value ? "list" : void 0,
 			"aria-activedescendant": C.value ? K.activeDescendantId.value : void 0,
-			...P.value ? {
+			...N.value ? {
 				rows: 1,
 				onInput: (e) => {
-					Je(e), J(e.target);
+					it(e), J(e.target);
 				}
-			} : { onInput: Je }
-		}, q.inputBind.value, l({
+			} : { onInput: it }
+		}, q.inputBind.value, u({
 			"cursor-text": t,
 			"cursor-pointer": e,
-			"resize-none overflow-hidden": P.value,
-			[l($e.value, N.value.value) ?? ""]: r
+			"resize-none overflow-hidden": N.value,
+			[u(ct.value, M.value.value) ?? ""]: n
 		}));
 	});
-	c(() => [
+	l(() => [
 		C.value,
-		P.value,
+		N.value,
 		v.value
 	], () => {
 		J(v.value);
-	}, { immediate: !0 }), c(() => _.value, () => {
-		Ze();
-	}, { immediate: !0 }), c(() => M.value.asyncData, (e) => {
-		if (k?.cancel(), O.value = [], Ze(), !e) {
+	}, { immediate: !0 }), l(() => _.value, () => {
+		st();
+	}, { immediate: !0 }), l(() => j.value.asyncData, (e) => {
+		if (k?.cancel(), O.value = [], st(), !e) {
 			k = null;
 			return;
 		}
-		k = pe((e) => void Xe(e), he(e));
+		k = fe((e) => void ot(e), _e(e));
 	}, { immediate: !0 }), oe(() => {
 		k?.cancel();
 	}), se(() => {
 		J(v.value);
 	});
-	let tt = a(() => r(q.merged.value.size)), nt = a(() => n({}, {}, {
+	let ut = o(() => i(q.merged.value.size)), dt = o(() => r({}, {}, {
 		tabindex: 0,
 		role: "button",
 		"data-autocomplete-clear": !0,
-		onMousedown: ze,
-		class: l({
+		onMousedown: Ge,
+		class: u({
 			"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-			[Qe.value?.clear ?? ""]: !0,
-			[N.value.clear ?? ""]: !0
+			[$.value?.clear ?? ""]: !0,
+			[M.value.clear ?? ""]: !0
 		})
-	})), rt = a(() => ({
+	})), ft = o(() => ({
 		listboxId: x,
-		isSelected: Y,
+		isSelected: Xe,
 		disableAutoFocus: !0,
-		loading: Pe.value,
-		multiple: P.value,
+		overlay: g.overlay,
+		loading: Be.value,
+		multiple: N.value,
 		maxHeight: g.maxHeight,
-		entries: Fe.value,
+		entries: Ve.value,
 		options: G.value,
 		size: q.merged.value.size,
 		color: q.merged.value.color,
@@ -337,49 +361,53 @@ function g(g, _, v, y, Ce) {
 		rounded: q.merged.value.rounded,
 		invalidated: q.invalidated.value,
 		highlightedIndex: T.value,
+		showFooter: j.value.showFooter,
 		disableMaxHeight: g.disableMaxHeight === !0,
-		hideEmptyMessage: M.value.hideEmptyMessage === !0,
-		emptyMessage: M.value.emptyMessage ?? S("No options"),
-		loadingMessage: M.value.loadingMessage ?? S("Loading..."),
-		...He.value
+		hideEmptyMessage: j.value.hideEmptyMessage === !0,
+		emptyMessage: j.value.emptyMessage ?? S("No options"),
+		loadingMessage: j.value.loadingMessage ?? S("Loading..."),
+		...Je.value
 	}));
-	function it(e) {
-		let t = L.value;
-		t.length === e.length && t.every((t, n) => String(t.value) === String(e[n]?.value)) || (L.value = e);
+	function pt(e) {
+		let t = I.value;
+		t.length === e.length && t.every((t, n) => String(t.value) === String(e[n]?.value)) || (I.value = e);
 	}
 	return {
 		slots: b,
-		hasValue: Me,
-		multiple: P,
+		hasValue: V,
+		multiple: N,
 		listboxId: x,
 		formField: q,
-		isLoading: Pe,
-		clearable: Ne,
-		clearBind: nt,
-		isSelected: Y,
-		clearValue: Ge,
-		removeChip: Ke,
-		triggerBind: et,
-		selectOption: Ue,
-		containerRef: E,
-		listboxProps: rt,
-		clearIconSize: tt,
-		mergedClasses: N,
+		isLoading: Be,
+		clearable: ze,
+		clearBind: dt,
+		isSelected: Xe,
+		clearValue: tt,
+		removeChip: nt,
+		triggerBind: lt,
+		handleApply: Qe,
+		selectOption: Ze,
+		handleCancel: $e,
+		containerRef: Oe,
+		listboxProps: ft,
+		clearIconSize: ut,
+		mergedClasses: M,
+		showClearIcon: Ye,
 		visibleOptions: G,
 		isSearchActive: W,
-		open: a({
+		open: o({
 			get: () => C.value,
 			set: (e) => {
-				e ? Q() : $({ commitFreeSolo: !0 });
+				e ? Z() : Q({ commitFreeSolo: !0 });
 			}
 		}),
-		selectedOptions: V,
-		hasComposedList: R,
+		selectedOptions: B,
+		hasComposedList: L,
 		highlightedIndex: T,
-		handleRegisteredOptionsChange: it,
-		hideEmptyMessage: a(() => M.value.hideEmptyMessage === !0),
-		emptyMessage: a(() => M.value.emptyMessage ?? S("No options")),
-		loadingMessage: a(() => M.value.loadingMessage ?? S("Loading..."))
+		handleRegisteredOptionsChange: pt,
+		hideEmptyMessage: o(() => j.value.hideEmptyMessage === !0),
+		emptyMessage: o(() => j.value.emptyMessage ?? S("No options")),
+		loadingMessage: o(() => j.value.loadingMessage ?? S("Loading..."))
 	};
 }
 //#endregion

package/dist/Components/Avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
-import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
+import { hasNamedSlot as e } from "../../Utils/slotOrProp.js";
 import t from "../Icon/Icon.js";
 import { useAvatar as n } from "./composables/useAvatar.js";
-import { createBlock as r, createElementBlock as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
+import { createBlock as r, createElementBlock as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, renderSlot as u, toDisplayString as d, unref as f } from "vue";
 //#region src/Components/Avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
-var p = /* @__PURE__ */ a({
+var p = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "Avatar",
 	props: {
@@ -18,12 +18,12 @@ var p = /* @__PURE__ */ a({
 		src: {}
 	},
 	setup(a) {
-		let { slots: p, merged: m, rootBind: h, iconBind: g, hasImage: _, imageBind: v, fallbackBind: y, resolvedIcon: b, hasFallbackSlot: x, hasFallbackText: S, hasCustomContent: C } = n(a, {
+		let { slots: p, merged: m, rootBind: h, iconBind: g, hasImage: _, imageBind: v, fallbackBind: y, resolvedIcon: b, hasFallbackText: x, hasCustomContent: S } = n(a, {
 			size: "md",
 			rounded: "full",
 			color: "secondary"
 		});
-		return (n, a) => (l(), i("div", c(o(f(h))), [f(C) ? (l(), r(u(f(e)(f(p), "default")), { key: 0 })) : f(_) ? (l(), i("img", c(s({ key: 1 }, f(v))), null, 16)) : f(x) ? (l(), r(u(f(e)(f(p), "fallback")), { key: 2 })) : f(S) ? (l(), i("span", c(s({ key: 3 }, f(y))), d(f(m).fallback), 17)) : (l(), r(f(t), s({
+		return (n, a) => (l(), i("div", c(o(f(h))), [f(S) ? u(n.$slots, "default", {}, void 0, void 0, 0) : f(_) ? (l(), i("img", c(s({ key: 1 }, f(v))), null, 16)) : f(e)(f(p), "fallback") ? u(n.$slots, "fallback", {}, void 0, void 0, 2) : f(x) ? (l(), i("span", c(s({ key: 3 }, f(y))), d(f(m).fallback), 17)) : (l(), r(f(t), s({
 			key: 4,
 			icon: f(b)
 		}, f(g)), null, 16, ["icon"]))], 16));

package/dist/Components/Avatar/composables/useAvatar.d.ts

@@ -16,7 +16,6 @@ export declare function useAvatar(props: AvatarProps, libDefaults: AvatarLibDefa
     }>>;
     fallbackBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     resolvedIcon: import('vue').ComputedRef<import('../../..').IconSource>;
-    hasFallbackSlot: import('vue').ComputedRef<boolean>;
     hasFallbackText: import('vue').ComputedRef<boolean>;
     hasCustomContent: import('vue').ComputedRef<boolean>;
 };