native-document 1.0.158 → 1.0.160

package/src/core/data/ObservableResource.js

@@ -0,0 +1,182 @@
+import ObservableItem from "./ObservableItem";
+import {debounce} from "../utils/helpers";
+
+const STATE = {
+    UNRESOLVED: 'unresolved',
+    PENDING:    'pending',
+    READY:      'ready',
+    REFRESHING: 'refreshing',
+    ERRORED:    'errored',
+};
+
+export default function ObservableResource(fn, deps, config) {
+    this.$fn = (config.debounce > 0) ? debounce(fn, config.debounce) : fn;
+    this.$dependencies = deps;
+    this.$config = config;
+    this.$controller  = null;
+    this.$subscriptions        = [];
+
+    this.data  = config.initial ?? new ObservableItem(null);
+    this.error = new ObservableItem(null);
+    this.state = new ObservableItem(STATE.UNRESOLVED);
+
+    this.loading = ObservableItem.computed(
+        (state) => state === STATE.PENDING || state === STATE.REFRESHING,
+        [this.state]
+    );
+
+    if (config.auto) {
+        if (deps.length > 0) {
+            this.$watchDependencies();
+            return;
+        }
+        this.fetch();
+    }
+}
+
+ObservableResource.prototype.$abort = function() {
+    if (this.$controller) {
+        this.$controller.abort();
+        this.$controller = null;
+    }
+};
+
+ObservableResource.prototype.$runWithAbortController = function(isRefetch = false) {
+    this.$abort();
+
+    this.$controller = new AbortController();
+    const signal = this.$controller.signal;
+
+    const hasData = this.data.val() !== null;
+    const nextState = isRefetch && hasData ? STATE.REFRESHING : STATE.PENDING;
+
+    this.error.set(null);
+    this.state.set(nextState);
+
+    const depValues = this.$dependencies.map(dep => dep.val());
+    const args = [...depValues, signal];
+
+    Promise.resolve(this.$fn(...args))
+        .then(result => {
+            if (signal.aborted) {
+                return;
+            }
+            this.data.set(result);
+            this.error.set(null);
+            this.state.set(STATE.READY);
+            this.$controller = null;
+        })
+        .catch(err => {
+            if (signal.aborted) {
+                return;
+            }
+            this.error.set(err);
+            this.state.set(STATE.ERRORED);
+            this.$controller = null;
+        });
+};
+ObservableResource.prototype.$runWithoutAbortController = function(isRefetch = false) {
+    const hasData = this.data.val() !== null;
+    const nextState = isRefetch && hasData ? STATE.REFRESHING : STATE.PENDING;
+
+    this.error.set(null);
+    this.state.set(nextState);
+
+    const args = this.$dependencies.map(dep => dep.val());
+
+    Promise.resolve(this.$fn(...args))
+        .then(result => {
+            this.data.set(result);
+            this.error.set(null);
+            this.state.set(STATE.READY);
+        })
+        .catch(err => {
+            this.error.set(err);
+            this.state.set(STATE.ERRORED);
+        });
+};
+
+ObservableResource.prototype.$run = function(isRefetch = false) {
+    const needsSignal = this.$fn.length > this.$dependencies.length;
+    if(needsSignal) {
+        this.$run = this.$runWithAbortController;
+        return this.$runWithAbortController(isRefetch);
+    }
+    this.$run = this.$runWithoutAbortController;
+
+    return this.$run(isRefetch);
+};
+
+ObservableResource.prototype.$watchDependencies = function() {
+    this.$subscriptions.forEach(unsub => unsub());
+    this.$subscriptions = [];
+
+    this.$dependencies.forEach(dep => {
+        const callback = () => this.$run(true);
+        dep.subscribe(callback);
+        this.$subscriptions.push(() => dep.unsubscribe(callback));
+    });
+    if (!this.$config.lazy) {
+        this.$run(false);
+    }
+};
+
+ObservableResource.prototype.fetch = function() {
+    this.$run(false);
+    return this;
+};
+
+ObservableResource.prototype.refetch = function() {
+    this.$run(true);
+    return this;
+};
+
+ObservableResource.prototype.mutate = function(value) {
+    this.data.set(value);
+    this.state.set(STATE.READY);
+    return this;
+};
+
+ObservableResource.prototype.destroy = function() {
+    this.$abort();
+    this.$subscriptions.forEach(unsub => unsub());
+    this.$subscriptions = [];
+};
+
+ObservableResource.prototype.isReady = function() {
+    return this.state.isEqualTo(STATE.READY);
+};
+
+ObservableResource.prototype.isPending = function() {
+    return this.state.isEqualTo(STATE.PENDING);
+};
+
+ObservableResource.prototype.isRefreshing = function() {
+    return this.state.isEqualTo(STATE.REFRESHING);
+};
+
+ObservableResource.prototype.isErrored = function() {
+    return this.state.isEqualTo(STATE.ERRORED);
+};
+
+ObservableResource.prototype.isUnresolved = function() {
+    return this.state.isEqualTo(STATE.UNRESOLVED);
+};
+
+ObservableResource.prototype.onSuccess = function(callback) {
+    this.data.subscribe((value) => {
+        if (this.state.val() === STATE.READY) {
+            callback(value);
+        }
+    });
+    return this;
+};
+
+ObservableResource.prototype.onError = function(callback) {
+    this.error.subscribe((err) => {
+        if (err !== null) {
+            callback(err);
+        }
+    });
+    return this;
+};

