summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/SelectBox.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-25 20:22:13 +0100
committerUdo Walter2019-02-25 20:22:13 +0100
commit000fed17d2c3a896085f5fef6de2f46a9b4cbc7f (patch)
tree99daccb52c9101aa6bc56aef8c39516a67ab4701 /webapp/src/components/SelectBox.vue
parent[webapp/datatable] fix bug caused by npm update (diff)
downloadbas-000fed17d2c3a896085f5fef6de2f46a9b4cbc7f.tar.gz
bas-000fed17d2c3a896085f5fef6de2f46a9b4cbc7f.tar.xz
bas-000fed17d2c3a896085f5fef6de2f46a9b4cbc7f.zip
[webapp/registration] switch to the new selctbox for groups selection
Diffstat (limited to 'webapp/src/components/SelectBox.vue')
-rw-r--r--webapp/src/components/SelectBox.vue92
1 files changed, 64 insertions, 28 deletions
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 89afc5b..d8a4417 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -12,12 +12,13 @@
</i18n>
<template>
- <v-menu v-model="menu" offset-y :close-on-content-click="false" lazy class="select-menu non-selectable">
- <v-input class="v-text-field primary--text select-input" :class="{ 'v-input--is-focused': menu }" slot="activator"
- hide-details
- label="asdf"
- >
- <div class="select-input-content">
+ <v-input class="v-text-field select-input" :class="inputClasses" :hide-details="hideDetails" :prepend-icon="prependIcon">
+ <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-chip
class="item-chip"
@@ -30,18 +31,17 @@
close
@input="removeItem(index)"
>
- <div style="overflow: hidden; text-overflow: ellipsis;">{{ item.name || item.id }}</div>
+ <div class="select-input-chip-text">{{ item.name || item.id }}</div>
</v-chip>
- <span v-if="value.length > maxShow" class="and-more">+ {{ value.length - maxShow }} {{ $t('more') }}</span>
+ <span v-if="value.length > maxShow" class="text--secondary and-more">+ {{ value.length - maxShow }} {{ $t('more') }}</span>
</div>
- <v-icon :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''" style="margin-top: 4px">arrow_drop_down</v-icon>
+ <v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
</div>
- </v-input>
-
- <v-card>
- <data-table :value="value" @input="$emit('input', $event)" :headers="headers" :items="items" slim :row-count="6"></data-table>
- </v-card>
- </v-menu>
+ <v-card>
+ <data-table :value="value" @input="$emit('input', $event)" :headers="headers" :items="items" slim :row-count="6"></data-table>
+ </v-card>
+ </v-menu>
+ </v-input>
</template>
<script>
@@ -79,6 +79,20 @@ export default {
maxRows: {
type: Number,
default: 3
+ },
+ label: {
+ type: String
+ },
+ hideDetails: {
+ type: Boolean,
+ default: false
+ },
+ singleLine: {
+ type: Boolean,
+ default: false
+ },
+ prependIcon: {
+ type: String
}
},
data () {
@@ -97,6 +111,22 @@ export default {
return [
{ key: this.textKey, text: this.computedTextHeading }
]
+ },
+ inputClasses () {
+ const classes = {}
+ if (this.menu) {
+ classes['primary--text'] = true
+ classes['v-input--is-label-active'] = true
+ classes['v-input--is-focused'] = true
+ }
+ if (this.singleLine) classes['single-line'] = true
+ return classes
+ },
+ labelClasses () {
+ const classes = {}
+ if (!this.menu || this.singleLine) classes['text--secondary'] = true
+ if (!this.singleLine && (this.menu || this.value.length > 0)) classes['v-label--active'] = true
+ return classes
}
},
watch: {
@@ -109,9 +139,6 @@ export default {
const newValue = this.value.slice(0)
newValue.splice(index, 1)
this.$emit('input', newValue)
- },
- test () {
- console.log('asdf')
}
}
}
@@ -125,25 +152,37 @@ export default {
}
.select-input {
- margin: 0;
- padding: 0;
+ margin-bottom: 0;
padding-bottom: 1px;
}
+.select-input.single-line {
+ margin-top: 0;
+ padding-top: 0;
+}
+
.select-input-content {
width: 100%;
+ min-height: 32px;
display: flex;
align-items: flex-start;
}
+.select-input-arrow {
+ margin-top: 4px
+}
+
.select-input-chips {
display: flex;
flex-wrap: wrap;
- text-transform: none;
- min-height: 34px;
flex: 1;
}
+.select-input-chip-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.item-chip >>> .v-chip__content {
width: 100%;
cursor: pointer;
@@ -160,11 +199,8 @@ export default {
margin: 4px 17px;
}
-.theme--dark .and-more {
- color: rgb(255, 255, 255);
-}
-
-.theme--light .and-more {
- color: rgba(0, 0, 0, 0.87);
+.select-label {
+ position: absolute;
+ left: 0;
}
</style>