x-mask custom decimal precision (#3415)

* Allow for custom decimal precision

* add test

* Changed formatMoney to accept an options object

Changed formatMoney to accept an options object as the second parameter
while also allowing backwards compatibility for any formatMoney(input, delimiter = '.', thousands) calls

updated tests to use options object

fixed typos in test

add test based on initial value

fix initial value test

* Revert "Changed formatMoney to accept an options object"

This reverts commit c83b80733df683e12d7fadff6e67574bbe2b3a74.

* Add money format precision documentation

* Update mask.md

---------

Co-authored-by: Josh Hanley <josh@hitsystems.com.au>

packages/docs/src/en/plugins/mask.md

@@ -171,3 +171,16 @@ You may also choose to override the thousands separator by supplying a third opt
     <input type="text" x-mask:dynamic="$money($input, '.', ' ')"  placeholder="3 000.00">
 </div>
 <!-- END_VERBATIM -->
+
+
+You can also override the default precision of 2 digits by using any desired number of digits as the fourth optional argument:
+
+```alpine
+<input x-mask:dynamic="$money($input, '.', ',', 4)">
+```
+
+<!-- START_VERBATIM -->
+<div class="demo" x-data>
+    <input type="text" x-mask:dynamic="$money($input, '.', ',', 4)"  placeholder="0.0001">
+</div>
+<!-- END_VERBATIM -->

packages/mask/src/index.js

@@ -170,7 +170,7 @@ export function buildUp(template, input) {
     return output
 }
 
-export function formatMoney(input, delimiter = '.', thousands) {
+export function formatMoney(input, delimiter = '.', thousands, precision = 2) {
     if (input === '-') return '-'
     if (/^\D+$/.test(input)) return '9'
 
@@ -201,7 +201,8 @@ export function formatMoney(input, delimiter = '.', thousands) {
 
     template = `${minus}${addThousands(template, thousands)}`
 
-    if (input.includes(delimiter)) template += `${delimiter}99`
+    if (precision > 0 && input.includes(delimiter)) 
+        template += `${delimiter}` + '9'.repeat(precision)
 
     queueMicrotask(() => {
         if (this.el.value.endsWith(delimiter)) return

tests/cypress/integration/plugins/mask.spec.js

@@ -208,3 +208,18 @@ test('$money mask negative values',
         get('#2').type('{leftArrow}{leftArrow}{leftArrow}{leftArrow}{leftArrow}-').should(haveValue('-12.50'))
     }
 )
+
+test('$money with custom decimal precision',
+    [html`
+        <input id="0" x-data x-mask:dynamic="$money($input, '.', ',', 0)" />
+        <input id="1" x-data x-mask:dynamic="$money($input, '.', ',', 1)" />
+        <input id="2" x-data x-mask:dynamic="$money($input, '.', ',', 2)" />
+        <input id="3" x-data x-mask:dynamic="$money($input, '.', ',', 3)" />
+    `],
+    ({ get }) => {
+        get('#0').type('1234.5678').should(haveValue('12,345,678'))
+        get('#1').type('1234.5678').should(haveValue('1,234.5'))
+        get('#2').type('1234.5678').should(haveValue('1,234.56'))
+        get('#3').type('1234.5678').should(haveValue('1,234.567'))
+    }
+)