metonym / svelte-toggle Goto Github PK

seen

might be better for users to see it like

The current resolution for svelte modules used for the toggle component has some conflicting results. This is not a breaking problem, but it may cause them in the future.

A good alternative would be to use conditional exports as explained here, since they're supported by Node and bundlers like Vite and simplify the implementation for those resolutions.

Svelte supports a feature where instead of one separate variable per each checkbox you can have an array and each checkbox will add/remove its name attribute from that array when toggled.

https://svelte.dev/tutorial/group-inputs

Is there any way this can be supported with svelte-toggle?

e.g.

<script>
  import Toggle from "svelte-toggle";

  let items = [];
</script>

<Toggle bind:group={items} name="x" />
<Toggle bind:group={items} name="y" />
<Toggle bind:group={items} name="z" />

Toggling all three should result in items = ['x','y','z']

p.s. Maybe not helpful but I found this: https://svelte.dev/repl/faabda4cabd544bd858a8a8abd0095f5?version=3.12.1

Is there a clean way to bind the toggle to a writable store?

The following does not work:

<script>
import { writable } from 'svelte/store'
import Toggle from 'svelte-toggle'

const toggled = writable(false)
</script>

<Toggle bind:toggled />

Neither does bind:$toggled, bind:value={$toggled} or bind:checked={$toggled}.

My workaround is to add the toggled property and listen to the toggle event to update the store:

<script>
import { writable } from 'svelte/store'
import Toggle from 'svelte-toggle'

const toggled = writable(false)

function onToggle({ detail }) {
  toggled.set(detail)
}

</script>

<Toggle toggled={$toggled} on:toggle={onToggle} />

This isn't terrible, but I wonder why it's not as simple as binding a store to a native checkbox, like so:

<script>
import { writable } from 'svelte/store'
import Toggle from 'svelte-toggle'

const toggled = writable(false)
</script>

<input type="checkbox" bind:checked={$toggled} />

Hi!
When I use more than one Toggle components in the same```
svelte file, the second one does not work.

<script>                                                                        
  import Toggle from "svelte-toggle";                                           
  let toggled;                                                                  
  let toggled2;                                                                 
</script>                                                                  
<Toggle bind:toggled />                                                                                                                           
Toggled? {toggled}                                                              
<Toggle bind:toggled2 />                                                        
Toggled2? {toggled2}

Here toggles2 remains undefined.
If I define both variables to false, toggled 2 remains false even when i toggle the component.

See this repl https://svelte.dev/repl/03dfe3c0bb1b4e818edc50353b6ff24b?version=3.46.4 based on your example.

Thanks.

No way to remove the label even if empty