@nuralyui/menu 0.0.19 → 0.0.20

package/menu.component.js

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { LitElement, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './menu.style.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { StateController, KeyboardController, AccessibilityController } from './controllers/index.js';
@@ -22,10 +22,12 @@ import { StateController, KeyboardController, AccessibilityController } from './
  * @example
  * ```html
  * <nr-menu .items=${menuItems}></nr-menu>
+ * <nr-menu .items=${menuItems} arrowPosition="left"></nr-menu>
  * ```
  *
  * @fires change - Menu item selected
  * @fires action-click - Menu action clicked
+ * @fires label-edit - Menu item label edited (detail: { path, oldValue, newValue })
  *
  * @slot - Menu items (auto-generated from items property)
  */
@@ -37,6 +39,18 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         this.items = [];
         /** Menu size variant (small, medium, large) */
         this.size = "medium" /* MenuSize.Medium */;
+        /** Default arrow icon position for submenus (left or right) */
+        this.arrowPosition = "right" /* IconPosition.Right */;
+        /** Track context menu state */
+        this._contextMenuState = null;
+        /** Track which menu item is currently being edited (path as string for comparison) */
+        this._editingPath = null;
+        /** Temporary value while editing */
+        this._editingValue = '';
+        /** Pending click timeout for double-click detection */
+        this._pendingClickTimeout = null;
+        /** Path of pending click */
+        this._pendingClickPath = null;
         this._linkIndex = 0;
         this.stateController = new StateController(this);
         this.keyboardController = new KeyboardController(this, this.stateController);
@@ -46,9 +60,32 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         this._initializeSelectedState();
         this.accessibilityController.updateAriaAttributes();
     }
-    updated() {
+    updated(changedProperties) {
+        // Re-initialize selection state when items change
+        if (changedProperties.has('items')) {
+            this._initializeSelectedState();
+            // Also open submenus that have 'opened' set to true
+            this._initializeOpenedState();
+        }
         this.accessibilityController.updateAriaAttributes();
     }
+    _initializeOpenedState() {
+        this._openSubMenusFromItems(this.items, []);
+    }
+    _openSubMenusFromItems(items, parentPath) {
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            const currentPath = [...parentPath, index];
+            if (item.children) {
+                // If this item has 'opened' set to true, open it
+                if (item.opened) {
+                    this.stateController.openSubMenu(currentPath);
+                }
+                // Recursively check children
+                this._openSubMenusFromItems(item.children, currentPath);
+            }
+        }
+    }
     _initializeSelectedState() {
         this._linkIndex = 0;
         this._findSelectedPath(this.items);
@@ -71,7 +108,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         }
         return false;
     }
-    _handleLinkClick(path, value, event) {
+    _handleLinkClick(path, value, editable, event) {
         var _a;
         if ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('action-icon')) {
             return;
@@ -82,6 +119,25 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
                 return;
             }
         }
+        const pathKey = path.join('-');
+        // If editable, delay the click to allow double-click detection
+        if (editable && (event === null || event === void 0 ? void 0 : event.type) === 'mousedown') {
+            // Clear any existing pending click
+            if (this._pendingClickTimeout) {
+                clearTimeout(this._pendingClickTimeout);
+            }
+            this._pendingClickPath = pathKey;
+            this._pendingClickTimeout = setTimeout(() => {
+                if (this._pendingClickPath === pathKey) {
+                    this._executeClick(path, value);
+                    this._pendingClickPath = null;
+                }
+            }, 200); // 200ms delay for double-click detection
+            return;
+        }
+        this._executeClick(path, value);
+    }
+    _executeClick(path, value) {
         this.stateController.setSelectedPath(path);
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
@@ -90,7 +146,7 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         }));
         this.requestUpdate();
     }
