Original AlpineJS | Svelte Translation | Explanation |
---|---|---|
<div x-data="{ open: false }" |
<script> let open = false </script> |
x-data marks the HTML element as a component and introduces a new reactive data for this element and children. Svelte only supports file level reactive data, which must be declared in the <script/> block |
x-text="username" |
{username} |
|
@click="open = !open" |
on:click={() => open = !open} |
|
<div x-show="open" | {#if open} <div … {/if} | |
:class="{'flex': open, 'hidden': !open}" | class="{open ? 'flex': 'hidden'} | |
<svg ..> <path x-show="!open" … /> <path x-show="open" … /> </svg> |
<svg ..> {#if open} <path … /> {:else} <path … /> {/if} </svg> | This could also be done by adding class hidden to the path which is to be suppressed class:open={} etc |
@click.away="open = false" In v3, renamed to @click.outside |
<script> function clickOutside(node) { const handleClick = event => { if (node && !node.contains(event.target) && !event.defaultPrevented) { node.dispatchEvent( new CustomEvent('click_outside', node)) } } document.addEventListener('click', handleClick, true); return { destroy() { document.removeEventListener('click', handleClick, true); } } } </script> use:clickOutside on:click_outside={()=>open = false} |
Svelte does not provide a way to check for clicks outside the component. This code to check for click outside the component is from the REPL at https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7 |
Last active
February 28, 2024 11:45
-
-
Save SumitBando/0eb3de45f2b41d2d8821445440033562 to your computer and use it in GitHub Desktop.
Tried to use a web page template in a SvelteKit project, unexpectedly found some Alpine.js embedded. Here was the translation.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment