huibo-ui 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputNumber.js","sourceRoot":"","sources":["../../../src/components/InputNumber/InputNumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\n\n/**\n * InputNumber 数字输入框组件\n * 仅允许输入标准的数字值，可定义范围\n */\n@Component({\n  tag: 'hb-input-number',\n  styleUrl: 'input-number.css',\n  shadow: true,\n})\nexport class InputNumber {\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: number = 0;\n\n  /**\n   * 计数器尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 是否只读\n   * @default false\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * 最小值\n   * @default -Infinity\n   */\n  @Prop() min: number = -Infinity;\n\n  /**\n   * 最大值\n   * @default Infinity\n   */\n  @Prop() max: number = Infinity;\n\n  /**\n   * 计数器步长\n   * @default 1\n   */\n  @Prop() step: number = 1;\n\n  /**\n   * 精度\n   */\n  @Prop() precision?: number;\n\n  /**\n   * 是否只能输入 step 的倍数\n   * @default false\n   */\n  @Prop() stepStrictly: boolean = false;\n\n  /**\n   * 是否使用控制按钮\n   * @default true\n   */\n  @Prop() controls: boolean = true;\n\n  /**\n   * 控制按钮位置\n   */\n  @Prop() controlsPosition: '' | 'right' = '';\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 placeholder 属性\n   */\n  @Prop() placeholder?: string;\n\n  @State() currentValue: number = 0;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<number>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<number>;\n\n  componentDidLoad() {\n    this.currentValue = this.modelValue;\n  }\n\n  /** 受控模式：外部修改 modelValue 时同步内部 currentValue，保证 UI 与值一致 */\n  @Watch('modelValue')\n  handleModelValueChange() {\n    this.currentValue = this.modelValue;\n  }\n\n  private formatValue(value: number): number {\n    if (this.precision !== undefined) {\n      return Number(value.toFixed(this.precision));\n    }\n    return value;\n  }\n\n  private clampValue(value: number): number {\n    let clamped = Math.max(this.min, Math.min(this.max, value));\n    \n    if (this.stepStrictly) {\n      const step = this.step;\n      clamped = Math.round(clamped / step) * step;\n    }\n    \n    return this.formatValue(clamped);\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n    \n    if (isNaN(value)) {\n      this.currentValue = this.min;\n    } else {\n      this.currentValue = this.clampValue(value);\n    }\n    \n    this.modelValue = this.currentValue;\n    this.hbInput.emit(this.currentValue);\n  };\n\n  private handleChange = () => {\n    this.hbChange.emit(this.currentValue);\n  };\n\n  private increase = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue + this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  private decrease = () => {\n    if (this.disabled || this.readonly) return;\n    const newValue = this.clampValue(this.currentValue - this.step);\n    this.currentValue = newValue;\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-input-number': true,\n          [`hb-input-number--${this.size}`]: true,\n          'hb-input-number--disabled': this.disabled,\n          'hb-input-number--controls-right': this.controlsPosition === 'right',\n          'hb-input-number--without-controls': !this.controls,\n        }}\n      >\n        {this.controls && this.controlsPosition !== 'right' && (\n          <span\n            class={{\n              'hb-input-number__decrease': true,\n              'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n            }}\n            onClick={this.decrease}\n          >\n            −\n          </span>\n        )}\n        <input\n          type=\"number\"\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input-number__inner\"\n          value={this.currentValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          placeholder={this.placeholder}\n          min={this.min}\n          max={this.max}\n          step={this.step}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n        {this.controls && this.controlsPosition === 'right' && (\n          <span class=\"hb-input-number__controls\">\n            <span\n              class={{\n                'hb-input-number__increase': true,\n                'hb-input-number__increase--disabled': this.currentValue >= this.max,\n              }}\n              onClick={this.increase}\n            >\n              +\n            </span>\n            <span\n              class={{\n                'hb-input-number__decrease': true,\n                'hb-input-number__decrease--disabled': this.currentValue <= this.min,\n              }}\n              onClick={this.decrease}\n            >\n              −\n            </span>\n          </span>\n        )}\n        {this.controls && this.controlsPosition !== 'right' && (\n          <span\n            class={{\n              'hb-input-number__increase': true,\n              'hb-input-number__increase--disabled': this.currentValue >= this.max,\n            }}\n            onClick={this.increase}\n          >\n            +\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/InputNumber/input-number.css

