@bridge-ui/vue 0.7.0 → 0.9.0

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -1,22 +1,22 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t } from "../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as n } from "../../Utils/index.js";
+import ee from "../ActionFooter/ActionFooter.js";
 import { useListbox as r } from "./composables/useListbox.js";
-import i from "../Button/Button.js";
-import a from "../FieldOverlay/FieldOverlay.js";
-import o from "../List/List.js";
-import { LISTBOX_INJECTION_KEY as ee } from "./listboxInjectionKey.js";
+import i from "../FieldOverlay/FieldOverlay.js";
+import a from "../List/List.js";
+import { LISTBOX_INJECTION_KEY as o } from "./listboxInjectionKey.js";
 import te from "../ListItem/ListItem.js";
 import ne from "../ListSection/ListSection.js";
-import s from "../Progress/Progress.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as re, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, provide as ie, ref as ae, renderList as oe, renderSlot as C, toDisplayString as w, unref as T, useModel as E, useSlots as se, watch as D, withCtx as O } from "vue";
+import re from "../Progress/Progress.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as ie, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as ae, renderSlot as C, toDisplayString as w, unref as T, useModel as oe, useSlots as se, watch as E, withCtx as D } from "vue";
 import { isNil as ce } from "es-toolkit/compat";
-import { entriesFromListboxOptions as le, flattenListboxOptions as ue, mapListboxEntriesToRows as de, upsertListboxOption as k } from "@bridge-ui/core/Domain";
+import { entriesFromListboxOptions as le, flattenListboxOptions as ue, mapListboxEntriesToRows as O, upsertListboxOption as k } from "@bridge-ui/core/Domain";
 import { cn as A } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var j = { key: 1 }, M = /*@__PURE__*/ g({
+var j = { key: 1 }, M = /*@__PURE__*/ m({
 	__name: "Listbox",
-	props: /*@__PURE__*/ v({
+	props: /*@__PURE__*/ g({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -67,84 +67,84 @@ var j = { key: 1 }, M = /*@__PURE__*/ g({
 		},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ v([
+	emits: /*@__PURE__*/ g([
 		"apply",
 		"cancel",
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(g, { emit: v }) {
-		let M = se(), N = v, P = E(g, "modelValue");
-		D(P, (e) => {
+	setup(m, { emit: g }) {
+		let M = se(), N = g, P = oe(m, "modelValue");
+		E(P, (e) => {
 			N("show-change", e);
 		});
-		let F = g, I = e(), L = l(() => F.emptyMessage ?? I("No options")), R = l(() => F.loadingMessage ?? I("Loading...")), { merged: z, checkClass: B, scrollBind: V, footerBind: H, showFooter: fe, applyLabel: pe, cancelLabel: me, messageBind: U, surfaceBind: he, sizeClasses: ge, mergedClasses: W, applyButtonProps: _e, optionHoverClass: ve, cancelButtonProps: ye, optionSelectedClass: be, optionHighlightedClass: xe } = r(F, {
+		let F = m, I = e(), L = c(() => F.emptyMessage ?? I("No options")), R = c(() => F.loadingMessage ?? I("Loading...")), { merged: z, checkClass: B, scrollBind: V, footerBind: H, showFooter: U, messageBind: W, surfaceBind: de, sizeClasses: fe, mergedClasses: G, applyButtonProps: pe, optionHoverClass: me, cancelButtonProps: he, optionSelectedClass: ge, optionHighlightedClass: _e } = r(F, {
 			size: "md",
 			color: "primary"
-		}), Se = l(() => F.options ?? []), G = l(() => F.entries ? F.entries : le(Se.value)), K = l(() => ue(G.value)), q = l(() => t(M, "default")), J = l(() => !F.loading && !q.value && K.value.length === 0 && F.hideEmptyMessage !== !0), Ce = l(() => A(B.value, W.value.check)), Y = ae([]);
-		function X(e) {
+		}), ve = c(() => F.options ?? []), K = c(() => F.entries ? F.entries : le(ve.value)), q = c(() => ue(K.value)), J = c(() => t(M, "default")), Y = c(() => !F.loading && !J.value && q.value.length === 0 && F.hideEmptyMessage !== !0), ye = c(() => A(B.value, G.value.check)), X = S([]);
+		function Z(e) {
 			return F.isSelected?.(e) ?? !1;
 		}
-		function we(e) {
+		function be(e) {
 			e.disabled || N("select", e);
 		}
-		function Te(e) {
-			let t = k(Y.value, e);
-			return t !== Y.value && (Y.value = t), () => {
-				Y.value = Y.value.filter((t) => String(t.value) !== String(e.value));
+		function xe(e) {
+			let t = k(X.value, e);
+			return t !== X.value && (X.value = t), () => {
+				X.value = X.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function Ee(e) {
-			return (q.value ? Y.value : K.value).findIndex((t) => String(t.value) === String(e));
+		function Se(e) {
+			return (J.value ? X.value : q.value).findIndex((t) => String(t.value) === String(e));
 		}
-		D(Y, (e) => {
-			q.value && N("registered-options-change", e);
+		E(X, (e) => {
+			J.value && N("registered-options-change", e);
 		}, { deep: !0 });
-		let De = l(() => ({
-			getOptionIndex: Ee,
-			registerOption: Te,
-			onSelect: we,
+		let Ce = c(() => ({
+			getOptionIndex: Se,
+			registerOption: xe,
+			onSelect: be,
 			listboxId: F.listboxId,
-			isSelected: X,
-			sizeClasses: ge.value,
+			isSelected: Z,
+			sizeClasses: fe.value,
 			showCheckmark: F.showCheckmark,
-			checkClass: Ce.value,
+			checkClass: ye.value,
 			highlightedIndex: F.highlightedIndex,
-			optionHoverClass: ve.value,
-			optionSelectedClass: be.value,
-			optionHighlightedClass: xe.value,
+			optionHoverClass: me.value,
+			optionSelectedClass: ge.value,
+			optionHighlightedClass: _e.value,
 			mergedClasses: {
-				optionHover: W.value.optionHover,
-				optionSelected: W.value.optionSelected,
-				optionHighlighted: W.value.optionHighlighted
+				optionHover: G.value.optionHover,
+				optionSelected: G.value.optionSelected,
+				optionHighlighted: G.value.optionHighlighted
 			}
 		}));
-		ie(ee, De);
-		let Oe = l(() => de(G.value, X)), ke = l(() => z.value.customProps?.menu), Ae = l(() => z.value.customProps?.modal), je = l(() => z.value.customProps?.drawer), Me = l(() => z.value.customProps?.list), Ne = l(() => z.value.customProps?.listItem), Pe = l(() => z.value.customProps?.progress), Fe = l(() => z.value.customProps?.listSection), Ie = l(() => ({
-			modal: Ae.value,
-			drawer: je.value,
+		x(o, Ce);
+		let we = c(() => O(K.value, Z)), Te = c(() => z.value.customProps?.menu), Ee = c(() => z.value.customProps?.modal), De = c(() => z.value.customProps?.drawer), Oe = c(() => z.value.customProps?.list), ke = c(() => z.value.customProps?.listItem), Ae = c(() => z.value.customProps?.progress), je = c(() => z.value.customProps?.listSection), Me = c(() => ({
+			modal: Ee.value,
+			drawer: De.value,
 			menu: {
 				anchorEl: F.anchorEl,
 				placement: F.placement,
 				disableAutoFocus: F.disableAutoFocus,
 				...ce(F.rounded) ? {} : { rounded: F.rounded },
-				...ke.value
+				...Te.value
 			}
-		})), Z = l(() => ({
+		})), Ne = c(() => ({
 			size: "xs",
 			"aria-hidden": !0,
 			color: z.value.color,
-			...n(Pe.value, {
+			...n(Ae.value, {
 				class: "shrink-0",
-				classes: { bar: W.value.loading }
+				classes: { bar: G.value.loading }
 			})
-		})), Le = l(() => ({
+		})), Pe = c(() => ({
 			role: "listbox",
 			id: F.listboxId,
 			"aria-labelledby": F.labelledBy,
 			"aria-multiselectable": F.multiple || void 0,
-			...n(Me.value)
+			...n(Oe.value)
 		}));
 		function Q() {
 			N("apply"), P.value = !1;
@@ -152,29 +152,29 @@ var j = { key: 1 }, M = /*@__PURE__*/ g({
 		function $() {
 			N("cancel"), P.value = !1;
 		}
-		return (e, n) => (S(), u(T(a), {
+		return (e, n) => (b(), l(T(i), {
 			modelValue: P.value,
 			"onUpdate:modelValue": n[0] ||= (e) => P.value = e,
-			overlay: g.overlay,
-			"custom-props": Ie.value
+			overlay: m.overlay,
+			"custom-props": Me.value
 		}, {
-			default: O(() => [p("div", { class: b(T(he)) }, [
-				T(t)(T(M), "beforeOptions") ? C(e.$slots, "beforeOptions", {}, void 0, void 0, 0) : d("", !0),
-				g.loading ? (S(), f(c, { key: 1 }, [h(T(s), x(_(Z.value)), null, 16), p("div", x(_(T(U))), [T(t)(T(M), "loading") ? C(e.$slots, "loading", {}, void 0, void 0, 0) : (S(), f("span", j, w(R.value), 1))], 16)], 64)) : (S(), f("div", x(y({ key: 2 }, T(V))), [h(T(o), x(_(Le.value)), {
-					default: O(() => [q.value ? C(e.$slots, "default", {}, void 0, void 0, 0) : (S(!0), f(c, { key: 1 }, oe(Oe.value, (n) => (S(), f(c, { key: n.key }, [n.kind === "section" ? (S(), u(T(ne), y({
+			default: D(() => [f("div", { class: v(T(de)) }, [
+				T(t)(T(M), "beforeOptions") ? C(e.$slots, "beforeOptions", {}, void 0, void 0, 0) : u("", !0),
+				m.loading ? (b(), d(s, { key: 1 }, [p(T(re), y(h(Ne.value)), null, 16), f("div", y(h(T(W))), [T(t)(T(M), "loading") ? C(e.$slots, "loading", {}, void 0, void 0, 0) : (b(), d("span", j, w(R.value), 1))], 16)], 64)) : (b(), d("div", y(_({ key: 2 }, T(V))), [p(T(a), y(h(Pe.value)), {
+					default: D(() => [J.value ? C(e.$slots, "default", {}, void 0, void 0, 0) : (b(!0), d(s, { key: 1 }, ae(we.value, (n) => (b(), d(s, { key: n.key }, [n.kind === "section" ? (b(), l(T(ne), _({
 						key: 0,
 						title: n.title,
 						sticky: n.sticky
-					}, { ref_for: !0 }, Fe.value), null, 16, ["title", "sticky"])) : (S(), u(T(te), y({
+					}, { ref_for: !0 }, je.value), null, 16, ["title", "sticky"])) : (b(), l(T(te), _({
 						key: 1,
 						interactive: "",
 						value: n.option.value,
 						disabled: n.option.disabled,
 						secondary: n.option.description,
 						primary: T(t)(T(M), "option") ? void 0 : n.option.label
-					}, { ref_for: !0 }, Ne.value), re({ _: 2 }, [T(t)(T(M), "option") ? {
+					}, { ref_for: !0 }, ke.value), ie({ _: 2 }, [T(t)(T(M), "option") ? {
 						name: "default",
-						fn: O(() => [C(e.$slots, "option", {
+						fn: D(() => [C(e.$slots, "option", {
 							option: n.option,
 							selected: n.selected
 						})]),
@@ -187,21 +187,19 @@ var j = { key: 1 }, M = /*@__PURE__*/ g({
 					]))], 64))), 128))]),
 					_: 3
 				}, 16)], 16)),
-				J.value && !T(t)(T(M), "empty") ? (S(), f("div", x(y({ key: 3 }, T(U))), w(L.value), 17)) : J.value && T(t)(T(M), "empty") ? C(e.$slots, "empty", {}, void 0, void 0, 4) : d("", !0),
-				T(t)(T(M), "afterOptions") ? C(e.$slots, "afterOptions", {}, void 0, void 0, 5) : d("", !0),
-				T(fe) ? (S(), f("div", x(y({ key: 6 }, T(H))), [C(e.$slots, "footer", {
+				Y.value && !T(t)(T(M), "empty") ? (b(), d("div", y(_({ key: 3 }, T(W))), w(L.value), 17)) : Y.value && T(t)(T(M), "empty") ? C(e.$slots, "empty", {}, void 0, void 0, 4) : u("", !0),
+				T(t)(T(M), "afterOptions") ? C(e.$slots, "afterOptions", {}, void 0, void 0, 5) : u("", !0),
+				T(U) ? (b(), d("div", y(_({ key: 6 }, T(H))), [C(e.$slots, "footer", {
 					apply: Q,
 					cancel: $
-				}, () => [h(T(i), y({
-					variant: "flat",
-					color: "secondary"
-				}, T(ye), { onClick: $ }), {
-					default: O(() => [m(w(T(me)), 1)]),
-					_: 1
-				}, 16), h(T(i), y({ color: "primary" }, T(_e), { onClick: Q }), {
-					default: O(() => [m(w(T(pe)), 1)]),
-					_: 1
-				}, 16)])], 16)) : d("", !0)
+				}, () => [p(T(ee), {
+					onApply: Q,
+					onCancel: $,
+					"custom-props": {
+						applyButton: T(pe),
+						cancelButton: T(he)
+					}
+				}, null, 8, ["custom-props"])])], 16)) : u("", !0)
 			], 2)]),
 			_: 3
 		}, 8, [

package/dist/Components/Listbox/composables/useListbox.d.ts

@@ -9,8 +9,6 @@ export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxL
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
-    applyLabel: import('vue').ComputedRef<string>;
-    cancelLabel: import('vue').ComputedRef<string>;
     messageBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
     surfaceBind: import('vue').ComputedRef<string>;
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').ListboxSizeOverlayItem | undefined>;

package/dist/Components/Listbox/composables/useListbox.js

@@ -1,13 +1,12 @@
-import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
-import { useBreakpoint as t } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i, useFieldShowFooter as a } from "../../../Utils/index.js";
-import { computed as o, useAttrs as s } from "vue";
-import { get as c } from "es-toolkit/compat";
-import { isFieldOverlayDialog as l, resolveFieldOverlay as u } from "@bridge-ui/core/Domain";
-import { listboxColorProps as d, listboxRoundedProps as f, listboxSizeProps as p } from "@bridge-ui/core/Tokens";
-import { cn as m, getColorToken as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { useBreakpoint as e } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r, useFieldShowFooter as i } from "../../../Utils/index.js";
+import { computed as a, useAttrs as o } from "vue";
+import { get as s } from "es-toolkit/compat";
+import { isFieldOverlayDialog as c, resolveFieldOverlay as l } from "@bridge-ui/core/Domain";
+import { listboxColorProps as u, listboxRoundedProps as d, listboxSizeProps as f } from "@bridge-ui/core/Tokens";
+import { cn as p, getColorToken as m, mergeBridgeUILayeredClasses as h, splitComponentProps as g } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/composables/useListbox.ts
-var v = [
+var _ = [
 	"size",
 	"color",
 	"error",
@@ -17,78 +16,76 @@ var v = [
 	"customProps",
 	"disableMaxHeight"
 ];
-function y(y, b) {
-	let x = s(), S = t(), C = e(), w = o(() => _({
+function v(v, y) {
+	let b = o(), x = e(), S = a(() => g({
 		props: {
-			...x,
-			...y
+			...b,
+			...v
 		},
-		bridgeKeys: v
-	})), { merged: T, entry: E } = r({
-		libDefaults: b,
+		bridgeKeys: _
+	})), { merged: C, entry: w } = n({
+		libDefaults: y,
 		componentName: "Listbox",
-		props: () => w.value.componentProps
-	}), D = i({
-		entry: E,
-		props: () => w.value.componentProps
-	}), O = o(() => T.value.customProps), k = o(() => u(y.overlay, S.mobile)), A = o(() => l(k.value)), j = o(() => k.value === "drawer"), M = a({
-		overlay: k,
+		props: () => S.value.componentProps
+	}), T = r({
+		entry: w,
+		props: () => S.value.componentProps
+	}), E = a(() => C.value.customProps), D = a(() => l(v.overlay, x.mobile)), O = a(() => c(D.value)), k = a(() => D.value === "drawer"), A = i({
+		overlay: D,
 		componentName: "Listbox",
-		showFooter: () => T.value.showFooter
-	}), N = o(() => {
-		let e = g(d, E.value?.tokens?.color);
-		return h({
+		showFooter: () => C.value.showFooter
+	}), j = a(() => {
+		let e = h(u, w.value?.tokens?.color);
+		return m({
 			tokens: e,
-			color: T.value.color,
-			invalid: T.value.error
+			color: C.value.color,
+			invalid: C.value.error
 		});
-	}), P = o(() => {
-		let e = g(f, E.value?.tokens?.rounded);
-		return c(e, y.rounded ?? "md");
-	}), F = o(() => {
-		let e = g(p, E.value?.tokens?.size), t = c(e, T.value.size ?? "md"), n = A.value ? "panel" : "menu";
-		return c(t, n);
-	}), I = o(() => N.value?.selected), L = o(() => N.value?.highlighted), R = o(() => N.value?.hover), z = o(() => m(F.value?.check, N.value?.check)), B = o(() => {
-		let e = T.value.maxHeight ?? (A.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = T.value.disableMaxHeight === !0;
-		return n(T.value.customProps?.scroll, {}, m({
-			"min-h-0 overflow-y-auto overscroll-contain bridge-soft-scrollbar": !t,
-			[e]: !t,
-			[D.value.scroll ?? ""]: !0
+	}), M = a(() => {
+		let e = h(d, w.value?.tokens?.rounded);
+		return s(e, v.rounded ?? "md");
+	}), N = a(() => {
+		let e = h(f, w.value?.tokens?.size), t = s(e, C.value.size ?? "md"), n = O.value ? "panel" : "menu";
+		return s(t, n);
+	}), P = a(() => j.value?.selected), F = a(() => j.value?.highlighted), I = a(() => j.value?.hover), L = a(() => p(N.value?.check, j.value?.check)), R = a(() => {
+		let e = C.value.maxHeight ?? (O.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), n = C.value.disableMaxHeight === !0;
+		return t(C.value.customProps?.scroll, {}, p({
+			"min-h-0 overflow-y-auto overscroll-contain bridge-soft-scrollbar": !n,
+			[e]: !n,
+			[T.value.scroll ?? ""]: !0
 		}));
-	}), V = o(() => n({}, {}, m({
+	}), z = a(() => t({}, {}, p({
 		"text-dark-500": !0,
-		[F.value?.message ?? ""]: !0
-	}))), H = o(() => {
-		let e = P.value;
-		if (e) return m({
+		[N.value?.message ?? ""]: !0
+	}))), B = a(() => {
+		let e = M.value;
+		if (e) return p({
 			[e]: !0,
-			"rounded-b-none": j.value
+			"rounded-b-none": k.value
 		});
-	}), U = o(() => m({
+	}), V = a(() => p({
 		"flex w-full flex-col overflow-hidden bg-white text-dark-900 shadow-lg outline-hidden ring-1 ring-black/5 dark:bg-dark-800 dark:text-dark-100 dark:ring-white/10": !0,
-		[String(H.value ?? "")]: !!H.value
+		[String(B.value ?? "")]: !!B.value
 	}));
 	return {
-		merged: T,
-		checkClass: z,
-		scrollBind: B,
-		footerBind: o(() => n(O.value?.footer, {}, m({
+		merged: C,
+		checkClass: L,
+		scrollBind: R,
+		footerBind: a(() => t(E.value?.footer, {}, p({
 			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-			[D.value.footer ?? ""]: !0
+			[T.value.footer ?? ""]: !0
 		}))),
-		showFooter: M,
-		applyLabel: o(() => C("Apply")),
-		cancelLabel: o(() => C("Cancel")),
-		messageBind: V,
-		surfaceBind: U,
-		sizeClasses: F,
-		mergedClasses: D,
-		applyButtonProps: o(() => O.value?.applyButton),
-		optionHoverClass: R,
-		cancelButtonProps: o(() => O.value?.cancelButton),
-		optionSelectedClass: I,
-		optionHighlightedClass: L
+		showFooter: A,
+		messageBind: z,
+		surfaceBind: V,
+		sizeClasses: N,
+		mergedClasses: T,
+		applyButtonProps: a(() => E.value?.applyButton),
+		optionHoverClass: I,
+		cancelButtonProps: a(() => E.value?.cancelButton),
+		optionSelectedClass: P,
+		optionHighlightedClass: F
 	};
 }
 //#endregion
-export { v as listboxBridgeKeys, y as useListbox };
+export { _ as listboxBridgeKeys, v as useListbox };