<script
    setup
    lang="ts"
>
    const model = defineModel<string>({ required: true });

    defineProps<{
        label?: string | undefined;
    }>();
</script>

<template>
    <q-select
        v-model="model"
        dense
        outlined
        color="accent"
        stack-label
        label-slot
        lazy-rules
        no-error-icon
        hide-bottom-space
        options-selected-class="text-white text-bold bg-accent"
        class="col q-mx-sm q-my-xs bg-dark rounded-5 shadow-12"
        popup-content-class="text-uppercase text-weight-medium rounded-5"
        popup-content-style="border: 2px solid var(--q-accent)"
        menu-anchor="bottom middle"
        menu-self="top middle"
        :menu-offset="[0, 5]"
    >
        <template #label>
            <span
                class="text-weight-bolder text-uppercase"
                style="font-size: 0.85em;"
            >
                {{ label }}
            </span>
        </template>
    </q-select>
</template>