@@ -0,0 +1,168 @@
+:host {
+  display: inline-block;
+  position: relative;
+  --hb-input-number-font-size: 14px;
+  --hb-input-number-height: 32px;
+  --hb-input-number-border-color: var(--hb-border-color, #dcdfe6);
+  --hb-input-number-border-color-hover: var(--hb-color-primary);
+  --hb-input-number-bg-color: var(--hb-color-white, #ffffff);
+}
+
+.hb-input-number {
+  position: relative;
+  display: inline-block;
+  width: 180px;
+  line-height: var(--hb-input-number-height);
+}
+
+.hb-input-number__inner {
+  -webkit-appearance: none;
+  background-color: var(--hb-input-number-bg-color);
+  border: 1px solid var(--hb-input-number-border-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--hb-color-text-regular, #606266);
+  display: block;
+  font-size: inherit;
+  height: var(--hb-input-number-height);
+  line-height: var(--hb-input-number-height);
+  outline: none;
+  padding: 0 50px 0 15px;
+  text-align: left;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+}
+
+.hb-input-number--without-controls .hb-input-number__inner {
+  padding: 0 15px;
+}
+
+.hb-input-number--controls-right .hb-input-number__inner {
+  padding: 0 15px 0 50px;
+}
+
+.hb-input-number__inner:hover:not(:disabled) {
+  border-color: var(--hb-input-number-border-color-hover);
+}
+
+.hb-input-number__inner:focus {
+  border-color: var(--hb-input-number-border-color-hover);
+}
+
+.hb-input-number__inner:disabled {
+  background-color: var(--hb-fill-color-light, #f5f7fa);
+  border-color: var(--hb-input-number-border-color);
+  color: var(--hb-color-text-disabled, #c0c4cc);
+  cursor: not-allowed;
+}
+
+.hb-input-number__increase,
+.hb-input-number__decrease {
+  position: absolute;
+  z-index: 1;
+  top: 1px;
+  width: 35px;
+  height: calc(100% - 2px);
+  text-align: center;
+  background: var(--hb-fill-color-light, #f5f7fa);
+  color: var(--hb-color-text-regular, #606266);
+  cursor: pointer;
+  font-size: 13px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.hb-input-number__increase:hover:not(.hb-input-number__increase--disabled),
+.hb-input-number__decrease:hover:not(.hb-input-number__decrease--disabled) {
+  color: var(--hb-color-primary);
+}
+
+.hb-input-number__increase--disabled,
+.hb-input-number__decrease--disabled {
+  color: var(--hb-color-text-disabled, #c0c4cc);
+  cursor: not-allowed;
+}
+
+.hb-input-number__increase {
+  right: 1px;
+  border-radius: 0 4px 4px 0;
+  border-left: 1px solid var(--hb-input-number-border-color);
+}
+
+.hb-input-number__decrease {
+  right: 36px;
+  border-radius: 0;
+  border-left: 1px solid var(--hb-input-number-border-color);
+}
+
+.hb-input-number--controls-right .hb-input-number__increase {
+  right: 1px;
+  border-radius: 0 4px 4px 0;
+}
+
+.hb-input-number--controls-right .hb-input-number__decrease {
+  right: 36px;
+  border-radius: 0;
+}
+
+.hb-input-number__controls {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 35px;
+  height: calc(100% - 2px);
+  border-left: 1px solid var(--hb-input-number-border-color);
+  border-radius: 0 4px 4px 0;
+  background: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-input-number--controls-right .hb-input-number__controls {
+  left: 1px;
+  right: auto;
+  border-left: none;
+  border-right: 1px solid var(--hb-input-number-border-color);
+  border-radius: 4px 0 0 4px;
+}
+
+.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__increase {
+  position: static;
+  border: none;
+  border-bottom: 1px solid var(--hb-input-number-border-color);
+  border-radius: 0;
+}
+
+.hb-input-number--controls-right .hb-input-number__controls .hb-input-number__decrease {
+  position: static;
+  border: none;
+  border-radius: 0 0 0 4px;
+}
+
+.hb-input-number--small {
+  width: 150px;
+}
+
+.hb-input-number--small .hb-input-number__inner {
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  padding: 0 40px 0 12px;
+}
+
+.hb-input-number--large {
+  width: 200px;
+}
+
+.hb-input-number--large .hb-input-number__inner {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  padding: 0 55px 0 18px;
+}
+
+.hb-input-number--disabled {
+  cursor: not-allowed;
+}
+

package/dist/collection/components/InputTag/InputTag.js

@@ -0,0 +1,427 @@
+import { h } from "@stencil/core";
+/**
+ * InputTag 标签输入框组件
+ * 通过回车或者标签关闭按钮添加/删除标签
+ */
+export class InputTag {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue = [];
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 输入框占位文本
+     */
+    placeholder;
+    /**
+     * 输入框最大长度
+     */
+    maxlength;
+    /**
+     * 最大标签数量
+     */
+    max;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 输入框宽度
+     */
+    width;
+    /**
+     * 标签类型
+     */
+    type;
+    /**
+     * 是否可关闭
+     * @default true
+     */
+    closable = true;
+    /**
+     * 输入框是否可见
+     * @default true
+     */
+    inputVisible = true;
+    inputValue = '';
+    isFocused = false;
+    inputRef;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 移除标签时触发
+     */
+    hbRemove;
+    /**
+     * 输入事件
+     */
+    hbInput;
+    handleInput = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.hbInput.emit(target.value);
+    };
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' && this.inputValue.trim()) {
+            e.preventDefault();
+            this.addTag(this.inputValue.trim());
+        }
+        else if (e.key === 'Backspace' && !this.inputValue && this.modelValue.length > 0) {
+            this.removeTag(this.modelValue[this.modelValue.length - 1]);
+        }
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        if (this.inputValue.trim()) {
+            this.addTag(this.inputValue.trim());
+        }
+    };
+    addTag(tag) {
+        if (this.max && this.modelValue.length >= this.max) {
+            return;
+        }
+        if (!this.modelValue.includes(tag)) {
+            const newValue = [...this.modelValue, tag];
+            this.modelValue = newValue;
+            this.inputValue = '';
+            this.hbChange.emit(newValue);
+            if (this.inputRef) {
+                this.inputRef.value = '';
+            }
+        }
+    }
+    removeTag(tag) {
+        const newValue = this.modelValue.filter(t => t !== tag);
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+        this.hbRemove.emit(tag);
+    }
+    handleClearAll = (e) => {
+        e.stopPropagation();
+        this.modelValue = [];
+        this.hbChange.emit([]);
+    };
+    render() {
+        return (h("div", { key: '8623f46b1c4b3a6fbc2f3e1238695d34f08eac16', class: {
+                'hb-input-tag': true,
+                [`hb-input-tag--${this.size}`]: true,
+                'hb-input-tag--disabled': this.disabled,
+                'hb-input-tag--focused': this.isFocused,
+            }, style: this.width ? { width: this.width } : undefined }, this.modelValue.map((tag) => (h("span", { class: {
+                'hb-input-tag__tag': true,
+                [`hb-input-tag__tag--${this.type}`]: !!this.type,
+            } }, h("span", { class: "hb-input-tag__tag-text" }, tag), this.closable && (h("span", { class: "hb-input-tag__tag-close", onClick: () => this.removeTag(tag) }, "\u00D7"))))), this.inputVisible && (!this.max || this.modelValue.length < this.max) && (h("input", { key: '16c0936153b04ffb0ad4949f66c7994470b7fb91', ref: (el) => (this.inputRef = el), type: "text", class: "hb-input-tag__input", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, maxlength: this.maxlength, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur })), this.clearable && this.modelValue.length > 0 && !this.disabled && (h("span", { key: '9995f3650302013f402f8bd3878c5ce974dfbc00', class: "hb-input-tag__clear", onClick: this.handleClearAll }, "\u00D7"))));
+    }
+    static get is() { return "hb-input-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5C3A\u5BF8"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "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"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5360\u4F4D\u6587\u672C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u6700\u5927\u957F\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u6807\u7B7E\u6570\u91CF"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u53EF\u6E05\u7A7A"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "clearable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5BBD\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'info' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6807\u7B7E\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false
+            },
+            "closable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "\u662F\u5426\u53EF\u5173\u95ED"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closable",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "inputVisible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "\u8F93\u5165\u6846\u662F\u5426\u53EF\u89C1"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-visible",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {},
+            "isFocused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }, {
+                "method": "hbRemove",
+                "name": "hbRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u79FB\u9664\u6807\u7B7E\u65F6\u89E6\u53D1"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "hbInput",
+                "name": "hbInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=InputTag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputTag.js","sourceRoot":"","sources":["../../../src/components/InputTag/InputTag.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Element } from '@stencil/core';\n\n/**\n * InputTag 标签输入框组件\n * 通过回车或者标签关闭按钮添加/删除标签\n */\n@Component({\n  tag: 'hb-input-tag',\n  styleUrl: 'input-tag.css',\n  shadow: true,\n})\nexport class InputTag {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string[] = [];\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: 'large' | 'default' | 'small' = 'default';\n\n  /**\n   * 是否禁用\n   * @default false\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * 输入框占位文本\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 输入框最大长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最大标签数量\n   */\n  @Prop() max?: number;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 输入框宽度\n   */\n  @Prop() width?: string;\n\n  /**\n   * 标签类型\n   */\n  @Prop() type?: 'success' | 'info' | 'warning' | 'danger';\n\n  /**\n   * 是否可关闭\n   * @default true\n   */\n  @Prop() closable: boolean = true;\n\n  /**\n   * 输入框是否可见\n   * @default true\n   */\n  @Prop() inputVisible: boolean = true;\n\n  @State() inputValue: string = '';\n  @State() isFocused: boolean = false;\n\n  private inputRef?: HTMLInputElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string[]>;\n\n  /**\n   * 移除标签时触发\n   */\n  @Event() hbRemove: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement;\n    this.inputValue = target.value;\n    this.hbInput.emit(target.value);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' && this.inputValue.trim()) {\n      e.preventDefault();\n      this.addTag(this.inputValue.trim());\n    } else if (e.key === 'Backspace' && !this.inputValue && this.modelValue.length > 0) {\n      this.removeTag(this.modelValue[this.modelValue.length - 1]);\n    }\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    if (this.inputValue.trim()) {\n      this.addTag(this.inputValue.trim());\n    }\n  };\n\n  private addTag(tag: string) {\n    if (this.max && this.modelValue.length >= this.max) {\n      return;\n    }\n    \n    if (!this.modelValue.includes(tag)) {\n      const newValue = [...this.modelValue, tag];\n      this.modelValue = newValue;\n      this.inputValue = '';\n      this.hbChange.emit(newValue);\n      if (this.inputRef) {\n        this.inputRef.value = '';\n      }\n    }\n  }\n\n  private removeTag(tag: string) {\n    const newValue = this.modelValue.filter(t => t !== tag);\n    this.modelValue = newValue;\n    this.hbChange.emit(newValue);\n    this.hbRemove.emit(tag);\n  }\n\n  private handleClearAll = (e: Event) => {\n    e.stopPropagation();\n    this.modelValue = [];\n    this.hbChange.emit([]);\n  };\n\n  render() {\n    return (\n      <div\n        class={{\n          'hb-input-tag': true,\n          [`hb-input-tag--${this.size}`]: true,\n          'hb-input-tag--disabled': this.disabled,\n          'hb-input-tag--focused': this.isFocused,\n        }}\n        style={this.width ? { width: this.width } : undefined}\n      >\n        {this.modelValue.map((tag) => (\n          <span\n            class={{\n              'hb-input-tag__tag': true,\n              [`hb-input-tag__tag--${this.type}`]: !!this.type,\n            }}\n          >\n            <span class=\"hb-input-tag__tag-text\">{tag}</span>\n            {this.closable && (\n              <span\n                class=\"hb-input-tag__tag-close\"\n                onClick={() => this.removeTag(tag)}\n              >\n                ×\n              </span>\n            )}\n          </span>\n        ))}\n        {this.inputVisible && (!this.max || this.modelValue.length < this.max) && (\n          <input\n            ref={(el) => (this.inputRef = el)}\n            type=\"text\"\n            class=\"hb-input-tag__input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            onInput={this.handleInput}\n            onKeyDown={this.handleKeyDown}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        )}\n        {this.clearable && this.modelValue.length > 0 && !this.disabled && (\n          <span class=\"hb-input-tag__clear\" onClick={this.handleClearAll}>×</span>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}