-    _handleSubMenuClick(path, value, event) {
+    _handleSubMenuClick(path, value, editable, event) {
         const mouseEvent = event;
         const target = event.target;
         // Don't handle if clicking on toggle icon or its parent container
@@ -109,7 +165,25 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
             // Real mouse click - already handled by mousedown, so return
             return;
         }
-        // This is a mousedown event - highlight and toggle the submenu
+        const pathKey = path.join('-');
+        // If editable, delay the click to allow double-click detection
+        if (editable) {
+            // Clear any existing pending click
+            if (this._pendingClickTimeout) {
+                clearTimeout(this._pendingClickTimeout);
+            }
+            this._pendingClickPath = pathKey;
+            this._pendingClickTimeout = setTimeout(() => {
+                if (this._pendingClickPath === pathKey) {
+                    this._executeSubMenuClick(path, value);
+                    this._pendingClickPath = null;
+                }
+            }, 200);
+            return;
+        }
+        this._executeSubMenuClick(path, value);
+    }
+    _executeSubMenuClick(path, value) {
         this.stateController.setSelectedPath([]);
         this.stateController.clearHighlights();
         this.stateController.setHighlighted(path, true);
@@ -137,12 +211,170 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
     }
     _handleActionClick(path, event) {
         const item = event.detail.item;
+        const originalEvent = event.detail.originalEvent;
+        const dropdown = event.detail.dropdown;
+        // Create a close callback for async actions
+        const close = () => {
+            if (dropdown) {
+                if (typeof dropdown.hide === 'function') {
+                    dropdown.hide();
+                }
+                else if (typeof dropdown.close === 'function') {
+                    dropdown.close();
+                }
+            }
+        };
         this.dispatchEvent(new CustomEvent('action-click', {
-            detail: { value: item.value, path, item },
+            detail: { value: item.value, path, item, originalEvent, close },
             composed: true,
             bubbles: true,
         }));
     }
+    _handleContextMenu(path, menu, event) {
+        var _a, _b;
+        if (!((_b = (_a = menu.menu) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.length))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this._contextMenuState = {
+            path,
+            x: event.clientX,
+            y: event.clientY,
+            actions: menu.menu.actions
+        };
+        this.requestUpdate();
+        // Wait for render then show the dropdown
+        this.updateComplete.then(() => {
+            var _a;
+            const dropdown = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#context-menu-dropdown');
+            if (dropdown && typeof dropdown.show === 'function') {
+                dropdown.show();
+            }
+        });
+    }
+    _handleContextMenuAction(path, event) {
+        const item = event.detail.item;
+        const originalEvent = event.detail.originalEvent;
+        const dropdown = event.detail.dropdown;
+        // Create a close callback
+        const close = () => {
+            this._contextMenuState = null;
+            if (dropdown) {
+                if (typeof dropdown.hide === 'function') {
+                    dropdown.hide();
+                }
+                else if (typeof dropdown.close === 'function') {
+                    dropdown.close();
+                }
+            }
+            this.requestUpdate();
+        };
+        this.dispatchEvent(new CustomEvent('action-click', {
+            detail: { value: item.value, path, item, originalEvent, close },
+            composed: true,
+            bubbles: true,
+        }));
+        close();
+    }
+    _handleContextMenuClose() {
+        this._contextMenuState = null;
+        this.requestUpdate();
+    }
+    _handleDoubleClick(path, menu, event) {
+        if (menu.disabled)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        // Cancel any pending single click
+        if (this._pendingClickTimeout) {
+            clearTimeout(this._pendingClickTimeout);
+            this._pendingClickTimeout = null;
+            this._pendingClickPath = null;
+        }
+        const pathKey = path.join('-');
+        this._editingPath = pathKey;
+        this._editingValue = menu.text;
+        this.requestUpdate();
+        // Focus the input after render
+        this.updateComplete.then(() => {
+            var _a;
+            const input = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`input[data-edit-path="${pathKey}"]`);
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        });
+    }
+    _handleEditInput(event) {
+        event.stopPropagation();
+        const input = event.target;
+        this._editingValue = input.value;
+    }
+    _handleEditKeyDown(path, originalText, event) {
+        event.stopPropagation(); // Prevent keyboard navigation from capturing keys
+        console.log('Edit keydown:', event.key, 'editingValue:', this._editingValue);
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            // Get the current value directly from the input
+            const input = event.target;
+            this._editingValue = input.value;
+            console.log('Saving with value:', this._editingValue);
+            this._saveEdit(path, originalText);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this._cancelEdit();
+        }
+    }
+    _handleEditBlur(path, originalText, event) {
+        var _a;
+        // Check if focus is moving to another element within this component
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget && ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget))) {
+            return; // Don't save if focus is moving within the component
+        }
+        // Delay to allow click events to process first
+        setTimeout(() => {
+            if (this._editingPath === path.join('-')) {
+                this._saveEdit(path, originalText);
+            }
+        }, 200);
+    }
+    _saveEdit(path, originalText) {
+        const newValue = this._editingValue.trim();
+        console.log('_saveEdit called:', { newValue, originalText, willEmit: newValue && newValue !== originalText });
+        if (newValue && newValue !== originalText) {
+            const detail = {
+                path,
+                oldValue: originalText,
+                newValue,
+            };
+            // Call callback if provided
+            if (this.onLabelEdit) {
+                console.log('Calling onLabelEdit callback');
+                this.onLabelEdit(detail);
+            }
+            // Also dispatch event
+            console.log('Dispatching label-edit event from:', this.tagName);
+            const event = new CustomEvent('label-edit', {
+                bubbles: true,
+                composed: true,
+                detail,
+            });
+            this.dispatchEvent(event);
+        }
+        this._editingPath = null;
+        this._editingValue = '';
+        this.requestUpdate();
+    }
+    _cancelEdit() {
+        this._editingPath = null;
+        this._editingValue = '';
+        this.requestUpdate();
+    }
+    _isEditing(path) {
+        return this._editingPath === path.join('-');
+    }
     _isPathSelected(path) {
         return this.stateController.isPathSelected(path);
     }
