<script setup lang="ts">
    const model = defineModel<string>();
    
    const { readonly = false, localizeOptions = false } = defineProps<{
        options: { label: string, value: string }[];
        labelString: string;
        isEditing: boolean;
        readonly?: boolean;
        localizeOptions?: boolean;
        type?: "number" | "textarea" | "time" | "text" | "tel" | "password" | "email" | "search" | "file" | "url" | "date" | "datetime-local" | undefined;
    }>();
</script>

<template>
     <q-select
        v-model="model"
        dense
        :stack-label="!isEditing"
        filled
        label-color="primary"
        class="q-ma-xs text-h6 text-uppercase"
        popup-content-class="text-weight-medium text-h6"
        input-class="text-weight-medium"
        :options="options"
        :readonly="readonly || !isEditing"
        :hide-dropdown-icon="!isEditing"
        :label="labelString"
        :option-label="opt => localizeOptions ? $t(opt) : opt"
        hint=''
    />
</template>