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

package/dist/Components/Listbox/collectComposedListboxOptions.d.ts

@@ -0,0 +1,5 @@
+import { ListboxOption } from '@bridge-ui/core/Domain';
+/**
+ * Walks composed `ListItem` vnodes and collects options from `value` / `primary`.
+ */
+export declare function collectComposedListboxOptions(nodes: unknown): ListboxOption[];

package/dist/Components/Listbox/collectComposedListboxOptions.js

@@ -0,0 +1,27 @@
+import { isArray as e, isFunction as t, isNil as n, isObjectLike as r } from "es-toolkit/compat";
+import { listboxOptionFromComposedItem as i } from "@bridge-ui/core/Domain";
+//#region src/Components/Listbox/collectComposedListboxOptions.ts
+function a(o) {
+	let s = [], c = e(o) ? o : n(o) ? [] : [o];
+	for (let n of c) {
+		if (!r(n)) continue;
+		let o = n, c = i({
+			value: o.props?.value,
+			primary: o.props?.primary,
+			disabled: o.props?.disabled,
+			secondary: o.props?.secondary
+		});
+		if (c && s.push(c), e(o.children)) {
+			s.push(...a(o.children));
+			continue;
+		}
+		let l = o.children;
+		if (r(l) && "default" in l) {
+			let e = l.default;
+			t(e) && s.push(...a(e()));
+		}
+	}
+	return s;
+}
+//#endregion
+export { a as collectComposedListboxOptions };

package/dist/Components/Radio/composables/useRadio.js

@@ -73,7 +73,8 @@ function v(v, y, b) {
 	return {
 		merged: w,
 		dotBind: i(() => e(E.value?.dot, {}, p({
-			"rounded-full bg-white transition-transform duration-100": !0,
+			"rounded-full transition-transform duration-100": !0,
+			[k.value?.dot ?? "bg-white"]: !0,
 			"scale-0": !O.value,
 			"scale-100": O.value,
 			"h-[42%] w-[42%]": !0,

package/dist/Components/Select/composables/useSelect.d.ts

@@ -729,7 +729,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
     listboxProps: import('vue').ComputedRef<{
         anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
-        color: "info" | "error" | "success" | "warning" | "dark" | "primary" | "secondary";
+        color: "info" | "error" | "success" | "warning" | "black" | "dark" | "primary" | "secondary";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;