huibo-ui 0.3.0

package/dist/collection/components/Text/Text.js

@@ -0,0 +1,203 @@
+import { h } from "@stencil/core";
+/**
+ * Text 文本组件
+ * 用于文本展示的基础组件
+ */
+export class Text {
+    /**
+     * 文本类型
+     * @default ''
+     */
+    type = '';
+    /**
+     * 文本大小
+     * @default 'default'
+     */
+    size = 'default';
+    /**
+     * 是否省略
+     * @default false
+     */
+    truncated = false;
+    /**
+     * 是否加粗
+     * @default false
+     */
+    bold = false;
+    /**
+     * 是否斜体
+     * @default false
+     */
+    italic = false;
+    /**
+     * 是否删除线
+     * @default false
+     */
+    deleted = false;
+    render() {
+        return (h("span", { key: '71ef3be634ff5831895415e3225d0197c66319d9', class: {
+                'hb-text': true,
+                [`hb-text--${this.type}`]: !!this.type,
+                [`hb-text--${this.size}`]: true,
+                'hb-text--truncated': this.truncated,
+                'hb-text--bold': this.bold,
+                'hb-text--italic': this.italic,
+                'hb-text--deleted': this.deleted,
+            } }, h("slot", { key: '801d3ae1c36d0d62c7853e4f16e28c4b27eaa865' })));
+    }
+    static get is() { return "hb-text"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["text.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["text.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'success' | 'warning' | 'danger' | 'info' | ''",
+                    "resolved": "\"\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "\u6587\u672C\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "\u6587\u672C\u5927\u5C0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "truncated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7701\u7565"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "truncated",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bold": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u52A0\u7C97"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "bold",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "italic": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u659C\u4F53"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "italic",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "deleted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u5220\u9664\u7EBF"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "deleted",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=Text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,IAAI;IACf;;;OAGG;IACK,IAAI,GAA+D,EAAE,CAAC;IAE9E;;;OAGG;IACK,IAAI,GAAkC,SAAS,CAAC;IAExD;;;OAGG;IACK,SAAS,GAAY,KAAK,CAAC;IAEnC;;;OAGG;IACK,IAAI,GAAY,KAAK,CAAC;IAE9B;;;OAGG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC;;;OAGG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC,MAAM;QACJ,OAAO,CACL,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;gBACtC,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;gBAC/B,oBAAoB,EAAE,IAAI,CAAC,SAAS;gBACpC,eAAe,EAAE,IAAI,CAAC,IAAI;gBAC1B,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,kBAAkB,EAAE,IAAI,CAAC,OAAO;aACjC;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Text 文本组件\n * 用于文本展示的基础组件\n */\n@Component({\n  tag: 'hb-text',\n  styleUrl: 'text.css',\n  shadow: true,\n})\nexport class Text {\n  /**\n   * 文本类型\n   * @default ''\n   */\n  @Prop() type: 'primary' | 'success' | 'warning' | 'danger' | 'info' | '' = '';\n\n  /**\n   * 文本大小\n   * @default 'default'\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否省略\n   * @default false\n   */\n  @Prop() truncated: boolean = false;\n\n  /**\n   * 是否加粗\n   * @default false\n   */\n  @Prop() bold: boolean = false;\n\n  /**\n   * 是否斜体\n   * @default false\n   */\n  @Prop() italic: boolean = false;\n\n  /**\n   * 是否删除线\n   * @default false\n   */\n  @Prop() deleted: boolean = false;\n\n  render() {\n    return (\n      <span\n        class={{\n          'hb-text': true,\n          [`hb-text--${this.type}`]: !!this.type,\n          [`hb-text--${this.size}`]: true,\n          'hb-text--truncated': this.truncated,\n          'hb-text--bold': this.bold,\n          'hb-text--italic': this.italic,\n          'hb-text--deleted': this.deleted,\n        }}\n      >\n        <slot></slot>\n      </span>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Text/text.css

@@ -0,0 +1,61 @@
+:host {
+  display: inline-block;
+  --hb-text-font-size-default: 14px;
+  --hb-text-font-size-small: 12px;
+  --hb-text-font-size-large: 16px;
+  --hb-text-color: var(--hb-color-text-regular);
+}
+
+.hb-text {
+  font-size: var(--hb-text-font-size-default);
+  color: var(--hb-text-color);
+  line-height: 1.5;
+}
+
+.hb-text--small {
+  font-size: var(--hb-text-font-size-small);
+}
+
+.hb-text--large {
+  font-size: var(--hb-text-font-size-large);
+}
+
+.hb-text--truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hb-text--bold {
+  font-weight: 600;
+}
+
+.hb-text--italic {
+  font-style: italic;
+}
+
+.hb-text--deleted {
+  text-decoration: line-through;
+}
+
+/* Type variants */
+.hb-text--primary {
+  --hb-text-color: var(--hb-color-primary);
+}
+
+.hb-text--success {
+  --hb-text-color: var(--hb-color-success);
+}
+
+.hb-text--warning {
+  --hb-text-color: var(--hb-color-warning);
+}
+
+.hb-text--danger {
+  --hb-text-color: var(--hb-color-danger);
+}
+
+.hb-text--info {
+  --hb-text-color: var(--hb-color-info);
+}
+

package/dist/collection/components/TimePicker/TimePicker.js

@@ -0,0 +1,348 @@
+import { h } from "@stencil/core";
+import { createClickOutsideHandler } from "../../utils/click-outside";
+/**
+ * TimePicker 时间选择器组件
+ * 用于选择或输入时间
+ */
+export class TimePicker {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 输入框占位文本
+     */
+    placeholder = '请选择时间';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 时间格式
+     * @default 'HH:mm:ss'
+     */
+    format = 'HH:mm:ss';
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    inputId;
+    isOpen = false;
+    inputValue = '';
+    selectedHour = 0;
+    selectedMinute = 0;
+    selectedSecond = 0;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    clickOutside = createClickOutsideHandler({
+        host: null,
+        isOpen: () => this.isOpen,
+        onClose: () => { this.isOpen = false; },
+    });
+    componentDidLoad() {
+        this.clickOutside = createClickOutsideHandler({
+            host: this.el,
+            isOpen: () => this.isOpen,
+            onClose: () => { this.isOpen = false; },
+        });
+        this.clickOutside.connect();
+        this.updateInputValue();
+    }
+    disconnectedCallback() {
+        this.clickOutside.disconnect();
+    }
+    handleValueChange() {
+        this.updateInputValue();
+    }
+    updateInputValue() {
+        if (!this.modelValue) {
+            this.inputValue = '';
+            return;
+        }
+        const parts = this.modelValue.split(':');
+        if (parts.length >= 2) {
+            this.selectedHour = parseInt(parts[0]) || 0;
+            this.selectedMinute = parseInt(parts[1]) || 0;
+            this.selectedSecond = parseInt(parts[2]) || 0;
+            this.inputValue = this.modelValue;
+        }
+    }
+    handleInputClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.modelValue = undefined;
+        this.inputValue = '';
+        this.isOpen = false;
+        this.hbChange.emit(undefined);
+    };
+    handleTimeSelect = (hour, minute, second) => {
+        this.selectedHour = hour;
+        this.selectedMinute = minute;
+        this.selectedSecond = second;
+        const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;
+        this.modelValue = timeStr;
+        this.inputValue = timeStr;
+        this.isOpen = false;
+        this.hbChange.emit(timeStr);
+    };
+    generateNumbers(max) {
+        return Array.from({ length: max + 1 }, (_, i) => i);
+    }
+    render() {
+        const hours = this.generateNumbers(23);
+        const minutes = this.generateNumbers(59);
+        const seconds = this.generateNumbers(59);
+        return (h("div", { key: '9094283db6c38172f2f03afc10a853df1e0c669c', class: {
+                'hb-time-picker': true,
+                'hb-time-picker--open': this.isOpen,
+                'hb-time-picker--disabled': this.disabled,
+                [`hb-time-picker--${this.size}`]: true,
+            } }, h("div", { key: 'f96d2140416a203cabe716024c5f885bfc695cf7', class: "hb-time-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: '742a2e365167ab75563da2c6c0b6cc6b0d944e60', type: "text", id: this.inputId, name: this.name, class: "hb-time-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true }), h("span", { key: '1be1f914701d9b2475ca33b646fd0edd0b838e28', class: "hb-time-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: 'dab0ca8babf46b0101c98f39a4b0dbfd65ba4af1', class: "hb-time-picker__clear", onClick: this.handleClear }, "\u00D7")), h("span", { key: 'adc2a72220366441cda6b93df5750247766078d6', class: "hb-time-picker__icon" }, "\uD83D\uDD50"))), this.isOpen && (h("div", { key: '8cb56572553259f7eb217c59b08f12517cc80ea0', class: "hb-time-picker__dropdown" }, h("div", { key: '0d3349183f69feb327e87837a6e7d7c779a5933e', class: "hb-time-picker__body" }, h("div", { key: 'c8a856d7fd258b35d6d4fc1cd099f06e676246ec', class: "hb-time-picker__list" }, h("div", { key: 'b0ea8ce96ccf37b7b796ede2ddf3c1174240af86', class: "hb-time-picker__list-title" }, "\u65F6"), h("div", { key: 'b64f8611176a34fc9423b4e97b2f75b2fd35b424', class: "hb-time-picker__list-content" }, hours.map((hour) => (h("div", { class: {
+                'hb-time-picker__item': true,
+                'hb-time-picker__item--selected': hour === this.selectedHour,
+            }, onClick: () => this.handleTimeSelect(hour, this.selectedMinute, this.selectedSecond) }, String(hour).padStart(2, '0')))))), h("div", { key: 'bb942f55ddae345907af5fd02e5cee5212708f5c', class: "hb-time-picker__list" }, h("div", { key: '668ea699803a436745c75eb9731c057bbeed8a1d', class: "hb-time-picker__list-title" }, "\u5206"), h("div", { key: '47a6302477dd7723c046f5f17651aea2ef538cb6', class: "hb-time-picker__list-content" }, minutes.map((minute) => (h("div", { class: {
+                'hb-time-picker__item': true,
+                'hb-time-picker__item--selected': minute === this.selectedMinute,
+            }, onClick: () => this.handleTimeSelect(this.selectedHour, minute, this.selectedSecond) }, String(minute).padStart(2, '0')))))), this.format.includes('ss') && (h("div", { key: '61d76686b06642b0af2df140723eac7f263692ae', class: "hb-time-picker__list" }, h("div", { key: 'c12f055dca542b95e3e9f4a5113c3262c4c0e406', class: "hb-time-picker__list-title" }, "\u79D2"), h("div", { key: '71ede0e6b2412009b840e3c52ec0664035db45bd', class: "hb-time-picker__list-content" }, seconds.map((second) => (h("div", { class: {
+                'hb-time-picker__item': true,
+                'hb-time-picker__item--selected': second === this.selectedSecond,
+            }, onClick: () => this.handleTimeSelect(this.selectedHour, this.selectedMinute, second) }, String(second).padStart(2, '0'))))))))))));
+    }
+    static get is() { return "hb-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["time-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["time-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'\u8BF7\u9009\u62E9\u65F6\u95F4'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "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": "\u8F93\u5165\u6846\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u53EF\u6E05\u7A7A"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'HH:mm:ss'"
+                        }],
+                    "text": "\u65F6\u95F4\u683C\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "format",
+                "reflect": false,
+                "defaultValue": "'HH:mm:ss'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F name \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F id \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "inputValue": {},
+            "selectedHour": {},
+            "selectedMinute": {},
+            "selectedSecond": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=TimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\nimport { createClickOutsideHandler } from '../../utils/click-outside';\n\n/**\n * TimePicker 时间选择器组件\n * 用于选择或输入时间\n */\n@Component({\n  tag: 'hb-time-picker',\n  styleUrl: 'time-picker.css',\n  shadow: true,\n})\nexport class TimePicker {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder: string = '请选择时间';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 时间格式\n   * @default 'HH:mm:ss'\n   */\n  @Prop() format: string = 'HH:mm:ss';\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() selectedHour: number = 0;\n  @State() selectedMinute: number = 0;\n  @State() selectedSecond: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  private clickOutside = createClickOutsideHandler({\n    host: null as any,\n    isOpen: () => this.isOpen,\n    onClose: () => { this.isOpen = false; },\n  });\n\n  componentDidLoad() {\n    this.clickOutside = createClickOutsideHandler({\n      host: this.el,\n      isOpen: () => this.isOpen,\n      onClose: () => { this.isOpen = false; },\n    });\n    this.clickOutside.connect();\n    this.updateInputValue();\n  }\n\n  disconnectedCallback() {\n    this.clickOutside.disconnect();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateInputValue();\n  }\n\n  private updateInputValue() {\n    if (!this.modelValue) {\n      this.inputValue = '';\n      return;\n    }\n\n    const parts = this.modelValue.split(':');\n    if (parts.length >= 2) {\n      this.selectedHour = parseInt(parts[0]) || 0;\n      this.selectedMinute = parseInt(parts[1]) || 0;\n      this.selectedSecond = parseInt(parts[2]) || 0;\n      this.inputValue = this.modelValue;\n    }\n  }\n\n  private handleInputClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = undefined;\n    this.inputValue = '';\n    this.isOpen = false;\n    this.hbChange.emit(undefined);\n  };\n\n  private handleTimeSelect = (hour: number, minute: number, second: number) => {\n    this.selectedHour = hour;\n    this.selectedMinute = minute;\n    this.selectedSecond = second;\n    \n    const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:${String(second).padStart(2, '0')}`;\n    this.modelValue = timeStr;\n    this.inputValue = timeStr;\n    this.isOpen = false;\n    this.hbChange.emit(timeStr);\n  };\n\n  private generateNumbers(max: number): number[] {\n    return Array.from({ length: max + 1 }, (_, i) => i);\n  }\n\n  render() {\n    const hours = this.generateNumbers(23);\n    const minutes = this.generateNumbers(59);\n    const seconds = this.generateNumbers(59);\n\n    return (\n      <div\n        class={{\n          'hb-time-picker': true,\n          'hb-time-picker--open': this.isOpen,\n          'hb-time-picker--disabled': this.disabled,\n          [`hb-time-picker--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-time-picker__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            id={this.inputId}\n            name={this.name}\n            class=\"hb-time-picker__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n          />\n          <span class=\"hb-time-picker__suffix\">\n            {this.clearable && this.modelValue && (\n              <span class=\"hb-time-picker__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-time-picker__icon\">🕐</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-time-picker__dropdown\">\n            <div class=\"hb-time-picker__body\">\n              <div class=\"hb-time-picker__list\">\n                <div class=\"hb-time-picker__list-title\">时</div>\n                <div class=\"hb-time-picker__list-content\">\n                  {hours.map((hour) => (\n                    <div\n                      class={{\n                        'hb-time-picker__item': true,\n                        'hb-time-picker__item--selected': hour === this.selectedHour,\n                      }}\n                      onClick={() => this.handleTimeSelect(hour, this.selectedMinute, this.selectedSecond)}\n                    >\n                      {String(hour).padStart(2, '0')}\n                    </div>\n                  ))}\n                </div>\n              </div>\n              <div class=\"hb-time-picker__list\">\n                <div class=\"hb-time-picker__list-title\">分</div>\n                <div class=\"hb-time-picker__list-content\">\n                  {minutes.map((minute) => (\n                    <div\n                      class={{\n                        'hb-time-picker__item': true,\n                        'hb-time-picker__item--selected': minute === this.selectedMinute,\n                      }}\n                      onClick={() => this.handleTimeSelect(this.selectedHour, minute, this.selectedSecond)}\n                    >\n                      {String(minute).padStart(2, '0')}\n                    </div>\n                  ))}\n                </div>\n              </div>\n              {this.format.includes('ss') && (\n                <div class=\"hb-time-picker__list\">\n                  <div class=\"hb-time-picker__list-title\">秒</div>\n                  <div class=\"hb-time-picker__list-content\">\n                    {seconds.map((second) => (\n                      <div\n                        class={{\n                          'hb-time-picker__item': true,\n                          'hb-time-picker__item--selected': second === this.selectedSecond,\n                        }}\n                        onClick={() => this.handleTimeSelect(this.selectedHour, this.selectedMinute, second)}\n                      >\n                        {String(second).padStart(2, '0')}\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}