aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Pinpad.svelte
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
committerAdam Soltys <[email protected]>2023-12-01 20:04:13 -0800
commit216a600224fde22ce76b367557a02094ec693886 (patch)
treed1189bbaa39db204633523132a7d4767b952717d /src/components/Pinpad.svelte
parent7d9bc1f54dfd04172e8d6d43ebc2efd6f407e833 (diff)
downloadcoinos-ui-216a600224fde22ce76b367557a02094ec693886.tar.gz
coinos-ui-216a600224fde22ce76b367557a02094ec693886.zip
prettier
Diffstat (limited to 'src/components/Pinpad.svelte')
-rw-r--r--src/components/Pinpad.svelte144
1 files changed, 76 insertions, 68 deletions
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index f55dc40d..5db23154 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,80 +1,88 @@
<script>
- import { Left, Icon } from '$comp';
- import { focus, post, warning } from '$lib/utils';
- import { t } from '$lib/translations';
+ import { Left, Icon } from "$comp";
+ import { focus, post, warning } from "$lib/utils";
+ import { t } from "$lib/translations";
- export let v;
- export let cancel;
+ export let v;
+ export let cancel;
- let arrow = '<';
- let loading = false;
+ let arrow = "<";
+ let loading = false;
- const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', '0', '<'];
+ 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;
- };
+ 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 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;
+ 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"
- pattern="[0-9]+"
- />
- {:else}
- <input
- on:keydown={validate}
- bind:value={v}
- class="outline-none border-0 text-center py-0"
- type="text"
- pattern="[0-9]+"
- />
- {/if}
- <button type="button" on:click={() => (hide = !hide)} class="absolute -right-5 top-5">
- <Icon icon={hide ? 'eye-off' : 'eye'} style="w-8" />
- </button>
- </div>
+ <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"
+ pattern="[0-9]+"
+ />
+ {:else}
+ <input
+ on:keydown={validate}
+ bind:value={v}
+ class="outline-none border-0 text-center py-0"
+ type="text"
+ pattern="[0-9]+"
+ />
+ {/if}
+ <button
+ type="button"
+ on:click={() => (hide = !hide)}
+ class="absolute -right-5 top-5"
+ >
+ <Icon icon={hide ? "eye-off" : "eye"} style="w-8" />
+ </button>
+ </div>
- <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
- {#each numPad as value}
- {#if value === arrow}
- <button
- type="button"
- class="bg-primary rounded-xl py-4 px-8 font-semibold 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 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
- on:click={() => handleInput(value)}>{value}</button
- >
- {/if}
- {/each}
- </div>
- </div>
+ <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
+ {#each numPad as value}
+ {#if value === arrow}
+ <button
+ type="button"
+ class="bg-primary rounded-xl py-4 px-8 font-semibold 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 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+ on:click={() => handleInput(value)}>{value}</button
+ >
+ {/if}
+ {/each}
+ </div>
+ </div>
</div>