Currency Mask about v-mask

[kylemilloy]

Thanks for the direction...I’ll have a PR to you later this week.  K. 

[dougiefresh49]

a workaround for using the createNumberMask function until the PR is merged is as follows

// in your vue component, in the computed properties

mask() {
      const currencyMask = createNumberMask({
          prefix: '$',
          allowDecimal: true,
          includeThousandsSeparator: true,
          allowNegative: false 
      });
      currencyMask(this.value)
          .map(v => String(v) === '\/\\d/' ? '#' : v)
          .filter(v => v !== '[]')
          .join('');
    }

it takes the output of the currency mask and transforms it to the expected string input of v-mask

[alicesouto]

May anyone help me, please? :)

[nickforddev]

One way to achieve this that doesn't seem too crazy to me is to allow for a special character that can be mapped to a regex, and then map the regex to allow for digits, as well as commas and periods. Then you can use a function similar to the filter to process this amount on blur.

The markup might look something like <input type="text" v-mask="'RRRRRR'" v-mask-pattern="/[0-9.]/" v-model="myInputModel">.

I implemented a similar feature using the jquery mask plugin years ago.

@probil Would it be difficult to add an option for custom regex patterns? I'd be happy to take a look if you are open to a PR...

[nickforddev]

@alicesouto I couldn't wait for a response on this, so I created a component that masks the input, here's a gist: https://gist.github.com/nickforddesign/014639c694eaf2c88c3e1f323ba5b755

I had a few strong opinions about this that others might disagree with, like forcing the cursor to the end of the input on focus using the event.value = event.value trick, I also always stick to 2 decimal places, so if the user inputs 12.5, it is converted to 12.50...

[probil]

Not yet supported by I have planed to make it work

[euricovidal]

+1

[thearabbit]

+1

[kylemilloy]

[phone]

[probil]

I'm busy right now to implement but it's not hard to implement.
Since we use text-mask-core under the hood we can use addons to archive that.

There is createNumberMask addon which can be used to format user input as currency
https://github.com/text-mask/text-mask/tree/master/addons/#createnumbermask

PR is welcome.

[kylemilloy]

ah I forgot I was going to write something for this..lemme give it a go.

[dougiefresh49]

@kylemilloy check out pr #455, see if its what you were thinking

[kylemilloy]

Close to what I was thinking.

I was working on something to just accept an object where you pass it a mask type with options so you can do this all inline without any configuration or importing of additional libraries. Just do a quick <input v-mask="{type: 'number', options: {prefix: '$', }}" /> kind of idea.

Your way is definitely more flexible however.

[github-actions]

🎉 This issue has been resolved in version 2.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