feat: ✨ Aggiunti Manager dei principali componenti con stato

resources/js/Components/Managers/CircularProgressManager.ts

@@ -0,0 +1,35 @@
+import {CircularProgress} from '@material/mwc-circular-progress';
+
+import {Manager} from './Manager';
+
+export class CircularProgressManager extends Manager {
+  static selector = 'mwc-circular-progress';
+  static filter = (element: CircularProgress) => element.closest('mwc-button').type !== 'loading-button';
+
+  constructor(private loading: CircularProgress) {
+  }
+
+  public show() {
+    this.loading.open();
+  }
+
+  public hide() {
+    this.loading.close();
+  }
+
+  public get indeterminate(): boolean {
+    return this.loading.indeterminate;
+  }
+
+  public set indeterminate(value: boolean) {
+    this.loading.indeterminate = value;
+  }
+
+  public get progress(): number {
+    return this.loading.progress;
+  }
+
+  public set progress(value: number) {
+    this.loading.progress = value;
+  }
+}

resources/js/Components/Managers/DialogManager.ts

@@ -0,0 +1,18 @@
+import {Dialog} from '@material/mwc-dialog';
+
+import {Manager} from './Manager';
+
+export class DialogManager extends Manager {
+  static selector = 'dialog';
+
+  constructor(private dialog: Dialog) {
+  }
+
+  public show(dialog: Dialog) {
+    this.dialog.show();
+  }
+
+  public hide() {
+    this.dialog.close();
+  }
+}

resources/js/Components/Managers/LoadingButtonManager.ts

@@ -0,0 +1,13 @@
+import {Button} from '@material/mwc-button';
+import {CircularProgress} from '@material/mwc-circular-progress';
+import {CircularProgressManager} from '@osm/Components/Managers';
+
+export class LoadingButtonManager extends CircularProgressManager {
+  static selector = 'mwc-button[type="loading-button"]';
+
+  private loading: CircularProgress;
+
+  constructor(private button: Button) {
+    this.loading = button.querySelector('mwc-circular-progress');
+  }
+}

resources/js/Components/Managers/Manager.ts

@@ -0,0 +1,4 @@
+export abstract class Manager {
+  abstract static selector: string;
+  static filter: (element: HTMLElement) => boolean = () => true;
+}

resources/js/Components/Managers/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './CircularProgressManager';
+export * from './DialogManager';
+export * from './LoadingButtonManager';
+export * from './Manager';

resources/js/Components/index.ts

@@ -8,6 +8,7 @@ export * from './extend';
 export * from './InertiaLink';
 export * from './layout';
 export * from './LoadingButton';
+export * from './Managers';
 export * from './Mdi';
 export * from './Page';
 export * from './Pages';

resources/js/_material.ts

@@ -10,6 +10,11 @@ import {Menu as MWCMenu} from '@material/mwc-menu';
 import $ from 'cash-dom';
 
 import {IconButton} from './WebComponents';
+import {
+  CircularProgressManager,
+  DialogManager,
+  LoadingButtonManager
+} from '@osm/Components/Managers';
 
 /**
  * Handles the click event of the trigger button of a MWC Dialog or Menu.
@@ -45,6 +50,19 @@ function loadTriggers() {
   }
 }
 
+function loadManagers() {
+  const managers = [DialogManager, CircularProgressManager, LoadingButtonManager];
+
+  for (const Manager of managers) {
+    for (const element of document.querySelectorAll<HTMLElement>(Manager.selector)) {
+      // eslint-disable-next-line unicorn/no-array-callback-reference
+      if (Manager.filter(element)) {
+        app.components[element.id] = new Manager(element);
+      }
+    }
+  }
+}
+
 /**
  * Better forms accessibility
  * @example https://codesandbox.io/s/test-mwc-button-form-submit-zqgo5i?file=/src/index.ts
@@ -70,6 +88,7 @@ function betterFormsAccessibility() {
 Inertia.on('navigate', () => {
   loadTriggers();
   betterFormsAccessibility();
+  loadManagers();
 
   // Remove the ugly underline under mwc button text when inside <a> tags.
   $('a')

resources/js/globals.d.ts

@@ -18,6 +18,11 @@ import {LinearProgress as MWCLinearProgress} from '@material/mwc-linear-progress
 import {List as MWCList} from '@material/mwc-list';
 import {ListItem as MWCListItem} from '@material/mwc-list/mwc-list-item.js';
 import {Menu as MWCMenu} from '@material/mwc-menu';
+import {
+  CircularProgressManager,
+  DialogManager,
+  LoadingButtonManager
+} from '@osm/Components/Managers';
 import type cash from 'cash-dom';
 import type Mithril from 'mithril';
 import type router from 'ziggy-js';
@@ -36,10 +41,13 @@ import {
   TopAppBar
 } from './WebComponents';
 
+type ComponentManager = CircularProgressManager | DialogManager | LoadingButtonManager;
+
 declare global {
   const route: typeof router;
 
   let app: {
+    components: Record<string, ComponentManager>
     events: Record<string, Event>,
     locale: string,
     modules: OpenSTAManager.Modules,