fix: Fix casing attributi

resources/ts/Components/DataTable/RecordsTable.tsx

@@ -70,6 +70,7 @@ export default class RecordsTable<M extends Model<any, any>, A extends RecordsTa
   setDefaultAttributes(vnode: Vnode<A, this>) {
     vnode.attrs.paginated ??= true;
     vnode.attrs['current-page-size'] ??= 10;
+    // @ts-ignore - False positive
     vnode.attrs['custom-pagination'] ??= true;
   }
 

resources/ts/Components/Dialogs/DeleteRecordDialog.tsx

@@ -30,7 +30,7 @@ export default class DeleteRecordDialog<M extends Model<any, any>, A extends Del
         <h2 slot="headline">{__('Elimina record')}</h2>
         <p>{text}</p>
         <ul>{this.records.map((record) => <li key={record.getId()}>{this.recordSummary(record, vnode)}</li>)}</ul>
-        <md-text-button id="discard-button" slot="footer" dialogAction="cancel">
+        <md-text-button id="discard-button" slot="footer" dialog-action="cancel">
           {__('No')}
         </md-text-button>
         <md-text-button id="confirm-button" slot="footer" onclick={this.onConfirmButtonClicked.bind(this)}>

resources/ts/Components/Dialogs/Dialog.tsx

@@ -13,12 +13,9 @@ import {
   Attributes,
   Component
 } from 'mithril-utilities';
+import {KebabCasedProperties} from 'type-fest';
 