@@ -150,45 +382,60 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
         return actions.map(action => ({
             id: action.value,
             label: action.label,
-            value: action.value
+            value: action.value,
+            icon: action.icon,
+            additionalData: action.additionalData
         }));
     }
     _renderMenuLink(menu, path) {
-        var _a, _b;
+        var _a, _b, _c;
         const pathKey = path.join('-');
         const isSelected = this._isPathSelected(path);
+        const isEditing = this._isEditing(path);
         const linkIndex = this._linkIndex++;
         return html `
-      <li 
-        class="menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''}"
+      <li
+        class="menu-link ${isSelected ? 'selected' : ''} ${menu.disabled ? 'disabled' : ''} ${isEditing ? 'editing' : ''}"
         data-path=${pathKey}
         data-index=${linkIndex}
-        tabindex="0"
-        @mousedown=${!menu.disabled ? (e) => this._handleLinkClick(path, menu.text, e) : nothing}
-        @click=${!menu.disabled ? (e) => this._handleLinkClick(path, menu.text, e) : nothing}>
+        tabindex=${isEditing ? -1 : 0}
+        @mousedown=${!menu.disabled && !isEditing ? (e) => this._handleLinkClick(path, menu.text, !!menu.editable, e) : nothing}
+        @click=${!menu.disabled && !isEditing ? (e) => this._handleLinkClick(path, menu.text, !!menu.editable, e) : nothing}
+        @dblclick=${!menu.disabled ? (e) => this._handleDoubleClick(path, menu, e) : nothing}
+        @contextmenu=${!menu.disabled && ((_a = menu.menu) === null || _a === void 0 ? void 0 : _a.actions) ? (e) => this._handleContextMenu(path, menu, e) : nothing}>
         <div class="icon-container">
           ${menu.icon ? html `
             ${!menu.text
             ? html `<div class="icon-only"><nr-icon name="${menu.icon}"></nr-icon></div>`
-            : html `<nr-icon name="${menu.icon}"></nr-icon>`}
+            : html `<nr-icon name="${menu.icon}" size="small"></nr-icon>`}
           ` : nothing}
         </div>
         ${menu.text ? html `
           <div class="action-text-container">
-            <div class="text-container">
-              <span>${menu.text}</span>
+            <div class="text-container" @dblclick=${!menu.disabled ? (e) => this._handleDoubleClick(path, menu, e) : nothing}>
+              ${isEditing ? html `
+                <input
+                  type="text"
+                  class="edit-input"
+                  data-edit-path=${pathKey}
+                  .value=${this._editingValue}
+                  @input=${this._handleEditInput}
+                  @keydown=${(e) => this._handleEditKeyDown(path, menu.text, e)}
+                  @blur=${(e) => this._handleEditBlur(path, menu.text, e)}
+                />
+              ` : html `<span>${menu.text}</span>`}
             </div>
             <div class="icon-container">
