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
|
<script>
import { preventDefault, stopPropagation } from "svelte/legacy";
import Left from "$comp/Left.svelte";
import Icon from "$comp/Icon.svelte";
import { focus, post, warning } from "$lib/utils";
import { t } from "$lib/translations";
let { v = $bindable(), cancel } = $props();
let arrow = "<";
let loading = false;
const numPad = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "C", "0", "<"];
const handleInput = (e, n) => {
e.preventDefault();
e.stopPropagation();
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 = $state(true);
</script>
<label
class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2"
>
{#if hide}
<input
onkeydown={validate}
use:focus
bind:value={v}
type="password"
class="clean text-center !text-5xl !w-96 block"
pattern="[0-9]+"
/>
{:else}
<input
onkeydown={validate}
use:focus
bind:value={v}
class="clean text-center !text-5xl !w-96 block"
type="text"
pattern="[0-9]+"
/>
{/if}
<iconify-icon
icon={hide ? "ph:eye-slash-bold" : "ph:eye-bold"}
width="32"
onclick={stopPropagation(preventDefault(() => (hide = !hide)))}
class="cursor-pointer"
></iconify-icon>
</label>
<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
{#each numPad as value}
{#if value === arrow}
<button type="button" class="btn" onclick={(e) => handleInput(e, value)}>
<Left />
</button>
{:else}
<button type="button" class="btn" onclick={(e) => handleInput(e, value)}
>{value}</button
>
{/if}
{/each}
</div>
|
