blob: 8c7d8d7c95086bed79d4a15f05c4e63a6ad4d1bd (
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
32
33
34
35
36
37
|
<script>
let {
name = $bindable("password"),
show = $bindable(),
value = $bindable(),
focus = () => {},
placeholder = undefined,
} = $props();
let toggle = (e) => {
e?.preventDefault();
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} type="text" bind:value class="clean" {placeholder} />
{:else}
<input
{name}
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>
|
