huibo-ui 0.3.0

package/dist/collection/components/Scrollbar/Scrollbar.js

@@ -0,0 +1,426 @@
+import { h } from "@stencil/core";
+/**
+ * Scrollbar 滚动条组件
+ * 用于替换浏览器原生滚动条
+ */
+export class Scrollbar {
+    el;
+    /**
+     * 滚动条高度
+     */
+    height;
+    /**
+     * 滚动条最大高度
+     */
+    maxHeight;
+    /**
+     * 是否总是显示滚动条
+     * @default false
+     */
+    always = false;
+    /**
+     * 是否显示原生滚动条
+     * @default false
+     */
+    native = false;
+    /**
+     * 滚动条的最小尺寸
+     * @default 20
+     */
+    minSize = 20;
+    /**
+     * 滚动事件
+     */
+    hbScroll;
+    scrollbarVisible = false;
+    thumbHeight = 0;
+    thumbTop = 0;
+    wrapRef;
+    thumbRef;
+    resizeObserver;
+    isDragging = false;
+    startY = 0;
+    startScrollTop = 0;
+    componentDidLoad() {
+        if (!this.native) {
+            this.initScrollbar();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        this.removeEventListeners();
+    }
+    handleSizeChange() {
+        this.updateScrollbar();
+    }
+    /**
+     * 设置滚动条位置
+     */
+    async setScrollTop(top) {
+        if (this.wrapRef) {
+            this.wrapRef.scrollTop = top;
+            this.updateScrollbar();
+        }
+    }
+    /**
+     * 设置滚动条位置
+     */
+    async setScrollLeft(left) {
+        if (this.wrapRef) {
+            this.wrapRef.scrollLeft = left;
+            this.updateScrollbar();
+        }
+    }
+    /**
+     * 获取滚动条位置
+     */
+    async getScrollTop() {
+        return this.wrapRef?.scrollTop || 0;
+    }
+    /**
+     * 获取滚动条位置
+     */
+    async getScrollLeft() {
+        return this.wrapRef?.scrollLeft || 0;
+    }
+    initScrollbar() {
+        if (!this.wrapRef)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateScrollbar();
+        });
+        this.resizeObserver.observe(this.wrapRef);
+        this.addEventListeners();
+        this.updateScrollbar();
+    }
+    addEventListeners() {
+        if (this.wrapRef) {
+            this.wrapRef.addEventListener('scroll', this.handleScroll);
+        }
+        if (this.thumbRef) {
+            this.thumbRef.addEventListener('mousedown', this.handleThumbMouseDown);
+        }
+        document.addEventListener('mousemove', this.handleMouseMove);
+        document.addEventListener('mouseup', this.handleMouseUp);
+    }
+    removeEventListeners() {
+        if (this.wrapRef) {
+            this.wrapRef.removeEventListener('scroll', this.handleScroll);
+        }
+        if (this.thumbRef) {
+            this.thumbRef.removeEventListener('mousedown', this.handleThumbMouseDown);
+        }
+        document.removeEventListener('mousemove', this.handleMouseMove);
+        document.removeEventListener('mouseup', this.handleMouseUp);
+    }
+    updateScrollbar() {
+        if (!this.wrapRef)
+            return;
+        const wrapHeight = this.wrapRef.clientHeight;
+        const scrollHeight = this.wrapRef.scrollHeight;
+        const scrollTop = this.wrapRef.scrollTop;
+        const hasScroll = scrollHeight > wrapHeight;
+        this.scrollbarVisible = hasScroll || this.always;
+        if (hasScroll && this.thumbRef) {
+            const thumbHeight = Math.max(this.minSize, (wrapHeight / scrollHeight) * wrapHeight);
+            const maxThumbTop = wrapHeight - thumbHeight;
+            const thumbTop = (scrollTop / (scrollHeight - wrapHeight)) * maxThumbTop;
+            this.thumbHeight = thumbHeight;
+            this.thumbTop = Math.max(0, Math.min(maxThumbTop, thumbTop));
+        }
+    }
+    handleScroll = () => {
+        this.updateScrollbar();
+        if (this.wrapRef) {
+            this.hbScroll.emit({
+                scrollTop: this.wrapRef.scrollTop,
+                scrollLeft: this.wrapRef.scrollLeft,
+            });
+        }
+    };
+    handleThumbMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.isDragging = true;
+        this.startY = e.clientY;
+        this.startScrollTop = this.wrapRef?.scrollTop || 0;
+    };
+    handleMouseMove = (e) => {
+        if (!this.isDragging || !this.wrapRef)
+            return;
+        const deltaY = e.clientY - this.startY;
+        const wrapHeight = this.wrapRef.clientHeight;
+        const scrollHeight = this.wrapRef.scrollHeight;
+        const maxScrollTop = scrollHeight - wrapHeight;
+        const thumbHeight = this.thumbHeight;
+        const maxThumbTop = wrapHeight - thumbHeight;
+        const scrollDelta = (deltaY / maxThumbTop) * maxScrollTop;
+        const newScrollTop = Math.max(0, Math.min(maxScrollTop, this.startScrollTop + scrollDelta));
+        this.wrapRef.scrollTop = newScrollTop;
+    };
+    handleMouseUp = () => {
+        this.isDragging = false;
+    };
+    render() {
+        const style = {};
+        if (this.height) {
+            style.height = this.height;
+        }
+        if (this.maxHeight) {
+            style.maxHeight = this.maxHeight;
+        }
+        if (this.native) {
+            return (h("div", { class: "hb-scrollbar hb-scrollbar--native", style: style }, h("div", { class: "hb-scrollbar__wrap" }, h("div", { class: "hb-scrollbar__view" }, h("slot", null)))));
+        }
+        return (h("div", { class: "hb-scrollbar", style: style }, h("div", { class: "hb-scrollbar__wrap", ref: (el) => (this.wrapRef = el), onScroll: this.handleScroll }, h("div", { class: "hb-scrollbar__view" }, h("slot", null))), this.scrollbarVisible && !this.native && (h("div", { class: "hb-scrollbar__bar hb-scrollbar__bar--vertical" }, h("div", { class: "hb-scrollbar__thumb", ref: (el) => {
+                this.thumbRef = el;
+                if (el && !this.native) {
+                    el.addEventListener('mousedown', this.handleThumbMouseDown);
+                }
+            }, style: {
+                height: `${this.thumbHeight}px`,
+                transform: `translateY(${this.thumbTop}px)`,
+            } })))));
+    }
+    static get is() { return "hb-scrollbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scrollbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scrollbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6EDA\u52A8\u6761\u9AD8\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "height",
+                "reflect": false
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6EDA\u52A8\u6761\u6700\u5927\u9AD8\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-height",
+                "reflect": false
+            },
+            "always": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u603B\u662F\u663E\u793A\u6EDA\u52A8\u6761"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "always",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "native": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u539F\u751F\u6EDA\u52A8\u6761"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "native",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "minSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "20"
+                        }],
+                    "text": "\u6EDA\u52A8\u6761\u7684\u6700\u5C0F\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-size",
+                "reflect": false,
+                "defaultValue": "20"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "scrollbarVisible": {},
+            "thumbHeight": {},
+            "thumbTop": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbScroll",
+                "name": "hbScroll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6EDA\u52A8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "{ scrollTop: number; scrollLeft: number }",
+                    "resolved": "{ scrollTop: number; scrollLeft: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setScrollTop": {
+                "complexType": {
+                    "signature": "(top: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "top",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u8BBE\u7F6E\u6EDA\u52A8\u6761\u4F4D\u7F6E",
+                    "tags": []
+                }
+            },
+            "setScrollLeft": {
+                "complexType": {
+                    "signature": "(left: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "left",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "\u8BBE\u7F6E\u6EDA\u52A8\u6761\u4F4D\u7F6E",
+                    "tags": []
+                }
+            },
+            "getScrollTop": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "\u83B7\u53D6\u6EDA\u52A8\u6761\u4F4D\u7F6E",
+                    "tags": []
+                }
+            },
+            "getScrollLeft": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "\u83B7\u53D6\u6EDA\u52A8\u6761\u4F4D\u7F6E",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "height",
+                "methodName": "handleSizeChange"
+            }, {
+                "propName": "maxHeight",
+                "methodName": "handleSizeChange"
+            }];
+    }
+}
+//# sourceMappingURL=Scrollbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Scrollbar.js","sourceRoot":"","sources":["../../../src/components/Scrollbar/Scrollbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvG;;;GAGG;AAMH,MAAM,OAAO,SAAS;IACT,EAAE,CAAc;IAE3B;;OAEG;IACK,MAAM,CAAU;IAExB;;OAEG;IACK,SAAS,CAAU;IAE3B;;;OAGG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC;;;OAGG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC;;;OAGG;IACK,OAAO,GAAW,EAAE,CAAC;IAE7B;;OAEG;IACM,QAAQ,CAA0D;IAElE,gBAAgB,GAAY,KAAK,CAAC;IAClC,WAAW,GAAW,CAAC,CAAC;IACxB,QAAQ,GAAW,CAAC,CAAC;IAEtB,OAAO,CAAkB;IACzB,QAAQ,CAAkB;IAC1B,cAAc,CAAkB;IAChC,UAAU,GAAY,KAAK,CAAC;IAC5B,MAAM,GAAW,CAAC,CAAC;IACnB,cAAc,GAAW,CAAC,CAAC;IAEnC,gBAAgB;QACd,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAID,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY,CAAC,GAAW;QAC5B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,GAAG,CAAC;YAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,aAAa,CAAC,IAAY;QAC9B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,OAAO,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,aAAa;QACjB,OAAO,IAAI,CAAC,OAAO,EAAE,UAAU,IAAI,CAAC,CAAC;IACvC,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC1C,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7D,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACzE,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3D,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAChE,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5E,CAAC;QACD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAChE,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9D,CAAC;IAEO,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;QAEzC,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;QAC5C,IAAI,CAAC,gBAAgB,GAAG,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC;QAEjD,IAAI,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC/B,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,IAAI,CAAC,OAAO,EACZ,CAAC,UAAU,GAAG,YAAY,CAAC,GAAG,UAAU,CACzC,CAAC;YACF,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;YAC7C,MAAM,QAAQ,GAAG,CAAC,SAAS,GAAG,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC,GAAG,WAAW,CAAC;YAEzE,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;YAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS;gBACjC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU;aACpC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IAEM,oBAAoB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,OAAO,CAAC;QACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,CAAC;IACrD,CAAC,CAAC;IAEM,eAAe,GAAG,CAAC,CAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE9C,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;QACvC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;QAC/C,MAAM,YAAY,GAAG,YAAY,GAAG,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAE7C,MAAM,WAAW,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,YAAY,CAAC;QAC1D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC;QAE5F,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,YAAY,CAAC;IACxC,CAAC,CAAC;IAEM,aAAa,GAAG,GAAG,EAAE;QAC3B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,KAAK,GAAQ,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,CACL,WACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,KAAK;gBAEZ,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,WAAK,KAAK,EAAC,oBAAoB;wBAC7B,eAAa,CACT,CACF,CACF,CACP,CAAC;QACJ,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK;YACpC,WACE,KAAK,EAAC,oBAAoB,EAC1B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAE3B,WAAK,KAAK,EAAC,oBAAoB;oBAC7B,eAAa,CACT,CACF;YACL,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CACxC,WAAK,KAAK,EAAC,+CAA+C;gBACxD,WACE,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;wBACV,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;wBACnB,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;4BACvB,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;wBAC9D,CAAC;oBACH,CAAC,EACD,KAAK,EAAE;wBACL,MAAM,EAAE,GAAG,IAAI,CAAC,WAAW,IAAI;wBAC/B,SAAS,EAAE,cAAc,IAAI,CAAC,QAAQ,KAAK;qBAC5C,GACI,CACH,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element, State, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n/**\n * Scrollbar 滚动条组件\n * 用于替换浏览器原生滚动条\n */\n@Component({\n  tag: 'hb-scrollbar',\n  styleUrl: 'scrollbar.css',\n  shadow: true,\n})\nexport class Scrollbar {\n  @Element() el: HTMLElement;\n\n  /**\n   * 滚动条高度\n   */\n  @Prop() height?: string;\n\n  /**\n   * 滚动条最大高度\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * 是否总是显示滚动条\n   * @default false\n   */\n  @Prop() always: boolean = false;\n\n  /**\n   * 是否显示原生滚动条\n   * @default false\n   */\n  @Prop() native: boolean = false;\n\n  /**\n   * 滚动条的最小尺寸\n   * @default 20\n   */\n  @Prop() minSize: number = 20;\n\n  /**\n   * 滚动事件\n   */\n  @Event() hbScroll: EventEmitter<{ scrollTop: number; scrollLeft: number }>;\n\n  @State() scrollbarVisible: boolean = false;\n  @State() thumbHeight: number = 0;\n  @State() thumbTop: number = 0;\n\n  private wrapRef?: HTMLDivElement;\n  private thumbRef?: HTMLDivElement;\n  private resizeObserver?: ResizeObserver;\n  private isDragging: boolean = false;\n  private startY: number = 0;\n  private startScrollTop: number = 0;\n\n  componentDidLoad() {\n    if (!this.native) {\n      this.initScrollbar();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n    this.removeEventListeners();\n  }\n\n  @Watch('height')\n  @Watch('maxHeight')\n  handleSizeChange() {\n    this.updateScrollbar();\n  }\n\n  /**\n   * 设置滚动条位置\n   */\n  @Method()\n  async setScrollTop(top: number) {\n    if (this.wrapRef) {\n      this.wrapRef.scrollTop = top;\n      this.updateScrollbar();\n    }\n  }\n\n  /**\n   * 设置滚动条位置\n   */\n  @Method()\n  async setScrollLeft(left: number) {\n    if (this.wrapRef) {\n      this.wrapRef.scrollLeft = left;\n      this.updateScrollbar();\n    }\n  }\n\n  /**\n   * 获取滚动条位置\n   */\n  @Method()\n  async getScrollTop(): Promise<number> {\n    return this.wrapRef?.scrollTop || 0;\n  }\n\n  /**\n   * 获取滚动条位置\n   */\n  @Method()\n  async getScrollLeft(): Promise<number> {\n    return this.wrapRef?.scrollLeft || 0;\n  }\n\n  private initScrollbar() {\n    if (!this.wrapRef) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateScrollbar();\n    });\n\n    this.resizeObserver.observe(this.wrapRef);\n    this.addEventListeners();\n    this.updateScrollbar();\n  }\n\n  private addEventListeners() {\n    if (this.wrapRef) {\n      this.wrapRef.addEventListener('scroll', this.handleScroll);\n    }\n    if (this.thumbRef) {\n      this.thumbRef.addEventListener('mousedown', this.handleThumbMouseDown);\n    }\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private removeEventListeners() {\n    if (this.wrapRef) {\n      this.wrapRef.removeEventListener('scroll', this.handleScroll);\n    }\n    if (this.thumbRef) {\n      this.thumbRef.removeEventListener('mousedown', this.handleThumbMouseDown);\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private updateScrollbar() {\n    if (!this.wrapRef) return;\n\n    const wrapHeight = this.wrapRef.clientHeight;\n    const scrollHeight = this.wrapRef.scrollHeight;\n    const scrollTop = this.wrapRef.scrollTop;\n\n    const hasScroll = scrollHeight > wrapHeight;\n    this.scrollbarVisible = hasScroll || this.always;\n\n    if (hasScroll && this.thumbRef) {\n      const thumbHeight = Math.max(\n        this.minSize,\n        (wrapHeight / scrollHeight) * wrapHeight\n      );\n      const maxThumbTop = wrapHeight - thumbHeight;\n      const thumbTop = (scrollTop / (scrollHeight - wrapHeight)) * maxThumbTop;\n\n      this.thumbHeight = thumbHeight;\n      this.thumbTop = Math.max(0, Math.min(maxThumbTop, thumbTop));\n    }\n  }\n\n  private handleScroll = () => {\n    this.updateScrollbar();\n    if (this.wrapRef) {\n      this.hbScroll.emit({\n        scrollTop: this.wrapRef.scrollTop,\n        scrollLeft: this.wrapRef.scrollLeft,\n      });\n    }\n  };\n\n  private handleThumbMouseDown = (e: MouseEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.isDragging = true;\n    this.startY = e.clientY;\n    this.startScrollTop = this.wrapRef?.scrollTop || 0;\n  };\n\n  private handleMouseMove = (e: MouseEvent) => {\n    if (!this.isDragging || !this.wrapRef) return;\n\n    const deltaY = e.clientY - this.startY;\n    const wrapHeight = this.wrapRef.clientHeight;\n    const scrollHeight = this.wrapRef.scrollHeight;\n    const maxScrollTop = scrollHeight - wrapHeight;\n    const thumbHeight = this.thumbHeight;\n    const maxThumbTop = wrapHeight - thumbHeight;\n\n    const scrollDelta = (deltaY / maxThumbTop) * maxScrollTop;\n    const newScrollTop = Math.max(0, Math.min(maxScrollTop, this.startScrollTop + scrollDelta));\n\n    this.wrapRef.scrollTop = newScrollTop;\n  };\n\n  private handleMouseUp = () => {\n    this.isDragging = false;\n  };\n\n  render() {\n    const style: any = {};\n    if (this.height) {\n      style.height = this.height;\n    }\n    if (this.maxHeight) {\n      style.maxHeight = this.maxHeight;\n    }\n\n    if (this.native) {\n      return (\n        <div\n          class=\"hb-scrollbar hb-scrollbar--native\"\n          style={style}\n        >\n          <div class=\"hb-scrollbar__wrap\">\n            <div class=\"hb-scrollbar__view\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"hb-scrollbar\" style={style}>\n        <div\n          class=\"hb-scrollbar__wrap\"\n          ref={(el) => (this.wrapRef = el)}\n          onScroll={this.handleScroll}\n        >\n          <div class=\"hb-scrollbar__view\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.scrollbarVisible && !this.native && (\n          <div class=\"hb-scrollbar__bar hb-scrollbar__bar--vertical\">\n            <div\n              class=\"hb-scrollbar__thumb\"\n              ref={(el) => {\n                this.thumbRef = el;\n                if (el && !this.native) {\n                  el.addEventListener('mousedown', this.handleThumbMouseDown);\n                }\n              }}\n              style={{\n                height: `${this.thumbHeight}px`,\n                transform: `translateY(${this.thumbTop}px)`,\n              }}\n            ></div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Scrollbar/scrollbar.css

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  --hb-scrollbar-bg-color: var(--hb-fill-color-light, #f5f7fa);
+  --hb-scrollbar-thumb-color: var(--hb-fill-color, #c0c4cc);
+  --hb-scrollbar-thumb-hover-color: var(--hb-fill-color-dark, #a0a4ac);
+}
+
+.hb-scrollbar {
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+}
+
+.hb-scrollbar__wrap {
+  overflow: auto;
+  height: 100%;
+  scrollbar-width: thin;
+  scrollbar-color: var(--hb-scrollbar-thumb-color) var(--hb-scrollbar-bg-color);
+}
+
+.hb-scrollbar__wrap::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.hb-scrollbar__wrap::-webkit-scrollbar-track {
+  background: var(--hb-scrollbar-bg-color);
+  border-radius: 3px;
+}
+
+.hb-scrollbar__wrap::-webkit-scrollbar-thumb {
+  background: var(--hb-scrollbar-thumb-color);
+  border-radius: 3px;
+}
+
+.hb-scrollbar__wrap::-webkit-scrollbar-thumb:hover {
+  background: var(--hb-scrollbar-thumb-hover-color);
+}
+
+.hb-scrollbar--native .hb-scrollbar__wrap {
+  overflow-y: auto;
+}
+
+.hb-scrollbar__view {
+  width: 100%;
+}
+
+.hb-scrollbar__bar {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  z-index: 1;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.12s ease-out;
+}
+
+.hb-scrollbar:hover .hb-scrollbar__bar {
+  opacity: 1;
+}
+
+.hb-scrollbar__bar--vertical {
+  width: 6px;
+  top: 2px;
+}
+
+.hb-scrollbar__bar--vertical > div {
+  width: 100%;
+}
+
+.hb-scrollbar__thumb {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  cursor: pointer;
+  border-radius: inherit;
+  background-color: var(--hb-scrollbar-thumb-color);
+  transition: background-color 0.3s;
+}
+
+.hb-scrollbar__thumb:hover {
+  background-color: var(--hb-scrollbar-thumb-hover-color);
+}
+

package/dist/collection/components/Segmented/Segmented.js

@@ -0,0 +1,149 @@
+import { h } from "@stencil/core";
+/**
+ * Segmented 分段控制器组件
+ * 类似 iOS 分段控件，选中项有高亮滑块背景
+ */
+export class Segmented {
+    /** 当前选中值 */
+    modelValue = '';
+    /** 是否撑满宽度 */
+    block = false;
+    /** 尺寸 */
+    size = 'default';
+    /** 选项数组 */
+    options = [];
+    /** 选中值变化事件 */
+    hbChange;
+    handleSelect = (option) => {
+        if (option.disabled || option.value === this.modelValue)
+            return;
+        this.modelValue = option.value;
+        this.hbChange.emit(option.value);
+    };
+    render() {
+        return (h("div", { key: '1e3f2004fd85fbce0d29721006dcf9f415827ec5', class: { 'hb-segmented': true, [`hb-segmented--${this.size}`]: true, 'hb-segmented--block': this.block } }, h("div", { key: '81859de225297f531f53825d792a965356daf685', class: "hb-segmented__items" }, this.options.map((option) => (h("button", { type: "button", class: {
+                'hb-segmented__item': true,
+                'hb-segmented__item--active': option.value === this.modelValue,
+                'hb-segmented__item--disabled': !!option.disabled,
+            }, disabled: !!option.disabled, onClick: () => this.handleSelect(option) }, h("span", { class: "hb-segmented__item-label" }, option.label)))))));
+    }
+    static get is() { return "hb-segmented"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["segmented.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["segmented.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u9009\u4E2D\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u6491\u6EE1\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "block",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentedOption[]",
+                    "resolved": "SegmentedOption[]",
+                    "references": {
+                        "SegmentedOption": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Segmented/Segmented.tsx",
+                            "id": "src/components/Segmented/Segmented.tsx::SegmentedOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9009\u9879\u6570\u7EC4"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9009\u4E2D\u503C\u53D8\u5316\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=Segmented.js.map