43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
const model = defineModel<string | number | {label: string, value: unknown} | undefined>();
|
|
|
|
const { readonly = false, localizeOptions = false } = defineProps<{
|
|
options: { label: string, value: string | number }[];
|
|
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"
|
|
:standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
|
|
label-color="accent"
|
|
class="q-ma-xs"
|
|
popup-content-class="text-weight-medium text-h6 rounded-5"
|
|
options-selected-class="bg-accent text-white"
|
|
:menu-offset="[0, 10]"
|
|
:options="options"
|
|
:readonly="readonly || !isEditing"
|
|
:hide-dropdown-icon="!isEditing"
|
|
:label="labelString"
|
|
:option-label="opt => localizeOptions ? $t(opt.label) : opt.label ?? opt"
|
|
hint=''
|
|
>
|
|
<template #label>
|
|
<span class="text-weight-bolder text-accent text-uppercase">{{ labelString }}</span>
|
|
</template>
|
|
|
|
<template #selected-item="scope">
|
|
<span class="text-weight-light" style="font-size: 1.2em;">{{ scope.opt.label }}</span>
|
|
</template>
|
|
</q-select>
|
|
</template> |