huibo-ui 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { ComponentSize, hasInputValue, isClearVisible, sizeClassMap } from '../../utils/form-input-base';\n\n/**\n * Input 输入框组件\n * 通过鼠标或键盘输入字符\n */\n@Component({\n  tag: 'hb-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class Input {\n  @Element() el: HTMLElement;\n\n  /**\n   * 绑定值\n   */\n  @Prop({ mutable: true }) modelValue: string = '';\n\n  /**\n   * 输入框类型\n   */\n  @Prop() type: string = 'text';\n\n  /**\n   * 输入框尺寸\n   */\n  @Prop() size: ComponentSize = '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   */\n  @Prop() placeholder?: string;\n\n  /**\n   * 是否可清空\n   * @default false\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * 是否显示密码可见性切换\n   * @default false\n   */\n  @Prop() showPassword: boolean = false;\n\n  /**\n   * 是否显示字数统计\n   * @default false\n   */\n  @Prop() showWordLimit: boolean = false;\n\n  /**\n   * 最大输入长度\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * 最小输入长度\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * 原生 name 属性\n   */\n  @Prop() name?: string;\n\n  /**\n   * 原生 id 属性\n   */\n  @Prop() inputId?: string;\n\n  /**\n   * 原生 autocomplete 属性\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * 原生 autofocus 属性\n   */\n  @Prop() autofocus: boolean = false;\n\n  /**\n   * 输入框头部图标\n   */\n  @Prop() prefixIcon?: string;\n\n  /**\n   * 输入框尾部图标\n   */\n  @Prop() suffixIcon?: string;\n\n  /**\n   * 输入框行数，仅 type 为 'textarea' 时有效\n   */\n  @Prop() rows: number = 2;\n\n  /**\n   * 是否自适应内容高度，仅 type 为 'textarea' 时有效\n   */\n  @Prop() autosize: boolean | { minRows?: number; maxRows?: number } = false;\n\n  /**\n   * 是否调整 textarea 大小\n   */\n  @Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical';\n\n  @State() isFocused: boolean = false;\n  @State() showClear: boolean = false;\n  @State() passwordVisible: boolean = false;\n  @State() inputValue: string = '';\n\n  private inputRef?: HTMLInputElement | HTMLTextAreaElement;\n\n  /**\n   * 值改变事件\n   */\n  @Event() hbChange: EventEmitter<string>;\n\n  /**\n   * 输入事件\n   */\n  @Event() hbInput: EventEmitter<string>;\n\n  /**\n   * 聚焦事件\n   */\n  @Event() hbFocus: EventEmitter<FocusEvent>;\n\n  /**\n   * 失焦事件\n   */\n  @Event() hbBlur: EventEmitter<FocusEvent>;\n\n  /**\n   * 清空事件\n   */\n  @Event() hbClear: EventEmitter<void>;\n\n  @Watch('modelValue')\n  handleValueChange() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  componentDidLoad() {\n    this.inputValue = this.modelValue;\n    this.updateClearVisible();\n  }\n\n  private updateClearVisible() {\n    this.showClear = isClearVisible({\n      clearable: this.clearable,\n      disabled: this.disabled,\n      readonly: this.readonly,\n      hasValue: hasInputValue(this.inputValue),\n    });\n  }\n\n  private handleInput = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.inputValue = target.value;\n    this.modelValue = target.value;\n    this.updateClearVisible();\n    this.hbInput.emit(target.value);\n  };\n\n  private handleChange = (e: Event) => {\n    const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n    this.hbChange.emit(target.value);\n  };\n\n  private handleFocus = (e: FocusEvent) => {\n    this.isFocused = true;\n    this.updateClearVisible();\n    this.hbFocus.emit(e);\n  };\n\n  private handleBlur = (e: FocusEvent) => {\n    this.isFocused = false;\n    this.updateClearVisible();\n    this.hbBlur.emit(e);\n  };\n\n  private handleClear = (e: Event) => {\n    e.stopPropagation();\n    this.inputValue = '';\n    this.modelValue = '';\n    this.updateClearVisible();\n    this.hbClear.emit();\n    this.hbChange.emit('');\n    if (this.inputRef) {\n      this.inputRef.focus();\n    }\n  };\n\n  private togglePasswordVisible = () => {\n    this.passwordVisible = !this.passwordVisible;\n  };\n\n  private getInputType(): string {\n    if (this.type === 'password' && this.showPassword) {\n      return this.passwordVisible ? 'text' : 'password';\n    }\n    return this.type;\n  }\n\n  render() {\n    const isTextarea = this.type === 'textarea';\n    const InputTag = isTextarea ? 'textarea' : 'input';\n\n    return (\n      <div\n        class={{\n          ...sizeClassMap('hb-input', this.size),\n          'hb-input--disabled': this.disabled,\n          'hb-input--focused': this.isFocused,\n        }}\n      >\n        {this.prefixIcon && (\n          <span class=\"hb-input__prefix\">\n            <i class={this.prefixIcon}></i>\n          </span>\n        )}\n        <InputTag\n          ref={(el) => (this.inputRef = el)}\n          type={isTextarea ? undefined : this.getInputType()}\n          id={this.inputId}\n          name={this.name}\n          class=\"hb-input__inner\"\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          autocomplete={this.autocomplete}\n          autofocus={this.autofocus}\n          maxlength={this.maxlength}\n          minlength={this.minlength}\n          rows={isTextarea ? this.rows : undefined}\n          style={isTextarea && this.resize ? { resize: this.resize } : undefined}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n        {(this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (\n          <span class=\"hb-input__suffix\">\n            {this.showClear && (\n              <span class=\"hb-input__suffix-inner hb-input__clear\" onClick={this.handleClear}>\n                ×\n              </span>\n            )}\n            {this.type === 'password' && this.showPassword && (\n              <span class=\"hb-input__suffix-inner hb-input__password\" onClick={this.togglePasswordVisible}>\n                {this.passwordVisible ? '👁️' : '👁️‍🗨️'}\n              </span>\n            )}\n            {this.suffixIcon && (\n              <span class=\"hb-input__suffix-inner\">\n                <i class={this.suffixIcon}></i>\n              </span>\n            )}\n          </span>\n        )}\n        {this.showWordLimit && this.maxlength && (\n          <span class=\"hb-input__count\">\n            <span class=\"hb-input__count-inner\">\n              {this.inputValue.length} / {this.maxlength}\n            </span>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/Input/input.css

@@ -0,0 +1,144 @@
+:host {
+  display: inline-block;
+  position: relative;
+  --hb-input-font-size: 14px;
+  --hb-input-font-size-large: 16px;
+  --hb-input-font-size-small: 12px;
+  --hb-input-height: 32px;
+  --hb-input-height-large: 40px;
+  --hb-input-height-small: 24px;
+  --hb-input-border-color: var(--hb-border-color, #dcdfe6);
+  --hb-input-border-color-hover: var(--hb-color-primary);
+  --hb-input-bg-color: var(--hb-color-white, #ffffff);
+  --hb-input-text-color: var(--hb-color-text-regular, #606266);
+  --hb-input-placeholder-color: var(--hb-color-text-placeholder, #c0c4cc);
+  --hb-input-disabled-color: var(--hb-color-text-disabled, #c0c4cc);
+  --hb-input-disabled-bg-color: var(--hb-fill-color-light, #f5f7fa);
+}
+
+.hb-input {
+  position: relative;
+  font-size: var(--hb-input-font-size);
+  display: inline-block;
+  width: 100%;
+}
+
+.hb-input__inner {
+  -webkit-appearance: none;
+  background-color: var(--hb-input-bg-color);
+  background-image: none;
+  border-radius: 4px;
+  border: 1px solid var(--hb-input-border-color);
+  box-sizing: border-box;
+  color: var(--hb-input-text-color);
+  display: inline-block;
+  font-size: inherit;
+  height: var(--hb-input-height);
+  line-height: var(--hb-input-height);
+  outline: none;
+  padding: 0 15px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+}
+
+.hb-input__inner::placeholder {
+  color: var(--hb-input-placeholder-color);
+}
+
+.hb-input__inner:hover:not(:disabled) {
+  border-color: var(--hb-input-border-color-hover);
+}
+
+.hb-input__inner:focus {
+  border-color: var(--hb-input-border-color-hover);
+}
+
+.hb-input__inner:disabled {
+  background-color: var(--hb-input-disabled-bg-color);
+  border-color: var(--hb-input-border-color);
+  color: var(--hb-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.hb-input__inner[readonly] {
+  background-color: var(--hb-input-disabled-bg-color);
+  cursor: default;
+}
+
+.hb-input--small .hb-input__inner {
+  height: var(--hb-input-height-small);
+  line-height: var(--hb-input-height-small);
+  font-size: var(--hb-input-font-size-small);
+  padding: 0 12px;
+}
+
+.hb-input--large .hb-input__inner {
+  height: var(--hb-input-height-large);
+  line-height: var(--hb-input-height-large);
+  font-size: var(--hb-input-font-size-large);
+  padding: 0 18px;
+}
+
+.hb-input__prefix,
+.hb-input__suffix {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  color: var(--hb-input-placeholder-color);
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+}
+
+.hb-input__prefix {
+  left: 5px;
+}
+
+.hb-input__suffix {
+  right: 5px;
+}
+
+.hb-input__suffix-inner {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.hb-input__clear {
+  font-size: 16px;
+  color: var(--hb-input-placeholder-color);
+  transition: color 0.2s;
+}
+
+.hb-input__clear:hover {
+  color: var(--hb-input-text-color);
+}
+
+.hb-input__password {
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.hb-input__inner[type="textarea"] {
+  min-height: 60px;
+  padding: 5px 15px;
+  line-height: 1.5;
+  vertical-align: bottom;
+  resize: vertical;
+}
+
+.hb-input__count {
+  position: absolute;
+  bottom: 5px;
+  right: 10px;
+  font-size: 12px;
+  color: var(--hb-input-placeholder-color);
+}
+
+.hb-input__count-inner {
+  background-color: var(--hb-input-bg-color);
+  padding: 0 4px;
+}
+

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

@@ -0,0 +1,510 @@
+import { h } from "@stencil/core";
+/**
+ * InputNumber 数字输入框组件
+ * 仅允许输入标准的数字值，可定义范围
+ */
+export class InputNumber {
+    /**
+     * 绑定值
+     */
+    modelValue = 0;
+    /**
+     * 计数器尺寸
+     */
+    size = 'default';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否只读
+     * @default false
+     */
+    readonly = false;
+    /**
+     * 最小值
+     * @default -Infinity
+     */
+    min = -Infinity;
+    /**
+     * 最大值
+     * @default Infinity
+     */
+    max = Infinity;
+    /**
+     * 计数器步长
+     * @default 1
+     */
+    step = 1;
+    /**
+     * 精度
+     */
+    precision;
+    /**
+     * 是否只能输入 step 的倍数
+     * @default false
+     */
+    stepStrictly = false;
+    /**
+     * 是否使用控制按钮
+     * @default true
+     */
+    controls = true;
+    /**
+     * 控制按钮位置
+     */
+    controlsPosition = '';
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    inputId;
+    /**
+     * 原生 placeholder 属性
+     */
+    placeholder;
+    currentValue = 0;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 输入事件
+     */
+    hbInput;
+    componentDidLoad() {
+        this.currentValue = this.modelValue;
+    }
+    /** 受控模式：外部修改 modelValue 时同步内部 currentValue，保证 UI 与值一致 */
+    handleModelValueChange() {
+        this.currentValue = this.modelValue;
+    }
+    formatValue(value) {
+        if (this.precision !== undefined) {
+            return Number(value.toFixed(this.precision));
+        }
+        return value;
+    }
+    clampValue(value) {
+        let clamped = Math.max(this.min, Math.min(this.max, value));
+        if (this.stepStrictly) {
+            const step = this.step;
+            clamped = Math.round(clamped / step) * step;
+        }
+        return this.formatValue(clamped);
+    }
+    handleInput = (e) => {
+        const target = e.target;
+        const value = parseFloat(target.value);
+        if (isNaN(value)) {
+            this.currentValue = this.min;
+        }
+        else {
+            this.currentValue = this.clampValue(value);
+        }
+        this.modelValue = this.currentValue;
+        this.hbInput.emit(this.currentValue);
+    };
+    handleChange = () => {
+        this.hbChange.emit(this.currentValue);
+    };
+    increase = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const newValue = this.clampValue(this.currentValue + this.step);
+        this.currentValue = newValue;
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+    };
+    decrease = () => {
+        if (this.disabled || this.readonly)
+            return;
+        const newValue = this.clampValue(this.currentValue - this.step);
+        this.currentValue = newValue;
+        this.modelValue = newValue;
+        this.hbChange.emit(newValue);
+    };
+    render() {
+        return (h("div", { key: '490fe763a00f34486cbbe6502204433071a863eb', class: {
+                'hb-input-number': true,
+                [`hb-input-number--${this.size}`]: true,
+                'hb-input-number--disabled': this.disabled,
+                'hb-input-number--controls-right': this.controlsPosition === 'right',
+                'hb-input-number--without-controls': !this.controls,
+            } }, this.controls && this.controlsPosition !== 'right' && (h("span", { key: 'a43a038a8914dbff0c8b9759c04c74fa791f2e6c', class: {
+                'hb-input-number__decrease': true,
+                'hb-input-number__decrease--disabled': this.currentValue <= this.min,
+            }, onClick: this.decrease }, "\u2212")), h("input", { key: '83a7bb1d73a709e92f31044396fdb73daed77ea9', type: "number", id: this.inputId, name: this.name, class: "hb-input-number__inner", value: this.currentValue, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, min: this.min, max: this.max, step: this.step, onInput: this.handleInput, onChange: this.handleChange }), this.controls && this.controlsPosition === 'right' && (h("span", { key: 'e202c7b06c991550eb9a5cae441ead7d82231b0f', class: "hb-input-number__controls" }, h("span", { key: '876db137bb4539e93a1f7ccb08a2fb754722a7bf', class: {
+                'hb-input-number__increase': true,
+                'hb-input-number__increase--disabled': this.currentValue >= this.max,
+            }, onClick: this.increase }, "+"), h("span", { key: '98acd918f10a7f8d3c399aa60677eac231be503b', class: {
+                'hb-input-number__decrease': true,
+                'hb-input-number__decrease--disabled': this.currentValue <= this.min,
+            }, onClick: this.decrease }, "\u2212"))), this.controls && this.controlsPosition !== 'right' && (h("span", { key: '4befdfc2a0d7ac3af63027f0947f27d866fbe158', class: {
+                'hb-input-number__increase': true,
+                'hb-input-number__increase--disabled': this.currentValue >= this.max,
+            }, onClick: this.increase }, "+"))));
+    }
+    static get is() { return "hb-input-number"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input-number.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input-number.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'default' | 'small'",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8BA1\u6570\u5668\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"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u53EA\u8BFB"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "-Infinity"
+                        }],
+                    "text": "\u6700\u5C0F\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "-Infinity"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "Infinity"
+                        }],
+                    "text": "\u6700\u5927\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "Infinity"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "\u8BA1\u6570\u5668\u6B65\u957F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7CBE\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "precision",
+                "reflect": false
+            },
+            "stepStrictly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "\u662F\u5426\u53EA\u80FD\u8F93\u5165 step \u7684\u500D\u6570"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "step-strictly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "controls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "\u662F\u5426\u4F7F\u7528\u63A7\u5236\u6309\u94AE"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "controls",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "controlsPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'' | 'right'",
+                    "resolved": "\"\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u63A7\u5236\u6309\u94AE\u4F4D\u7F6E"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "controls-position",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F name \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F id \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "input-id",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F placeholder \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "hbChange",
+                "name": "hbChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "hbInput",
+                "name": "hbInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleModelValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=InputNumber.js.map