Merge pull request #489 from appuniversum/chore/more-gts

More Glint / TS conversion

Author: Windvis

addon/components/au-modal.gjs addon/components/au-modal.gts

@@ -1,4 +1,4 @@
-import { AuIcon } from '@appuniversum/ember-appuniversum';
+import type { TOC } from '@ember/component/template-only';
 import { assert } from '@ember/debug';
 import { concat, hash } from '@ember/helper';
 import { on } from '@ember/modifier';
@@ -7,20 +7,49 @@ import Component from '@glimmer/component';
 import { focusTrap } from 'ember-focus-trap';
 import { CrossIcon } from './icons/cross';
 import { cn } from '../private/helpers/class-names';
+import AuIcon from './au-icon';
 
 // TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
 import not from 'ember-truth-helpers/helpers/not';
 import or from 'ember-truth-helpers/helpers/or';
 
 const FOCUS_TRAP_ADDITIONAL_ELEMENTS = ['#ember-basic-dropdown-wormhole'];
 
-export default class AuModal extends Component {
-  constructor() {
-    super(...arguments);
+export interface AuModalSignature {
+  Args: {
+    closable?: boolean;
+    closeModal?: () => void;
+    id?: string;
+    initialFocus?: string;
+    modalOpen?: boolean;
+    overflow?: boolean;
+    padding?: 'none';
+    size?: 'large' | 'fullscreen';
+    title?: string;
+  };
+  Blocks: {
+    body: [];
+    footer: [];
+    title: [];
+    default: [
+      {
+        Body: typeof Body;
+        Footer: typeof Footer;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuModal extends Component<AuModalSignature> {
+  destinationElement: HTMLElement;
+
+  constructor(owner: unknown, args: AuModalSignature['Args']) {
+    super(owner, args);
 
     this.destinationElement = document.querySelector(
       '[data-au-modal-container]',
-    );
+    ) as HTMLElement;
 
     assert(
       'au-modal: No target element was found. Please add the `<AuModalContainer />` component where appropriate.',
@@ -161,13 +190,13 @@ export default class AuModal extends Component {
     {{/if}}
   </template>
 }
-const Body = <template>
+const Body: TOC<{ Blocks: { default: [] } }> = <template>
   <div class="au-c-modal__body" data-test-modal-body>
     {{yield}}
   </div>
 </template>;
 
-const Footer = <template>
+const Footer: TOC<{ Blocks: { default: [] } }> = <template>
   <div class="au-c-modal__footer" data-test-modal-footer>
     {{yield}}
   </div>

addon/components/au-radio-group.gjs addon/components/au-radio-group.gts

@@ -1,12 +1,34 @@
-import { AuRadio } from '@appuniversum/ember-appuniversum';
 import { hash } from '@ember/helper';
 import { guidFor } from '@ember/object/internals';
 import Component from '@glimmer/component';
+import type { WithBoundArgs } from '@glint/template';
+import AuRadio, { type AuRadioSignature } from './au-radio';
 
 // TODO: replace these with the named imports from ember-truth-helpers v4 once our dependencies support that version
 import or from 'ember-truth-helpers/helpers/or';
 
-export default class AuRadioGroup extends Component {
+export interface AuRadioGroupSignature {
+  Args: {
+    alignment?: 'inline';
+    disabled?: AuRadioSignature['Args']['disabled'];
+    name?: AuRadioSignature['Args']['name'];
+    onChange?: AuRadioSignature['Args']['onChangeGroup'];
+    selected?: AuRadioSignature['Args']['groupValue'];
+  };
+  Blocks: {
+    default: [
+      {
+        Radio: WithBoundArgs<
+          typeof AuRadio,
+          'name' | 'inGroup' | 'groupValue' | 'disabled' | 'onChangeGroup'
+        >;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+}
+
+export default class AuRadioGroup extends Component<AuRadioGroupSignature> {
   uniqueName = guidFor(this);
 
   get alignmentClass() {

addon/components/au-radio.gjs addon/components/au-radio.gts

@@ -6,22 +6,43 @@ import { action } from '@ember/object';
 import and from 'ember-truth-helpers/helpers/and';
 import not from 'ember-truth-helpers/helpers/not';
 
-export default class AuRadio extends Component {
+interface PrivateArgs {
+  groupValue?: unknown;
+  inGroup?: boolean;
+  onChangeGroup?: (selected: string | undefined, event: Event) => void;
+}
+
+export interface AuRadioSignature {
+  Args: {
+    checked?: boolean;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (selected: string, event: Event) => void;
+    value?: string;
+  } & PrivateArgs;
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLInputElement;
+}
+
+export default class AuRadio extends Component<AuRadioSignature> {
   get checked() {
     const { inGroup, checked, groupValue, value } = this.args;
     return inGroup ? value === groupValue : checked;
   }
 
   @action
-  onChange(event) {
+  onChange(event: Event) {
     const { inGroup, onChange, onChangeGroup, value } = this.args;
 
     if (inGroup && typeof onChangeGroup === 'function') {
       onChangeGroup(value, event);
     } else if (typeof onChange === 'function') {
-      onChange(event.target.value, event);
+      onChange((event.target as AuRadioSignature['Element']).value, event);
     }
   }
+
   <template>
     {{~!~}}
     <label

addon/components/au-table.gjs addon/components/au-table.gts

@@ -1,6 +1,19 @@
 import Component from '@glimmer/component';
 
-export default class AuTable extends Component {
+export interface AuTableSignature {
+  Args: {
+    size?: 'small';
+  };
+  Blocks: {
+    body: [];
+    footer: [];
+    header: [];
+    title: [];
+  };
+  Element: HTMLTableElement;
+}
+
+export default class AuTable extends Component<AuTableSignature> {
   get size() {
     if (this.args.size == 'small') return 'au-c-table--small';
     else return '';

addon/components/au-tabs.gjs

@@ -0,0 +1,34 @@
+import type { TOC } from '@ember/component/template-only';
+
+export interface AuTabsSignature {
+  Args: {
+    reversed?: boolean;
+  };
+  Blocks: {
+    default: [typeof Tab];
+  };
+  Element: HTMLElement;
+}
+
+const AuTabs: TOC<AuTabsSignature> = <template>
+  <nav class="au-c-tabs {{if @reversed 'au-c-tabs--reversed'}}" ...attributes>
+    <ul class="au-c-tabs-list">
+      {{yield Tab}}
+    </ul>
+  </nav>
+</template>;
+
+export default AuTabs;
+
+interface TabSignature {
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLLIElement;
+}
+
+const Tab: TOC<TabSignature> = <template>
+  <li class="au-c-tabs-list__item" ...attributes>
+    {{yield}}
+  </li>
+</template>;

addon/components/au-tabs.gts

@@ -1,6 +1,19 @@
 import Component from '@glimmer/component';
 
-export default class AuTextarea extends Component {
+export interface AuTextareaSignature {
+  Args: {
+    disabled?: boolean;
+    error?: boolean;
+    warning?: boolean;
+    width?: 'block';
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLTextAreaElement;
+}
+
+export default class AuTextarea extends Component<AuTextareaSignature> {
   get width() {
     if (this.args.width == 'block') return 'au-c-textarea--block';
     else return '';

addon/components/au-textarea.gjs addon/components/au-textarea.gts

@@ -31,9 +31,15 @@ import type AuMainContainer from '@appuniversum/ember-appuniversum/components/au
 import type AuMainFooter from '@appuniversum/ember-appuniversum/components/au-main-footer';
 import type AuMainHeader from '@appuniversum/ember-appuniversum/components/au-main-header';
 import type AuModalContainer from '@appuniversum/ember-appuniversum/components/au-modal-container';
+import type AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
 import type AuNavigationLink from '@appuniversum/ember-appuniversum/components/au-navigation-link';
 import type AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
 import type AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+import type AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-radio-group';
+import type AuRadio from '@appuniversum/ember-appuniversum/components/au-radio';
+import type AuTable from '@appuniversum/ember-appuniversum/components/au-table';
+import type AuTabs from '@appuniversum/ember-appuniversum/components/au-tabs';
+import type AuTextarea from '@appuniversum/ember-appuniversum/components/au-textarea';
 import type AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 
 // Modifiers
@@ -73,9 +79,15 @@ export default interface AppuniversumRegistry {
   AuMainFooter: typeof AuMainFooter;
   AuMainHeader: typeof AuMainHeader;
   AuModalContainer: typeof AuModalContainer;
+  AuModal: typeof AuModal;
   AuNavigationLink: typeof AuNavigationLink;
   AuPanel: typeof AuPanel;
   AuPill: typeof AuPill;
+  AuRadioGroup: typeof AuRadioGroup;
+  AuRadio: typeof AuRadio;
+  AuTable: typeof AuTable;
+  AuTabs: typeof AuTabs;
+  AuTextarea: typeof AuTextarea;
   AuToolbar: typeof AuToolbar;
 
   // Modifiers