34 lines
704 B
Svelte
34 lines
704 B
Svelte
<script>
|
|
import Cleave from "cleave.js";
|
|
import { onMount } from "svelte";
|
|
|
|
export let error;
|
|
// 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>
|
|
|
|
<style>
|
|
.error {
|
|
color: var(--error);
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
|
|
<div class="floating group">
|
|
<input id="noasidhglk" bind:this={input} autofocus bind:value />
|
|
<span class="highlight" />
|
|
<span class="bar" />
|
|
<label for="noasidhglk">Code</label>
|
|
<div class="error" style={!error ? 'display: none;' : ''}>{error}</div>
|
|
</div>
|