<script
    setup
    lang="ts"
>
    import type { ValidationRule } from 'quasar';

    const model = defineModel<string | number | undefined>({ required: true });

    const { readonly = false, hint = '' } = defineProps<{
        labelString: string;
        isEditing: boolean;
        readonly?: boolean;
        type?: "number" | "textarea" | "time" | "text" | "tel" | "password" | "email" | "search" | "file" | "url" | "date" | "datetime-local" | undefined;
        hint?: string;
        mask?: string;
        rules?: ValidationRule[];
    }>();
</script>

<template>
    <q-input
        v-model="model"
        dense
        :stack-label="!isEditing"
        autogrow
        :standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
        debounce="500"
        label-color="accent"
        label-slot
        class="q-ma-xs"
        input-class="text-weight-light"
        input-style="font-size: 1.2em"
        :hide-hint="hint === ''"
        :hint="isEditing ? hint : ''"
        :mask="mask"
        :readonly="readonly || !isEditing"
        :type="type"
        :rules="rules"
    >
        <template #label>
            <span class="text-weight-bolder text-accent text-uppercase">{{ labelString }}</span>
        </template>
    </q-input>
</template>