73 lines
1.6 KiB
Vue
Executable File
73 lines
1.6 KiB
Vue
Executable File
<template>
|
|
<label>
|
|
<span :style="{ width: width + 'em' }">{{ $t(labelTr) }}</span>
|
|
<input type="number" :value="formattedValue" :placeholder="$t(labelTr)" :title="$t(tooltipTr)"
|
|
:disabled="disabled" @change="updateValue($event.target.value)" :step="step" />
|
|
<span v-if="postfix">{{ postfix }}</span>
|
|
</label>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "FloatInputWidget",
|
|
props: {
|
|
labelTr: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: Number,
|
|
required: false,
|
|
},
|
|
tooltipTr: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
width: {
|
|
type: Number,
|
|
required: false,
|
|
default: 10
|
|
},
|
|
decimals: {
|
|
type: Number,
|
|
required: false,
|
|
default: 2
|
|
},
|
|
postfix: {
|
|
type: String,
|
|
required: false,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
formattedValue() {
|
|
return this.value != null ? this.value.toFixed(this.decimals) : '';
|
|
},
|
|
step() {
|
|
return Math.pow(10, -this.decimals);
|
|
}
|
|
},
|
|
methods: {
|
|
updateValue(value) {
|
|
this.$emit("input", parseFloat(value).toFixed(this.decimals));
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
input {
|
|
margin-right: 0.5em;
|
|
}
|
|
</style>
|