native-document 1.0.214 → 1.0.216

package/components.js

@@ -1,3 +1,4 @@
+export { default as BaseComponent } from './src/components/BaseComponent';
 export * from './src/components/accordion/index';
 export * from './src/components/alert/index';
 export * from './src/components/avatar/index';
@@ -13,6 +14,7 @@ export * from './src/components/form/index';
 export * from './src/components/list/index';
 export * from './src/components/menu/index';
 export * from './src/components/modal/index';
+export * from './src/components/modal/createModal';
 export * from './src/components/pagination/index';
 export * from './src/components/popover/index';
 export * from './src/components/progress/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.214",
+  "version": "1.0.216",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/modal/Modal.js

@@ -76,6 +76,8 @@ export default function Modal(content, props = {}) {
 BaseComponent.extends(Modal);
 BaseComponent.use(Modal, HasEventEmitter, HasDraggable, HasResizable);
 
+Modal.prototype.__$isModal = true;
+
 // Theming
 Modal.defaultTemplate = null;
 

package/src/components/modal/createModal.js

@@ -0,0 +1,61 @@
+import { $ } from '../../core/data/Observable';
+import {createPortal} from '../../core/elements/anchor/anchor';
+import Modal from './Modal';
+
+export function createModal(builder) {
+    return Cache.once(() => {
+
+        const $modalRef = $.ref();
+        let currentOnSelect = null;
+        let selectedValue = null;
+        const events = { onOpen: null, onClose: null };
+
+        const finish = (value = null) => {
+            currentOnSelect && currentOnSelect(value ?? selectedValue);
+            currentOnSelect = null;
+        };
+
+        const content = builder({
+            resolve: (value) => {
+                selectedValue = value;
+                $modalRef.close();
+            },
+            reject: () => {
+                selectedValue = null;
+                $modalRef.close();
+            },
+            onOpen: (onOpen) => {
+                events.onOpen = onOpen;
+            },
+            onClose: (onClose) => {
+                events.onClose = onClose;
+            }
+        });
+
+        const modal = (content?.__$isModal) ? content : Modal(content);
+
+        createPortal(
+            modal
+                .onClose(() => {
+                    finish(null);
+                    events.onClose && events.onClose();
+                })
+                .ref($modalRef),
+        );
+
+        return {
+            open: (params) => {
+                if (currentOnSelect) {
+                    finish(null);
+                }
+                $modalRef.open();
+                events.onOpen?.(params);
+                return new Promise((resolve) => {
+                    currentOnSelect = resolve;
+                });
+            },
+            close: () => $modalRef.close(),
+            instance: $modalRef,
+        };
+    });
+}

package/src/components/modal/types/Modal.d.ts

@@ -26,7 +26,7 @@ export type ModalDescription = {
         props: GlobalAttributes;
     };
 
-export interface ModalInterface extends BaseComponent {
+export interface ModalInterface extends Omit<BaseComponent, 'onDrag' | 'onDragEnd' | 'onDragStart' | 'onResize'> {
     trigger(trigger: HTMLElement): HTMLElement;
     open(): void;
     close(): void;