creddy/src/ui/settings/NumericSetting.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;

    const dispatch = createEventDispatcher();

    $: localValue = value.toString();
    let lastInputTime = null;
    function debounce(event) {
        lastInputTime = Date.now();
        localValue = localValue.replace(/[^-0-9.]/g, '');

        const eventTime = lastInputTime;
        const pendingValue = localValue;
        window.setTimeout(
            () => {
                // if no other inputs have occured since then
                if (eventTime === lastInputTime) {
                    updateValue(pendingValue);
                }
            },
            500
        )
    }

    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>