blob: 5885304b0ce099e5f20488a5d7a8bb22612bce76 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script>
let { value = $bindable() } = $props();
let toggle = (e) => (show = !show);
let show = $state(false);
let icon = $derived(show ? "ph:eye-bold" : "ph:eye-slash-bold");
</script>
<label
for="password"
class="input flex items-center justify-center gap-2 w-full"
>
{#if show}
<input name="password" type="text" bind:value class="clean" />
{:else}
<input name="password" type="password" bind:value class="clean" />
{/if}
<button type="button" aria-label="Toggle" onclick={toggle} class="contents">
<iconify-icon {icon} width="32"></iconify-icon>
</button>
</label>
|
