New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Enhancement] v-text-field with decimal amount #2138
Comments
This would probably be an extension of the current masking system to allow arbitrary mask lengths, |
I would like to see this implemented to support locales and different currency formats. Most (maybe all?) european countries use comma as decimal separator. A lot of european countries also use space as thousands separator, while others use dot. |
It's not only about separators, it's also about grouping digits, some country use 3 digits in a group (1.234.567,00) and some use 2 (12.34.567,00) |
Not sure how useful the following link is, but I post it anyways: Seems to me that recent additions to javascript and new browsers aim to make the multi-locale-currency-formatting-hell a thing of the past. |
@valpet Although it is supported at a certain extent, it's purpose is mainly for display. Using it in an |
Until a feature like this is implemented by Vuetify natively, if you're using Vuetify à la carte, you could extend VTextField in a custom FormattedInput.js component with something like:
Then import and use your new component, add a :blurred-format="myFormatMethod" prop to it, and create a "myFormatMethod" that accepts the unformatted value in its first attribute and returns the formatted value. There's probably a better way to do this, but it's what I'm currently doing until something better comes along. |
If there is an interest, I'm willing to modify AutoNumeric as needed to make it work with |
@AlexandreBonneau that would be awesome as there currently isn't any working currency support for Vuetify. The v-money directive comes close, but it won't update when the model changes. There was a PR to introduce dynamic masks (and cover numeric / currency masking) but this has been closed. I think integration with AutoNumeric would be really useful |
@plasmid87 well, if you only want a vue component that integrates AutoNumeric, you can directly use the official vue-autoNumeric component (and it support v-model updates as well as other external changes ;)). However since my goal is to have an input that behaves like Vuetify's It works for what I need, but a real integration where the If you want to play with it, have fun with that temporary component. |
@AlexandreBonneau hey this is a great hack, thank you for sharing it! 👍😀 I agree with you that directives on It might be possible to extend |
For an Excel like number input, I use the following pattern: Template
Script
Helper
|
It is worth looking at https://github.com/text-mask/text-mask for integration with vuetify. Masking is better than what vueitfy currently has and has number formatter as well. |
Apparently text-mask converted from directive to component on 2017/02/28: I'm new to Vue/Vuetify: I take it this would complicate integrating text-mask in to Vuetify? |
Well in the last 6 months I've come across my own issue 4 times... Too bad nothing has been done with it yet. Browsers already support Number.toLocaleString(), why not simply add support for that? Add a method or emit for the raw value and it's simple but effective. |
Well, on my end I tried integrating AutoNumeric with Vuetify, but with the ever-changing refactoring and mainly the fact that I don't know much about the Vuetify code organization, I unfortunately did not advance much. If a Vuetify dev is willing to team up (and do a coding session with shared screens for instance), I'm up for the task :) |
Feel free to try out my implemention here: I ran in to complications making it a standalone Node package, so for now you would just have to copy it's code directly in to the Vuetify's code's components folder. |
I just wrote a simple component that does what I need. Feel free to use it. Basically it displays |
Beautiful @Christilut! |
Just updated it for some minor fixes. And if you notice a bug, feel free to let me know (or fix 🤓 ) |
Gist it! |
@Christilut I trying to adjust this to pt-BR (BRL), but don't have success. |
I'll try to make it a bit more generic. But I can't promise it will work
with everything, too many possible options out there
…On Thu, Jun 7, 2018, 03:26 Everton Nogueira ***@***.***> wrote:
I trying to adjust this to pt-BR (BRL), but don't have success.
It's nice if anyone implements this directly to Vuetify 😄
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#2138 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ADT4A2XdU59LAepHDcg0_V37s2hyiJB3ks5t6IFfgaJpZM4P1V1O>
.
|
You can find the gist here If you find any bugs, report them there and I'll try to fix them and update the gist. I've tested € and $ which seem to work. If it feels robust enough I'll turn it into a package :) @ehvetsi try the gist version. If it doesn't work, let me know what values you're using and what you expect to see and I'll check it out. |
Thanks, it's working to me! 👍 |
Any updates? I also need a currency mask, and would love to have it without workarounds. |
I haven't had time to follow the latest Vuetify improvements, so I'm not sure if implementing AutoNumeric into a VTextField is easier now, but I'm still willing to integrate it with Vuetify, given a dev guidance! |
Can't you just change the <v-text-field
v-model="height"
min="0"
step=".1"
type="number"
></v-text-field> |
@rvboris this is great! What is this |
No tricks, just access to child ref of component |
consider using https://sarahdayan.github.io/dinero.js in a similar way moment.js is used to format time? |
@waspinator it looks like dinero.js is a library to format a given amount/currency/locale, but does not manage any live user input like a |
masks have been removed in 2.0 |
I'm terrified with this. I had many issues doing the decimal mask, the mask that came with vuetify was just perfect for the other cases. I think this is a great lost for the project. Vuetify is awesome, I love you guys but we need to talk when the subject is removal of features, maybe deprecate and remove in a next version? |
BEWARE: DOES NOT WORKUnfortunately, below solution is not working as expected. After you reset value by clicking Any solution would be appreciated.
<template>
<div>
<v-text-field ref="priceField" v-model="price" label="Price" counter="10" :rules="rules"></v-text-field>
<button @click="price = 0">Reset Button</button>
</div>
</template>
<script>
import AutoNumeric from "autonumeric";
export default {
data: function() {
return {
price: 0,
rules: [v => v.length <= 7 || "Max 7 characters"];
};
},
mounted: function() {
const vuetifyField = this.$refs.priceField; // Please note `ref="priceField"` in `v-text-field`.
const inputField = vuetifyField.$refs.input; // Raw DOM Element.
const e = new AutoNumeric(inputField); // Add autonumeric to DOM field.
}
};
</script> |
I just made a very hacky but working // VNumericField.vue extending VTextField
<script>
import { VTextField } from "vuetify/lib";
import AutoNumeric from "autonumeric";
export default {
extends: VTextField,
props: {
anOptions: { // autonumeric options (see doc)
type: Object,
required: false,
default() {
return {};
}
}
},
data() {
return {
anElement: null, // autonumeric instance
changedByInput: false // Flag to know if the value is changed by user input
};
},
mounted() {
// Create the AutoNumeric instance on the VTextField input element
this.anElement = new AutoNumeric(this.$refs.input, this.anOptions);
// Set the AutoNumeric default value
this.anElement.set(this.value);
},
methods: {
onInput() {
// User has changed the input
this.changedByInput = true; // set the flag to true
this.updateVModel(); // emit v-model
},
updateVModel() { // emit raw value
if (this.anElement !== null) {
this.$emit("input", this.anElement.getNumber());
}
},
genInput() {
const listeners = Object.assign({}, this.listeners$);
delete listeners["change"];
let element = this.$createElement("input", {
style: {},
attrs: {
...this.attrs$,
autofocus: this.autofocus,
disabled: this.disabled,
id: this.computedId,
placeholder: this.placeholder,
readonly: this.readonly,
type: this.type
},
on: {
blur: this.onBlur,
input: this.onInput,
focus: this.onFocus,
keydown: this.onKeyDown,
"autoNumeric:formatted": () => {
this.changedByInput = false; // Remove the flag when autonumeric finish formatting
}
},
ref: "input"
});
return element;
}
},
watch: {
value(newVal) {
// Check if the last v-model update is fired by the input
if (!this.changedByInput) {
this.anElement.set(this.value); // Set the AutoNumeric raw value
}
}
}
};
</script> |
there is a problem when the object is inside a dialog or v-if="false", how do you solve that?? |
try to set v-model to zero, and it doesnt work |
finally this solution works for me https://phiny1.github.io/v-currency-field/config.html#component-props |
Modified @Webifi's code above. Working example here: https://codesandbox.io/s/vuetify-money-input-ixd66 // money-text-field.js
import { VTextField } from "vuetify/lib";
var formatter = new Intl.NumberFormat("en-IE", {
style: "currency",
currency: "EUR"
});
export default {
name: "money-text-field",
extends: VTextField,
data: () => ({
inputValue: null
}),
props: {
blurredFormat: {
type: Function,
default: (v) => {
// Format and remove the currency symbol - use prefix="€" attribute for cleaner look
if (v) return formatter.format(parseFloat(v)).slice(1);
}
}
},
methods: {
showValue() {
if (!this.isFocused) {
// Store the value before change
this.inputValue = this.lazyValue;
this.lazyValue = this.blurredFormat(this.lazyValue);
} else {
// Show unformatted value on focus
this.lazyValue = this.inputValue;
}
}
},
watch: {
isFocused() {
this.showValue();
},
value() {
// Handle v-model updates
if (!this.isFocused) {
this.showValue();
}
}
},
mounted() {
this.showValue();
}
}; |
Try this; |
Displaying currency is often in a format of
3.50
but as a number it is displayed as3.5
.An option to choose the amount of decimals in a v-text-field that has
type="number"
would be nice here.Property:
decimals
as numberIf you choose 3, then it would always display contents of the text field as
3.500
.Perhaps it will display
3.5
while typing and3.500
after blur. I imagine this would make the implementation alot simpler.The text was updated successfully, but these errors were encountered: