@xlabs-store/core 0.0.1

package/dist/collection/components/x-menu/x-menu.js

@@ -0,0 +1,793 @@
+import { h, Host } from "@stencil/core";
+export class XMenu {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Type of menu: vertical, horizontal, or inline
+     * @example
+     * <x-menu mode="horizontal"></x-menu>
+     */
+    mode = 'vertical';
+    /**
+     * Color theme of the menu
+     * @example
+     * <x-menu theme="dark"></x-menu>
+     */
+    theme = 'light';
+    /**
+     * Specifies the collapsed status when menu is inline mode
+     * @example
+     * <x-menu inlineCollapsed></x-menu>
+     */
+    inlineCollapsed = false;
+    /**
+     * Indent (in pixels) of inline menu items on each level
+     * @example
+     * <x-menu inlineIndent={32}></x-menu>
+     */
+    inlineIndent = 24;
+    /**
+     * Array with the keys of default selected menu items
+     * @example
+     * <x-menu defaultSelectedKeys={['home']}></x-menu>
+     */
+    defaultSelectedKeys = [];
+    /**
+     * Array with the keys of currently selected menu items (controlled)
+     * @example
+     * <x-menu selectedKeys={['settings']}></x-menu>
+     */
+    selectedKeys;
+    /**
+     * Array with the keys of default opened sub-menus
+     * @example
+     * <x-menu defaultOpenKeys={['sub-1']}></x-menu>
+     */
+    defaultOpenKeys = [];
+    /**
+     * Array with the keys of currently opened sub-menus (controlled)
+     * @example
+     * <x-menu openKeys={['sub-1']}></x-menu>
+     */
+    openKeys;
+    /**
+     * Allows selection of multiple items
+     * @example
+     * <x-menu multiple></x-menu>
+     */
+    multiple = false;
+    /**
+     * Allows selecting menu items
+     * @example
+     * <x-menu selectable={false}></x-menu>
+     */
+    selectable = true;
+    /**
+     * Which action can trigger submenu open/close
+     * @example
+     * <x-menu triggerSubMenuAction="click"></x-menu>
+     */
+    triggerSubMenuAction = 'hover';
+    /**
+     * Delay time to show submenu when mouse enters (in seconds)
+     * @example
+     * <x-menu subMenuOpenDelay={0.2}></x-menu>
+     */
+    subMenuOpenDelay = 0;
+    /**
+     * Delay time to hide submenu when mouse leaves (in seconds)
+     * @example
+     * <x-menu subMenuCloseDelay={0.2}></x-menu>
+     */
+    subMenuCloseDelay = 0.1;
+    // ========================================
+    // STATE
+    // ========================================
+    internalSelectedKeys = [];
+    internalOpenKeys = [];
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Called when a menu item is selected
+     * @example
+     * <x-menu onXSelect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xSelect;
+    /**
+     * Called when a menu item is deselected (multiple mode only)
+     * @example
+     * <x-menu onXDeselect={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xDeselect;
+    /**
+     * Called when a menu item is clicked
+     * @example
+     * <x-menu onXClick={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xClick;
+    /**
+     * Called when sub-menus are opened or closed
+     * @example
+     * <x-menu onXOpenChange={(ev) => console.log(ev.detail)}></x-menu>
+     */
+    xOpenChange;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    componentWillLoad() {
+        // Initialize internal state from default props
+        this.internalSelectedKeys = this.selectedKeys ?? [...this.defaultSelectedKeys];
+        this.internalOpenKeys = this.openKeys ?? [...this.defaultOpenKeys];
+    }
+    componentDidLoad() {
+        this.syncChildrenProps();
+    }
+    componentDidUpdate() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    handleSelectedKeysChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalSelectedKeys = [...newValue];
+        }
+    }
+    handleOpenKeysChange(newValue) {
+        if (newValue !== undefined) {
+            this.internalOpenKeys = [...newValue];
+        }
+    }
+    handlePropsChange() {
+        this.syncChildrenProps();
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    handleItemClick(ev) {
+        ev.stopPropagation();
+        const { key, keyPath, domEvent } = ev.detail;
+        // Emit click event
+        this.xClick.emit({ key, keyPath, domEvent });
+        if (!this.selectable)
+            return;
+        const currentSelected = this.getSelectedKeys();
+        const isSelected = currentSelected.includes(key);
+        if (this.multiple) {
+            // Multiple selection mode
+            // Flow:
+            // 1. If already selected, remove from list (deselect).
+            // 2. If not selected, add to list (select).
+            // 3. Emit appropriate event (xSelect/xDeselect).
+            if (isSelected) {
+                // Deselect
+                const newSelected = currentSelected.filter(k => k !== key);
+                this.updateSelectedKeys(newSelected);
+                this.xDeselect.emit({ key, keyPath, selectedKeys: newSelected, domEvent });
+            }
+            else {
+                // Select
+                const newSelected = [...currentSelected, key];
+                this.updateSelectedKeys(newSelected);
+                this.xSelect.emit({ key, keyPath, selectedKeys: newSelected, domEvent });
+            }
+        }
+        else {
+            // Single selection mode
+            // Flow:
+            // 1. If not selected, replace current selection with new key.
+            // 2. Emit xSelect.
+            if (!isSelected) {
+                this.updateSelectedKeys([key]);
+                this.xSelect.emit({ key, keyPath, selectedKeys: [key], domEvent });
+            }
+        }
+    }
+    /**
+     * Listens for submenu toggle events.
+     * Updates the open keys state and emits change event.
+     *
+     * Flow:
+     * 1. Stops event propagation.
+     * 2. Retrieves the key and target open state from the event detail.
+     * 3. Updates the list of open keys:
+     *    - If opening: Appends the key to the list.
+     *    - If closing: Filters the key out of the list.
+     * 4. Updates internal state and emits `xOpenChange`.
+     *
+     * @param {CustomEvent<SubmenuToggleDetail>} ev - The toggle event.
+     */
+    handleSubmenuToggle(ev) {
+        ev.stopPropagation();
+        const { key, open } = ev.detail;
+        const currentOpen = this.getOpenKeys();
+        let newOpenKeys;
+        if (open) {
+            newOpenKeys = [...currentOpen, key];
+        }
+        else {
+            newOpenKeys = currentOpen.filter(k => k !== key);
+        }
+        this.updateOpenKeys(newOpenKeys);
+        this.xOpenChange.emit({ openKeys: newOpenKeys });
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    getSelectedKeys() {
+        return this.selectedKeys ?? this.internalSelectedKeys;
+    }
+    getOpenKeys() {
+        return this.openKeys ?? this.internalOpenKeys;
+    }
+    updateSelectedKeys(keys) {
+        if (this.selectedKeys === undefined) {
+            // Uncontrolled mode
+            this.internalSelectedKeys = keys;
+        }
+        // In controlled mode, parent should update via prop
+    }
+    updateOpenKeys(keys) {
+        if (this.openKeys === undefined) {
+            // Uncontrolled mode
+            this.internalOpenKeys = keys;
+        }
+        // In controlled mode, parent should update via prop
+    }
+    syncChildrenProps() {
+        const selectedKeys = this.getSelectedKeys();
+        const openKeys = this.getOpenKeys();
+        const effectiveMode = this.inlineCollapsed && this.mode === 'inline' ? 'vertical' : this.mode;
+        // Sync props to direct children
+        // Flow:
+        // 1. Iterates over assigned elements in slot.
+        // 2. Sets internal props (_menuMode, _menuTheme, _selected, etc.) on items/submenus.
+        // 3. This ensures children react to parent state changes (like collapse/theme).
+        const syncElement = (element, level = 0) => {
+            const el = element;
+            const tagName = element.tagName.toLowerCase();
+            if (tagName === 'x-menu-item') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+                el._selected = selectedKeys.includes(el.itemKey);
+            }
+            else if (tagName === 'x-menu-submenu') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+                el._open = openKeys.includes(el.itemKey);
+                el._triggerSubMenuAction = this.triggerSubMenuAction;
+                el._subMenuOpenDelay = this.subMenuOpenDelay;
+                el._subMenuCloseDelay = this.subMenuCloseDelay;
+                el._selectedKeys = selectedKeys;
+            }
+            else if (tagName === 'x-menu-item-group') {
+                el._menuMode = effectiveMode;
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+                el._level = level;
+                el._inlineIndent = this.inlineIndent;
+            }
+            else if (tagName === 'x-menu-divider') {
+                el._menuTheme = this.theme;
+                el._inlineCollapsed = this.inlineCollapsed;
+            }
+        };
+        // Get all slotted children
+        const slot = this.el.shadowRoot?.querySelector('slot');
+        if (slot) {
+            const assignedElements = slot.assignedElements();
+            assignedElements.forEach(el => syncElement(el, 0));
+        }
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the menu component.
+     *
+     * Flow:
+     * 1. Determines the effective mode (handles inline collapsed state becoming vertical).
+     * 2. Constructs the class map for the host element based on mode and theme.
+     * 3. Renders the Host element with role="menu".
+     * 4. Renders a `<ul>` list container.
+     * 5. Renders the default slot for menu items and submenus.
+     * 6. Listens to `slotchange` to sync props to new children.
+     *
+     * @returns {JSX.Element} The component tree.
+     */
+    render() {
+        const effectiveMode = this.inlineCollapsed && this.mode === 'inline' ? 'vertical' : this.mode;
+        const classes = {
+            'x-menu': true,
+            'x-menu-root': true,
+            [`x-menu-${effectiveMode}`]: true,
+            [`x-menu-${this.theme}`]: true,
+            'x-menu-inline-collapsed': this.inlineCollapsed && this.mode === 'inline',
+        };
+        return (h(Host, { key: '73e2102c66edbb6c14b89dbe2610e7d24ceaa1cb', class: classes, role: "menu" }, h("ul", { key: '28fdce7848e9b87b008accead28389e2511d460f', class: "x-menu-list", part: "list" }, h("slot", { key: 'f3b676f3d37836e5360d559533508e8047fba74f', onSlotchange: () => this.syncChildrenProps() }))));
+    }
+    static get is() { return "x-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuMode",
+                    "resolved": "\"horizontal\" | \"inline\" | \"vertical\"",
+                    "references": {
+                        "MenuMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::MenuMode",
+                            "referenceLocation": "MenuMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu mode=\"horizontal\"></x-menu>"
+                        }],
+                    "text": "Type of menu: vertical, horizontal, or inline"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'vertical'"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MenuTheme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "MenuTheme": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::MenuTheme",
+                            "referenceLocation": "MenuTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu theme=\"dark\"></x-menu>"
+                        }],
+                    "text": "Color theme of the menu"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'light'"
+            },
+            "inlineCollapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu inlineCollapsed></x-menu>"
+                        }],
+                    "text": "Specifies the collapsed status when menu is inline mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline-collapsed",
+                "defaultValue": "false"
+            },
+            "inlineIndent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu inlineIndent={32}></x-menu>"
+                        }],
+                    "text": "Indent (in pixels) of inline menu items on each level"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inline-indent",
+                "defaultValue": "24"
+            },
+            "defaultSelectedKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu defaultSelectedKeys={['home']}></x-menu>"
+                        }],
+                    "text": "Array with the keys of default selected menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "selectedKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu selectedKeys={['settings']}></x-menu>"
+                        }],
+                    "text": "Array with the keys of currently selected menu items (controlled)"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "defaultOpenKeys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu defaultOpenKeys={['sub-1']}></x-menu>"
+                        }],
+                    "text": "Array with the keys of default opened sub-menus"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "openKeys": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu openKeys={['sub-1']}></x-menu>"
+                        }],
+                    "text": "Array with the keys of currently opened sub-menus (controlled)"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu multiple></x-menu>"
+                        }],
+                    "text": "Allows selection of multiple items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "selectable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu selectable={false}></x-menu>"
+                        }],
+                    "text": "Allows selecting menu items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selectable",
+                "defaultValue": "true"
+            },
+            "triggerSubMenuAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TriggerSubMenuAction",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {
+                        "TriggerSubMenuAction": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::TriggerSubMenuAction",
+                            "referenceLocation": "TriggerSubMenuAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu triggerSubMenuAction=\"click\"></x-menu>"
+                        }],
+                    "text": "Which action can trigger submenu open/close"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-sub-menu-action",
+                "defaultValue": "'hover'"
+            },
+            "subMenuOpenDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu subMenuOpenDelay={0.2}></x-menu>"
+                        }],
+                    "text": "Delay time to show submenu when mouse enters (in seconds)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sub-menu-open-delay",
+                "defaultValue": "0"
+            },
+            "subMenuCloseDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu subMenuCloseDelay={0.2}></x-menu>"
+                        }],
+                    "text": "Delay time to hide submenu when mouse leaves (in seconds)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sub-menu-close-delay",
+                "defaultValue": "0.1"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalSelectedKeys": {},
+            "internalOpenKeys": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xSelect",
+                "name": "xSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu onXSelect={(ev) => console.log(ev.detail)}></x-menu>"
+                        }],
+                    "text": "Called when a menu item is selected"
+                },
+                "complexType": {
+                    "original": "MenuSelectDetail",
+                    "resolved": "MenuSelectDetail",
+                    "references": {
+                        "MenuSelectDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::MenuSelectDetail",
+                            "referenceLocation": "MenuSelectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDeselect",
+                "name": "xDeselect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu onXDeselect={(ev) => console.log(ev.detail)}></x-menu>"
+                        }],
+                    "text": "Called when a menu item is deselected (multiple mode only)"
+                },
+                "complexType": {
+                    "original": "MenuDeselectDetail",
+                    "resolved": "MenuDeselectDetail",
+                    "references": {
+                        "MenuDeselectDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::MenuDeselectDetail",
+                            "referenceLocation": "MenuDeselectDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xClick",
+                "name": "xClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu onXClick={(ev) => console.log(ev.detail)}></x-menu>"
+                        }],
+                    "text": "Called when a menu item is clicked"
+                },
+                "complexType": {
+                    "original": "MenuClickDetail",
+                    "resolved": "MenuClickDetail",
+                    "references": {
+                        "MenuClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::MenuClickDetail",
+                            "referenceLocation": "MenuClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-menu onXOpenChange={(ev) => console.log(ev.detail)}></x-menu>"
+                        }],
+                    "text": "Called when sub-menus are opened or closed"
+                },
+                "complexType": {
+                    "original": "MenuOpenChangeDetail",
+                    "resolved": "MenuOpenChangeDetail",
+                    "references": {
+                        "MenuOpenChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-menu/types.ts::MenuOpenChangeDetail",
+                            "referenceLocation": "MenuOpenChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedKeys",
+                "methodName": "handleSelectedKeysChange"
+            }, {
+                "propName": "openKeys",
+                "methodName": "handleOpenKeysChange"
+            }, {
+                "propName": "mode",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "theme",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "inlineCollapsed",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "inlineIndent",
+                "methodName": "handlePropsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "xMenuItemClick",
+                "method": "handleItemClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "xSubmenuToggle",
+                "method": "handleSubmenuToggle",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}