Skip to content

[detachable] Add ability to flip popover element #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

DerrikMilligan
Copy link
Contributor

@DerrikMilligan DerrikMilligan commented Jan 28, 2025

Attempted to fix the last part of detachable where we can 'flip' an element if it's not visible on the page. Similar to how floating-ui's flip middleware works.

Changes made:

  • Added a new allowFlip prop which hides this behavior if you don't want it. Defaults to true
  • Hook into the resize and scroll events for the page to re-calculate if a flip needs to occur.
    • This is utilizing a debounce to ensure it's not triggered too often.
  • Finished out step 3, which was previously commented out. An item will be "flipped" across the activator element if it's not visible in an effort keep the menu element visible
  • Added a new type file to represent the props from detachable
    • With this new interface, the w-tooltip and w-menu's props extend this interface as they directly utilize the mixin
    • The menu prop of w-confirm now utilizes the types from w-menu
    • The menuProps prop of w-select now utilizes the types from w-menu

Example

Here is an example of how that looks from the documentation:
Before the flip:
image
After the flip:
image

The pink line is the bottom of my browser window. Since there's no room for the menu it's "flipped" to be displayed on the top. A similar process will take place with flipping left and right aligned items.

Future refinements

  • There is one more middleware that floating UI implements that we may want to consider adding as well, the shift middleware which will move the element to stay in view even if the activator element is not in view
  • There is more logic that we could attempt to emulate from their flip middleware such as restricting flipping across various axes
  • Potentially looking at how their fallback strategy works.

Final Thoughts

Overall this is just 1 step in trying to have a better overall popover experience without including an external library. But I think that it's a good step in the right direction. Looking forward to see what @antoniandre thinks.

…lement if it's not visible on the page. Similar to how the @floating-ui/dom's flip middleware works. Also updated some type definitions to include the detachable where that mixin is used.
…revious flipping implementation. Still needs more work but it's getting closer.
@DerrikMilligan
Copy link
Contributor Author

This may have to be put on hold it turns out it's a lot more complicated than just what I have ha. There are a lot of edge cases where this doesn't work.

@antoniandre
Copy link
Owner

Thanks for these thoughts and your work @DerrikMilligan!
I think we should start moving to composition API component by component, and to begin with, discard retro-compatibility with EOL Vue 2! :)
This will solve some complexity for the detachable because we can now teleport in Vue 3.
I would start with that and it will probably clear a fair bit of complexity, so we see clearer for the issue at stake.

If you feel like you can have a go, otherwise I'll work on it soon.

Just to be in sync, all the components are ready to be converted to composition API 1 by 1. No need to convert them all at once.

Cheers!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants