blob: eb5b0d6c8f508c1044c17a0ed0152bbd8d48b060 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<script>
let {
show = $bindable(),
value = $bindable(),
focus = () => {},
placeholder,
} = $props();
let toggle = (e) => (show = !show);
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" {placeholder} />
{:else}
<input
name="password"
type="password"
bind:value
class="clean"
use:focus
{placeholder}
/>
{/if}
<button type="button" aria-label="Toggle" onclick={toggle} class="contents">
<iconify-icon {icon} width="32"></iconify-icon>
</button>
</label>
|
