49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
Vue.component('tt-number-range', {
|
|
props: {
|
|
valueFrom: {type: Number, default: 0},
|
|
valueTo: {type: Number, default: 0},
|
|
returnText: {type: Boolean, default: false}
|
|
},
|
|
data() {
|
|
return {
|
|
inputValueFrom: this.valueFrom || '', inputValueTo: this.valueTo || '',
|
|
};
|
|
}, watch: {
|
|
valueFrom(newValue) {
|
|
this.inputValueFrom = newValue;
|
|
}, valueTo(newValue) {
|
|
this.inputValueTo = newValue;
|
|
}
|
|
}, methods: {
|
|
updateValue() {
|
|
if (this.returnText !== true) {
|
|
this.$emit('input', {target: {value: {from: this.inputValueFrom, to: this.inputValueTo}}});
|
|
} else if (this.returnText === true) {
|
|
if (this.inputValueFrom === '' && this.inputValueTo === '') {
|
|
this.$emit('input', '');
|
|
} else if (this.inputValueFrom === '') {
|
|
this.$emit('input', '<' + this.inputValueTo);
|
|
} else if (this.inputValueTo === '') {
|
|
this.$emit('input', '>' + this.inputValueFrom);
|
|
} else {
|
|
this.$emit('input', this.inputValueFrom + '-' + this.inputValueTo);
|
|
}
|
|
}
|
|
}
|
|
}, template: `
|
|
<div style="display:grid;grid-template-columns: 1fr 1fr;grid-gap: 4px;">
|
|
<slot name="prepend"></slot>
|
|
<input type="number"
|
|
class="form-control form-control-sm"
|
|
v-model.number="inputValueFrom"
|
|
@input="updateValue"
|
|
>
|
|
<input type="number"
|
|
class="form-control form-control-sm"
|
|
v-model.number="inputValueTo"
|
|
@input="updateValue"
|
|
>
|
|
</div>
|
|
`
|
|
});
|