54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
const model = defineModel<string>({ required: true });
|
|
|
|
defineProps<{
|
|
label?: string | undefined;
|
|
options: string[];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col q-px-sm q-pt-md">
|
|
<q-select
|
|
v-model="model"
|
|
dense
|
|
borderless
|
|
color="accent"
|
|
label-color="white"
|
|
stack-label
|
|
label-slot
|
|
:options="options"
|
|
lazy-rules
|
|
no-error-icon
|
|
hide-bottom-space
|
|
options-selected-class="text-white text-bold bg-accent"
|
|
class="q-px-md rounded-5 inset-shadow"
|
|
:class="$q.dark.isActive ? 'bg-primary' : 'bg-secondary'"
|
|
popup-content-class="text-uppercase text-weight-medium rounded-5 shadow-12 z-top"
|
|
popup-content-style="border: 1px solid var(--q-primary)"
|
|
menu-anchor="bottom middle"
|
|
menu-self="top middle"
|
|
:menu-offset="[0, 5]"
|
|
:style="`border: 1px solid var(${$q.dark.isActive ? '--q-secondary' : '--q-primary'});`"
|
|
>
|
|
<template #label>
|
|
<span
|
|
class="text-weight-medium text-uppercase q-px-sm no-pointer-events"
|
|
:class="$q.dark.isActive ? 'bg-secondary' : 'bg-primary'"
|
|
>
|
|
{{ label }}
|
|
</span>
|
|
</template>
|
|
</q-select>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
:deep(.q-field--dense.q-field--float .q-field__label) {
|
|
transform: translate(-17px, -60%) scale(0.75) !important;
|
|
border-radius: 10px 10px 10px 0px;
|
|
}
|
|
</style> |