fixed #338

zdhxiong · Oct 18, 2024 · 2576afc · 2576afc
1 parent 77332f4
commit 2576afc
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 74 deletions.
diff --git a/packages/mdui/src/components/text-field/index.ts b/packages/mdui/src/components/text-field/index.ts
@@ -750,6 +750,13 @@ export class TextField
     const hasEndIcon =
       !!this.endIcon || this.hasSlotController.test('end-icon');
     const hasErrorIcon = this.invalid || this.invalidStyle;
+    const hasTogglePasswordButton =
+      this.type === 'password' && this.togglePassword && !this.disabled;
+    const hasClearButton =
+      this.clearable &&
+      !this.disabled &&
+      (!this.readonly || this.readonlyButClearable) &&
+      (typeof this.value === 'number' || this.value.length > 0);
     const hasPrefix = !!this.prefix || this.hasSlotController.test('prefix');
     const hasSuffix = !!this.suffix || this.hasSlotController.test('suffix');
     const hasHelper = !!this.helper || this.hasSlotController.test('helper');
@@ -768,8 +775,8 @@ export class TextField
       container: true,
       'has-value': this.hasValue,
       'has-icon': hasIcon,
-      'has-end-icon': hasEndIcon,
-      'has-error-icon': hasErrorIcon,
+      'has-right-icon': hasEndIcon || hasErrorIcon,
+      'has-action': hasClearButton || hasTogglePasswordButton,
       'has-prefix': hasPrefix,
       'has-suffix': hasSuffix,
       'is-firefox': navigator.userAgent.includes('Firefox'),
@@ -788,8 +795,9 @@ export class TextField
             () => html`<slot name="input" class="input"></slot>`,
           )}
         </div>
-        ${this.renderClearButton()}${this.renderTogglePasswordButton()}
-        ${this.renderSuffix(hasErrorIcon)}
+        ${this.renderSuffix()}${this.renderClearButton(hasClearButton)}
+        ${this.renderTogglePasswordButton(hasTogglePasswordButton)}
+        ${this.renderRightIcon(hasErrorIcon)}
       </div>
       ${when(
         hasError || hasHelper || hasCounter,
@@ -920,41 +928,34 @@ export class TextField
       <slot name="prefix" part="prefix" class="prefix">${this.prefix}</slot>`;
   }
 
-  private renderSuffix(hasErrorIcon: boolean): TemplateResult {
+  private renderSuffix(): TemplateResult {
     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>`}`;
+      ${this.suffix}
+    </slot>`;
   }
 
-  private renderClearButton(): TemplateResult {
-    const hasClearButton =
-      this.clearable &&
-      !this.disabled &&
-      (!this.readonly || this.readonlyButClearable) &&
-      (typeof this.value === 'number' || this.value.length > 0);
+  private renderRightIcon(hasErrorIcon: boolean): TemplateResult {
+    return 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>`;
+  }
 
+  private renderClearButton(hasClearButton: boolean): TemplateResult {
     return when(
       hasClearButton,
       () =>
         html`<slot
           name="clear-button"
           part="clear-button"
-          class="right-icon"
+          class="action"
           @click=${this.onClear}
         >
           <mdui-button-icon tabindex="-1">
@@ -970,17 +971,16 @@ export class TextField
     );
   }
 
