Skip to content
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

feat(Popover): manual mode & horizontal offset #781

Merged
merged 10 commits into from
Oct 12, 2023
Merged

Conversation

nilsso
Copy link
Contributor

@nilsso nilsso commented Oct 4, 2023

Implement manual controls via simple show property, and add left and right padding when offsetDistance popper option is given.

πŸ”— Linked issue

Resolves #721

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

Having the capability to manually control the popover panel seems like a no-brainer, and it seems a simple optional show property is really all that's needed.

When testing the popper controls it was apparent the offsetDistance wasn't being used when position was either left or right. Seemed as simple as adding the left and right padding to the already present top and bottom.

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

I figure after a merge I can update the documentation accordingly.

benjamincanac and others added 5 commits October 2, 2023 18:08
@vercel
Copy link

vercel bot commented Oct 4, 2023

The latest updates on your projects. Learn more about Vercel for Git β†—οΈŽ

Name Status Preview Updated (UTC)
ui βœ… Ready (Inspect) Visit Preview Oct 12, 2023 10:12am

@benjamincanac benjamincanac changed the title feat(Popover): Manual mode, horizontal offset feat(Popover): manual mode & horizontal offset Oct 5, 2023
@benjamincanac
Copy link
Member

Nice! Do you think it would be useful to do the same on Tooltip, Dropdown and SelectMenu?

@nilsso
Copy link
Contributor Author

nilsso commented Oct 5, 2023

A few hours after making this PR I remembered theres other components that could benefit. Definitely, I'll get those done too.

Copy link
Member

Do you plan to do this in the same PR?

@nilsso
Copy link
Contributor Author

nilsso commented Oct 5, 2023

Sure. Should I do documentation in this PR too?

Copy link
Member

Yes that would be nice 😊

@nilsso
Copy link
Contributor Author

nilsso commented Oct 5, 2023

@benjamincanac Think it would be better that I change show to open to be consistent with the naming conventions in headless UI? (https://headlessui.com/vue/popover#popover)

Furthermore not sure how best to add manual controls to dropdown menu. Headless has their own sort of solution.

Seems like there's sometimes very differing required methods for implementing manual control. Maybe I just stick to PopOver for just this PR, as PopOver is basically the most generic/least bells-and-whistles of all these overlay components?

@@ -8,17 +8,17 @@
role="button"
@mouseover="onMouseOver"
>
<slot :open="open" :close="close">
<slot :open="headlessOpen" :close="close">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't it be :open="(open !== undefined) ? open : headlessOpen" for both slots?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep I think so. Made those changes.

@benjamincanac
Copy link
Member

@nilsso FYI I've updated the behaviour of this in 3334e2a to use a v-model:open instead. This allows the normal behaviour (clicking on the trigger) to work.

benjamincanac added a commit that referenced this pull request Jan 3, 2024
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.

PopOver manual mode
3 participants