huibo-ui 0.3.0

package/dist/collection/components/Container/Header.js

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+/**
+ * Container Header 组件
+ * 顶部容器
+ */
+export class Header {
+    /**
+     * 高度
+     */
+    height;
+    render() {
+        const style = {};
+        if (this.height) {
+            style.height = this.height;
+        }
+        return (h("header", { key: '86042705286a6d135858982b34cdb19da71b6744', class: "hb-header", style: style }, h("slot", { key: '96d5152e19c88d4cbc4c30bc136b27b6b8388331' })));
+    }
+    static get is() { return "hb-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u9AD8\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "height",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=Header.js.map

package/dist/collection/components/Container/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/Container/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,MAAM;IACjB;;OAEG;IACK,MAAM,CAAU;IAExB,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;QAED,OAAO,CACL,+DAAQ,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,KAAK;YACpC,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container Header 组件\n * 顶部容器\n */\n@Component({\n  tag: 'hb-header',\n  styleUrl: 'header.css',\n  shadow: true,\n})\nexport class Header {\n  /**\n   * 高度\n   */\n  @Prop() height?: string;\n\n  render() {\n    const style: any = {};\n    if (this.height) {\n      style.height = this.height;\n    }\n\n    return (\n      <header class=\"hb-header\" style={style}>\n        <slot></slot>\n      </header>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Container/Main.js

@@ -0,0 +1,23 @@
+import { h } from "@stencil/core";
+/**
+ * Container Main 组件
+ * 主要区域容器
+ */
+export class Main {
+    render() {
+        return (h("main", { key: 'd326db7b0e9de0ff411ca3af99f2399a5e760557', class: "hb-main" }, h("slot", { key: 'cea61788b327d41f6307be518c368eca41a254b2' })));
+    }
+    static get is() { return "hb-main"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["main.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["main.css"]
+        };
+    }
+}
+//# sourceMappingURL=Main.js.map

package/dist/collection/components/Container/Main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../../src/components/Container/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;GAGG;AAMH,MAAM,OAAO,IAAI;IACf,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAC,SAAS;YACnB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * Container Main 组件\n * 主要区域容器\n */\n@Component({\n  tag: 'hb-main',\n  styleUrl: 'main.css',\n  shadow: true,\n})\nexport class Main {\n  render() {\n    return (\n      <main class=\"hb-main\">\n        <slot></slot>\n      </main>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Container/aside.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  --hb-aside-width: 200px;
+  --hb-aside-padding: 20px;
+  --hb-aside-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-aside {
+  width: var(--hb-aside-width);
+  padding: var(--hb-aside-padding);
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: var(--hb-aside-bg-color);
+}
+

package/dist/collection/components/Container/container.css

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+  --hb-container-padding: 20px;
+}
+
+.hb-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.hb-container--vertical {
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+/* Header */
+::slotted(hb-header) {
+  padding: var(--hb-container-padding);
+}
+
+/* Aside */
+::slotted(hb-aside) {
+  padding: var(--hb-container-padding);
+}
+
+/* Main */
+::slotted(hb-main) {
+  padding: var(--hb-container-padding);
+  flex: 1;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+/* Footer */
+::slotted(hb-footer) {
+  padding: var(--hb-container-padding);
+}
+

package/dist/collection/components/Container/footer.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  --hb-footer-height: 60px;
+  --hb-footer-padding: 0 20px;
+  --hb-footer-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-footer {
+  height: var(--hb-footer-height);
+  padding: var(--hb-footer-padding);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background-color: var(--hb-footer-bg-color);
+}
+

package/dist/collection/components/Container/header.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+  --hb-header-height: 60px;
+  --hb-header-padding: 0 20px;
+  --hb-header-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-header {
+  height: var(--hb-header-height);
+  padding: var(--hb-header-padding);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background-color: var(--hb-header-bg-color);
+}
+

package/dist/collection/components/Container/main.css

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  --hb-main-padding: 20px;
+  --hb-main-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-main {
+  flex: 1;
+  padding: var(--hb-main-padding);
+  box-sizing: border-box;
+  overflow: auto;
+  background-color: var(--hb-main-bg-color);
+}
+

package/dist/collection/components/DatePicker/DatePicker.js

@@ -0,0 +1,402 @@
+import { h } from "@stencil/core";
+import { createClickOutsideHandler } from "../../utils/click-outside";
+import { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from "../../utils/date-helpers";
+/**
+ * DatePicker 日期选择器组件
+ * 用于选择或输入日期
+ */
+export class DatePicker {
+    el;
+    /** 绑定值 */
+    modelValue;
+    /** 输入框占位文本 */
+    placeholder = '请选择日期';
+    /** 是否禁用 */
+    disabled = false;
+    /** 输入框尺寸 */
+    size = 'default';
+    /** 是否可清空 */
+    clearable = false;
+    /** 日期格式 */
+    format = 'YYYY-MM-DD';
+    /** 显示在输入框中的格式 */
+    valueFormat;
+    /**
+     * 日期选择器类型
+     * 当前仅支持 'date'，更多类型将在后续版本实现
+     */
+    type = 'date';
+    /**
+     * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。
+     * @param date 当前日期格子的 Date 对象
+     */
+    disabledDate;
+    /** 原生 name 属性 */
+    name;
+    /** 原生 id 属性 */
+    inputId;
+    isOpen = false;
+    inputValue = '';
+    selectedDate;
+    /** 值改变事件 */
+    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() {
+        const date = parseDate(this.modelValue);
+        if (!date) {
+            this.inputValue = '';
+            this.selectedDate = undefined;
+            return;
+        }
+        this.selectedDate = date;
+        this.inputValue = formatDate(date, this.format);
+    }
+    handleInputClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.modelValue = undefined;
+        this.inputValue = '';
+        this.selectedDate = undefined;
+        this.isOpen = false;
+        this.hbChange.emit(undefined);
+    };
+    handleDateSelect = (date) => {
+        // disabledDate 返回 true 的日期不可选
+        if (this.disabledDate && this.disabledDate(date))
+            return;
+        this.selectedDate = date;
+        this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;
+        this.updateInputValue();
+        this.isOpen = false;
+        this.hbChange.emit(this.modelValue);
+    };
+    changeMonth(delta) {
+        this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
+    }
+    /** 判断某日期是否被 disabledDate 禁用 */
+    isDateDisabled = (date) => {
+        return !!this.disabledDate && this.disabledDate(date);
+    };
+    render() {
+        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
+        const current = this.selectedDate || new Date();
+        return (h("div", { key: '79e20fe927318faa30086dbe5cd3e17b24077f8f', class: {
+                'hb-date-picker': true,
+                'hb-date-picker--open': this.isOpen,
+                'hb-date-picker--disabled': this.disabled,
+                [`hb-date-picker--${this.size}`]: true,
+            } }, h("div", { key: 'eb216f889017004192cdc04496334c21e714e971', class: "hb-date-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: 'ac23cc7e2d3ba77141ec342477bf984ce581b30a', type: "text", id: this.inputId, name: this.name, class: "hb-date-picker__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.placeholder }), h("span", { key: 'd9371788b72feacd581e908d65770af8b9eb535a', class: "hb-date-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '86601557f8419ba22111ca214c3130ee444b383e', class: "hb-date-picker__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, "\u00D7")), h("span", { key: '55662b6a4b49cf42c54e2906fb062c8c45a9259e', class: "hb-date-picker__icon", "aria-hidden": "true" }, "\uD83D\uDCC5"))), this.isOpen && (h("div", { key: '3b1d2bbb8fd12b5b8c2748028f7b13daa08df5a0', class: "hb-date-picker__dropdown", role: "dialog", "aria-label": "\u9009\u62E9\u65E5\u671F" }, h("div", { key: '310b54cb7c477fc52657b220201e82f69059b3a0', class: "hb-date-picker__header" }, h("button", { key: '63cf02ce80ea6522592863a31696b91b79ebd0ef', type: "button", class: "hb-date-picker__prev-btn", "aria-label": "\u4E0A\u4E00\u6708", onClick: () => this.changeMonth(-1) }, "\u2039"), h("span", { key: 'f74837430f189198929125413a7b61568e37c1a7', class: "hb-date-picker__header-label", "aria-live": "polite" }, current.getFullYear(), "\u5E74 ", MONTH_NAMES[current.getMonth()]), h("button", { key: 'db36b5b8823fa3dc5f8355d77225b19ea262d2fd', type: "button", class: "hb-date-picker__next-btn", "aria-label": "\u4E0B\u4E00\u6708", onClick: () => this.changeMonth(1) }, "\u203A")), h("div", { key: '2adbe9940556d5f01049bcdb4777c67b2519c5ef', class: "hb-date-picker__body", role: "grid" }, h("div", { key: 'd4b2deab072b795b852abdb4e54f9c3493feaecd', class: "hb-date-picker__weekdays", role: "row" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker__weekday", role: "columnheader", "aria-disabled": "true" }, day)))), h("div", { key: '208e6260719c97616be80386b3fc9da3521eed83', class: "hb-date-picker__days", role: "row" }, days.map((day, index) => {
+            const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);
+            return (h("div", { key: index, class: {
+                    'hb-date-picker__day': true,
+                    'hb-date-picker__day--other-month': !day.isCurrentMonth,
+                    'hb-date-picker__day--today': day.isToday,
+                    'hb-date-picker__day--selected': day.isSelected,
+                    'hb-date-picker__day--disabled': dayDisabled,
+                }, role: "gridcell", "aria-selected": day.isSelected ? 'true' : 'false', "aria-disabled": !day.isCurrentMonth || dayDisabled ? 'true' : undefined, "aria-label": formatDate(day.date, this.format), onClick: () => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date) }, day.date.getDate()));
+        })))))));
+    }
+    static get is() { return "hb-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "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\u65E5\u671F'"
+            },
+            "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"
+            },
+            "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": [],
+                    "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": [],
+                    "text": "\u65E5\u671F\u683C\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "format",
+                "reflect": false,
+                "defaultValue": "'YYYY-MM-DD'"
+            },
+            "valueFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u663E\u793A\u5728\u8F93\u5165\u6846\u4E2D\u7684\u683C\u5F0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value-format",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"date\"",
+                    "resolved": "\"date\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u65E5\u671F\u9009\u62E9\u5668\u7C7B\u578B\n\u5F53\u524D\u4EC5\u652F\u6301 'date'\uFF0C\u66F4\u591A\u7C7B\u578B\u5C06\u5728\u540E\u7EED\u7248\u672C\u5B9E\u73B0"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'date' as const"
+            },
+            "disabledDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "(date: Date) => boolean",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "param",
+                            "text": "date \u5F53\u524D\u65E5\u671F\u683C\u5B50\u7684 Date \u5BF9\u8C61"
+                        }],
+                    "text": "\u7981\u7528\u65E5\u671F\u5224\u5B9A\u51FD\u6570\u3002\u8FD4\u56DE true \u7684\u65E5\u671F\u5728\u65E5\u5386\u4E2D\u4E0D\u53EF\u9009\uFF08\u52A0 disabled \u6001\u3001\u4E0D\u53EF\u70B9\u51FB\u3001aria-disabled\uFF09\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "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": {},
+            "selectedDate": {}
+        };
+    }
+    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 | Date",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.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';\nimport { getCalendarDays, formatDate, parseDate, addMonths, MONTH_NAMES, WEEK_DAY_NAMES } from '../../utils/date-helpers';\n\n/**\n * DatePicker 日期选择器组件\n * 用于选择或输入日期\n */\n@Component({\n  tag: 'hb-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class DatePicker {\n  @Element() el: HTMLElement;\n\n  /** 绑定值 */\n  @Prop({ mutable: true }) modelValue?: string | Date;\n\n  /** 输入框占位文本 */\n  @Prop() placeholder: string = '请选择日期';\n\n  /** 是否禁用 */\n  @Prop() disabled: boolean = false;\n\n  /** 输入框尺寸 */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /** 是否可清空 */\n  @Prop() clearable: boolean = false;\n\n  /** 日期格式 */\n  @Prop() format: string = 'YYYY-MM-DD';\n\n  /** 显示在输入框中的格式 */\n  @Prop() valueFormat?: string;\n\n  /**\n   * 日期选择器类型\n   * 当前仅支持 'date'，更多类型将在后续版本实现\n   */\n  @Prop() type = 'date' as const;\n\n  /**\n   * 禁用日期判定函数。返回 true 的日期在日历中不可选（加 disabled 态、不可点击、aria-disabled）。\n   * @param date 当前日期格子的 Date 对象\n   */\n  @Prop() disabledDate?: (date: Date) => boolean;\n\n  /** 原生 name 属性 */\n  @Prop() name?: string;\n\n  /** 原生 id 属性 */\n  @Prop() inputId?: string;\n\n  @State() isOpen: boolean = false;\n  @State() inputValue: string = '';\n  @State() selectedDate?: Date;\n\n  /** 值改变事件 */\n  @Event() hbChange: EventEmitter<string | Date>;\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    const date = parseDate(this.modelValue);\n    if (!date) {\n      this.inputValue = '';\n      this.selectedDate = undefined;\n      return;\n    }\n    this.selectedDate = date;\n    this.inputValue = formatDate(date, this.format);\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.selectedDate = undefined;\n    this.isOpen = false;\n    this.hbChange.emit(undefined);\n  };\n\n  private handleDateSelect = (date: Date) => {\n    // disabledDate 返回 true 的日期不可选\n    if (this.disabledDate && this.disabledDate(date)) return;\n    this.selectedDate = date;\n    this.modelValue = this.valueFormat ? formatDate(date, this.format) : date;\n    this.updateInputValue();\n    this.isOpen = false;\n    this.hbChange.emit(this.modelValue);\n  };\n\n  private changeMonth(delta: number) {\n    this.selectedDate = addMonths(this.selectedDate || new Date(), delta);\n  }\n\n  /** 判断某日期是否被 disabledDate 禁用 */\n  private isDateDisabled = (date: Date): boolean => {\n    return !!this.disabledDate && this.disabledDate(date);\n  };\n\n  render() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    const current = this.selectedDate || new Date();\n\n    return (\n      <div\n        class={{\n          'hb-date-picker': true,\n          'hb-date-picker--open': this.isOpen,\n          'hb-date-picker--disabled': this.disabled,\n          [`hb-date-picker--${this.size}`]: true,\n        }}\n      >\n        <div class=\"hb-date-picker__input-wrapper\" onClick={this.handleInputClick}>\n          <input\n            type=\"text\"\n            id={this.inputId}\n            name={this.name}\n            class=\"hb-date-picker__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            readonly\n            role=\"combobox\"\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.isOpen ? 'true' : 'false'}\n            aria-label={this.placeholder}\n          />\n          <span class=\"hb-date-picker__suffix\">\n            {this.clearable && this.modelValue && (\n              <span class=\"hb-date-picker__clear\" role=\"button\" aria-label=\"清空\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            <span class=\"hb-date-picker__icon\" aria-hidden=\"true\">📅</span>\n          </span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-date-picker__dropdown\" role=\"dialog\" aria-label=\"选择日期\">\n            <div class=\"hb-date-picker__header\">\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__prev-btn\"\n                aria-label=\"上一月\"\n                onClick={() => this.changeMonth(-1)}\n              >\n                ‹\n              </button>\n              <span class=\"hb-date-picker__header-label\" aria-live=\"polite\">\n                {current.getFullYear()}年 {MONTH_NAMES[current.getMonth()]}\n              </span>\n              <button\n                type=\"button\"\n                class=\"hb-date-picker__next-btn\"\n                aria-label=\"下一月\"\n                onClick={() => this.changeMonth(1)}\n              >\n                ›\n              </button>\n            </div>\n            <div class=\"hb-date-picker__body\" role=\"grid\">\n              <div class=\"hb-date-picker__weekdays\" role=\"row\">\n                {WEEK_DAY_NAMES.map(day => (\n                  <div class=\"hb-date-picker__weekday\" role=\"columnheader\" aria-disabled=\"true\">{day}</div>\n                ))}\n              </div>\n              <div class=\"hb-date-picker__days\" role=\"row\">\n                {days.map((day, index) => {\n                  const dayDisabled = day.isCurrentMonth && this.isDateDisabled(day.date);\n                  return (\n                    <div\n                      key={index}\n                      class={{\n                        'hb-date-picker__day': true,\n                        'hb-date-picker__day--other-month': !day.isCurrentMonth,\n                        'hb-date-picker__day--today': day.isToday,\n                        'hb-date-picker__day--selected': day.isSelected,\n                        'hb-date-picker__day--disabled': dayDisabled,\n                      }}\n                      role=\"gridcell\"\n                      aria-selected={day.isSelected ? 'true' : 'false'}\n                      aria-disabled={!day.isCurrentMonth || dayDisabled ? 'true' : undefined}\n                      aria-label={formatDate(day.date, this.format)}\n                      onClick={() => day.isCurrentMonth && !dayDisabled && this.handleDateSelect(day.date)}\n                    >\n                      {day.date.getDate()}\n                    </div>\n                  );\n                })}\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}