mdui 2.0.3 → 2.0.5

package/components/text-field/index.js

@@ -48,9 +48,9 @@ import { style } from './style.js';
  * @slot suffix - 右侧文本
  * @slot clear-button - 清空按钮
  * @slot clear-icon - 清空按钮中的图标
- * @slot toggle-password-button - 显示密码状态下，密码显示切换按钮中的图标
- * @slot show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @slot hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @slot toggle-password-button - 密码显示状态切换按钮
+ * @slot show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @slot hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @slot helper - 底部的帮助文本
  *
  * @csspart container - 文本框容器
@@ -63,9 +63,9 @@ import { style } from './style.js';
  * @csspart input - 内部的 `<input>` 或 `<textarea>` 元素
  * @csspart clear-button - 清空按钮
  * @csspart clear-icon - 清空按钮中的图标
- * @csspart toggle-password-button - 密码显示切换按钮
- * @csspart show-password-icon - 显示密码状态下，密码显示切换按钮中的图标
- * @csspart hide-password-icon - 隐藏密码状态下，密码显示切换按钮中的图标
+ * @csspart toggle-password-button - 密码显示状态切换按钮
+ * @csspart show-password-icon - 显示密码状态下，密码显示状态切换按钮中的图标
+ * @csspart hide-password-icon - 隐藏密码状态下，密码显示状态切换按钮中的图标
  * @csspart supporting - 底部辅助信息容器，包括 helper、error、counter
  * @csspart helper - 底部的帮助文本
  * @csspart error - 底部的错误描述文本
@@ -75,14 +75,14 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
     constructor() {
         super(...arguments);
         /**
-         * 文本框形状。默认为 `filled`。可选值为：
+         * 文本框的形状。默认为 `filled`。可选值包括：
          *
          * * `filled`：带背景色的文本框，视觉效果较强
          * * `outlined`：带边框的文本框，视觉效果较弱
          */
         this.variant = 'filled';
         /**
-         * 文本框输入类型。默认为 `text`。可选值为：
+         * 文本框输入类型。默认为 `text`。可选值包括：
          *
          * * `text`：默认值。文本字段
          * * `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘
@@ -112,23 +112,23 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
          */
         this.defaultValue = '';
         /**
-         * 是否仅在获得焦点时，显示底部帮助文本
+         * 是否仅在获得焦点时，显示底部的帮助文本
          */
         this.helperOnFocus = false;
         /**
-         * 是否可清空文本框
+         * 是否可清空文本框内容
          */
         this.clearable = false;
         /**
-         * 文本是否右对齐
+         * 是否将文本右对齐
          */
         this.endAligned = false;
         /**
-         * 是否为只读
+         * 是否为只读模式
          */
         this.readonly = false;
         /**
-         * 是否为禁用状态
+         * 是否禁用输入框
          */
         this.disabled = false;
         /**
@@ -136,19 +136,19 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
          */
         this.required = false;
         /**
-         * 是否根据输入的内容自动调整文本框高度
+         * 是否根据输入内容自动调整文本框高度
          */
         this.autosize = false;
         /**
-         * 是否显示字数统计。必须指定了 `maxlength` 时，该参数才有效
+         * 是否显示字数统计，只在 `maxlength` 被指定时有效
          */
         this.counter = false;
         /**
-         * `type` 为 `password` 时，设置该属性会添加一个切换按钮，点击时可在密文和明文之间切换
+         * `type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换
          */
         this.togglePassword = false;
         /**
-         * 启用拼写检查
+         * 是否启用拼写检查
          */
         this.spellcheck = false;
         /**
@@ -184,13 +184,13 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
         this.readonlyButClearable = false;
     }
     /**
-     * 表单验证状态对象
+     * 表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)
      */
     get validity() {
         return this.inputRef.value.validity;
     }
     /**
-     * 表单验证的错误提示信息
+     * 如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串
      */
     get validationMessage() {
         return this.inputRef.value.validationMessage;
@@ -298,7 +298,7 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
         this.inputRef.value.setSelectionRange(start, end, direction);
     }
     /**
-     * 把文本框中特定范围的文本替换成一个新的文本
+     * 将文本框中特定范围的文本替换为新的文本
      * @param replacement 要插入的字符串
      * @param start 要替换的字符的起止位置的索引。默认为当前用户选中的字符的起始位置的索引
      * @param end 要替换的字符的结束位置的索引。默认为当前用户选中的字符的结束位置的索引
@@ -318,7 +318,7 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
         }
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`
      */
     checkValidity() {
         const valid = this.inputRef.value.checkValidity();
@@ -332,9 +332,9 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
         return valid;
     }
     /**
-     * 检查表单字段是否验证通过。若未通过则返回 `false`，并触发 `invalid` 事件；若验证通过，则返回 `true`。
+     * 检查表单字段是否通过验证。如果未通过，返回 `false` 并触发 `invalid` 事件；如果通过，返回 `true`。
      *
-     * 验证未通过时，还将在组件上显示未通过的提示。
+     * 如果验证未通过，还会在组件上显示验证失败的提示。
      */
     reportValidity() {
         this.invalid = !this.inputRef.value.reportValidity();
@@ -349,9 +349,9 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
         return !this.invalid;
     }
     /**
-     * 设置自定义的错误提示文本。只要文本不为空，则表示字段验证未通过
+     * 设置自定义的错误提示文本。只要这个文本不为空，就表示字段未通过验证
      *
-     * @param message 自定义的提示文本
+     * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
         this.inputRef.value.setCustomValidity(message);
@@ -384,9 +384,25 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
             'is-firefox': navigator.userAgent.includes('Firefox'),
             ...invalidClassNameObj,
         });
-        return html `<div part="container" class="${className}">${this.renderPrefix()}<div class="input-container">${this.renderLabel()} ${this.isTextarea
+        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="${classMap({ supporting: true, ...invalidClassNameObj })}">${this.renderHelper(hasError, hasHelper)} ${this.renderCounter(hasCounter)}</div>`)}`;
+            : 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=${classMap({ supporting: true, ...invalidClassNameObj })}
+          >
+            ${this.renderHelper(hasError, hasHelper)}
+            ${this.renderCounter(hasCounter)}
+          </div>`)}`;
     }
     onChange() {
         this.value = this.inputRef.value.value;
@@ -448,62 +464,168 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
     }
     renderLabel() {
         return this.label
-            ? html `<label part="label" class="label" ${animate({
+            ? html `<label
+          part="label"
+          class="label"
+          ${animate({
                 keyframeOptions: {
                     duration: getDuration(this, 'short4'),
                     easing: getEasing(this, 'standard'),
                 },
-            })}>${this.label}</label>`
+            })}
+        >
+          ${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>`;
+        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>`}`;
+        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>`);
+        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>`);
+        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
+        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(
+            : 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}">`;
+            : 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) {
-        return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(
+        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="${this.rows ?? 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>`;
+            : undefined)}
+      ?readonly=${this.readonly}
+      ?disabled=${this.disabled}
+      ?required=${this.required}
+      minlength=${ifDefined(this.minlength)}
+      maxlength=${ifDefined(this.maxlength)}
+      rows=${this.rows ?? 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 是否包含错误提示
@@ -511,15 +633,21 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
      */
     renderHelper(hasError, hasHelper) {
         return hasError
-            ? html `<div part="error" class="error">${this.error || this.inputRef.value.validationMessage}</div>`
+            ? 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>`
+                ? 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>`
+            ? html `<div part="counter" class="counter">
+          ${this.value.length}/${this.maxlength}
+        </div>`
             : nothingTemplate;
     }
 };