diff --git a/packages/mdui/src/components/text-field/index.ts b/packages/mdui/src/components/text-field/index.ts index f0b49128..bf63ef2b 100644 --- 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``, )} - ${this.renderClearButton()}${this.renderTogglePasswordButton()} - ${this.renderSuffix(hasErrorIcon)} + ${this.renderSuffix()}${this.renderClearButton(hasClearButton)} + ${this.renderTogglePasswordButton(hasTogglePasswordButton)} + ${this.renderRightIcon(hasErrorIcon)} ${when( hasError || hasHelper || hasCounter, @@ -920,41 +928,34 @@ export class TextField ${this.prefix}`; } - private renderSuffix(hasErrorIcon: boolean): TemplateResult { + private renderSuffix(): TemplateResult { return html` - ${this.suffix} - - ${hasErrorIcon - ? html` - ${this.errorIcon - ? html`` - : html``} - ` - : html` - ${this.endIcon - ? html`` - : nothingTemplate} - `}`; + ${this.suffix} + `; } - 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` + ${this.errorIcon + ? html`` + : html``} + ` + : html` + ${this.endIcon + ? html`` + : nothingTemplate} + `; + } + private renderClearButton(hasClearButton: boolean): TemplateResult { return when( hasClearButton, () => html` @@ -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` diff --git a/packages/mdui/src/components/text-field/style.less b/packages/mdui/src/components/text-field/style.less index 2c6865ad..68fa67c3 100644 --- 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,11 +136,13 @@ } .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); @@ -150,6 +150,7 @@ } .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,11 +284,8 @@ } .input { - display: flex; - flex-wrap: wrap; + display: block; width: 100%; - height: 100%; - min-height: 100%; border: none; outline: none; background: none; @@ -290,16 +293,25 @@ 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; } @@ -322,9 +334,10 @@ } } -:host([variant="filled"]) .label + .input { - .padding(24, 0, 8, 0); - .padding-right(16); +:host([variant="filled"]) .label + .input, +:host([variant="filled"]) .label + .input + .input { + .padding-top(22); + .padding-bottom(6); } .supporting { @@ -374,13 +387,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 index da3e8f16..be34e9f2 100644 --- 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})"; } } }