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

    const model = defineModel<string | number>({ 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
        filled
        debounce="500"
        label-color="primary"
        class="q-ma-xs text-uppercase"
        input-class="text-weight-medium text-h6"
        :hide-hint="hint === ''"
        :hint="isEditing ? hint : ''"
        :mask="mask"
        :readonly="readonly || !isEditing"
        :type="type"
        :label="labelString"
        :rules="rules"
    />
</template>