chore: complete update

resources/js/modules/ui/UIManager.js

@@ -0,0 +1,23 @@
+// modules/ui/UIManager.js
+import { Modal } from './components/Modal.js';
+
+const components = {
+    modal: Modal,
+};
+
+export const UIManager = {
+    open(type, props = {}) {
+        const Component = components[type];
+        if (!Component) {
+            console.warn(`[UIManager] Unknown type: ${type}`);
+            return null;
+        }
+        const instance = new Component(props);
+        instance.open();
+        return instance;
+    },
+
+    close(instance) {
+        if (instance?.close) instance.close();
+    }
+};

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' });
+    }
+}

resources/js/modules/ui/index.js

@@ -0,0 +1,9 @@
+import { UIManager } from './UIManager.js';
+
+export function init() {
+
+    /*UIManager.open('modal', {
+        content: '<p>Hallo!</p><button class="modal-close">OK</button>',
+        onClose: () => console.log('Modal wurde geschlossen')
+    });*/
+}