-export interface DialogAttributes extends Attributes, Partial<Pick<MDDialog,
+export interface DialogAttributes extends Attributes, Partial<KebabCasedProperties<Omit<MDDialog, 'open' | 'style'>>> {
-'fullscreen' | 'fullscreenBreakpoint' | 'footerHidden' | 'stacked' | 'defaultAction' |
-'actionAttribute' | 'focusAttribute' | 'scrimClickAction' | 'escapeKeyAction' | 'modeless' |
-'draggable' | 'transition'
->> {
   open?: Stream<boolean>;
   onOpen?: () => void;
   onClose?: () => void;

resources/ts/Components/Page.tsx

@@ -40,7 +40,7 @@ export default abstract class Page<A extends PageAttributes = PageAttributes> ex
   oncreate(vnode: VnodeDOM<A, this>) {
     super.oncreate(vnode);
 
-    for (const element of this.element.querySelectorAll<HTMLElement>('[autoanimate]')) {
+    for (const element of this.element.querySelectorAll<HTMLElement>('[auto-animate]')) {
       autoAnimate(element);
     }
 

resources/ts/Views/LoginPage.tsx

@@ -60,7 +60,7 @@ export default class LoginPage extends Page {
             {this.forgotPasswordFields().toArray()}
           </div>
         </Form>
-        <md-text-button dialogAction="cancel" slot="footer" label={__('Annulla')}></md-text-button>
+        <md-text-button dialog-action="cancel" slot="footer" label={__('Annulla')}></md-text-button>
         <md-filled-button slot="footer" onclick={this.onForgotPasswordDialogSubmitButtonClicked.bind(this)}>
           {__('Invia')}
         </md-filled-button>

resources/ts/Views/Setup/SetupPage.tsx

@@ -52,7 +52,7 @@ export default class SetupPage extends Page<SetupPageAttributes> {
   contents(vnode: Vnode<SetupPageAttributes>) {
     return <>
       <h1>{__('Configurazione iniziale')}</h1>
-      <div autoAnimate>
+      <div auto-animate>
         {m(this.steps[this.currentStep()], {
           ...vnode.attrs.page.props,
           onSaveInstall: this.onSaveInstall.bind(this),

resources/ts/Views/Setup/Steps/AdminUserStep.tsx

@@ -85,7 +85,7 @@ export default class AdminUserStep extends SetupStep<AdminUserStepAttributes> {
 
   nextButton() {
     return (
-      <md-filled-button onclick={() => this.element.querySelector('form')?.requestSubmit()} disabled={!this.isNextButtonEnabled()} trailingIcon>
+      <md-filled-button onclick={() => this.element.querySelector('form')?.requestSubmit()} disabled={!this.isNextButtonEnabled()} trailing-icon>
         {__('Salva e installa')}
         <MdIcon icon={mdiChevronRight} slot="icon"/>
       </md-filled-button>

resources/ts/Views/Setup/Steps/RegionalSettings.tsx

@@ -57,21 +57,21 @@ export default class RegionalSettings extends SetupStep {
     return collect<VnodeCollectionItem>({
       long_date_format: (
         // eslint-disable-next-line sonarjs/no-duplicate-string
-        <md-filled-text-field name="long_date_format" label={__('Formato data lunga')} required state={this.dateFormats.long} supportingText={__('Anteprima: :date', {
+        <md-filled-text-field name="long_date_format" label={__('Formato data lunga')} required state={this.dateFormats.long} supporting-text={__('Anteprima: :date', {
           date: dayjs().format(this.dateFormats.long())
         })}>
           <MdIcon icon={mdiCalendarClockOutline} slot="leadingicon"/>
         </md-filled-text-field>
       ),
       short_date_format: (
-        <md-filled-text-field name="short_date_format" label={__('Formato data corta')} required state={this.dateFormats.short} supportingText={__('Anteprima: :date', {
+        <md-filled-text-field name="short_date_format" label={__('Formato data corta')} required state={this.dateFormats.short} supporting-text={__('Anteprima: :date', {
           date: dayjs().format(this.dateFormats.short())
         })}>
           <MdIcon icon={mdiCalendarMonthOutline} slot="leadingicon"/>
         </md-filled-text-field>
       ),
       time_format: (
-        <md-filled-text-field name="time_format" label={__('Formato orario')} required state={this.dateFormats.time} supportingText={__('Anteprima: :date', {
+        <md-filled-text-field name="time_format" label={__('Formato orario')} required state={this.dateFormats.time} supporting-text={__('Anteprima: :date', {
           date: dayjs().format(this.dateFormats.time())
         })}
         >

resources/ts/Views/Setup/Steps/SetupStep.tsx

@@ -68,7 +68,7 @@ export abstract class SetupStep<A extends SetupStepAttributes = SetupStepAttribu
 
   nextButton(vnode: Vnode<A, this>): Children {
     return (
-      <md-outlined-button onclick={this.onNextButtonClicked.bind(this, vnode)} disabled={!this.isNextButtonEnabled(vnode)} trailingIcon={true}>
+      <md-outlined-button onclick={this.onNextButtonClicked.bind(this, vnode)} disabled={!this.isNextButtonEnabled(vnode)} trailing-icon>
         {__('Prossimo')}
         <MdIcon icon={mdiChevronRight} slot="icon"/>
       </md-outlined-button>

resources/ts/typings/jsx.d.ts

@@ -3,6 +3,7 @@ import 'mithril-utilities/typings';
 import {LayoutGridAttributes} from '@maicol07/material-web-additions/layout-grid/lib/layout-grid';
 import {Collection} from 'collect.js';
 import Mithril from 'mithril';
+import {KebabCasedProperties} from 'type-fest';
 
 export type VnodeCollectionItem = Record<string, Mithril.Vnode>;
 export type VnodeCollection = Collection<VnodeCollectionItem>;
@@ -19,7 +20,19 @@ declare module 'csstype' {
 declare module 'mithril' {
   interface Attributes extends LayoutGridAttributes {
     // Needed for md-dialog
-    dialogAction?: string | 'ok' | 'discard' | 'close' | 'cancel' | 'accept' | 'decline',
+    'dialog-action'?: string | 'ok' | 'discard' | 'close' | 'cancel' | 'accept' | 'decline',
-    autoAnimate?: boolean
+    'auto-animate'?: boolean
+  }
+}
+
+declare global {
+  // Convert to kebab-case all attributes of HTMLElementTagNameMap
+  type HTMLElementTagNameMapKebab = {
+    [P in keyof HTMLElementTagNameMap]: KebabCasedProperties<HTMLElementTagNameMap[P]>
+  };
+  namespace JSX {
+    type IntrinsicElements = {
+      [tag in keyof HTMLElementTagNameMapKebab]: Omit<Partial<HTMLElementTagNameMapKebab[tag]>, 'style'> & Mithril.Attributes;
+    };
   }
 }