Recreate Menu as a Svelte Action

[endigo9740]

Similar to Tooltips (#195) I believe Menus could benefit from making breaking out of the confines of a target/content sibling relationship.

I'll investigate the use of Svelte Actions (read: directives) to make this possible.

[endigo9740]

NOTE: here's how to ensure param data stays up to date:
https://discord.com/channels/457912077277855764/1023340103071965194/threads/1024077183158845561

[endigo9740]

Useful reference here:
#195 (comment)

Direct link:
https://dev.to/danawoodman/svelte-quick-tip-using-actions-to-integrate-with-javascript-libraries-tippy-tooltips-2m94

[endigo9740]

I've submitted a draft PR showcasing my first version of this change.

These make use of both Tailwind Elements (for canned class styles) as well as a dedicated Svelte Action.

Usage is pretty straight forward, you create a wrapping element, add a trigger, add a menu. Then link the two together via the action, via the target and data attribute.

Given it's a Tailwind Element there's plenty of style options available:

Likewise I've made the auto-origin the default, but you can still set a fixed value if you wish:

I'll most likely pick up and improve this tomorrow, so expect more updates then. However feel free to try the PR and submit feedback!

[endigo9740]

In case you're wondering, the goal with the data attribute is to make the linking arbitrary. This opens the door to crazy stuff like this:

<div class="hidden absolute top-4 right-4 card card-body w-64 shadow-xl" data-menu-1>(menu)</div>
<button class="btn btn-ghost" use:menu={{ target: '1', fixed: true }}>Menu 1</button>

Where the menu is not required to be relative to the trigger, but rather it can appear anywhere you want on the page.

[endigo9740]

I've worked up a REPL of some potential updates:
https://svelte.dev/repl/b9055bf14e2d4bb5a38f2102ffbfa260?version=3.50.1

General idea:

• Playing with the idea of making this a generic "popup" action, shared w/ tooltips
• We completely abstract visual styling and layout to Tailwind Elements
• We opt for a more generic data attribute (ex: data-menu), with a unique value (ex: 'foo')
• We target default menu styles via [data-menu] { ... } CSS selector and make it hidden by default
• Rename action param target -> menu
• Use JS to modify the display style directly rather than toggling the TW hidden class
• Add the autoclose: boolean option:
  • true (default): the menu closes when clicking within the menu
  • false: the menu does NOT close when clicking within the menu

[endigo9740]

I've applied all updates above, update the docs, and actually implemented the new menus as part of the documentation site app bar. These are working great!

I'll keep the PR open for a bit to give folks a chance to test these, otherwise I'll aim to merge soon.

[endigo9740]

FYI I've attempted to setup test cases for this action. However, this is not operating as expected. I'd welcome feedback from anyone that can shed light on this:

https:/Brain-Bones/skeleton/blob/e2b8ba3e2cf35ce0d0787e8e79c8482e6dcc0c85/src/lib/utilities/Menu/menu.test.ts

For now the test is present but skipped.