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 c83b807. * Add money format precision documentation * Update mask.md --------- Co-authored-by: Josh Hanley <[email protected]>
alpinejs · Mar 7, 2023 · 04ff2c7 · 04ff2c7
1 parent 0a360fb
commit 04ff2c7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/docs/src/en/plugins/mask.md b/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 -->
diff --git a/packages/mask/src/index.js b/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

diff --git a/tests/cypress/integration/plugins/mask.spec.js b/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'))
+    }
+)