mdui 1.0.2 → 2.0.0

package/components/text-field/index.js

@@ -0,0 +1,752 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
+import { animate } from '@lit-labs/motion';
+import { $ } from '@mdui/jq/$.js';
+import '@mdui/jq/methods/css.js';
+import { FormController, formResets } from '@mdui/shared/controllers/form.js';
+import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
+import { defaultValue } from '@mdui/shared/decorators/default-value.js';
+import { watch } from '@mdui/shared/decorators/watch.js';
+import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
+import { emit } from '@mdui/shared/helpers/event.js';
+import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
+import { observeResize } from '@mdui/shared/helpers/observeResize.js';
+import { nothingTemplate } from '@mdui/shared/helpers/template.js';
+import '@mdui/shared/icons/cancel--outlined.js';
+import '@mdui/shared/icons/error.js';
+import '@mdui/shared/icons/visibility-off.js';
+import '@mdui/shared/icons/visibility.js';
+import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
+import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
+import '../button-icon.js';
+import '../icon.js';
+import { style } from './style.js';
+/**
+ * @summary 文本框组件
+ *
+ * ```html
+ * <mdui-text-field label="Text Field"></mdui-text-field>
+ * ```
+ *
+ * @event focus - 获得焦点时触发
+ * @event blur - 失去焦点时触发
+ * @event change - 在文本框的值变更，且失去焦点时触发
+ * @event input - 在文本框的值变更时触发
+ * @event invalid - 表单字段验证不通过时触发
+ * @event clear - 在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空文本框
+ *
+ * @slot icon - 左侧图标
+ * @slot end-icon - 右侧图标
+ * @slot error-icon - 验证失败状态的右侧图标
+ * @slot prefix - 左侧文本
+ * @slot suffix - 右侧文本
+ * @slot clear-button - 清空按钮
+ * @slot clear-icon - 清空按钮中的图标
+ * @slot toggle-password-button - 显示密码状态下，密码显示切换按钮中的图标
+ * @slot show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
+ * @slot hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @slot helper - 底部的帮助文本
+ *
+ * @csspart container - 文本框容器
+ * @csspart icon - 左侧图标
+ * @csspart end-icon - 右侧图标
+ * @csspart error-icon - 验证失败状态的右侧图标
+ * @csspart prefix - 左侧文本
+ * @csspart suffix - 右侧文本
+ * @csspart label - 上方的标签文本
+ * @csspart input - 内部的 `<input>` 或 `<textarea>` 元素
+ * @csspart clear-button - 清空按钮
+ * @csspart clear-icon - 清空按钮中的图标
+ * @csspart toggle-password-button - 密码显示切换按钮
+ * @csspart show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
+ * @csspart hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @csspart supporting - 底部辅助信息容器，包括 helper、error、counter
+ * @csspart helper - 底部的帮助文本
+ * @csspart error - 底部的错误描述文本
+ * @csspart counter - 底部右侧的字数统计
+ */
+export let TextField = class TextField extends FocusableMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * 文本框形状。默认为 `filled`。可选值为：
+         *
+         * * `filled`：带背景色的文本框，视觉效果较强
+         * * `outlined`：带边框的文本框，视觉效果较弱
+         */
+        this.variant = 'filled';
+        /**
+         * 文本框输入类型。默认为 `text`。可选值为：
+         *
+         * * `text`：默认值。文本字段
+         * * `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘
+         * * `password`：用于输入密码，其值会被遮盖
+         * * `url`：用于输入 URL，会验证 URL 格式。在支持动态键盘的设备上有相应的键盘
+         * * `email`：用于输入邮箱地址，会验证邮箱格式。在支持动态键盘的设备上有相应的键盘
+         * * `search`：用于搜索框。拥有动态键盘的设备上的回车图标会变成搜索图标
+         * * `tel`：用于输入电话号码。拥有动态键盘的设备上会显示电话数字键盘
+         * * `hidden`：隐藏该控件，但其值仍会提交到服务器
+         * * `date`：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮
+         * * `datetime-local`：输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮
+         * * `month`：输入年和月的控件，没有时区
+         * * `time`：用于输入时间的控件，不包括时区
+         * * `week`：用于输入以年和周数组成的日期，不带时区
+         */
+        this.type = 'text';
+        /**
+         * 文本框名称，将与表单数据一起提交
+         */
+        this.name = '';
+        /**
+         * 文本框的值，将与表单数据一起提交
+         */
+        this.value = '';
+        /**
+         * 默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置
+         */
+        this.defaultValue = '';
+        /**
+         * 是否仅在获得焦点时，显示底部帮助文本
+         */
+        this.helperOnFocus = false;
+        /**
+         * 是否可清空文本框
+         */
+        this.clearable = false;
+        /**
+         * 文本是否右对齐
+         */
+        this.endAligned = false;
+        /**
+         * 是否为只读
+         */
+        this.readonly = false;
+        /**
+         * 是否为禁用状态
+         */
+        this.disabled = false;
+        /**
+         * 提交表单时，是否必须填写该字段
+         */
+        this.required = false;
+        /**
+         * 是否根据输入的内容自动调整文本框高度
+         */
+        this.autosize = false;
+        /**
+         * 是否显示字数统计。必须指定了 `maxlength` 时，该参数才有效
+         */
+        this.counter = false;
+        /**
+         * `type` 为 `password` 时，设置该属性会添加一个切换按钮，点击时可在密文和明文之间切换
+         */
+        this.togglePassword = false;
+        /**
+         * 启用拼写检查
+         */
+        this.spellcheck = false;
+        /**
+         * 是否验证未通过
+         *
+         * 该验证为浏览器原生验证 API，基于 `type`、`required`、`minlength`、`maxlength` 及 `pattern` 等属性的验证结果
+         */
+        this.invalid = false;
+        /**
+         * 该属性设置为 true 时，则在样式上为 text-field 赋予 invalid 的状态。实际是否验证通过仍需根据 invalid 属性判断
+         * 该属性仅供 mdui 内部使用，当前 select 组件使用了该属性
+         */
+        this.invalidStyle = false;
+        /**
+         * 该属性设置为 true 时，则在样式上为 text-field 赋予聚焦状态。实际是否聚焦仍然由 focusableMixin 控制
+         * 该属性仅供 mdui 内部使用，当前 select 组件使用了该属性
+         */
+        this.focusedStyle = false;
+        this.isPasswordVisible = false;
+        this.hasValue = false;
+        /**
+         * 通过该属性传入了错误文案时，会优先显示该文案。需要配合 invalid=true 或 invalidStyle=true 使用
+         * 当前仅供 select 组件使用
+         */
+        this.error = '';
+        this.inputRef = createRef();
+        this.formController = new FormController(this);
+        this.hasSlotController = new HasSlotController(this, 'icon', 'end-icon', 'helper', 'input');
+        /**
+         * 该属性设为 true 时，即使设置了 readonly，仍可以显示 clearable
+         * 当前仅供 select 组件使用
+         */
+        this.readonlyButClearable = false;
+    }
+    /**
+     * 表单验证状态对象
+     */
+    get validity() {
+        return this.inputRef.value.validity;
+    }
+    /**
+     * 表单验证的错误提示信息
+     */
+    get validationMessage() {
+        return this.inputRef.value.validationMessage;
+    }
+    /**
+     * 获取当前值，并转换为 `number` 类型；或设置一个 `number` 类型的值。
+     * 如果值无法被转换为 `number` 类型，则会返回 `NaN`。
+     */
+    get valueAsNumber() {
+        var _a, _b;
+        return ((_b = (_a = this.inputRef.value) === null || _a === void 0 ? void 0 : _a.valueAsNumber) !== null && _b !== void 0 ? _b : parseFloat(this.value));
+    }
+    set valueAsNumber(newValue) {
+        const input = document.createElement('input');
+        input.type = 'number';
+        input.valueAsNumber = newValue;
+        this.value = input.value;
+    }
+    get focusElement() {
+        return this.inputRef.value;
+    }
+    get focusDisabled() {
+        return this.disabled;
+    }
+    /**
+     * 是否显示聚焦状态样式
+     */
+    get isFocusedStyle() {
+        // @ts-ignore
+        return this.focused || this.focusedStyle;
+    }
+    /**
+     * 是否渲染为 textarea。为 false 时渲染为 input
+     */
+    get isTextarea() {
+        return (this.rows && this.rows > 1) || this.autosize;
+    }
+    onDisabledChange() {
+        // 禁用状态始终为验证通过，所以 disabled 变更时需要重新校验
+        this.inputRef.value.disabled = this.disabled;
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    async onValueChange() {
+        var _a;
+        this.hasValue = !!this.value;
+        if (this.hasUpdated) {
+            await this.updateComplete;
+            // reset 引起的值变更，不执行验证；直接修改值引起的变更，需要进行验证
+            const form = this.formController.getForm();
+            if (form && ((_a = formResets.get(form)) === null || _a === void 0 ? void 0 : _a.has(this))) {
+                this.invalid = false;
+                formResets.get(form).delete(this);
+            }
+            else {
+                this.invalid = !this.inputRef.value.checkValidity();
+            }
+        }
+    }
+    onRowsChange() {
+        this.setTextareaHeight();
+    }
+    async onMaxRowsChange() {
+        if (!this.autosize) {
+            return;
+        }
+        // 设置最大高度，为 line-height * maxRows + padding-top + padding-bottom
+        const setMaxHeight = () => {
+            var _a;
+            const $input = $(this.inputRef.value);
+            $input.css('max-height', parseFloat($input.css('line-height')) * ((_a = this.maxRows) !== null && _a !== void 0 ? _a : 1) +
+                parseFloat($input.css('padding-top')) +
+                parseFloat($input.css('padding-bottom')));
+        };
+        if (this.hasUpdated) {
+            setMaxHeight();
+        }
+        else {
+            await this.updateComplete;
+            setMaxHeight();
+        }
+    }
+    async onMinRowsChange() {
+        if (!this.autosize) {
+            return;
+        }
+        // 设置最小高度，为 line-height * minRows + padding-top + padding-bottom
+        const setMinHeight = () => {
+            var _a;
+            const $input = $(this.inputRef.value);
+            $input.css('min-height', parseFloat($input.css('line-height')) * ((_a = this.minRows) !== null && _a !== void 0 ? _a : 1) +
+                parseFloat($input.css('padding-top')) +
+                parseFloat($input.css('padding-bottom')));
+        };
+        if (this.hasUpdated) {
+            setMinHeight();
+        }
+        else {
+            await this.updateComplete;
+            setMinHeight();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
+            this.setTextareaHeight();
+            this.observeResize = observeResize(this.inputRef.value, () => this.setTextareaHeight());
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.observeResize) === null || _a === void 0 ? void 0 : _a.unobserve();
+    }
+    /**
+     * 选中文本框中的文本
+     */
+    select() {
+        this.inputRef.value.select();
+    }
+    /**
+     * 选中文本框中特定范围的内容
+     *
+     * @param start 被选中的第一个字符的位置索引，从 `0` 开始。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引
+     * @param end 被选中的最后一个字符的*下一个*位置索引。如果这个值比元素的 `value` 长度还大，则会被看作 `value` 最后一个位置的索引
+     * @param direction 一个表示选择方向的字符串，可能的值有：`forward`、`backward`、`none`
+     */
+    setSelectionRange(start, end, direction = 'none') {
+        this.inputRef.value.setSelectionRange(start, end, direction);
+    }
+    /**
+     * 把文本框中特定范围的文本替换成一个新的文本
+     * @param replacement 要插入的字符串
+     * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引
+     * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引
+     * @param selectMode 文本被替换后，选取的状态。可选值为：
+     * * `select`：选择新插入的文本
+     * * `start`：将光标移动到新插入的文本的起始位置
+     * * `end`：将光标移动到新插入的文本的结束位置
+     * * `preserve`：默认值。尝试保留选取
+     */
+    setRangeText(replacement, start, end, selectMode = 'preserve') {
+        this.inputRef.value.setRangeText(replacement, start, end, selectMode);
+        if (this.value !== this.inputRef.value.value) {
+            this.value = this.inputRef.value.value;
+            this.setTextareaHeight();
+            emit(this, 'input');
+            emit(this, 'change');
+        }
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     */
+    checkValidity() {
+        const valid = this.inputRef.value.checkValidity();
+        if (!valid) {
+            emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+        }
+        return valid;
+    }
+    /**
+     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     *
+     * 验证未通过时，还将在组件上显示未通过的提示。
+     */
+    reportValidity() {
+        this.invalid = !this.inputRef.value.reportValidity();
+        if (this.invalid) {
+            emit(this, 'invalid', {
+                bubbles: false,
+                cancelable: true,
+                composed: false,
+            });
+            this.focus();
+        }
+        return !this.invalid;
+    }
+    /**
+     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     *
+     * @param message 自定义的提示文本
+     */
+    setCustomValidity(message) {
+        this.inputRef.value.setCustomValidity(message);
+        this.invalid = !this.inputRef.value.checkValidity();
+    }
+    render() {
+        const hasIcon = !!this.icon || this.hasSlotController.test('icon');
+        const hasEndIcon = !!this.endIcon || this.hasSlotController.test('end-icon');
+        const hasErrorIcon = this.invalid || this.invalidStyle;
+        const hasHelper = !!this.helper || this.hasSlotController.test('helper');
+        const hasError = hasErrorIcon && !!(this.error || this.inputRef.value.validationMessage);
+        const hasCounter = this.counter && !!this.maxlength;
+        // 存在 input slot 时，隐藏组件内部的 .input 元素，使用 slot 代替
+        const hasInputSlot = this.hasSlotController.test('input');
+        const className = classMap({
+            container: true,
+            'has-value': this.hasValue,
+            'has-icon': hasIcon,
+            'has-end-icon': hasEndIcon,
+            'has-error-icon': hasErrorIcon,
+            'is-firefox': navigator.userAgent.includes('Firefox'),
+        });
+        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea
+            ? this.renderTextArea(hasInputSlot)
+            : this.renderInput(hasInputSlot)} ${when(hasInputSlot, () => html `<slot name="input" class="input"></slot>`)}</div>${this.renderClearButton()}${this.renderTogglePasswordButton()} ${this.renderSuffix(hasErrorIcon)}</div>${when(hasError || hasHelper || hasCounter, () => html `<div part="supporting" class="supporting">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
+    }
+    onChange() {
+        this.value = this.inputRef.value.value;
+        if (this.isTextarea) {
+            this.setTextareaHeight();
+        }
+        emit(this, 'change');
+    }
+    onClear(event) {
+        this.value = '';
+        emit(this, 'clear');
+        emit(this, 'input');
+        emit(this, 'change');
+        this.focus();
+        event.stopPropagation();
+    }
+    onInput() {
+        this.value = this.inputRef.value.value;
+        if (this.isTextarea) {
+            this.setTextareaHeight();
+        }
+        emit(this, 'input');
+    }
+    onInvalid(event) {
+        event.preventDefault();
+    }
+    onKeyDown(event) {
+        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+        // 聚焦状态按下回车时，提交表单。可以在 keydown 事件中使用 event.preventDefault() 来取消提交表单
+        if (event.key === 'Enter' && !hasModifier) {
+            setTimeout(() => {
+                if (!event.defaultPrevented) {
+                    this.formController.submit();
+                }
+            });
+        }
+    }
+    /**
+     * textarea 不支持 pattern 属性，所以在 keyup 时执行验证
+     */
+    onTextAreaKeyUp() {
+        if (this.pattern) {
+            const patternRegex = new RegExp(this.pattern);
+            const hasError = this.value && !this.value.match(patternRegex);
+            this.setCustomValidity(hasError ? '请与请求的格式匹配。' : '');
+        }
+    }
+    onTogglePassword() {
+        this.isPasswordVisible = !this.isPasswordVisible;
+    }
+    setTextareaHeight() {
+        if (this.autosize) {
+            this.inputRef.value.style.height = 'auto';
+            this.inputRef.value.style.height = `${this.inputRef.value.scrollHeight}px`;
+        }
+        else {
+            this.inputRef.value.style.height = undefined;
+        }
+    }
+    renderLabel() {
+        return this.label
+            ? html `<label part="label" class="label" ${animate({
+                keyframeOptions: {
+                    duration: getDuration(this, 'short4'),
+                    easing: getEasing(this, 'standard'),
+                },
+            })}>${this.label}</label>`
+            : nothingTemplate;
+    }
+    renderPrefix() {
+        return html `<slot name="icon" part="icon" class="icon">${this.icon
+            ? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
+            : nothingTemplate}</slot><slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
+    }
+    renderSuffix(hasErrorIcon) {
+        return html `<slot name="suffix" part="suffix" class="suffix">${this.suffix}</slot>${hasErrorIcon
+            ? html `<slot name="error-icon" part="error-icon" class="right-icon">${this.errorIcon
+                ? html `<mdui-icon name="${this.errorIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-error class="i"></mdui-icon-error>`}</slot>`
+            : html `<slot name="end-icon" part="end-icon" class="end-icon right-icon">${this.endIcon
+                ? html `<mdui-icon name="${this.endIcon}" class="i"></mdui-icon>`
+                : nothingTemplate}</slot>`}`;
+    }
+    renderClearButton() {
+        const hasClearButton = this.clearable &&
+            !this.disabled &&
+            (!this.readonly || this.readonlyButClearable) &&
+            (typeof this.value === 'number' || this.value.length > 0);
+        return when(hasClearButton, () => html `<slot name="clear-button" part="clear-button" class="right-icon" @click="${this.onClear}"><mdui-button-icon tabindex="-1"><slot name="clear-icon" part="clear-icon">${this.clearIcon
+            ? html `<mdui-icon name="${this.clearIcon}" class="i"></mdui-icon>`
+            : html `<mdui-icon-cancel--outlined class="i"></mdui-icon-cancel--outlined>`}</slot></mdui-button-icon></slot>`);
+    }
+    renderTogglePasswordButton() {
+        const hasTogglePasswordButton = this.type === 'password' && this.togglePassword && !this.disabled;
+        return when(hasTogglePasswordButton, () => html `<slot name="toggle-password-button" part="toggle-password-button" class="right-icon" @click="${this.onTogglePassword}"><mdui-button-icon tabindex="-1">${this.isPasswordVisible
+            ? html `<slot name="show-password-icon" part="show-password-icon">${this.showPasswordIcon
+                ? html `<mdui-icon name="${this.showPasswordIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-visibility-off class="i"></mdui-icon-visibility-off>`}</slot>`
+            : html `<slot name="hide-password-icon" part="hide-password-icon">${this.hidePasswordIcon
+                ? html `<mdui-icon name="${this.hidePasswordIcon}" class="i"></mdui-icon>`
+                : html `<mdui-icon-visibility class="i"></mdui-icon-visibility>`}</slot>`}</mdui-button-icon></slot>`);
+    }
+    renderInput(hasInputSlot) {
+        return html `<input ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" type="${this.type === 'password' && this.isPasswordVisible
+            ? 'text'
+            : this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(
+        // @ts-ignore
+        !this.label || this.isFocusedStyle || this.hasValue
+            ? this.placeholder
+            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${ifDefined(this.type === 'password' ? 'off' : this.autocomplete)}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
+    }
+    renderTextArea(hasInputSlot) {
+        var _a;
+        return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(
+        // @ts-ignore
+        !this.label || this.isFocusedStyle || this.hasValue
+            ? this.placeholder
+            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${(_a = this.rows) !== null && _a !== void 0 ? _a : 1}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}" @keyup="${this.onTextAreaKeyUp}"></textarea>`;
+    }
+    /**
+     * @param hasError 是否包含错误提示
+     * @param hasHelper 是否含 helper 属性或 helper slot
+     */
+    renderHelper(hasError, hasHelper) {
+        return hasError
+            ? html `<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
+            : hasHelper
+                ? html `<slot name="helper" part="helper" class="helper">${this.helper}</slot>`
+                : // 右边有 counter，需要占位
+                    html `<span></span>`;
+    }
+    renderCounter(hasCounter) {
+        return hasCounter
+            ? html `<div part="counter" class="counter">${this.value.length}/${this.maxlength}</div>`
+            : nothingTemplate;
+    }
+};
+TextField.styles = [componentStyle, style];
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "name", void 0);
+__decorate([
+    property()
+], TextField.prototype, "value", void 0);
+__decorate([
+    defaultValue()
+], TextField.prototype, "defaultValue", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "helper", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'helper-on-focus',
+    })
+], TextField.prototype, "helperOnFocus", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "clearable", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'clear-icon' })
+], TextField.prototype, "clearIcon", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'end-aligned',
+    })
+], TextField.prototype, "endAligned", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "prefix", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "suffix", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "icon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'end-icon' })
+], TextField.prototype, "endIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'error-icon' })
+], TextField.prototype, "errorIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "form", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "readonly", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "required", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TextField.prototype, "rows", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "autosize", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'min-rows' })
+], TextField.prototype, "minRows", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'max-rows' })
+], TextField.prototype, "maxRows", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TextField.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TextField.prototype, "maxlength", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "counter", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TextField.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TextField.prototype, "max", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], TextField.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "pattern", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'toggle-password',
+    })
+], TextField.prototype, "togglePassword", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'show-password-icon' })
+], TextField.prototype, "showPasswordIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'hide-password-icon' })
+], TextField.prototype, "hidePasswordIcon", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "autocorrect", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "autocomplete", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "enterkeyhint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, converter: booleanConverter })
+], TextField.prototype, "spellcheck", void 0);
+__decorate([
+    property({ reflect: true })
+], TextField.prototype, "inputmode", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+    })
+], TextField.prototype, "invalid", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'invalid-style',
+    })
+], TextField.prototype, "invalidStyle", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+        converter: booleanConverter,
+        attribute: 'focused-style',
+    })
+], TextField.prototype, "focusedStyle", void 0);
+__decorate([
+    state()
+], TextField.prototype, "isPasswordVisible", void 0);
+__decorate([
+    state()
+], TextField.prototype, "hasValue", void 0);
+__decorate([
+    state()
+], TextField.prototype, "error", void 0);
+__decorate([
+    watch('disabled', true)
+], TextField.prototype, "onDisabledChange", null);
+__decorate([
+    watch('value')
+], TextField.prototype, "onValueChange", null);
+__decorate([
+    watch('rows', true)
+], TextField.prototype, "onRowsChange", null);
+__decorate([
+    watch('maxRows')
+], TextField.prototype, "onMaxRowsChange", null);
+__decorate([
+    watch('minRows')
+], TextField.prototype, "onMinRowsChange", null);
+TextField = __decorate([
+    customElement('mdui-text-field')
+], TextField);