73 lines
2.6 KiB
JavaScript
73 lines
2.6 KiB
JavaScript
Vue.component('tt-number-range', {
|
|
props: {
|
|
returnText: {type: Boolean, default: false},
|
|
value: [String, Object],
|
|
},
|
|
data() {
|
|
return {
|
|
inputValueFrom: this.value?.from || '',
|
|
inputValueTo: this.value?.to || '',
|
|
};
|
|
}, watch: {
|
|
value(val) {
|
|
if (typeof val === 'undefined' || val === null || val === '') {
|
|
this.inputValueFrom = '';
|
|
this.inputValueTo = '';
|
|
return;
|
|
}
|
|
|
|
if (this.returnText !== true) {
|
|
this.inputValueFrom = val.from;
|
|
this.inputValueTo = val.to;
|
|
} else {
|
|
if (val.includes('<')) {
|
|
this.inputValueFrom = '';
|
|
this.inputValueTo = val.replace('<', '');
|
|
} else if (val.includes('>')) {
|
|
this.inputValueFrom = val.replace('>', '');
|
|
this.inputValueTo = '';
|
|
} else {
|
|
this.inputValueFrom = val.split('-')[0];
|
|
this.inputValueTo = val.split('-')[1];
|
|
}
|
|
}
|
|
|
|
}
|
|
}, methods: {
|
|
updateValue() {
|
|
if (this.returnText !== true) {
|
|
this.$emit('input', {from: this.inputValueFrom || undefined, to: this.inputValueTo || undefined});
|
|
} 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: minmax(35px, 75px) minmax(20px, 25px) minmax(35px, 75px);;grid-gap: 4px;justify-content: center">
|
|
<slot name="prepend"></slot>
|
|
<input type="number"
|
|
style="-webkit-appearance: none;
|
|
-moz-appearance: textfield;"
|
|
class="form-control form-control-sm"
|
|
v-model.number="inputValueFrom"
|
|
@input="updateValue"
|
|
>
|
|
<div style="align-self: center;padding: 0 8px"><i class="fa-solid fa-sort" style="transform: rotate(90deg);"></i></div>
|
|
<input type="number"
|
|
class="form-control form-control-sm"
|
|
v-model.number="inputValueTo"
|
|
@input="updateValue"
|
|
>
|
|
</div>
|
|
`
|
|
});
|
|
|
|
|