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;

    console.log('min:', min);

    const dispatch = createEventDispatcher();
    let error = null;
    let localValue = value.toString();
    function validate(event) {
        localValue = localValue.replace(/[^-0-9.]/g, '');
        // 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 (localValue.match(/^$|^-$|^\.$/) !== null) {
            error = null;
            return;
        }

        let num = parseFloat(localValue);
        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="{validate}"
            />
        </div>
    </div>

    <slot name="description" slot="description"></slot>
</Setting>