102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.gap-y-2
|
|
base-input-container(:label="label")
|
|
q-select(
|
|
v-model="value",
|
|
:options="items",
|
|
:readonly="readonly"
|
|
:disable="disable",
|
|
:hide-dropdown-icon="hideDropdownIcon"
|
|
:borderless="borderless",
|
|
:outlined="outlined",
|
|
:bg-color="bgColor",
|
|
:standout="standout",
|
|
dense,
|
|
emit-value,
|
|
map-options
|
|
)
|
|
template(v-slot:selected)
|
|
span(v-if="!value?.icon") {{ textSelect }}
|
|
q-icon(
|
|
v-else,
|
|
:name="iconSelect",
|
|
size="20px"
|
|
)
|
|
template(
|
|
v-slot:option="scope",
|
|
v-if="value?.icon"
|
|
)
|
|
q-item(v-bind="scope.itemProps", style="justify-content: center")
|
|
q-item-section(avatar, style="padding: 0px; min-width: 0px")
|
|
q-icon(:name="scope.opt.icon", size="20px")
|
|
</template>
|
|
|
|
<script>
|
|
import BaseMenu from "@/components/base/BaseMenu";
|
|
import BaseInputContainer from "@/components/base/BaseInputContainer";
|
|
|
|
export default {
|
|
name: "VSelect",
|
|
components: { BaseMenu, BaseInputContainer },
|
|
props: {
|
|
placeholder: String,
|
|
hideDropdownIcon: Boolean,
|
|
borderless: Boolean,
|
|
modelValue: [Object, String],
|
|
bgColor: {
|
|
type: String,
|
|
default: "white",
|
|
},
|
|
outlined: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
standout: {
|
|
type: [Boolean, String],
|
|
default: false,
|
|
},
|
|
items: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
behavior: {
|
|
type: String,
|
|
default: "menu",
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 18,
|
|
},
|
|
disable: Boolean,
|
|
label: String,
|
|
readonly: Boolean,
|
|
},
|
|
emits: ["update:modelValue"],
|
|
data() {
|
|
return {
|
|
open: false,
|
|
};
|
|
},
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", value);
|
|
},
|
|
},
|
|
textSelect() {
|
|
return this.value?.label ? this.value.label : this.placeholder;
|
|
},
|
|
iconSelect() {
|
|
return this.value?.icon ? this.value.icon : this.placeholder;
|
|
},
|
|
},
|
|
};
|
|
</script>
|