native-document 1.0.213 → 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.213",
+  "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;

package/src/core/data/ObservableArray.js

@@ -523,4 +523,20 @@ ObservableArray.prototype.isNotEmpty = function () {
     return this.is((x) => x.length > 0);
 };
 
+ObservableArray.prototype.fnPush = function (item) {
+    return this.push(item);
+};
+
+ObservableArray.prototype.fnRemove = function (item) {
+    return () => this.removeItem(item);
+};
+
+ObservableArray.prototype.fnRemoveAt = function (index) {
+    return () => this.remove(index);
+};
+
+ObservableArray.prototype.fnClear = function () {
+    return () => this.clear();
+};
+
 export default ObservableArray;

package/src/core/data/ObservableItem.js

@@ -646,10 +646,23 @@ ObservableItem.prototype.clone = function() {
     return new ObservableItem(clonedValue);
 };
 
-ObservableItem.prototype.asSet = function(value) {
+
+ObservableItem.prototype.fnSet = function(value) {
     return () => this.set(value);
 };
 
-ObservableItem.prototype.asToggle = function() {
+ObservableItem.prototype.fnToggle = function() {
     return () => this.toggle();
+};
+
+ObservableItem.prototype.fnSetTrue = function() {
+    return () => this.set(true);
+};
+
+ObservableItem.prototype.fnSetFalse = function() {
+    return () => this.set(false);
+};
+
+ObservableItem.prototype.fnReset = function() {
+    return () => this.reset();
 };

package/types/observable.d.ts

@@ -42,7 +42,7 @@ export interface FormattersStatic {
 
 export declare const Formatters: FormattersStatic;
 
-// -- Observable system type definitions ---------------------------------------
+// -- Observable system type definitions -------------------------------------------------------------------------------
 
 export interface ObservableItem<T = any> {
     readonly $currentValue: T;
@@ -95,7 +95,7 @@ export interface ObservableItem<T = any> {
         set?: (value: T) => any;
     }): this;
 
-    // -- comparison helpers (is*) -----------------------------------------------
+    // -- comparison helpers (is*) -------------------------------------------------------------------------------------
 
     isEqualTo(value: T | ObservableItem<T>): ObservableChecker<boolean>;
     isNotEqualTo(value: T | ObservableItem<T>): ObservableChecker<boolean>;
@@ -117,7 +117,7 @@ export interface ObservableItem<T = any> {
     isOneOf(collection: any[] | ObservableItem<any[]>): ObservableChecker<boolean>;
     isHaving(key: string | ObservableItem<string>): ObservableChecker<boolean>;
 
-    // -- transform helpers (to*) -------------------------------------------------
+    // -- transform helpers (to*) -------------------------------------------------------------------------------------
 
     toUpperCase(): ObservableChecker<string>;
     toLowerCase(): ObservableChecker<string>;
@@ -130,9 +130,14 @@ export interface ObservableItem<T = any> {
     toClamped(min: number | ObservableItem<number>, max: number | ObservableItem<number>): ObservableChecker<number>;
     toPercent(total: number | ObservableItem<number>): ObservableChecker<number>;
 
-    // -- callback builder (as*) -------------------------------------------------
-    asSet(value: T): ObservableChecker<T>;
-    asToggle(): ObservableChecker<boolean>;
+    // -- callback builder (as*) ---------------------------------------------------------------------------------------
+    fnSet(value: T): () => void;
+    fnToggle(): () => void;
+    fnSetTrue(): () => void;
+    fnSetFalse(): () => void;
+    fnReset(): () => void;
+
+    // -----------------------------------------------------------------------------------------------------------------
 
     toString(): string;
     valueOf(): T;
@@ -223,6 +228,13 @@ export interface ObservableArray<T> extends ObservableItem<T[]> {
     /** One-way sync — pushes mutations from this array to the target. Returns unsubscribe. */
     sync(target: ObservableArray<T>): Unsubscribe;
 
+    // -- callback builder (as*) ---------------------------------------------------------------------------------------
+    fnPush(value: T): () => void;
+    fnRemove(value: T): () => void;
+    fnRemoveAt(value: number): () => void;
+    fnClear(): () => void;
+
+
     clone(): ObservableArray<T>;
     isNotEmpty(): ObservableChecker<boolean>;
 }