N00nDay / stwui

Opinionated yet customizable Svelte-TailwindCSS component library
stwui.vercel.app
MIT License
450 stars 21 forks source link

Exposing on:click events #118

Closed gw2princeps closed 1 year ago

gw2princeps commented 1 year ago

Copy-paste from discord https://discordapp.com/channels/1027197401905233990/1027197402949615639/1099641665943240704

I was playing around some more yesterday. I was wondering if I have not yet completely understood the svelte way of doing things. I have following code:

{#each tokens as token}
<form
method="POST"
action="?/setActive"
class="flex gap-[8px] self-center"
use:enhance={enhanceSetActive}
>
    <Toggle name="active" on={token?.active}>
        <Toggle.ContentLeft slot="content-left">
            <Toggle.ContentLeft.Label slot="label">Active</Toggle.ContentLeft.Label>
        </Toggle.ContentLeft>
    </Toggle>
</form>
{/each}

I want to submit the form every time the toggle is pressed. From what I've gathered, there is no native way of achieving this without manually calling upon form.submit(). Since there is no on:toggle or similar event exposed for the Toggle component, I was wondering what the state-of-the art solution for this problem is. Should I create and maintain a separate data structure which contains the current toggle values for all tokens and then use bind:on={datastructure[token.id]} in combination with reactive statements to call form.submit()? This seems rather tedious to me, when all it would take a on:click={() => form.submit() on the toggle.

N00nDay commented 1 year ago

Please provide a reproduction for this one.

N00nDay commented 1 year ago

No reproduction was provided so I am closing this issue.