43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
Vue.component('tt-select', {
|
|
props: {
|
|
options: {type: Array, required: true},
|
|
label: {type: String, required: false},
|
|
required: {type: Boolean, default: false},
|
|
value: {type: [String, Number], required: false},
|
|
suffix: {type: String, required: false},
|
|
sm: {type: Boolean, default: false},
|
|
row: {type: Boolean, default: false},
|
|
},
|
|
data() {
|
|
return {
|
|
selectedOption: undefined,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.selectedOption = this.value;
|
|
},
|
|
watch: {
|
|
value(newValue) {
|
|
this.selectedOption = newValue;
|
|
},
|
|
},
|
|
template: `
|
|
<div class="form-group" :class="{'row': row}">
|
|
<label v-if="label"
|
|
:class="{'col-form-label': row, 'col-sm-4': row, 'col-form-label-sm': sm && row}"
|
|
|
|
:for="label">{{ label }}</label>
|
|
<select class="form-control" :class="{'form-control-sm': sm, 'col-sm-8': row}"
|
|
:required="required" v-model="selectedOption"
|
|
@change="$emit('input', $event.target.value ? $event.target.value : undefined)">
|
|
<template v-for="option of options">
|
|
<option v-if="['string','number'].includes(typeof option)" :value="option" :disabled="option.disabled === true">{{ option }}
|
|
<template v-if="suffix"> {{ suffix }}</template>
|
|
</option>
|
|
<option v-else :value="option.value" :disabled="option.disabled === true">{{ option.text }}</option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
`
|
|
});
|