mdui 2.0.5 → 2.1.0

package/components/text-field/index.js

@@ -6,6 +6,7 @@ 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 { msg } from '@lit/localize';
 import { animate } from '@lit-labs/motion';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
@@ -24,6 +25,7 @@ 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 { onLocaleReady, offLocaleReady } from '../../internal/localize.js';
 import '../button-icon.js';
 import '../icon.js';
 import { style } from './style.js';
@@ -280,6 +282,7 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
     disconnectedCallback() {
         super.disconnectedCallback();
         this.observeResize?.unobserve();
+        offLocaleReady(this);
     }
     /**
      * 选中文本框中的文本
@@ -354,8 +357,9 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
      * @param message 自定义的错误提示文本
      */
     setCustomValidity(message) {
-        this.inputRef.value.setCustomValidity(message);
-        this.invalid = !this.inputRef.value.checkValidity();
+        this.setCustomValidityInternal(message);
+        // 外部调用 setCustomValidity 时，不再使用内置的验证规则，所以需要移除监听语言变更事件
+        offLocaleReady(this);
     }
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
@@ -384,25 +388,14 @@ 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>`)}`;
+    }
+    setCustomValidityInternal(message) {
+        this.inputRef.value.setCustomValidity(message);
+        this.invalid = !this.inputRef.value.checkValidity();
+        this.requestUpdate();
     }
     onChange() {
         this.value = this.inputRef.value.value;
@@ -447,12 +440,26 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
         if (this.pattern) {
             const patternRegex = new RegExp(this.pattern);
             const hasError = this.value && !this.value.match(patternRegex);
-            this.setCustomValidity(hasError ? '请与请求的格式匹配。' : '');
+            if (hasError) {
+                this.setCustomValidityInternal(this.getPatternErrorMsg());
+                onLocaleReady(this, () => {
+                    this.setCustomValidityInternal(this.getPatternErrorMsg());
+                });
+            }
+            else {
+                this.setCustomValidityInternal('');
+                offLocaleReady(this);
+            }
         }
     }
     onTogglePassword() {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
+    getPatternErrorMsg() {
+        return msg('Please match the requested format.', {
+            id: 'components.textField.patternError',
+        });
+    }
     setTextareaHeight() {
         if (this.autosize) {
             this.inputRef.value.style.height = 'auto';
@@ -464,168 +471,62 @@ 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 是否包含错误提示
@@ -633,21 +534,15 @@ 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;
     }
 };