74 lines
1.8 KiB
Vue
74 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
<v-text-field
|
|
ref="textField"
|
|
@input="handleInput"
|
|
v-currency="{
|
|
currency: null,
|
|
locale: languageName
|
|
}"
|
|
:readonly="readonly"
|
|
:disabled="disabled"
|
|
:label="label"
|
|
:rules="rules"
|
|
></v-text-field>
|
|
<p v-show="error" class="form__error v-messages theme--light error--text">
|
|
{{ error }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
/* Xeslint-disable */
|
|
//https://dm4t2.github.io/vue-currency-input/guide/#introduction
|
|
//https://codesandbox.io/s/vue-template-kd7d1?fontsize=14&module=%2Fsrc%2FApp.vue
|
|
//https://github.com/dm4t2/vue-currency-input
|
|
//NON CURRENCY MODE: https://dm4t2.github.io/vue-currency-input/config/#component
|
|
import { setValue, parseCurrency } from "vue-currency-input";
|
|
export default {
|
|
data() {
|
|
return {
|
|
internalValue: null,
|
|
internalChange: false,
|
|
languageName: window.$gz.locale.getBrowserFirstLanguage()
|
|
};
|
|
},
|
|
watch: {
|
|
value(value) {
|
|
this.internalChange = true;
|
|
setValue(this.$refs.textField.$refs.input, value);
|
|
}
|
|
},
|
|
props: {
|
|
label: String,
|
|
rules: Array,
|
|
value: { type: Number, default: null },
|
|
readonly: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false },
|
|
error: {
|
|
type: String,
|
|
required: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleInput(value) {
|
|
let parsedValue = parseCurrency(value, {
|
|
currency: null,
|
|
locale: this.languageName
|
|
});
|
|
if (this.internalChange) {
|
|
this.internalValue = parsedValue;
|
|
this.internalChange = false;
|
|
return;
|
|
}
|
|
if (parsedValue == this.internalValue) {
|
|
//nothing changed
|
|
return;
|
|
}
|
|
|
|
this.$emit("input", parsedValue);
|
|
this.internalValue = parsedValue;
|
|
}
|
|
}
|
|
};
|
|
</script>
|