From d2fcdbff3487505cd2be2f1dca849e71d8b2655d Mon Sep 17 00:00:00 2001 From: saller Date: Mon, 8 Apr 2024 13:50:56 +0800 Subject: [PATCH] fix(pro:tag-select): tag text shouldn't overflow when overlayMatchWidth is true (#1878) --- .../control-trigger/src/ControlTrigger.tsx | 3 ++- .../src/composables/useOverlayState.ts | 11 +++++---- packages/pro/dark.full.css | 2 +- packages/pro/default.full.css | 2 +- packages/pro/tag-select/docs/Theme.zh.md | 2 +- .../src/content/TagSelectOption.tsx | 2 +- packages/pro/tag-select/style/index.less | 24 +++++++++++++++++-- packages/pro/tag-select/theme/dark.css | 2 +- packages/pro/tag-select/theme/default.css | 2 +- packages/pro/tag-select/theme/default.ts | 2 +- 10 files changed, 37 insertions(+), 15 deletions(-) diff --git a/packages/components/control-trigger/src/ControlTrigger.tsx b/packages/components/control-trigger/src/ControlTrigger.tsx index fedd9c734..a93887ace 100644 --- a/packages/components/control-trigger/src/ControlTrigger.tsx +++ b/packages/components/control-trigger/src/ControlTrigger.tsx @@ -58,7 +58,7 @@ export default defineComponent({ onFocus, onBlur, ) - const { overlayOpened, overlayRef, overlayStyle, setOverlayOpened } = useOverlayState( + const { overlayOpened, overlayRef, overlayMatchWidth, overlayStyle, setOverlayOpened } = useOverlayState( props, defaultTriggerProps, triggerRef, @@ -132,6 +132,7 @@ export default defineComponent({ return normalizeClass({ [globalHashId.value]: !!globalHashId.value, [`${prefixCls}-overlay`]: true, + [`${prefixCls}-overlay-match-width`]: overlayMatchWidth.value === true, [overlayClassName || '']: !!overlayClassName, }) }) diff --git a/packages/components/control-trigger/src/composables/useOverlayState.ts b/packages/components/control-trigger/src/composables/useOverlayState.ts index 8bf525ef7..cea0c15c2 100644 --- a/packages/components/control-trigger/src/composables/useOverlayState.ts +++ b/packages/components/control-trigger/src/composables/useOverlayState.ts @@ -16,6 +16,7 @@ import { type ɵTriggerInstance } from '@idux/components/_private/trigger' export interface OverlayStateContext { overlayRef: Ref overlayStyle: ComputedRef + overlayMatchWidth: ComputedRef updateOverlay: (rect?: DOMRect) => void overlayOpened: ComputedRef setOverlayOpened: (open: boolean) => void @@ -35,14 +36,14 @@ export function useOverlayState( ): OverlayStateContext { const overlayRef = ref() const [overlayWidth, setOverlayWidth] = useState('') - const overlayStyle = computed(() => { - const { overlayMatchWidth = config.overlayMatchWidth } = props - if (!overlayMatchWidth) { + const overlayMatchWidth = computed(() => props.overlayMatchWidth ?? config.overlayMatchWidth) + const overlayStyle = computed(() => { + if (!overlayMatchWidth.value) { return } - return { [overlayMatchWidth === true ? 'width' : 'minWidth']: overlayWidth.value } + return { [overlayMatchWidth.value === true ? 'width' : 'minWidth']: overlayWidth.value } }) const [_overlayOpened, setOverlayOpened] = useControlledProp(props, 'open', false) const overlayOpened = computed(() => !props.disabled && _overlayOpened.value) @@ -83,5 +84,5 @@ export function useOverlayState( useResizeObserver(triggerRef, ({ contentRect }) => updateOverlay(contentRect)) }) - return { overlayRef, overlayStyle, updateOverlay, overlayOpened, setOverlayOpened } + return { overlayRef, overlayStyle, overlayMatchWidth, updateOverlay, overlayOpened, setOverlayOpened } } diff --git a/packages/pro/dark.full.css b/packages/pro/dark.full.css index b4998ee3d..0d6413ef3 100644 --- a/packages/pro/dark.full.css +++ b/packages/pro/dark.full.css @@ -102,7 +102,7 @@ --ix-pro-tag-select-preset-color-orange-bg: rgb(54, 36, 25); --ix-pro-tag-select-color-indicator-size: 12px; --ix-pro-tag-select-panel-max-height: 256px; - --ix-pro-tag-select-edit-panel-min-width: 225px; + --ix-pro-tag-select-edit-panel-min-width: 140px; --ix-pro-tag-select-tag-height: 20px; } diff --git a/packages/pro/default.full.css b/packages/pro/default.full.css index 4348ea17a..36ed88900 100644 --- a/packages/pro/default.full.css +++ b/packages/pro/default.full.css @@ -92,7 +92,7 @@ --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232); --ix-pro-tag-select-color-indicator-size: 12px; --ix-pro-tag-select-panel-max-height: 256px; - --ix-pro-tag-select-edit-panel-min-width: 225px; + --ix-pro-tag-select-edit-panel-min-width: 140px; --ix-pro-tag-select-tag-height: 20px; } diff --git a/packages/pro/tag-select/docs/Theme.zh.md b/packages/pro/tag-select/docs/Theme.zh.md index 2dc1ef68e..99a0a61b4 100644 --- a/packages/pro/tag-select/docs/Theme.zh.md +++ b/packages/pro/tag-select/docs/Theme.zh.md @@ -1,7 +1,7 @@ | 名称 | 描述 | 类型 | default | dark | |---|---|---|---|---| | `colorIndicatorSize` | 颜色指示圆圈的尺寸 | `number` | `12` | `12` | -| `editPanelMinWidth` | 编辑面板的最小宽度 | `number` | `225` | `225` | +| `editPanelMinWidth` | 编辑面板的最小宽度 | `number` | `140` | `140` | | `panelMaxHeight` | 数据面板的最大高度 | `number` | `256` | `256` | | `presetColorBlueBg` | 预设蓝色背景色 | `string` | `rgb(232, 241, 255)` | `rgb(21, 36, 58)` | | `presetColorBlueLabel` | 预设蓝色文字色 | `string` | `#1c6eff` | `#4083E8` | diff --git a/packages/pro/tag-select/src/content/TagSelectOption.tsx b/packages/pro/tag-select/src/content/TagSelectOption.tsx index 5d085159b..8c68e9187 100644 --- a/packages/pro/tag-select/src/content/TagSelectOption.tsx +++ b/packages/pro/tag-select/src/content/TagSelectOption.tsx @@ -85,7 +85,7 @@ export default defineComponent({ return (
{slots.optionLabel?.(props.data) ?? ( - + {slots.tagLabel?.(props.data) ?? label} )} diff --git a/packages/pro/tag-select/style/index.less b/packages/pro/tag-select/style/index.less index e2d721e4a..ae3879fd5 100644 --- a/packages/pro/tag-select/style/index.less +++ b/packages/pro/tag-select/style/index.less @@ -1,5 +1,6 @@ @import '../../style/variable/index.less'; @import '../../../components/style/variable/index.less'; +@import '../../../components/style/mixins/ellipsis.less'; @import '../../style/mixins/reset.less'; .@{pro-tag-select-prefix} { @@ -33,17 +34,29 @@ &-tag { height: var(--ix-pro-tag-select-tag-height); line-height: calc(var(--ix-pro-tag-select-tag-height) - var(--ix-control-line-width) * 2); + + .@{control-trigger-prefix}-overlay-match-width & { + max-width: calc(100% - var(--ix-font-size-icon) - var(--ix-margin-size-sm)); + + .@{tag-prefix}-content { + max-width: 100%; + .ellipsis(); + } + } } &-edit-trigger { margin-left: auto; height: 100%; width: var(--ix-font-size-icon); - display: none; + display: flex; align-items: center; justify-content: center; font-size: var(--ix-font-size-icon); color: var(--ix-color-icon); + visibility: hidden; + pointer-events: none; + cursor: pointer; &:hover { color: var(--ix-color-icon-hover); @@ -52,7 +65,8 @@ &:hover { .@{pro-tag-select-prefix}-option-edit-trigger { - display: flex; + visibility: visible; + pointer-events: unset; } } } @@ -150,9 +164,15 @@ &-selected-tag { height: @select-item-height; line-height: @select-item-line-height; + max-width: 100%; margin: @select-margin-half 0; margin-inline-end: var(--ix-margin-size-xs); + .@{tag-prefix}-content { + max-width: 100%; + .ellipsis(); + } + &-remove-icon { margin-left: var(--ix-margin-size-xs); cursor: pointer; diff --git a/packages/pro/tag-select/theme/dark.css b/packages/pro/tag-select/theme/dark.css index 9cbcaf054..3032fbb2b 100644 --- a/packages/pro/tag-select/theme/dark.css +++ b/packages/pro/tag-select/theme/dark.css @@ -14,6 +14,6 @@ --ix-pro-tag-select-preset-color-orange-bg: rgb(54, 36, 25); --ix-pro-tag-select-color-indicator-size: 12px; --ix-pro-tag-select-panel-max-height: 256px; - --ix-pro-tag-select-edit-panel-min-width: 225px; + --ix-pro-tag-select-edit-panel-min-width: 140px; --ix-pro-tag-select-tag-height: 20px; } diff --git a/packages/pro/tag-select/theme/default.css b/packages/pro/tag-select/theme/default.css index 9ff2f4929..4446b3ade 100644 --- a/packages/pro/tag-select/theme/default.css +++ b/packages/pro/tag-select/theme/default.css @@ -14,6 +14,6 @@ --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232); --ix-pro-tag-select-color-indicator-size: 12px; --ix-pro-tag-select-panel-max-height: 256px; - --ix-pro-tag-select-edit-panel-min-width: 225px; + --ix-pro-tag-select-edit-panel-min-width: 140px; --ix-pro-tag-select-tag-height: 20px; } diff --git a/packages/pro/tag-select/theme/default.ts b/packages/pro/tag-select/theme/default.ts index de644a436..d62f4e019 100644 --- a/packages/pro/tag-select/theme/default.ts +++ b/packages/pro/tag-select/theme/default.ts @@ -37,7 +37,7 @@ export function getDefaultThemeTokens( presetColorOrangeBg: getAlphaColor(orangeColor, tagCompColorAlpha, colorContainerBg), colorIndicatorSize: 12, panelMaxHeight: 256, - editPanelMinWidth: 225, + editPanelMinWidth: 140, tagHeight: 20, } }