huibo-ui 0.3.0

package/dist/collection/components/Popover/Popover.js

@@ -0,0 +1,173 @@
+import { h } from "@stencil/core";
+import { computePosition, getNextZIndex } from "../../utils/popup-manager";
+export class Popover {
+    el;
+    // 注意：使用默认值使其成为 required string，避免与 HTMLElement.title（string）
+    // 的可选类型冲突；同时保留 Ant Design 兼容的 `title` API。
+    title = '';
+    width = '240px';
+    placement = 'bottom';
+    trigger = 'hover';
+    disabled = false;
+    visible = false;
+    popupStyle = {};
+    triggerRef;
+    popupRef;
+    show = () => {
+        if (!this.disabled) {
+            this.visible = true;
+            requestAnimationFrame(() => this.updatePosition());
+        }
+    };
+    hide = () => { this.visible = false; };
+    toggle = () => {
+        if (this.visible) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    };
+    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()) };
+    }
+    render() {
+        const events = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };
+        return (h("div", { key: 'b094fdab875b54a1334489467d87cab19d5d495c', class: "hb-popover", ...events }, h("div", { key: '0d87497b9f31c97aab530a5298722b594388a036', ref: (el) => { this.triggerRef = el; }, class: "hb-popover__trigger" }, h("slot", { key: '93740d59a42e448997f44fe9a636e2858d15121a' })), this.visible && (h("div", { key: '54f77abc1aa942b45e69bf4c63ec6b8f4fd49bad', ref: (el) => { this.popupRef = el; }, class: "hb-popover__popup", style: { ...this.popupStyle, width: this.width }, onMouseEnter: () => this.trigger === 'hover' && this.show(), onMouseLeave: () => this.trigger === 'hover' && this.hide() }, this.title && h("div", { key: '44f71196d287712f9895546d03d1849ba2092241', class: "hb-popover__title" }, this.title), h("div", { key: '7f558d395de6937bb453f9a3453509654fb14514', class: "hb-popover__body" }, h("slot", { key: '19677384409687a3936393b2aaf6722c071de5eb', name: "content" }))))));
+    }
+    static get is() { return "hb-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["popover.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["popover.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": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'240px'"
+            },
+            "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": "'bottom'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'hover' | 'click'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {},
+            "popupStyle": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=Popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.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-popover', styleUrl: 'popover.css', shadow: true })\nexport class Popover {\n  @Element() el: HTMLElement;\n  // 注意：使用默认值使其成为 required string，避免与 HTMLElement.title（string）\n  // 的可选类型冲突；同时保留 Ant Design 兼容的 `title` API。\n  @Prop() title: string = '';\n  @Prop() width: string = '240px';\n  @Prop() placement: Placement = 'bottom';\n  @Prop() trigger: 'hover' | 'click' = 'hover';\n  @Prop() disabled: boolean = false;\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  private toggle = () => {\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  };\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  render() {\n    const events = this.trigger === 'hover' ? { onMouseEnter: this.show, onMouseLeave: this.hide } : { onClick: this.toggle };\n    return (\n      <div class=\"hb-popover\" {...events}>\n        <div ref={(el: any) => { this.triggerRef = el; }} class=\"hb-popover__trigger\"><slot /></div>\n        {this.visible && (\n          <div ref={(el: any) => { this.popupRef = el; }} class=\"hb-popover__popup\" style={{ ...this.popupStyle, width: this.width }}\n            onMouseEnter={() => this.trigger === 'hover' && this.show()} onMouseLeave={() => this.trigger === 'hover' && this.hide()}>\n            {this.title && <div class=\"hb-popover__title\">{this.title}</div>}\n            <div class=\"hb-popover__body\"><slot name=\"content\" /></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Popover/popover.css

@@ -0,0 +1,10 @@
+:host { display: inline-block; }
+.hb-popover__trigger { display: inline-block; }
+.hb-popover__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-sm) 0; animation: hb-popover-fade 0.15s ease-out; pointer-events: auto;
+}
+.hb-popover__title { padding: var(--hb-spacing-xs) var(--hb-spacing-md); font-weight: 600; font-size: var(--hb-font-size-sm); border-bottom: 1px solid var(--hb-color-border-secondary); }
+.hb-popover__body { padding: var(--hb-spacing-sm) var(--hb-spacing-md); font-size: var(--hb-font-size-sm); color: var(--hb-color-text); }
+@keyframes hb-popover-fade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

