2021-09-16 21:08:02 +02:00
|
|
|
<template>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<div v-if="useinput">
|
|
|
|
|
<q-select
|
|
|
|
|
:multiple="multiple"
|
|
|
|
|
rounded
|
|
|
|
|
outlined
|
2021-12-17 18:30:18 +01:00
|
|
|
v-bind="$attrs"
|
2021-09-16 21:08:02 +02:00
|
|
|
:input-class="myclass"
|
2021-10-04 01:29:15 +02:00
|
|
|
:model-value="myvalue"
|
2021-09-16 21:08:02 +02:00
|
|
|
:use-input="useinput"
|
|
|
|
|
input-debounce="0"
|
|
|
|
|
@new-value="newvaluefunc"
|
|
|
|
|
new-value-mode="add-unique"
|
2021-12-11 00:25:35 +01:00
|
|
|
:options="valori"
|
2021-09-16 21:08:02 +02:00
|
|
|
:option-value="optval"
|
|
|
|
|
:option-label="optlab"
|
2021-10-04 01:29:15 +02:00
|
|
|
@update:model-value="changeval"
|
2021-09-16 21:08:02 +02:00
|
|
|
:label="label"
|
2021-12-02 10:12:57 +01:00
|
|
|
:dense="dense">
|
2021-09-16 21:08:02 +02:00
|
|
|
</q-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<q-select
|
|
|
|
|
:multiple="multiple"
|
|
|
|
|
rounded
|
|
|
|
|
outlined
|
|
|
|
|
:dense="dense"
|
|
|
|
|
:input-class="myclass"
|
2021-10-04 01:29:15 +02:00
|
|
|
:model-value="myvalue"
|
2021-12-11 00:25:35 +01:00
|
|
|
:options="valori"
|
2021-09-16 21:08:02 +02:00
|
|
|
:option-value="optval"
|
|
|
|
|
:option-label="optlab"
|
2021-10-04 01:29:15 +02:00
|
|
|
@update:model-value="changeval"
|
2021-09-16 21:08:02 +02:00
|
|
|
:label="label"
|
|
|
|
|
emit-value
|
2021-12-17 18:30:18 +01:00
|
|
|
options-selected-class="text-deep-orange"
|
2021-09-16 21:08:02 +02:00
|
|
|
map-options
|
2021-12-17 18:30:18 +01:00
|
|
|
v-bind="$attrs"
|
2021-12-02 10:12:57 +01:00
|
|
|
style="min-width: 170px; max-width: 400px;">
|
2021-12-17 18:30:18 +01:00
|
|
|
<template v-slot:option="scope">
|
|
|
|
|
<q-item v-bind="scope.itemProps">
|
|
|
|
|
<q-item-section avatar>
|
|
|
|
|
<q-icon :name="scope.opt.icon ? scope.opt.icon : ''"/>
|
|
|
|
|
</q-item-section>
|
|
|
|
|
<q-item-section>
|
|
|
|
|
<q-item-label>{{ scope.opt.descr }}</q-item-label>
|
|
|
|
|
</q-item-section>
|
|
|
|
|
</q-item>
|
|
|
|
|
</template>
|
|
|
|
|
|
2021-09-16 21:08:02 +02:00
|
|
|
</q-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" src="./CMySelect.ts">
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import './CMySelect.scss';
|
|
|
|
|
</style>
|