diff --git a/examples/sites/demos/pc/app/select/events.spec.ts b/examples/sites/demos/pc/app/select/events.spec.ts index 2d1e218dd0..ae3897e614 100644 --- a/examples/sites/demos/pc/app/select/events.spec.ts +++ b/examples/sites/demos/pc/app/select/events.spec.ts @@ -26,7 +26,7 @@ test('单选事件', async ({ page }) => { await page.waitForTimeout(200) await input.hover() - await select.locator('.tiny-select__caret.icon-close').click() + await select.locator('.tiny-select__caret.tiny-select__close').click() await page.waitForTimeout(500) await expect(input).toHaveValue('') await expect(model.filter({ hasText: '触发 clear 事件' })).toHaveCount(1) @@ -65,7 +65,7 @@ test('多选事件', async ({ page }) => { await page.waitForTimeout(200) await select.hover() - await select.locator('.tiny-select__caret.icon-close').click() + await select.locator('.tiny-select__caret.tiny-select__close').click() await expect(tag).toHaveCount(0) await expect(model.filter({ hasText: '触发 change 事件' })).toHaveCount(1) diff --git a/examples/sites/demos/pc/app/select/input-box-type.spec.ts b/examples/sites/demos/pc/app/select/input-box-type.spec.ts index 70c1e9783e..9148e0bb48 100644 --- a/examples/sites/demos/pc/app/select/input-box-type.spec.ts +++ b/examples/sites/demos/pc/app/select/input-box-type.spec.ts @@ -9,11 +9,11 @@ test('下划线默认', async ({ page }) => { const dropdown = page.locator('body > .tiny-select-dropdown') const option = dropdown.locator('.tiny-option') - await expect(select).toHaveClass(/tiny-select__underline/) + await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/) await expect(input).toHaveCSS('border-top-width', '0px') await expect(input).toHaveCSS('border-left-width', '0px') await expect(input).toHaveCSS('border-right-width', '0px') - await expect(input).toHaveCSS('border-color', 'rgb(194, 194, 194)') + await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)') await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(128, 128, 128)') await select.click() @@ -30,11 +30,11 @@ test('下划线禁用', async ({ page }) => { const input = select.locator('.tiny-input__inner') const dropdown = page.locator('body > .tiny-select-dropdown') - await expect(select).toHaveClass(/tiny-select__underline/) + await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/) await expect(input).toHaveCSS('border-top-width', '0px') await expect(input).toHaveCSS('border-left-width', '0px') await expect(input).toHaveCSS('border-right-width', '0px') - await expect(input).toHaveCSS('border-color', 'rgb(219, 219, 219)') + await expect(input).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)') await expect(input).toHaveCSS('cursor', 'not-allowed') await expect(select.locator('svg')).toHaveCSS('fill', 'rgb(194, 194, 194)') const hasDisabled = await input.evaluate((input) => input.hasAttribute('disabled')) @@ -55,11 +55,11 @@ test('下划线多选', async ({ page }) => { const dropdown = page.locator('body > .tiny-select-dropdown') const option = dropdown.locator('.tiny-option') - await expect(select).toHaveClass(/tiny-select__underline/) + await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/) await expect(input).toHaveCSS('border-top-width', '0px') await expect(input).toHaveCSS('border-left-width', '0px') await expect(input).toHaveCSS('border-right-width', '0px') - await expect(input).toHaveCSS('border-color', 'rgb(194, 194, 194)') + await expect(input).toHaveCSS('border-bottom-color', 'rgb(194, 194, 194)') await expect(select.locator('.tiny-select__caret')).toHaveCSS('fill', 'rgb(128, 128, 128)') await select.click() @@ -67,6 +67,6 @@ test('下划线多选', async ({ page }) => { await option.first().click() await expect(tag).toHaveCount(5) - await expect(select).toHaveClass(/tiny-select__underline/) + await expect(select.locator('.tiny-input')).toHaveClass(/tiny-input-underline/) await expect(select).toHaveClass(/tiny-select__multiple/) }) diff --git a/packages/theme-saas/src/select/index.less b/packages/theme-saas/src/select/index.less index b8b0a95dac..7f972e4186 100644 --- a/packages/theme-saas/src/select/index.less +++ b/packages/theme-saas/src/select/index.less @@ -61,7 +61,7 @@ .@{input-prefix-cls} { &.is-show-close { - .icon-close { + .@{select-prefix-cls}__close { @apply mr-1; } } @@ -335,7 +335,7 @@ @apply pr-12; } - .icon-close { + .tiny-select__close { @apply mr-2; @apply fill-color-text-placeholder; diff --git a/packages/theme/src/select/index.less b/packages/theme/src/select/index.less index b4b0c38ae0..2e4fbc52aa 100644 --- a/packages/theme/src/select/index.less +++ b/packages/theme/src/select/index.less @@ -104,10 +104,7 @@ position: absolute; line-height: normal; white-space: normal; - padding-left: var(--ti-select-tags-wrap-padding-left); - padding-right: var(--ti-select-tags-wrap-padding-right); - padding-bottom: var(--ti-select-tags-wrap-padding-bottom); - padding-top: var(--ti-select-tags-wrap-padding-top); + padding: var(--tv-Select-tags-padding); z-index: 1; top: 50%; margin-left: 1px; @@ -143,24 +140,24 @@ outline: 0; padding: 0; margin-left: 8px; - color: var(--ti-select-input-text-color); - font-size: var(--ti-select-input-font-size); - height: var(--ti-select-input-height); + color: var(--tv-Select-text-color); + font-size: var(--tv-Select-font-size); + height: var(--tv-Select-height); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; &.is-mini { - height: var(--ti-select-input-mini-height); + height: var(--tv-Select-height-mini); } &.is-small { - height: var(--ti-select-input-small-height); + height: var(--tv-Select-height-small); } &.is-medium { - height: var(--ti-select-input-medium-height); + height: var(--tv-Select-height-medium); } } @@ -172,8 +169,7 @@ white-space: nowrap; box-sizing: border-box; border-color: transparent; - margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right) var(--ti-select-tags-margin-bottom) - var(--ti-select-tags-margin-left); + margin: var(--tv-Select-tag-margin); text-overflow: ellipsis; overflow: hidden; display: inline-flex; @@ -194,15 +190,15 @@ flex-shrink: 0; } + // TODO: Aurora 多选禁用文本显示(评估是否删除） &.is-disabled { max-height: 24px; display: inline-flex; > span { - color: var(--ti-select-tags-text-color-disabled); - font-size: var(--ti-tag-font-size); - margin: var(--ti-select-tags-margin-top) var(--ti-select-tags-margin-right) - var(--ti-select-tags-margin-bottom) var(--ti-select-tags-margin-left); + color: var(--tv-Select-text-color-disabled); + margin: var(--tv-Select-tags-margin-top) var(--tv-Select-tags-margin-right) + var(--tv-Select-tags-margin-bottom) var(--tv-Select-tags-margin-left); display: inline-block; width: 100%; white-space: nowrap; @@ -216,13 +212,14 @@ .@{select-prefix-cls}__collapse-text { display: inline-flex; align-items: center; - margin-left: var(--ti-select-tags-margin-left); - font-size: var(--ti-select-collapse-button-font-size); - color: var(--ti-select-collapse-button-text-icon-color); + margin: var(--tv-Select-collapse-margin); + font-size: var(--tv-Select-font-size); + color: var(--tv-Select-collapse-text-color); .tiny-svg { - margin-left: var(--ti-select-collapse-button-icon-margin-left); - fill: var(--ti-select-collapse-button-text-icon-color); + margin: var(--tv-Select-collapse-margin); + fill: var(--tv-Select-icon-color); + font-size: var(--tv-Select-icon-size); } } } @@ -245,7 +242,7 @@ } .@{select-prefix-cls}__tags { - height: var(--ti-select-tags-height); + height: var(--tv-Select-tags-height); overflow: hidden; &-collapse { @@ -273,7 +270,6 @@ &.collapse-tag-clicked { .@{select-prefix-cls}__tags { height: auto; - max-height: var(--ti-select-tags-max-height); overflow-y: auto; &-collapse { @@ -341,7 +337,7 @@ } &__suffix { - display: var(--ti-select-suffix-display); + display: 'inline-block'; } } @@ -350,7 +346,7 @@ } .@{select-prefix-cls}__tags.is-show-tag { - padding-right: var(--ti-select-tags-padding-right-disabled); + padding-right: 32px; } } @@ -373,18 +369,14 @@ } .@{select-prefix-cls}__caret { - fill: var(--ti-select-input-caret-icon-color); - font-size: var(--ti-select-input-caret-font-size); + fill: var(--tv-Select-icon-color); + font-size: var(--tv-Select-icon-size); transition: transform 0.3s; transform: rotateZ(180deg); cursor: pointer; - &.@{select-prefix-cls}__close { - margin-right: var(--ti-select-input-icon-close-margin-right); - } - &:hover { - fill: var(--ti-select-input-caret-hover-icon-color); + fill: var(--tv-Select-icon-color-hover); } &.is-reverse { @@ -394,15 +386,14 @@ .@{select-prefix-cls}__limit-txt, .@{select-prefix-cls}__proportion-txt { - font-size: var(--ti-select-suffix-font-size); - line-height: 1; - margin: 0 var(--ti-select-suffix-icon-margin-right); - color: var(--ti-select-suffix-text-color); + font-size: var(--tv-Select-font-size); + margin: var(--tv-Select-suffix-text-margin); + color: var(--tv-Select-suffix-text-color); } .@{select-prefix-cls}__copy { cursor: pointer; - margin-right: var(--ti-select-suffix-icon-margin-right); + margin-right: var(--tv-Select-suffix-icon-margin-right); } .@{input-prefix-cls}__suffix { @@ -417,38 +408,12 @@ &.is-disabled { .@{select-prefix-cls}__caret { - fill: var(--ti-select-input-disabled-caret-text-color); + fill: var(--tv-Select-icon-color-disabled); cursor: not-allowed; } .@{input-prefix-cls}__inner { cursor: not-allowed; - - &:hover { - border-color: var(--ti-select-input-disabled-hover-border-color); - } - } - } - - &.is-focus .@{input-prefix-cls}__inner { - border-color: var(--ti-select-inner-border-color-active); - } - } - - &__underline { - .@{input-prefix-cls}, - .@{input-prefix-cls}.is-disabled { - .@{input-prefix-cls}__inner { - border-radius: 0; - border-top-width: 0px; - border-left-width: 0px; - border-right-width: 0px; - padding-left: 0px; - background-color: var(--ti-input-bg-color); - } - - &__suffix { - right: 0px; } } } diff --git a/packages/theme/src/select/vars.less b/packages/theme/src/select/vars.less index 22ff00338a..aaf1690952 100644 --- a/packages/theme/src/select/vars.less +++ b/packages/theme/src/select/vars.less @@ -11,69 +11,46 @@ */ .component-css-vars-select() { - // 输入框悬浮时的边框色(hide) - --ti-select-inner-border-color-active: var(--ti-common-color-line-active, #191919); - // 可搜索输入框文本色 - --ti-select-input-text-color: var(--ti-common-color-text-primary, #191919); - // 选择器输入框字号(hide) - --ti-select-input-font-size: var(--ti-common-font-size-base, 14px); - - // 选择器输入框尾部图标的颜色 - --ti-select-input-caret-icon-color: var(--ti-common-color-icon-normal, #808080); - // 选择器输入框尾部图标悬浮时的颜色 - --ti-select-input-caret-hover-icon-color: var(--ti-common-color-icon-graybg-hover, #191919); - // 选择器输入框尾部图标的尺寸 - --ti-select-input-caret-font-size: var(--ti-common-font-size-2, 16px); - // 选择器输入框尾部关闭图标右侧外边距 - --ti-select-input-icon-close-margin-right: var(--ti-common-space-0, 0px); - // 选择器输入框尾部图标禁用时的颜色（hide） - --ti-select-input-disabled-caret-text-color: var(--ti-common-color-text-disabled, #c2c2c2); - // 输入框禁用且悬浮时的边框色 - --ti-select-input-disabled-hover-border-color: var(--ti-common-color-line-disabled, #dbdbdb); - // 选择器输入框高度（hide） - --ti-select-input-height: var(--ti-common-size-6x, 24px); - // 迷你型选择器输入框高度（hide） - --ti-select-input-mini-height: var(--ti-common-size-6x, 24px); - // 小型选择器输入框高度（hide） - --ti-select-input-small-height: var(--ti-common-size-7x, 28px); - // 中型选择器输入框高度（hide） - --ti-select-input-medium-height: var(--ti-common-size-42); - // 选择器多选标签容器的左侧内边距 - --ti-select-tags-wrap-padding-left: var(--ti-common-space-2, 2px); - // 选择器多选标签容器的顶部内边距 - --ti-select-tags-wrap-padding-top: var(--ti-common-space-2, 2px); - // 选择器多选标签容器的底部内边距 - --ti-select-tags-wrap-padding-bottom: var(--ti-common-space-2, 2px); - // 选择器多选标签容器的右侧内边距 - --ti-select-tags-wrap-padding-right: var(--ti-common-space-0, 0px); - // 选择器多选标签顶部外边距 - --ti-select-tags-margin-top: var(--ti-common-space-2, 2px); - // 选择器多选标签右侧外边距 - --ti-select-tags-margin-right: var(--ti-common-space-2, 2px); - // 选择器多选标签底部外边距 - --ti-select-tags-margin-bottom: var(--ti-common-space-2, 2px); - // 选择器多选标签左侧外边距 - --ti-select-tags-margin-left: var(--ti-common-space-2, 2px); - // 选择器多选标签单行的高度 - --ti-select-tags-height: var(--ti-common-space-8x, 32px); - // 选择器多选标签最大高度 - --ti-select-tags-max-height: none; - // 多选禁用时右侧内边距 - --ti-select-tags-padding-right-disabled: var(--ti-common-space-8x, 32px); + // 文本色 + --tv-Select-text-color: var(--tv-color-text, #191919); // 多选禁用文本色 - --ti-select-tags-text-color-disabled: var(--ti-common-color-text-disabled, #c2c2c2); - // 选择器后缀图标显示状态 - --ti-select-suffix-display: 'inline-block'; - // 选择器右侧图标间距 - --ti-select-suffix-icon-margin-right: var(--ti-common-space-base, 4px); - // 选择器suffix字号 - --ti-select-suffix-font-size: var(--ti-common-font-size-base, 14px); - // 选择器suffix文本色 - --ti-select-suffix-text-color: var(--ti-common-color-text-weaken, #808080); - // 收起按钮文本与图标色(hide) - --ti-select-collapse-button-text-icon-color: var(--ti-common-color-text-link, #1476ff); - // 收起按钮图标左边距(hide) - --ti-select-collapse-button-icon-margin-left: var(--ti-common-space-2, 2px); - // 收起按钮字号(hide) - --ti-select-collapse-button-font-size: var(--ti-common-font-size-base, 14px); + --tv-Select-text-color-disabled: var(--tv-color-text-disabled, #c2c2c2); + // 默认字号 + --tv-Select-font-size: var(--tv-font-size-md, 14px); + + // 图标色 + --tv-Select-icon-color: var(--tv-color-icon, #808080); + // 图标禁用色 + --tv-Select-icon-color-disabled: var(--tv-color-icon-disabled, #c2c2c2); + // 图标悬浮色 + --tv-Select-icon-color-hover: var(--tv-color-icon-hover, #191919); + // 图标尺寸 + --tv-Select-icon-size: var(--tv-icon-size, 16px); + + // 选择器高度 + --tv-Select-height: var(--tv-size-height-md, 32px); + // 选择器高度(mini) + --tv-Select-height-mini: var(--tv-size-height-xs, 24px); + // 选择器高度(small) + --tv-Select-height-small: var(--tv-size-height-sm, 28px); + // 选择器高度(medium) + --tv-Select-height-medium: var(--tv-size-height-lg, 40px); + + // 标签区域高度 + --tv-Select-tags-height: var(--tv-size-height-md, 32px); + // 标签区域内边距 + --tv-Select-tags-padding: var(--tv-space-xs, 2px) 0px var(--tv-space-xs, 2px) var(--tv-space-xs, 2px); + // 标签外边距 + --tv-Select-tag-margin: var(--tv-space-xs, 2px); + + // suffix 图标右测外间距 + --tv-Select-suffix-icon-margin-right: var(--tv-space-sm, 4px); + // suffix 文本外间距 + --tv-Select-suffix-text-margin: 0 var(--tv-space-sm, 4px); + // suffix 文本色 + --tv-Select-suffix-text-color: var(--tv-color-text-weaken, #808080); + // 收起按钮文本色 + --tv-Select-collapse-text-color: var(--tv-color-text-active, #1476ff); + // 收起按钮外间距 + --tv-Select-collapse-margin: 0 var(--tv-space-xs, 2px); } diff --git a/packages/vue/src/select/src/pc.vue b/packages/vue/src/select/src/pc.vue index bcbc12dbea..ef70f97eda 100644 --- a/packages/vue/src/select/src/pc.vue +++ b/packages/vue/src/select/src/pc.vue @@ -25,8 +25,7 @@ hoverExpand ? 'is-hover-expand' : '', clickExpand ? 'is-click-expand' : '', state.showCollapseTag ? 'collapse-tag-clicked' : '', - state.isDisabled ? 'is-disabled' : '', - inputBoxType === 'underline' ? 'tiny-select__underline' : '' + state.isDisabled ? 'is-disabled' : '' ]" @mouseleave.self=" () => { @@ -93,7 +92,7 @@ :size="state.collapseTagSize" :hit="state.selected[0].state ? state.selected[0].state.hitState : state.selected[0].hitState" :key="state.key" - :disabled="state.selected[0].disabled" + :disabled="state.selected[0].disabled || state.isDisabled" :type="state.getTagType" @close="deleteTag($event, state.selected[0])" disable-transitions @@ -127,6 +126,7 @@ :closable="false" :size="state.collapseTagSize" :type="state.getTagType" + :disabled="state.isDisabled" disable-transitions class="tiny-select__tags-number" > @@ -292,6 +292,7 @@ :display-only-content="state.displayOnlyContent" :unselectable="state.readonly ? 'on' : 'off'" :validate-event="false" + :inputBoxType="inputBoxType" :class="{ 'is-focus': state.visible, overflow: state.overflow, @@ -333,7 +334,7 @@