2023-04-07 21:01:56 +00:00
|
|
|
<script>
|
|
|
|
import Cleave from "cleave.js";
|
|
|
|
import { onMount } from "svelte";
|
2023-04-14 13:13:53 +00:00
|
|
|
import Error from "../Error.svelte";
|
2023-04-07 21:01:56 +00:00
|
|
|
|
|
|
|
// export let label;
|
|
|
|
export let value;
|
|
|
|
export let length = 6;
|
|
|
|
|
|
|
|
let input;
|
|
|
|
onMount(() => {
|
|
|
|
const cleaveCustom = new Cleave(input, {
|
|
|
|
blocks: [length / 2, length / 2],
|
|
|
|
delimiter: " ",
|
|
|
|
numericOnly: true,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="floating group">
|
2023-04-14 13:13:53 +00:00
|
|
|
<input id="code-input" bind:this={input} autofocus bind:value />
|
2023-04-07 21:01:56 +00:00
|
|
|
<span class="highlight" />
|
|
|
|
<span class="bar" />
|
2023-04-14 13:13:53 +00:00
|
|
|
<label for="code-input">Code</label>
|
|
|
|
|
|
|
|
<Error />
|
2023-04-07 21:01:56 +00:00
|
|
|
</div>
|