huibo-ui 0.3.0

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

@@ -0,0 +1,717 @@
+import { h } from "@stencil/core";
+import { hasInputValue, isClearVisible, sizeClassMap } from "../../utils/form-input-base";
+/**
+ * Input 输入框组件
+ * 通过鼠标或键盘输入字符
+ */
+export class Input {
+    el;
+    /**
+     * 绑定值
+     */
+    modelValue = '';
+    /**
+     * 输入框类型
+     */
+    type = 'text';
+    /**
+     * 输入框尺寸
+     */
+    size = 'default';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled = false;
+    /**
+     * 是否只读
+     * @default false
+     */
+    readonly = false;
+    /**
+     * 输入框占位文本
+     */
+    placeholder;
+    /**
+     * 是否可清空
+     * @default false
+     */
+    clearable = false;
+    /**
+     * 是否显示密码可见性切换
+     * @default false
+     */
+    showPassword = false;
+    /**
+     * 是否显示字数统计
+     * @default false
+     */
+    showWordLimit = false;
+    /**
+     * 最大输入长度
+     */
+    maxlength;
+    /**
+     * 最小输入长度
+     */
+    minlength;
+    /**
+     * 原生 name 属性
+     */
+    name;
+    /**
+     * 原生 id 属性
+     */
+    inputId;
+    /**
+     * 原生 autocomplete 属性
+     */
+    autocomplete;
+    /**
+     * 原生 autofocus 属性
+     */
+    autofocus = false;
+    /**
+     * 输入框头部图标
+     */
+    prefixIcon;
+    /**
+     * 输入框尾部图标
+     */
+    suffixIcon;
+    /**
+     * 输入框行数，仅 type 为 'textarea' 时有效
+     */
+    rows = 2;
+    /**
+     * 是否自适应内容高度，仅 type 为 'textarea' 时有效
+     */
+    autosize = false;
+    /**
+     * 是否调整 textarea 大小
+     */
+    resize;
+    isFocused = false;
+    showClear = false;
+    passwordVisible = false;
+    inputValue = '';
+    inputRef;
+    /**
+     * 值改变事件
+     */
+    hbChange;
+    /**
+     * 输入事件
+     */
+    hbInput;
+    /**
+     * 聚焦事件
+     */
+    hbFocus;
+    /**
+     * 失焦事件
+     */
+    hbBlur;
+    /**
+     * 清空事件
+     */
+    hbClear;
+    handleValueChange() {
+        this.inputValue = this.modelValue;
+        this.updateClearVisible();
+    }
+    componentDidLoad() {
+        this.inputValue = this.modelValue;
+        this.updateClearVisible();
+    }
+    updateClearVisible() {
+        this.showClear = isClearVisible({
+            clearable: this.clearable,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            hasValue: hasInputValue(this.inputValue),
+        });
+    }
+    handleInput = (e) => {
+        const target = e.target;
+        this.inputValue = target.value;
+        this.modelValue = target.value;
+        this.updateClearVisible();
+        this.hbInput.emit(target.value);
+    };
+    handleChange = (e) => {
+        const target = e.target;
+        this.hbChange.emit(target.value);
+    };
+    handleFocus = (e) => {
+        this.isFocused = true;
+        this.updateClearVisible();
+        this.hbFocus.emit(e);
+    };
+    handleBlur = (e) => {
+        this.isFocused = false;
+        this.updateClearVisible();
+        this.hbBlur.emit(e);
+    };
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.inputValue = '';
+        this.modelValue = '';
+        this.updateClearVisible();
+        this.hbClear.emit();
+        this.hbChange.emit('');
+        if (this.inputRef) {
+            this.inputRef.focus();
+        }
+    };
+    togglePasswordVisible = () => {
+        this.passwordVisible = !this.passwordVisible;
+    };
+    getInputType() {
+        if (this.type === 'password' && this.showPassword) {
+            return this.passwordVisible ? 'text' : 'password';
+        }
+        return this.type;
+    }
+    render() {
+        const isTextarea = this.type === 'textarea';
+        const InputTag = isTextarea ? 'textarea' : 'input';
+        return (h("div", { key: '22b51bd1c9e0c3086ed167eea57f3b5818685785', class: {
+                ...sizeClassMap('hb-input', this.size),
+                'hb-input--disabled': this.disabled,
+                'hb-input--focused': this.isFocused,
+            } }, this.prefixIcon && (h("span", { key: 'ef3b02d947c45ac282814a0e2e4909f8473469eb', class: "hb-input__prefix" }, h("i", { key: '88f95312bf9aa489d5d27a1f701b2eadc794d7cf', class: this.prefixIcon }))), h(InputTag, { key: 'fe5de1f3dcf5441aebb5bcc943c64d59221211d7', ref: (el) => (this.inputRef = el), type: isTextarea ? undefined : this.getInputType(), id: this.inputId, name: this.name, class: "hb-input__inner", placeholder: this.placeholder, value: this.inputValue, disabled: this.disabled, readonly: this.readonly, autocomplete: this.autocomplete, autofocus: this.autofocus, maxlength: this.maxlength, minlength: this.minlength, rows: isTextarea ? this.rows : undefined, style: isTextarea && this.resize ? { resize: this.resize } : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), (this.showClear || this.suffixIcon || (this.type === 'password' && this.showPassword)) && (h("span", { key: 'db106e66989483c48171aad758cd5a443ef7670a', class: "hb-input__suffix" }, this.showClear && (h("span", { key: '3fa676f9860aa3018247c9d61bad432afdea4345', class: "hb-input__suffix-inner hb-input__clear", onClick: this.handleClear }, "\u00D7")), this.type === 'password' && this.showPassword && (h("span", { key: '8911301b65aa3435f7f3b933b9b8de1b055c266e', class: "hb-input__suffix-inner hb-input__password", onClick: this.togglePasswordVisible }, this.passwordVisible ? '👁️' : '👁️‍🗨️')), this.suffixIcon && (h("span", { key: '14fa885ec429419525ea5cd550fc7d9cec9f3ee4', class: "hb-input__suffix-inner" }, h("i", { key: '36995c1f4e5d2c258170e7ad8a012e586d905e62', class: this.suffixIcon }))))), this.showWordLimit && this.maxlength && (h("span", { key: '383d7d25fbbb77dad3df3ebbbf4e0b1fc504a4b4', class: "hb-input__count" }, h("span", { key: '564d4a6ac0feae0be61378f52aae3b22872566fb', class: "hb-input__count-inner" }, this.inputValue.length, " / ", this.maxlength)))));
+    }
+    static get is() { return "hb-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "modelValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u7ED1\u5B9A\u503C"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "model-value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u7C7B\u578B"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentSize",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {
+                        "ComponentSize": {
+                            "location": "import",
+                            "path": "../../utils/form-input-base",
+                            "id": "src/utils/form-input-base.ts::ComponentSize"
+                        }
+                    }
+                },
+                "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"
+            },
+            "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"
+            },
+            "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
+            },
+            "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"
+            },
+            "showPassword": {
+                "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\u5BC6\u7801\u53EF\u89C1\u6027\u5207\u6362"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-password",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showWordLimit": {
+                "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\u5B57\u6570\u7EDF\u8BA1"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-word-limit",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5927\u8F93\u5165\u957F\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6700\u5C0F\u8F93\u5165\u957F\u5EA6"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "minlength",
+                "reflect": 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
+            },
+            "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
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F autocomplete \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete",
+                "reflect": false
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u539F\u751F autofocus \u5C5E\u6027"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autofocus",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "prefixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prefix-icon",
+                "reflect": false
+            },
+            "suffixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suffix-icon",
+                "reflect": false
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u6846\u884C\u6570\uFF0C\u4EC5 type \u4E3A 'textarea' \u65F6\u6709\u6548"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false,
+                "defaultValue": "2"
+            },
+            "autosize": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | { minRows?: number; maxRows?: number }",
+                    "resolved": "boolean | { minRows?: number; maxRows?: number; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u4EC5 type \u4E3A 'textarea' \u65F6\u6709\u6548"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autosize",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'both' | 'horizontal' | 'vertical'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u662F\u5426\u8C03\u6574 textarea \u5927\u5C0F"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "resize",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isFocused": {},
+            "showClear": {},
+            "passwordVisible": {},
+            "inputValue": {}
+        };
+    }
+    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": "hbInput",
+                "name": "hbInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u8F93\u5165\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "hbFocus",
+                "name": "hbFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u805A\u7126\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "hbBlur",
+                "name": "hbBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5931\u7126\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "hbClear",
+                "name": "hbClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u6E05\u7A7A\u4E8B\u4EF6"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "modelValue",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=Input.js.map