Add a demo using floating-ui/vue to create a dynamic menu placeholder depending on window size & context

[Martino-Martinez]

• Click link below
• Scroll down
• Open VueSelect
• Options menu should be above when there is not enough space in the viewport below
• Open select next to VueSelect
• Options menu is shown above

https://play.vuejs.org/#eNrdVE1z2jAQ/Ss76iHtDNiAIWQch+nH5NAe2k7T6aXuZFx7ASdC1kgykGH4711LdqBxgu/hgrXvPelpd7U79kFKb10iC1mkU5VLAxpNKYEnYnEVM6NjNotFvpKFMrADhXPYw1wVK4gZ6WJ2+Yj+KvEGOabmCA/62ob6aUEkgcJYRSzSQujqrArEDK6qnd/GLGbvCI5854VOpoXBleSJQVoBRMvhzODWRD59vP5Alq8h5YnWVIuNSqREZQsC9IsOCXcBAG0eOFbUPDPLEEaDgdxeUlZreN1fFRlyIjSJP2BhIU1ORSHwdxMDqjhP/iIP4eybheHN8KwH64SXSDEnuR2ewb53SjNqa0ZdmqCtCbo047Zm3KWZtDWTLs15W3PepZm2NdMuzUVbc1FpHL9R/jkUkd5JisuCZ6iojnVzJAKcuOH5TQO5LqhXtHa0mfuDYeTXgRcIoy5C0EUYPyHQwz9YinzqfvqK/KMJQEvb5PTpNQ9C7Cp6lmsiPYQw50hNL/Z2jtRc1mNuSvVXifTudCFo4llZXAM06EKwkSr2wugKCVoaI3Xo+5vNxiuFvF94RPCfFbwfeFNvQNfQxs9FhlsPNR3u6kD+9mTLaBqF83zxxFS1R85RuVb431zCebH5YmNGlVi3EGmWmN4/E7/TW2f9u0KNak1T+xEziVpgfbPrm680fI5AmhYlJ/YJ8Afqgpeuuyrax1JkZPuIZ91+tjnOxeKnvt4aFLq5VGXUZsPybeI/nbj6wW7gjY+yeLtGVe1JCQy8iTcM2P4fW9AqHA==

[TotomInc]

It can be worth to see how something similar has been achieved by Reka UI for their Select component: https://reka-ui.com/docs/components/select

According to their source-code, they've made their own Popper abstraction, which is using @floating-ui/vue: https://github.com/unovue/reka-ui/blob/v2/packages/core/src/Popper/PopperRoot.vue

Building UI menus that moves dynamically based on the container position in the page, being aware of its bounding boxes and collisions is very hard. It might be worth to delegate this part to a headless library to properly position UI elements, like @floating-ui/vue.

However, that will kill the fact that this component is dependency-free. The lib itself seems to be around 8.8kB minified + gzipped: https://bundlephobia.com/package/@floating-ui/vue@1.1.6

[joostthehost]

Perhaps this can be an optional extra (like a plugin or just some demo code on how to accomplish this)? Leave it to the user to decide if they want to include the extra few kB's for the @floating-ui dependency to gain this functionality?

[Qu3st-9000]

I would approach this issue by employing Floating UI with Vue to dynamically render a menu placeholder that reacts based on window size and context. With reactive properties event listeners, and computed positioning, I can achieve a smooth response in the menu. I possess experience in using Vue composables and directives for responsive UI elements, performance optimization, and adaptive positioning in interactive UI.

[TotomInc]

@Qu3st-9000 feel free to create a pull-request 👍