<script lang="ts">
    export let val : string;
    export let onInput : () => void = () => {};
    export let onBlur: () => void = () => {};
    export let onKeypress: (e: KeyboardEvent) => void = (e: KeyboardEvent) => {};
    export let doAutofocus: boolean = false;
    export let placeholder: string = "";
    
    function init(elem: HTMLInputElement) {
        if (doAutofocus) {
            elem.focus();
        }
    }
</script>

<input class="w-full border-b border-slate-950/50  dark:border-slate-50/50 bg-slate-50 dark:bg-slate-900 rounded-md" tabindex="1" type="text" placeholder={placeholder} bind:value={val} on:input={onInput} on:blur={onBlur} on:keypress={onKeypress} use:init size=10/>

<style>
    /* input[type=text] {
        width: 100%;
        border: none;
        border-bottom: solid 1px grey;
        font-size: 1em;
        font-weight: bold;
    } */
</style>