huibo-ui 0.3.0

package/dist/collection/components/Pagination/Pagination.js

@@ -0,0 +1,309 @@
+import { h } from "@stencil/core";
+/**
+ * Pagination 分页组件
+ * 当数据量过多时，使用分页分解数据
+ */
+export class Pagination {
+    /** 总条目数 */
+    total = 0;
+    /** 每页显示条目数 */
+    pageSize = 10;
+    /** 当前页数 */
+    currentPage = 1;
+    /** 每页显示个数选择器的选项设置 */
+    pageSizes = [10, 20, 50, 100];
+    /** 最大页码按钮数 */
+    pagerCount = 7;
+    /** 是否禁用 */
+    disabled = false;
+    /** 是否显示总条数 */
+    showTotal = false;
+    /** 是否显示每页条数选择器 */
+    showPageSize = false;
+    internalCurrent = 1;
+    /** 当前页改变事件 */
+    hbCurrentChange;
+    /** 每页条数改变事件 */
+    hbSizeChange;
+    handleCurrentPageChange() {
+        this.internalCurrent = this.currentPage;
+    }
+    componentDidLoad() {
+        this.internalCurrent = this.currentPage;
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.total / this.pageSize));
+    }
+    handlePageClick(page) {
+        if (this.disabled || page === this.internalCurrent || page < 1 || page > this.totalPages)
+            return;
+        this.internalCurrent = page;
+        this.currentPage = page;
+        this.hbCurrentChange.emit(page);
+    }
+    handleSizeChange(e) {
+        const target = e.target;
+        const size = parseInt(target.value, 10);
+        this.hbSizeChange.emit(size);
+        this.internalCurrent = 1;
+        this.currentPage = 1;
+        this.hbCurrentChange.emit(1);
+    }
+    getPages() {
+        const pages = [];
+        const total = this.totalPages;
+        const current = this.internalCurrent;
+        const pager = this.pagerCount;
+        if (total <= pager) {
+            for (let i = 1; i <= total; i++)
+                pages.push(i);
+            return pages;
+        }
+        const half = Math.floor((pager - 2) / 2);
+        let start = current - half;
+        let end = current + half;
+        if (start < 2) {
+            start = 2;
+            end = Math.min(pager - 1, total - 1);
+        }
+        if (end > total - 1) {
+            end = total - 1;
+            start = Math.max(2, total - pager + 2);
+        }
+        pages.push(1);
+        if (start > 2)
+            pages.push('...');
+        for (let i = start; i <= end; i++)
+            pages.push(i);
+        if (end < total - 1)
+            pages.push('...');
+        pages.push(total);
+        return pages;
+    }
+    render() {
+        const pages = this.getPages();
+        return (h("div", { key: '889d6db49b4a7af7ad353fcc36de1aed8499708a', class: { 'hb-pagination': true, 'hb-pagination--disabled': this.disabled } }, this.showTotal && (h("span", { key: 'f914032da52a9919a81087d627a67e68456dc89d', class: "hb-pagination__total" }, "\u5171 ", this.total, " \u6761")), this.showPageSize && (h("select", { key: '30b748ffd520e94a1a1c512e49393c3065f89216', class: "hb-pagination__sizes", onChange: this.handleSizeChange, disabled: this.disabled }, this.pageSizes.map(size => (h("option", { value: size, selected: size === this.pageSize }, size, " \u6761/\u9875"))))), h("button", { key: '2a7ba780e83f94d476b340d2d47b20e772132dd4', type: "button", class: "hb-pagination__btn hb-pagination__prev", disabled: this.disabled || this.internalCurrent <= 1, onClick: () => this.handlePageClick(this.internalCurrent - 1) }, "\u2039"), pages.map(page => page === '...' ? (h("span", { class: "hb-pagination__ellipsis" }, "...")) : (h("button", { type: "button", class: {
+                'hb-pagination__btn': true,
+                'hb-pagination__btn--active': page === this.internalCurrent,
+            }, disabled: this.disabled, onClick: () => this.handlePageClick(page) }, page))), h("button", { key: '7a5e6cd5eb1c3db595708687cebe52b5e0e0d88a', type: "button", class: "hb-pagination__btn hb-pagination__next", disabled: this.disabled || this.internalCurrent >= this.totalPages, onClick: () => this.handlePageClick(this.internalCurrent + 1) }, "\u203A")));
+    }
+    static get is() { return "hb-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u603B\u6761\u76EE\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "total",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6BCF\u9875\u663E\u793A\u6761\u76EE\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "page-size",
+                "reflect": false,
+                "defaultValue": "10"
+            },
+            "currentPage": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u9875\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "current-page",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "pageSizes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6BCF\u9875\u663E\u793A\u4E2A\u6570\u9009\u62E9\u5668\u7684\u9009\u9879\u8BBE\u7F6E"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[10, 20, 50, 100]"
+            },
+            "pagerCount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u9875\u7801\u6309\u94AE\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pager-count",
+                "reflect": false,
+                "defaultValue": "7"
+            },
+            "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"
+            },
+            "showTotal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u603B\u6761\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-total",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showPageSize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u663E\u793A\u6BCF\u9875\u6761\u6570\u9009\u62E9\u5668"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-page-size",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalCurrent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbCurrentChange",
+                "name": "hbCurrentChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u9875\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "hbSizeChange",
+                "name": "hbSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6BCF\u9875\u6761\u6570\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "currentPage",
+                "methodName": "handleCurrentPageChange"
+            }];
+    }
+}
+//# sourceMappingURL=Pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * Pagination 分页组件\n * 当数据量过多时，使用分页分解数据\n */\n@Component({\n  tag: 'hb-pagination',\n  styleUrl: 'pagination.css',\n  shadow: true,\n})\nexport class Pagination {\n  /** 总条目数 */\n  @Prop() total: number = 0;\n\n  /** 每页显示条目数 */\n  @Prop() pageSize: number = 10;\n\n  /** 当前页数 */\n  @Prop({ mutable: true }) currentPage: number = 1;\n\n  /** 每页显示个数选择器的选项设置 */\n  @Prop() pageSizes: number[] = [10, 20, 50, 100];\n\n  /** 最大页码按钮数 */\n  @Prop() pagerCount: number = 7;\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 是否显示总条数 */\n  @Prop() showTotal: boolean = false;\n\n  /** 是否显示每页条数选择器 */\n  @Prop() showPageSize: boolean = false;\n\n  @State() internalCurrent: number = 1;\n\n  /** 当前页改变事件 */\n  @Event() hbCurrentChange: EventEmitter<number>;\n\n  /** 每页条数改变事件 */\n  @Event() hbSizeChange: EventEmitter<number>;\n\n  @Watch('currentPage')\n  handleCurrentPageChange() {\n    this.internalCurrent = this.currentPage;\n  }\n\n  componentDidLoad() {\n    this.internalCurrent = this.currentPage;\n  }\n\n  private get totalPages(): number {\n    return Math.max(1, Math.ceil(this.total / this.pageSize));\n  }\n\n  private handlePageClick(page: number) {\n    if (this.disabled || page === this.internalCurrent || page < 1 || page > this.totalPages) return;\n    this.internalCurrent = page;\n    this.currentPage = page;\n    this.hbCurrentChange.emit(page);\n  }\n\n  private handleSizeChange(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    const size = parseInt(target.value, 10);\n    this.hbSizeChange.emit(size);\n    this.internalCurrent = 1;\n    this.currentPage = 1;\n    this.hbCurrentChange.emit(1);\n  }\n\n  private getPages(): (number | '...')[] {\n    const pages: (number | '...')[] = [];\n    const total = this.totalPages;\n    const current = this.internalCurrent;\n    const pager = this.pagerCount;\n\n    if (total <= pager) {\n      for (let i = 1; i <= total; i++) pages.push(i);\n      return pages;\n    }\n\n    const half = Math.floor((pager - 2) / 2);\n    let start = current - half;\n    let end = current + half;\n\n    if (start < 2) {\n      start = 2;\n      end = Math.min(pager - 1, total - 1);\n    }\n    if (end > total - 1) {\n      end = total - 1;\n      start = Math.max(2, total - pager + 2);\n    }\n\n    pages.push(1);\n    if (start > 2) pages.push('...');\n    for (let i = start; i <= end; i++) pages.push(i);\n    if (end < total - 1) pages.push('...');\n    pages.push(total);\n\n    return pages;\n  }\n\n  render() {\n    const pages = this.getPages();\n\n    return (\n      <div class={{ 'hb-pagination': true, 'hb-pagination--disabled': this.disabled }}>\n        {this.showTotal && (\n          <span class=\"hb-pagination__total\">共 {this.total} 条</span>\n        )}\n\n        {this.showPageSize && (\n          <select class=\"hb-pagination__sizes\" onChange={this.handleSizeChange} disabled={this.disabled}>\n            {this.pageSizes.map(size => (\n              <option value={size} selected={size === this.pageSize}>{size} 条/页</option>\n            ))}\n          </select>\n        )}\n\n        <button\n          type=\"button\"\n          class=\"hb-pagination__btn hb-pagination__prev\"\n          disabled={this.disabled || this.internalCurrent <= 1}\n          onClick={() => this.handlePageClick(this.internalCurrent - 1)}\n        >\n          ‹\n        </button>\n\n        {pages.map(page =>\n          page === '...' ? (\n            <span class=\"hb-pagination__ellipsis\">...</span>\n          ) : (\n            <button\n              type=\"button\"\n              class={{\n                'hb-pagination__btn': true,\n                'hb-pagination__btn--active': page === this.internalCurrent,\n              }}\n              disabled={this.disabled}\n              onClick={() => this.handlePageClick(page as number)}\n            >\n              {page}\n            </button>\n          )\n        )}\n\n        <button\n          type=\"button\"\n          class=\"hb-pagination__btn hb-pagination__next\"\n          disabled={this.disabled || this.internalCurrent >= this.totalPages}\n          onClick={() => this.handlePageClick(this.internalCurrent + 1)}\n        >\n          ›\n        </button>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Pagination/pagination.css

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+}
+
+.hb-pagination {
+  display: flex;
+  align-items: center;
+  gap: var(--hb-spacing-xxs);
+  font-size: var(--hb-font-size-sm);
+  color: var(--hb-color-text);
+  user-select: none;
+}
+
+.hb-pagination--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.hb-pagination__total {
+  margin-right: var(--hb-spacing-xs);
+  color: var(--hb-color-text-secondary);
+}
+
+.hb-pagination__sizes {
+  height: 28px;
+  padding: 0 var(--hb-spacing-xs);
+  border: 1px solid var(--hb-color-border);
+  border-radius: var(--hb-border-radius-sm);
+  background: var(--hb-color-bg);
+  color: var(--hb-color-text);
+  font-size: var(--hb-font-size-sm);
+  cursor: pointer;
+  outline: none;
+  margin-right: var(--hb-spacing-xs);
+}
+
+.hb-pagination__sizes:focus {
+  border-color: var(--hb-color-primary);
+}
+
+.hb-pagination__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 4px;
+  border: 1px solid var(--hb-color-border);
+  border-radius: var(--hb-border-radius-sm);
+  background: var(--hb-color-bg);
+  color: var(--hb-color-text);
+  font-size: var(--hb-font-size-sm);
+  cursor: pointer;
+  outline: none;
+  transition: all var(--hb-transition-duration) var(--hb-transition-function);
+}
+
+.hb-pagination__btn:hover:not(:disabled):not(.hb-pagination__btn--active) {
+  color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+}
+
+.hb-pagination__btn:disabled {
+  color: var(--hb-color-text-disabled);
+  cursor: not-allowed;
+  background: var(--hb-color-fill-quaternary);
+}
+
+.hb-pagination__btn--active {
+  background-color: var(--hb-color-primary);
+  border-color: var(--hb-color-primary);
+  color: #fff;
+}
+
+.hb-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  color: var(--hb-color-text-secondary);
+  letter-spacing: 2px;
+}

