@nuralyui/menu 0.0.15 → 0.0.16
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/bundle.js +1 -1
- package/menu.component.d.ts +1 -1
- package/menu.component.js +1 -1
- package/menu.component.js.map +1 -1
- package/package.json +2 -2
package/bundle.js
CHANGED
|
@@ -550,7 +550,7 @@ class Qc{constructor(c){this.host=c,c.addController(this)}hostConnected(){}hostD
|
|
|
550
550
|
|
|
551
551
|
/* Size properties with fallbacks */
|
|
552
552
|
--nuraly-icon-size-fallback: 18px;
|
|
553
|
-
--nuraly-icon-size-small-fallback:
|
|
553
|
+
--nuraly-icon-size-small-fallback: 14px;
|
|
554
554
|
--nuraly-icon-size-medium-fallback: 20px;
|
|
555
555
|
--nuraly-icon-size-large-fallback: 24px;
|
|
556
556
|
--nuraly-icon-size-xlarge-fallback: 32px;
|
package/menu.component.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { LitElement } from 'lit';
|
|
|
7
7
|
import { IMenu, MenuSize } from './menu.types.js';
|
|
8
8
|
import '../icon/icon.component.js';
|
|
9
9
|
import '../dropdown/dropdown.component.js';
|
|
10
|
-
declare const NrMenuElement_base: (new (...args: any[]) => import("
|
|
10
|
+
declare const NrMenuElement_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;
|
|
11
11
|
/**
|
|
12
12
|
* Versatile menu component for hierarchical navigation with support for nested submenus.
|
|
13
13
|
*
|
package/menu.component.js
CHANGED
|
@@ -14,7 +14,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
14
14
|
import { LitElement, html, nothing } from 'lit';
|
|
15
15
|
import { customElement, property } from 'lit/decorators.js';
|
|
16
16
|
import { styles } from './menu.style.js';
|
|
17
|
-
import { NuralyUIBaseMixin } from '
|
|
17
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
18
18
|
import { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';
|
|
19
19
|
import '../icon/icon.component.js';
|
|
20
20
|
import '../dropdown/dropdown.component.js';
|
package/menu.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './menu.style.js';\nimport { IMenu, IAction, MenuSize } from './menu.types.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';\nimport '../icon/icon.component.js';\nimport '../dropdown/dropdown.component.js';\n\n/**\n * Versatile menu component for hierarchical navigation with support for nested submenus.\n * \n * @example\n * ```html\n * <nr-menu .items=${menuItems}></nr-menu>\n * ```\n * \n * @fires change - Menu item selected\n * @fires action-click - Menu action clicked\n * \n * @slot - Menu items (auto-generated from items property)\n */\n@customElement('nr-menu')\nexport class NrMenuElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n \n override requiredComponents = ['nr-icon', 'nr-dropdown'];\n\n /** Menu items configuration */\n @property({ type: Array })\n items: IMenu[] = [];\n\n /** Menu size variant (small, medium, large) */\n @property({ type: String })\n size: MenuSize | string = MenuSize.Medium;\n\n // Controllers\n private stateController: StateController;\n // Keyboard controller is connected via Lit's controller system and listens to events\n // @ts-ignore - Controller is used via Lit's reactive controller system\n private keyboardController: KeyboardController;\n private accessibilityController: AccessibilityController;\n\n private _linkIndex = 0;\n\n constructor() {\n super();\n this.stateController = new StateController(this);\n this.keyboardController = new KeyboardController(this, this.stateController);\n this.accessibilityController = new AccessibilityController(this, this.stateController);\n }\n\n override firstUpdated(): void {\n this._initializeSelectedState();\n this.accessibilityController.updateAriaAttributes();\n }\n\n override updated(): void {\n this.accessibilityController.updateAriaAttributes();\n }\n\n private _initializeSelectedState() {\n this._linkIndex = 0;\n this._findSelectedPath(this.items);\n }\n\n private _findSelectedPath(items: IMenu[], path: number[] = []): boolean {\n for (let index = 0; index < items.length; index++) {\n const item = items[index];\n const currentPath = [...path, index];\n \n if (item.children) {\n if (this._findSelectedPath(item.children, currentPath)) {\n return true;\n }\n } else {\n if (item.selected) {\n this.stateController.setSelectedPath(currentPath);\n return true;\n }\n }\n }\n return false;\n }\n\n private _handleLinkClick(path: number[], value: string, event?: Event) {\n if ((event?.target as HTMLElement)?.classList.contains('action-icon')) {\n return;\n }\n\n if (event?.type === 'click') {\n const mouseEvent = event as MouseEvent;\n if (mouseEvent.detail > 0) {\n return;\n }\n }\n\n this.stateController.setSelectedPath(path);\n \n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n \n this.requestUpdate();\n }\n\n private _handleSubMenuClick(path: number[], value: string, event: Event) {\n const mouseEvent = event as MouseEvent;\n const target = event.target as HTMLElement;\n \n // Don't handle if clicking on toggle icon or its parent container\n if (target.id === 'toggle-icon' || target.closest('#toggle-icon')) {\n return;\n }\n \n // If it's a click event\n if (event.type === 'click') {\n // Check if it's keyboard activation (Enter/Space) - detail will be 0\n if (mouseEvent.detail === 0) {\n // Keyboard activation - toggle the submenu\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n return;\n }\n // Real mouse click - already handled by mousedown, so return\n return;\n }\n\n // This is a mousedown event - highlight and toggle the submenu\n \n this.stateController.setSelectedPath([]);\n this.stateController.clearHighlights();\n this.stateController.setHighlighted(path, true);\n \n // Toggle the submenu when clicking on header\n this.stateController.toggleSubMenu(path);\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n \n this.requestUpdate();\n }\n\n private _toggleSubMenu(path: number[], event: Event) {\n event.stopPropagation();\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseEnter(path: number[]) {\n this.stateController.setHovered(path, true);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseLeave(path: number[]) {\n this.stateController.setHovered(path, false);\n this.requestUpdate();\n }\n\n private _handleActionClick(path: number[], event: CustomEvent) {\n const item = event.detail.item;\n this.dispatchEvent(\n new CustomEvent('action-click', {\n detail: { value: item.value, path, item },\n composed: true,\n bubbles: true,\n })\n );\n }\n\n private _isPathSelected(path: number[]): boolean {\n return this.stateController.isPathSelected(path);\n }\n\n private _convertActionsToDropdownItems(actions: IAction[]): any[] {\n return actions.map(action => ({\n id: action.value,\n label: action.label,\n value: action.value\n }));\n }\n\n private _renderMenuLink(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isSelected = this._isPathSelected(path);\n const linkIndex = this._linkIndex++;\n \n return html`\n <li \n class=\"menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''}\"\n data-path=${pathKey}\n data-index=${linkIndex}\n tabindex=\"0\"\n @mousedown=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}\n @click=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}>\n <div class=\"icon-container\">\n ${menu.icon ? html`\n ${!menu.text \n ? html`<div class=\"icon-only\"><nr-icon name=\"${menu.icon}\"></nr-icon></div>`\n : html`<nr-icon name=\"${menu.icon}\"></nr-icon>`}\n ` : nothing}\n </div>\n ${menu.text ? html`\n <div class=\"action-text-container\">\n <div class=\"text-container\">\n <span>${menu.text}</span>\n </div>\n <div class=\"icon-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n ` : nothing}\n ${menu.menu?.actions ? html`\n <nr-dropdown \n .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n trigger=\"click\" \n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n </div>\n </div>\n ` : nothing}\n </li>\n `;\n }\n\n private _renderSubMenu(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;\n const isHovered = this.stateController.isSubMenuHovered(path);\n const isHighlighted = this.stateController.isSubMenuHighlighted(path);\n const isSelected = menu.selected;\n \n return html`\n <ul \n class=\"sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}\"\n data-path=${pathKey}\n tabindex=\"0\"\n @mouseenter=${() => this._handleSubMenuMouseEnter(path)}\n @mouseleave=${() => this._handleSubMenuMouseLeave(path)}\n @click=${!menu.disabled ? (e: Event) => {\n // Handle keyboard activation on the ul element\n const target = e.target as HTMLElement;\n const mouseEvent = e as MouseEvent;\n // If click is on the ul itself (not children) and it's keyboard-generated\n if (target.classList.contains('sub-menu') && mouseEvent.detail === 0) {\n e.stopPropagation(); // Prevent bubbling to parent submenus\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n } : nothing}>\n <div \n class=\"sub-menu-header\"\n @mousedown=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}\n @click=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}>\n ${menu.icon ? html`<nr-icon class=\"text-icon\" name=\"${menu.icon}\"></nr-icon>` : nothing}\n <span>${menu.text}</span>\n <div class=\"icons-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n ` : nothing}\n ${(isHighlighted || isHovered) && menu.menu?.actions ? html`\n <nr-dropdown \n .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n trigger=\"click\" \n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n ${menu.children && menu.children.length ? html`\n <nr-icon \n id=\"toggle-icon\" \n name=\"${isOpen ? 'angle-up' : 'angle-down'}\" \n @mousedown=${!menu.disabled ? (e: Event) => this._toggleSubMenu(path, e) : nothing}>\n </nr-icon>\n ` : nothing}\n </div>\n </div>\n <div class=\"sub-menu-children\" style=\"display: ${isOpen ? 'block' : 'none'}\">\n ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}\n </div>\n </ul>\n `;\n }\n\n private _renderMenuItems(items: IMenu[], parentPath: number[] = []): any {\n return items.map((menu, index) => {\n const currentPath = [...parentPath, index];\n \n if (menu.children) {\n return this._renderSubMenu(menu, currentPath);\n } else {\n return this._renderMenuLink(menu, currentPath);\n }\n });\n }\n\n override render() {\n this._linkIndex = 0;\n return html`\n <ul class=\"menu-root menu--${this.size}\">\n ${this._renderMenuItems(this.items)}\n </ul>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"menu.component.js","sourceRoot":"","sources":["../../../src/components/menu/menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './menu.style.js';\nimport { IMenu, IAction, MenuSize } from './menu.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';\nimport '../icon/icon.component.js';\nimport '../dropdown/dropdown.component.js';\n\n/**\n * Versatile menu component for hierarchical navigation with support for nested submenus.\n * \n * @example\n * ```html\n * <nr-menu .items=${menuItems}></nr-menu>\n * ```\n * \n * @fires change - Menu item selected\n * @fires action-click - Menu action clicked\n * \n * @slot - Menu items (auto-generated from items property)\n */\n@customElement('nr-menu')\nexport class NrMenuElement extends NuralyUIBaseMixin(LitElement) {\n static override styles = styles;\n \n override requiredComponents = ['nr-icon', 'nr-dropdown'];\n\n /** Menu items configuration */\n @property({ type: Array })\n items: IMenu[] = [];\n\n /** Menu size variant (small, medium, large) */\n @property({ type: String })\n size: MenuSize | string = MenuSize.Medium;\n\n // Controllers\n private stateController: StateController;\n // Keyboard controller is connected via Lit's controller system and listens to events\n // @ts-ignore - Controller is used via Lit's reactive controller system\n private keyboardController: KeyboardController;\n private accessibilityController: AccessibilityController;\n\n private _linkIndex = 0;\n\n constructor() {\n super();\n this.stateController = new StateController(this);\n this.keyboardController = new KeyboardController(this, this.stateController);\n this.accessibilityController = new AccessibilityController(this, this.stateController);\n }\n\n override firstUpdated(): void {\n this._initializeSelectedState();\n this.accessibilityController.updateAriaAttributes();\n }\n\n override updated(): void {\n this.accessibilityController.updateAriaAttributes();\n }\n\n private _initializeSelectedState() {\n this._linkIndex = 0;\n this._findSelectedPath(this.items);\n }\n\n private _findSelectedPath(items: IMenu[], path: number[] = []): boolean {\n for (let index = 0; index < items.length; index++) {\n const item = items[index];\n const currentPath = [...path, index];\n \n if (item.children) {\n if (this._findSelectedPath(item.children, currentPath)) {\n return true;\n }\n } else {\n if (item.selected) {\n this.stateController.setSelectedPath(currentPath);\n return true;\n }\n }\n }\n return false;\n }\n\n private _handleLinkClick(path: number[], value: string, event?: Event) {\n if ((event?.target as HTMLElement)?.classList.contains('action-icon')) {\n return;\n }\n\n if (event?.type === 'click') {\n const mouseEvent = event as MouseEvent;\n if (mouseEvent.detail > 0) {\n return;\n }\n }\n\n this.stateController.setSelectedPath(path);\n \n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n \n this.requestUpdate();\n }\n\n private _handleSubMenuClick(path: number[], value: string, event: Event) {\n const mouseEvent = event as MouseEvent;\n const target = event.target as HTMLElement;\n \n // Don't handle if clicking on toggle icon or its parent container\n if (target.id === 'toggle-icon' || target.closest('#toggle-icon')) {\n return;\n }\n \n // If it's a click event\n if (event.type === 'click') {\n // Check if it's keyboard activation (Enter/Space) - detail will be 0\n if (mouseEvent.detail === 0) {\n // Keyboard activation - toggle the submenu\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n return;\n }\n // Real mouse click - already handled by mousedown, so return\n return;\n }\n\n // This is a mousedown event - highlight and toggle the submenu\n \n this.stateController.setSelectedPath([]);\n this.stateController.clearHighlights();\n this.stateController.setHighlighted(path, true);\n \n // Toggle the submenu when clicking on header\n this.stateController.toggleSubMenu(path);\n\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { path, value },\n })\n );\n \n this.requestUpdate();\n }\n\n private _toggleSubMenu(path: number[], event: Event) {\n event.stopPropagation();\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseEnter(path: number[]) {\n this.stateController.setHovered(path, true);\n this.requestUpdate();\n }\n\n private _handleSubMenuMouseLeave(path: number[]) {\n this.stateController.setHovered(path, false);\n this.requestUpdate();\n }\n\n private _handleActionClick(path: number[], event: CustomEvent) {\n const item = event.detail.item;\n this.dispatchEvent(\n new CustomEvent('action-click', {\n detail: { value: item.value, path, item },\n composed: true,\n bubbles: true,\n })\n );\n }\n\n private _isPathSelected(path: number[]): boolean {\n return this.stateController.isPathSelected(path);\n }\n\n private _convertActionsToDropdownItems(actions: IAction[]): any[] {\n return actions.map(action => ({\n id: action.value,\n label: action.label,\n value: action.value\n }));\n }\n\n private _renderMenuLink(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isSelected = this._isPathSelected(path);\n const linkIndex = this._linkIndex++;\n \n return html`\n <li \n class=\"menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''}\"\n data-path=${pathKey}\n data-index=${linkIndex}\n tabindex=\"0\"\n @mousedown=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}\n @click=${!menu.disabled ? (e: Event) => this._handleLinkClick(path, menu.text, e) : nothing}>\n <div class=\"icon-container\">\n ${menu.icon ? html`\n ${!menu.text \n ? html`<div class=\"icon-only\"><nr-icon name=\"${menu.icon}\"></nr-icon></div>`\n : html`<nr-icon name=\"${menu.icon}\"></nr-icon>`}\n ` : nothing}\n </div>\n ${menu.text ? html`\n <div class=\"action-text-container\">\n <div class=\"text-container\">\n <span>${menu.text}</span>\n </div>\n <div class=\"icon-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n ` : nothing}\n ${menu.menu?.actions ? html`\n <nr-dropdown \n .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n trigger=\"click\" \n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n </div>\n </div>\n ` : nothing}\n </li>\n `;\n }\n\n private _renderSubMenu(menu: IMenu, path: number[]): any {\n const pathKey = path.join('-');\n const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;\n const isHovered = this.stateController.isSubMenuHovered(path);\n const isHighlighted = this.stateController.isSubMenuHighlighted(path);\n const isSelected = menu.selected;\n \n return html`\n <ul \n class=\"sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}\"\n data-path=${pathKey}\n tabindex=\"0\"\n @mouseenter=${() => this._handleSubMenuMouseEnter(path)}\n @mouseleave=${() => this._handleSubMenuMouseLeave(path)}\n @click=${!menu.disabled ? (e: Event) => {\n // Handle keyboard activation on the ul element\n const target = e.target as HTMLElement;\n const mouseEvent = e as MouseEvent;\n // If click is on the ul itself (not children) and it's keyboard-generated\n if (target.classList.contains('sub-menu') && mouseEvent.detail === 0) {\n e.stopPropagation(); // Prevent bubbling to parent submenus\n this.stateController.toggleSubMenu(path);\n this.requestUpdate();\n }\n } : nothing}>\n <div \n class=\"sub-menu-header\"\n @mousedown=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}\n @click=${!menu.disabled ? (e: Event) => this._handleSubMenuClick(path, menu.text, e) : nothing}>\n ${menu.icon ? html`<nr-icon class=\"text-icon\" name=\"${menu.icon}\"></nr-icon>` : nothing}\n <span>${menu.text}</span>\n <div class=\"icons-container\">\n ${menu.status?.icon ? html`\n <nr-icon name=${menu.status.icon} class=\"status-icon\"></nr-icon>\n ` : nothing}\n ${(isHighlighted || isHovered) && menu.menu?.actions ? html`\n <nr-dropdown \n .items=${this._convertActionsToDropdownItems(menu.menu.actions)} \n trigger=\"click\" \n placement=\"bottom-end\"\n @nr-dropdown-item-click=${(e: CustomEvent) => this._handleActionClick(path, e)}>\n <nr-icon name=\"${menu.menu.icon}\" class=\"action-icon\" slot=\"trigger\"></nr-icon>\n </nr-dropdown>\n ` : nothing}\n ${menu.children && menu.children.length ? html`\n <nr-icon \n id=\"toggle-icon\" \n name=\"${isOpen ? 'angle-up' : 'angle-down'}\" \n @mousedown=${!menu.disabled ? (e: Event) => this._toggleSubMenu(path, e) : nothing}>\n </nr-icon>\n ` : nothing}\n </div>\n </div>\n <div class=\"sub-menu-children\" style=\"display: ${isOpen ? 'block' : 'none'}\">\n ${menu.children ? this._renderMenuItems(menu.children, path) : nothing}\n </div>\n </ul>\n `;\n }\n\n private _renderMenuItems(items: IMenu[], parentPath: number[] = []): any {\n return items.map((menu, index) => {\n const currentPath = [...parentPath, index];\n \n if (menu.children) {\n return this._renderSubMenu(menu, currentPath);\n } else {\n return this._renderMenuLink(menu, currentPath);\n }\n });\n }\n\n override render() {\n this._linkIndex = 0;\n return html`\n <ul class=\"menu-root menu--${this.size}\">\n ${this._renderMenuItems(this.items)}\n </ul>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/menu",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"description": "Menu component for NuralyUI library with support for nested submenus",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"repository": {
|
|
25
25
|
"type": "git",
|
|
26
|
-
"url": "https://github.com/
|
|
26
|
+
"url": "https://github.com/Nuralyio/NuralyUI.git",
|
|
27
27
|
"directory": "src/components/menu"
|
|
28
28
|
},
|
|
29
29
|
"keywords": [
|