huibo-ui 0.3.0

package/dist/collection/components/Descriptions/Descriptions.js

@@ -0,0 +1,141 @@
+import { h } from "@stencil/core";
+/**
+ * Descriptions 描述列表组件
+ * 成组展示多个描述字段，支持列数、边框、冒号、跨列 span
+ */
+export class Descriptions {
+    /** 标题 */
+    title = '';
+    /** 是否带边框 */
+    border = false;
+    /** 每行列数 */
+    column = 3;
+    /** 是否显示冒号 */
+    colon = true;
+    /** 描述项数组 */
+    items = [];
+    render() {
+        return (h("div", { key: 'bc13fcaa734ea3830c26a296e219dc90c4c453eb', class: { 'hb-descriptions': true, 'hb-descriptions--bordered': this.border } }, this.title && h("div", { key: 'e64aba674b0f6d7e460f00c0f786b670dc92da0f', class: "hb-descriptions__title" }, this.title), h("div", { key: '4cca9b0c834a60baf81d8668f79302934817f395', class: "hb-descriptions__view" }, h("div", { key: '9c321483b77f58ecb2b8bbdfba9049b7cdd11c73', class: "hb-descriptions__row", style: { gridTemplateColumns: `repeat(${this.column}, minmax(0, 1fr))` } }, this.items.map((item) => (h("div", { class: "hb-descriptions__item", style: item.span ? { gridColumn: `span ${item.span}` } : undefined }, h("span", { class: "hb-descriptions__label" }, item.label, this.colon && h("span", { class: "hb-descriptions__colon" }, "\uFF1A")), h("span", { class: "hb-descriptions__value" }, item.value))))))));
+    }
+    static get is() { return "hb-descriptions"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["descriptions.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["descriptions.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u9898"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u5E26\u8FB9\u6846"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "column": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6BCF\u884C\u5217\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "column",
+                "reflect": false,
+                "defaultValue": "3"
+            },
+            "colon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u5192\u53F7"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "colon",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DescriptionItem[]",
+                    "resolved": "DescriptionItem[]",
+                    "references": {
+                        "DescriptionItem": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Descriptions/Descriptions.tsx",
+                            "id": "src/components/Descriptions/Descriptions.tsx::DescriptionItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u63CF\u8FF0\u9879\u6570\u7EC4"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+}
+//# sourceMappingURL=Descriptions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Descriptions.js","sourceRoot":"","sources":["../../../src/components/Descriptions/Descriptions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAEH,MAAM,OAAO,YAAY;IACvB,SAAS;IACD,KAAK,GAAW,EAAE,CAAC;IAE3B,YAAY;IACJ,MAAM,GAAY,KAAK,CAAC;IAEhC,WAAW;IACH,MAAM,GAAW,CAAC,CAAC;IAE3B,aAAa;IACL,KAAK,GAAY,IAAI,CAAC;IAE9B,YAAY;IACJ,KAAK,GAAsB,EAAE,CAAC;IAEtC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,2BAA2B,EAAE,IAAI,CAAC,MAAM,EAAE;YAC9E,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAO;YACrE,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,IAAI,CAAC,MAAM,mBAAmB,EAAE,IACvG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,WACE,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;oBAElE,YAAM,KAAK,EAAC,wBAAwB;wBACjC,IAAI,CAAC,KAAK;wBACV,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,wBAAwB,aAAS,CACvD;oBACP,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpD,CACP,CAAC,CACE,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Descriptions 描述列表组件\n * 成组展示多个描述字段，支持列数、边框、冒号、跨列 span\n */\n@Component({ tag: 'hb-descriptions', styleUrl: 'descriptions.css', shadow: true })\nexport class Descriptions {\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 是否带边框 */\n  @Prop() border: boolean = false;\n\n  /** 每行列数 */\n  @Prop() column: number = 3;\n\n  /** 是否显示冒号 */\n  @Prop() colon: boolean = true;\n\n  /** 描述项数组 */\n  @Prop() items: DescriptionItem[] = [];\n\n  render() {\n    return (\n      <div class={{ 'hb-descriptions': true, 'hb-descriptions--bordered': this.border }}>\n        {this.title && <div class=\"hb-descriptions__title\">{this.title}</div>}\n        <div class=\"hb-descriptions__view\">\n          <div class=\"hb-descriptions__row\" style={{ gridTemplateColumns: `repeat(${this.column}, minmax(0, 1fr))` }}>\n            {this.items.map((item) => (\n              <div\n                class=\"hb-descriptions__item\"\n                style={item.span ? { gridColumn: `span ${item.span}` } : undefined}\n              >\n                <span class=\"hb-descriptions__label\">\n                  {item.label}\n                  {this.colon && <span class=\"hb-descriptions__colon\">：</span>}\n                </span>\n                <span class=\"hb-descriptions__value\">{item.value}</span>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nexport interface DescriptionItem {\n  label: string;\n  value: string;\n  span?: number;\n}\n"]}

package/dist/collection/components/Descriptions/descriptions.css

@@ -0,0 +1,52 @@
+:host { display: block; }
+.hb-descriptions {
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text);
+  background: var(--hb-color-bg-container);
+  border-radius: var(--hb-border-radius-sm);
+}
+.hb-descriptions__title {
+  font-size: var(--hb-font-size-lg);
+  font-weight: 600;
+  color: var(--hb-color-text-primary);
+  margin-bottom: var(--hb-spacing-sm);
+}
+.hb-descriptions__view { width: 100%; }
+.hb-descriptions__row {
+  display: grid;
+  gap: 0;
+  width: 100%;
+}
+.hb-descriptions__item {
+  display: flex;
+  padding: var(--hb-spacing-sm) var(--hb-spacing-md);
+  border-bottom: 1px solid var(--hb-color-border-secondary);
+}
+.hb-descriptions__row .hb-descriptions__item:nth-last-child(-n+3):not(:nth-last-child(1)) {
+  /* 保留默认下边框，最后一项由下方规则移除 */
+}
+/* 简化：最后一个 item 无下边框 */
+.hb-descriptions__row .hb-descriptions__item:last-child { border-bottom: none; }
+
+.hb-descriptions__label {
+  color: var(--hb-color-text-secondary);
+  white-space: nowrap;
+  margin-right: var(--hb-spacing-sm);
+  flex-shrink: 0;
+}
+.hb-descriptions__colon { margin-left: 0; }
+.hb-descriptions__value {
+  color: var(--hb-color-text);
+  word-break: break-all;
+}
+
+/* 带边框样式 */
+.hb-descriptions--bordered {
+  border: 1px solid var(--hb-color-border-secondary);
+  overflow: hidden;
+}
+.hb-descriptions--bordered .hb-descriptions__title { padding: var(--hb-spacing-sm) var(--hb-spacing-md); margin-bottom: 0; border-bottom: 1px solid var(--hb-color-border-secondary); }
+.hb-descriptions--bordered .hb-descriptions__item { border-right: 1px solid var(--hb-color-border-secondary); }
+.hb-descriptions--bordered .hb-descriptions__item:nth-child(3n) { border-right: none; }
+.hb-descriptions--bordered .hb-descriptions__item { padding: var(--hb-spacing-sm) var(--hb-spacing-md); }
+.hb-descriptions--bordered .hb-descriptions__item:last-child { border-bottom: none; }

package/dist/collection/components/Dialog/Dialog.js

@@ -0,0 +1,348 @@
+import { h } from "@stencil/core";
+import { lockScroll, unlockScroll, getNextZIndex } from "../../utils/popup-manager";
+import { createFocusTrap } from "../../utils/a11y";
+/**
+ * Dialog 对话框组件
+ * 在保留当前页面状态的情况下，告知用户并承载相关操作
+ */
+export class Dialog {
+    el;
+    /** 是否显示 */
+    modelValue = false;
+    /** 标题 */
+    title = '';
+    /** 宽度 */
+    width = '50%';
+    /** 是否全屏 */
+    fullscreen = false;
+    /** 是否显示遮罩 */
+    modal = true;
+    /** 是否点击遮罩关闭 */
+    closeOnClickModal = true;
+    /** 是否按 ESC 关闭 */
+    closeOnPressEscape = true;
+    /** 是否显示关闭按钮 */
+    showClose = true;
+    /** 关闭时销毁 */
+    destroyOnClose = false;
+    /** 打开事件 */
+    hbOpen;
+    /** 关闭事件 */
+    hbClose;
+    /** 已关闭动画结束事件 */
+    hbClosed;
+    zIndex = 0;
+    panelRef;
+    trap;
+    handleVisibleChange(newVal) {
+        if (newVal) {
+            this.zIndex = getNextZIndex();
+            if (this.modal)
+                lockScroll();
+            this.hbOpen.emit();
+            document.addEventListener('keydown', this.handleKeyDown);
+        }
+        else {
+            if (this.modal)
+                unlockScroll();
+            document.removeEventListener('keydown', this.handleKeyDown);
+        }
+    }
+    disconnectedCallback() {
+        if (this.modelValue && this.modal)
+            unlockScroll();
+        document.removeEventListener('keydown', this.handleKeyDown);
+        this.trap?.disconnect();
+    }
+    componentDidRender() {
+        if (!this.panelRef)
+            return;
+        if (this.modelValue) {
+            if (!this.trap) {
+                this.trap = createFocusTrap({ container: this.panelRef });
+            }
+            this.trap.connect();
+        }
+        else {
+            this.trap?.disconnect();
+        }
+    }
+    handleKeyDown = (e) => {
+        if (this.closeOnPressEscape && e.key === 'Escape') {
+            this.close();
+        }
+    };
+    close = () => {
+        this.modelValue = false;
+        this.hbClose.emit();
+        setTimeout(() => this.hbClosed.emit(), 300);
+    };
+    handleOverlayClick = () => {
+        if (this.closeOnClickModal)
+            this.close();
+    };
+    render() {
+        if (this.destroyOnClose && !this.modelValue)
+            return null;
+        return (h("div", { class: { 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue } }, this.modal && (h("div", { class: "hb-dialog__overlay", style: { zIndex: String(this.zIndex) }, onClick: this.handleOverlayClick })), h("div", { ref: (el) => (this.panelRef = el), class: {
+                'hb-dialog': true,
+                'hb-dialog--fullscreen': this.fullscreen,
+                'hb-dialog--visible': this.modelValue,
+            }, style: {
+                zIndex: String(this.zIndex + 1),
+                width: this.fullscreen ? '100%' : this.width,
+            }, role: "dialog", "aria-modal": "true" }, h("div", { class: "hb-dialog__header" }, h("span", { class: "hb-dialog__title" }, this.title), this.showClose && (h("button", { type: "button", class: "hb-dialog__close", "aria-label": "\u5173\u95ED", onClick: this.close }, "\u00D7"))), h("div", { class: "hb-dialog__body" }, h("slot", null)), h("div", { class: "hb-dialog__footer" }, h("slot", { name: "footer" })))));
+    }
+    static get is() { return "hb-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A"
+                },
+                "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": "\u6807\u9898"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'50%'"
+            },
+            "fullscreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u5168\u5C4F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fullscreen",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "modal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u906E\u7F69"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "modal",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "closeOnClickModal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u70B9\u51FB\u906E\u7F69\u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "close-on-click-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"
+            },
+            "showClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u5173\u95ED\u6309\u94AE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "destroyOnClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u65F6\u9500\u6BC1"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "destroy-on-close",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbOpen",
+                "name": "hbOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6253\u5F00\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "hbClose",
+                "name": "hbClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5173\u95ED\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "hbClosed",
+                "name": "hbClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5DF2\u5173\u95ED\u52A8\u753B\u7ED3\u675F\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleVisibleChange"
+            }];
+    }
+}
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, Element } from '@stencil/core';\nimport { lockScroll, unlockScroll, getNextZIndex } from '../../utils/popup-manager';\nimport { createFocusTrap, FocusTrap } from '../../utils/a11y';\n\n/**\n * Dialog 对话框组件\n * 在保留当前页面状态的情况下，告知用户并承载相关操作\n */\n@Component({\n  tag: 'hb-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class Dialog {\n  @Element() el: HTMLElement;\n\n  /** 是否显示 */\n  @Prop({ mutable: true }) modelValue: boolean = false;\n\n  /** 标题 */\n  @Prop() title: string = '';\n\n  /** 宽度 */\n  @Prop() width: string = '50%';\n\n  /** 是否全屏 */\n  @Prop() fullscreen: boolean = false;\n\n  /** 是否显示遮罩 */\n  @Prop() modal: boolean = true;\n\n  /** 是否点击遮罩关闭 */\n  @Prop() closeOnClickModal: boolean = true;\n\n  /** 是否按 ESC 关闭 */\n  @Prop() closeOnPressEscape: boolean = true;\n\n  /** 是否显示关闭按钮 */\n  @Prop() showClose: boolean = true;\n\n  /** 关闭时销毁 */\n  @Prop() destroyOnClose: boolean = false;\n\n  /** 打开事件 */\n  @Event() hbOpen: EventEmitter<void>;\n\n  /** 关闭事件 */\n  @Event() hbClose: EventEmitter<void>;\n\n  /** 已关闭动画结束事件 */\n  @Event() hbClosed: EventEmitter<void>;\n\n  private zIndex: number = 0;\n  private panelRef?: HTMLElement;\n  private trap?: FocusTrap;\n\n  @Watch('modelValue')\n  handleVisibleChange(newVal: boolean) {\n    if (newVal) {\n      this.zIndex = getNextZIndex();\n      if (this.modal) lockScroll();\n      this.hbOpen.emit();\n      document.addEventListener('keydown', this.handleKeyDown);\n    } else {\n      if (this.modal) unlockScroll();\n      document.removeEventListener('keydown', this.handleKeyDown);\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  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  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.closeOnPressEscape && e.key === 'Escape') {\n      this.close();\n    }\n  };\n\n  private close = () => {\n    this.modelValue = false;\n    this.hbClose.emit();\n    setTimeout(() => this.hbClosed.emit(), 300);\n  };\n\n  private handleOverlayClick = () => {\n    if (this.closeOnClickModal) this.close();\n  };\n\n  render() {\n    if (this.destroyOnClose && !this.modelValue) return null;\n\n    return (\n      <div class={{ 'hb-dialog-wrapper': true, 'hb-dialog-wrapper--hidden': !this.modelValue }}>\n        {this.modal && (\n          <div\n            class=\"hb-dialog__overlay\"\n            style={{ zIndex: String(this.zIndex) }}\n            onClick={this.handleOverlayClick}\n          />\n        )}\n        <div\n          ref={(el) => (this.panelRef = el as HTMLElement)}\n          class={{\n            'hb-dialog': true,\n            'hb-dialog--fullscreen': this.fullscreen,\n            'hb-dialog--visible': this.modelValue,\n          }}\n          style={{\n            zIndex: String(this.zIndex + 1),\n            width: this.fullscreen ? '100%' : this.width,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <div class=\"hb-dialog__header\">\n            <span class=\"hb-dialog__title\">{this.title}</span>\n            {this.showClose && (\n              <button type=\"button\" class=\"hb-dialog__close\" aria-label=\"关闭\" onClick={this.close}>×</button>\n            )}\n          </div>\n          <div class=\"hb-dialog__body\">\n            <slot />\n          </div>\n          <div class=\"hb-dialog__footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Dialog/dialog.css

@@ -0,0 +1,113 @@
+:host {
+  display: contents;
+}
+
+.hb-dialog-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.hb-dialog-wrapper--hidden {
+  display: none;
+}
+
+.hb-dialog__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--hb-color-bg-mask);
+  transition: opacity 0.3s;
+  pointer-events: auto;
+}
+
+.hb-dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.9);
+  background-color: var(--hb-dialog-bg);
+  border-radius: var(--hb-dialog-radius);
+  box-shadow: var(--hb-dialog-shadow);
+  pointer-events: auto;
+  opacity: 0;
+  transition: opacity 0.3s, transform 0.3s;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
+}
+
+.hb-dialog--visible {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.hb-dialog--fullscreen {
+  width: 100% !important;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  transform: none;
+  border-radius: 0;
+  max-height: 100vh;
+}
+.hb-dialog--fullscreen.hb-dialog--visible {
+  transform: none;
+}
+
+.hb-dialog__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-dialog__title {
+  font-size: var(--hb-font-size-lg);
+  font-weight: 600;
+  color: var(--hb-color-text-primary);
+}
+
+.hb-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  font-size: 18px;
+  color: var(--hb-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--hb-border-radius-sm);
+  transition: all var(--hb-transition-duration);
+}
+
+.hb-dialog__close:hover {
+  background-color: var(--hb-color-fill-tertiary);
+  color: var(--hb-color-text-primary);
+}
+
+.hb-dialog__body {
+  flex: 1;
+  padding: var(--hb-spacing-lg);
+  overflow-y: auto;
+  color: var(--hb-color-text);
+  font-size: var(--hb-font-size-base);
+}
+
+.hb-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--hb-spacing-xs);
+  padding: var(--hb-spacing-sm) var(--hb-spacing-lg);
+  border-top: 1px solid var(--hb-color-border-secondary);
+}