package/dist/collection/components/Popconfirm/Popconfirm.js

@@ -0,0 +1,185 @@
+import { h } from "@stencil/core";
+import { computePosition, getNextZIndex } from "../../utils/popup-manager";
+export class Popconfirm {
+    el;
+    title = '确定执行此操作？';
+    confirmButtonText = '确定';
+    cancelButtonText = '取消';
+    placement = 'top';
+    disabled = false;
+    icon = '⚠';
+    visible = false;
+    popupStyle = {};
+    triggerRef;
+    popupRef;
+    show = () => {
+        if (!this.disabled) {
+            this.visible = true;
+            requestAnimationFrame(() => this.updatePosition());
+        }
+    };
+    hide = () => { this.visible = false; };
+    updatePosition() {
+        if (!this.triggerRef || !this.popupRef)
+            return;
+        const rect = this.triggerRef.getBoundingClientRect();
+        const { width: pw, height: ph } = this.popupRef.getBoundingClientRect();
+        const pos = computePosition(rect, pw, ph, this.placement, 8);
+        this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };
+    }
+    handleConfirm = (e) => { e.stopPropagation(); this.hide(); this.el.dispatchEvent(new CustomEvent('hbConfirm', { bubbles: true })); };
+    handleCancel = (e) => { e.stopPropagation(); this.hide(); this.el.dispatchEvent(new CustomEvent('hbCancel', { bubbles: true })); };
+    render() {
+        return (h("div", { key: 'd4817c4b90b135f3dc911259760ec6135c014882', class: "hb-popconfirm", onClick: this.show }, h("div", { key: 'bc992147604a6b601b9bfd1848fbd9fd425bcc65', ref: (el) => { this.triggerRef = el; }, class: "hb-popconfirm__trigger" }, h("slot", { key: 'a5be9404aa726abc5c1c40292bfa3adef7793fa7' })), this.visible && (h("div", { key: '4d9794a39fe67cae8d61b6ddf421eb922e89ed4e', ref: (el) => { this.popupRef = el; }, class: "hb-popconfirm__popup", style: this.popupStyle }, h("div", { key: '15b32d88525e57064aa6c98ab5d409a86bce1a48', class: "hb-popconfirm__main" }, h("span", { key: 'a958b70e2ce984d8a87f278dcc13831778a37ddb', class: "hb-popconfirm__icon" }, this.icon), h("span", { key: 'd965d258313cf129d8d07a4085897b750cfe046b', class: "hb-popconfirm__title" }, this.title)), h("div", { key: '184c808d11c9c987d7cc8d419133f5cdc5655466', class: "hb-popconfirm__action" }, h("button", { key: '4c2f7eb3b996bd5231a1df845a6e6422a189293f', type: "button", class: "hb-popconfirm__btn hb-popconfirm__btn--cancel", onClick: this.handleCancel }, this.cancelButtonText), h("button", { key: 'de7a86643978c024e780061b775035488e879faf', type: "button", class: "hb-popconfirm__btn hb-popconfirm__btn--confirm", onClick: this.handleConfirm }, this.confirmButtonText))))));
+    }
+    static get is() { return "hb-popconfirm"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popconfirm.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popconfirm.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": "'\u786E\u5B9A\u6267\u884C\u6B64\u64CD\u4F5C\uFF1F'"
+            },
+            "confirmButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "confirm-button-text",
+                "reflect": false,
+                "defaultValue": "'\u786E\u5B9A'"
+            },
+            "cancelButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "cancel-button-text",
+                "reflect": false,
+                "defaultValue": "'\u53D6\u6D88'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "../../utils/popup-manager",
+                            "id": "src/utils/popup-manager.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "'\u26A0'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "popupStyle": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Popconfirm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popconfirm.js","sourceRoot":"","sources":["../../../src/components/Popconfirm/Popconfirm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport { computePosition, getNextZIndex, Placement } from '../../utils/popup-manager';\n\n@Component({ tag: 'hb-popconfirm', styleUrl: 'popconfirm.css', shadow: true })\nexport class Popconfirm {\n  @Element() el: HTMLElement;\n  @Prop() title: string = '确定执行此操作？';\n  @Prop() confirmButtonText: string = '确定';\n  @Prop() cancelButtonText: string = '取消';\n  @Prop() placement: Placement = 'top';\n  @Prop() disabled: boolean = false;\n  @Prop() icon: string = '⚠';\n  @State() visible: boolean = false;\n  @State() popupStyle: Record<string, string> = {};\n\n  private triggerRef?: HTMLElement;\n  private popupRef?: HTMLDivElement;\n\n  private show = () => { if (!this.disabled) { this.visible = true; requestAnimationFrame(() => this.updatePosition()); } };\n  private hide = () => { this.visible = false; };\n\n  private updatePosition() {\n    if (!this.triggerRef || !this.popupRef) return;\n    const rect = this.triggerRef.getBoundingClientRect();\n    const { width: pw, height: ph } = this.popupRef.getBoundingClientRect();\n    const pos = computePosition(rect, pw, ph, this.placement, 8);\n    this.popupStyle = { top: `${pos.top}px`, left: `${pos.left}px`, zIndex: String(getNextZIndex()) };\n  }\n\n  private handleConfirm = (e: Event) => { e.stopPropagation(); this.hide(); this.el.dispatchEvent(new CustomEvent('hbConfirm', { bubbles: true })); };\n  private handleCancel = (e: Event) => { e.stopPropagation(); this.hide(); this.el.dispatchEvent(new CustomEvent('hbCancel', { bubbles: true })); };\n\n  render() {\n    return (\n      <div class=\"hb-popconfirm\" onClick={this.show}>\n        <div ref={(el: any) => { this.triggerRef = el; }} class=\"hb-popconfirm__trigger\"><slot /></div>\n        {this.visible && (\n          <div ref={(el: any) => { this.popupRef = el; }} class=\"hb-popconfirm__popup\" style={this.popupStyle}>\n            <div class=\"hb-popconfirm__main\">\n              <span class=\"hb-popconfirm__icon\">{this.icon}</span>\n              <span class=\"hb-popconfirm__title\">{this.title}</span>\n            </div>\n            <div class=\"hb-popconfirm__action\">\n              <button type=\"button\" class=\"hb-popconfirm__btn hb-popconfirm__btn--cancel\" onClick={this.handleCancel}>{this.cancelButtonText}</button>\n              <button type=\"button\" class=\"hb-popconfirm__btn hb-popconfirm__btn--confirm\" onClick={this.handleConfirm}>{this.confirmButtonText}</button>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Popconfirm/popconfirm.css

@@ -0,0 +1,20 @@
+:host { display: inline-block; }
+.hb-popconfirm__trigger { display: inline-block; cursor: pointer; }
+.hb-popconfirm__popup {
+  position: fixed; background: var(--hb-color-bg-elevated);
+  border-radius: var(--hb-border-radius-base); box-shadow: var(--hb-box-shadow);
+  padding: var(--hb-spacing-md); min-width: 200px; animation: hb-popconfirm-fade 0.15s ease-out; pointer-events: auto;
+}
+.hb-popconfirm__main { display: flex; align-items: flex-start; gap: var(--hb-spacing-xs); margin-bottom: var(--hb-spacing-sm); }
+.hb-popconfirm__icon { color: var(--hb-color-warning); font-size: 16px; flex-shrink: 0; }
+.hb-popconfirm__title { font-size: var(--hb-font-size-sm); color: var(--hb-color-text); line-height: 1.5; }
+.hb-popconfirm__action { display: flex; justify-content: flex-end; gap: var(--hb-spacing-xs); }
+.hb-popconfirm__btn {
+  padding: 4px 12px; font-size: var(--hb-font-size-xs); border-radius: var(--hb-border-radius-sm);
+  cursor: pointer; border: 1px solid var(--hb-color-border); background: var(--hb-color-bg);
+  transition: all var(--hb-transition-duration);
+}
+.hb-popconfirm__btn--cancel:hover { color: var(--hb-color-primary); border-color: var(--hb-color-primary); }
+.hb-popconfirm__btn--confirm { background: var(--hb-color-primary); color: #fff; border-color: var(--hb-color-primary); }
+.hb-popconfirm__btn--confirm:hover { background: var(--hb-color-primary-hover); }
+@keyframes hb-popconfirm-fade { from { opacity: 0; } to { opacity: 1; } }