From f33979d228527e3a3571f88e0564609a9c8629da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com> Date: Mon, 5 Feb 2024 17:16:18 +0800 Subject: [PATCH] feat(components): [select] & [select-v2] add fallbackPlacements prop (#15765) --- docs/en-US/component/select-v2.md | 3 ++- docs/en-US/component/select.md | 1 + docs/en-US/component/tooltip.md | 1 + packages/components/select-v2/src/defaults.ts | 7 +++++++ packages/components/select-v2/src/select.vue | 2 +- packages/components/select/src/select.ts | 7 +++++++ packages/components/select/src/select.vue | 2 +- 7 files changed, 20 insertions(+), 3 deletions(-) diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index bdb4eed63b..e3cff8ff18 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -203,7 +203,7 @@ select-v2/custom-loading | Name | Description | Type | Default | | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| model-value / v-model | biding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — | +| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — | | options | data of the options, the key of `value` and `label` can be customize by `props` | ^[array] | — | | props ^(2.4.2) | configuration options, see the following table | ^[object] | — | | multiple | is multiple | ^[boolean] | false | @@ -239,6 +239,7 @@ select-v2/custom-loading | remote-method | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | ^[Function]`(keyword: string) => void` | — | | validate-event | whether to trigger form validation | ^[boolean] | true | | placement | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start | +| fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[arrary]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] | | collapse-tags-tooltip ^(2.3.0) | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | ^[boolean] | false | | max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 | | tag-type ^(2.5.0) | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info | diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index a8368fd12e..b18b193b0d 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -201,6 +201,7 @@ select/custom-loading | tag-type | tag type | ^[enum]`'' \| 'success' \| 'info' \| 'warning' \| 'danger'` | info | | validate-event | whether to trigger form validation | ^[boolean] | true | | placement ^(2.2.17) | position of dropdown | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom-start | +| fallback-placements ^(2.5.6) | list of possible positions for dropdown [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[arrary]`Placement[]` | ['bottom-start', 'top-start', 'right', 'left'] | | max-collapse-tags ^(2.3.0) | the max tags number to be shown. To use this, `collapse-tags` must be true | ^[number] | 1 | | popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | ^[object]refer to [popper.js](https://popper.js.org/docs/v2/) doc | {} | | aria-label ^(a11y) | same as `aria-label` in native input | ^[string] | — | diff --git a/docs/en-US/component/tooltip.md b/docs/en-US/component/tooltip.md index 868c11698e..b1edabebfb 100644 --- a/docs/en-US/component/tooltip.md +++ b/docs/en-US/component/tooltip.md @@ -157,6 +157,7 @@ tooltip/animations | content | display content, can be overridden by `slot#content` | ^[string] | '' | | raw-content | whether `content` is treated as HTML string | ^[boolean] | false | | placement | position of Tooltip | ^[enum]`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | bottom | +| fallback-placements | list of possible positions for Tooltip [popper.js](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) | ^[arrary]`Placement[]` | — | | visible / v-model:visible | visibility of Tooltip | ^[boolean] | — | | disabled | whether Tooltip is disabled | ^[boolean] | — | | offset | offset of the Tooltip | ^[number] | 12 | diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts index 053da1d01f..5f22ebc85f 100644 --- a/packages/components/select-v2/src/defaults.ts +++ b/packages/components/select-v2/src/defaults.ts @@ -229,6 +229,13 @@ export const SelectProps = buildProps({ values: placements, default: 'bottom-start', }, + /** + * @description list of possible positions for dropdown + */ + fallbackPlacements: { + type: definePropType(Array), + default: ['bottom-start', 'top-start', 'right', 'left'], + }, /** * @description tag type */ diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue index 29321656cd..ab261cbf16 100644 --- a/packages/components/select-v2/src/select.vue +++ b/packages/components/select-v2/src/select.vue @@ -15,7 +15,7 @@ :gpu-acceleration="false" :stop-popper-mouse-event="false" :popper-options="popperOptions" - :fallback-placements="['bottom-start', 'top-start', 'right', 'left']" + :fallback-placements="fallbackPlacements" :effect="effect" :placement="placement" pure diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts index 2dc166935e..c6576a6340 100644 --- a/packages/components/select/src/select.ts +++ b/packages/components/select/src/select.ts @@ -212,6 +212,13 @@ export const SelectProps = buildProps({ values: placements, default: 'bottom-start', }, + /** + * @description list of possible positions for dropdown + */ + fallbackPlacements: { + type: definePropType(Array), + default: ['bottom-start', 'top-start', 'right', 'left'], + }, /** * @description native input aria-label */ diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index 0f16d62628..43b29de402 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -14,7 +14,7 @@ :teleported="teleported" :popper-class="[nsSelect.e('popper'), popperClass]" :popper-options="popperOptions" - :fallback-placements="['bottom-start', 'top-start', 'right', 'left']" + :fallback-placements="fallbackPlacements" :effect="effect" pure trigger="click"