-              ${((_a = menu.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
-                <nr-icon name=${menu.status.icon} class="status-icon"></nr-icon>
+              ${((_b = menu.status) === null || _b === void 0 ? void 0 : _b.icon) ? html `
+                <nr-icon name=${menu.status.icon} class="status-icon"  size="small"></nr-icon>
               ` : nothing}
-              ${((_b = menu.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
-                <nr-dropdown 
-                  .items=${this._convertActionsToDropdownItems(menu.menu.actions)} 
-                  trigger="click" 
+              ${((_c = menu.menu) === null || _c === void 0 ? void 0 : _c.actions) ? html `
+                <nr-dropdown
+                  .items=${this._convertActionsToDropdownItems(menu.menu.actions)}
+                  trigger="click"
                   placement="bottom-end"
                   @nr-dropdown-item-click=${(e) => this._handleActionClick(path, e)}>
-                  <nr-icon name="${menu.menu.icon}" class="action-icon" slot="trigger"></nr-icon>
+                  <nr-icon name="${menu.menu.icon}" class="action-icon" slot="trigger"  size="small"></nr-icon>
                 </nr-dropdown>
               ` : nothing}
             </div>
@@ -198,20 +445,24 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
     `;
     }
     _renderSubMenu(menu, path) {
-        var _a, _b;
+        var _a, _b, _c;
         const pathKey = path.join('-');
         const isOpen = this.stateController.isSubMenuOpen(path) || menu.opened;
         const isHovered = this.stateController.isSubMenuHovered(path);
         const isHighlighted = this.stateController.isSubMenuHighlighted(path);
         const isSelected = menu.selected;
+        const isEditing = this._isEditing(path);
+        // Determine icon position - use individual menu item setting or fall back to global setting
+        const iconPosition = menu.iconPosition || this.arrowPosition;
+        const isLeftPosition = iconPosition === "left" /* IconPosition.Left */ || iconPosition === 'left';
         return html `
-      <ul 
-        class="sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''}"
+      <ul
+        class="sub-menu ${isHighlighted ? 'highlighted' : ''} ${menu.disabled ? 'disabled' : ''} ${isSelected ? 'selected' : ''} ${isLeftPosition ? 'arrow-left' : 'arrow-right'} ${isEditing ? 'editing' : ''}"
         data-path=${pathKey}
-        tabindex="0"
+        tabindex=${isEditing ? -1 : 0}
         @mouseenter=${() => this._handleSubMenuMouseEnter(path)}
         @mouseleave=${() => this._handleSubMenuMouseLeave(path)}
-        @click=${!menu.disabled ? (e) => {
+        @click=${!menu.disabled && !isEditing ? (e) => {
             // Handle keyboard activation on the ul element
             const target = e.target;
             const mouseEvent = e;
@@ -222,30 +473,51 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
                 this.requestUpdate();
             }
         } : nothing}>
-        <div 
+        <div
           class="sub-menu-header"
-          @mousedown=${!menu.disabled ? (e) => this._handleSubMenuClick(path, menu.text, e) : nothing}
-          @click=${!menu.disabled ? (e) => this._handleSubMenuClick(path, menu.text, e) : nothing}>
-          ${menu.icon ? html `<nr-icon class="text-icon" name="${menu.icon}"></nr-icon>` : nothing}
-          <span>${menu.text}</span>
+          @mousedown=${!menu.disabled && !isEditing ? (e) => this._handleSubMenuClick(path, menu.text, !!menu.editable, e) : nothing}
+          @click=${!menu.disabled && !isEditing ? (e) => this._handleSubMenuClick(path, menu.text, !!menu.editable, e) : nothing}
+          @dblclick=${!menu.disabled && menu.editable ? (e) => this._handleDoubleClick(path, menu, e) : nothing}
+          @contextmenu=${!menu.disabled && ((_a = menu.menu) === null || _a === void 0 ? void 0 : _a.actions) ? (e) => this._handleContextMenu(path, menu, e) : nothing}>
+          ${isLeftPosition && menu.children && menu.children.length ? html `
+            <nr-icon
+              id="toggle-icon"
+              name="${isOpen ? 'ChevronDown' : 'ChevronRight'}"
+              @mousedown=${!menu.disabled ? (e) => this._toggleSubMenu(path, e) : nothing}
+              size="small">
+            </nr-icon>
+          ` : nothing}
+          ${menu.icon ? html `<nr-icon class="text-icon" name="${menu.icon}" size="small"></nr-icon>` : nothing}
+          ${isEditing ? html `
+            <input
+              type="text"
+              class="edit-input"
+              data-edit-path=${pathKey}
+              .value=${this._editingValue}
+              @input=${this._handleEditInput}
+              @keydown=${(e) => this._handleEditKeyDown(path, menu.text, e)}
+              @blur=${(e) => this._handleEditBlur(path, menu.text, e)}
+            />
+          ` : html `<span class="menu-text" @dblclick=${!menu.disabled ? (e) => this._handleDoubleClick(path, menu, e) : nothing}>${menu.text}</span>`}
           <div class="icons-container">
-            ${((_a = menu.status) === null || _a === void 0 ? void 0 : _a.icon) ? html `
-              <nr-icon name=${menu.status.icon} class="status-icon"></nr-icon>
+            ${((_b = menu.status) === null || _b === void 0 ? void 0 : _b.icon) ? html `
+              <nr-icon name=${menu.status.icon} class="status-icon" size="small"></nr-icon>
             ` : nothing}
-            ${(isHighlighted || isHovered) && ((_b = menu.menu) === null || _b === void 0 ? void 0 : _b.actions) ? html `
-              <nr-dropdown 
-                .items=${this._convertActionsToDropdownItems(menu.menu.actions)} 
-                trigger="click" 
+            ${(isHighlighted || isHovered) && ((_c = menu.menu) === null || _c === void 0 ? void 0 : _c.actions) ? html `
+              <nr-dropdown
+                .items=${this._convertActionsToDropdownItems(menu.menu.actions)}
+                trigger="click"
                 placement="bottom-end"
                 @nr-dropdown-item-click=${(e) => this._handleActionClick(path, e)}>
-                <nr-icon name="${menu.menu.icon}" class="action-icon" slot="trigger"></nr-icon>
+                <nr-icon name="${menu.menu.icon}" class="action-icon" slot="trigger" size="small"></nr-icon>
               </nr-dropdown>
             ` : nothing}
-            ${menu.children && menu.children.length ? html `
-              <nr-icon 
-                id="toggle-icon" 
-                name="${isOpen ? 'angle-up' : 'angle-down'}" 
-                @mousedown=${!menu.disabled ? (e) => this._toggleSubMenu(path, e) : nothing}>
+            ${!isLeftPosition && menu.children && menu.children.length ? html `
+              <nr-icon
+                id="toggle-icon"
+                name="${isOpen ? 'ChevronDown' : 'ChevronRight'}"
+                @mousedown=${!menu.disabled ? (e) => this._toggleSubMenu(path, e) : nothing}
+                size="small">
               </nr-icon>
             ` : nothing}
           </div>
@@ -267,12 +539,31 @@ let NrMenuElement = class NrMenuElement extends NuralyUIBaseMixin(LitElement) {
             }
         });
     }
+    _renderContextMenu() {
+        if (!this._contextMenuState)
+            return nothing;
+        const { x, y, actions, path } = this._contextMenuState;
+        return html `
+      <nr-dropdown
+        id="context-menu-dropdown"
+        .items=${this._convertActionsToDropdownItems(actions)}
+        trigger="manual"
+        placement="bottom-start"
+        style="position: fixed; top: ${y}px; left: ${x}px; z-index: 9999;"
+        @nr-dropdown-item-click=${(e) => this._handleContextMenuAction(path, e)}
+        @nr-dropdown-close=${() => this._handleContextMenuClose()}
+      >
+        <span slot="trigger" style="display: block; width: 1px; height: 1px;"></span>
+      </nr-dropdown>
+    `;
+    }
     render() {
         this._linkIndex = 0;
         return html `
       <ul class="menu-root menu--${this.size}">
         ${this._renderMenuItems(this.items)}
       </ul>
+      ${this._renderContextMenu()}
     `;
     }
 };
@@ -283,6 +574,21 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NrMenuElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrMenuElement.prototype, "arrowPosition", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], NrMenuElement.prototype, "onLabelEdit", void 0);
+__decorate([
+    state()
+], NrMenuElement.prototype, "_contextMenuState", void 0);
+__decorate([
+    state()
+], NrMenuElement.prototype, "_editingPath", void 0);
+__decorate([
+    state()
+], NrMenuElement.prototype, "_editingValue", void 0);
 NrMenuElement = __decorate([
     customElement('nr-menu')
 ], NrMenuElement);