diff --git a/packages/docs/src/en/plugins/mask.md b/packages/docs/src/en/plugins/mask.md
index 760a68871..60badfd50 100644
--- a/packages/docs/src/en/plugins/mask.md
+++ b/packages/docs/src/en/plugins/mask.md
@@ -87,57 +87,71 @@ The following wildcard characters are supported in masks:
| `9` | Only numeric characters (0-9) |
-## Custom Mask Functions
+## Dynamic Masks
-Sometimes simple mask literals (i.e. `(999) 999-9999`) are not sufficient. In these cases, `x-mask:function` allows you to dynamically generate masks on the fly based on user input.
+Sometimes simple mask literals (i.e. `(999) 999-9999`) are not sufficient. In these cases, `x-mask:dynamic` allows you to dynamically generate masks on the fly based on user input.
Here's an example of a credit card input that needs to change it's mask based on if the number starts with the numbers "34" or "37" (which means it's an Amex card and therefore has a different format).
```alpine
-
```
-As you can see in the above example, every time a user types in the input, that value is passed to the function as `$input`. Based on the `$input`, a different mask is utilized in the field.
+As you can see in the above example, every time a user types in the input, that value is passed to the expression as `$input`. Based on the `$input`, a different mask is utilized in the field.
Try it for yourself by typing a number that starts with "34" and one that doesn't.
-
+`x-mask:dynamic` also accepts a function as a result of the expression and will automatically pass it the `$input` as the the first paramter. For example:
+
+```alpine
+
+
+
+```
+
## Money Inputs
-Because writing your own custom mask function for money inputs is fairly complex, Alpine offers a prebuilt one and makes it available as `$money()`.
+Because writing your own dynamic mask expression for money inputs is fairly complex, Alpine offers a prebuilt one and makes it available as `$money()`.
Here is a fully functioning money input mask:
```alpine
-
+
```
-
+
If you wish to swap the periods for commas and vice versa (as is required in certain currencies), you can do so using the second optional parameter:
```alpine
-
+
```
-
+
diff --git a/packages/mask/src/index.js b/packages/mask/src/index.js
index 3eeaa7250..ec8c5e5ff 100644
--- a/packages/mask/src/index.js
+++ b/packages/mask/src/index.js
@@ -4,7 +4,7 @@ export default function (Alpine) {
let templateFn = () => expression
let lastInputValue = ''
- if (['function'].includes(value)) {
+ if (['function', 'dynamic'].includes(value)) {
// This is an x-mask:function directive.
let evaluator = evaluateLater(expression)
diff --git a/tests/cypress/integration/plugins/mask.spec.js b/tests/cypress/integration/plugins/mask.spec.js
index 5b01f9cc0..5ea51fe94 100644
--- a/tests/cypress/integration/plugins/mask.spec.js
+++ b/tests/cypress/integration/plugins/mask.spec.js
@@ -32,6 +32,34 @@ test('x-mask',
},
)
+test('x-mask with x-model',
+ [html`
+
+
+
+
+ `],
+ ({ get }) => {
+ // Type a phone number:
+ get('#1').type('12').should(haveValue('(12'))
+ get('#2').should(haveValue('(12'))
+ get('#1').type('3').should(haveValue('(123) '))
+ get('#2').should(haveValue('(123) '))
+ get('#1').type('4567890').should(haveValue('(123) 456-7890'))
+ get('#2').should(haveValue('(123) 456-7890'))
+ // Clear it & paste formatted version in:
+ get('#1').type('{selectAll}{backspace}')
+ get('#1').invoke('val', '(123) 456-7890').trigger('input')
+ get('#1').should(haveValue('(123) 456-7890'))
+ get('#2').should(haveValue('(123) 456-7890'))
+ // Clear it & paste un-formatted version in:
+ get('#1').type('{selectAll}{backspace}')
+ get('#1').invoke('val', '1234567890').trigger('input')
+ get('#1').should(haveValue('(123) 456-7890'))
+ get('#2').should(haveValue('(123) 456-7890'))
+ },
+)
+
test('x-mask with non wildcard alpha-numeric characters (b)',
[html``],
({ get }) => {
@@ -43,6 +71,13 @@ test('x-mask with non wildcard alpha-numeric characters (b)',
},
)
+test('x-mask:dynamic',
+ [html``],
+ ({ get }) => {
+ get('input').type('123').should(haveValue('(123)'))
+ }
+)
+
test('$money',
[html``],
({ get }) => {