adrema/resources/js/components/form/Select.vue

109 lines
3.1 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">&nbsp;*</span>
</span>
<div class="real-field-wrap" :class="`size-${size}`">
<select :disabled="disabled" :name="name" :value="modelValue" @change="trigger">
<option v-if="placeholder" value="">{{ placeholder }}</option>
<option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
</select>
<div class="info-wrap">
<div v-if="hint" v-tooltip="hint">
<ui-sprite src="info-button" class="info-button"></ui-sprite>
</div>
<div v-if="size != 'xs'" class="px-1 relative">
<ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
</div>
<div v-if="size == 'xs'" class="px-1 relative">
<ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-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,
},
modelValue: {
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 [];
},
},
},
emits: ['update:modelValue'],
computed: {
parsedOptions() {
return Array.isArray(this.options)
? this.options
: map(this.options, (value, key) => {
return { name: value, id: key };
});
},
},
mounted() {
if (this.def !== -1 && typeof this.modelValue === 'undefined') {
this.$emit('update:modelValue', this.def);
return;
}
if (this.placeholder && typeof this.modelValue === 'undefined') {
this.$emit('update:modelValue', null);
}
},
methods: {
trigger(v) {
this.$emit('update:modelValue', /^[0-9]+$/.test(v.target.value) ? parseInt(v.target.value) : v.target.value ? v.target.value : null);
},
},
};
</script>