@bridge-ui/vue 0.0.1-beta.4 → 0.0.1-beta.5

package/dist/Components/Divider/composables/useDivider.js

@@ -30,7 +30,7 @@ function f(f, p) {
 			role: "separator",
 			"aria-orientation": g.value.orientation,
 			class: o({
-				"m-0 shrink-0 border-0 border-solid": !0,
+				"m-0 shrink-0 border-0": !0,
 				[y.value ?? ""]: !0,
 				[b.value ?? ""]: !0,
 				[v.value.root ?? ""]: !0

package/dist/Components/ListItem/ListItem.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,9 @@
-import { resolveNamedSlot as e, resolveSlotOrProp as t } from "../../Utils/slotOrProp.js";
-import { resolveListItemPrimary as n, useListItem as r } from "./composables/useListItem.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, guardReactiveProps as u, mergeProps as d, normalizeClass as f, normalizeProps as p, openBlock as m, resolveDynamicComponent as h, unref as g, useSlots as _, withCtx as v } from "vue";
+import { hasNamedSlot as e, resolveNamedSlot as t, resolveSlotOrProp as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
+import { resolveListItemPrimary as i, useListItem as a } from "./composables/useListItem.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, resolveDynamicComponent as _, unref as v, useSlots as y, withCtx as b } from "vue";
 //#region src/Components/ListItem/ListItem.vue?vue&type=script&setup=true&lang.ts
-var y = /* @__PURE__ */ l({
+var x = /* @__PURE__ */ d({
 	inheritAttrs: !1,
 	__name: "ListItem",
 	props: {
@@ -29,29 +30,30 @@ var y = /* @__PURE__ */ l({
 		selected: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		selectedIcon: {}
 	},
-	setup(l) {
-		let y = _(), b = l, { merged: x, hasEnd: S, endBind: C, rootBind: w, rowClass: T, hasStart: E, startBind: D, hasPrimary: O, contentBind: k, primaryBind: A, hasSecondary: j, secondaryBind: M, interactiveBind: N } = r(b, {
+	setup(d) {
+		let x = y(), S = d, { merged: C, hasEnd: w, endBind: T, rootBind: E, rowClass: D, hasStart: O, startBind: k, hasPrimary: A, contentBind: j, primaryBind: M, hasSecondary: N, secondaryBind: P, interactiveBind: F, selectedIconBind: I, resolvedSelectedIcon: L } = a(S, {
 			role: "button",
 			align: "center"
-		}, y), P = i(() => x.value.as ?? "li"), F = i(() => n(y, b.primary)), I = i(() => t(y, "secondary", b.secondary));
-		return (t, n) => (m(), a(h(P.value), p(u(g(w))), {
-			default: v(() => [g(N) ? (m(), s("div", p(d({ key: 0 }, g(N))), [c("div", { class: f(g(T)) }, [
-				g(E) ? (m(), s("div", p(d({ key: 0 }, g(D))), [(m(), a(h(g(e)(g(y), "start"))))], 16)) : o("", !0),
-				c("div", p(u(g(k))), [g(O) ? (m(), s("span", p(d({ key: 0 }, g(A))), [(m(), a(h(F.value)))], 16)) : o("", !0), g(j) ? (m(), s("span", p(d({ key: 1 }, g(M))), [(m(), a(h(I.value)))], 16)) : o("", !0)], 16),
-				g(S) ? (m(), s("div", p(d({ key: 1 }, g(C))), [(m(), a(h(g(e)(g(y), "end"))))], 16)) : o("", !0)
-			], 2)], 16)) : (m(), s("div", {
+		}, x), R = o(() => C.value.as ?? "li"), z = o(() => i(x, S.primary)), B = o(() => n(x, "secondary", S.secondary)), V = o(() => e(x, "end"));
+		return (e, n) => (g(), s(_(R.value), h(f(v(E))), {
+			default: b(() => [v(F) ? (g(), l("div", h(p({ key: 0 }, v(F))), [u("div", { class: m(v(D)) }, [
+				v(O) ? (g(), l("div", h(p({ key: 0 }, v(k))), [(g(), s(_(v(t)(v(x), "start"))))], 16)) : c("", !0),
+				u("div", h(f(v(j))), [v(A) ? (g(), l("span", h(p({ key: 0 }, v(M))), [(g(), s(_(z.value)))], 16)) : c("", !0), v(N) ? (g(), l("span", h(p({ key: 1 }, v(P))), [(g(), s(_(B.value)))], 16)) : c("", !0)], 16),
+				v(w) ? (g(), l("div", h(p({ key: 1 }, v(T))), [V.value ? (g(), s(_(v(t)(v(x), "end")), { key: 0 })) : v(L) ? (g(), s(r, p({ key: 1 }, v(I), { icon: v(L) }), null, 16, ["icon"])) : c("", !0)], 16)) : c("", !0)
+			], 2)], 16)) : (g(), l("div", {
 				key: 1,
-				class: f(g(T))
+				class: m(v(D))
 			}, [
-				g(E) ? (m(), s("div", p(d({ key: 0 }, g(D))), [(m(), a(h(g(e)(g(y), "start"))))], 16)) : o("", !0),
-				c("div", p(u(g(k))), [g(O) ? (m(), s("span", p(d({ key: 0 }, g(A))), [(m(), a(h(F.value)))], 16)) : o("", !0), g(j) ? (m(), s("span", p(d({ key: 1 }, g(M))), [(m(), a(h(I.value)))], 16)) : o("", !0)], 16),
-				g(S) ? (m(), s("div", p(d({ key: 1 }, g(C))), [(m(), a(h(g(e)(g(y), "end"))))], 16)) : o("", !0)
+				v(O) ? (g(), l("div", h(p({ key: 0 }, v(k))), [(g(), s(_(v(t)(v(x), "start"))))], 16)) : c("", !0),
+				u("div", h(f(v(j))), [v(A) ? (g(), l("span", h(p({ key: 0 }, v(M))), [(g(), s(_(z.value)))], 16)) : c("", !0), v(N) ? (g(), l("span", h(p({ key: 1 }, v(P))), [(g(), s(_(B.value)))], 16)) : c("", !0)], 16),
+				v(w) ? (g(), l("div", h(p({ key: 1 }, v(T))), [V.value ? (g(), s(_(v(t)(v(x), "end")), { key: 0 })) : v(L) ? (g(), s(r, p({ key: 1 }, v(I), { icon: v(L) }), null, 16, ["icon"])) : c("", !0)], 16)) : c("", !0)
 			], 2))]),
 			_: 1
 		}, 16));
 	}
 });
 //#endregion
-export { y as default };
+export { x as default };

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

@@ -1,3 +1,4 @@
+import { LucideIcon } from '@lucide/vue';
 import { useSlots, Slot } from 'vue';
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { ListItemOwnProps, ListItemProps } from '../listItem.types';
@@ -11,7 +12,7 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
     }, "class", import('vue').HTMLAttributes | undefined, {}>>;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "align" | "divider" | "interactive" | "selected">, never>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "align" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
     rowClass: import('vue').ComputedRef<string>;
     hasStart: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
@@ -35,6 +36,11 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
         "data-selected": boolean | undefined;
         class: string;
     } & object & Record<"class", string>) | null>;
+    selectedIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        size: "sm";
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    resolvedSelectedIcon: import('vue').ComputedRef<LucideIcon | null>;
 };
 export declare function resolveListItemPrimary(slots: ReturnType<typeof useSlots>, primary?: string): Slot | (() => null | string);
 export {};

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

@@ -2,11 +2,12 @@ import { hasNamedSlot as e, isPropPresent as t, resolveNamedSlot as n } from "..
 import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
 import { LIST_INJECTION_KEY as o } from "../../List/listInjectionKey.js";
 import { computed as s, getCurrentInstance as c, inject as l, toValue as u, useAttrs as d } from "vue";
-import { get as f, omit as p } from "es-toolkit/compat";
-import { cn as m, mergeBridgeUILayeredClasses as h, splitComponentProps as g } from "@bridge-ui/core";
-import { alignProps as _ } from "@bridge-ui/core/Components/ListItem";
+import { get as f, isNull as p, omit as m } from "es-toolkit/compat";
+import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core";
+import { Check as v } from "@lucide/vue";
+import { alignProps as y } from "@bridge-ui/core/Components/ListItem";
 //#region src/Components/ListItem/composables/useListItem.ts
-var v = [
+var b = [
 	"as",
 	"role",
 	"align",
@@ -18,82 +19,91 @@ var v = [
 	"selected",
 	"secondary",
 	"customProps",
-	"interactive"
+	"interactive",
+	"selectedIcon"
 ];
-function y(t, n, y) {
-	let b = d(), x = l(o, null), S = s(() => g({
+function x(t, n, x) {
+	let S = d(), C = l(o, null), w = s(() => _({
 		props: {
-			...b,
+			...S,
 			...t
 		},
-		bridgeKeys: v
-	})), { merged: C, entry: w } = i({
+		bridgeKeys: b
+	})), { merged: T, entry: E } = i({
 		libDefaults: n,
 		componentName: "ListItem",
-		props: () => S.value.componentProps
-	}), T = s(() => C.value.customProps), E = a({
-		entry: w,
-		props: () => S.value.componentProps
-	}), D = s(() => "dense" in (c()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : x ? u(x).dense : !1), O = s(() => f(h(_, w.value?.customProps?.align), C.value.align)), k = s(() => e(y, "primary") || e(y, "default") || !!C.value.primary), A = s(() => e(y, "secondary") || !!C.value.secondary), j = s(() => e(y, "start")), M = s(() => e(y, "end")), N = s(() => p(S.value.inheritedAttrs, [])), P = s(() => r(T.value?.root, N.value, { class: m({
+		props: () => w.value.componentProps
+	}), D = s(() => T.value.customProps), O = a({
+		entry: E,
+		props: () => w.value.componentProps
+	}), k = s(() => "dense" in (c()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : C ? u(C).dense : !1), A = s(() => f(g(y, E.value?.customProps?.align), T.value.align)), j = s(() => e(x, "primary") || e(x, "default") || !!T.value.primary), M = s(() => e(x, "secondary") || !!T.value.secondary), N = s(() => e(x, "start")), P = s(() => !T.value.selected || p(T.value.selectedIcon) ? null : T.value.selectedIcon ?? v), F = s(() => e(x, "end") || P.value != null), I = s(() => m(w.value.inheritedAttrs, [])), L = s(() => r(D.value?.root, I.value, { class: h({
 		"list-none": !0,
-		"border-b border-black/10 last:border-b-0": C.value.divider,
-		[f(E.value, "root") ?? ""]: !0
-	}) })), F = s(() => C.value.interactive ? r(T.value?.interactive, {}, {
-		role: C.value.role,
-		tabindex: C.value.disabled ? -1 : 0,
-		"aria-disabled": C.value.disabled ? !0 : void 0,
-		"data-selected": C.value.selected ? !0 : void 0,
-		class: m({
+		"border-b border-black/10 last:border-b-0": T.value.divider,
+		[f(O.value, "root") ?? ""]: !0
+	}) })), R = s(() => T.value.interactive ? r(D.value?.interactive, {}, {
+		role: T.value.role,
+		tabindex: T.value.disabled ? -1 : 0,
+		"aria-disabled": T.value.disabled ? !0 : void 0,
+		"data-selected": T.value.selected ? !0 : void 0,
+		class: h({
 			"flex w-full min-w-0 gap-x-3 text-left outline-hidden transition-colors": !0,
-			"cursor-pointer select-none": !C.value.disabled,
+			"cursor-pointer select-none": !T.value.disabled,
 			"px-4": !0,
-			"py-2": !D.value,
-			"py-1.5": D.value,
-			"hover:bg-black/5 focus-visible:bg-black/5": !C.value.disabled,
-			"bg-primary-50 text-primary-700": C.value.selected,
-			"opacity-50 pointer-events-none": C.value.disabled,
-			[O.value ?? ""]: !0,
-			[f(E.value, "interactive") ?? ""]: !0
+			"py-2": !k.value,
+			"py-1.5": k.value,
+			"hover:bg-black/5 focus-visible:bg-black/5": !T.value.disabled,
+			"bg-primary-50 text-primary-700": T.value.selected,
+			"opacity-50 pointer-events-none": T.value.disabled,
+			[A.value ?? ""]: !0,
+			[f(O.value, "interactive") ?? ""]: !0
 		})
-	}) : null), I = s(() => m({
+	}) : null), z = s(() => h({
 		"flex w-full min-w-0 gap-x-3": !0,
-		"px-4": !C.value.interactive,
-		"py-2": !C.value.interactive && !D.value,
-		"py-1.5": !C.value.interactive && D.value,
-		[O.value ?? ""]: !C.value.interactive
-	})), L = s(() => r(T.value?.start, {}, { class: m({
+		"px-4": !T.value.interactive,
+		"py-2": !T.value.interactive && !k.value,
+		"py-1.5": !T.value.interactive && k.value,
+		[A.value ?? ""]: !T.value.interactive
+	})), B = s(() => r(D.value?.start, {}, { class: h({
 		"flex shrink-0": !0,
-		[f(E.value, "start") ?? ""]: !0
-	}) })), R = s(() => r(T.value?.content, {}, { class: m({
+		[f(O.value, "start") ?? ""]: !0
+	}) })), V = s(() => r(D.value?.content, {}, { class: h({
 		"min-w-0 flex-1": !0,
-		[f(E.value, "content") ?? ""]: !0
-	}) })), z = s(() => r(T.value?.primary, {}, { class: m({
+		[f(O.value, "content") ?? ""]: !0
+	}) })), H = s(() => r(D.value?.primary, {}, { class: h({
 		"block truncate text-sm font-medium": !0,
-		[f(E.value, "primary") ?? ""]: !0
-	}) })), B = s(() => r(T.value?.secondary, {}, { class: m({
+		[f(O.value, "primary") ?? ""]: !0
+	}) })), U = s(() => r(D.value?.secondary, {}, { class: h({
 		"mt-0.5 block truncate text-xs text-dark-500": !0,
-		[f(E.value, "secondary") ?? ""]: !0
+		[f(O.value, "secondary") ?? ""]: !0
 	}) }));
 	return {
-		merged: C,
-		hasEnd: M,
-		endBind: s(() => r(T.value?.end, {}, { class: m({
+		merged: T,
+		hasEnd: F,
+		endBind: s(() => r(D.value?.end, {}, { class: h({
 			"ml-auto flex shrink-0 items-center": !0,
-			[f(E.value, "end") ?? ""]: !0
+			[f(O.value, "end") ?? ""]: !0
 		}) })),
-		rootBind: P,
-		rowClass: I,
-		hasStart: j,
-		startBind: L,
-		hasPrimary: k,
-		contentBind: R,
-		primaryBind: z,
-		hasSecondary: A,
-		secondaryBind: B,
-		interactiveBind: F
+		rootBind: L,
+		rowClass: z,
+		hasStart: N,
+		startBind: B,
+		hasPrimary: j,
+		contentBind: V,
+		primaryBind: H,
+		hasSecondary: M,
+		secondaryBind: U,
+		interactiveBind: R,
+		selectedIconBind: s(() => r(D.value?.selectedIcon, {}, {
+			size: "sm",
+			class: h({
+				"shrink-0": !0,
+				[f(O.value, "selectedIcon") ?? ""]: !0
+			})
+		})),
+		resolvedSelectedIcon: P
 	};
 }
-function b(r, i) {
+function S(r, i) {
 	if (e(r, "primary")) return n(r, "primary");
 	if (e(r, "default")) return n(r, "default");
 	if (!t(i)) return () => null;
@@ -101,4 +111,4 @@ function b(r, i) {
 	return () => a;
 }
 //#endregion
-export { b as resolveListItemPrimary, y as useListItem };
+export { S as resolveListItemPrimary, x as useListItem };

package/dist/Components/ListItem/listItem.types.d.ts

@@ -1,5 +1,7 @@
+import { LucideIcon } from '@lucide/vue';
 import { HTMLAttributes, Slot, VNode } from 'vue';
 import { ListItemAlign, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { IconProps } from '../Icon';
 export interface ListItemAlignOverrides {}
 export interface ListItemClasses {
     /**
@@ -26,6 +28,10 @@ export interface ListItemClasses {
      * The classes to apply to the secondary text.
      */
     secondary?: string;
+    /**
+     * The classes to apply to the selected icon.
+     */
+    selectedIcon?: string;
     /**
      * The classes to apply to the leading slot.
      */
@@ -56,6 +62,10 @@ export interface ListItemCustomProps {
      * Props forwarded to the secondary text.
      */
     secondary?: HTMLAttributes;
+    /**
+     * Props forwarded to the default selected `Icon` (`icon` is set by the item).
+     */
+    selectedIcon?: Partial<Omit<IconProps, "icon">>;
     /**
      * Props forwarded to the leading slot wrapper.
      */
@@ -137,6 +147,13 @@ export interface ListItemOwnProps {
      * @default false
      */
     selected?: boolean;
+    /**
+     * The icon shown when `selected` is true. Use `null` to hide it.
+     * The `end` slot replaces this icon when provided.
+     *
+     * @default Check
+     */
+    selectedIcon?: null | LucideIcon;
 }
 export type ListItemPrimaryContent = VNode | string | VNode[] | undefined;
 export interface ListItemSlots {

package/dist/augments.d.ts

@@ -82,7 +82,7 @@ declare module "@bridge-ui/core" {
     }
     interface ListItemConfigOverrides {
         classes: ListItemClasses;
-        defaultProps: Partial<Pick<ListItemProps, "role" | "align">>;
+        defaultProps: Partial<Pick<ListItemProps, "role" | "align" | "selectedIcon">>;
     }
     interface ListSectionConfigOverrides {
         classes: ListSectionClasses;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.5",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -60,7 +60,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@bridge-ui/core": "^0.0.1-beta.4",
+    "@bridge-ui/core": "^0.0.1-beta.5",
     "@lucide/vue": ">=1.0.0",
     "vue": "^3.4.0"
   },