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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<script>
import Left from "$comp/Left.svelte";
import Icon from "$comp/Icon.svelte";
import { focus, post, warning } from "$lib/utils";
import { t } from "$lib/translations";
export let v;
export let cancel;
let arrow = "<";
let loading = false;
const numPad = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "C", "0", "<"];
const handleInput = (n) => {
v = (v || "").toString();
if (n === "C") return (v = "");
if (n === "<") return (v = v.length > 1 ? Math.floor(v / 10) : "");
if (v.length > 5) n = "";
if (parseInt(n) >= 0) v += n;
};
let validate = (e) => {
let k = e.key || e.code;
if (k === "Escape") cancel();
if (
e.key.length <= 1 &&
!(e.metaKey || e.ctrlKey || e.altKey) &&
!(k >= "0" && k <= "9")
) {
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
};
let hide = true;
</script>
<div class="flex justify-center items-center">
<div class="space-y-5">
<div class="text-5xl md:text-6xl font-semibold relative w-[300px]">
{#if hide}
<input
on:keydown={validate}
use:focus
bind:value={v}
type="password"
class="outline-none border-0 text-center py-0 dark:bg-stone-800 dark:text-white"
pattern="[0-9]+"
/>
{:else}
<input
on:keydown={validate}
bind:value={v}
class="outline-none border-0 text-center py-0 dark:bg-stone-800 dark:text-white"
type="text"
pattern="[0-9]+"
/>
{/if}
<button
type="button"
on:click={() => (hide = !hide)}
class="absolute -right-5 dark:invert {hide ? 'top-5' : 'top-[22px]'}"
>
<Icon icon={hide ? "eye-off" : "eye"} style="w-8" />
</button>
</div>
<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto">
{#each numPad as value}
{#if value === arrow}
<button
type="button"
class="bg-primary dark:bg-stone-700 rounded-xl py-4 px-8 font-semibold dark:text-gray-50 active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
on:click={() => handleInput(value)}
>
<Left />
</button>
{:else}
<button
type="button"
class="bg-primary dark:bg-stone-700 rounded-xl py-4 px-8 font-semibold dark:text-gray-50 active:bg-black dark:active:bg-stone-900 active:text-white hover:opacity-80"
on:click={() => handleInput(value)}>{value}</button
>
{/if}
{/each}
</div>
</div>
</div>
|
