Quasar: [request] QInput Currency or custom mask using Vue filter

[ajcastro]

I have search other issues and also checked the documentation and also asked in the discord, but I did not find a solution on how to setup QInput to have a currency mask. The currency mask should have the options to set the decimal point character (default: '.') and the thousands-separator character (default ,).

I am not sure how can I achieve this, maybe like this e.g.:

<q-input 
  mask="currency"
  decimal-point="." // default is "."
  thousands-separator="," // default is ","
/>

or maybe pass a callback formatter or a registered Vue.filter like this?:

Vue.filter('currency', (value, options) => {})

<q-input
  mask="currency"
/>

Related:

462

2101

[ajcastro]

I inspected the source code where masking happens (https://github.com/quasarframework/quasar/blob/dev/quasar/src/mixins/mask.js), the method __mask(),.
I think it is possibe (and easy) if we allow mask to use our Vue.filter methods. One thing also to consider is that we should create an unmask method for that will be called in the __unmask() method.
Maybe we can set a convention to create a <mask_name>_unmask filter for it.

Vue.filter('currency', (value, options) => {}) 
Vue.filter('currency_unmask', (value, options) => {})

[ajcastro]

Or maybe I will just create <money /> component that will do this thing that wraps the q-input

[frankdors]

My Custom Quasar Input Number using
https://gist.github.com/frankdors/474dc923fb027eefb44d8a989d63486e

[kimini507]

Hi, I'm not sure if this should be in the QInput scope or a new component entirely but it would be good to have this kind of behavior

Let's say we are inputting a money value

• if number was inserted format/mask input to put thousands separator if applicable
• if thousands separator is pressed, check if applicable then reflect in the view
• if decimal separator is pressed, check if applicable (must only be shown once)

so it's really just adding the thousands separator for the display value without affecting the model

[paulop]

Hi,
I believe an "Input of Currency" is very important.

An example would be the value that comes from the server as float.

And Model continues as float

Mask Input Not being useful.

https://codepen.io/paulop/pen/KKKGEwp?editors=1011

mask
https://quasar.dev/vue-components/input#Example--Filling-the-mask-in-reverse

In Discord's chat.
I was suggested to use this component, but it is without maintenance.

https://github.com/TobyMosque/app-extension-qdecimal

[pdanpdan]

Please create also a codepen with an input using your preferred vue mask library (without quasar).
I'll show you how to use it in quasar.

[pdanpdan]

Ok, I think I was quicker: https://codepen.io/pdanpdan/pen/KKKrwbe?editors=1011

Watch out if using v-money directive because it doesn't support masked values (so a numeric value of 12.30 width a mask of 2 decimals will show 1.23 - but take it to v-mask people)

I'll add an example to documentation.

[rstoenescu]

QInput usage with 3rd party on docs added. Will be visible on next deployment.