npm - huibo-ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

huibo-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (668) hide show

package/dist/collection/components/ColorPicker/ColorPicker.js CHANGED Viewed

@@ -32,6 +32,7 @@ export class ColorPicker {
     hue = 210; // 色相值 0-360
     saturation = 100; // 饱和度 0-100
     value = 100; // 明度 0-100
+    alpha = 100; // 透明度 0-100（仅 showAlpha=true 时生效）
     /**
      * 值改变事件
      */
@@ -72,11 +73,36 @@ export class ColorPicker {
             return;
         this.isOpen = !this.isOpen;
     };
+    /** 键盘交互：Escape 关闭面板（对齐 antd / WAI-ARIA） */
+    handleKeyDown = (e) => {
+        if (this.disabled)
+            return;
+        if (e.key === 'Escape' && this.isOpen) {
+            e.preventDefault();
+            this.isOpen = false;
+        }
+    };
+    /** 把 3 位简写 hex 规范化为 6 位，避免后续 hexToRgb 解析失败 */
+    normalizeHex(color) {
+        if (typeof color !== 'string')
+            return null;
+        const c = color.trim();
+        if (/^#([A-Fa-f0-9]{6})$/.test(c))
+            return c.toLowerCase();
+        if (/^#([A-Fa-f0-9]{3})$/.test(c)) {
+            const [, r, g, b] = c.match(/^#(.)(.)(.)$/);
+            return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
+        }
+        return null;
+    }
     handleColorSelect = (color) => {
-        this.currentColor = color;
-        this.modelValue = color;
-        this.hbChange.emit(color);
-        this.hbActiveChange.emit(color);
+        const normalized = this.normalizeHex(color);
+        if (!normalized)
+            return; // 非法颜色直接忽略，防止 currentColor 进入不可解析态
+        this.currentColor = normalized;
+        this.modelValue = normalized;
+        this.hbChange.emit(normalized);
+        this.hbActiveChange.emit(normalized);
     };
     handleSaturationClick = (e) => {
         const target = e.currentTarget;
@@ -102,11 +128,20 @@ export class ColorPicker {
     handleInputChange = (e) => {
         const target = e.target;
         const value = target.value;
-        // 验证 hex 颜色格式
+        // 验证 hex 颜色格式（3 位简写会被 handleColorSelect 内部规范化为 6 位）
         if (/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value)) {
             this.handleColorSelect(value);
         }
     };
+    /** 透明度条点击/拖动：X 轴映射到 alpha 0-100 */
+    handleAlphaClick = (e) => {
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        this.alpha = Math.max(0, Math.min(100, Math.round((x / rect.width) * 100)));
+        // alpha 变化触发 active 事件（不改变 hex，但通知消费者透明度变化）
+        this.hbActiveChange.emit(this.getFormattedValue());
+    };
     handleRgbInputChange = (index, value) => {
         const rgb = this.hexToRgb(this.currentColor);
         if (rgb) {
@@ -127,7 +162,11 @@ export class ColorPicker {
         }
     };
     hexToRgb(hex) {
-        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        // 先用 normalizeHex 兜底 3 位简写（#abc → #aabbcc），再解析
+        const normalized = this.normalizeHex(hex);
+        if (!normalized)
+            return null;
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(normalized);
         return result ? {
             r: parseInt(result[1], 16),
             g: parseInt(result[2], 16),
@@ -223,6 +262,36 @@ export class ColorPicker {
             this.value = hsv.v;
         }
     }
+    /** 按当前 colorFormat 输出最终颜色字符串（对齐 antd 的 format 行为） */
+    getFormattedValue() {
+        const rgb = this.hexToRgb(this.currentColor);
+        if (!rgb)
+            return this.currentColor;
+        switch (this.colorFormat) {
+            case 'rgb':
+                return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+            case 'hsl': {
+                const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);
+                const [h, s, l] = this.hsvToHsl(hsv.h, hsv.s, hsv.v);
+                return `hsl(${h}, ${s}%, ${l}%)`;
+            }
+            case 'hsv': {
+                const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);
+                return `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;
+            }
+            case 'hex':
+            default:
+                return this.currentColor;
+        }
+    }
+    /** HSV → HSL（HSL 字符串输出用） */
+    hsvToHsl(h, s, v) {
+        s /= 100;
+        v /= 100;
+        const l = v - (v * s) / 2;
+        const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+        return [Math.round(h), Math.round(sl * 100), Math.round(l * 100)];
+    }
     render() {
         const rgb = this.hexToRgb(this.currentColor);
         const predefinedColors = this.predefine || [
@@ -231,19 +300,27 @@ export class ColorPicker {
         ];
         // 根据当前色相生成饱和度面板的背景色
         const hueColor = this.hsvToHex(this.hue, 100, 100);
-        return (h("div", { key: '3a91756cec6b901dbd98049c6dea3f13cb0125b9', class: {
+        return (h("div", { key: '52393318617ee172eb5ea6cfbe2a4924a3b6b63e', 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: {
+            }, onKeyDown: this.handleKeyDown }, h("div", { key: '58a32dc101b842064bade3fbd44b594bbbec05b5', class: "hb-color-picker__trigger", onClick: this.handleTriggerClick, role: "button", tabindex: this.disabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', onKeyDown: e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleTriggerClick();
+                }
+            } }, h("div", { key: '5f183c7aa2a29818e13a569f172560a2ee7d475e', class: "hb-color-picker__color", style: { backgroundColor: this.currentColor } }), h("span", { key: 'eb1f178aff0cc1c6eb247322e9162dea60178b60', class: "hb-color-picker__text" }, this.currentColor)), this.isOpen && (h("div", { key: 'cca8bb671e305e262edebf7095128f91dcc78ee0', class: "hb-color-picker__dropdown", role: "dialog" }, h("div", { key: 'ecbbe0b9c3791a2638b0540f49f6cad628a15f64', class: "hb-color-picker__panel" }, h("div", { key: '514850ca7676e52c1fc7385c8cc352e4ad5d0362', class: "hb-color-picker__saturation", onClick: this.handleSaturationClick }, h("div", { key: 'b5e98c45b8a8a750f12e8bea6406a107e235a3be', class: "hb-color-picker__saturation-bg", style: { backgroundColor: hueColor } }), h("div", { key: 'fd7f705ad5e58713adb3dae2892abf830f57051d', class: "hb-color-picker__saturation-white" }), h("div", { key: 'e513305bb22b0753eb0c82829f843d68a19ee4fa', class: "hb-color-picker__saturation-black" }), h("div", { key: '3f44dc010cacd7cac78a88ace1cd86aa253b26f2', 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: {
+            } })), h("div", { key: '3b91d0d162027b58adb790d5f5ca0243fa3cb07c', class: "hb-color-picker__controls" }, h("div", { key: '1c1fe521f3820e86ed71c331e6da7213db907038', class: "hb-color-picker__hue", onClick: this.handleHueClick }, h("div", { key: 'a2caa8290277ad46c59efd087c255c3a55fe3ca6', class: "hb-color-picker__hue-bar" }), h("div", { key: '36f9bdd607dcc6181a554442e47a5f5574d71649', 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) }))))))))));
+            } })), this.showAlpha && (h("div", { key: 'ced86625cf6f3e461752a61022bbb36015fa3b3a', class: "hb-color-picker__alpha", onClick: this.handleAlphaClick }, h("div", { key: '2de6b6937338ccbdf07a89267ca274e1f04a5b0e', class: "hb-color-picker__alpha-bar", style: { backgroundColor: this.currentColor } }), h("div", { key: '4363ebb73a38c7b657ef80144e33220b0063b438', class: "hb-color-picker__alpha-pointer", style: { left: `${this.alpha}%` } })))), h("div", { key: 'd90829aaf4099621bcb438755ca44718f23652cd', class: "hb-color-picker__input" }, h("input", { key: '7209889a410ac83c73b52a4af3809e621ad4dfef', type: "text", class: "hb-color-picker__input-hex", value: this.currentColor, onInput: this.handleInputChange, "aria-label": "HEX \u989C\u8272\u503C" }), rgb && (h("div", { key: '83b2df101257f8ada13a9006dd9d7140db4123bc', class: "hb-color-picker__input-rgb" }, h("input", { key: '7858c1e35bcbe9e0356c3cab386b2e061a47c9ea', type: "number", min: "0", max: "255", value: rgb.r, onInput: (e) => this.handleRgbInputChange(0, e.target.value), "aria-label": "\u7EA2\u8272\u901A\u9053" }), h("input", { key: 'b03784fb1668bfdd78693b58fe912a121810b855', type: "number", min: "0", max: "255", value: rgb.g, onInput: (e) => this.handleRgbInputChange(1, e.target.value), "aria-label": "\u7EFF\u8272\u901A\u9053" }), h("input", { key: 'd40ae6d0ae271cadbd1e9ddca9e98b071357fc78', type: "number", min: "0", max: "255", value: rgb.b, onInput: (e) => this.handleRgbInputChange(2, e.target.value), "aria-label": "\u84DD\u8272\u901A\u9053" })))), this.predefine && this.predefine.length > 0 && (h("div", { key: '5c858086b250b0db9bea5add8685d3a39e073550', class: "hb-color-picker__predefine" }, predefinedColors.map((color) => {
+            const normalized = this.normalizeHex(color) || color;
+            return (h("div", { class: {
+                    'hb-color-picker__predefine-color': true,
+                    'hb-color-picker__predefine-color--selected': normalized === this.currentColor,
+                }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color), title: color }));
+        }))))))));
     }
     static get is() { return "hb-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -369,7 +446,8 @@ export class ColorPicker {
             "currentColor": {},
             "hue": {},
             "saturation": {},
-            "value": {}
+            "value": {},
+            "alpha": {}
         };
     }
     static get events() {

package/dist/collection/components/ColorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE/F;;;GAGG;AAMH,MAAM,OAAO,WAAW;IACX,EAAE,CAAc;IAE3B;;OAEG;IACsB,UAAU,CAAU;IAE7C;;;OAGG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,WAAW,GAAkC,KAAK,CAAC;IAE3D;;;OAGG;IACK,SAAS,GAAY,KAAK,CAAC;IAEnC;;OAEG;IACK,SAAS,CAAY;IAEpB,MAAM,GAAY,KAAK,CAAC;IACxB,YAAY,GAAW,SAAS,CAAC;IACjC,GAAG,GAAW,GAAG,CAAC,CAAC,YAAY;IAC/B,UAAU,GAAW,GAAG,CAAC,CAAC,YAAY;IACtC,KAAK,GAAW,GAAG,CAAC,CAAC,WAAW;IAChC,KAAK,GAAW,GAAG,CAAC,CAAC,kCAAkC;IAEhE;;OAEG;IACM,QAAQ,CAAuB;IAExC;;OAEG;IACM,cAAc,CAAuB;IAE9C,gBAAgB;QACd,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;YACpC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,CAAC;QACD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/D,CAAC;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAClE,CAAC;IAEO,mBAAmB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC9C,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAGF,iBAAiB;QACf,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC;YACpC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAEO,kBAAkB,GAAG,GAAG,EAAE;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC;IAEF,2CAA2C;IACnC,aAAa,GAAG,CAAC,CAAgB,EAAE,EAAE;QAC3C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,8CAA8C;IACtC,YAAY,CAAC,KAAa;QAChC,IAAI,OAAO,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC;QAC3C,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC;QAC1D,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,CAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;QACnD,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,iBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC5C,IAAI,CAAC,UAAU;YAAE,OAAO,CAAC,mCAAmC;QAC5D,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;QAC/B,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC,CAAC;IAEM,qBAAqB,GAAG,CAAC,CAAa,EAAE,EAAE;QAChD,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;QAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QAChC,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;QAE/B,oBAAoB;QACpB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACrE,wBAAwB;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAEvE,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACjE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEM,cAAc,GAAG,CAAC,CAAa,EAAE,EAAE;QACzC,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;QAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QAEhC,YAAY;QACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAE9D,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACjE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEM,iBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,oDAAoD;QACpD,IAAI,oCAAoC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,mCAAmC;IAC3B,gBAAgB,GAAG,CAAC,CAAa,EAAE,EAAE;QAC3C,MAAM,MAAM,GAAG,CAAC,CAAC,aAA4B,CAAC;QAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;QAC5E,4CAA4C;QAC5C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACrD,CAAC,CAAC;IAEM,oBAAoB,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE;QAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,EAAE,CAAC;gBAC1C,IAAI,KAAK,KAAK,CAAC;oBAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;qBACxB,IAAI,KAAK,KAAK,CAAC;oBAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;qBAC7B,IAAI,KAAK,KAAK,CAAC;oBAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;gBAElC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;oBAC5C,MAAM,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oBAC3B,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;gBAC5C,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACd,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IAEM,QAAQ,CAAC,GAAW;QAC1B,+CAA+C;QAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAC7B,MAAM,MAAM,GAAG,2CAA2C,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5E,OAAO,MAAM,CAAC,CAAC,CAAC;YACd,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;YAC1B,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;SAC3B,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC;IAED,YAAY;IACJ,QAAQ,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS;QAC9C,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACZ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACZ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QAEZ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QAC9B,MAAM,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;QAEvB,IAAI,CAAC,GAAG,CAAC,CAAC;QACV,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC;YACf,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC;gBACd,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC;iBAAM,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC;gBACrB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;QACD,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;QACvB,IAAI,CAAC,GAAG,CAAC;YAAE,CAAC,IAAI,GAAG,CAAC;QAEpB,MAAM,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;QACzD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;QAEhC,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IACrB,CAAC;IAED,YAAY;IACJ,QAAQ,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS;QAC9C,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QACZ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;QAEZ,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAChB,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACjD,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAEhB,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;QAExB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;YACrB,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YAC9B,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YAC/B,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YAC/B,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YAC/B,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YAC/B,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;YAAC,CAAC,GAAG,CAAC,CAAC;QACtB,CAAC;QAED,OAAO;YACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;YAC5B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;YAC5B,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;SAC7B,CAAC;IACJ,CAAC;IAED,YAAY;IACJ,QAAQ,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACnC,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;YACvC,MAAM,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAC3B,OAAO,GAAG,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC5C,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;IAChB,CAAC;IAED,aAAa;IACL,kBAAkB,CAAC,KAAa;QACtC,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;YAC/C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;YACjB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAED,qDAAqD;IAC7C,iBAAiB;QACvB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,GAAG;YAAE,OAAO,IAAI,CAAC,YAAY,CAAC;QACnC,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;YACzB,KAAK,KAAK;gBACR,OAAO,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;YAC7C,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC/C,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;gBACrD,OAAO,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC;YACnC,CAAC;YACD,KAAK,KAAK,CAAC,CAAC,CAAC;gBACX,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC/C,OAAO,OAAO,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC;YAC/C,CAAC;YACD,KAAK,KAAK,CAAC;YACX;gBACE,OAAO,IAAI,CAAC,YAAY,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,4BAA4B;IACpB,QAAQ,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS;QAC9C,CAAC,IAAI,GAAG,CAAC;QACT,CAAC,IAAI,GAAG,CAAC;QACT,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;QAC1B,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QACjE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IACpE,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI;YACzC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;YACrD,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;SACtD,CAAC;QAEF,oBAAoB;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAEnD,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,uBAAuB,EAAE,IAAI,CAAC,MAAM;gBACpC,2BAA2B,EAAE,IAAI,CAAC,QAAQ;aAC3C,EACD,SAAS,EAAE,IAAI,CAAC,aAAa;YAE7B,4DACE,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAClB,QAAQ,mBACP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,SAAS,EAAE,CAAC,CAAC,EAAE;oBACb,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;wBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC5B,CAAC;gBACH,CAAC;gBAED,4DAAK,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ;gBACzF,6DAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,YAAY,CAAQ,CAC1D;YACL,IAAI,CAAC,MAAM,IAAI,CACd,4DAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,QAAQ;gBAClD,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,4DAAK,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,qBAAqB;wBAC1E,4DAAK,KAAK,EAAC,gCAAgC,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAQ;wBACxF,4DAAK,KAAK,EAAC,mCAAmC,GAAO;wBACrD,4DAAK,KAAK,EAAC,mCAAmC,GAAO;wBACrD,4DACE,KAAK,EAAC,qCAAqC,EAC3C,KAAK,EAAE;gCACL,IAAI,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;gCAC3B,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG;6BAC5B,GACI,CACH;oBACN,4DAAK,KAAK,EAAC,2BAA2B;wBACpC,4DAAK,KAAK,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;4BAC5D,4DAAK,KAAK,EAAC,0BAA0B,GAAO;4BAC5C,4DACE,KAAK,EAAC,8BAA8B,EACpC,KAAK,EAAE;oCACL,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;iCACnC,GACI,CACH;wBACL,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB;4BAChE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,YAAY,EAAE,GAAQ;4BAC7F,4DACE,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GAC5B,CACH,CACP,CACG;oBACN,4DAAK,KAAK,EAAC,wBAAwB;wBACjC,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,IAAI,CAAC,iBAAiB,gBACpB,wBAAS,GACpB;wBACD,GAAG,IAAI,CACN,4DAAK,KAAK,EAAC,4BAA4B;4BACrC,8DACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,GAAG,CAAC,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,gBACvE,0BAAM,GACjB;4BACF,8DACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,GAAG,CAAC,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,gBACvE,0BAAM,GACjB;4BACF,8DACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,GAAG,CAAC,CAAC,EACZ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,gBACvE,0BAAM,GACjB,CACE,CACP,CACG;oBACL,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9C,4DAAK,KAAK,EAAC,4BAA4B,IACpC,gBAAgB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;wBAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;wBACrD,OAAO,CACL,WACE,KAAK,EAAE;gCACL,kCAAkC,EAAE,IAAI;gCACxC,4CAA4C,EAAE,UAAU,KAAK,IAAI,CAAC,YAAY;6BAC/E,EACD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5C,KAAK,EAAE,KAAK,GACP,CACR,CAAC;oBACJ,CAAC,CAAC,CACE,CACP,CACG,CACF,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 @State() alpha: number = 100; // 透明度 0-100（仅 showAlpha=true 时生效）\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 /* 键盘交互：Escape 关闭面板（对齐 antd / WAI-ARIA） /\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === 'Escape' && this.isOpen) {\n e.preventDefault();\n this.isOpen = false;\n }\n };\n\n /* 把 3 位简写 hex 规范化为 6 位，避免后续 hexToRgb 解析失败 /\n private normalizeHex(color: string): string \| null {\n if (typeof color !== 'string') return null;\n const c = color.trim();\n if (/^#([A-Fa-f0-9]{6})$/.test(c)) return c.toLowerCase();\n if (/^#([A-Fa-f0-9]{3})$/.test(c)) {\n const [, r, g, b] = c.match(/^#(.)(.)(.)$/)!;\n return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();\n }\n return null;\n }\n\n private handleColorSelect = (color: string) => {\n const normalized = this.normalizeHex(color);\n if (!normalized) return; // 非法颜色直接忽略，防止 currentColor 进入不可解析态\n this.currentColor = normalized;\n this.modelValue = normalized;\n this.hbChange.emit(normalized);\n this.hbActiveChange.emit(normalized);\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 颜色格式（3 位简写会被 handleColorSelect 内部规范化为 6 位）\n if (/^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$/.test(value)) {\n this.handleColorSelect(value);\n }\n };\n\n /** 透明度条点击/拖动：X 轴映射到 alpha 0-100 /\n private handleAlphaClick = (e: MouseEvent) => {\n const target = e.currentTarget as HTMLElement;\n const rect = target.getBoundingClientRect();\n const x = e.clientX - rect.left;\n this.alpha = Math.max(0, Math.min(100, Math.round((x / rect.width) 100)));\n // alpha 变化触发 active 事件（不改变 hex，但通知消费者透明度变化）\n this.hbActiveChange.emit(this.getFormattedValue());\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 // 先用 normalizeHex 兜底 3 位简写（#abc → #aabbcc），再解析\n const normalized = this.normalizeHex(hex);\n if (!normalized) return null;\n const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(normalized);\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 /** 按当前 colorFormat 输出最终颜色字符串（对齐 antd 的 format 行为） /\n private getFormattedValue(): string {\n const rgb = this.hexToRgb(this.currentColor);\n if (!rgb) return this.currentColor;\n switch (this.colorFormat) {\n case 'rgb':\n return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n case 'hsl': {\n const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);\n const [h, s, l] = this.hsvToHsl(hsv.h, hsv.s, hsv.v);\n return `hsl(${h}, ${s}%, ${l}%)`;\n }\n case 'hsv': {\n const hsv = this.rgbToHsv(rgb.r, rgb.g, rgb.b);\n return `hsv(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`;\n }\n case 'hex':\n default:\n return this.currentColor;\n }\n }\n\n /* HSV → HSL（HSL 字符串输出用） /\n private hsvToHsl(h: number, s: number, v: number): [number, number, number] {\n s /= 100;\n v /= 100;\n const l = v - (v s) / 2;\n const sl = l === 0 \|\| l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);\n return [Math.round(h), Math.round(sl * 100), Math.round(l * 100)];\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 onKeyDown={this.handleKeyDown}\n >\n <div\n class=\"hb-color-picker__trigger\"\n onClick={this.handleTriggerClick}\n role=\"button\"\n tabindex={this.disabled ? -1 : 0}\n aria-haspopup=\"dialog\"\n aria-expanded={this.isOpen ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n onKeyDown={e => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.handleTriggerClick();\n }\n }}\n >\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\" role=\"dialog\">\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\" onClick={this.handleAlphaClick}>\n <div class=\"hb-color-picker__alpha-bar\" style={{ backgroundColor: this.currentColor }}></div>\n <div\n class=\"hb-color-picker__alpha-pointer\"\n style={{ left: `${this.alpha}%` }}\n ></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 aria-label=\"HEX 颜色值\"\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 aria-label=\"红色通道\"\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 aria-label=\"绿色通道\"\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 aria-label=\"蓝色通道\"\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 const normalized = this.normalizeHex(color) \|\| color;\n return (\n <div\n class={{\n 'hb-color-picker__predefine-color': true,\n 'hb-color-picker__predefine-color--selected': normalized === this.currentColor,\n }}\n style={{ backgroundColor: color }}\n onClick={() => this.handleColorSelect(color)}\n title={color}\n ></div>\n );\n })}\n </div>\n )}\n </div>\n </div>\n )}\n </div>\n );\n }\n}\n\n"]}

package/dist/collection/components/ColorPicker/color-picker.css CHANGED Viewed

@@ -139,6 +139,19 @@
   border-radius: 2px;
 }
+.hb-color-picker__alpha-pointer {
+  position: absolute;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  transform: translateX(-50%);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+  pointer-events: none;
+}
 .hb-color-picker__input {
   margin-top: 12px;
 }

package/dist/collection/components/ColorPickerPanel/ColorPickerPanel.js CHANGED Viewed

@@ -59,10 +59,10 @@ export class ColorPickerPanel {
             '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
             '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
         ];
-        return (h("div", { key: '7f5215f6908b85c016b9fc68423d63736adc64ac', class: "hb-color-picker-panel" }, h("div", { key: '6e918eb9cfd1932f6b01bd1b4e34eab37f12d486', class: "hb-color-picker-panel__saturation" }, h("div", { key: '72b61931cb7d87060868328de1675998ebd59ec1', class: "hb-color-picker-panel__saturation-white" }), h("div", { key: 'a4e3f1c4ab9217793e710cf940ec15539eaa2f9d', class: "hb-color-picker-panel__saturation-black" }), h("div", { key: '68f53e538a84d86c6093a56a1cbc566e08a2e43e', class: "hb-color-picker-panel__saturation-pointer", style: {
+        return (h("div", { key: 'bf226e5918769e715aaf121e03316a9ba7165174', class: "hb-color-picker-panel" }, h("div", { key: 'e1940500a929515478b5a47540aabc716c81ff27', class: "hb-color-picker-panel__saturation" }, h("div", { key: 'cbb6de28453a7b72a2be56258af413814621bd04', class: "hb-color-picker-panel__saturation-white" }), h("div", { key: 'd982e1f04dc0566448bab44354bb47f9ed06e549', class: "hb-color-picker-panel__saturation-black" }), h("div", { key: 'd51391dd12c2383f01f0c80f677bbd30ffdf7540', class: "hb-color-picker-panel__saturation-pointer", style: {
                 left: rgb ? `${(rgb.r / 255) * 100}%` : '50%',
                 top: rgb ? `${(1 - rgb.g / 255) * 100}%` : '50%',
-            } })), h("div", { key: '990b800e049ea8c5fd421a011486df34754584df', class: "hb-color-picker-panel__controls" }, h("div", { key: 'f2ae82fe0034874c623c259efdaeb4f4101c9b4b', class: "hb-color-picker-panel__hue" }, h("div", { key: '85a4d5b390e52856addafe49f9a467ab9554d895', class: "hb-color-picker-panel__hue-bar" })), this.showAlpha && (h("div", { key: 'c4d984971839bed5d5af92d9a15942f30f44073e', class: "hb-color-picker-panel__alpha" }, h("div", { key: 'b61fd80f873c2c62561f4d814a397e5a8eed2cb6', class: "hb-color-picker-panel__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '64b5d37078471a314c26ef3e3e64c54887310cc1', class: "hb-color-picker-panel__input" }, h("input", { key: '2769607efa327d7b3c9c5e3fda4842a553c30cd2', type: "text", class: "hb-color-picker-panel__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: '4d3bf72b243b12f5f39d9c3f9800877a6d1eae9c', class: "hb-color-picker-panel__input-rgb" }, h("input", { key: 'd71850226823825cdc9eacc3cf8ff8a9b4d2c001', type: "number", min: "0", max: "255", value: rgb.r }), h("input", { key: 'ac86df2ab2e50574ddfb4938a85154e58969170e', type: "number", min: "0", max: "255", value: rgb.g }), h("input", { key: '457450f4ccdfe741dc28077a7160c504608cc23c', type: "number", min: "0", max: "255", value: rgb.b })))), this.predefine && this.predefine.length > 0 && (h("div", { key: 'b6ed00f9d32b953c4985a2336ee7901b61c64931', class: "hb-color-picker-panel__predefine" }, predefinedColors.map((color) => (h("div", { class: {
+            } })), h("div", { key: '3a962859eeeddabbe34ffd3459b6fead2bb93e20', class: "hb-color-picker-panel__controls" }, h("div", { key: '2d64a8c40a17a1a1e827b2ee3ebac717cfa10286', class: "hb-color-picker-panel__hue" }, h("div", { key: '30ab4768f4f6fd027d169480d44fc14089ed1452', class: "hb-color-picker-panel__hue-bar" })), this.showAlpha && (h("div", { key: '09984d0734eb3446962b4deb5ef617358a6d2c2f', class: "hb-color-picker-panel__alpha" }, h("div", { key: '1e2e49e7e6532a62ae1a539b4787adbde9a484da', class: "hb-color-picker-panel__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '8a34f379cbd1032ec9ae024b1b1168a5b1ae0af1', class: "hb-color-picker-panel__input" }, h("input", { key: '181d1f41a560fc7f49a0e334c749bb539476549c', type: "text", class: "hb-color-picker-panel__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: '1580bf0e898561e1c9f93da1e6f121cecc452824', class: "hb-color-picker-panel__input-rgb" }, h("input", { key: 'ba0970b200000c7ccf744883caaf4fa3d33dad61', type: "number", min: "0", max: "255", value: rgb.r }), h("input", { key: '6b35330cce8d4b2a7f040c113b1c9e9bd243e1b6', type: "number", min: "0", max: "255", value: rgb.g }), h("input", { key: '723c29edbf58a838b7bedaee6758ae38cd948e13', type: "number", min: "0", max: "255", value: rgb.b })))), this.predefine && this.predefine.length > 0 && (h("div", { key: 'c5c89935fc736fde14d946139c31404a1b978be5', class: "hb-color-picker-panel__predefine" }, predefinedColors.map((color) => (h("div", { class: {
                 'hb-color-picker-panel__predefine-color': true,
                 'hb-color-picker-panel__predefine-color--selected': color === this.currentColor,
             }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) })))))));

package/dist/collection/components/ConfigProvider/ConfigProvider.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class ConfigProvider {
     /** 语言 */
     locale = 'zh-CN';
     render() {
-        return h("slot", { key: '2f5645093f96615556fea763173dc339b8dfb515' });
+        return h("slot", { key: '60b01e02978bd4ce20fcebb1efc56b679001275a' });
     }
     componentDidLoad() {
         this.applyConfig();

package/dist/collection/components/Container/Aside.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class Aside {
         if (this.width) {
             style.width = this.width;
         }
-        return (h("aside", { key: 'f3a737773569b17eaeba7a061c087048d2f0b0d7', class: "hb-aside", style: style }, h("slot", { key: 'fde6d1fa95d2bb5c42202413b5c5716c85b26a7b' })));
+        return (h("aside", { key: '2615bba7300b1d86fa82a1618718e07479f41348', class: "hb-aside", style: style }, h("slot", { key: 'dd4ad7e905f2ea8c72bc4d70c82ab0a13bed5e0f' })));
     }
     static get is() { return "hb-aside"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Container/Container.js CHANGED Viewed

@@ -10,10 +10,10 @@ export class Container {
      */
     direction = 'horizontal';
     render() {
-        return (h("section", { key: '8d2029a2363134efb2feb8df16510a5ababe2764', class: {
+        return (h("section", { key: 'ae4367497d812f39390c7b4fdeb3dc64586e5621', class: {
                 'hb-container': true,
                 'hb-container--vertical': this.direction === 'vertical',
-            } }, h("slot", { key: 'fb2dea608d501e5db4a03657796571fdb30c9128' })));
+            } }, h("slot", { key: 'bdfee3ce5b691fcc69c4b1f3e7b7afd6b1709af2' })));
     }
     static get is() { return "hb-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/Container/Footer.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class Footer {
         if (this.height) {
             style.height = this.height;
         }
-        return (h("footer", { key: 'a6a73df27a1e1a7891a436a0f57c337e27cb9328', class: "hb-footer", style: style }, h("slot", { key: '02927f1f9433b928f2552ef19e2e3fbd7cf69d44' })));
+        return (h("footer", { key: '65847074853df09c57dd2bcead1470dac15f5951', class: "hb-footer", style: style }, h("slot", { key: 'e0f976bf1b3cd1f3a7ae2609bdf9b621070dac10' })));
     }
     static get is() { return "hb-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class Header {
         if (this.height) {
             style.height = this.height;
         }
-        return (h("header", { key: '86042705286a6d135858982b34cdb19da71b6744', class: "hb-header", style: style }, h("slot", { key: '96d5152e19c88d4cbc4c30bc136b27b6b8388331' })));
+        return (h("header", { key: 'b0f4403c73f20d13b4513dd21266e5fea1004f7b', class: "hb-header", style: style }, h("slot", { key: '15f9743951c0183e7ee10124c0e3d2e8d071bee0' })));
     }
     static get is() { return "hb-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class Main {
     render() {
-        return (h("main", { key: 'd326db7b0e9de0ff411ca3af99f2399a5e760557', class: "hb-main" }, h("slot", { key: 'cea61788b327d41f6307be518c368eca41a254b2' })));
+        return (h("main", { key: '98dd998acef2d0cf91173425d84b5e14cd86c104', class: "hb-main" }, h("slot", { key: 'e508104800157f61bec0b0754371c83a4a76dabe' })));
     }
     static get is() { return "hb-main"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,8 +22,11 @@ export class DatePicker {
     /** 显示在输入框中的格式 */
     valueFormat;
     /**
-     * 日期选择器类型
-     * 当前仅支持 'date'，更多类型将在后续版本实现
+     * 日期选择器类型：
+     * - 'date'：日选择（默认）
+     * - 'month'：月选择（month 视图网格，emit YYYY-MM）
+     * - 'year'：年选择（year 视图网格，emit YYYY）
+     * 注：'datetime'/'week' 请用独立的 DateTimePicker 组件 / 后续补全。
      */
     type = 'date';
     /**
@@ -38,6 +41,8 @@ export class DatePicker {
     isOpen = false;
     inputValue = '';
     selectedDate;
+    /** month/year 模式的面板锚点（不随选择改变，仅导航用） */
+    panelViewDate = new Date();
     /** 值改变事件 */
     hbChange;
     clickOutside = createClickOutsideHandler({
@@ -74,6 +79,10 @@ export class DatePicker {
         if (this.disabled)
             return;
         this.isOpen = !this.isOpen;
+        // month/year 模式打开时，从已选值或今天初始化面板锚点
+        if (this.isOpen && (this.type === 'month' || this.type === 'year')) {
+            this.panelViewDate = this.selectedDate ? new Date(this.selectedDate) : new Date();
+        }
     };
     handleClear = (e) => {
         e.stopPropagation();
@@ -93,9 +102,44 @@ export class DatePicker {
         this.isOpen = false;
         this.hbChange.emit(this.modelValue);
     };
+    /** type='month'：选某月 → 锚定到该月 1 号，emit YYYY-MM */
+    handleMonthSelect = (monthIndex) => {
+        const next = new Date(this.panelViewDate.getFullYear(), monthIndex, 1);
+        if (this.disabledDate && this.disabledDate(next))
+            return;
+        this.selectedDate = next;
+        this.panelViewDate = new Date(next);
+        const iso = `${next.getFullYear()}-${String(monthIndex + 1).padStart(2, '0')}`;
+        this.inputValue = iso;
+        this.modelValue = iso;
+        this.isOpen = false;
+        this.hbChange.emit(iso);
+    };
+    /** type='year'：选某年 → 锚定到该年 1 月 1 日，emit YYYY */
+    handleYearSelect = (year) => {
+        const next = new Date(year, 0, 1);
+        if (this.disabledDate && this.disabledDate(next))
+            return;
+        this.selectedDate = next;
+        this.panelViewDate = new Date(next);
+        const iso = String(year);
+        this.inputValue = iso;
+        this.modelValue = iso;
+        this.isOpen = false;
+        this.hbChange.emit(iso);
+    };
     changeMonth(delta) {
         this.selectedDate = addMonths(this.selectedDate || new Date(), delta);
     }
+    /** month/year 面板导航：month ±1 年、year ±12 年 */
+    changePanelView(delta) {
+        const next = new Date(this.panelViewDate);
+        if (this.type === 'month')
+            next.setFullYear(next.getFullYear() + delta);
+        else
+            next.setFullYear(next.getFullYear() + delta * 12);
+        this.panelViewDate = next;
+    }
     /** 判断某日期是否被 disabledDate 禁用 */
     isDateDisabled = (date) => {
         return !!this.disabledDate && this.disabledDate(date);
@@ -103,12 +147,20 @@ export class DatePicker {
     render() {
         const days = getCalendarDays(this.selectedDate || new Date(), this.selectedDate);
         const current = this.selectedDate || new Date();
-        return (h("div", { key: '79e20fe927318faa30086dbe5cd3e17b24077f8f', class: {
+        // month/year 面板锚点：默认用 panelViewDate，未打开时回退到 selectedDate/today
+        const panelAnchor = this.panelViewDate || current;
+        const headerLabel = this.type === 'month'
+            ? `${panelAnchor.getFullYear()} 年`
+            : this.type === 'year'
+                ? `${Math.floor(panelAnchor.getFullYear() / 12) * 12} - ${Math.floor(panelAnchor.getFullYear() / 12) * 12 + 11}`
+                : `${current.getFullYear()}年 ${MONTH_NAMES[current.getMonth()]}`;
+        return (h("div", { key: '2d4d4082eee095d506d8450a7f58685cbd4bb1a9', 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) => {
+                [`hb-date-picker--${this.type}`]: true,
+            } }, h("div", { key: '6b740a744a4f1d24d1d1b8d65d44a0ca6d69b3fb', class: "hb-date-picker__input-wrapper", onClick: this.handleInputClick }, h("input", { key: '7eeee5862662040a0f2858b04fa4ca96f01e3eb9', 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: '754144e78db34c6f674469e2c95a51c39828c965', class: "hb-date-picker__suffix" }, this.clearable && this.modelValue && (h("span", { key: '7766158871f0d0b5288b4320f10976704879f680', class: "hb-date-picker__clear", role: "button", "aria-label": "\u6E05\u7A7A", onClick: this.handleClear }, h("svg", { key: '64ec132282290456ec08306f2219eae1fa420377', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("path", { key: 'f1a41eedee2964a1fd92672f90591b2afdd7f0ca', d: "M6 6l12 12M18 6L6 18" })))), h("span", { key: '6c1972309c18139b1cd310f26855dbe846e03982', class: "hb-date-picker__icon", "aria-hidden": "true" }, h("svg", { key: 'e15ef729755d5629fbe16d356a9723ea0ebda9ad', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { key: 'db3dd7a69499a878ccd000eae533cbe9485b9d13', x: "3", y: "5", width: "18", height: "16", rx: "2" }), h("path", { key: 'dec2aa31cdf761b591e462d8c9dedb061a73ed63', d: "M3 9h18M8 3v4M16 3v4" }))))), this.isOpen && (h("div", { key: '626c192f0e2d45e7b5efbd53dd02241af51119be', class: "hb-date-picker__dropdown", role: "dialog", "aria-label": this.type === 'month' ? '选择月份' : this.type === 'year' ? '选择年份' : '选择日期' }, h("div", { key: 'a88b651f2defcee8a88ac07a4ce8a2e8a1857854', class: "hb-date-picker__header" }, h("button", { key: 'c47b93061818e710090959432b9e89f9281edb4e', type: "button", class: "hb-date-picker__prev-btn", "aria-label": this.type === 'date' ? '上一月' : '上一年', onClick: () => (this.type === 'date' ? this.changeMonth(-1) : this.changePanelView(-1)) }, "\u2039"), h("span", { key: 'ae85952f2be4f5cd1cb075c3cd9ea69503a0362e', class: "hb-date-picker__header-label", "aria-live": "polite" }, headerLabel), h("button", { key: '0114d37baea55623d2fc65680ae7d73749a1ef24', type: "button", class: "hb-date-picker__next-btn", "aria-label": this.type === 'date' ? '下一月' : '下一年', onClick: () => (this.type === 'date' ? this.changeMonth(1) : this.changePanelView(1)) }, "\u203A")), this.type === 'date' && (h("div", { key: '754807f77924d8a74ff4b5fc26b6f4794f3fcf3b', class: "hb-date-picker__body", role: "grid" }, h("div", { key: '80e7acb304dde0dd8dd256add20b5997c3d8311c', 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: 'c8dce0eb806e015292e4841d4fe3dd349bc2a52b', 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,
@@ -117,7 +169,33 @@ export class DatePicker {
                     '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()));
-        })))))));
+        })))), this.type === 'month' && (h("div", { key: 'ebf1c3935e7c868153823113622e5c08ee0bdffd', class: "hb-date-picker__body hb-date-picker__month-grid", role: "grid" }, MONTH_NAMES.map((name, idx) => {
+            const probe = new Date(panelAnchor.getFullYear(), idx, 1);
+            const monthDisabled = !!this.disabledDate && this.disabledDate(probe);
+            const isSelected = !!this.selectedDate &&
+                this.selectedDate.getFullYear() === panelAnchor.getFullYear() &&
+                this.selectedDate.getMonth() === idx;
+            return (h("div", { class: {
+                    'hb-date-picker__month-cell': true,
+                    'hb-date-picker__month-cell--selected': isSelected,
+                    'hb-date-picker__month-cell--disabled': monthDisabled,
+                }, role: "gridcell", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": monthDisabled ? 'true' : undefined, onClick: () => !monthDisabled && this.handleMonthSelect(idx) }, name));
+        }))), this.type === 'year' && (h("div", { key: '1cf9555cc9c65d5a723528948cf5e63cc0e416f5', class: "hb-date-picker__body hb-date-picker__year-grid", role: "grid" }, (() => {
+            const startYear = Math.floor(panelAnchor.getFullYear() / 12) * 12;
+            const years = [];
+            for (let i = 0; i < 12; i++)
+                years.push(startYear + i);
+            return years.map(y => {
+                const probe = new Date(y, 0, 1);
+                const yearDisabled = !!this.disabledDate && this.disabledDate(probe);
+                const isSelected = !!this.selectedDate && this.selectedDate.getFullYear() === y;
+                return (h("div", { class: {
+                        'hb-date-picker__year-cell': true,
+                        'hb-date-picker__year-cell--selected': isSelected,
+                        'hb-date-picker__year-cell--disabled': yearDisabled,
+                    }, role: "gridcell", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": yearDisabled ? 'true' : undefined, onClick: () => !yearDisabled && this.handleYearSelect(y) }, y));
+            });
+        })()))))));
     }
     static get is() { return "hb-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -280,21 +358,21 @@ export class DatePicker {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"date\"",
-                    "resolved": "\"date\"",
+                    "original": "'date' | 'month' | 'year'",
+                    "resolved": "\"date\" | \"month\" | \"year\"",
                     "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"
+                    "text": "\u65E5\u671F\u9009\u62E9\u5668\u7C7B\u578B\uFF1A\n- 'date'\uFF1A\u65E5\u9009\u62E9\uFF08\u9ED8\u8BA4\uFF09\n- 'month'\uFF1A\u6708\u9009\u62E9\uFF08month \u89C6\u56FE\u7F51\u683C\uFF0Cemit YYYY-MM\uFF09\n- 'year'\uFF1A\u5E74\u9009\u62E9\uFF08year \u89C6\u56FE\u7F51\u683C\uFF0Cemit YYYY\uFF09\n\u6CE8\uFF1A'datetime'/'week' \u8BF7\u7528\u72EC\u7ACB\u7684 DateTimePicker \u7EC4\u4EF6 / \u540E\u7EED\u8865\u5168\u3002"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "type",
                 "reflect": false,
-                "defaultValue": "'date' as const"
+                "defaultValue": "'date'"
             },
             "disabledDate": {
                 "type": "unknown",
@@ -365,7 +443,8 @@ export class DatePicker {
         return {
             "isOpen": {},
             "inputValue": {},
-            "selectedDate": {}
+            "selectedDate": {},
+            "panelViewDate": {}
         };
     }
     static get events() {