summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/SelectBox.vue
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/components/SelectBox.vue')
-rw-r--r--webapp/src/components/SelectBox.vue65
1 files changed, 35 insertions, 30 deletions
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 6f188a2..5deafa3 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -12,35 +12,37 @@
</i18n>
<template>
- <v-input class="v-text-field select-input" :class="inputClasses" :hide-details="hideDetails" :prepend-icon="prependIcon" :value="value" :rules="rules">
- <v-menu v-model="menu" offset-y :close-on-content-click="false" lazy class="select-menu non-selectable" :nudge-bottom="1">
- <div slot="activator" class="select-input-content">
- <label v-if="label !== undefined && (!singleLine || (singleLine && value.length === 0))"
- class="select-label v-label"
- :class="labelClasses"
- >{{ label }}</label>
- <div class="select-input-chips">
- <v-tooltip v-for="(item, index) in firstValueItems" :key="item[idKey]" top open-delay="800">
- <template #activator="{ on }">
- <v-chip
- v-on="on"
- class="item-chip"
- :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
- small
- close
- @input="removeItem(index)"
- >
- <div class="select-input-chip-text">{{ item.name || item.id }}</div>
- </v-chip>
- </template>
- <span>{{ item.name || item.id }}</span>
- </v-tooltip>
- <span v-if="value.length > maxShow" class="text--secondary and-more" :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }">
- + {{ value.length - maxShow }} {{ $t('more') }}
- </span>
+ <v-input class="v-text-field v-text-field--is-booted select-input" :class="inputClasses" :hide-details="hideDetails" :prepend-icon="prependIcon" :value="value" :rules="rules">
+ <v-menu v-model="menu" offset-y :close-on-content-click="false" class="select-menu non-selectable" :nudge-bottom="1">
+ <template #activator="{ on }">
+ <div v-on="on" class="select-input-content">
+ <label v-if="label !== undefined && (!singleLine || (singleLine && value.length === 0))"
+ class="select-label v-label"
+ :class="labelClasses"
+ >{{ label }}</label>
+ <div class="select-input-chips">
+ <v-tooltip v-for="(item, index) in firstValueItems" :key="item[idKey]" top open-delay="800">
+ <template #activator="{ on }">
+ <v-chip
+ v-on="on"
+ class="item-chip ma-1"
+ :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
+ small
+ close
+ @click:close="removeItem(index)"
+ >
+ <div class="select-input-chip-text">{{ item.name || item.id }}</div>
+ </v-chip>
+ </template>
+ <span>{{ item.name || item.id }}</span>
+ </v-tooltip>
+ <span v-if="value.length > maxShow" class="text--secondary and-more" :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }">
+ + {{ value.length - maxShow }} {{ $t('more') }}
+ </span>
+ </div>
+ <v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
</div>
- <v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
- </div>
+ </template>
<v-card>
<data-table
:value="value"
@@ -50,7 +52,8 @@
slim
:row-count="6"
:single-select="singleSelect"
- ></data-table>
+ >
+ </data-table>
</v-card>
</v-menu>
</v-input>
@@ -117,7 +120,8 @@ export default {
},
data () {
return {
- menu: false
+ menu: false,
+ listView: false
}
},
computed: {
@@ -205,6 +209,7 @@ export default {
.select-input-chip-text {
overflow: hidden;
text-overflow: ellipsis;
+ width: 100%;
}
.item-chip >>> .v-chip__content {