huibo-ui 0.3.0

package/dist/collection/components/Menu/Menu.js

@@ -0,0 +1,246 @@
+import { h } from "@stencil/core";
+/**
+ * Menu 导航菜单组件
+ * 为页面和功能提供导航的菜单
+ */
+export class Menu {
+    el;
+    /** 模式 */
+    mode = 'vertical';
+    /** 当前激活菜单项 */
+    defaultActive = '';
+    /** 是否折叠（仅垂直模式） */
+    collapsed = false;
+    /** 背景色 */
+    backgroundColor;
+    /** 文字颜色 */
+    textColor;
+    /** 激活项文字颜色 */
+    activeTextColor;
+    activeItem = '';
+    /** 选中事件 */
+    hbSelect;
+    componentDidLoad() {
+        this.activeItem = this.defaultActive;
+        // 折叠态透传给子 hb-sub-menu（子组件无法继承 prop，需在 host 属性层面同步）
+        this.syncCollapsedToChildren();
+    }
+    handleDefaultActiveChange() {
+        this.activeItem = this.defaultActive;
+    }
+    handleCollapsedChange() {
+        this.syncCollapsedToChildren();
+    }
+    /**
+     * 把 collapsed 状态同步到所有直连与嵌套的 hb-sub-menu 子节点。
+     * querySelectorAll 递归匹配，因此 hb-sub-menu > hb-sub-menu（多级）也会被覆盖。
+     */
+    syncCollapsedToChildren() {
+        if (!this.el)
+            return;
+        this.el.querySelectorAll('hb-sub-menu').forEach((sub) => {
+            sub.setAttribute('collapsed', this.collapsed ? 'true' : 'false');
+        });
+    }
+    /** 监听子 hb-menu-item 派发的内部选中事件，更新激活态并向外发射公开的 hbSelect */
+    handleSelect(event) {
+        const key = event.detail;
+        this.activeItem = key;
+        this.defaultActive = key;
+        this.hbSelect.emit(key);
+        // 通知子组件（含嵌套在 hb-sub-menu 内的 hb-menu-item）
+        this.el.querySelectorAll('hb-menu-item').forEach((item) => {
+            item.setAttribute('active', item.getAttribute('key') === key ? 'true' : 'false');
+        });
+    }
+    render() {
+        const style = {};
+        if (this.backgroundColor)
+            style['--hb-menu-bg'] = this.backgroundColor;
+        if (this.textColor)
+            style['--hb-menu-color'] = this.textColor;
+        if (this.activeTextColor)
+            style['--hb-menu-active-color'] = this.activeTextColor;
+        return (h("ul", { key: '0352bda3d62d4a280681612a7bf301f16459bcc0', class: {
+                'hb-menu': true,
+                [`hb-menu--${this.mode}`]: true,
+                'hb-menu--collapsed': this.collapsed,
+            }, style: style, role: "menu" }, h("slot", { key: '142fea193616a6e311b854f6bd893e0646950b29' })));
+    }
+    static get is() { return "hb-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6A21\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "defaultActive": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u6FC0\u6D3B\u83DC\u5355\u9879"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-active",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u6298\u53E0\uFF08\u4EC5\u5782\u76F4\u6A21\u5F0F\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapsed",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "backgroundColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u80CC\u666F\u8272"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "background-color",
+                "reflect": false
+            },
+            "textColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6587\u5B57\u989C\u8272"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text-color",
+                "reflect": false
+            },
+            "activeTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6FC0\u6D3B\u9879\u6587\u5B57\u989C\u8272"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active-text-color",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeItem": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbSelect",
+                "name": "hbSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9009\u4E2D\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "defaultActive",
+                "methodName": "handleDefaultActiveChange"
+            }, {
+                "propName": "collapsed",
+                "methodName": "handleCollapsedChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "hbMenuItemSelect",
+                "method": "handleSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=Menu.js.map

package/dist/collection/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Watch, Event, EventEmitter, Listen } from '@stencil/core';\n\n/**\n * Menu 导航菜单组件\n * 为页面和功能提供导航的菜单\n */\n@Component({\n  tag: 'hb-menu',\n  styleUrl: 'menu.css',\n  shadow: true,\n})\nexport class Menu {\n  @Element() el: HTMLElement;\n\n  /** 模式 */\n  @Prop() mode: 'horizontal' | 'vertical' = 'vertical';\n\n  /** 当前激活菜单项 */\n  @Prop({ mutable: true }) defaultActive: string = '';\n\n  /** 是否折叠（仅垂直模式） */\n  @Prop() collapsed: boolean = false;\n\n  /** 背景色 */\n  @Prop() backgroundColor?: string;\n\n  /** 文字颜色 */\n  @Prop() textColor?: string;\n\n  /** 激活项文字颜色 */\n  @Prop() activeTextColor?: string;\n\n  @State() activeItem: string = '';\n\n  /** 选中事件 */\n  @Event() hbSelect: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.activeItem = this.defaultActive;\n    // 折叠态透传给子 hb-sub-menu（子组件无法继承 prop，需在 host 属性层面同步）\n    this.syncCollapsedToChildren();\n  }\n\n  @Watch('defaultActive')\n  handleDefaultActiveChange() {\n    this.activeItem = this.defaultActive;\n  }\n\n  @Watch('collapsed')\n  handleCollapsedChange() {\n    this.syncCollapsedToChildren();\n  }\n\n  /**\n   * 把 collapsed 状态同步到所有直连与嵌套的 hb-sub-menu 子节点。\n   * querySelectorAll 递归匹配，因此 hb-sub-menu > hb-sub-menu（多级）也会被覆盖。\n   */\n  private syncCollapsedToChildren() {\n    if (!this.el) return;\n    this.el.querySelectorAll('hb-sub-menu').forEach((sub) => {\n      sub.setAttribute('collapsed', this.collapsed ? 'true' : 'false');\n    });\n  }\n\n  /** 监听子 hb-menu-item 派发的内部选中事件，更新激活态并向外发射公开的 hbSelect */\n  @Listen('hbMenuItemSelect')\n  handleSelect(event: CustomEvent<string>) {\n    const key = event.detail;\n    this.activeItem = key;\n    this.defaultActive = key;\n    this.hbSelect.emit(key);\n    // 通知子组件（含嵌套在 hb-sub-menu 内的 hb-menu-item）\n    this.el.querySelectorAll('hb-menu-item').forEach((item) => {\n      item.setAttribute('active', item.getAttribute('key') === key ? 'true' : 'false');\n    });\n  }\n\n  render() {\n    const style: Record<string, string> = {};\n    if (this.backgroundColor) style['--hb-menu-bg'] = this.backgroundColor;\n    if (this.textColor) style['--hb-menu-color'] = this.textColor;\n    if (this.activeTextColor) style['--hb-menu-active-color'] = this.activeTextColor;\n\n    return (\n      <ul\n        class={{\n          'hb-menu': true,\n          [`hb-menu--${this.mode}`]: true,\n          'hb-menu--collapsed': this.collapsed,\n        }}\n        style={style}\n        role=\"menu\"\n      >\n        <slot />\n      </ul>\n    );\n  }\n}\n"]}

package/dist/collection/components/Menu/MenuItem.js

@@ -0,0 +1,128 @@
+import { h } from "@stencil/core";
+import { isActivationKey } from "../../utils/a11y";
+/**
+ * MenuItem 菜单项
+ */
+export class MenuItem {
+    el;
+    /** 唯一标识 */
+    key = '';
+    /** 是否禁用 */
+    disabled = false;
+    /** 图标 */
+    icon;
+    /** 是否激活（由父级 Menu 设置） */
+    active = false;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        const menu = this.el.closest('hb-menu');
+        if (menu) {
+            // 使用内部事件名 hbMenuItemSelect，与 Menu 向外发射的公开事件 hbSelect 区分，
+            // 否则 Menu 的 @Listen('hbSelect') 会被自身 emit 的事件再次触发，导致无限递归。
+            menu.dispatchEvent(new CustomEvent('hbMenuItemSelect', { detail: this.key, bubbles: true }));
+        }
+    };
+    handleKeydown = (e) => {
+        if (this.disabled)
+            return;
+        if (isActivationKey(e.key)) {
+            e.preventDefault();
+            this.handleClick();
+        }
+    };
+    render() {
+        return (h("li", { key: '34b8ae3ee2a580757cd0c01261772e6de97bf332', class: {
+                'hb-menu-item': true,
+                'hb-menu-item--active': this.active,
+                'hb-menu-item--disabled': this.disabled,
+            }, role: "menuitem", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.active ? 'page' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, this.icon && h("span", { key: 'a0b70a81ce4f8ed1cef7bd37c5b194a02554bc22', class: "hb-menu-item__icon" }, this.icon), h("span", { key: '8ef65eda6376d1e16ed614fa30e7cef532abc2ad', class: "hb-menu-item__text" }, h("slot", { key: '716cf4bc2cd4cd6d992010759d55f2924662cd9a' }))));
+    }
+    static get is() { return "hb-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "key": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u552F\u4E00\u6807\u8BC6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "key",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u56FE\u6807"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u6FC0\u6D3B\uFF08\u7531\u7236\u7EA7 Menu \u8BBE\u7F6E\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=MenuItem.js.map

package/dist/collection/components/Menu/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;GAEG;AAKH,MAAM,OAAO,QAAQ;IACR,EAAE,CAAc;IAE3B,WAAW;IACH,GAAG,GAAW,EAAE,CAAC;IAEzB,WAAW;IACH,QAAQ,GAAY,KAAK,CAAC;IAElC,SAAS;IACD,IAAI,CAAU;IAEtB,wBAAwB;IAChB,MAAM,GAAY,KAAK,CAAC;IAExB,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,IAAI,EAAE,CAAC;YACT,yDAAyD;YACzD,0DAA0D;YAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC/F,CAAC;IACH,CAAC,CAAC;IAEM,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QAC3C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,2DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,sBAAsB,EAAE,IAAI,CAAC,MAAM;gBACnC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,kBACnC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;YAE5B,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,IAAI,CAAQ;YACjE,6DAAM,KAAK,EAAC,oBAAoB;gBAAC,8DAAQ,CAAO,CAC7C,CACN,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { isActivationKey } from '../../utils/a11y';\n\n/**\n * MenuItem 菜单项\n */\n@Component({\n  tag: 'hb-menu-item',\n  shadow: true,\n})\nexport class MenuItem {\n  @Element() el: HTMLElement;\n\n  /** 唯一标识 */\n  @Prop() key: string = '';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 图标 */\n  @Prop() icon?: string;\n\n  /** 是否激活（由父级 Menu 设置） */\n  @Prop() active: boolean = false;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n    const menu = this.el.closest('hb-menu');\n    if (menu) {\n      // 使用内部事件名 hbMenuItemSelect，与 Menu 向外发射的公开事件 hbSelect 区分，\n      // 否则 Menu 的 @Listen('hbSelect') 会被自身 emit 的事件再次触发，导致无限递归。\n      menu.dispatchEvent(new CustomEvent('hbMenuItemSelect', { detail: this.key, bubbles: true }));\n    }\n  };\n\n  private handleKeydown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n    if (isActivationKey(e.key)) {\n      e.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  render() {\n    return (\n      <li\n        class={{\n          'hb-menu-item': true,\n          'hb-menu-item--active': this.active,\n          'hb-menu-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        tabindex={this.disabled ? -1 : 0}\n        aria-disabled={this.disabled ? 'true' : undefined}\n        aria-current={this.active ? 'page' : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeydown}\n      >\n        {this.icon && <span class=\"hb-menu-item__icon\">{this.icon}</span>}\n        <span class=\"hb-menu-item__text\"><slot /></span>\n      </li>\n    );\n  }\n}\n"]}

package/dist/collection/components/Menu/SubMenu.js

@@ -0,0 +1,140 @@
+import { h } from "@stencil/core";
+import { isActivationKey } from "../../utils/a11y";
+/**
+ * SubMenu 子菜单
+ *
+ * 设计要点：
+ * - 不拦截 hbMenuItemSelect：MenuItem 点击派发的内部事件会冒泡穿过 SubMenu 到达 Menu，
+ *   由 Menu 的 @Listen('hbMenuItemSelect') 统一处理（避免无限递归的设计见 MenuItem.handleClick）。
+ * - 折叠模式（collapsed=true，由父 Menu 通过 prop 传入）：不再就地展开，
+ *   改为标题悬停时弹出二级浮层（popover）；标题节点带 title 属性提供原生文字提示。
+ */
+export class SubMenu {
+    el;
+    /** 标题 */
+    label = '';
+    /** 图标 */
+    icon;
+    /**
+     * 是否处于折叠态（由父 hb-menu 在 collapsed=true 时透传）。
+     * 折叠态下不再就地展开，而是悬停弹出浮层。
+     */
+    collapsed = false;
+    isOpen = false;
+    isHover = false;
+    toggle = () => {
+        // 折叠态不就地切换展开（改由 hover 浮层承载子菜单）
+        if (this.collapsed)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleTitleKeydown = (e) => {
+        if (isActivationKey(e.key)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.collapsed)
+            return;
+        this.isHover = true;
+    };
+    handleMouseLeave = () => {
+        if (!this.collapsed)
+            return;
+        this.isHover = false;
+    };
+    /** 折叠态浮层内点击子项后，收起浮层 */
+    handleChildrenClick = () => {
+        if (!this.collapsed)
+            return;
+        this.isHover = false;
+    };
+    render() {
+        // 折叠态：浮层是否显示由 hover 决定；非折叠态：就地展开由 isOpen 决定
+        const showChildren = this.collapsed ? this.isHover : this.isOpen;
+        return (h("li", { key: '2158b7ce59919c89c5f86a1218e1f2c16fb7cc11', class: {
+                'hb-sub-menu': true,
+                'hb-sub-menu--open': this.isOpen,
+                'hb-sub-menu--collapsed': this.collapsed,
+            }, role: "menuitem", "aria-haspopup": "menu", "aria-expanded": showChildren ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'ed1b49c0417a21673d8eac14dfb15e31db722917', class: "hb-sub-menu__title", role: "button", tabindex: 0, "aria-expanded": showChildren ? 'true' : 'false',
+            // 折叠态用原生 title 提供文字提示（图标条场景）
+            title: this.collapsed ? this.label : undefined, onClick: this.toggle, onKeyDown: this.handleTitleKeydown }, this.icon && h("span", { key: '488430d18a0a4c2fd81f38d621988b3a06ef874a', class: "hb-sub-menu__icon" }, this.icon), h("span", { key: 'ba16d8aaddeba6ec00a9b19ac4069802a1cc503b', class: "hb-sub-menu__label" }, this.label), h("span", { key: 'cf3b32672f9f36d4ffbe570f7dbad1e2755afe3c', class: { 'hb-sub-menu__arrow': true, 'hb-sub-menu__arrow--open': showChildren } }, "\u25B6")), showChildren && (h("ul", { key: '6f0404f6e5b89ae0c59b47630f8d17620800b46f', class: {
+                'hb-sub-menu__children': true,
+                'hb-sub-menu__children--popover': this.collapsed,
+            }, role: "menu", onClick: this.handleChildrenClick }, h("slot", { key: '795f95cc807e590339faff8745eb6c36c326f9f2' })))));
+    }
+    static get is() { return "hb-sub-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u9898"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u56FE\u6807"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u5904\u4E8E\u6298\u53E0\u6001\uFF08\u7531\u7236 hb-menu \u5728 collapsed=true \u65F6\u900F\u4F20\uFF09\u3002\n\u6298\u53E0\u6001\u4E0B\u4E0D\u518D\u5C31\u5730\u5C55\u5F00\uFF0C\u800C\u662F\u60AC\u505C\u5F39\u51FA\u6D6E\u5C42\u3002"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "collapsed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "isHover": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=SubMenu.js.map

package/dist/collection/components/Menu/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","sourceRoot":"","sources":["../../../src/components/Menu/SubMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { isActivationKey } from '../../utils/a11y';\n\n/**\n * SubMenu 子菜单\n *\n * 设计要点：\n * - 不拦截 hbMenuItemSelect：MenuItem 点击派发的内部事件会冒泡穿过 SubMenu 到达 Menu，\n *   由 Menu 的 @Listen('hbMenuItemSelect') 统一处理（避免无限递归的设计见 MenuItem.handleClick）。\n * - 折叠模式（collapsed=true，由父 Menu 通过 prop 传入）：不再就地展开，\n *   改为标题悬停时弹出二级浮层（popover）；标题节点带 title 属性提供原生文字提示。\n */\n@Component({\n  tag: 'hb-sub-menu',\n  shadow: true,\n})\nexport class SubMenu {\n  @Element() el: HTMLElement;\n\n  /** 标题 */\n  @Prop() label: string = '';\n\n  /** 图标 */\n  @Prop() icon?: string;\n\n  /**\n   * 是否处于折叠态（由父 hb-menu 在 collapsed=true 时透传）。\n   * 折叠态下不再就地展开，而是悬停弹出浮层。\n   */\n  @Prop() collapsed: boolean = false;\n\n  @State() isOpen: boolean = false;\n  @State() isHover: boolean = false;\n\n  private toggle = () => {\n    // 折叠态不就地切换展开（改由 hover 浮层承载子菜单）\n    if (this.collapsed) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleTitleKeydown = (e: KeyboardEvent) => {\n    if (isActivationKey(e.key)) {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.collapsed) return;\n    this.isHover = true;\n  };\n\n  private handleMouseLeave = () => {\n    if (!this.collapsed) return;\n    this.isHover = false;\n  };\n\n  /** 折叠态浮层内点击子项后，收起浮层 */\n  private handleChildrenClick = () => {\n    if (!this.collapsed) return;\n    this.isHover = false;\n  };\n\n  render() {\n    // 折叠态：浮层是否显示由 hover 决定；非折叠态：就地展开由 isOpen 决定\n    const showChildren = this.collapsed ? this.isHover : this.isOpen;\n\n    return (\n      <li\n        class={{\n          'hb-sub-menu': true,\n          'hb-sub-menu--open': this.isOpen,\n          'hb-sub-menu--collapsed': this.collapsed,\n        }}\n        role=\"menuitem\"\n        aria-haspopup=\"menu\"\n        aria-expanded={showChildren ? 'true' : 'false'}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <div\n          class=\"hb-sub-menu__title\"\n          role=\"button\"\n          tabindex={0}\n          aria-expanded={showChildren ? 'true' : 'false'}\n          // 折叠态用原生 title 提供文字提示（图标条场景）\n          title={this.collapsed ? this.label : undefined}\n          onClick={this.toggle}\n          onKeyDown={this.handleTitleKeydown}\n        >\n          {this.icon && <span class=\"hb-sub-menu__icon\">{this.icon}</span>}\n          <span class=\"hb-sub-menu__label\">{this.label}</span>\n          <span class={{ 'hb-sub-menu__arrow': true, 'hb-sub-menu__arrow--open': showChildren }}>▶</span>\n        </div>\n        {showChildren && (\n          <ul\n            class={{\n              'hb-sub-menu__children': true,\n              'hb-sub-menu__children--popover': this.collapsed,\n            }}\n            role=\"menu\"\n            onClick={this.handleChildrenClick}\n          >\n            <slot />\n          </ul>\n        )}\n      </li>\n    );\n  }\n}\n"]}