package/src/core/data/observable-helpers/observable.is-to.js

@@ -100,7 +100,7 @@ ObservableItem.prototype.isEmpty = function () {
 };
 
 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) {

package/src/core/elements/control/for-each-array.js

@@ -188,7 +188,7 @@ export function ForEachArray(data, callback, configs = {}) {
                 }
             }
             child = null;
-            element.appendElementRaw(fragment);
+            element.appendChildRaw(fragment);
         },
         removeOne: (element, index) => {
             removeCacheItem(element, true);

package/src/core/elements/form.js

@@ -11,7 +11,7 @@ import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
  *   multipartFormData: () => HTMLFormElement,
  * }}
  */
-export const Form = HtmlElementWrapper('form', function(el) {
+export const Form = HtmlElementWrapper('form', (el) => {
 
     el.submit = function(action) {
         if(typeof action === 'function') {

package/src/core/wrappers/HtmlElementWrapper.js

@@ -37,7 +37,7 @@ export const createHtmlElement = (element, _attributes, _children = null) => {
  * @param {?Function=} customWrapper
  * @returns {Function}
  */
-export default function HtmlElementWrapper(name, customWrapper = null) {
+export default function  HtmlElementWrapper(name, customWrapper = null) {
     if(name) {
         if(customWrapper) {
             let node = null;

package/src/core/wrappers/NDElement.js

@@ -2,6 +2,11 @@ import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
 import NativeDocumentError from "../errors/NativeDocumentError.js";
 import DebugManager from "../utils/debug-manager.js";
+import attributesWrapper, {
+    bindAttributeWithObservable,
+    bindClassAttribute,
+    bindStyleAttribute
+} from "./AttributesWrapper";
 
 export function NDElement(element) {
     this.$element = element;
@@ -195,6 +200,31 @@ NDElement.prototype.with = function(methods) {
     return this;
 };
 
+
+NDElement.prototype.attr = function(name, value) {
+    if(value?.__$Observable) {
+        bindAttributeWithObservable(this.$element, name, value);
+        return this;
+    }
+    this.$element.setAttribute(name, value);
+};
+
+NDElement.prototype.attrs = function(attrs) {
+    attributesWrapper(this.$element, attrs);
+    return this;
+};
+
+NDElement.prototype.class = function(classes) {
+    bindClassAttribute(this.$element, classes);
+    return this;
+};
+
+NDElement.prototype.style = function(style) {
+    bindStyleAttribute(this.$element, style);
+    return this;
+};
+
+
 /**
  * Extends the NDElement prototype with new methods available to all NDElement instances.
  * Use this to add global methods to all NDElements.

package/src/router/RouterComponent.js

@@ -32,9 +32,7 @@ export function RouterComponent(router, container) {
     };
 
     const removeLastNodeInserted = () => {
-        if(Validator.isAnchor($lastNodeInserted)) {
-            $lastNodeInserted.remove();
-        }
+        $lastNodeInserted.remove();
     };
 
     const cleanContainer = () => {

package/src/ui/components/table/data-table/tables.js

@@ -13,6 +13,7 @@ import {
     TRow
 } from "../../../../../elements";
 import { $ } from "../../../../core/data/Observable";
+import {classPropertyAccumulator} from "../../../../core/utils/property-accumulator";
 
 export const buildTable = ($desc, instance, visibleColumns) => {
     const thead = $desc.noHeader ? null : buildTHead($desc, instance, visibleColumns);
@@ -297,23 +298,23 @@ export const buildRow = ($desc, instance, visibleColumns, row) => {
             ? $descCol.render(value, row)
             : value ?? '';
 
-        const classes = {};
+        const classProperty = classPropertyAccumulator($descCol.props?.class || {});
         if($descCol.align) {
             if($descCol.align.__$Observable) {
-                classes['_'] = $descCol.align.transform((v) => `is-align-${v}`);
+                classProperty.add($descCol.align.transform((v) => `is-align-${v}`))
             } else {
-                classes[`is-align-${$descCol.align}`] = true;
+                classProperty.add(`is-align-${$descCol.align}`, true)
             }
         }
         if($descCol.pinned) {
             if($descCol.pinned.__$Observable) {
-                classes['__'] = $descCol.pinned.transform((v) => `is-pinned-${v}`);
+                classProperty.add($descCol.pinned.transform((v) => `is-pinned-${v}`))
             } else {
-                classes[`is-pinned-${$descCol.pinned}`] = true;
+                classProperty.add(`is-pinned-${$descCol.pinned}`, true)
             }
         }
 
-        const cell = TBodyCell({ class: classes, }, content);
+        const cell = TBodyCell({ ...$descCol.props, class: classProperty.value() }, content);
         if($descCol.onClick) {
             cell.nd.onClick((event) => {$descCol.onClick(row, event);});
         }