native-document 1.0.162 → 1.0.164

package/dist/native-document.components.min.js

@@ -1344,6 +1344,10 @@ var NativeComponents = (function (exports) {
         return new ObservableArray(this.resolve());
     };
 
+    ObservableArray.prototype.isNotEmpty = function () {
+        return this.is((x) => x.length > 0);
+    };
+
     const ObservableObject = function(target, configs) {
         ObservableItem.call(this, target);
         this.$observables = {};
@@ -1623,7 +1627,7 @@ var NativeComponents = (function (exports) {
     };
 
     ObservableItem.prototype.isNotEmpty = function () {
-        return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length !== 0));
+        return $checker(this, x => x != null && x !== '' && !(Array.isArray(x) && x.length === 0));
     };
 
     ObservableItem.prototype.isIncludes = function (value) {
@@ -2211,6 +2215,10 @@ var NativeComponents = (function (exports) {
         });
     };
 
+    Observable.setLocale = function(locale) {
+        Formatters.locale = locale.__$Observable ? locale : Observable(locale);
+    };
+
 
     /**
      *
@@ -2376,10 +2384,6 @@ var NativeComponents = (function (exports) {
         return data;
     };
 
-    ObservableItem.prototype.resolve = function () {
-        return Observable.value(this);
-    };
-
     Observable.object = Observable.init;
     Observable.json = Observable.init;
 
@@ -2392,6 +2396,10 @@ var NativeComponents = (function (exports) {
         return new ObservableResource(fn, deps, config);
     };
 
+    ObservableItem.prototype.resolve = function () {
+        return Observable.value(this);
+    };
+
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
         'selected',
@@ -3299,6 +3307,23 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
+    NDElement.prototype.destroyOnUnmount = function() {
+        this.unmounted(() => {
+            this.$element?.querySelectorAll('[data--nd-before-unmount]').forEach(child => {
+                child.remove();
+                child.__$controller?.abort();
+                child.__$controller = null;
+                $lifeCycleObservers.delete(child);
+            });
+
+            this.$element.__$controller?.abort();
+            this.$element.__$controller = null;
+            $lifeCycleObservers.delete(this.$element);
+            this.$element = null;
+        });
+        return this;
+    };
+
     NDElement.prototype.mounted = function(callback) {
         return this.lifecycle({ mounted: callback });
     };
@@ -3315,6 +3340,7 @@ var NativeComponents = (function (exports) {
             const originalRemove = el.remove.bind(el);
 
             let  $isUnmounting = false;
+            this.$element.setAttribute('data--nd-before-unmount', '1');
 
             el.remove = async () => {
                 if($isUnmounting) {
@@ -3408,6 +3434,7 @@ var NativeComponents = (function (exports) {
             return this;
         }
         this.$element.setAttribute(name, value);
+        return this;
     };
 
     NDElement.prototype.attrs = function(attrs) {
@@ -12119,62 +12146,107 @@ var NativeComponents = (function (exports) {
     // ----------------------------------------------------------------
     EVENTS.forEach(eventSourceName => {
         const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
-            this.$element.addEventListener(eventName, callback);
+        NDElement.prototype['on'+eventSourceName] = function(callback = null, options = {}) {
+            this.$element.addEventListener(eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
     });
 
     EVENTS_WITH_STOP.forEach(eventSourceName => {
         const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
-            _stop(this.$element, eventName, callback);
+        NDElement.prototype['onStop'+eventSourceName] = function(callback = null, options = {}) {
+            _stop(this.$element, eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
-        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null) {
-            _preventStop(this.$element, eventName, callback);
+        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null, options = {}) {
+            _preventStop(this.$element, eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
     });
 
     EVENTS_WITH_PREVENT.forEach(eventSourceName => {
         const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
-            _prevent(this.$element, eventName, callback);
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null, options = {}) {
+            _prevent(this.$element, eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
     });
 
+    NDElement.prototype.$getSignal = function() {
+        if(!this.$element.__$controller) {
+            this.$element.__$controller = new AbortController();
+        }
+        return this.$element.__$controller.signal;
+    };
+
     NDElement.prototype.on = function(name, callback, options) {
-        this.$element.addEventListener(name.toLowerCase(), callback, options);
+        this.$element.addEventListener(name.toLowerCase(), callback, {
+            signal: this.$getSignal(),
+            ...options
+        });
+        return this;
+    };
+
+    NDElement.prototype.off = function(name, callback) {
+        this.$element.removeEventListener(name.toLowerCase(), callback);
+        return this;
+    };
+
+    NDElement.prototype.once = function(name, callback) {
+        this.$element.addEventListener(name.toLowerCase(), callback, {
+            signal: this.$getSignal(),
+            once: true
+        });
+        return this;
+    };
+
+    NDElement.prototype.emit = function(name, detail = null) {
+        const event = new CustomEvent(name, {
+            detail,
+            bubbles:    true,
+            cancelable: true,
+        });
+        this.$element.dispatchEvent(event);
         return this;
     };
 
-    const _prevent = function(element, eventName, callback) {
+    const _prevent = function(element, eventName, callback, options) {
         const handler = (event) => {
             event.preventDefault();
             callback && callback.call(element, event);
         };
-        element.addEventListener(eventName, handler);
+        element.addEventListener(eventName, handler, options);
         return this;
     };
 
-    const _stop = function(element, eventName, callback) {
+    const _stop = function(element, eventName, callback, options) {
         const handler = (event) => {
             event.stopPropagation();
             callback && callback.call(element, event);
         };
-        element.addEventListener(eventName, handler);
+        element.addEventListener(eventName, handler, options);
         return this;
     };
 
-    const _preventStop = function(element, eventName, callback) {
+    const _preventStop = function(element, eventName, callback, options) {
         const handler = (event) => {
             event.stopPropagation();
             event.preventDefault();
             callback && callback.call(element, event);
         };
-        element.addEventListener(eventName, handler);
+        element.addEventListener(eventName, handler, options);
         return this;
     };
 

package/dist/native-document.dev.js

@@ -1797,6 +1797,10 @@ var NativeDocument = (function (exports) {
         return new ObservableArray(this.resolve());
     };
 
+    ObservableArray.prototype.isNotEmpty = function () {
+        return this.is((x) => x.length > 0);
+    };
+
     const ObservableObject = function(target, configs) {
         ObservableItem.call(this, target);
         this.$observables = {};
@@ -2076,7 +2080,7 @@ var NativeDocument = (function (exports) {
     };
 
     ObservableItem.prototype.isNotEmpty = function () {
-        return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length !== 0));
+        return $checker(this, x => x != null && x !== '' && !(Array.isArray(x) && x.length === 0));
     };
 
     ObservableItem.prototype.isIncludes = function (value) {
@@ -2676,6 +2680,10 @@ var NativeDocument = (function (exports) {
         });
     };
 
+    Observable.setLocale = function(locale) {
+        Formatters.locale = locale.__$Observable ? locale : Observable(locale);
+    };
+
 
     /**
      *
@@ -2844,10 +2852,6 @@ var NativeDocument = (function (exports) {
         return data;
     };
 
-    ObservableItem.prototype.resolve = function () {
-        return Observable.value(this);
-    };
-
     Observable.object = Observable.init;
     Observable.json = Observable.init;
 
@@ -2860,6 +2864,10 @@ var NativeDocument = (function (exports) {
         return new ObservableResource(fn, deps, config);
     };
 
+    ObservableItem.prototype.resolve = function () {
+        return Observable.value(this);
+    };
+
     /**
      *
      * @param {HTMLElement} element
@@ -3829,6 +3837,23 @@ var NativeDocument = (function (exports) {
         return this;
     };
 
+    NDElement.prototype.destroyOnUnmount = function() {
+        this.unmounted(() => {
+            this.$element?.querySelectorAll('[data--nd-before-unmount]').forEach(child => {
+                child.remove();
+                child.__$controller?.abort();
+                child.__$controller = null;
+                $lifeCycleObservers.delete(child);
+            });
+
+            this.$element.__$controller?.abort();
+            this.$element.__$controller = null;
+            $lifeCycleObservers.delete(this.$element);
+            this.$element = null;
+        });
+        return this;
+    };
+
     NDElement.prototype.mounted = function(callback) {
         return this.lifecycle({ mounted: callback });
     };
@@ -3845,6 +3870,7 @@ var NativeDocument = (function (exports) {
             const originalRemove = el.remove.bind(el);
 
             let  $isUnmounting = false;
+            this.$element.setAttribute('data--nd-before-unmount', '1');
 
             el.remove = async () => {
                 if($isUnmounting) {
@@ -3949,6 +3975,7 @@ var NativeDocument = (function (exports) {
             return this;
         }
         this.$element.setAttribute(name, value);
+        return this;
     };
 
     NDElement.prototype.attrs = function(attrs) {
@@ -4203,62 +4230,107 @@ var NativeDocument = (function (exports) {
     // ----------------------------------------------------------------
     EVENTS.forEach(eventSourceName => {
         const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['on'+eventSourceName] = function(callback = null) {
-            this.$element.addEventListener(eventName, callback);
+        NDElement.prototype['on'+eventSourceName] = function(callback = null, options = {}) {
+            this.$element.addEventListener(eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
     });
 
     EVENTS_WITH_STOP.forEach(eventSourceName => {
         const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
-            _stop(this.$element, eventName, callback);
+        NDElement.prototype['onStop'+eventSourceName] = function(callback = null, options = {}) {
+            _stop(this.$element, eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
-        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null) {
-            _preventStop(this.$element, eventName, callback);
+        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback = null, options = {}) {
+            _preventStop(this.$element, eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
     });
 
     EVENTS_WITH_PREVENT.forEach(eventSourceName => {
         const eventName = eventSourceName.toLowerCase();
-        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
-            _prevent(this.$element, eventName, callback);
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null, options = {}) {
+            _prevent(this.$element, eventName, callback, {
+                signal: this.$getSignal(),
+                ...options
+            });
             return this;
         };
     });
 
+    NDElement.prototype.$getSignal = function() {
+        if(!this.$element.__$controller) {
+            this.$element.__$controller = new AbortController();
+        }
+        return this.$element.__$controller.signal;
+    };
+
     NDElement.prototype.on = function(name, callback, options) {
-        this.$element.addEventListener(name.toLowerCase(), callback, options);
+        this.$element.addEventListener(name.toLowerCase(), callback, {
+            signal: this.$getSignal(),
+            ...options
+        });
+        return this;
+    };
+
+    NDElement.prototype.off = function(name, callback) {
+        this.$element.removeEventListener(name.toLowerCase(), callback);
         return this;
     };
 
-    const _prevent = function(element, eventName, callback) {
+    NDElement.prototype.once = function(name, callback) {
+        this.$element.addEventListener(name.toLowerCase(), callback, {
+            signal: this.$getSignal(),
+            once: true
+        });
+        return this;
+    };
+
+    NDElement.prototype.emit = function(name, detail = null) {
+        const event = new CustomEvent(name, {
+            detail,
+            bubbles:    true,
+            cancelable: true,
+        });
+        this.$element.dispatchEvent(event);
+        return this;
+    };
+
+    const _prevent = function(element, eventName, callback, options) {
         const handler = (event) => {
             event.preventDefault();
             callback && callback.call(element, event);
         };
-        element.addEventListener(eventName, handler);
+        element.addEventListener(eventName, handler, options);
         return this;
     };
 
-    const _stop = function(element, eventName, callback) {
+    const _stop = function(element, eventName, callback, options) {
         const handler = (event) => {
             event.stopPropagation();
             callback && callback.call(element, event);
         };
-        element.addEventListener(eventName, handler);
+        element.addEventListener(eventName, handler, options);
         return this;
     };
 
-    const _preventStop = function(element, eventName, callback) {
+    const _preventStop = function(element, eventName, callback, options) {
         const handler = (event) => {
             event.stopPropagation();
             event.preventDefault();
             callback && callback.call(element, event);
         };
-        element.addEventListener(eventName, handler);
+        element.addEventListener(eventName, handler, options);
         return this;
     };
 
@@ -4868,27 +4940,30 @@ var NativeDocument = (function (exports) {
             if(!$cacheNode) {
                 $cacheNode = $viewCreator(this);
             }
-            if(!$components) {
-                return $cacheNode;
-            }
-            for(const index in $components) {
-                const updater = $components[index];
-                updater(...data);
+            if(!$components) return $cacheNode;
+
+            const updates = data[0];
+            if(updates && typeof updates === 'object') {
+                for(const key in updates) {
+                    if($components[key]) {
+                        $components[key](updates[key]);
+                    }
+                }
             }
             return $cacheNode;
         };
 
         this.createSection = (name, fn) => {
             $components = $components || {};
-            const anchor = Anchor('Component '+name);
+            const anchor = Anchor('Component ' + name);
 
-            $components[name] = function(...args) {
+            $components[name] = function(content) {
                 anchor.removeChildren();
                 if(!fn) {
-                    anchor.append(args);
+                    anchor.append(content);
                     return;
                 }
-                anchor.appendChild(fn(...args));
+                anchor.appendChild(fn(content));
             };
             return anchor;
         };
@@ -5783,7 +5858,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 child = null;
-                element.appendElementRaw(fragment);
+                element.appendChildRaw(fragment);
             },
             removeOne: (element, index) => {
                 removeCacheItem(element, true);
@@ -7190,7 +7265,25 @@ var NativeDocument = (function (exports) {
     });
 
     const RouteParamPatterns = {
+        id:       '[0-9]+',
+        uuid:     '[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}',
+        slug:     '[a-z0-9]+(?:-[a-z0-9]+)*',
+        hash:     '[a-f0-9]{32,64}',
+
+        alpha:    '[a-zA-Z]+',
+        alphanum: '[a-zA-Z0-9]+',
+        string:   '[^/]+',
+        any:      '.*',
+
+        int:      '[0-9]+',
+        float:    '[0-9]+\\.[0-9]+',
+        number:   '[0-9]+(\\.[0-9]+)?',
+        positive: '[1-9][0-9]*',
 
+        locale:   '[a-z]{2}(-[A-Z]{2})?',
+        lang:     '[a-z]{2}',
+
+        token:    '[A-Za-z0-9_\\-]+',
     };
 
     /**
@@ -7610,9 +7703,7 @@ var NativeDocument = (function (exports) {
         };
 
         const removeLastNodeInserted = () => {
-            if(Validator.isAnchor($lastNodeInserted)) {
-                $lastNodeInserted.remove();
-            }
+            $lastNodeInserted?.remove();
         };
 
         const cleanContainer = () => {