chore: complete update

resources/js/modules/ui/components/Dialog.js

@@ -0,0 +1,41 @@
+import {useEvent} from "../../../core/useEvent";
+
+export class Dialog {
+    constructor({content = '', className = '', onClose = null} = {}) {
+        this.onClose = onClose;
+        this.dialog = document.createElement('dialog');
+        this.dialog.className = className;
+        this.dialog.innerHTML = `
+      <form method="dialog" class="${className}-content">
+        ${content}
+        <button class="${className}-close" value="close">×</button>
+      </form>
+    `;
+
+        useEvent(this.dialog, 'click', (e) => {
+            const isOutside = !e.target.closest(className+'-content');
+            if (isOutside) this.close();
+        })
+
+        useEvent(this.dialog, 'cancel', (e) => {
+            e.preventDefault();
+            this.close();
+        })
+
+    }
+
+    open()
+    {
+        document.body.appendChild(this.dialog);
+        this.dialog.showModal?.() || this.dialog.setAttribute('open', '');
+        document.documentElement.dataset[`${this.dialog.className}Open`] = 'true';
+    }
+
+    close()
+    {
+        this.dialog.close?.() || this.dialog.removeAttribute('open');
+        this.dialog.remove();
+        delete document.documentElement.dataset[`${this.dialog.className}Open`];
+        this.onClose?.();
+    }
+}

resources/js/modules/ui/components/Lightbox.js

@@ -0,0 +1,6 @@
+import { Dialog } from './Dialog.js';
+export class Lightbox extends Dialog {
+    constructor(props) {
+        super({ ...props, className: 'lightbox' });
+    }
+}

resources/js/modules/ui/components/Modal.js

@@ -0,0 +1,6 @@
+import { Dialog } from './Dialog.js';
+export class Modal extends Dialog {
+    constructor(props) {
+        super({ ...props, className: 'modal' });
+    }
+}