diff --git a/bun.lock b/bun.lock index bcdb3d8e..6342adaa 100644 --- a/bun.lock +++ b/bun.lock @@ -688,7 +688,7 @@ }, "packages/ui": { "name": "@wrnexus/ui", - "version": "0.8.46", + "version": "0.8.47", "dependencies": { "@wrnexus/core": "workspace:*", }, diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md index d894cc90..b82607da 100644 --- a/packages/ui/COMPONENTS.md +++ b/packages/ui/COMPONENTS.md @@ -799,7 +799,7 @@ Provide a responsive floating control that returns long pages to the top and can Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events. - Mount: `data-component="Breadcrumb"` -- Props: `label: string = "Breadcrumb"`, `items: unknown[] = []`, `active: string = ""`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""` +- Props: `label: string = "Breadcrumb"`, `items: unknown[] = []`, `active: string = ""`, `activeIcon: string = "icon-[lucide--file-text]"`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""` - Slots: None - Outputs: `select({ value?: string | number | boolean | null; values?: Array; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)` diff --git a/packages/ui/components/Breadcrumb.wrn b/packages/ui/components/Breadcrumb.wrn index 3f601601..d9b5c38b 100644 --- a/packages/ui/components/Breadcrumb.wrn +++ b/packages/ui/components/Breadcrumb.wrn @@ -7,6 +7,7 @@ component Breadcrumb { label: string = "Breadcrumb" items: unknown[] = [] active: string = "" + activeIcon: string = "icon-[lucide--file-text]" separator: string = "chevron" showHome: boolean = false homeLabel: string = "Home" @@ -99,6 +100,30 @@ label: string = "Breadcrumb" {/if} {/each} + + {#if active && !items.some((item) => active === (item.value || item.label || item.title))} +
  • + {#if showHome || items.length > 0} + + {/if} + + {#if activeIcon} + + {/if} + {active} + +
  • + {/if} } diff --git a/packages/ui/package.json b/packages/ui/package.json index 946058fb..f0ce8bed 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.8.46", + "version": "0.8.47", "private": true, "type": "module", "main": "src/index.ts", diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts index da83dd10..cf3c8724 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -3169,6 +3169,21 @@ test("breadcrumb marks the trail end without emitting an empty aria-current", as expect(dom.querySelectorAll(".wrn-breadcrumb__item").length).toBeGreaterThanOrEqual(3); }); +test("breadcrumb renders a standalone active page with its icon", async () => { + const source = readFileSync(uiComponentPath("Breadcrumb"), "utf8"); + const html = await renderComponent(source, { + showHome: true, + items: [{ label: "Products", href: "/products", icon: "icon-[lucide--blocks]" }], + active: "CRM", + activeIcon: "icon-[lucide--contact-round]", + }); + expect(html).toContain("CRM"); + expect(html).toContain("icon-[lucide--contact-round]"); + expect(html).toMatch(/aria-current="page"/); + const dom = mountHtml(html); + expect(dom.querySelectorAll(".wrn-breadcrumb__item").length).toBe(3); +}); + test("mega menu bridges the gap between its trigger and panel", async () => { const source = readFileSync(uiComponentPath("MegaMenu"), "utf8"); /*