huibo-ui 0.3.0

package/dist/collection/components/Divider/Divider.js

@@ -0,0 +1,102 @@
+import { h } from "@stencil/core";
+/**
+ * Divider 分割线组件
+ * 区隔内容的分割线
+ */
+export class Divider {
+    el;
+    /** 分割线方向 */
+    direction = 'horizontal';
+    /** 文字位置 */
+    contentPosition = 'center';
+    /** 是否虚线 */
+    dashed = false;
+    render() {
+        const hasContent = this.el.childNodes.length > 0;
+        return (h("div", { key: '9c92e52f27cf63f9eb08f76204c0380df1f70762', class: {
+                'hb-divider': true,
+                [`hb-divider--${this.direction}`]: true,
+                'hb-divider--dashed': this.dashed,
+                'hb-divider--with-text': hasContent,
+                [`hb-divider--with-text-${this.contentPosition}`]: hasContent,
+            } }, h("div", { key: 'be7ed538cb7c11ecd5228456c70064b7a1134c22', class: "hb-divider__line hb-divider__line--before" }), h("div", { key: '381b60a6d74c9d595d23ba931f4de73a1479d45c', class: "hb-divider__text" }, h("slot", { key: '0bd08b0d41a9d2d4dad651e0c37a7e7fc10eab4c' })), h("div", { key: 'dd0774049f2b68b47f21c7171532f830d766c276', class: "hb-divider__line hb-divider__line--after" })));
+    }
+    static get is() { return "hb-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5206\u5272\u7EBF\u65B9\u5411"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "contentPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'center' | 'right'",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6587\u5B57\u4F4D\u7F6E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "content-position",
+                "reflect": false,
+                "defaultValue": "'center'"
+            },
+            "dashed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u865A\u7EBF"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dashed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE5D;;;GAGG;AAMH,MAAM,OAAO,OAAO;IACP,EAAE,CAAc;IAE3B,YAAY;IACJ,SAAS,GAA8B,YAAY,CAAC;IAE5D,WAAW;IACH,eAAe,GAAgC,QAAQ,CAAC;IAEhE,WAAW;IACH,MAAM,GAAY,KAAK,CAAC;IAEhC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QACjD,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI;gBAClB,CAAC,eAAe,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;gBACvC,oBAAoB,EAAE,IAAI,CAAC,MAAM;gBACjC,uBAAuB,EAAE,UAAU;gBACnC,CAAC,yBAAyB,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,UAAU;aAC9D;YAED,4DAAK,KAAK,EAAC,2CAA2C,GAAO;YAC7D,4DAAK,KAAK,EAAC,kBAAkB;gBAAC,8DAAQ,CAAM;YAC5C,4DAAK,KAAK,EAAC,0CAA0C,GAAO,CACxD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * Divider 分割线组件\n * 区隔内容的分割线\n */\n@Component({\n  tag: 'hb-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class Divider {\n  @Element() el: HTMLElement;\n\n  /** 分割线方向 */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** 文字位置 */\n  @Prop() contentPosition: 'left' | 'center' | 'right' = 'center';\n\n  /** 是否虚线 */\n  @Prop() dashed: boolean = false;\n\n  render() {\n    const hasContent = this.el.childNodes.length > 0;\n    return (\n      <div\n        class={{\n          'hb-divider': true,\n          [`hb-divider--${this.direction}`]: true,\n          'hb-divider--dashed': this.dashed,\n          'hb-divider--with-text': hasContent,\n          [`hb-divider--with-text-${this.contentPosition}`]: hasContent,\n        }}\n      >\n        <div class=\"hb-divider__line hb-divider__line--before\"></div>\n        <div class=\"hb-divider__text\"><slot /></div>\n        <div class=\"hb-divider__line hb-divider__line--after\"></div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Divider/divider.css

@@ -0,0 +1,40 @@
+:host {
+  display: block;
+}
+
+.hb-divider {
+  display: flex;
+  align-items: center;
+  margin: var(--hb-spacing-md) 0;
+  border: 0;
+  color: var(--hb-color-text-secondary);
+  font-size: var(--hb-font-size-sm);
+}
+
+.hb-divider__line {
+  flex: 1;
+  border-top: 1px solid var(--hb-color-border-secondary);
+}
+
+.hb-divider--dashed .hb-divider__line {
+  border-top-style: dashed;
+}
+
+.hb-divider--vertical {
+  display: inline-flex;
+  flex-direction: column;
+  margin: 0 var(--hb-spacing-xs);
+  height: 0.9em;
+}
+
+.hb-divider--vertical .hb-divider__line {
+  border-top: none;
+  border-left: 1px solid var(--hb-color-border-secondary);
+  flex: none;
+  height: 100%;
+}
+
+.hb-divider__text {
+  padding: 0 var(--hb-spacing-sm);
+  white-space: nowrap;
+}

package/dist/collection/components/Drawer/Drawer.js

@@ -0,0 +1,289 @@
+import { h } from "@stencil/core";
+import { lockScroll, unlockScroll, getNextZIndex } from "../../utils/popup-manager";
+import { createFocusTrap } from "../../utils/a11y";
+export class Drawer {
+    modelValue = false;
+    title = '';
+    size = '30%';
+    direction = 'rtl';
+    closeOnClickModal = true;
+    showClose = true;
+    modal = true;
+    /** 是否按 ESC 关闭 */
+    closeOnPressEscape = true;
+    zIndexState = 0;
+    zIndex = 0;
+    panelRef;
+    trap;
+    hbOpen;
+    hbClose;
+    handleVisible(val) {
+        if (val) {
+            this.zIndex = getNextZIndex();
+            this.zIndexState = this.zIndex;
+            if (this.modal)
+                lockScroll();
+            this.hbOpen.emit();
+            document.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            if (this.modal)
+                unlockScroll();
+            this.hbClose.emit();
+            document.removeEventListener('keydown', this.handleKeyDown);
+        }
+    }
+    componentDidRender() {
+        if (!this.panelRef)
+            return;
+        if (this.modelValue) {
+            if (!this.trap) {
+                this.trap = createFocusTrap({ container: this.panelRef });
+            }
+            this.trap.connect();
+        }
+        else {
+            this.trap?.disconnect();
+        }
+    }
+    disconnectedCallback() {
+        if (this.modelValue && this.modal)
+            unlockScroll();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.trap?.disconnect();
+    }
+    handleKeyDown = (e) => {
+        if (this.closeOnPressEscape && e.key === 'Escape') {
+            this.close();
+        }
+    };
+    close = () => { this.modelValue = false; };
+    render() {
+        const dir = this.direction;
+        const isVertical = dir === 'ttb' || dir === 'btt';
+        const sizeStyle = isVertical ? { height: this.size } : { width: this.size };
+        const translateClass = `hb-drawer--${dir}`;
+        return (h("div", { key: 'fdcae509a34a2de7ba9405106b217fda8ce765fa', class: { 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue } }, this.modal && h("div", { key: '439a2a35c0936bc0e347e7826f801dbf87d1047b', class: "hb-drawer__overlay", style: { zIndex: String(this.zIndexState) }, onClick: () => this.closeOnClickModal && this.close() }), h("div", { key: '924fc27dc43f9d7b466b81a7b70cbfb1a6ba199e', ref: (el) => (this.panelRef = el), class: { 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }, style: { ...sizeStyle, zIndex: String(this.zIndexState + 1) }, role: "dialog", "aria-modal": "true", "aria-label": this.title || undefined }, h("div", { key: '6c0c1e6e4938ad96c51add0e4be93de8ef72a056', class: "hb-drawer__header" }, h("span", { key: 'bc061a418b7358364b19190cc6b042fb5a049c95', class: "hb-drawer__title" }, this.title), this.showClose && h("button", { key: '52ceeac26c55f0e89c8c4410959c25b13ab2e28b', type: "button", class: "hb-drawer__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7")), h("div", { key: 'ca916f681e9c7e4fb33d1d0b7cee03a20f42f7eb', class: "hb-drawer__body" }, h("slot", { key: 'f8a3fb1d251d5c16c98257bb8896c081623f321e' })))));
+    }
+    static get is() { return "hb-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'30%'"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'ltr' | 'rtl' | 'ttb' | 'btt'",
+                    "resolved": "\"btt\" | \"ltr\" | \"rtl\" | \"ttb\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'rtl'"
+            },
+            "closeOnClickModal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "close-on-click-modal",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "modal",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "closeOnPressEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u6309 ESC \u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "close-on-press-escape",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "zIndexState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbOpen",
+                "name": "hbOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "hbClose",
+                "name": "hbClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleVisible"
+            }];
+    }
+}
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n@Component({ tag: 'hb-drawer', styleUrl: 'drawer.css', shadow: true })\nexport class Drawer {\n  @Prop({ mutable: true }) modelValue: boolean = false;\n  @Prop() title: string = '';\n  @Prop() size: string = '30%';\n  @Prop() direction: 'ltr' | 'rtl' | 'ttb' | 'btt' = 'rtl';\n  @Prop() closeOnClickModal: boolean = true;\n  @Prop() showClose: boolean = true;\n  @Prop() modal: boolean = true;\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n  @State() private zIndexState: number = 0;\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Event() hbOpen: EventEmitter<void>;\n  @Event() hbClose: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleVisible(val: boolean) {\n    if (val) {\n      this.zIndex = getNextZIndex();\n      this.zIndexState = this.zIndex;\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      this.hbClose.emit();\n      document.removeEventListener('keydown', this.handleKeyDown);\n    }\n  }\n\n  componentDidRender() {\n    if (!this.panelRef) return;\n    if (this.modelValue) {\n      if (!this.trap) {\n        this.trap = createFocusTrap({ container: this.panelRef });\n      }\n      this.trap.connect();\n    } else {\n      this.trap?.disconnect();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.modelValue && this.modal) unlockScroll();\n    document.removeEventListener('keydown', this.handleKeyDown);\n    this.trap?.disconnect();\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => { this.modelValue = false; };\n\n  render() {\n    const dir = this.direction;\n    const isVertical = dir === 'ttb' || dir === 'btt';\n    const sizeStyle = isVertical ? { height: this.size } : { width: this.size };\n    const translateClass = `hb-drawer--${dir}`;\n\n    return (\n      <div class={{ 'hb-drawer-wrapper': true, 'hb-drawer-wrapper--visible': this.modelValue }}>\n        {this.modal && <div class=\"hb-drawer__overlay\" style={{ zIndex: String(this.zIndexState) }} onClick={() => this.closeOnClickModal && this.close()} />}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{ 'hb-drawer': true, [translateClass]: true, 'hb-drawer--visible': this.modelValue }}\n          style={{ ...sizeStyle, zIndex: String(this.zIndexState + 1) }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label={this.title || undefined}\n        >\n          <div class=\"hb-drawer__header\">\n            <span class=\"hb-drawer__title\">{this.title}</span>\n            {this.showClose && <button type=\"button\" class=\"hb-drawer__close\" aria-label=\"关闭\" onClick={this.close}>×</button>}\n          </div>\n          <div class=\"hb-drawer__body\"><slot /></div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Drawer/drawer.css

@@ -0,0 +1,18 @@
+:host { display: contents; }
+.hb-drawer-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1000; }
+.hb-drawer__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--hb-color-bg-mask); pointer-events: auto; transition: opacity 0.3s; }
+.hb-drawer {
+  position: fixed; background: var(--hb-color-bg-elevated); box-shadow: var(--hb-box-shadow-lg);
+  display: flex; flex-direction: column; pointer-events: auto; transition: transform 0.3s ease;
+}
+.hb-drawer--rtl { top: 0; right: 0; bottom: 0; transform: translateX(100%); }
+.hb-drawer--ltr { top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
+.hb-drawer--ttb { left: 0; right: 0; top: 0; transform: translateY(-100%); }
+.hb-drawer--btt { left: 0; right: 0; bottom: 0; transform: translateY(100%); }
+.hb-drawer--visible.hb-drawer--rtl, .hb-drawer--visible.hb-drawer--ltr { transform: translateX(0); }
+.hb-drawer--visible.hb-drawer--ttb, .hb-drawer--visible.hb-drawer--btt { transform: translateY(0); }
+.hb-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--hb-spacing-md) var(--hb-spacing-lg); border-bottom: 1px solid var(--hb-color-border-secondary); }
+.hb-drawer__title { font-size: var(--hb-font-size-lg); font-weight: 600; }
+.hb-drawer__close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--hb-color-text-secondary); width: 28px; height: 28px; border-radius: var(--hb-border-radius-sm); display: flex; align-items: center; justify-content: center; }
+.hb-drawer__close:hover { background: var(--hb-color-fill-tertiary); }
+.hb-drawer__body { flex: 1; padding: var(--hb-spacing-lg); overflow-y: auto; }

