eisterman/re-user-test-svlkt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Transition on PwdFormInput

Browse Source
This commit is contained in:
Federico Pasqua
2025-03-24 16:43:45 +01:00
parent 7373a25a84
commit 341b8363ea
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/PwdFormInput.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts" generics="T extends Record<string, unknown>"> <script lang="ts" generics="T extends Record<string, unknown>">
import { Field, Control, FieldErrors } from "formsnap"; import { Field, Control, FieldErrors } from "formsnap";
import type { FormPath, SuperForm } from "sveltekit-superforms"; import type { FormPath, SuperForm } from "sveltekit-superforms";
import { scale } from 'svelte/transition';
import Icon from "@iconify/svelte"; import Icon from "@iconify/svelte";
let { form, label, name }: { let { form, label, name }: {
@@ -12,7 +13,6 @@
let show = $state(false); let show = $state(false);
let type = $derived(show ? 'text' : 'password'); let type = $derived(show ? 'text' : 'password');
</script> </script>
<div> <div>
@@ -26,11 +26,13 @@
bind:value={$formData[name]} {...props} bind:value={$formData[name]} {...props}
/> />
</label> </label>
<button class="btn btn-circle" onclick={() => show = !show}> <button class="btn btn-circle grid" onclick={() => show = !show} type="button">
{#if show} {#if show}
<Icon icon="mdi:eye-off-outline"/> <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
icon="mdi:eye-off-outline"/></span>
{:else } {:else }
<Icon icon="mdi:eye-outline"/> <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2"><Icon
icon="mdi:eye-outline"/></span>
{/if} {/if}
</button> </button>
</div> </div>