huibo-ui 0.3.0

package/dist/collection/components/Checkbox/Checkbox.js

@@ -0,0 +1,372 @@
+import { h } from "@stencil/core";
+/**
+ * Checkbox 多选框组件
+ * 一组备选项中进行多选
+ */
+export class Checkbox {
+    /**
+     * 绑定值
+     */
+    modelValue = false;
+    /**
+     * 当前值（用于单个 checkbox）
+     */
+    value;
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否选中
+     * @default false
+     */
+    checked = false;
+    /**
+     * 是否不确定状态
+     * @default false
+     */
+    indeterminate = false;
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    checkboxId;
+    /**
+     * 文本标签
+     */
+    label;
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border = false;
+    /**
+     * 尺寸
+     */
+    size = 'default';
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    isChecked = false;
+    handleValueChange() {
+        this.updateChecked();
+    }
+    componentDidLoad() {
+        this.updateChecked();
+    }
+    updateChecked() {
+        if (this.value !== undefined) {
+            // 在 checkbox group 中
+            const modelValue = this.modelValue;
+            this.isChecked = Array.isArray(modelValue) && modelValue.includes(this.value);
+        }
+        else {
+            // 单个 checkbox
+            this.isChecked = this.checked || this.modelValue;
+        }
+    }
+    handleChange = (e) => {
+        const target = e.target;
+        if (this.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (this.value !== undefined) {
+            // 在 checkbox group 中
+            const modelValue = this.modelValue || [];
+            let newValue;
+            if (target.checked) {
+                newValue = [...modelValue, this.value];
+            }
+            else {
+                newValue = modelValue.filter(v => v !== this.value);
+            }
+            this.modelValue = newValue;
+            this.hbChange.emit(newValue);
+        }
+        else {
+            // 单个 checkbox
+            this.modelValue = target.checked;
+            this.isChecked = target.checked;
+            this.hbChange.emit(target.checked);
+        }
+    };
+    render() {
+        const inputId = this.checkboxId || `hb-checkbox-${Math.random().toString(36).substr(2, 9)}`;
+        return (h("label", { key: '4a8a921d4acee922e78022b7a2d9acbbe4c81ca9', class: {
+                'hb-checkbox': true,
+                'hb-checkbox--checked': this.isChecked,
+                'hb-checkbox--disabled': this.disabled,
+                'hb-checkbox--border': this.border,
+                [`hb-checkbox--${this.size}`]: true,
+            } }, h("span", { key: '53b12cc28cdb425aae8313b82e42c3d6495ba29b', class: "hb-checkbox__input" }, h("input", { key: '91bf4e03b846281ba487dbe66a7e89ecd90cec47', type: "checkbox", id: inputId, name: this.name, checked: this.isChecked, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, class: "hb-checkbox__original" }), h("span", { key: 'f8c2cf109ccd867a11d90202b2ccc9e65a24f209', class: {
+                'hb-checkbox__inner': true,
+                'hb-checkbox__inner--indeterminate': this.indeterminate,
+            } })), (this.label || this.value !== undefined) && (h("span", { key: '388050b4cc69b3d760ba7d3ae9f115adeb3e47f0', class: "hb-checkbox__label" }, h("slot", { key: '3368be81921aa59e5114bb975e8821aab60ec396' }, this.label || this.value)))));
+    }
+    static get is() { return "hb-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean | (string | number)[]",
+                    "resolved": "(string | number)[] | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5F53\u524D\u503C\uFF08\u7528\u4E8E\u5355\u4E2A checkbox\uFF09"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u9009\u4E2D"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u4E0D\u786E\u5B9A\u72B6\u6001"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "indeterminate",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F name \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "checkboxId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F id \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checkbox-id",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6587\u672C\u6807\u7B7E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u8FB9\u6846"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isChecked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "boolean | (string | number)[]",
+                    "resolved": "(string | number)[] | boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "checked",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\nexport interface CheckboxOption {\n  label: string;\n  value: string | number;\n  disabled?: boolean;\n}\n\n/**\n * Checkbox 多选框组件\n * 一组备选项中进行多选\n */\n@Component({\n  tag: 'hb-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: boolean | (string | number)[] = false;\n\n  /**\n   * 当前值（用于单个 checkbox）\n   */\n  @Prop() value?: string | number;\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否选中\n   * @default false\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * 是否不确定状态\n   * @default false\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() checkboxId?: string;\n\n  /**\n   * 文本标签\n   */\n  @Prop() label?: string;\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<boolean | (string | number)[]>;\n\n  @State() isChecked: boolean = false;\n\n  @Watch('modelValue')\n  @Watch('checked')\n  @Watch('value')\n  handleValueChange() {\n    this.updateChecked();\n  }\n\n  componentDidLoad() {\n    this.updateChecked();\n  }\n\n  private updateChecked() {\n    if (this.value !== undefined) {\n      // 在 checkbox group 中\n      const modelValue = this.modelValue as (string | number)[];\n      this.isChecked = Array.isArray(modelValue) && modelValue.includes(this.value);\n    } else {\n      // 单个 checkbox\n      this.isChecked = this.checked || (this.modelValue as boolean);\n    }\n  }\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    \n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (this.value !== undefined) {\n      // 在 checkbox group 中\n      const modelValue = (this.modelValue as (string | number)[]) || [];\n      let newValue: (string | number)[];\n      \n      if (target.checked) {\n        newValue = [...modelValue, this.value];\n      } else {\n        newValue = modelValue.filter(v => v !== this.value);\n      }\n      \n      this.modelValue = newValue;\n      this.hbChange.emit(newValue);\n    } else {\n      // 单个 checkbox\n      this.modelValue = target.checked;\n      this.isChecked = target.checked;\n      this.hbChange.emit(target.checked);\n    }\n  };\n\n  render() {\n    const inputId = this.checkboxId || `hb-checkbox-${Math.random().toString(36).substr(2, 9)}`;\n    \n    return (\n      <label\n        class={{\n          'hb-checkbox': true,\n          'hb-checkbox--checked': this.isChecked,\n          'hb-checkbox--disabled': this.disabled,\n          'hb-checkbox--border': this.border,\n          [`hb-checkbox--${this.size}`]: true,\n        }}\n      >\n        <span class=\"hb-checkbox__input\">\n          <input\n            type=\"checkbox\"\n            id={inputId}\n            name={this.name}\n            checked={this.isChecked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            onChange={this.handleChange}\n            class=\"hb-checkbox__original\"\n          />\n          <span\n            class={{\n              'hb-checkbox__inner': true,\n              'hb-checkbox__inner--indeterminate': this.indeterminate,\n            }}\n          ></span>\n        </span>\n        {(this.label || this.value !== undefined) && (\n          <span class=\"hb-checkbox__label\">\n            <slot>{this.label || this.value}</slot>\n          </span>\n        )}\n      </label>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,276 @@
+import { h } from "@stencil/core";
+/**
+ * CheckboxGroup 多选框组组件
+ * 用于管理多个 checkbox
+ */
+export class CheckboxGroup {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue = [];
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 尺寸
+     */
+    size = 'default';
+    /**
+     * 是否显示边框
+     * @default false
+     */
+    border = false;
+    /**
+     * 最小选中数量
+     */
+    min;
+    /**
+     * 最大选中数量
+     */
+    max;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    checkboxes = [];
+    componentDidLoad() {
+        this.updateCheckboxes();
+    }
+    handleValueChange() {
+        this.updateCheckboxesState();
+    }
+    handlePropsChange() {
+        this.updateCheckboxes();
+    }
+    updateCheckboxes() {
+        const checkboxes = Array.from(this.el.querySelectorAll('hb-checkbox'));
+        this.checkboxes = checkboxes;
+        checkboxes.forEach((checkbox) => {
+            checkbox.disabled = this.disabled || checkbox.disabled;
+            checkbox.size = this.size;
+            checkbox.border = this.border;
+            // 监听checkbox变化
+            checkbox.addEventListener('hbChange', this.handleCheckboxChange);
+        });
+        this.updateCheckboxesState();
+    }
+    updateCheckboxesState() {
+        this.checkboxes.forEach((checkbox) => {
+            if (checkbox.value !== undefined) {
+                const isChecked = this.modelValue.includes(checkbox.value);
+                checkbox.modelValue = isChecked
+                    ? [...this.modelValue]
+                    : this.modelValue.filter((v) => v !== checkbox.value);
+            }
+        });
+    }
+    handleCheckboxChange = (e) => {
+        const checkbox = e.target;
+        const value = checkbox.value;
+        if (value === undefined)
+            return;
+        let newValue;
+        if (this.modelValue.includes(value)) {
+            newValue = this.modelValue.filter((v) => v !== value);
+            // 取消选中后不能低于最小数量
+            if (this.min !== undefined && newValue.length < this.min) {
+                return;
+            }
+        }
+        else {
+            // 选中后不能超过最大数量
+            if (this.max !== undefined && this.modelValue.length >= this.max) {
+                return;
+            }
+            newValue = [...this.modelValue, value];
+        }
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+    };
+    render() {
+        return (h("div", { key: 'bec6679f9d71e61ef19f8c57216be635bed70c7b', class: {
+                'hb-checkbox-group': true,
+            } }, h("slot", { key: '5e137ca5381a35e9a63b99dbed7f1897117daf47' })));
+    }
+    static get is() { return "hb-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "(string | number)[]",
+                    "resolved": "(string | number)[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u7981\u7528"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u663E\u793A\u8FB9\u6846"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5C0F\u9009\u4E2D\u6570\u91CF"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u9009\u4E2D\u6570\u91CF"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checkboxes": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "(string | number)[]",
+                    "resolved": "(string | number)[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "size",
+                "methodName": "handlePropsChange"
+            }, {
+                "propName": "border",
+                "methodName": "handlePropsChange"
+            }];
+    }
+}
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/collection/components/Checkbox/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/Checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n\n/**\n * CheckboxGroup 多选框组组件\n * 用于管理多个 checkbox\n */\n@Component({\n  tag: 'hb-checkbox-group',\n  styleUrl: 'checkbox-group.css',\n  shadow: true,\n})\nexport class CheckboxGroup {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: (string | number)[] = [];\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否显示边框\n   * @default false\n   */\n  @Prop() border: boolean = false;\n\n  /**\n   * 最小选中数量\n   */\n  @Prop() min?: number;\n\n  /**\n   * 最大选中数量\n   */\n  @Prop() max?: number;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<(string | number)[]>;\n\n  @State() checkboxes: HTMLHbCheckboxElement[] = [];\n\n  componentDidLoad() {\n    this.updateCheckboxes();\n  }\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.updateCheckboxesState();\n  }\n\n  @Watch('disabled')\n  @Watch('size')\n  @Watch('border')\n  handlePropsChange() {\n    this.updateCheckboxes();\n  }\n\n  private updateCheckboxes() {\n    const checkboxes = Array.from(\n      this.el.querySelectorAll('hb-checkbox')\n    ) as HTMLHbCheckboxElement[];\n\n    this.checkboxes = checkboxes;\n\n    checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled || checkbox.disabled;\n      checkbox.size = this.size;\n      checkbox.border = this.border;\n      \n      // 监听checkbox变化\n      checkbox.addEventListener('hbChange', this.handleCheckboxChange);\n    });\n\n    this.updateCheckboxesState();\n  }\n\n  private updateCheckboxesState() {\n    this.checkboxes.forEach((checkbox) => {\n      if (checkbox.value !== undefined) {\n        const isChecked = this.modelValue.includes(checkbox.value);\n        checkbox.modelValue = isChecked\n          ? [...this.modelValue]\n          : this.modelValue.filter((v) => v !== checkbox.value);\n      }\n    });\n  }\n\n  private handleCheckboxChange = (e: CustomEvent) => {\n    const checkbox = e.target as HTMLHbCheckboxElement;\n    const value = checkbox.value;\n\n    if (value === undefined) return;\n\n    let newValue: (string | number)[];\n\n    if (this.modelValue.includes(value)) {\n      newValue = this.modelValue.filter((v) => v !== value);\n      // 取消选中后不能低于最小数量\n      if (this.min !== undefined && newValue.length < this.min) {\n        return;\n      }\n    } else {\n      // 选中后不能超过最大数量\n      if (this.max !== undefined && this.modelValue.length >= this.max) {\n        return;\n      }\n      newValue = [...this.modelValue, value];\n    }\n\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-checkbox-group': true,\n        }}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n\n"]}