2019-09-28 21:42:04 +03:00
|
|
|
<template>
|
2020-06-26 04:39:14 -07:00
|
|
|
<div>
|
|
|
|
|
<v-row
|
|
|
|
|
dense
|
|
|
|
|
align="center"
|
|
|
|
|
>
|
2020-07-31 13:50:50 -07:00
|
|
|
<v-col :cols="labelCols || 2">
|
|
|
|
|
<tooltipped-label
|
|
|
|
|
:tooltip="tooltip"
|
|
|
|
|
:text="name"
|
|
|
|
|
/>
|
2020-06-26 04:39:14 -07:00
|
|
|
</v-col>
|
|
|
|
|
<v-col>
|
|
|
|
|
<v-text-field
|
|
|
|
|
v-model="localValue"
|
|
|
|
|
dark
|
|
|
|
|
class="mt-0 pt-0"
|
|
|
|
|
hide-details
|
|
|
|
|
single-line
|
2020-07-31 13:50:50 -07:00
|
|
|
color="accent"
|
2020-06-26 04:39:14 -07:00
|
|
|
type="number"
|
|
|
|
|
style="width: 70px"
|
|
|
|
|
:step="step"
|
2020-08-14 12:39:21 -07:00
|
|
|
:disabled="disabled"
|
2020-07-31 13:50:50 -07:00
|
|
|
:rules="rules"
|
2020-06-26 04:39:14 -07:00
|
|
|
/>
|
|
|
|
|
</v-col>
|
|
|
|
|
</v-row>
|
|
|
|
|
</div>
|
2019-09-28 21:42:04 +03:00
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2020-07-31 13:50:50 -07:00
|
|
|
import TooltippedLabel from "./cv-tooltipped-label";
|
|
|
|
|
|
2019-09-28 21:42:04 +03:00
|
|
|
export default {
|
|
|
|
|
name: 'NumberInput',
|
2020-07-31 13:50:50 -07:00
|
|
|
components: {
|
|
|
|
|
TooltippedLabel,
|
2019-09-28 21:42:04 +03:00
|
|
|
},
|
2020-07-31 13:50:50 -07:00
|
|
|
// eslint-disable-next-line vue/require-prop-types
|
2020-08-14 12:39:21 -07:00
|
|
|
props: ['name', 'value', 'step', 'labelCols', 'rules', 'tooltip', 'disabled'],
|
2019-10-29 23:58:06 +02:00
|
|
|
computed: {
|
|
|
|
|
localValue: {
|
|
|
|
|
get() {
|
2019-09-28 21:42:04 +03:00
|
|
|
return this.value;
|
|
|
|
|
},
|
2019-10-29 23:58:06 +02:00
|
|
|
set(value) {
|
2019-11-29 14:24:34 -05:00
|
|
|
this.$emit('input', parseFloat(value));
|
2019-09-28 21:42:04 +03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="" scoped>
|
2019-10-29 23:58:06 +02:00
|
|
|
|
2021-11-21 17:22:56 -08:00
|
|
|
</style>
|