Merge pull request #428 from appuniversum/feat/au-inputmask-modifier

Add a `{{au-inputmask}}` modifier

addon/components/au-input.js

@@ -1,8 +1,7 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
-import { modifier } from 'ember-modifier';
-import Inputmask from 'inputmask';
+import auInputmask from '@appuniversum/ember-appuniversum/modifiers/au-inputmask';
 
 export default class AuInput extends Component {
   constructor() {
@@ -63,7 +62,7 @@ export default class AuInput extends Component {
   }
 
   get inputmaskModifier() {
-    return this.isMasked ? InputmaskModifier : undefined;
+    return this.isMasked ? auInputmask : undefined;
   }
 
   get inputmaskOptions() {
@@ -90,22 +89,9 @@ export default class AuInput extends Component {
 
   @action
   handleChange(event) {
-    let value = event.target.inputmask.unmaskedvalue();
+    // Inputmask is a no-op if no options are provided when setting it up, as a result, the .inputmask property won't be set on the element
+    // In that situation we fall back to the regular value.
+    let value = event.target.inputmask?.unmaskedvalue() || event.target.value;
     this.args.onChange?.(value);
   }
 }
-
-const InputmaskModifier = modifier(
-  (input, positional, { inputmaskOptions }) => {
-    let inputmask = new Inputmask({
-      ...inputmaskOptions,
-    });
-
-    inputmask.mask(input);
-
-    return () => {
-      input.inputmask.remove();
-    };
-  },
-  { eager: false },
-);

addon/modifiers/au-inputmask.js

@@ -0,0 +1,15 @@
+import { modifier } from 'ember-modifier';
+import Inputmask from 'inputmask';
+
+export default modifier(
+  function auInputmask(element, positional, { options = {} }) {
+    let inputmask = new Inputmask(options);
+
+    inputmask.mask(element);
+
+    return () => {
+      element.inputmask?.remove();
+    };
+  },
+  { eager: false },
+);

app/modifiers/au-inputmask.js

@@ -0,0 +1 @@
+export { default } from '@appuniversum/ember-appuniversum/modifiers/au-inputmask';

tests/integration/modifiers/au-inputmask-test.js

@@ -0,0 +1,42 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { fillIn, find, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Modifier | au-inputmask', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it works', async function (assert) {
+    await render(
+      hbs`<label>Foo<input value="123" {{au-inputmask options=(hash mask="9.9.9")}} /></label>`,
+    );
+
+    const input = find('input');
+    assert.ok(
+      input.inputmask,
+      'the inputmask property is added to the element after initialising',
+    );
+
+    assert.strictEqual(input.value, '1.2.3', '.value returns the masked value');
+    assert.strictEqual(
+      input.inputmask.unmaskedvalue(),
+      '123',
+      '.unmaskedvalue() returns the unmasked value',
+    );
+  });
+
+  test('it supports regular input events', async function (assert) {
+    this.handleChange = (event) => {
+      assert.step(event.target.value);
+      assert.step(event.target.inputmask.unmaskedvalue());
+    };
+    await render(
+      hbs`<label>Foo<input {{au-inputmask options=(hash mask="9.9.9")}} {{on "change" this.handleChange}} /></label>`,
+    );
+
+    const input = find('input');
+    await fillIn(input, '123');
+
+    assert.verifySteps(['1.2.3', '123']);
+  });
+});