@bridge-ui/vue 0.5.0 → 0.6.0

package/dist/Components/FieldOverlay/composables/useFieldOverlay.js

@@ -23,7 +23,10 @@ function s(a) {
 				...e,
 				classes: {
 					...e?.classes,
-					content: i(e?.classes?.content, "overflow-visible rounded-none bg-transparent shadow-none ring-0 dark:bg-transparent")
+					content: i({
+						[e?.classes?.content ?? ""]: !0,
+						"overflow-visible rounded-none bg-transparent shadow-none ring-0 dark:bg-transparent": !0
+					})
 				}
 			};
 		}),

package/dist/Components/List/composables/useList.js

@@ -30,7 +30,7 @@ function f(f) {
 	return {
 		merged: h,
 		rootBind: i(() => e(_.value?.root, b.value, { class: l({
-			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
+			"m-0 flex list-none flex-col gap-0.5 p-1 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[s(v.value, "root") ?? ""]: !0
 		}) }))

package/dist/Components/ListItem/ListItem.vue.d.ts

@@ -4,9 +4,9 @@ declare const __VLS_base: import('vue').DefineComponent<ListItemOwnProps, {}, {}
     role: "button" | "option" | "menuitem";
     disabled: boolean;
     as: "li" | "div";
+    selected: boolean;
     divider: boolean;
     interactive: boolean;
-    selected: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/Components/ListItem/composables/useListItem.d.ts

@@ -11,7 +11,7 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
         id: string | undefined;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "disabled" | "as" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "disabled" | "as" | "selected" | "dense" | "divider" | "interactive" | "selectedIcon">, never>>>;
     rowClass: import('vue').ComputedRef<string>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     hasPrimary: import('vue').ComputedRef<boolean>;
@@ -30,8 +30,8 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
         class: string;
     } & object & Record<"class", string>) | null>;
     selectedIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
-        size: "sm";
         class: string;
+        size?: "sm" | undefined;
     }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
     resolvedSelectedIcon: import('vue').ComputedRef<IconSource | null>;
 };

package/dist/Components/ListItem/composables/useListItem.js

@@ -4,10 +4,11 @@ import { getListboxOptionId as i } from "../../Listbox/composables/useListboxNav
 import { LIST_INJECTION_KEY as a } from "../../List/listInjectionKey.js";
 import { LISTBOX_INJECTION_KEY as o } from "../../Listbox/listboxInjectionKey.js";
 import { computed as s, getCurrentInstance as c, inject as l, onBeforeUnmount as u, toValue as d, useAttrs as f, watch as p } from "vue";
