131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
|
<label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
|
|
<span v-if="label" class="field-label">
|
|
{{ label }}
|
|
<span v-show="required" class="text-red-800"> *</span>
|
|
</span>
|
|
<div class="real-field-wrap" :class="`size-${size}`">
|
|
<select :disabled="disabled" :name="name" :value="value" @change="trigger">
|
|
<option v-if="placeholder" v-html="placeholder" :value="null"></option>
|
|
|
|
<option
|
|
v-for="option in parsedOptions"
|
|
:key="option.id"
|
|
v-html="option.name"
|
|
:value="option.id"
|
|
></option>
|
|
</select>
|
|
<div class="info-wrap">
|
|
<div v-if="hint" v-tooltip="hint">
|
|
<svg-sprite src="info-button" class="info-button"></svg-sprite>
|
|
</div>
|
|
<div class="px-1 relative" v-if="size != 'xs'">
|
|
<svg-sprite class="chevron w-3 h-3 fill-current" src="chevron-down"></svg-sprite>
|
|
</div>
|
|
<div class="px-1 relative" v-if="size == 'xs'">
|
|
<svg-sprite class="chevron w-2 h-2 fill-current" src="chevron-down"></svg-sprite>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<script>
|
|
import map from 'lodash/map';
|
|
|
|
export default {
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
default: function () {
|
|
return false;
|
|
},
|
|
},
|
|
id: {},
|
|
inset: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
size: {
|
|
default: function () {
|
|
return 'base';
|
|
},
|
|
},
|
|
emptyLabel: {
|
|
default: false,
|
|
type: Boolean,
|
|
},
|
|
value: {
|
|
default: undefined,
|
|
},
|
|
label: {
|
|
default: null,
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
placeholder: {
|
|
default: '--kein--',
|
|
type: String,
|
|
},
|
|
def: {
|
|
required: false,
|
|
type: Number,
|
|
default: -1,
|
|
},
|
|
name: {
|
|
required: true,
|
|
},
|
|
hint: {},
|
|
options: {
|
|
default: function () {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
parsedOptions() {
|
|
return Array.isArray(this.options)
|
|
? this.options
|
|
: map(this.options, (value, key) => {
|
|
return {name: value, id: key};
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
trigger(v) {
|
|
this.$emit(
|
|
'input',
|
|
isNaN(parseInt(v.target.value)) ? (v.target.value ? v.target.value : null) : parseInt(v.target.value)
|
|
);
|
|
},
|
|
clear() {
|
|
this.$emit('input', null);
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.def !== -1 && typeof this.value === 'undefined') {
|
|
this.$emit('input', this.def);
|
|
return;
|
|
}
|
|
|
|
if (this.placeholder && typeof this.value === 'undefined') {
|
|
this.$emit('input', null);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.inset-bg {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
hsl(247.5, 66.7%, 97.6%) 0%,
|
|
hsl(247.5, 66.7%, 97.6%) 41%,
|
|
hsl(0deg 0% 100%) 41%,
|
|
hsl(180deg 0% 100%) 100%
|
|
);
|
|
}
|
|
</style>
|