-  private renderTogglePasswordButton(): TemplateResult {
-    const hasTogglePasswordButton =
-      this.type === 'password' && this.togglePassword && !this.disabled;
-
+  private renderTogglePasswordButton(
+    hasTogglePasswordButton: boolean,
+  ): TemplateResult {
     return when(
       hasTogglePasswordButton,
       () =>
         html`<slot
           name="toggle-password-button"
           part="toggle-password-button"
-          class="right-icon"
+          class="action"
           @click=${this.onTogglePassword}
         >
           <mdui-button-icon tabindex="-1">

diff --git a/packages/mdui/src/components/text-field/style.less b/packages/mdui/src/components/text-field/style.less
@@ -16,18 +16,16 @@
   display: flex;
   align-items: center;
   height: 100%;
+  .padding(2, 2, 2, 16);
   .transition(box-shadow, short4, standard);
 
-  padding: unit((2 / @mdui-root-font-size), rem);
-
-  .padding-left(16);
-
   &.has-icon {
     .padding-left(12);
   }
 
-  &.has-end-icon,
-  &.has-error-icon {
+  &.has-action,
+  &.has-suffix,
+  &.has-right-icon {
     .padding-right(12);
   }
 
@@ -105,6 +103,7 @@
 }
 
 .icon,
+.action,
 .right-icon,
 .prefix,
 .suffix {
@@ -117,8 +116,7 @@
   }
 }
 
-.right-icon,
-.suffix {
+.right-icon {
   .invalid &,
   .invalid-style & {
     .color(error);
@@ -138,18 +136,21 @@
 }
 
 .icon,
+.action,
 .right-icon {
   .font-size(24);
 }
 
 .icon mdui-button-icon,
+.action mdui-button-icon,
 .right-icon mdui-button-icon,
 ::slotted(mdui-button-icon[slot]) {
   .margin-left(-8);
   .margin-right(-8);
 }
 
 .icon .i,
+.action .i,
 .right-icon .i,
 ::slotted([slot$="icon"]) {
   font-size: inherit;
@@ -159,9 +160,21 @@
   .margin-right(16);
 }
 
-.right-icon:not(.end-icon),
-.has-end-icon .end-icon {
-  .margin-right(16);
+.has-prefix .prefix {
+  .padding-right(2);
+}
+
+.has-action .action {
+  .margin-left(12);
+}
+
+.has-suffix .suffix {
+  .padding-right(4);
+  .padding-left(2);
+}
+
+.has-right-icon .right-icon {
+  .margin-left(12);
 }
 
 .prefix,
@@ -180,15 +193,8 @@
   }
 }
 
-.has-prefix .prefix {
-  .padding-right(2);
-}
-
-.has-suffix .suffix {
-  .padding-left(2);
-}
-
 .input-container {
+  display: flex;
   width: 100%;
   height: 100%;
 }
@@ -278,28 +284,34 @@
 }
 
 .input {
-  display: flex;
-  flex-wrap: wrap;
+  display: block;
   width: 100%;
-  height: 100%;
-  min-height: 100%;
   border: none;
   outline: none;
   background: none;
   appearance: none;
   resize: none;
   cursor: inherit;
   font-family: inherit;
-  .padding(16, 0);
-  .padding-right(16);
+  .padding(14, 14, 14, 0);
   .typescale(body-large);
   .color(on-surface);
   .caret-color(primary);
 
+  .has-action &,
+  .has-right-icon & {
+    .padding-right(4);
+  }
+
+  .has-suffix & {
+    .padding-right(0);
+  }
+
   &.hide-input {
     opacity: 0;
     height: 0;
     min-height: 0;
+    width: 0;
     padding: 0 !important;
     overflow: hidden;
   }
@@ -323,8 +335,8 @@
 }
 
 :host([variant="filled"]) .label + .input {
-  .padding(24, 0, 8, 0);
-  .padding-right(16);
+  .padding-top(22);
+  .padding-bottom(6);
 }
 
 .supporting {
@@ -374,13 +386,6 @@
   display: none;
 }
 
-// 火狐中的日期时间选择器会默认添加 clear 按钮，隐藏掉
-.is-firefox .input[type="date"],
-.is-firefox .input[type="datetime-local"],
-.is-firefox .input[type="time"] {
-  clip-path: inset(0 2em 0 0);
-}
-
 // 移除 input[type="number"] 时，右侧的上下箭头
 .input[type="number"]::-webkit-outer-spin-button,
 .input[type="number"]::-webkit-inner-spin-button {

diff --git a/packages/shared/src/mixin.less b/packages/shared/src/mixin.less
@@ -348,21 +348,21 @@
 // @duration 为 short1、short2 等
 // @timing-function 为 standard、standard-accelerate、emphasized 等
 // @delay 可以为整数，表示毫秒；也可以为 short1、short2 等
-.transition(@property, @duration, @timing-function, @delay: 0) {
+.transition(@prop, @duration, @timing-function, @delay: 0) {
   @durationVariable: "--mdui-motion-duration-@{duration}";
   @timingFunctionVariable: "--mdui-motion-easing-@{timing-function}";
 
-  & when (@delay =0) {
-    transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable})";
+  & when (@delay = 0) {
+    transition: ~"@{prop} var(@{durationVariable}) var(@{timingFunctionVariable})";
   }
 
-  & when not (@delay =0) {
+  & when not (@delay = 0) {
     & when (isnumber(@delay)) {
-      transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable}) @{delay}ms";
+      transition: ~"@{prop} var(@{durationVariable}) var(@{timingFunctionVariable}) @{delay}ms";
     }
 
     & when not (isnumber(@delay)) {
-      transition: ~"@{property} var(@{durationVariable}) var(@{timingFunctionVariable}) var(--mdui-motion-duration-@{delay})";
+      transition: ~"@{prop} var(@{durationVariable}) var(@{timingFunctionVariable}) var(--mdui-motion-duration-@{delay})";
     }
   }
 }