search

huntabyte / shadcn-svelte

shadcn/ui, but for Svelte. ✨
https://next.shadcn-svelte.com
MIT License
5.45k stars 340 forks source link

svelte-sonner slots #1062

Closed Carlos-err406 closed 2 weeks ago

Carlos-err406 commented 6 months ago

Describe the feature

the original svelte-sonner provides slots for modifying the default iconst of the toast see this section of the svelte-sonner readme

my request is to add those slots to the installed component to make it more extendable, and so users dont have to modify the /ui/sonner.svelte component just to add them

Carlos-err406 commented 6 months ago

also i would be glad to work on this, and if needed update the docs

huntabyte commented 6 months ago

That would be great @Carlos-err406 !

Carlos-err406 commented 6 months ago

@huntabyte Do you think it's sane to copy and paste the Icon and Loader components from svelte-sonner, to use as default values of the slots, or is it better to get a quick PR on svelte-sonner to export the Icon component (and Loader) to the index? i dont know their stand on that though

or maybe is preferable to just use lucide-svelte icons and forget about the defaults of svelte-sonner?

Carlos-err406 commented 6 months ago

tried the lucide icons approach, i think it came out pretty nice

oliverdowling commented 2 months ago

EDIT: Apologies, Svelte 5 did not give a warning/error for my example and because it doesn't work, it used a cached version and I commented a bit prematurely, before I realised.

For posterity, this is what I tried adding to sonner.svelte:

{#if $$slots["loading-icon"]}<slot slot="loading-icon" name="loading-icon" />{/if}
{#if $$slots["success-icon"]}<slot slot="success-icon" name="success-icon" />{/if}
{#if $$slots["error-icon"]}<slot slot="error-icon" name="error-icon" />{/if}
{#if $$slots["warning-icon"]}<slot slot="warning-icon" name="warning-icon" />{/if}
{#if $$slots["info-icon"]}<slot slot="info-icon" name="info-icon" />{/if}

I started trying to write a wrapper but I still couldn't easily get it to work as desired, even with Svelte 5's snippets, so I think it's easiest to use the changes in the PR if anyone needs the functionality.

huntabyte commented 2 weeks ago

With snippets coming up in svelte-sonner@next (not yet published) this issue will no longer be relevant.