diff --git a/packages/components/_private/selector/style/multiple.less b/packages/components/_private/selector/style/multiple.less
index c575736d1..af952cf5d 100644
--- a/packages/components/_private/selector/style/multiple.less
+++ b/packages/components/_private/selector/style/multiple.less
@@ -34,9 +34,7 @@
}
- &.@{selector-prefix}-allow-input .@{selector-prefix}-overflow,
- &.@{selector-prefix}-allow-input .@{selector-prefix}-input,
- &.@{selector-prefix}-clearable .@{selector-prefix}-content {
+ &.@{selector-prefix}-allow-input .@{selector-prefix}-overflow {
padding-right: @select-icon-font-size + @select-multiple-padding;
}
}
diff --git a/packages/components/_private/selector/style/single.less b/packages/components/_private/selector/style/single.less
index 8055a252f..b2c49736a 100644
--- a/packages/components/_private/selector/style/single.less
+++ b/packages/components/_private/selector/style/single.less
@@ -13,14 +13,10 @@
}
&-input {
- right: @select-padding-horizontal;
+ right: @select-padding-horizontal + @selector-font-size;
left: @select-padding-horizontal;
}
}
-
- &.@{selector-prefix}-show-suffix &-input {
- right: @select-padding-horizontal + @selector-font-size;
- }
}
.@{selector-prefix}-single {
@@ -38,11 +34,6 @@
}
}
- &.@{selector-prefix}-with-suffix .@{selector-prefix}-item,
- &.@{selector-prefix}-with-suffix .@{selector-prefix}-placeholder {
- padding-right: @select-icon-font-size;
- }
-
&.@{selector-prefix}-opened .@{selector-prefix}-item {
color: @select-placeholder-color;
}
diff --git a/packages/components/input/style/index.less b/packages/components/input/style/index.less
index 218bc48f4..603769bf2 100644
--- a/packages/components/input/style/index.less
+++ b/packages/components/input/style/index.less
@@ -236,30 +236,20 @@
cursor: pointer;
opacity: 0;
color: @input-icon-color;
- background-color: @input-background-color;
transition: @transition-all-base;
- :hover {
+
+ &:hover {
color: @input-icon-hover-color;
}
}
&-clearable {
- &:hover {
- .@{input-prefix}-clear.visible {
- opacity: 1;
- }
+ .@{input-prefix}-clear.visible {
+ opacity: 1;
}
- &.@{input-prefix}-sm .@{input-prefix}-clear {
- right: @input-padding-horizontal-sm - 4;
- }
-
- &.@{input-prefix}-md .@{input-prefix}-clear {
- right: @input-padding-horizontal-md - 4;
- }
-
- &.@{input-prefix}-lg .@{input-prefix}-clear {
- right: @input-padding-horizontal-lg - 4;
+ .@{input-prefix}-inner {
+ padding-right: @input-icon-font-size + 2;
}
}
diff --git a/packages/components/input/style/mixin.less b/packages/components/input/style/mixin.less
index 7050d41ef..c5989f245 100644
--- a/packages/components/input/style/mixin.less
+++ b/packages/components/input/style/mixin.less
@@ -16,6 +16,12 @@
.input-size(@font-size; @padding-vertical; @padding-horizontal;) {
font-size: @font-size;
padding: @padding-vertical (@padding-horizontal - 4) @padding-vertical @padding-horizontal;
+
+ &.@{input-prefix}-clearable {
+ .@{input-prefix}-clear {
+ right: @padding-horizontal - 4;
+ }
+ }
}
.input-hover(@color: @input-hover-color) {
diff --git a/packages/components/textarea/__tests__/textarea.spec.ts b/packages/components/textarea/__tests__/textarea.spec.ts
index 406d3fac6..87fd98dc9 100644
--- a/packages/components/textarea/__tests__/textarea.spec.ts
+++ b/packages/components/textarea/__tests__/textarea.spec.ts
@@ -99,28 +99,29 @@ describe('Textarea', () => {
const onClear = vi.fn()
const wrapper = TextareaMount({ props: { clearable: true, onClear } })
- expect(wrapper.find('.ix-icon-close-circle').exists()).toBe(true)
- expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
+ expect(wrapper.classes()).toContain('ix-textarea-clearable')
+ expect(wrapper.find('.ix-textarea-clear').classes()).not.toContain('visible')
- await wrapper.find('.ix-icon-close-circle').trigger('click')
+ await wrapper.find('.ix-textarea-clear').trigger('click')
expect(onClear).toBeCalled()
await wrapper.setProps({ value: 'value' })
- expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(false)
+ expect(wrapper.find('.ix-textarea-clear').classes()).toContain('visible')
await wrapper.setProps({ disabled: true })
- expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
+ expect(wrapper.find('.ix-textarea-clear').classes()).not.toContain('visible')
await wrapper.setProps({ disabled: false, readonly: true })
- expect(wrapper.find('.ix-textarea-suffix-hidden').exists()).toBe(true)
+ expect(wrapper.find('.ix-textarea-clear').classes()).not.toContain('visible')
await wrapper.setProps({ clearable: false })
- expect(wrapper.find('.ix-icon-close-circle').exists()).toBe(false)
+ expect(wrapper.classes()).not.toContain('ix-textarea-clearable')
+ expect(wrapper.find('.ix-textarea-clear').exists()).toBe(false)
})
test('resize and autoRows work', async () => {
diff --git a/packages/components/textarea/src/Textarea.tsx b/packages/components/textarea/src/Textarea.tsx
index 6a8a296df..3e0212d1c 100644
--- a/packages/components/textarea/src/Textarea.tsx
+++ b/packages/components/textarea/src/Textarea.tsx
@@ -5,7 +5,7 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import { type Ref, type Slot, type StyleValue, computed, defineComponent, normalizeClass, onMounted } from 'vue'
+import { type Ref, type StyleValue, computed, defineComponent, normalizeClass, onMounted } from 'vue'
import { type FormAccessor } from '@idux/cdk/forms'
import { type TextareaConfig, useGlobalConfig } from '@idux/components/config'
@@ -53,6 +53,7 @@ export default defineComponent({
const prefixCls = mergedPrefixCls.value
const classes = {
[prefixCls]: true,
+ [`${prefixCls}-clearable`]: clearable.value,
[`${prefixCls}-disabled`]: accessor.disabled,
[`${prefixCls}-focused`]: isFocused.value,
[`${prefixCls}-with-count`]: showCount,
@@ -90,7 +91,14 @@ export default defineComponent({
onCompositionstart={handleCompositionStart}
onCompositionend={handleCompositionEnd}
/>
- {renderSuffix(clearable.value, slots.clearIcon, clearIcon.value, clearVisible.value, handleClear, prefixCls)}
+ {clearable.value && (
+
+ {slots.clearIcon ? slots.clearIcon() : }
+
+ )}
)
}
@@ -115,27 +123,3 @@ function useDataCount(props: TextareaProps, config: TextareaConfig, accessor: Fo
return dataCount
})
}
-
-function renderSuffix(
- isClearable: boolean,
- clearIconSlot: Slot | undefined,
- clearIcon: string,
- clearVisible: boolean,
- onClear: (evt: MouseEvent) => void,
- prefixCls: string,
-) {
- if (!isClearable) {
- return null
- }
-
- let classes = `${prefixCls}-suffix`
- if (!clearVisible) {
- classes += ` ${prefixCls}-suffix-hidden`
- }
-
- return (
-
- {clearIconSlot ? clearIconSlot() : }
-
- )
-}
diff --git a/packages/components/textarea/style/index.less b/packages/components/textarea/style/index.less
index 6d1c9c9ba..373c15417 100644
--- a/packages/components/textarea/style/index.less
+++ b/packages/components/textarea/style/index.less
@@ -65,18 +65,22 @@
}
}
- &-suffix {
+ &-clear {
position: absolute;
- color: @textarea-placeholder-color;
- transition: color @transition-duration-base;
+ z-index: 1;
cursor: pointer;
+ opacity: 0;
+ color: @textarea-placeholder-color;
+ transition: @transition-all-base;
&:hover {
color: @textarea-color-secondary;
}
+ }
- &-hidden {
- visibility: hidden;
+ &-clearable {
+ .@{textarea-prefix}-clear.visible {
+ opacity: 1;
}
}
diff --git a/packages/components/textarea/style/mixin.less b/packages/components/textarea/style/mixin.less
index 4be64d4c3..c7ae20051 100644
--- a/packages/components/textarea/style/mixin.less
+++ b/packages/components/textarea/style/mixin.less
@@ -3,10 +3,16 @@
.@{textarea-prefix}-inner {
padding: @padding-vertical @padding-horizontal;
}
- .@{textarea-prefix}-suffix {
+ .@{textarea-prefix}-clear {
top: @padding-vertical;
right: @padding-horizontal;
}
+
+ &.@{textarea-prefix}-clearable {
+ .@{textarea-prefix}-inner {
+ padding-right: @padding-horizontal + @font-size;
+ }
+ }
}
.textarea-autosize-measuring-base() {