88 lines
2.4 KiB
Svelte
88 lines
2.4 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
import Setting from './Setting.svelte';
|
|
|
|
export let title;
|
|
export let value;
|
|
|
|
export let unit = '';
|
|
export let min = null;
|
|
export let max = null;
|
|
export let decimal = false;
|
|
export let debounceInterval = 0;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
$: localValue = value.toString();
|
|
let lastInputTime = null;
|
|
function debounce(event) {
|
|
localValue = localValue.replace(/[^-0-9.]/g, '');
|
|
|
|
if (debounceInterval === 0) {
|
|
updateValue(localValue);
|
|
return;
|
|
}
|
|
|
|
lastInputTime = Date.now();
|
|
const eventTime = lastInputTime;
|
|
const pendingValue = localValue;
|
|
window.setTimeout(
|
|
() => {
|
|
// if no other inputs have occured since then
|
|
if (eventTime === lastInputTime) {
|
|
updateValue(pendingValue);
|
|
}
|
|
},
|
|
debounceInterval,
|
|
)
|
|
}
|
|
|
|
let error = null;
|
|
function updateValue(newValue) {
|
|
// Don't update the value, but also don't error, if it's empty
|
|
// or if it could be the start of a negative or decimal number
|
|
if (newValue.match(/^$|^-$|^\.$/) !== null) {
|
|
error = null;
|
|
return;
|
|
}
|
|
|
|
const num = parseFloat(newValue);
|
|
if (num % 1 !== 0 && !decimal) {
|
|
error = `${num} is not a whole number`;
|
|
}
|
|
else if (min !== null && num < min) {
|
|
error = `Too low (minimum ${min})`;
|
|
}
|
|
else if (max !== null && num > max) {
|
|
error = `Too large (maximum ${max})`
|
|
}
|
|
else {
|
|
error = null;
|
|
value = num;
|
|
dispatch('update', {value})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<Setting {title}>
|
|
<div slot="input">
|
|
{#if unit}
|
|
<span class="mr-2">{unit}:</span>
|
|
{/if}
|
|
<div class="tooltip tooltip-error" class:tooltip-open={error !== null} data-tip="{error}">
|
|
<input
|
|
type="text"
|
|
class="input input-sm input-bordered text-right"
|
|
size="{Math.max(5, localValue.length)}"
|
|
class:input-error={error}
|
|
bind:value={localValue}
|
|
on:input="{debounce}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<slot name="description" slot="description"></slot>
|
|
</Setting>
|