unovue / radix-vue

Vue port of Radix UI Primitives. An open-source UI component library for building high-quality, accessible design systems and web apps.
https://radix-vue.com
MIT License
3.39k stars 210 forks source link

[Feature]: Expose more options to configure underlying `floating-ui` for advanced popper positioning #991

Open romansp opened 4 months ago

romansp commented 4 months ago

Describe the feature

It would be very handy if floating-ui-powered components exposed more props to control underlying floating-ui configuration.

For example I've recently stumbled across a task to implement a more advanced positioning technique for one of our Popover usages. While it was really easy to achieve with fallbackPlacements option for flip middleware, unfortunately radix-vue doesn't support passing these. So instead I had to workaround it with a computed side prop and do my own math when exactly side should change.

Prepared this sandbox to demonstrate https://codesandbox.io/p/sandbox/floating-ui-react-dom-template-forked-hjzlcc?file=%2Fsrc%2FApp.js%3A13%2C36. If you open sandbox in a separate window and try to resize floating content will first flip to the bottom and then will start shifting to remain in the viewport.

So just allowing fallbackPlacements would have solved it for me but maybe we should expose even more options? Not exactly sure what API would be though but I'm willing to start a PR on this.

Could be a good fit for v2.

Additional information

zernonia commented 4 months ago

Nice suggestion @romansp ! Yup previously we had the same props and feature as in RadixUI. We can definitely extend further in v2! 😁

9mm commented 3 months ago

definitely looking forward to this one as it will fix this i believe: https://github.com/radix-vue/radix-vue/discussions/1000

floating-ui offers an absolute position option, and all the floating-ui examples work perfect with no lag

9mm commented 3 months ago

Specifically this: https://floating-ui.com/docs/usefloating#strategy

zernonia commented 3 months ago

Considering disabling autoUpdate is also a feature request on Radix UI, we will add this prop too to allow Popper to not update when layout changes.