N00nDay / stwui

Opinionated yet customizable Svelte-TailwindCSS component library

Home Page:stwui.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Exposing on:click events

gw2princeps opened this issue · comments

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.

Please provide a reproduction for this one.

No reproduction was provided so I am closing this issue.