nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.13k stars 544 forks source link

Side needs more direction #2712

Closed cdwmhcc closed 5 days ago

cdwmhcc commented 5 days ago

For what version of Nuxt UI are you suggesting this?

v3.0.0-alpha.x

Description

As of now, in Nuxt UI v3.0.0-alpha.x, the SIDE_OPTIONS constant is defined as follows:

const SIDE_OPTIONS: ["top", "right", "bottom", "left"];

The current four directions cannot meet the practical development needs. For example, when there is a button on the far right of the screen to open a dropdown menu, it cannot automatically appear as 'bottom-right'.Tooltips, dropdown menus, or popovers may require positioning beyond the basic cardinal directions to avoid obscuring content or to better fit within the viewport.

Proposed Enhancement

I propose to extend the SIDE_OPTIONS constant to include combinations of the cardinal directions to allow for greater flexibility and finer control over positioning. The updated SIDE_OPTIONS would be:

const SIDE_OPTIONS = [
  "top", "right", "bottom", "left",
  "bottom-left", "bottom-right",
  "left-top", "left-bottom",
  "top-left", "top-right",
  "right-top", "right-bottom"
];

Additional context

Image Image
cdwmhcc commented 5 days ago

Furthermore, the feature should include adaptive behavior. For instance, if bottom is set but the element is obstructed by the window edge, bottom-right should be automatically applied to ensure visibility.

benjamincanac commented 5 days ago

This is what align is for: https://ui3.nuxt.dev/components/dropdown-menu#content

cdwmhcc commented 5 days ago

This is what align is for: https://ui3.nuxt.dev/components/dropdown-menu#content

Thank you!