@nuralyui/breadcrumb 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/breadcrumb.component.d.ts +1 -1
- package/breadcrumb.component.js +1 -1
- package/breadcrumb.component.js.map +1 -1
- package/breadcrumb.style.d.ts +0 -0
- package/breadcrumb.style.js +0 -0
- package/breadcrumb.style.js.map +0 -0
- package/breadcrumb.types.d.ts +0 -0
- package/breadcrumb.types.js +0 -0
- package/breadcrumb.types.js.map +0 -0
- package/bundle.js +1 -1
- package/index.d.ts +0 -0
- package/index.js +0 -0
- package/index.js.map +0 -0
- package/package.json +4 -4
- package/react.d.ts +0 -0
- package/react.js +0 -0
- package/react.js.map +0 -0
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { LitElement, nothing, TemplateResult } from 'lit';
|
|
7
7
|
import { BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSeparatorConfig } from './breadcrumb.types.js';
|
|
8
8
|
import '../icon/index.js';
|
|
9
|
-
declare const NrBreadcrumbElement_base: (new (...args: any[]) => import("
|
|
9
|
+
declare const NrBreadcrumbElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
10
10
|
/**
|
|
11
11
|
* # Breadcrumb Component
|
|
12
12
|
*
|
package/breadcrumb.component.js
CHANGED
|
@@ -13,7 +13,7 @@ import { html, LitElement, nothing } from 'lit';
|
|
|
13
13
|
import { customElement, property } from 'lit/decorators.js';
|
|
14
14
|
import { map } from 'lit/directives/map.js';
|
|
15
15
|
import { styles } from './breadcrumb.style.js';
|
|
16
|
-
import { NuralyUIBaseMixin } from '
|
|
16
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
17
17
|
import '../icon/index.js';
|
|
18
18
|
/**
|
|
19
19
|
* # Breadcrumb Component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb.component.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { styles } from './breadcrumb.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n BreadcrumbItem,\n BreadcrumbMenuItem,\n BreadcrumbSeparator,\n BreadcrumbSeparatorConfig\n} from './breadcrumb.types.js';\nimport '../icon/index.js';\n\n/**\n * # Breadcrumb Component\n * \n * Display the current location within a hierarchy and allow navigation back to higher levels.\n * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.\n * \n * ## Features\n * - Configurable separator styles (slash, arrow, chevron, etc.)\n * - Support for icons alongside text\n * - Dropdown menus for complex hierarchies\n * - Clickable links with href or custom click handlers\n * - RTL support\n * - Fully accessible with keyboard navigation\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic breadcrumb -->\n * <nr-breadcrumb .items=\"${[\n * { title: 'Home', href: '/' },\n * { title: 'Category', href: '/category' },\n * { title: 'Product' }\n * ]}\"></nr-breadcrumb>\n * \n * <!-- With custom separator -->\n * <nr-breadcrumb \n * separator=\">\"\n * .items=\"${items}\">\n * </nr-breadcrumb>\n * \n * <!-- With icons -->\n * <nr-breadcrumb .items=\"${[\n * { title: 'Home', icon: 'home', href: '/' },\n * { title: 'Settings', icon: 'settings', href: '/settings' },\n * { title: 'Profile' }\n * ]}\"></nr-breadcrumb>\n * \n * <!-- With dropdown menu -->\n * <nr-breadcrumb .items=\"${[\n * { title: 'Home', href: '/' },\n * { \n * title: 'Products',\n * menu: [\n * { label: 'Electronics', href: '/products/electronics' },\n * { label: 'Clothing', href: '/products/clothing' }\n * ]\n * },\n * { title: 'Current Item' }\n * ]}\"></nr-breadcrumb>\n * ```\n * \n * @element nr-breadcrumb\n * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked\n * \n * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links\n * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover\n * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item\n * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators\n * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators\n * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons\n */\n@customElement('nr-breadcrumb')\nexport class NrBreadcrumbElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-icon'];\n\n /**\n * Array of breadcrumb items to display\n */\n @property({ type: Array })\n items: BreadcrumbItem[] = [];\n\n /**\n * Separator between breadcrumb items\n * Can be a string or one of the predefined separator types\n */\n @property({ type: String })\n separator: BreadcrumbSeparator | string = BreadcrumbSeparator.Slash;\n\n /**\n * Custom separator configuration for more control\n */\n @property({ type: Object, attribute: 'separator-config' })\n separatorConfig?: BreadcrumbSeparatorConfig;\n\n /**\n * Handle breadcrumb item click\n */\n private handleItemClick(item: BreadcrumbItem, e: MouseEvent): void {\n if (item.disabled) {\n e.preventDefault();\n return;\n }\n\n // Dispatch custom event\n this.dispatchEvent(\n new CustomEvent('nr-breadcrumb-click', {\n detail: { item, event: e },\n bubbles: true,\n composed: true\n })\n );\n\n // Call custom click handler if provided\n if (item.onClick) {\n item.onClick(e);\n }\n }\n\n /**\n * Handle menu item click\n */\n private handleMenuItemClick(menuItem: BreadcrumbMenuItem, e: MouseEvent): void {\n if (menuItem.disabled) {\n e.preventDefault();\n return;\n }\n\n if (menuItem.onClick) {\n menuItem.onClick(e);\n }\n }\n\n /**\n * Render a breadcrumb item icon\n */\n private renderIcon(item: BreadcrumbItem): TemplateResult | typeof nothing {\n if (!item.icon) {\n return nothing;\n }\n\n return html`\n <nr-icon\n class=\"breadcrumb-icon\"\n name=\"${item.icon}\"\n type=\"${item.iconType || 'regular'}\"\n ></nr-icon>\n `;\n }\n\n /**\n * Render the separator between breadcrumb items\n */\n private renderSeparator(): TemplateResult {\n if (this.separatorConfig) {\n if (this.separatorConfig.isIcon) {\n return html`\n <span class=\"breadcrumb-separator\">\n <nr-icon\n name=\"${this.separatorConfig.separator}\"\n type=\"${this.separatorConfig.iconType || 'regular'}\"\n ></nr-icon>\n </span>\n `;\n }\n return html`<span class=\"breadcrumb-separator\">${this.separatorConfig.separator}</span>`;\n }\n\n return html`<span class=\"breadcrumb-separator\">${this.separator}</span>`;\n }\n\n /**\n * Render dropdown menu for an item\n */\n private renderMenu(menu: BreadcrumbMenuItem[]): TemplateResult {\n return html`\n <div class=\"breadcrumb-dropdown\">\n ${map(\n menu,\n (menuItem) => html`\n ${menuItem.href\n ? html`\n <a\n class=\"breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}\"\n href=\"${menuItem.href}\"\n @click=\"${(e: MouseEvent) => this.handleMenuItemClick(menuItem, e)}\"\n >\n ${menuItem.icon\n ? html`<nr-icon name=\"${menuItem.icon}\"></nr-icon>`\n : nothing}\n <span>${menuItem.label}</span>\n </a>\n `\n : html`\n <div\n class=\"breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}\"\n @click=\"${(e: MouseEvent) => this.handleMenuItemClick(menuItem, e)}\"\n >\n ${menuItem.icon\n ? html`<nr-icon name=\"${menuItem.icon}\"></nr-icon>`\n : nothing}\n <span>${menuItem.label}</span>\n </div>\n `}\n `\n )}\n </div>\n `;\n }\n\n /**\n * Render a single breadcrumb item\n */\n private renderItem(item: BreadcrumbItem, index: number): TemplateResult {\n const isLast = index === this.items.length - 1;\n const hasMenu = item.menu && item.menu.length > 0;\n\n const content = html`\n ${this.renderIcon(item)}\n <span>${item.title}</span>\n `;\n\n return html`\n <li class=\"breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}\">\n ${isLast\n ? html`<span class=\"breadcrumb-text\">${content}</span>`\n : item.href\n ? html`\n <a\n class=\"breadcrumb-link ${item.disabled ? 'disabled' : ''}\"\n href=\"${item.href}\"\n @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n >\n ${content}\n </a>\n `\n : html`\n <span\n class=\"breadcrumb-link ${item.disabled ? 'disabled' : ''}\"\n @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n >\n ${content}\n </span>\n `}\n ${hasMenu ? this.renderMenu(item.menu!) : nothing}\n </li>\n ${!isLast ? this.renderSeparator() : nothing}\n `;\n }\n\n override render() {\n if (!this.items || this.items.length === 0) {\n return nothing;\n }\n\n return html`\n <nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\n ${map(this.items, (item, index) => this.renderItem(item, index))}\n </nav>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-breadcrumb': NrBreadcrumbElement;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"breadcrumb.component.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAO5D,OAAO,kBAAkB,CAAC;AAE1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AAEH,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAtE;;QAGW,uBAAkB,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1C;;WAEG;QAEH,UAAK,GAAqB,EAAE,CAAC;QAE7B;;;WAGG;QAEH,cAAS,uCAA2D;IA8KtE,CAAC;IAtKC;;OAEG;IACK,eAAe,CAAC,IAAoB,EAAE,CAAa;QACzD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;SACR;QAED,wBAAwB;QACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,qBAAqB,EAAE;YACrC,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;YAC1B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;QAEF,wCAAwC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACjB;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,QAA4B,EAAE,CAAa;QACrE,IAAI,QAAQ,CAAC,QAAQ,EAAE;YACrB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;SACrB;IACH,CAAC;IAED;;OAEG;IACK,UAAU,CAAC,IAAoB;QACrC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;;gBAGC,IAAI,CAAC,IAAI;gBACT,IAAI,CAAC,QAAQ,IAAI,SAAS;;KAErC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE;gBAC/B,OAAO,IAAI,CAAA;;;sBAGG,IAAI,CAAC,eAAe,CAAC,SAAS;sBAC9B,IAAI,CAAC,eAAe,CAAC,QAAQ,IAAI,SAAS;;;SAGvD,CAAC;aACH;YACD,OAAO,IAAI,CAAA,sCAAsC,IAAI,CAAC,eAAe,CAAC,SAAS,SAAS,CAAC;SAC1F;QAED,OAAO,IAAI,CAAA,sCAAsC,IAAI,CAAC,SAAS,SAAS,CAAC;IAC3E,CAAC;IAED;;OAEG;IACK,UAAU,CAAC,IAA0B;QAC3C,OAAO,IAAI,CAAA;;UAEL,GAAG,CACH,IAAI,EACJ,CAAC,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAA;cACd,QAAQ,CAAC,IAAI;YACb,CAAC,CAAC,IAAI,CAAA;;kDAE8B,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;4BACzD,QAAQ,CAAC,IAAI;8BACX,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,CAAC;;sBAEhE,QAAQ,CAAC,IAAI;gBACb,CAAC,CAAC,IAAI,CAAA,kBAAkB,QAAQ,CAAC,IAAI,cAAc;gBACnD,CAAC,CAAC,OAAO;4BACH,QAAQ,CAAC,KAAK;;iBAEzB;YACH,CAAC,CAAC,IAAI,CAAA;;kDAE8B,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;8BACvD,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,CAAC,CAAC;;sBAEhE,QAAQ,CAAC,IAAI;gBACb,CAAC,CAAC,IAAI,CAAA,kBAAkB,QAAQ,CAAC,IAAI,cAAc;gBACnD,CAAC,CAAC,OAAO;4BACH,QAAQ,CAAC,KAAK;;iBAEzB;WACN,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,UAAU,CAAC,IAAoB,EAAE,KAAa;QACpD,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAElD,MAAM,OAAO,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;cACf,IAAI,CAAC,KAAK;KACnB,CAAC;QAEF,OAAO,IAAI,CAAA;mCACoB,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE;UAC3F,MAAM;YACN,CAAC,CAAC,IAAI,CAAA,iCAAiC,OAAO,SAAS;YACvD,CAAC,CAAC,IAAI,CAAC,IAAI;gBACT,CAAC,CAAC,IAAI,CAAA;;2CAEyB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;0BAChD,IAAI,CAAC,IAAI;4BACP,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;oBAExD,OAAO;;eAEZ;gBACH,CAAC,CAAC,IAAI,CAAA;;2CAEyB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;4BAC9C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;;oBAExD,OAAO;;eAEZ;UACL,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAK,CAAC,CAAC,CAAC,CAAC,OAAO;;QAEjD,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,OAAO;KAC7C,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;YAC1C,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;UAEL,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;;KAEnE,CAAC;IACJ,CAAC;CACF,CAAA;AA7LiB,0BAAM,GAAG,MAAO,CAAA;AAQhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDACG;AAO7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACyC;AAMpE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;4DACd;AAtBjC,mBAAmB;IAD/B,aAAa,CAAC,eAAe,CAAC;GAClB,mBAAmB,CA8L/B;SA9LY,mBAAmB","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { styles } from './breadcrumb.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n BreadcrumbItem,\n BreadcrumbMenuItem,\n BreadcrumbSeparator,\n BreadcrumbSeparatorConfig\n} from './breadcrumb.types.js';\nimport '../icon/index.js';\n\n/**\n * # Breadcrumb Component\n * \n * Display the current location within a hierarchy and allow navigation back to higher levels.\n * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.\n * \n * ## Features\n * - Configurable separator styles (slash, arrow, chevron, etc.)\n * - Support for icons alongside text\n * - Dropdown menus for complex hierarchies\n * - Clickable links with href or custom click handlers\n * - RTL support\n * - Fully accessible with keyboard navigation\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic breadcrumb -->\n * <nr-breadcrumb .items=\"${[\n * { title: 'Home', href: '/' },\n * { title: 'Category', href: '/category' },\n * { title: 'Product' }\n * ]}\"></nr-breadcrumb>\n * \n * <!-- With custom separator -->\n * <nr-breadcrumb \n * separator=\">\"\n * .items=\"${items}\">\n * </nr-breadcrumb>\n * \n * <!-- With icons -->\n * <nr-breadcrumb .items=\"${[\n * { title: 'Home', icon: 'home', href: '/' },\n * { title: 'Settings', icon: 'settings', href: '/settings' },\n * { title: 'Profile' }\n * ]}\"></nr-breadcrumb>\n * \n * <!-- With dropdown menu -->\n * <nr-breadcrumb .items=\"${[\n * { title: 'Home', href: '/' },\n * { \n * title: 'Products',\n * menu: [\n * { label: 'Electronics', href: '/products/electronics' },\n * { label: 'Clothing', href: '/products/clothing' }\n * ]\n * },\n * { title: 'Current Item' }\n * ]}\"></nr-breadcrumb>\n * ```\n * \n * @element nr-breadcrumb\n * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked\n * \n * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links\n * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover\n * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item\n * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators\n * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators\n * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons\n */\n@customElement('nr-breadcrumb')\nexport class NrBreadcrumbElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n\n override requiredComponents = ['nr-icon'];\n\n /**\n * Array of breadcrumb items to display\n */\n @property({ type: Array })\n items: BreadcrumbItem[] = [];\n\n /**\n * Separator between breadcrumb items\n * Can be a string or one of the predefined separator types\n */\n @property({ type: String })\n separator: BreadcrumbSeparator | string = BreadcrumbSeparator.Slash;\n\n /**\n * Custom separator configuration for more control\n */\n @property({ type: Object, attribute: 'separator-config' })\n separatorConfig?: BreadcrumbSeparatorConfig;\n\n /**\n * Handle breadcrumb item click\n */\n private handleItemClick(item: BreadcrumbItem, e: MouseEvent): void {\n if (item.disabled) {\n e.preventDefault();\n return;\n }\n\n // Dispatch custom event\n this.dispatchEvent(\n new CustomEvent('nr-breadcrumb-click', {\n detail: { item, event: e },\n bubbles: true,\n composed: true\n })\n );\n\n // Call custom click handler if provided\n if (item.onClick) {\n item.onClick(e);\n }\n }\n\n /**\n * Handle menu item click\n */\n private handleMenuItemClick(menuItem: BreadcrumbMenuItem, e: MouseEvent): void {\n if (menuItem.disabled) {\n e.preventDefault();\n return;\n }\n\n if (menuItem.onClick) {\n menuItem.onClick(e);\n }\n }\n\n /**\n * Render a breadcrumb item icon\n */\n private renderIcon(item: BreadcrumbItem): TemplateResult | typeof nothing {\n if (!item.icon) {\n return nothing;\n }\n\n return html`\n <nr-icon\n class=\"breadcrumb-icon\"\n name=\"${item.icon}\"\n type=\"${item.iconType || 'regular'}\"\n ></nr-icon>\n `;\n }\n\n /**\n * Render the separator between breadcrumb items\n */\n private renderSeparator(): TemplateResult {\n if (this.separatorConfig) {\n if (this.separatorConfig.isIcon) {\n return html`\n <span class=\"breadcrumb-separator\">\n <nr-icon\n name=\"${this.separatorConfig.separator}\"\n type=\"${this.separatorConfig.iconType || 'regular'}\"\n ></nr-icon>\n </span>\n `;\n }\n return html`<span class=\"breadcrumb-separator\">${this.separatorConfig.separator}</span>`;\n }\n\n return html`<span class=\"breadcrumb-separator\">${this.separator}</span>`;\n }\n\n /**\n * Render dropdown menu for an item\n */\n private renderMenu(menu: BreadcrumbMenuItem[]): TemplateResult {\n return html`\n <div class=\"breadcrumb-dropdown\">\n ${map(\n menu,\n (menuItem) => html`\n ${menuItem.href\n ? html`\n <a\n class=\"breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}\"\n href=\"${menuItem.href}\"\n @click=\"${(e: MouseEvent) => this.handleMenuItemClick(menuItem, e)}\"\n >\n ${menuItem.icon\n ? html`<nr-icon name=\"${menuItem.icon}\"></nr-icon>`\n : nothing}\n <span>${menuItem.label}</span>\n </a>\n `\n : html`\n <div\n class=\"breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}\"\n @click=\"${(e: MouseEvent) => this.handleMenuItemClick(menuItem, e)}\"\n >\n ${menuItem.icon\n ? html`<nr-icon name=\"${menuItem.icon}\"></nr-icon>`\n : nothing}\n <span>${menuItem.label}</span>\n </div>\n `}\n `\n )}\n </div>\n `;\n }\n\n /**\n * Render a single breadcrumb item\n */\n private renderItem(item: BreadcrumbItem, index: number): TemplateResult {\n const isLast = index === this.items.length - 1;\n const hasMenu = item.menu && item.menu.length > 0;\n\n const content = html`\n ${this.renderIcon(item)}\n <span>${item.title}</span>\n `;\n\n return html`\n <li class=\"breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}\">\n ${isLast\n ? html`<span class=\"breadcrumb-text\">${content}</span>`\n : item.href\n ? html`\n <a\n class=\"breadcrumb-link ${item.disabled ? 'disabled' : ''}\"\n href=\"${item.href}\"\n @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n >\n ${content}\n </a>\n `\n : html`\n <span\n class=\"breadcrumb-link ${item.disabled ? 'disabled' : ''}\"\n @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n >\n ${content}\n </span>\n `}\n ${hasMenu ? this.renderMenu(item.menu!) : nothing}\n </li>\n ${!isLast ? this.renderSeparator() : nothing}\n `;\n }\n\n override render() {\n if (!this.items || this.items.length === 0) {\n return nothing;\n }\n\n return html`\n <nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\n ${map(this.items, (item, index) => this.renderItem(item, index))}\n </nav>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nr-breadcrumb': NrBreadcrumbElement;\n }\n}\n"]}
|
package/breadcrumb.style.d.ts
CHANGED
|
File without changes
|
package/breadcrumb.style.js
CHANGED
|
File without changes
|
package/breadcrumb.style.js.map
CHANGED
|
File without changes
|
package/breadcrumb.types.d.ts
CHANGED
|
File without changes
|
package/breadcrumb.types.js
CHANGED
|
File without changes
|
package/breadcrumb.types.js.map
CHANGED
|
File without changes
|
package/bundle.js
CHANGED
|
@@ -364,7 +364,7 @@ function*$c(c,a){if(void 0!==c){let s=0;for(const e of c)yield a(e,s++)}}
|
|
|
364
364
|
|
|
365
365
|
/* Size properties with fallbacks */
|
|
366
366
|
--nuraly-icon-size-fallback: 18px;
|
|
367
|
-
--nuraly-icon-size-small-fallback:
|
|
367
|
+
--nuraly-icon-size-small-fallback: 14px;
|
|
368
368
|
--nuraly-icon-size-medium-fallback: 20px;
|
|
369
369
|
--nuraly-icon-size-large-fallback: 24px;
|
|
370
370
|
--nuraly-icon-size-xlarge-fallback: 32px;
|
package/index.d.ts
CHANGED
|
File without changes
|
package/index.js
CHANGED
|
File without changes
|
package/index.js.map
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/breadcrumb",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "Breadcrumb component for NuralyUI library",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"repository": {
|
|
26
26
|
"type": "git",
|
|
27
|
-
"url": "https://github.com/
|
|
27
|
+
"url": "https://github.com/Nuralyio/NuralyUI.git",
|
|
28
28
|
"directory": "src/components/breadcrumb"
|
|
29
29
|
},
|
|
30
30
|
"keywords": [
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"author": "Nuraly, Laabidi Aymen",
|
|
39
39
|
"license": "MIT",
|
|
40
40
|
"bugs": {
|
|
41
|
-
"url": "https://github.com/
|
|
41
|
+
"url": "https://github.com/Nuralyio/NuralyUI/issues"
|
|
42
42
|
},
|
|
43
|
-
"homepage": "https://github.com/
|
|
43
|
+
"homepage": "https://github.com/Nuralyio/NuralyUI#readme"
|
|
44
44
|
}
|
package/react.d.ts
CHANGED
|
File without changes
|
package/react.js
CHANGED
|
File without changes
|
package/react.js.map
CHANGED
|
File without changes
|