-import { get as m, isNull as h, omit as g } from "es-toolkit/compat";
-import { cn as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
+import { get as m, isNil as h, isNull as g, omit as _ } from "es-toolkit/compat";
+import { listboxOptionFromComposedItem as v } from "@bridge-ui/core/Domain";
+import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
 //#region src/Components/ListItem/composables/useListItem.ts
-var y = [
+var x = [
 	"as",
 	"role",
 	"dense",
@@ -22,108 +23,122 @@ var y = [
 	"interactive",
 	"selectedIcon"
 ];
-function b(b, x, S) {
-	let C = f(), w = l(a, null), T = l(o, null), E = T != null, D = s(() => v({
+function S(S, C, w) {
+	let T = f(), E = l(a, null), D = l(o, null), O = !h(D), k = s(() => b({
 		props: {
-			...C,
-			...b
+			...T,
+			...S
 		},
-		bridgeKeys: y
-	})), { merged: O, entry: k } = n({
-		libDefaults: x,
+		bridgeKeys: x
+	})), { merged: A, entry: j } = n({
+		libDefaults: C,
 		componentName: "ListItem",
-		props: () => D.value.componentProps
-	}), A = s(() => T ? d(T) : null), j = s(() => O.value.value == null || !E ? null : {
-		value: O.value.value,
-		description: O.value.secondary,
-		disabled: !!O.value.disabled,
-		label: O.value.primary ?? String(O.value.value)
-	}), M;
+		props: () => k.value.componentProps
+	}), M = s(() => D ? d(D) : null), N = s(() => O ? v({
+		value: A.value.value,
+		primary: A.value.primary,
+		disabled: A.value.disabled,
+		secondary: A.value.secondary
+	}) : null), P;
 	p(() => {
-		let e = j.value;
+		let e = N.value;
 		return e ? `${String(e.value)}:${e.label}:${e.disabled}:${e.description ?? ""}` : null;
 	}, () => {
-		M?.(), M = void 0;
-		let e = j.value;
-		!e || !T || (M = d(T).registerOption(e));
+		P?.(), P = void 0;
+		let e = N.value;
+		!e || !D || (P = d(D).registerOption(e));
 	}, { immediate: !0 }), u(() => {
-		M?.();
+		P?.();
 	});
-	let N = s(() => j.value != null), P = s(() => !j.value || !A.value ? !1 : A.value.isSelected(j.value.value)), F = s(() => !j.value || !A.value ? -1 : A.value.getOptionIndex(j.value.value)), I = s(() => !A.value || F.value < 0 ? !1 : A.value.highlightedIndex === F.value), L = s(() => O.value.customProps), R = r({
-		entry: k,
-		props: () => D.value.componentProps
-	}), z = s(() => "dense" in (c()?.vnode.props ?? {}) ? b.dense === !0 : b.dense === !0 ? !0 : w ? d(w).dense : !1), B = s(() => e(S, "primary") || e(S, "default") || !!O.value.primary), V = s(() => e(S, "secondary") || !!O.value.secondary), H = s(() => N.value ? !P.value || !A.value?.showCheckmark ? null : "check" : !O.value.selected || h(O.value.selectedIcon) ? null : O.value.selectedIcon ?? "check"), U = s(() => e(S, "end") || H.value != null), W = s(() => g(D.value.inheritedAttrs, [])), G = s(() => t(L.value?.root, W.value, {
-		class: _({
+	let F = s(() => !h(N.value)), I = s(() => !N.value || !M.value ? !1 : M.value.isSelected(N.value.value)), L = s(() => !N.value || !M.value ? -1 : M.value.getOptionIndex(N.value.value)), R = s(() => !M.value || L.value < 0 ? !1 : M.value.highlightedIndex === L.value), z = s(() => A.value.customProps), B = r({
+		entry: j,
+		props: () => k.value.componentProps
+	}), V = s(() => "dense" in (c()?.vnode.props ?? {}) ? S.dense === !0 : S.dense === !0 ? !0 : E ? d(E).dense : !1), H = s(() => e(w, "primary") || e(w, "default") || !!A.value.primary), U = s(() => e(w, "secondary") || !!A.value.secondary), W = s(() => F.value ? !I.value || !M.value?.showCheckmark ? null : "check" : !A.value.selected || g(A.value.selectedIcon) ? null : A.value.selectedIcon ?? "check"), G = s(() => e(w, "end") || W.value != null), K = s(() => _(k.value.inheritedAttrs, [])), q = s(() => t(z.value?.root, K.value, {
+		class: y({
 			"list-none": !0,
-			"border-b border-black/10 last:border-b-0 dark:border-white/10": O.value.divider,
-			[m(R.value, "root") ?? ""]: !0
+			"border-b border-black/10 last:border-b-0 dark:border-white/10": A.value.divider,
+			[m(B.value, "root") ?? ""]: !0
 		}),
-		id: N.value && A.value?.listboxId && F.value >= 0 ? i(A.value.listboxId, F.value) : void 0
-	})), K = s(() => O.value.interactive || N.value ? t(L.value?.interactive, {}, {
-		"aria-disabled": O.value.disabled ? !0 : void 0,
-		role: N.value ? "option" : O.value.role,
-		tabindex: O.value.disabled || N.value ? -1 : 0,
-		"data-selected": O.value.selected || P.value ? !0 : void 0,
-		"aria-selected": N.value ? P.value : void 0,
-		onMousedown: N.value ? (e) => {
+		id: F.value && M.value?.listboxId && L.value >= 0 ? i(M.value.listboxId, L.value) : void 0
+	})), J = s(() => !!(A.value.interactive || F.value)), Y = s(() => J.value ? t(z.value?.interactive, {}, {
+		"aria-disabled": A.value.disabled ? !0 : void 0,
+		role: F.value ? "option" : A.value.role,
+		tabindex: A.value.disabled || F.value ? -1 : 0,
+		"data-selected": A.value.selected || I.value ? !0 : void 0,
+		"aria-selected": F.value ? I.value : void 0,
+		onMousedown: F.value ? (e) => {
 			e.preventDefault();
 		} : void 0,
-		onClick: N.value ? () => {
-			j.value && A.value?.onSelect(j.value);
+		onClick: F.value ? () => {
+			N.value && M.value?.onSelect(N.value);
 		} : void 0,
-		class: _({
-			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
-			"cursor-pointer select-none": !O.value.disabled,
-			"px-4": !0,
-			"py-2": !z.value,
-			"py-1.5": z.value,
-			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !O.value.disabled && !N.value,
-			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": O.value.selected && !N.value,
-			[A.value?.optionHoverClass ?? ""]: N.value && !O.value.disabled && !P.value,
-			[A.value?.mergedClasses.optionHover ?? ""]: N.value && !O.value.disabled && !P.value,
-			[A.value?.optionSelectedClass ?? ""]: N.value && P.value,
-			[A.value?.mergedClasses.optionSelected ?? ""]: N.value && P.value,
-			[A.value?.optionHighlightedClass ?? ""]: N.value && I.value && !P.value,
-			[A.value?.mergedClasses.optionHighlighted ?? ""]: N.value && I.value && !P.value,
-			"opacity-50 pointer-events-none": O.value.disabled,
-			[m(R.value, "interactive") ?? ""]: !0,
-			[A.value?.sizeClasses?.option ?? ""]: !0
+		class: y({
+			"flex w-full min-w-0 items-center gap-x-2 rounded-md text-left text-sm text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
+			"cursor-pointer select-none": !A.value.disabled,
+			"px-2": !F.value,
+			"py-1.5": !F.value && !V.value,
+			"py-1": !F.value && V.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !A.value.disabled && !F.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": A.value.selected && !F.value,
+			[M.value?.optionHoverClass ?? ""]: F.value && !A.value.disabled && !I.value,
+			[M.value?.mergedClasses.optionHover ?? ""]: F.value && !A.value.disabled && !I.value,
+			[M.value?.optionSelectedClass ?? ""]: F.value && I.value,
+			[M.value?.mergedClasses.optionSelected ?? ""]: F.value && I.value,
+			[M.value?.optionHighlightedClass ?? ""]: F.value && R.value && !I.value,
+			[M.value?.mergedClasses.optionHighlighted ?? ""]: F.value && R.value && !I.value,
+			"opacity-50 pointer-events-none": A.value.disabled,
+			[m(B.value, "interactive") ?? ""]: !0,
+			[M.value?.sizeClasses?.option ?? ""]: F.value,
+			"leading-none": !0
 		})
-	}) : null), q = s(() => _({
-		"flex w-full min-w-0 gap-x-3": !0,
-		"items-center text-dark-900 dark:text-dark-100": !O.value.interactive,
-		"px-4": !O.value.interactive,
-		"py-2": !O.value.interactive && !z.value,
-		"py-1.5": !O.value.interactive && z.value
-	})), J = s(() => t(L.value?.start, {}, _({
-		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
-		[m(R.value, "start") ?? ""]: !0
-	}))), Y = s(() => t(L.value?.content, {}, _({
+	}) : null), X = s(() => y({
+		"flex w-full min-w-0 items-center gap-x-2 leading-none": !0,
+		"rounded-md text-dark-900 dark:text-dark-100": !J.value,
+		"px-2": !J.value,
+		"py-1.5": !J.value && !V.value,
+		"py-1": !J.value && V.value
+	})), Z = s(() => t(z.value?.start, {}, y({
+		"flex shrink-0 items-center text-dark-600 dark:text-dark-300": !0,
+		[m(B.value, "start") ?? ""]: !0
+	}))), Q = s(() => t(z.value?.content, {}, y({
 		"min-w-0 flex-1": !0,
-		[m(R.value, "content") ?? ""]: !0
-	}))), X = s(() => t(L.value?.primary, {}, _("block truncate text-sm font-medium", A.value?.sizeClasses?.primary, m(R.value, "primary")))), Z = s(() => t(L.value?.secondary, {}, _("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", A.value?.sizeClasses?.secondary, m(R.value, "secondary"))));
+		[m(B.value, "content") ?? ""]: !0
+	}))), $ = s(() => t(z.value?.primary, {}, y({
+		"block truncate text-sm font-medium": !0,
+		[M.value?.sizeClasses?.primary ?? ""]: F.value,
+		[m(B.value, "primary") ?? ""]: !0,
+		"leading-none": !0
+	}))), ee = s(() => t(z.value?.secondary, {}, y({
+		"mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400": !0,
+		[M.value?.sizeClasses?.secondary ?? ""]: F.value,
+		[m(B.value, "secondary") ?? ""]: !0
+	})));
 	return {
-		merged: O,
-		hasEnd: U,
-		endBind: s(() => t(L.value?.end, {}, _({
+		merged: A,
+		hasEnd: G,
+		endBind: s(() => t(z.value?.end, {}, y({
 			"ml-auto flex shrink-0 items-center": !0,
-			[m(R.value, "end") ?? ""]: !0
+			[m(B.value, "end") ?? ""]: !0
 		}))),
-		rootBind: G,
-		rowClass: q,
-		startBind: J,
-		hasPrimary: B,
-		contentBind: Y,
-		primaryBind: X,
-		hasSecondary: V,
-		secondaryBind: Z,
-		interactiveBind: K,
-		selectedIconBind: s(() => t(L.value?.selectedIcon, {}, {
-			size: "sm",
-			class: _("shrink-0", A.value?.checkClass, m(R.value, "selectedIcon"))
+		rootBind: q,
+		rowClass: X,
+		startBind: Z,
+		hasPrimary: H,
+		contentBind: Q,
+		primaryBind: $,
+		hasSecondary: U,
+		secondaryBind: ee,
+		interactiveBind: Y,
+		selectedIconBind: s(() => t(z.value?.selectedIcon, {}, {
+			...F.value ? {} : { size: "sm" },
+			class: y({
+				"block shrink-0": !0,
+				[M.value?.checkClass ?? ""]: F.value,
+				[m(B.value, "selectedIcon") ?? ""]: !0
+			})
 		})),
-		resolvedSelectedIcon: H
+		resolvedSelectedIcon: W
 	};
 }
 //#endregion
-export { b as useListItem };
+export { S as useListItem };

package/dist/Components/ListSection/composables/useListSection.js

@@ -1,11 +1,12 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as r } from "../../List/listInjectionKey.js";
-import { LIST_SECTION_INJECTION_KEY as i } from "../listSectionInjectionKey.js";
-import { computed as a, inject as o, toValue as s, useAttrs as c } from "vue";
-import { get as l, omit as u } from "es-toolkit/compat";
-import { cn as d, splitComponentProps as f } from "@bridge-ui/core/Utils";
+import { LISTBOX_INJECTION_KEY as i } from "../../Listbox/listboxInjectionKey.js";
+import { LIST_SECTION_INJECTION_KEY as a } from "../listSectionInjectionKey.js";
+import { computed as o, inject as s, toValue as c, useAttrs as l } from "vue";
+import { get as u, isNil as d, omit as f } from "es-toolkit/compat";
+import { cn as p, splitComponentProps as m } from "@bridge-ui/core/Utils";
 //#region src/Components/ListSection/composables/useListSection.ts
-var p = [
+var h = [
 	"as",
 	"inset",
 	"title",
@@ -13,40 +14,42 @@ var p = [
 	"classes",
 	"customProps"
 ];
-function m(m) {
-	let h = c(), g = o(r, null), _ = o(i, null), v = a(() => f({
+function g(g) {
+	let _ = l(), v = s(r, null), y = s(a, null), b = s(i, null), x = o(() => b ? c(b) : null), S = o(() => m({
 		props: {
-			...h,
-			...m
+			..._,
+			...g
 		},
-		bridgeKeys: p
-	})), { merged: y, entry: b } = t({
+		bridgeKeys: h
+	})), { merged: C, entry: w } = t({
 		componentName: "ListSection",
-		props: () => v.value.componentProps
-	}), x = a(() => y.value.customProps), S = n({
-		entry: b,
-		props: () => v.value.componentProps
-	}), C = a(() => g ? s(g).dense : !1), w = a(() => _ ? s(_).hidden : !1), T = a(() => u(v.value.inheritedAttrs, [])), E = a(() => y.value.as === "div");
+		props: () => S.value.componentProps
+	}), T = o(() => C.value.customProps), E = n({
+		entry: w,
+		props: () => S.value.componentProps
+	}), D = o(() => v ? c(v).dense : !1), O = o(() => y ? c(y).hidden : !1), k = o(() => f(S.value.inheritedAttrs, [])), A = o(() => C.value.as === "div");
 	return {
-		merged: y,
-		rootBind: a(() => e(x.value?.root, T.value, d({
-			"list-none": !0,
-			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
-			[l(S.value, "root") ?? ""]: !0
+		merged: C,
+		rootBind: o(() => e(T.value?.root, k.value, p({
+			"mt-1 list-none first:mt-0": !0,
+			"sticky top-0 z-10 bg-white dark:bg-dark-800": C.value.sticky && !A.value,
+			[u(E.value, "root") ?? ""]: !0
 		}))),
-		isHidden: w,
-		titleBind: a(() => e(x.value?.title, {}, {
+		isHidden: O,
+		titleBind: o(() => e(T.value?.title, {}, {
 			role: "presentation",
-			class: d({
-				"bg-white px-2 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
-				"sticky top-0 z-10": y.value.sticky && E.value,
-				"py-2": !C.value,
-				"py-1.5": C.value,
-				"pl-14": y.value.inset,
-				[l(S.value, "title") ?? ""]: !0
+			class: p({
+				"sticky top-0 z-10 bg-white dark:bg-dark-800": C.value.sticky && A.value,
+				"px-2": d(b),
+				"py-1": d(b) && D.value,
+				"py-1.5": d(b) && !D.value,
+				[x.value?.sizeClasses?.option ?? ""]: !d(b),
+				"text-xs font-medium text-dark-500 dark:text-dark-400": !0,
+				"pl-14": C.value.inset,
+				[u(E.value, "title") ?? ""]: !0
 			})
 		}))
 	};
 }
 //#endregion
-export { m as useListSection };
+export { g as useListSection };

package/dist/Components/ListSection/listSection.types.d.ts

@@ -64,7 +64,8 @@ export interface ListSectionOwnProps {
 }
 export interface ListSectionSlots {
     /**
-     * Section label content. Overrides `title` when provided.
+     * Section label content. Overrides `title` when provided. Nested items
+     * belong as siblings of `ListSection`, not inside this slot.
      */
     default?: Slot<undefined>;
 }