Drawer Improvements

[blaine]

Describe the feature in detail (code, mocks, or screenshots encouraged)

We're using the drawer utility extensively in our project, but it's not without some frustration. Rather than creating specific issues, I'd like to offer a few general observations, all in the spirit of offering my assistance in implementing improvements to the drawer utility if there's a clear consensus on direction.

Argument Passing

First, the indirection of the meta parameter doesn't feel like the best option. The ability to specify a component registry as with the modal would be a great start. I could also imagine something like a conditional element that triggers the display of a drawer, like so:

{#if showDrawerConditional}
<Drawer>
  <Component>
</Drawer>
{/if}

Ultimately, having clear types follow the data being passed to the component rendered in the drawer feels essential. I've built some workarounds in our project, but it definitely feels kludgy.

History State Tracking

Second, implementing pushState with the drawer so that navigating back closes the drawer is something of an exercise in frustration. I'll get there eventually, but in particular the fact that there's no (documented, at least) direct access to track the open/close state of the drawer means that building something to consistently track the state and do the right thing on navigation is surprisingly non-trivial.

Lifecycle Improvements

Third, having more clear control over the drawer lifecycle in general would be a big help. In our case, we have situations where the drawer behaves similarly to a modal, returning a result to the code that triggered the drawer. There are lots of ways to fix this, and we have an approach that works OK (passing functions through meta), but I can imagine some better solutions (the approach in skeleton's Modal utility works well!).

With these two general issues fixed (stressing that I don't have very strong thoughts or opinions on the best approach here!) would make this utility really excellent.

Thanks for all the work to date on this project, and for considering the improvements suggested here.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[endigo9740]

Hey @blaine I might draw your attention to the major rewrite currently underway which we've dubbed Skeleton Next (aka Skeleton v3). Part of this process will involve porting all Skeleton components and features from Svelte 4 to the upcoming Svelte 5 to take advantage of all the new features. We're using this opportunity to review each Skeleton feature in detail and have been implementing proposed requests as we go.

You may be happy to hear we agree with your feedback, and in fact most of this is already on our agenda:

• NEXT: Drawers #2397

We're still brainstorming the best approach to this, but generally speaking Modals and Drawers will likely be combined or overlap to bring more feature parity. I definitely want the lifecycle methods, registry system, and custom component support bare minimum.

You can learn more about our plans for modals here, which will bring further refinements as well:

• NEXT: Overlay System (modals/drawers/toasts) #2357

Just FYI, we're currently folding any large requests like this under their respective v3 milestone issue. So I'm going to close this ticket and do just that. But know this just helps ensure we see this feedback when we get to the Drawer ticket, and will take into account any and all feedback provided here.

Feel free to provide similar feedback for any and all other respective v3 features here:

• https://github.com/skeletonlabs/skeleton/milestone/5

[blaine]

@endigo9740 Oh, awesome! That's great news – I had no idea that was happening. I've just been heads-down in the code-mines, definitely looking forward to all the stuff that's coming. 😅 It'll take a while to dig in, but I'll try to take a look when I can. Thanks for the update!