package/dist/collection/components/Progress/Progress.js

@@ -0,0 +1,139 @@
+import { h } from "@stencil/core";
+export class Progress {
+    percentage = 0;
+    status = '';
+    strokeWidth = 6;
+    showText = true;
+    color;
+    get barColor() {
+        if (this.color)
+            return this.color;
+        if (this.status === 'success')
+            return 'var(--hb-color-success)';
+        if (this.status === 'warning')
+            return 'var(--hb-color-warning)';
+        if (this.status === 'danger')
+            return 'var(--hb-color-danger)';
+        return 'var(--hb-color-primary)';
+    }
+    render() {
+        const clampedPct = Math.max(0, Math.min(100, this.percentage));
+        return (h("div", { key: 'a3d0f5a70471f0114bbf8ddaf62bd18d274357cc', class: "hb-progress" }, h("div", { key: 'ba90d7643388c12d5188ca6b48b4e581f46f104b', class: "hb-progress__bar", style: { height: `${this.strokeWidth}px` } }, h("div", { key: '9dc3948579e45ff3f008f1b5078a247a32df8c91', class: "hb-progress__bar-inner", style: { width: `${clampedPct}%`, backgroundColor: this.barColor } })), this.showText && h("span", { key: '5cb06b3981e7d754e7dab7881341d75045284296', class: "hb-progress__text" }, clampedPct, "%")));
+    }
+    static get is() { return "hb-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "percentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "percentage",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'warning' | 'danger' | ''",
+                    "resolved": "\"\" | \"danger\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "stroke-width",
+                "reflect": false,
+                "defaultValue": "6"
+            },
+            "showText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-text",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=Progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGnD,MAAM,OAAO,QAAQ;IACX,UAAU,GAAW,CAAC,CAAC;IACvB,MAAM,GAA0C,EAAE,CAAC;IACnD,WAAW,GAAW,CAAC,CAAC;IACxB,QAAQ,GAAY,IAAI,CAAC;IACzB,KAAK,CAAU;IAEvB,IAAY,QAAQ;QAClB,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QAClC,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;YAAE,OAAO,yBAAyB,CAAC;QAChE,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS;YAAE,OAAO,yBAAyB,CAAC;QAChE,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ;YAAE,OAAO,wBAAwB,CAAC;QAC9D,OAAO,yBAAyB,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAC/D,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa;YACtB,4DAAK,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE;gBACtE,4DAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,UAAU,GAAG,EAAE,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAQ,CAC1G;YACL,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,mBAAmB;gBAAE,UAAU;oBAAS,CAClE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({ tag: 'hb-progress', styleUrl: 'progress.css', shadow: true })\nexport class Progress {\n  @Prop() percentage: number = 0;\n  @Prop() status: 'success' | 'warning' | 'danger' | '' = '';\n  @Prop() strokeWidth: number = 6;\n  @Prop() showText: boolean = true;\n  @Prop() color?: string;\n\n  private get barColor(): string {\n    if (this.color) return this.color;\n    if (this.status === 'success') return 'var(--hb-color-success)';\n    if (this.status === 'warning') return 'var(--hb-color-warning)';\n    if (this.status === 'danger') return 'var(--hb-color-danger)';\n    return 'var(--hb-color-primary)';\n  }\n\n  render() {\n    const clampedPct = Math.max(0, Math.min(100, this.percentage));\n    return (\n      <div class=\"hb-progress\">\n        <div class=\"hb-progress__bar\" style={{ height: `${this.strokeWidth}px` }}>\n          <div class=\"hb-progress__bar-inner\" style={{ width: `${clampedPct}%`, backgroundColor: this.barColor }}></div>\n        </div>\n        {this.showText && <span class=\"hb-progress__text\">{clampedPct}%</span>}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/Progress/progress.css

@@ -0,0 +1,5 @@
+:host { display: block; }
+.hb-progress { display: flex; align-items: center; gap: var(--hb-spacing-xs); }
+.hb-progress__bar { flex: 1; border-radius: 100px; background-color: var(--hb-color-fill); overflow: hidden; }
+.hb-progress__bar-inner { height: 100%; border-radius: 100px; transition: width 0.3s ease; }
+.hb-progress__text { font-size: var(--hb-font-size-sm); color: var(--hb-color-text-secondary); min-width: 36px; text-align: right; }