mirror of
https://github.com/devcode-it/openstamanager.git
synced 2025-06-05 22:09:38 +02:00
feat: ✨ Aggiunti Manager dei principali componenti con stato
This commit is contained in:
35
resources/js/Components/Managers/CircularProgressManager.ts
Normal file
35
resources/js/Components/Managers/CircularProgressManager.ts
Normal file
@@ -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;
|
||||
}
|
||||
}
|
18
resources/js/Components/Managers/DialogManager.ts
Normal file
18
resources/js/Components/Managers/DialogManager.ts
Normal file
@@ -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();
|
||||
}
|
||||
}
|
13
resources/js/Components/Managers/LoadingButtonManager.ts
Normal file
13
resources/js/Components/Managers/LoadingButtonManager.ts
Normal file
@@ -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');
|
||||
}
|
||||
}
|
4
resources/js/Components/Managers/Manager.ts
Normal file
4
resources/js/Components/Managers/Manager.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export abstract class Manager {
|
||||
abstract static selector: string;
|
||||
static filter: (element: HTMLElement) => boolean = () => true;
|
||||
}
|
8
resources/js/Components/Managers/index.ts
Normal file
8
resources/js/Components/Managers/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @file Automatically generated by barrelsby.
|
||||
*/
|
||||
|
||||
export * from './CircularProgressManager';
|
||||
export * from './DialogManager';
|
||||
export * from './LoadingButtonManager';
|
||||
export * from './Manager';
|
@@ -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';
|
||||
|
@@ -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')
|
||||
|
8
resources/js/globals.d.ts
vendored
8
resources/js/globals.d.ts
vendored
@@ -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,
|
||||
|
Reference in New Issue
Block a user