package/dist/collection/components/Dropdown/Dropdown.js

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+import { createClickOutsideHandler } from "../../utils/click-outside";
+import { getNextZIndex } from "../../utils/popup-manager";
+/**
+ * Dropdown 下拉菜单组件
+ * 将动作或菜单折叠到下拉菜单中
+ */
+export class Dropdown {
+    el;
+    /** 菜单项 */
+    items = [];
+    /** 触发方式 */
+    trigger = 'hover';
+    /** 是否禁用 */
+    disabled = false;
+    isOpen = false;
+    /** 命令事件 */
+    hbCommand;
+    clickOutside = createClickOutsideHandler({
+        host: null,
+        isOpen: () => this.isOpen,
+        onClose: () => { this.isOpen = false; },
+    });
+    componentDidLoad() {
+        this.clickOutside = createClickOutsideHandler({
+            host: this.el,
+            isOpen: () => this.isOpen,
+            onClose: () => { this.isOpen = false; },
+        });
+        if (this.trigger === 'click') {
+            this.clickOutside.connect();
+        }
+    }
+    disconnectedCallback() {
+        this.clickOutside.disconnect();
+    }
+    show = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = true;
+    };
+    hide = () => {
+        this.isOpen = false;
+    };
+    toggle = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleSelect = (item) => {
+        if (item.disabled)
+            return;
+        this.isOpen = false;
+        this.hbCommand.emit(item.key);
+    };
+    render() {
+        const triggerEvents = this.trigger === 'hover'
+            ? { onMouseEnter: this.show, onMouseLeave: this.hide }
+            : { onClick: this.toggle };
+        return (h("div", { key: '65db176398a94c702f6c3fcdc4128ed0e6afc376', class: "hb-dropdown", ...triggerEvents }, h("div", { key: '2c96f9af4f69d1a1c52195546b5b777e5a2d54b8', class: "hb-dropdown__trigger" }, h("slot", { key: 'cd007dcd7d357cc1d041472a72faa0a3a025bda2' })), this.isOpen && (h("div", { key: 'a3bdebbc0a701e01df36b701bc13de130c4e8d24', class: "hb-dropdown__menu", style: { zIndex: String(getNextZIndex()) } }, this.items.map(item => (h("div", { class: {
+                'hb-dropdown__item': true,
+                'hb-dropdown__item--disabled': item.disabled,
+                'hb-dropdown__item--divided': item.divided,
+                'hb-dropdown__item--danger': item.danger,
+            }, onClick: () => this.handleSelect(item) }, item.label)))))));
+    }
+    static get is() { return "hb-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownItem[]",
+                    "resolved": "DropdownItem[]",
+                    "references": {
+                        "DropdownItem": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Dropdown/Dropdown.tsx",
+                            "id": "src/components/Dropdown/Dropdown.tsx::DropdownItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u83DC\u5355\u9879"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hover' | 'click'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u89E6\u53D1\u65B9\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'hover'"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbCommand",
+                "name": "hbCommand",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u547D\u4EE4\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAU1D;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IACR,EAAE,CAAc;IAE3B,UAAU;IACF,KAAK,GAAmB,EAAE,CAAC;IAEnC,WAAW;IACH,OAAO,GAAsB,OAAO,CAAC;IAE7C,WAAW;IACH,QAAQ,GAAY,KAAK,CAAC;IAEzB,MAAM,GAAY,KAAK,CAAC;IAEjC,WAAW;IACF,SAAS,CAAuB;IAEjC,YAAY,GAAG,yBAAyB,CAAC;QAC/C,IAAI,EAAE,IAAW;QACjB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM;QACzB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;KACxC,CAAC,CAAC;IAEH,gBAAgB;QACd,IAAI,CAAC,YAAY,GAAG,yBAAyB,CAAC;YAC5C,IAAI,EAAE,IAAI,CAAC,EAAE;YACb,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM;YACzB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC;SACxC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC;IAEO,IAAI,GAAG,GAAG,EAAE;QAClB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC,CAAC;IAEM,IAAI,GAAG,GAAG,EAAE;QAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC;IAEM,MAAM,GAAG,GAAG,EAAE;QACpB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,IAAkB,EAAE,EAAE;QAC5C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;YAC5C,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,EAAE;YACtD,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QAE7B,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,KAAK,aAAa;YACxC,4DAAK,KAAK,EAAC,sBAAsB;gBAC/B,8DAAQ,CACJ;YACL,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,EAAE,IACtE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;oBACL,mBAAmB,EAAE,IAAI;oBACzB,6BAA6B,EAAE,IAAI,CAAC,QAAQ;oBAC5C,4BAA4B,EAAE,IAAI,CAAC,OAAO;oBAC1C,2BAA2B,EAAE,IAAI,CAAC,MAAM;iBACzC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAErC,IAAI,CAAC,KAAK,CACP,CACP,CAAC,CACE,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element, Event, EventEmitter } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\nimport { getNextZIndex } from '../../utils/popup-manager';\n\nexport interface DropdownItem {\n  key: string;\n  label: string;\n  disabled?: boolean;\n  divided?: boolean;\n  danger?: boolean;\n}\n\n/**\n * Dropdown 下拉菜单组件\n * 将动作或菜单折叠到下拉菜单中\n */\n@Component({\n  tag: 'hb-dropdown',\n  styleUrl: 'dropdown.css',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() el: HTMLElement;\n\n  /** 菜单项 */\n  @Prop() items: DropdownItem[] = [];\n\n  /** 触发方式 */\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  @State() isOpen: boolean = false;\n\n  /** 命令事件 */\n  @Event() hbCommand: EventEmitter<string>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.isOpen = false; },\n    });\n    if (this.trigger === 'click') {\n      this.clickOutside.connect();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  private show = () => {\n    if (this.disabled) return;\n    this.isOpen = true;\n  };\n\n  private hide = () => {\n    this.isOpen = false;\n  };\n\n  private toggle = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleSelect = (item: DropdownItem) => {\n    if (item.disabled) return;\n    this.isOpen = false;\n    this.hbCommand.emit(item.key);\n  };\n\n  render() {\n    const triggerEvents = this.trigger === 'hover'\n      ? { onMouseEnter: this.show, onMouseLeave: this.hide }\n      : { onClick: this.toggle };\n\n    return (\n      <div class=\"hb-dropdown\" {...triggerEvents}>\n        <div class=\"hb-dropdown__trigger\">\n          <slot />\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-dropdown__menu\" style={{ zIndex: String(getNextZIndex()) }}>\n            {this.items.map(item => (\n              <div\n                class={{\n                  'hb-dropdown__item': true,\n                  'hb-dropdown__item--disabled': item.disabled,\n                  'hb-dropdown__item--divided': item.divided,\n                  'hb-dropdown__item--danger': item.danger,\n                }}\n                onClick={() => this.handleSelect(item)}\n              >\n                {item.label}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}