huibo-ui 0.3.0

package/dist/esm/hb-color-picker.entry.js

@@ -0,0 +1,261 @@
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-fdf7135e.js';
+
+const colorPickerCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:inline-block;position:relative}.hb-color-picker{display:inline-block}.hb-color-picker__trigger{align-items:center;border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;cursor:pointer;display:inline-flex;padding:4px;transition:border-color .2s}.hb-color-picker__trigger:hover:not(.hb-color-picker--disabled){border-color:var(--hb-color-primary)}.hb-color-picker__color{border:1px solid var(--hb-border-color-lighter,#e4e7ed);border-radius:2px;height:20px;width:40px}.hb-color-picker__text{color:var(--hb-color-text-regular,#606266);font-size:14px;margin-left:8px}.hb-color-picker__dropdown{background-color:var(--hb-color-white,#fff);border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;box-shadow:0 2px 12px #0000001a;left:0;margin-top:4px;min-width:300px;padding:12px;position:absolute;top:100%;z-index:1000}.hb-color-picker__saturation{border-radius:4px;cursor:crosshair;height:180px;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;width:100%}.hb-color-picker__saturation-bg{inset:0;position:absolute}.hb-color-picker__saturation-white{background:linear-gradient(90deg,#fff,#fff0);inset:0;position:absolute}.hb-color-picker__saturation-black{background:linear-gradient(#0000,#000);inset:0;position:absolute}.hb-color-picker__saturation-pointer{border:2px solid var(--hb-color-white,#fff);border-radius:50%;box-shadow:0 0 2px #0000004d;height:12px;position:absolute;transform:translate(-50%,-50%);width:12px}.hb-color-picker__controls{margin-top:12px}.hb-color-picker__alpha,.hb-color-picker__hue{border-radius:2px;cursor:pointer;height:12px;margin-bottom:8px;position:relative}.hb-color-picker__hue{position:relative}.hb-color-picker__hue-bar{background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);border-radius:2px;height:100%}.hb-color-picker__hue-pointer{background:#fff;border:1px solid #0000004d;border-radius:2px;box-shadow:0 0 2px #0000004d;height:100%;pointer-events:none;position:absolute;top:0;transform:translate(-50%);width:4px}.hb-color-picker__alpha-bar{background-image:linear-gradient(45deg,#ccc 25%,#0000 0),linear-gradient(-45deg,#ccc 25%,#0000 0),linear-gradient(45deg,#0000 75%,#ccc 0),linear-gradient(-45deg,#0000 75%,#ccc 0);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:2px;height:100%}.hb-color-picker__input{margin-top:12px}.hb-color-picker__input-hex{border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;font-size:13px;margin-bottom:8px;padding:6px 8px;width:100%}.hb-color-picker__input-rgb{display:flex;gap:8px}.hb-color-picker__input-rgb input{border:1px solid var(--hb-border-color,#dcdfe6);border-radius:4px;flex:1;font-size:13px;padding:6px 8px}.hb-color-picker__predefine{border-top:1px solid var(--hb-border-color-lighter,#e4e7ed);display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px}.hb-color-picker__predefine-color{border:2px solid #0000;border-radius:4px;cursor:pointer;height:24px;transition:transform .2s;width:24px}.hb-color-picker__predefine-color:hover{transform:scale(1.1)}.hb-color-picker__predefine-color--selected{border-color:var(--hb-color-primary);transform:scale(1.1)}.hb-color-picker--disabled{cursor:not-allowed;opacity:.6}.hb-color-picker--disabled .hb-color-picker__trigger{cursor:not-allowed}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbColorPickerStyle0 = colorPickerCss;
+
+const ColorPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbActiveChange = createEvent(this, "hbActiveChange", 7);
+    }
+    get el() { return getElement(this); }
+    /**
+     * 绑定值
+     */
+    modelValue;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 颜色格式
+     */
+    colorFormat = 'hex';
+    /**
+     * 是否显示透明度
+     * @default false
+     */
+    showAlpha = false;
+    /**
+     * 预定义颜色
+     */
+    predefine;
+    isOpen = false;
+    currentColor = '#409EFF';
+    hue = 210; // 色相值 0-360
+    saturation = 100; // 饱和度 0-100
+    value = 100; // 明度 0-100
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 激活时触发
+     */
+    hbActiveChange;
+    componentDidLoad() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+            this.updateHSVFromColor(this.modelValue);
+        }
+        else {
+            this.updateHSVFromColor(this.currentColor);
+        }
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    handleDocumentClick = (e) => {
+        if (!this.isOpen)
+            return;
+        const target = e.target;
+        if (!this.el.contains(target)) {
+            this.isOpen = false;
+        }
+    };
+    handleValueChange() {
+        if (this.modelValue) {
+            this.currentColor = this.modelValue;
+            this.updateHSVFromColor(this.modelValue);
+        }
+    }
+    handleTriggerClick = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+    };
+    handleColorSelect = (color) => {
+        this.currentColor = color;
+        this.modelValue = color;
+        this.hbChange.emit(color);
+        this.hbActiveChange.emit(color);
+    };
+    handleSaturationClick = (e) => {
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        // X 轴代表饱和度 (0-100%)
+        this.saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));
+        // Y 轴代表明度 (0-100%，从上到下)
+        this.value = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));
+        const hex = this.hsvToHex(this.hue, this.saturation, this.value);
+        this.handleColorSelect(hex);
+    };
+    handleHueClick = (e) => {
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        // 色相值 0-360
+        this.hue = Math.max(0, Math.min(360, (x / rect.width) * 360));
+        const hex = this.hsvToHex(this.hue, this.saturation, this.value);
+        this.handleColorSelect(hex);
+    };
+    handleInputChange = (e) => {
+        const target = e.target;
+        const value = target.value;
+        // 验证 hex 颜色格式
+        if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {
+            this.handleColorSelect(value);
+        }
+    };
+    handleRgbInputChange = (index, value) => {
+        const rgb = this.hexToRgb(this.currentColor);
+        if (rgb) {
+            const num = parseInt(value, 10);
+            if (!isNaN(num) && num >= 0 && num <= 255) {
+                if (index === 0)
+                    rgb.r = num;
+                else if (index === 1)
+                    rgb.g = num;
+                else if (index === 2)
+                    rgb.b = num;
+                const hex = `#${[rgb.r, rgb.g, rgb.b].map(x => {
+                    const hex = x.toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                }).join('')}`;
+                this.handleColorSelect(hex);
+            }
+        }
+    };
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    // RGB 转 HSV
+    rgbToHsv(r, g, b) {
+        r = r / 255;
+        g = g / 255;
+        b = b / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const diff = max - min;
+        let h = 0;
+        if (diff !== 0) {
+            if (max === r) {
+                h = ((g - b) / diff) % 6;
+            }
+            else if (max === g) {
+                h = (b - r) / diff + 2;
+            }
+            else {
+                h = (r - g) / diff + 4;
+            }
+        }
+        h = Math.round(h * 60);
+        if (h < 0)
+            h += 360;
+        const s = max === 0 ? 0 : Math.round((diff / max) * 100);
+        const v = Math.round(max * 100);
+        return { h, s, v };
+    }
+    // HSV 转 RGB
+    hsvToRgb(h, s, v) {
+        s = s / 100;
+        v = v / 100;
+        const c = v * s;
+        const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+        const m = v - c;
+        let r = 0, g = 0, b = 0;
+        if (h >= 0 && h < 60) {
+            r = c;
+            g = x;
+            b = 0;
+        }
+        else if (h >= 60 && h < 120) {
+            r = x;
+            g = c;
+            b = 0;
+        }
+        else if (h >= 120 && h < 180) {
+            r = 0;
+            g = c;
+            b = x;
+        }
+        else if (h >= 180 && h < 240) {
+            r = 0;
+            g = x;
+            b = c;
+        }
+        else if (h >= 240 && h < 300) {
+            r = x;
+            g = 0;
+            b = c;
+        }
+        else if (h >= 300 && h < 360) {
+            r = c;
+            g = 0;
+            b = x;
+        }
+        return {
+            r: Math.round((r + m) * 255),
+            g: Math.round((g + m) * 255),
+            b: Math.round((b + m) * 255)
+        };
+    }
+    // HSV 转 Hex
+    hsvToHex(h, s, v) {
+        const rgb = this.hsvToRgb(h, s, v);
+        return `#${[rgb.r, rgb.g, rgb.b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('')}`;
+    }
+    // 从颜色值更新 HSV
+    updateHSVFromColor(color) {
+        const rgb = this.hexToRgb(color);
+        if (rgb) {
+            const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);
+            this.hue = hsv.h;
+            this.saturation = hsv.s;
+            this.value = hsv.v;
+        }
+    }
+    render() {
+        const rgb = this.hexToRgb(this.currentColor);
+        const predefinedColors = this.predefine || [
+            '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
+            '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
+        ];
+        // 根据当前色相生成饱和度面板的背景色
+        const hueColor = this.hsvToHex(this.hue, 100, 100);
+        return (h("div", { key: '3a91756cec6b901dbd98049c6dea3f13cb0125b9', class: {
+                'hb-color-picker': true,
+                'hb-color-picker--open': this.isOpen,
+                'hb-color-picker--disabled': this.disabled,
+            } }, h("div", { key: '60fcf367b48d726dec4626cade99ae39c10c83f7', class: "hb-color-picker__trigger", onClick: this.handleTriggerClick }, h("div", { key: '9b9f4c7f1444d76f1d6df1c480949572affb4a71', class: "hb-color-picker__color", style: { backgroundColor: this.currentColor } }), h("span", { key: 'ddc5c6d1d875012ad46638324b2e9a80eb50d989', class: "hb-color-picker__text" }, this.currentColor)), this.isOpen && (h("div", { key: '4f96c8be969d8b37f0acba6f9ec55d0b0223485d', class: "hb-color-picker__dropdown" }, h("div", { key: '6e754aa587fbe8161315ab3fedfd71ccdf7b9a7e', class: "hb-color-picker__panel" }, h("div", { key: '477dbbe265a0538e3f65f0d3c03dc653cf063982', class: "hb-color-picker__saturation", onClick: this.handleSaturationClick }, h("div", { key: 'eff441602d0795cfb6a05b9470dcec762c47e2a2', class: "hb-color-picker__saturation-bg", style: { backgroundColor: hueColor } }), h("div", { key: '3f3e8c420dbea347c6859f046d0398e1141de926', class: "hb-color-picker__saturation-white" }), h("div", { key: 'e501004e2e2d9f585b48bcc4a90def07c39964c2', class: "hb-color-picker__saturation-black" }), h("div", { key: 'b00cda534203c12195977d0933bd36b1baafab34', class: "hb-color-picker__saturation-pointer", style: {
+                left: `${this.saturation}%`,
+                top: `${100 - this.value}%`,
+            } })), h("div", { key: 'ee86c70a807d70aa292a0208a3a172b35c791325', class: "hb-color-picker__controls" }, h("div", { key: 'd4dda211347b9c3e4ef1dc5e28f5a6a44359a162', class: "hb-color-picker__hue", onClick: this.handleHueClick }, h("div", { key: 'dbab23a4059b6dd2aeada35d7434c79a61860867', class: "hb-color-picker__hue-bar" }), h("div", { key: 'b612775578712beac58a487a23a25c812fb28077', class: "hb-color-picker__hue-pointer", style: {
+                left: `${(this.hue / 360) * 100}%`,
+            } })), this.showAlpha && (h("div", { key: '1aee2cd74b0cdf27d0afcbd09384ae707a5d7485', class: "hb-color-picker__alpha" }, h("div", { key: 'eba46d362053e05c89a93f34dfb453a8ed2253c7', class: "hb-color-picker__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '60f66da4a79a2eb0ce1c389d65fd30362bbb7c61', class: "hb-color-picker__input" }, h("input", { key: '1411561687211e4ea149421bfaf624c7cdc45ead', type: "text", class: "hb-color-picker__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: 'c24d2df8b8d04fee9eeba4d8de660d14857cdf77', class: "hb-color-picker__input-rgb" }, h("input", { key: 'e4dd71d86bda84168f7342b3cf0a7513f608f0e1', type: "number", min: "0", max: "255", value: rgb.r, onInput: (e) => this.handleRgbInputChange(0, e.target.value) }), h("input", { key: '198c25b1f2fe03bae65b2a6120b226684623a5a1', type: "number", min: "0", max: "255", value: rgb.g, onInput: (e) => this.handleRgbInputChange(1, e.target.value) }), h("input", { key: 'fe0c9273a4d283f3f4bde1b8c258e0adc370b9a6', type: "number", min: "0", max: "255", value: rgb.b, onInput: (e) => this.handleRgbInputChange(2, e.target.value) })))), this.predefine && this.predefine.length > 0 && (h("div", { key: '52b711be9fd4794a42fb0c4747a53df529895932', class: "hb-color-picker__predefine" }, predefinedColors.map((color) => (h("div", { class: {
+                'hb-color-picker__predefine-color': true,
+                'hb-color-picker__predefine-color--selected': color === this.currentColor,
+            }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) }))))))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+};
+ColorPicker.style = HbColorPickerStyle0;
+
+export { ColorPicker as hb_color_picker };
+
+//# sourceMappingURL=hb-color-picker.entry.js.map

package/dist/esm/hb-color-picker.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-color-picker.entry.js","mappings":"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","names":[],"sources":["src/components/ColorPicker/color-picker.css?tag=hb-color-picker&encapsulation=shadow","src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n}\n\n.hb-color-picker {\n  display: inline-block;\n}\n\n.hb-color-picker__trigger {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px;\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: border-color 0.2s;\n}\n\n.hb-color-picker__trigger:hover:not(.hb-color-picker--disabled) {\n  border-color: var(--hb-color-primary);\n}\n\n.hb-color-picker__color {\n  width: 40px;\n  height: 20px;\n  border-radius: 2px;\n  border: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n}\n\n.hb-color-picker__text {\n  margin-left: 8px;\n  font-size: 14px;\n  color: var(--hb-color-text-regular, #606266);\n}\n\n.hb-color-picker__dropdown {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n  background-color: var(--hb-color-white, #ffffff);\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  padding: 12px;\n  min-width: 300px;\n}\n\n.hb-color-picker__saturation {\n  position: relative;\n  width: 100%;\n  height: 180px;\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: crosshair;\n  user-select: none;\n}\n\n.hb-color-picker__saturation-bg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  /* 背景色会根据当前色相动态设置 */\n}\n\n.hb-color-picker__saturation-white {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));\n}\n\n.hb-color-picker__saturation-black {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));\n}\n\n.hb-color-picker__saturation-pointer {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border: 2px solid var(--hb-color-white, #ffffff);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n}\n\n.hb-color-picker__controls {\n  margin-top: 12px;\n}\n\n.hb-color-picker__hue,\n.hb-color-picker__alpha {\n  position: relative;\n  height: 12px;\n  border-radius: 2px;\n  margin-bottom: 8px;\n  cursor: pointer;\n}\n\n.hb-color-picker__hue {\n  position: relative;\n}\n\n.hb-color-picker__hue-bar {\n  height: 100%;\n  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n  border-radius: 2px;\n}\n\n.hb-color-picker__hue-pointer {\n  position: absolute;\n  top: 0;\n  width: 4px;\n  height: 100%;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.3);\n  border-radius: 2px;\n  transform: translateX(-50%);\n  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n}\n\n.hb-color-picker__alpha-bar {\n  height: 100%;\n  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);\n  background-size: 8px 8px;\n  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;\n  border-radius: 2px;\n}\n\n.hb-color-picker__input {\n  margin-top: 12px;\n}\n\n.hb-color-picker__input-hex {\n  width: 100%;\n  padding: 6px 8px;\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  font-size: 13px;\n  margin-bottom: 8px;\n}\n\n.hb-color-picker__input-rgb {\n  display: flex;\n  gap: 8px;\n}\n\n.hb-color-picker__input-rgb input {\n  flex: 1;\n  padding: 6px 8px;\n  border: 1px solid var(--hb-border-color, #dcdfe6);\n  border-radius: 4px;\n  font-size: 13px;\n}\n\n.hb-color-picker__predefine {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--hb-border-color-lighter, #e4e7ed);\n}\n\n.hb-color-picker__predefine-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  cursor: pointer;\n  border: 2px solid transparent;\n  transition: transform 0.2s;\n}\n\n.hb-color-picker__predefine-color:hover {\n  transform: scale(1.1);\n}\n\n.hb-color-picker__predefine-color--selected {\n  border-color: var(--hb-color-primary);\n  transform: scale(1.1);\n}\n\n.hb-color-picker--disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.hb-color-picker--disabled .hb-color-picker__trigger {\n  cursor: not-allowed;\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Element, Watch } from '@stencil/core';\n\n/**\n * ColorPicker 颜色选择器组件\n * 用于颜色选择，支持多种格式\n */\n@Component({\n  tag: 'hb-color-picker',\n  styleUrl: 'color-picker.css',\n  shadow: true,\n})\nexport class ColorPicker {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue?: string;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 颜色格式\n   */\n  @Prop() colorFormat: 'hsl' | 'hsv' | 'hex' | 'rgb' = 'hex';\n\n  /**\n   * 是否显示透明度\n   * @default false\n   */\n  @Prop() showAlpha: boolean = false;\n\n  /**\n   * 预定义颜色\n   */\n  @Prop() predefine?: string[];\n\n  @State() isOpen: boolean = false;\n  @State() currentColor: string = '#409EFF';\n  @State() hue: number = 210; // 色相值 0-360\n  @State() saturation: number = 100; // 饱和度 0-100\n  @State() value: number = 100; // 明度 0-100\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 激活时触发\n   */\n  @Event() hbActiveChange: EventEmitter<string>;\n\n  componentDidLoad() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n      this.updateHSVFromColor(this.modelValue);\n    } else {\n      this.updateHSVFromColor(this.currentColor);\n    }\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleDocumentClick = (e: MouseEvent) => {\n    if (!this.isOpen) return;\n    const target = e.target as HTMLElement;\n    if (!this.el.contains(target)) {\n      this.isOpen = false;\n    }\n  };\n\n  @Watch('modelValue')\n  handleValueChange() {\n    if (this.modelValue) {\n      this.currentColor = this.modelValue;\n      this.updateHSVFromColor(this.modelValue);\n    }\n  }\n\n  private handleTriggerClick = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n  };\n\n  private handleColorSelect = (color: string) => {\n    this.currentColor = color;\n    this.modelValue = color;\n    this.hbChange.emit(color);\n    this.hbActiveChange.emit(color);\n  };\n\n  private handleSaturationClick = (e: MouseEvent) => {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    \n    // X 轴代表饱和度 (0-100%)\n    this.saturation = Math.max(0, Math.min(100, (x / rect.width) * 100));\n    // Y 轴代表明度 (0-100%，从上到下)\n    this.value = Math.max(0, Math.min(100, 100 - (y / rect.height) * 100));\n    \n    const hex = this.hsvToHex(this.hue, this.saturation, this.value);\n    this.handleColorSelect(hex);\n  };\n\n  private handleHueClick = (e: MouseEvent) => {\n    const target = e.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    \n    // 色相值 0-360\n    this.hue = Math.max(0, Math.min(360, (x / rect.width) * 360));\n    \n    const hex = this.hsvToHex(this.hue, this.saturation, this.value);\n    this.handleColorSelect(hex);\n  };\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    const value = target.value;\n    // 验证 hex 颜色格式\n    if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {\n      this.handleColorSelect(value);\n    }\n  };\n\n  private handleRgbInputChange = (index: number, value: string) => {\n    const rgb = this.hexToRgb(this.currentColor);\n    if (rgb) {\n      const num = parseInt(value, 10);\n      if (!isNaN(num) && num >= 0 && num <= 255) {\n        if (index === 0) rgb.r = num;\n        else if (index === 1) rgb.g = num;\n        else if (index === 2) rgb.b = num;\n        \n        const hex = `#${[rgb.r, rgb.g, rgb.b].map(x => {\n          const hex = x.toString(16);\n          return hex.length === 1 ? '0' + hex : hex;\n        }).join('')}`;\n        this.handleColorSelect(hex);\n      }\n    }\n  };\n\n  private hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n    const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n    return result ? {\n      r: parseInt(result[1], 16),\n      g: parseInt(result[2], 16),\n      b: parseInt(result[3], 16)\n    } : null;\n  }\n\n  // RGB 转 HSV\n  private rgbToHsv(r: number, g: number, b: number): { h: number; s: number; v: number } {\n    r = r / 255;\n    g = g / 255;\n    b = b / 255;\n\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    const diff = max - min;\n\n    let h = 0;\n    if (diff !== 0) {\n      if (max === r) {\n        h = ((g - b) / diff) % 6;\n      } else if (max === g) {\n        h = (b - r) / diff + 2;\n      } else {\n        h = (r - g) / diff + 4;\n      }\n    }\n    h = Math.round(h * 60);\n    if (h < 0) h += 360;\n\n    const s = max === 0 ? 0 : Math.round((diff / max) * 100);\n    const v = Math.round(max * 100);\n\n    return { h, s, v };\n  }\n\n  // HSV 转 RGB\n  private hsvToRgb(h: number, s: number, v: number): { r: number; g: number; b: number } {\n    s = s / 100;\n    v = v / 100;\n\n    const c = v * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = v - c;\n\n    let r = 0, g = 0, b = 0;\n\n    if (h >= 0 && h < 60) {\n      r = c; g = x; b = 0;\n    } else if (h >= 60 && h < 120) {\n      r = x; g = c; b = 0;\n    } else if (h >= 120 && h < 180) {\n      r = 0; g = c; b = x;\n    } else if (h >= 180 && h < 240) {\n      r = 0; g = x; b = c;\n    } else if (h >= 240 && h < 300) {\n      r = x; g = 0; b = c;\n    } else if (h >= 300 && h < 360) {\n      r = c; g = 0; b = x;\n    }\n\n    return {\n      r: Math.round((r + m) * 255),\n      g: Math.round((g + m) * 255),\n      b: Math.round((b + m) * 255)\n    };\n  }\n\n  // HSV 转 Hex\n  private hsvToHex(h: number, s: number, v: number): string {\n    const rgb = this.hsvToRgb(h, s, v);\n    return `#${[rgb.r, rgb.g, rgb.b].map(x => {\n      const hex = x.toString(16);\n      return hex.length === 1 ? '0' + hex : hex;\n    }).join('')}`;\n  }\n\n  // 从颜色值更新 HSV\n  private updateHSVFromColor(color: string) {\n    const rgb = this.hexToRgb(color);\n    if (rgb) {\n      const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);\n      this.hue = hsv.h;\n      this.saturation = hsv.s;\n      this.value = hsv.v;\n    }\n  }\n\n  render() {\n    const rgb = this.hexToRgb(this.currentColor);\n    const predefinedColors = this.predefine || [\n      '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',\n      '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',\n    ];\n\n    // 根据当前色相生成饱和度面板的背景色\n    const hueColor = this.hsvToHex(this.hue, 100, 100);\n\n    return (\n      <div\n        class={{\n          'hb-color-picker': true,\n          'hb-color-picker--open': this.isOpen,\n          'hb-color-picker--disabled': this.disabled,\n        }}\n      >\n        <div class=\"hb-color-picker__trigger\" onClick={this.handleTriggerClick}>\n          <div class=\"hb-color-picker__color\" style={{ backgroundColor: this.currentColor }}></div>\n          <span class=\"hb-color-picker__text\">{this.currentColor}</span>\n        </div>\n        {this.isOpen && (\n          <div class=\"hb-color-picker__dropdown\">\n            <div class=\"hb-color-picker__panel\">\n              <div class=\"hb-color-picker__saturation\" onClick={this.handleSaturationClick}>\n                <div class=\"hb-color-picker__saturation-bg\" style={{ backgroundColor: hueColor }}></div>\n                <div class=\"hb-color-picker__saturation-white\"></div>\n                <div class=\"hb-color-picker__saturation-black\"></div>\n                <div\n                  class=\"hb-color-picker__saturation-pointer\"\n                  style={{\n                    left: `${this.saturation}%`,\n                    top: `${100 - this.value}%`,\n                  }}\n                ></div>\n              </div>\n              <div class=\"hb-color-picker__controls\">\n                <div class=\"hb-color-picker__hue\" onClick={this.handleHueClick}>\n                  <div class=\"hb-color-picker__hue-bar\"></div>\n                  <div\n                    class=\"hb-color-picker__hue-pointer\"\n                    style={{\n                      left: `${(this.hue / 360) * 100}%`,\n                    }}\n                  ></div>\n                </div>\n                {this.showAlpha && (\n                  <div class=\"hb-color-picker__alpha\">\n                    <div class=\"hb-color-picker__alpha-bar\" style={{ backgroundColor: this.currentColor }}></div>\n                  </div>\n                )}\n              </div>\n              <div class=\"hb-color-picker__input\">\n                <input\n                  type=\"text\"\n                  class=\"hb-color-picker__input-hex\"\n                  value={this.currentColor}\n                  onInput={this.handleInputChange}\n                />\n                {rgb && (\n                  <div class=\"hb-color-picker__input-rgb\">\n                    <input \n                      type=\"number\" \n                      min=\"0\" \n                      max=\"255\" \n                      value={rgb.r}\n                      onInput={(e) => this.handleRgbInputChange(0, (e.target as HTMLInputElement).value)}\n                    />\n                    <input \n                      type=\"number\" \n                      min=\"0\" \n                      max=\"255\" \n                      value={rgb.g}\n                      onInput={(e) => this.handleRgbInputChange(1, (e.target as HTMLInputElement).value)}\n                    />\n                    <input \n                      type=\"number\" \n                      min=\"0\" \n                      max=\"255\" \n                      value={rgb.b}\n                      onInput={(e) => this.handleRgbInputChange(2, (e.target as HTMLInputElement).value)}\n                    />\n                  </div>\n                )}\n              </div>\n              {this.predefine && this.predefine.length > 0 && (\n                <div class=\"hb-color-picker__predefine\">\n                  {predefinedColors.map((color) => (\n                    <div\n                      class={{\n                        'hb-color-picker__predefine-color': true,\n                        'hb-color-picker__predefine-color--selected': color === this.currentColor,\n                      }}\n                      style={{ backgroundColor: color }}\n                      onClick={() => this.handleColorSelect(color)}\n                    ></div>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\n"],"version":3}

package/dist/esm/hb-config-provider.entry.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, g as getElement, h } from './index-fdf7135e.js';
+
+const ConfigProvider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** 主题：light / dark / 自定义 */
+    theme = 'light';
+    /** 全局默认尺寸 */
+    size = 'default';
+    /** 语言 */
+    locale = 'zh-CN';
+    render() {
+        return h("slot", { key: '2f5645093f96615556fea763173dc339b8dfb515' });
+    }
+    componentDidLoad() {
+        this.applyConfig();
+    }
+    componentDidUpdate() {
+        this.applyConfig();
+    }
+    applyConfig() {
+        // 主题：light / dark（自定义主题由消费者通过 CSS 变量设置）
+        if (this.theme === 'dark') {
+            this.el.setAttribute('data-theme', 'dark');
+        }
+        else if (this.theme === 'light') {
+            this.el.removeAttribute('data-theme');
+        }
+        // 全局尺寸：写入 data-size，子组件或全局 CSS 可通过 [data-size] 消费
+        this.el.setAttribute('data-size', this.size);
+        // 语言：写入 data-locale（i18n 文案接入为后续工作，当前先透出配置）
+        this.el.setAttribute('data-locale', this.locale);
+    }
+};
+
+export { ConfigProvider as hb_config_provider };
+
+//# sourceMappingURL=hb-config-provider.entry.js.map

package/dist/esm/hb-config-provider.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-config-provider.entry.js","mappings":";;MAUa,cAAc;;;;;;IAIjB,KAAK,GAA8B,OAAO,CAAC;;IAG3C,IAAI,GAAkC,SAAS,CAAC;;IAGhD,MAAM,GAAW,OAAO,CAAC;IAEjC,MAAM;QACJ,OAAO,8DAAQ,CAAC;KACjB;IAED,gBAAgB;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAEO,WAAW;;QAEjB,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE;YACzB,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;SAC5C;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,EAAE;YACjC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SACvC;;QAGD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;;QAG7C,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAClD;;;;;","names":[],"sources":["src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * ConfigProvider 全局配置组件\n * 在组件树的最外层设置全局配置\n */\n@Component({\n  tag: 'hb-config-provider',\n  shadow: false,\n})\nexport class ConfigProvider {\n  @Element() el: HTMLElement;\n\n  /** 主题：light / dark / 自定义 */\n  @Prop() theme: 'light' | 'dark' | string = 'light';\n\n  /** 全局默认尺寸 */\n  @Prop() size: 'small' | 'default' | 'large' = 'default';\n\n  /** 语言 */\n  @Prop() locale: string = 'zh-CN';\n\n  render() {\n    return <slot />;\n  }\n\n  componentDidLoad() {\n    this.applyConfig();\n  }\n\n  componentDidUpdate() {\n    this.applyConfig();\n  }\n\n  private applyConfig() {\n    // 主题：light / dark（自定义主题由消费者通过 CSS 变量设置）\n    if (this.theme === 'dark') {\n      this.el.setAttribute('data-theme', 'dark');\n    } else if (this.theme === 'light') {\n      this.el.removeAttribute('data-theme');\n    }\n\n    // 全局尺寸：写入 data-size，子组件或全局 CSS 可通过 [data-size] 消费\n    this.el.setAttribute('data-size', this.size);\n\n    // 语言：写入 data-locale（i18n 文案接入为后续工作，当前先透出配置）\n    this.el.setAttribute('data-locale', this.locale);\n  }\n}\n"],"version":3}

package/dist/esm/hb-container.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h } from './index-fdf7135e.js';
+
+const containerCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{--hb-container-padding:20px;display:block}.hb-container{box-sizing:border-box;display:flex;flex-flow:wrap;width:100%}.hb-container--vertical{flex-flow:column}::slotted(hb-aside),::slotted(hb-header){padding:var(--hb-container-padding)}::slotted(hb-main){box-sizing:border-box;flex:1;overflow:auto;padding:var(--hb-container-padding)}::slotted(hb-footer){padding:var(--hb-container-padding)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbContainerStyle0 = containerCss;
+
+const Container = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * 布局方向，vertical 时子元素为纵向排列
+     * @default false
+     */
+    direction = 'horizontal';
+    render() {
+        return (h("section", { key: '8d2029a2363134efb2feb8df16510a5ababe2764', class: {
+                'hb-container': true,
+                'hb-container--vertical': this.direction === 'vertical',
+            } }, h("slot", { key: 'fb2dea608d501e5db4a03657796571fdb30c9128' })));
+    }
+};
+Container.style = HbContainerStyle0;
+
+export { Container as hb_container };
+
+//# sourceMappingURL=hb-container.entry.js.map

package/dist/esm/hb-container.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-container.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,y/LAAy/L,CAAC;AAC/gM,0BAAe,YAAY;;MCUd,SAAS;;;;;;;;IAKZ,SAAS,GAA8B,YAAY,CAAC;IAE5D,MAAM;QACJ,QACE,gEACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,SAAS,KAAK,UAAU;aACxD,IAED,8DAAa,CACL,EACV;KACH;;;;;;","names":[],"sources":["src/components/Container/container.css?tag=hb-container&encapsulation=shadow","src/components/Container/Container.tsx"],"sourcesContent":[":host {\n  display: block;\n  --hb-container-padding: 20px;\n}\n\n.hb-container {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.hb-container--vertical {\n  flex-direction: column;\n  flex-wrap: nowrap;\n}\n\n/* Header */\n::slotted(hb-header) {\n  padding: var(--hb-container-padding);\n}\n\n/* Aside */\n::slotted(hb-aside) {\n  padding: var(--hb-container-padding);\n}\n\n/* Main */\n::slotted(hb-main) {\n  padding: var(--hb-container-padding);\n  flex: 1;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n/* Footer */\n::slotted(hb-footer) {\n  padding: var(--hb-container-padding);\n}\n\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * Container 布局容器组件\n * 用于布局的容器组件，方便快速搭建页面的基本结构\n */\n@Component({\n  tag: 'hb-container',\n  styleUrl: 'container.css',\n  shadow: true,\n})\nexport class Container {\n  /**\n   * 布局方向，vertical 时子元素为纵向排列\n   * @default false\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <section\n        class={{\n          'hb-container': true,\n          'hb-container--vertical': this.direction === 'vertical',\n        }}\n      >\n        <slot></slot>\n      </section>\n    );\n  }\n}\n\n"],"version":3}

package/dist/esm/hb-date-picker-pane.entry.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, c as createEvent, h } from './index-fdf7135e.js';
+import { p as parseDate, a as addMonths, b as addYears, M as MONTH_NAMES, c as getYearRangeStart, g as getCalendarDays, W as WEEK_DAY_NAMES, d as getCalendarYears } from './date-helpers-e4d85a67.js';
+
+const datePickerPaneCss = "/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex;padding-block:0}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}} /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components;:host{display:block}.hb-date-picker-pane{background-color:var(--hb-color-white,#fff);border-radius:4px;padding:12px}.hb-date-picker-pane__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:12px}.hb-date-picker-pane__header-label{background:0 0;border:none;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;font-size:14px;font-weight:600;padding:4px 8px;transition:color .2s,background-color .2s}.hb-date-picker-pane__header-label:hover{background-color:var(--hb-fill-color-light,#f5f7fa);color:var(--hb-color-primary)}.hb-date-picker-pane__next-btn,.hb-date-picker-pane__prev-btn{background:0 0;border:none;color:var(--hb-color-text-regular,#606266);cursor:pointer;font-size:18px;padding:4px 8px;transition:color .2s}.hb-date-picker-pane__next-btn:hover,.hb-date-picker-pane__prev-btn:hover{color:var(--hb-color-primary)}.hb-date-picker-pane__weekdays{display:grid;gap:4px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.hb-date-picker-pane__weekday{color:var(--hb-color-text-placeholder,#c0c4cc);font-size:12px;font-weight:500;text-align:center}.hb-date-picker-pane__days{display:grid;gap:4px;grid-template-columns:repeat(7,1fr)}.hb-date-picker-pane__day{align-items:center;aspect-ratio:1;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;justify-content:center;transition:all .2s}.hb-date-picker-pane__day:hover:not(.hb-date-picker-pane__day--other-month){background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-picker-pane__day--other-month{color:var(--hb-color-text-placeholder,#c0c4cc);cursor:default}.hb-date-picker-pane__day--today{color:var(--hb-color-primary);font-weight:600}.hb-date-picker-pane__day--selected{background-color:var(--hb-color-primary);color:var(--hb-color-white,#fff)}.hb-date-picker-pane__months,.hb-date-picker-pane__years{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);padding:4px 0}.hb-date-picker-pane__month,.hb-date-picker-pane__year{align-items:center;border-radius:4px;color:var(--hb-color-text-regular,#606266);cursor:pointer;display:flex;font-size:13px;justify-content:center;min-height:48px;transition:background-color .2s,color .2s}.hb-date-picker-pane__month:hover,.hb-date-picker-pane__year:hover{background-color:var(--hb-fill-color-light,#f5f7fa)}.hb-date-picker-pane__month--current,.hb-date-picker-pane__year--current{color:var(--hb-color-primary);font-weight:600}.hb-date-picker-pane__month--selected,.hb-date-picker-pane__year--selected{background-color:var(--hb-color-primary);color:var(--hb-color-white,#fff)}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}";
+const HbDatePickerPaneStyle0 = datePickerPaneCss;
+
+const DatePickerPane = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hbChange = createEvent(this, "hbChange", 7);
+        this.hbViewChange = createEvent(this, "hbViewChange", 7);
+    }
+    /** 绑定值 */
+    modelValue;
+    /** 日期格式 */
+    format = 'YYYY-MM-DD';
+    /** 当前视图类型，默认 days */
+    view = 'days';
+    selectedDate;
+    /** 值改变事件 */
+    hbChange;
+    /** 视图切换事件 */
+    hbViewChange;
+    componentDidLoad() {
+        this.updateSelectedDate();
+    }
+    handleValueChange() {
+        this.updateSelectedDate();
+    }
+    updateSelectedDate() {
+        this.selectedDate = parseDate(this.modelValue);
+    }
+    handleDateSelect = (date) => {
+        this.selectedDate = date;
+        this.modelValue = date;
+        this.hbChange.emit(date);
+    };
+    /** 头部导航箭头：days 视图 ±1 月，months 视图 ±1 年，years 视图 ±12 年 */
+    handlePrev = () => {
+        const base = this.selectedDate || new Date();
+        if (this.view === 'days') {
+            this.selectedDate = addMonths(base, -1);
+        }
+        else if (this.view === 'months') {
+            this.selectedDate = addYears(base, -1);
+        }
+        else {
+            this.selectedDate = addYears(base, -12);
+        }
+    };
+    handleNext = () => {
+        const base = this.selectedDate || new Date();
+        if (this.view === 'days') {
+            this.selectedDate = addMonths(base, 1);
+        }
+        else if (this.view === 'months') {
+            this.selectedDate = addYears(base, 1);
+        }
+        else {
+            this.selectedDate = addYears(base, 12);
+        }
+    };
+    /** 点击 header 标题：days→months→years */
+    handleHeaderTitleClick = () => {
+        if (this.view === 'days') {
+            this.view = 'months';
+        }
+        else if (this.view === 'months') {
+            this.view = 'years';
+        }
+        this.hbViewChange.emit(this.view);
+    };
+    /** months 视图：选某月 → 切回 days 并跳到该月 */
+    handleMonthSelect = (monthIndex) => {
+        const base = this.selectedDate || new Date();
+        const next = new Date(base);
+        next.setMonth(monthIndex);
+        this.selectedDate = next;
+        this.view = 'days';
+        this.hbViewChange.emit(this.view);
+    };
+    /** years 视图：选某年 → 切到 months 并跳到该年 */
+    handleYearSelect = (year) => {
+        const base = this.selectedDate || new Date();
+        const next = new Date(base);
+        next.setFullYear(year);
+        this.selectedDate = next;
+        this.view = 'months';
+        this.hbViewChange.emit(this.view);
+    };
+    /** 头部标题文本，根据视图类型生成 */
+    getHeaderTitle() {
+        const current = this.selectedDate || new Date();
+        if (this.view === 'days') {
+            return `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;
+        }
+        if (this.view === 'months') {
+            return `${current.getFullYear()}年`;
+        }
+        // years 视图显示年份档区间，如 2020 - 2031
+        const start = getYearRangeStart(current);
+        return `${start} - ${start + 11}`;
+    }
+    render() {
+        const current = this.selectedDate || new Date();
+        return (h("div", { key: '2259a27d8de2d7944a83a85c2fb2281d22d7f62e', class: "hb-date-picker-pane" }, h("div", { key: '8c27820ac2eeb5a39be44f828879c98a33f89e91', class: "hb-date-picker-pane__header" }, h("button", { key: 'ea7060e14f917bc003303d2dd2d680c3de24d62a', type: "button", class: "hb-date-picker-pane__prev-btn", "aria-label": "\u4E0A\u4E00\u4E2A", onClick: this.handlePrev }, "\u2039"), h("button", { key: '020b053fcfed2384ab62b3c8b408c47864f54a57', type: "button", class: "hb-date-picker-pane__header-label", "aria-live": "polite", onClick: this.handleHeaderTitleClick }, this.getHeaderTitle()), h("button", { key: '055a6e6d191c2c2e29f3d459c27a8007086de7ee', type: "button", class: "hb-date-picker-pane__next-btn", "aria-label": "\u4E0B\u4E00\u4E2A", onClick: this.handleNext }, "\u203A")), this.view === 'days' && this.renderDaysView(), this.view === 'months' && this.renderMonthsView(current), this.view === 'years' && this.renderYearsView(current)));
+    }
+    renderDaysView() {
+        const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
+        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__weekdays" }, WEEK_DAY_NAMES.map(day => (h("div", { class: "hb-date-picker-pane__weekday" }, day)))), h("div", { class: "hb-date-picker-pane__days" }, days.map((day, index) => (h("div", { key: index, class: {
+                'hb-date-picker-pane__day': true,
+                'hb-date-picker-pane__day--other-month': !day.isCurrentMonth,
+                'hb-date-picker-pane__day--today': day.isToday,
+                'hb-date-picker-pane__day--selected': day.isSelected,
+            }, onClick: () => day.isCurrentMonth && this.handleDateSelect(day.date) }, day.date.getDate()))))));
+    }
+    renderMonthsView(current) {
+        // modelValue（选中值）所在的年/月
+        const modelDate = parseDate(this.modelValue);
+        const selectedMonth = modelDate ? modelDate.getMonth() : -1;
+        const selectedYear = modelDate ? modelDate.getFullYear() : -1;
+        // current 是当前面板的浏览焦点日期（selectedDate 或今天）
+        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__months" }, MONTH_NAMES.map((name, monthIndex) => (h("div", { key: monthIndex, class: {
+                'hb-date-picker-pane__month': true,
+                'hb-date-picker-pane__month--current': monthIndex === current.getMonth(),
+                'hb-date-picker-pane__month--selected': monthIndex === selectedMonth && current.getFullYear() === selectedYear,
+            }, onClick: () => this.handleMonthSelect(monthIndex) }, name))))));
+    }
+    renderYearsView(current) {
+        const modelDate = parseDate(this.modelValue);
+        const years = getCalendarYears(this.selectedDate || new Date(), modelDate);
+        return (h("div", { class: "hb-date-picker-pane__body" }, h("div", { class: "hb-date-picker-pane__years" }, years.map(item => (h("div", { key: item.year, class: {
+                'hb-date-picker-pane__year': true,
+                'hb-date-picker-pane__year--current': item.year === current.getFullYear(),
+                'hb-date-picker-pane__year--selected': item.isSelected,
+            }, onClick: () => this.handleYearSelect(item.year) }, item.year))))));
+    }
+    static get watchers() { return {
+        "modelValue": ["handleValueChange"]
+    }; }
+};
+DatePickerPane.style = HbDatePickerPaneStyle0;
+
+export { DatePickerPane as hb_date_picker_pane };
+
+//# sourceMappingURL=hb-date-picker-pane.entry.js.map

package/dist/esm/hb-date-picker-pane.entry.js.map

@@ -0,0 +1 @@
+{"file":"hb-date-picker-pane.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,8oQAA8oQ,CAAC;AACzqQ,+BAAe,iBAAiB;;MCwBnB,cAAc;;;;;;;IAEA,UAAU,CAAiB;;IAG5C,MAAM,GAAW,YAAY,CAAC;;IAGb,IAAI,GAAuB,MAAM,CAAC;IAElD,YAAY,CAAQ;;IAGpB,QAAQ,CAA8B;;IAGtC,YAAY,CAAmC;IAExD,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAGD,iBAAiB;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAEO,kBAAkB;QACxB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAChD;IAEO,gBAAgB,GAAG,CAAC,IAAU;QACpC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1B,CAAC;;IAGM,UAAU,GAAG;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;SACzC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;SACxC;aAAM;YACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;SACzC;KACF,CAAC;IAEM,UAAU,GAAG;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7C,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YACxB,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACxC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;SACxC;KACF,CAAC;;IAGM,sBAAsB,GAAG;QAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YACxB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;SACtB;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;SACrB;QACD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACnC,CAAC;;IAGM,iBAAiB,GAAG,CAAC,UAAkB;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;QAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACnC,CAAC;;IAGM,gBAAgB,GAAG,CAAC,IAAY;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAC7C,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACnC,CAAC;;IAGM,cAAc;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAChD,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;YACxB,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;SACvE;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,OAAO,GAAG,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC;SACpC;;QAED,MAAM,KAAK,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,GAAG,KAAK,MAAM,KAAK,GAAG,EAAE,EAAE,CAAC;KACnC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,CAAC;QAEhD,QACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,4DAAK,KAAK,EAAC,6BAA6B,IACtC,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,gBAAY,oBAAK,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,aAE5F,EACT,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mCAAmC,eAC/B,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,sBAAsB,IAEnC,IAAI,CAAC,cAAc,EAAE,CACf,EACT,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,gBAAY,oBAAK,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,aAE5F,CACL,EAEL,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,EAC7C,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EACxD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CACnD,EACN;KACH;IAEO,cAAc;QACpB,MAAM,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACjF,QACE,WAAK,KAAK,EAAC,2BAA2B,IACpC,WAAK,KAAK,EAAC,+BAA+B,IACvC,cAAc,CAAC,GAAG,CAAC,GAAG,KACrB,WAAK,KAAK,EAAC,8BAA8B,IAAE,GAAG,CAAO,CACtD,CAAC,CACE,EACN,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,MACnB,WACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAE;gBACL,0BAA0B,EAAE,IAAI;gBAChC,uCAAuC,EAAE,CAAC,GAAG,CAAC,cAAc;gBAC5D,iCAAiC,EAAE,GAAG,CAAC,OAAO;gBAC9C,oCAAoC,EAAE,GAAG,CAAC,UAAU;aACrD,EACD,OAAO,EAAE,MAAM,GAAG,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,IAEnE,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CACf,CACP,CAAC,CACE,CACF,EACN;KACH;IAEO,gBAAgB,CAAC,OAAa;;QAEpC,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7C,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;QAC5D,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC;;QAE9D,QACE,WAAK,KAAK,EAAC,2BAA2B,IACpC,WAAK,KAAK,EAAC,6BAA6B,IACrC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU,MAChC,WACE,GAAG,EAAE,UAAU,EACf,KAAK,EAAE;gBACL,4BAA4B,EAAE,IAAI;gBAClC,qCAAqC,EAAE,UAAU,KAAK,OAAO,CAAC,QAAQ,EAAE;gBACxE,sCAAsC,EACpC,UAAU,KAAK,aAAa,IAAI,OAAO,CAAC,WAAW,EAAE,KAAK,YAAY;aACzE,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC,IAEhD,IAAI,CACD,CACP,CAAC,CACE,CACF,EACN;KACH;IAEO,eAAe,CAAC,OAAa;QACnC,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC;QAC3E,QACE,WAAK,KAAK,EAAC,2BAA2B,IACpC,WAAK,KAAK,EAAC,4BAA4B,IACpC,KAAK,CAAC,GAAG,CAAC,IAAI,KACb,WACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;gBACjC,oCAAoC,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,WAAW,EAAE;gBACzE,qCAAqC,EAAE,IAAI,CAAC,UAAU;aACvD,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAE9C,IAAI,CAAC,IAAI,CACN,CACP,CAAC,CACE,CACF,EACN;KACH;;;;;;;;;","names":[],"sources":["src/components/DatePickerPane/date-picker-pane.css?tag=hb-date-picker-pane&encapsulation=shadow","src/components/DatePickerPane/DatePickerPane.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.hb-date-picker-pane {\n  padding: 12px;\n  background-color: var(--hb-color-white, #ffffff);\n  border-radius: 4px;\n}\n\n.hb-date-picker-pane__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n\n.hb-date-picker-pane__header-label {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--hb-color-text-regular, #606266);\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: color 0.2s, background-color 0.2s;\n}\n\n.hb-date-picker-pane__header-label:hover {\n  color: var(--hb-color-primary);\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker-pane__prev-btn,\n.hb-date-picker-pane__next-btn {\n  background: none;\n  border: none;\n  font-size: 18px;\n  cursor: pointer;\n  color: var(--hb-color-text-regular, #606266);\n  padding: 4px 8px;\n  transition: color 0.2s;\n}\n\n.hb-date-picker-pane__prev-btn:hover,\n.hb-date-picker-pane__next-btn:hover {\n  color: var(--hb-color-primary);\n}\n\n.hb-date-picker-pane__weekdays {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n  margin-bottom: 8px;\n}\n\n.hb-date-picker-pane__weekday {\n  text-align: center;\n  font-size: 12px;\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  font-weight: 500;\n}\n\n.hb-date-picker-pane__days {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 4px;\n}\n\n.hb-date-picker-pane__day {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 13px;\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.hb-date-picker-pane__day:hover:not(.hb-date-picker-pane__day--other-month) {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker-pane__day--other-month {\n  color: var(--hb-color-text-placeholder, #c0c4cc);\n  cursor: default;\n}\n\n.hb-date-picker-pane__day--today {\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n.hb-date-picker-pane__day--selected {\n  background-color: var(--hb-color-primary);\n  color: var(--hb-color-white, #ffffff);\n}\n\n/* months / years 视图共享格子样式 */\n.hb-date-picker-pane__months,\n.hb-date-picker-pane__years {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n  padding: 4px 0;\n}\n\n.hb-date-picker-pane__month,\n.hb-date-picker-pane__year {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 48px;\n  font-size: 13px;\n  color: var(--hb-color-text-regular, #606266);\n  cursor: pointer;\n  border-radius: 4px;\n  transition: background-color 0.2s, color 0.2s;\n}\n\n.hb-date-picker-pane__month:hover,\n.hb-date-picker-pane__year:hover {\n  background-color: var(--hb-fill-color-light, #f5f7fa);\n}\n\n.hb-date-picker-pane__month--current,\n.hb-date-picker-pane__year--current {\n  color: var(--hb-color-primary);\n  font-weight: 600;\n}\n\n.hb-date-picker-pane__month--selected,\n.hb-date-picker-pane__year--selected {\n  background-color: var(--hb-color-primary);\n  color: var(--hb-color-white, #ffffff);\n}\n\n","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\nimport {\n  getCalendarDays,\n  getCalendarYears,\n  getYearRangeStart,\n  parseDate,\n  addMonths,\n  addYears,\n  MONTH_NAMES,\n  WEEK_DAY_NAMES,\n} from '../../utils/date-helpers';\n\n/** DatePickerPane 视图类型 */\nexport type DatePickerPaneView = 'days' | 'months' | 'years';\n\n/**\n * DatePickerPane 日期选择器面板组件\n * 日期选择器面板，用于嵌入到其他组件中\n * 支持 days / months / years 三种视图切换\n */\n@Component({\n  tag: 'hb-date-picker-pane',\n  styleUrl: 'date-picker-pane.css',\n  shadow: true,\n})\nexport class DatePickerPane {\n  /** 绑定值 */\n  @Prop({ mutable: true }) modelValue?: string | Date;\n\n  /** 日期格式 */\n  @Prop() format: string = 'YYYY-MM-DD';\n\n  /** 当前视图类型，默认 days */\n  @Prop({ mutable: true }) view: DatePickerPaneView = 'days';\n\n  @State() selectedDate?: Date;\n\n  /** 值改变事件 */\n  @Event() hbChange: EventEmitter<string | Date>;\n\n  /** 视图切换事件 */\n  @Event() hbViewChange: EventEmitter<DatePickerPaneView>;\n\n  componentDidLoad() {\n    this.updateSelectedDate();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateSelectedDate();\n  }\n\n  private updateSelectedDate() {\n    this.selectedDate = parseDate(this.modelValue);\n  }\n\n  private handleDateSelect = (date: Date) => {\n    this.selectedDate = date;\n    this.modelValue = date;\n    this.hbChange.emit(date);\n  };\n\n  /** 头部导航箭头：days 视图 ±1 月，months 视图 ±1 年，years 视图 ±12 年 */\n  private handlePrev = () => {\n    const base = this.selectedDate || new Date();\n    if (this.view === 'days') {\n      this.selectedDate = addMonths(base, -1);\n    } else if (this.view === 'months') {\n      this.selectedDate = addYears(base, -1);\n    } else {\n      this.selectedDate = addYears(base, -12);\n    }\n  };\n\n  private handleNext = () => {\n    const base = this.selectedDate || new Date();\n    if (this.view === 'days') {\n      this.selectedDate = addMonths(base, 1);\n    } else if (this.view === 'months') {\n      this.selectedDate = addYears(base, 1);\n    } else {\n      this.selectedDate = addYears(base, 12);\n    }\n  };\n\n  /** 点击 header 标题：days→months→years */\n  private handleHeaderTitleClick = () => {\n    if (this.view === 'days') {\n      this.view = 'months';\n    } else if (this.view === 'months') {\n      this.view = 'years';\n    }\n    this.hbViewChange.emit(this.view);\n  };\n\n  /** months 视图：选某月 → 切回 days 并跳到该月 */\n  private handleMonthSelect = (monthIndex: number) => {\n    const base = this.selectedDate || new Date();\n    const next = new Date(base);\n    next.setMonth(monthIndex);\n    this.selectedDate = next;\n    this.view = 'days';\n    this.hbViewChange.emit(this.view);\n  };\n\n  /** years 视图：选某年 → 切到 months 并跳到该年 */\n  private handleYearSelect = (year: number) => {\n    const base = this.selectedDate || new Date();\n    const next = new Date(base);\n    next.setFullYear(year);\n    this.selectedDate = next;\n    this.view = 'months';\n    this.hbViewChange.emit(this.view);\n  };\n\n  /** 头部标题文本，根据视图类型生成 */\n  private getHeaderTitle(): string {\n    const current = this.selectedDate || new Date();\n    if (this.view === 'days') {\n      return `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;\n    }\n    if (this.view === 'months') {\n      return `${current.getFullYear()}年`;\n    }\n    // years 视图显示年份档区间，如 2020 - 2031\n    const start = getYearRangeStart(current);\n    return `${start} - ${start + 11}`;\n  }\n\n  render() {\n    const current = this.selectedDate || new Date();\n\n    return (\n      <div class=\"hb-date-picker-pane\">\n        <div class=\"hb-date-picker-pane__header\">\n          <button type=\"button\" class=\"hb-date-picker-pane__prev-btn\" aria-label=\"上一个\" onClick={this.handlePrev}>\n            ‹\n          </button>\n          <button\n            type=\"button\"\n            class=\"hb-date-picker-pane__header-label\"\n            aria-live=\"polite\"\n            onClick={this.handleHeaderTitleClick}\n          >\n            {this.getHeaderTitle()}\n          </button>\n          <button type=\"button\" class=\"hb-date-picker-pane__next-btn\" aria-label=\"下一个\" onClick={this.handleNext}>\n            ›\n          </button>\n        </div>\n\n        {this.view === 'days' && this.renderDaysView()}\n        {this.view === 'months' && this.renderMonthsView(current)}\n        {this.view === 'years' && this.renderYearsView(current)}\n      </div>\n    );\n  }\n\n  private renderDaysView() {\n    const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);\n    return (\n      <div class=\"hb-date-picker-pane__body\">\n        <div class=\"hb-date-picker-pane__weekdays\">\n          {WEEK_DAY_NAMES.map(day => (\n            <div class=\"hb-date-picker-pane__weekday\">{day}</div>\n          ))}\n        </div>\n        <div class=\"hb-date-picker-pane__days\">\n          {days.map((day, index) => (\n            <div\n              key={index}\n              class={{\n                'hb-date-picker-pane__day': true,\n                'hb-date-picker-pane__day--other-month': !day.isCurrentMonth,\n                'hb-date-picker-pane__day--today': day.isToday,\n                'hb-date-picker-pane__day--selected': day.isSelected,\n              }}\n              onClick={() => day.isCurrentMonth && this.handleDateSelect(day.date)}\n            >\n              {day.date.getDate()}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  private renderMonthsView(current: Date) {\n    // modelValue（选中值）所在的年/月\n    const modelDate = parseDate(this.modelValue);\n    const selectedMonth = modelDate ? modelDate.getMonth() : -1;\n    const selectedYear = modelDate ? modelDate.getFullYear() : -1;\n    // current 是当前面板的浏览焦点日期（selectedDate 或今天）\n    return (\n      <div class=\"hb-date-picker-pane__body\">\n        <div class=\"hb-date-picker-pane__months\">\n          {MONTH_NAMES.map((name, monthIndex) => (\n            <div\n              key={monthIndex}\n              class={{\n                'hb-date-picker-pane__month': true,\n                'hb-date-picker-pane__month--current': monthIndex === current.getMonth(),\n                'hb-date-picker-pane__month--selected':\n                  monthIndex === selectedMonth && current.getFullYear() === selectedYear,\n              }}\n              onClick={() => this.handleMonthSelect(monthIndex)}\n            >\n              {name}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  private renderYearsView(current: Date) {\n    const modelDate = parseDate(this.modelValue);\n    const years = getCalendarYears(this.selectedDate || new Date(), modelDate);\n    return (\n      <div class=\"hb-date-picker-pane__body\">\n        <div class=\"hb-date-picker-pane__years\">\n          {years.map(item => (\n            <div\n              key={item.year}\n              class={{\n                'hb-date-picker-pane__year': true,\n                'hb-date-picker-pane__year--current': item.year === current.getFullYear(),\n                'hb-date-picker-pane__year--selected': item.isSelected,\n              }}\n              onClick={() => this.handleYearSelect(item.year)}\n            >\n              {item.year}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}