Skip to content

Commit 5071f95

Browse files
boka-inuitsborissTotomInc
authored
feat: replace custom menu positioning with Floating UI to make it robust (#344)
* add floating ui to display menu in the correct position * chore: update docs & floating-ui --------- Co-authored-by: boriss <boriss@inuits.eu> Co-authored-by: Thomas Cazade <cazade.thomas@gmail.com>
1 parent 68dab25 commit 5071f95

File tree

6 files changed

+86
-65
lines changed

6 files changed

+86
-65
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
- ✅ Single & multi-select support
4141
- 🖌️ Infinite customization with `<slot>`s
4242
- 🪄 `<Teleport />` menu where you want
43-
- 📦 Extremely light, **0 dependencies** (4.4kb gzip)
43+
- 📦 Extremely light, minimal dependencies (17kb gzip)
4444

4545
## Installation
4646

docs/getting-started.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ $ bun add vue3-select-component
2828

2929
::: tip
3030
[Vue.js](https://vuejs.org) 3.5+ is required to use this component.
31+
32+
The component uses [Floating UI](https://floating-ui.com/) for intelligent menu positioning and viewport detection.
3133
:::
3234

3335
## Single select usage

docs/props.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ Whether the dropdown should close after an option is selected.
176176
Teleport the menu outside of the component DOM tree. You can pass a valid string according to the official Vue 3 Teleport documentation (e.g. `teleport="body"` will teleport the menu into the `<body>` tree). This can be used in case you are having `z-index` issues within your DOM tree structure.
177177

178178
::: info
179-
Top and left properties are calculated using a ref on the `.vue-select` with a `container.getBoundingClientRect()`.
179+
The menu positioning is powered by [Floating UI](https://floating-ui.com/), which automatically handles positioning, flipping, and shifting to ensure the menu stays visible within the viewport. The menu width is automatically matched to the select control width.
180180
:::
181181

182182
## inputId

0 commit comments

Comments
 (0)