Add Glint support to the AuDateInput component

Author: Windvis

addon/components/au-date-input.gjs

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import AuInput, { type AuInputSignature } from './au-input';
+import auDateInput, {
+  type AuDateInputModifierSignature,
+} from '../modifiers/au-date-input';
+
+export interface AuDateInputSignature {
+  Args: {
+    disabled?: AuInputSignature['Args']['disabled'];
+    error?: AuInputSignature['Args']['error'];
+    warning?: AuInputSignature['Args']['warning'];
+    width?: AuInputSignature['Args']['width'];
+    value?: AuDateInputModifierSignature['Args']['Named']['value'];
+    prefillYear?: AuDateInputModifierSignature['Args']['Named']['prefillYear'];
+    onChange?: AuDateInputModifierSignature['Args']['Named']['onChange'];
+  };
+  Element: AuInputSignature['Element'];
+}
+
+export default class AuDateInput extends Component<AuDateInputSignature> {
+  <template>
+    {{~!~}}
+    <AuInput
+      @disabled={{@disabled}}
+      @error={{@error}}
+      @icon="calendar"
+      @warning={{@warning}}
+      @width={{@width}}
+      autocomplete="off"
+      placeholder="DD-MM-JJJJ"
+      {{auDateInput value=@value prefillYear=@prefillYear onChange=@onChange}}
+      ...attributes
+    />
+    {{~!~}}
+  </template>
+}

addon/components/au-date-input.gts

@@ -11,6 +11,7 @@ import type AuCheckbox from '@appuniversum/ember-appuniversum/components/au-chec
 import type AuCheckboxGroup from '@appuniversum/ember-appuniversum/components/au-checkbox-group';
 import type AuContentHeader from '@appuniversum/ember-appuniversum/components/au-content-header';
 import type AuContent from '@appuniversum/ember-appuniversum/components/au-content';
+import type AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
 import type AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
 import type AuInput from '@appuniversum/ember-appuniversum/components/au-input';
 import type AuLinkExternal from '@appuniversum/ember-appuniversum/components/au-link-external';
@@ -35,6 +36,7 @@ export default interface AppuniversumRegistry {
   AuCheckboxGroup: typeof AuCheckboxGroup;
   AuContentHeader: typeof AuContentHeader;
   AuContent: typeof AuContent;
+  AuDateInput: typeof AuDateInput;
   AuIcon: typeof AuIcon;
   AuInput: typeof AuInput;
   AuLinkExternal: typeof AuLinkExternal;

addon/template-registry.ts

@@ -1,45 +1,55 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'dummy/tests/helpers';
 import { typeIn, fillIn, render, triggerKeyEvent } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import AuDateInput from '@appuniversum/ember-appuniversum/components/au-date-input';
+import { tracked } from '@glimmer/tracking';
+import { settled } from '@ember/test-helpers';
 
+class TestState {
+  @tracked value?: string | Date;
+}
 module('Integration | Component | au-date-input', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it adds attributes to the input element', async function (assert) {
-    await render(hbs`
-      <AuDateInput data-test-date-input />
-    `);
+    await render(<template><AuDateInput data-test-date-input /></template>);
 
     assert.dom('[data-test-date-input]').hasTagName('input');
   });
 
   test('it supports disabling the date input', async function (assert) {
-    await render(hbs`
-      <AuDateInput @disabled={{true}} data-test-date-input />
-    `);
+    await render(
+      <template>
+        <AuDateInput @disabled={{true}} data-test-date-input />
+      </template>,
+    );
 
     assert.dom('[data-test-date-input]').hasAttribute('disabled');
   });
 
   test('it accepts an iso date string or date object as a value', async function (assert) {
-    this.value = '2023-02-02';
+    const state = new TestState();
+    state.value = '2023-02-02';
 
-    await render(hbs`
-      <AuDateInput data-test-date-input @value={{this.value}} />
-    `);
+    await render(
+      <template>
+        <AuDateInput data-test-date-input @value={{state.value}} />
+      </template>,
+    );
 
     assert.dom('[data-test-date-input]').hasValue('02-02-2023');
 
-    this.set('value', new Date(2024, 5, 3));
+    state.value = new Date(2024, 5, 3);
+    await settled();
     assert.dom('[data-test-date-input]').hasValue('03-06-2024');
 
-    this.set('value', undefined);
+    state.value = undefined;
+    await settled();
     assert.dom('[data-test-date-input]').hasNoValue();
   });
 
   test('it calls @onChange with the correct date', async function (assert) {
-    this.onChange = (isoDate, date) => {
+    const onChange = (isoDate: string | null, date: Date | null) => {
       assert.strictEqual(
         isoDate,
         '2023-02-02',
@@ -51,16 +61,18 @@ module('Integration | Component | au-date-input', function (hooks) {
       );
     };
 
-    await render(hbs`
-      <AuDateInput data-test-date-input @onChange={{this.onChange}} />
-    `);
+    await render(
+      <template>
+        <AuDateInput data-test-date-input @onChange={{onChange}} />
+      </template>,
+    );
 
     await fillIn('[data-test-date-input]', '0202202');
     await typeIn('[data-test-date-input]', '3'); // fillIn alone doesn't do the trick, but typeIn has issues when typing all the characters..
   });
 
   test('it calls @onChange with `null` if the input is cleared', async function (assert) {
-    this.onChange = (isoDate, date) => {
+    const onChange = (isoDate: string | null, date: Date | null) => {
       assert.strictEqual(
         isoDate,
         null,
@@ -69,17 +81,25 @@ module('Integration | Component | au-date-input', function (hooks) {
       assert.strictEqual(date, null, 'it returns null if the input is cleared');
     };
 
-    await render(hbs`
-      <AuDateInput data-test-date-input @value="2023-02-02" @onChange={{this.onChange}} />
-    `);
+    await render(
+      <template>
+        <AuDateInput
+          data-test-date-input
+          @value="2023-02-02"
+          @onChange={{onChange}}
+        />
+      </template>,
+    );
 
-    let input = document.querySelector('[data-test-date-input]');
+    const input = document.querySelector(
+      '[data-test-date-input]',
+    ) as HTMLInputElement;
 
     await clearInput(input);
   });
 });
 
-async function clearInput(input) {
+async function clearInput(input: HTMLInputElement) {
   // Focus seems to be needed to make the backspace work
   input.focus();
 

tests/integration/components/au-date-input-test.js tests/integration/components/au-date-input-test.gts

@@ -92,6 +92,13 @@ module('Integration | Component | Loose mode', function (hooks) {
     assert.dom('[data-test-content]').exists();
   });
 
+  test('`<AuDateInput>` resolves in loose mode', async function (assert) {
+    await render(hbs`
+      <AuDateInput data-test-date-input />
+    `);
+    assert.dom('[data-test-date-input]').exists();
+  });
+
   test('`<AuIcon>` resolves in loose mode', async function (assert) {
     await render(hbs`<AuIcon data-test-icon @icon="test" />`);