native-document 1.0.70 → 1.0.72

package/src/components/table/DataTable.js

@@ -0,0 +1,195 @@
+import SimpleTable from "./SimpleTable";
+import { Observable as $ } from "../../../index";
+
+export default function DataTable(name, configs) {
+    SimpleTable.call(this, name, configs);
+
+    Object.assign(this.$description, {
+        pageSize: 0,
+        layout: null,
+        selectable: false,
+        expandable: false,
+        paginationTemplate: null,
+        toolbarTemplate: null,
+        ...configs
+    });
+
+    this.$currentPage = null;
+    this.$selectedRows = [];
+    this.$expandedRows = [];
+}
+
+DataTable.defaultToolbarTemplate = null;
+DataTable.defaultPaginationTemplate = null;
+DataTable.defaultLayout = null;
+
+DataTable.use = function(template) {
+    SimpleTable.use(template);
+    DataTable.defaultToolbarTemplate = template.toolbar;
+    DataTable.defaultPaginationTemplate = template.pagination;
+    DataTable.defaultLayout = template.layout;
+};
+
+DataTable.prototype = Object.create(SimpleTable.prototype);
+DataTable.prototype.constructor = DataTable;
+
+DataTable.prototype.paginate = function(size) {
+    this.$description.pageSize = size;
+    if(size > 0) {
+        this.$currentPage = $(1);
+    }
+    return this;
+};
+
+DataTable.prototype.selectable = function() {
+    this.$description.selectable = true
+    return this;
+};
+
+
+DataTable.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
+DataTable.prototype.toolbarTemplate = function(template) {
+    this.$description.toolbarTemplate = template;
+    return this;
+};
+
+DataTable.prototype.paginationTemplate = function(template) {
+    this.$description.paginationTemplate = template;
+    return this;
+};
+
+
+DataTable.prototype.buildToolbar = function() {
+    const toolbarTemplate = this.$description.toolbarTemplate || DataTable.defaultToolbarTemplate;
+    if(typeof toolbarTemplate === 'function') {
+        return toolbarTemplate(this);
+    }
+    return null;
+};
+
+DataTable.prototype.buildPagination = function() {
+    const paginationTemplate = this.$description.paginationTemplate || DataTable.defaultPaginationTemplate;
+    if(typeof paginationTemplate === 'function') {
+        return paginationTemplate(this);
+    }
+    return null;
+};
+
+
+DataTable.prototype.toNdElement = function() {
+    const layout = this.$description.layout || DataTable.defaultLayout;
+    if (typeof layout === 'function') {
+        return layout(this);
+    }
+    return Div({ class: 'data-table-container' }, [
+        this.buildToolbar(),
+        this.build(),
+        this.buildPagination()
+    ]);
+};
+
+
+//-----------------------------------------------------------------
+// Page Actions
+//-----------------------------------------------------------------
+
+DataTable.prototype.goToPage = function(page) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.goToLastPage = function(page) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.goToFistPage = function(page) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.nextPage = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.previousPage = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.paginationConfig = function() {
+    return {
+        size: this.$description.pageSize
+    };
+};
+
+
+//-----------------------------------------------------------------
+// Sort Actions
+//-----------------------------------------------------------------
+
+DataTable.prototype.defaultSort = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.sortBy = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.clearSort = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.getSortState = function() {
+    // TODO: implement this action
+    return this;
+};
+
+
+//-----------------------------------------------------------------
+// Selectable Actions
+//-----------------------------------------------------------------
+
+DataTable.prototype.select = function(row) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.deselect = function(row) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.selectAll = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.deselectAll = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.clearSelection = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.getSelectedRows = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.isRowSelected = function(row) {
+    // TODO: implement this action
+    return this;
+};
+

package/src/components/table/SimpleTable.js

@@ -0,0 +1,184 @@
+import Column from "./Column";
+import ColumnGroup from "./ColumnGroup";
+import {Table, TFoot, TRow} from "../../../elements";
+import DataTable from "./DataTable";
+
+
+export default function SimpleTable(configs = {}) {
+    this.$description = {
+        header: [],
+        columns: [],
+        hasGroups: false,
+        rowTemplate: null,
+        tableTemplate: null,
+        data: null,
+        layout: null,
+        expandable: false,
+        ...configs
+    };
+
+    this.$element = null;
+    this.$thead = null;
+    this.$tbody = null;
+    this.$tfoot = null;
+}
+
+SimpleTable.defaultTableTemplate = null;
+SimpleTable.defaultRowTemplate = null;
+SimpleTable.defaultEmptyTemplate = null;
+
+/**
+ *
+ * @param {{
+ * column: { header: string|Function|null, render: string|Function|null },
+ * columnGroup: { header: string|Function|null },
+ * row: string|Function|null,
+ * table: string|Function|null
+ * empty: string|Function|null
+ * }} template
+ */
+SimpleTable.use = function(template) {
+    Column.use(template.column || {});
+    ColumnGroup.use(template.columnGroup || {});
+    SimpleTable.defaultRowTemplate = template.row || SimpleTable.defaultRowTemplate;
+    SimpleTable.defaultTableTemplate = template.table || SimpleTable.defaultTableTemplate;
+    SimpleTable.defaultEmptyTemplate = template.empty || SimpleTable.defaultEmptyTemplate;
+};
+
+SimpleTable.create = function(configs) {
+    return new SimpleTable(configs);
+};
+
+SimpleTable.prototype.column = function(key, title, callback) {
+    const column = new Column(key);
+    column.title(title);
+    callback && callback(column);
+    this.$description.columns.push(column);
+    this.$description.header.push(column);
+    return this;
+};
+
+SimpleTable.prototype.group = function(title, callback) {
+    const group = new ColumnGroup(title);
+    callback && callback(group);
+    this.$description.columns.push(...group.columns());
+    this.$description.header.push(group);
+    this.$description.hasGroups = true;
+    return this;
+};
+
+SimpleTable.prototype.columns = function(columnsArray) {
+    columnsArray.forEach(column => this.column(column.key, column.title, column.callback));
+    return this;
+};
+
+SimpleTable.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+DataTable.prototype.expandable = function() {
+    this.$description.expandable = true
+    return this;
+};
+
+SimpleTable.prototype.renderRow = function(template) {
+    this.$description.rowTemplate = template;
+    return this;
+}
+
+SimpleTable.prototype.buildRow = function(rowData) {
+    const rowTemplate = this.$description.rowTemplate || SimpleTable.defaultRowTemplate;
+
+    if(typeof rowTemplate === 'function') {
+        return rowTemplate(rowData, this);
+    }
+
+    return TRow(this.$description.columns.map(
+        column => TBodyCell({}, column.buildCell(rowData))
+    ));
+};
+
+SimpleTable.prototype.renderTable = function(template) {
+    this.$description.tableTemplate = template;
+    return this;
+};
+
+SimpleTable.prototype.buildTable = function(slots = {}) {
+    const { headerRows } = slots;
+
+    const tableTemplate = this.$description.tableTemplate || SimpleTable.defaultTableTemplate;
+    if(typeof tableTemplate === 'function') {
+        return tableTemplate(slots, this);
+    }
+
+    return Table({ border: 2 }, [
+        THead(headerRows),
+        TBody(
+            ForEachArray(this.$description.data, rowData => {
+                return this.buildRow(rowData, this);
+            })
+        )
+    ]);
+};
+
+SimpleTable.prototype.build = function() {
+    const header = [];
+    if(this.$description.hasGroups) {
+        const firstRow = [];
+        const secondRow = [];
+
+        this.$description.header.forEach(columnOrGroup => {
+            if(columnOrGroup.isGroup) {
+                const columns = columnOrGroup.columns();
+                firstRow.push(columnOrGroup.buildHeader());
+                secondRow.push(columns.map(column => THeadCell({}, column.buildHeader())));
+            } else {
+                firstRow.push(columnOrGroup.buildHeader(2));
+            }
+        });
+
+        header.push(TRow(firstRow));
+        header.push(TRow(secondRow));
+    } else {
+        header.push(TRow(
+            this.$description.columns.map(column => column.buildHeader())
+        ));
+    }
+
+    return this.buildTable({ headerRows: header });
+};
+
+SimpleTable.prototype.toNdElement = function() {
+    return this.build();
+};
+
+SimpleTable.prototype.onClick = function(callback) {
+    this.$description.onClick = callback;
+};
+
+
+
+//-----------------------------------------------------------------
+// Expandable Actions
+//-----------------------------------------------------------------
+
+DataTable.prototype.expand = function(row) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.collapse = function(row) {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.collapseAll = function() {
+    // TODO: implement this action
+    return this;
+};
+
+DataTable.prototype.isRowExpanded = function(row) {
+    // TODO: implement this action
+    return this;
+};

package/src/components/table/index.js

@@ -0,0 +1,9 @@
+import SimpleTable from './SimpleTable';
+import DataTable from './DataTable';
+
+
+
+export {
+    SimpleTable,
+    DataTable
+}

package/src/{data → core/data}/ObservableArray.js

@@ -25,6 +25,7 @@ const ObservableArray = function (target, configs = null) {
 };
 
 ObservableArray.prototype = Object.create(ObservableItem.prototype);
+ObservableArray.prototype.constructor = ObservableArray;
 ObservableArray.prototype.__$isObservableArray = true;
 
 mutationMethods.forEach((method) => {

package/src/{data → core/data}/ObservableItem.js

@@ -14,6 +14,8 @@ import {deepClone} from "../utils/helpers.js";
  * @class ObservableItem
  */
 export default function ObservableItem(value, configs = null) {
+    value = Validator.isObservable(value) ? value.val() : value;
+
     this.$previousValue = null;
     this.$currentValue = value;
     this.$isCleanedUp = false;
@@ -47,9 +49,15 @@ ObservableItem.prototype.__$isObservable = true;
 const DEFAULT_OPERATIONS = {};
 const noneTrigger = function() {};
 
+ObservableItem.prototype.intercept = function(callback) {
+    this.$interceptor = callback;
+    return this;
+};
+
 ObservableItem.prototype.triggerFirstListener = function(operations) {
     this.$listeners[0](this.$currentValue, this.$previousValue, operations || {});
-}
+};
+
 ObservableItem.prototype.triggerListeners = function(operations) {
     const $listeners = this.$listeners;
     const $previousValue = this.$previousValue;
@@ -74,7 +82,7 @@ const handleWatcherCallback = function(callbacks, value) {
     callbacks.forEach(callback => {
         callback.set ? callback.set(value) : callback(value);
     });
-}
+};
 
 ObservableItem.prototype.triggerWatchers = function() {
     if(!this.$watchers) {
@@ -126,7 +134,17 @@ ObservableItem.prototype.trigger = noneTrigger;
  * @param {*} data
  */
 ObservableItem.prototype.set = function(data) {
-    const newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+    let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+    newValue = Validator.isObservable(newValue) ? newValue.val() : newValue;
+
+    if (this.$interceptor) {
+        const result = this.$interceptor(newValue, this.$currentValue);
+
+        if (result !== undefined) {
+            newValue = result;
+        }
+    }
+
     if(this.$currentValue === newValue) {
         return;
     }
@@ -159,7 +177,18 @@ ObservableItem.prototype.disconnectAll = function() {
     this.trigger = noneTrigger;
 };
 
+ObservableItem.prototype.onCleanup = function(callback) {
+    this.$cleanupListeners = this.$cleanupListeners ?? [];
+    this.$cleanupListeners.push(callback);
+};
+
 ObservableItem.prototype.cleanup = function() {
+    if (this.$cleanupListeners) {
+        for (let i = 0; i < this.$cleanupListeners.length; i++) {
+            this.$cleanupListeners[i]();
+        }
+        this.$cleanupListeners = null;
+    }
     MemoryManager.unregister(this.$memoryId);
     this.disconnectAll();
     this.$isCleanedUp = true;
@@ -222,6 +251,18 @@ ObservableItem.prototype.on = function(value, callback) {
     };
 };
 
+ObservableItem.prototype.once = function(predicate, callback) {
+    const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
+
+    const unsub = this.subscribe((val) => {
+        if (fn(val)) {
+            unsub();
+            callback(val);
+        }
+    });
+    return unsub;
+};
+
 /**
  * Unsubscribe from an observable.
  * @param {Function} callback
@@ -284,3 +325,8 @@ ObservableItem.prototype.reset = function() {
         : this.$initialValue;
     this.set(resetValue)
 };
+
+
+ObservableItem.prototype.toString = function() {
+    return String(this.$currentValue);
+};

package/src/{data → core/data}/observable-helpers/computed.js

@@ -3,6 +3,7 @@ import Validator from "../../utils/validator";
 import NativeDocumentError from "../../errors/NativeDocumentError";
 import {Observable} from "../Observable";
 import PluginsManager from "../../utils/plugins-manager";
+import {nextTick} from "../../utils/helpers";
 
 /**
  *
@@ -13,7 +14,7 @@ import PluginsManager from "../../utils/plugins-manager";
 Observable.computed = function(callback, dependencies = []) {
     const initialValue = callback();
     const observable = new ObservableItem(initialValue);
-    const updatedValue = () => observable.set(callback());
+    const updatedValue = nextTick(() => observable.set(callback()));
 
     PluginsManager.emit('CreateObservableComputed', observable, dependencies)
 

package/src/{elements → core/elements}/anchor.js

@@ -4,23 +4,23 @@ import {ElementCreator} from "../wrappers/ElementCreator";
 
 
 export default function Anchor(name, isUniqueChild = false) {
-    const element = document.createDocumentFragment();
-    element.__Anchor__ = true;
+    const anchorFragment = document.createDocumentFragment();
+    anchorFragment.__Anchor__ = true;
 
     const anchorStart = document.createComment('Anchor Start : '+name);
     const anchorEnd = document.createComment('/ Anchor End '+name);
 
-    element.appendChild(anchorStart);
-    element.appendChild(anchorEnd);
+    anchorFragment.appendChild(anchorStart);
+    anchorFragment.appendChild(anchorEnd);
 
-    element.nativeInsertBefore = element.insertBefore;
-    element.nativeAppendChild = element.appendChild;
+    anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+    anchorFragment.nativeAppendChild = anchorFragment.appendChild;
 
     const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd))
 
     const insertBefore = function(parent, child, target) {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-        if(parent === element) {
+        if(parent === anchorFragment) {
             parent.nativeInsertBefore(childElement, target);
             return;
         }
@@ -31,17 +31,17 @@ export default function Anchor(name, isUniqueChild = false) {
         parent.insertBefore(childElement, target);
     };
 
-    element.appendElement = function(child, before = null) {
+    anchorFragment.appendElement = function(child, before = null) {
         const parentNode = anchorStart.parentNode;
         const targetBefore = before || anchorEnd;
-        if(parentNode === element) {
+        if(parentNode === anchorFragment) {
             parentNode.nativeInsertBefore(child, targetBefore);
             return;
         }
         parentNode?.insertBefore(child, targetBefore);
     };
 
-    element.appendChild = function(child, before = null) {
+    anchorFragment.appendChild = function(child, before = null) {
         const parent = anchorEnd.parentNode;
         if(!parent) {
             DebugManager.error('Anchor', 'Anchor : parent not found', child);
@@ -50,13 +50,13 @@ export default function Anchor(name, isUniqueChild = false) {
         before = before ?? anchorEnd;
         insertBefore(parent, child, before);
     };
-    element.append = function(...args ) {
-        return element.appendChild(args);
+    anchorFragment.append = function(...args ) {
+        return anchorFragment.appendChild(args);
     }
 
-    element.removeChildren = function() {
+    anchorFragment.removeChildren = function() {
         const parent = anchorEnd.parentNode;
-        if(parent === element) {
+        if(parent === anchorFragment) {
             return;
         }
         if(isParentUniqueChild(parent)) {
@@ -73,26 +73,26 @@ export default function Anchor(name, isUniqueChild = false) {
         }
         fragment.replaceChildren();
     }
-    element.remove = function() {
+    anchorFragment.remove = function() {
         const parent = anchorEnd.parentNode;
-        if(parent === element) {
+        if(parent === anchorFragment) {
             return;
         }
         let itemToRemove = anchorStart.nextSibling, tempItem;
         while(itemToRemove && itemToRemove !== anchorEnd) {
             tempItem = itemToRemove.nextSibling;
-            element.nativeAppendChild(itemToRemove);
+            anchorFragment.nativeAppendChild(itemToRemove);
             itemToRemove = tempItem;
         }
     };
 
-    element.removeWithAnchors = function() {
-        element.removeChildren();
+    anchorFragment.removeWithAnchors = function() {
+        anchorFragment.removeChildren();
         anchorStart.remove();
         anchorEnd.remove();
     };
 
-    element.replaceContent = function(child) {
+    anchorFragment.replaceContent = function(child) {
         const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
         const parent = anchorEnd.parentNode;
         if(!parent) {
@@ -102,31 +102,31 @@ export default function Anchor(name, isUniqueChild = false) {
             parent.replaceChildren(anchorStart, childElement, anchorEnd);
             return;
         }
-        element.removeChildren();
+        anchorFragment.removeChildren();
         parent.insertBefore(childElement, anchorEnd);
     };
 
-    element.setContent = element.replaceContent;
+    anchorFragment.setContent = anchorFragment.replaceContent;
 
-    element.insertBefore = function(child, anchor = null) {
-        element.appendChild(child, anchor);
+    anchorFragment.insertBefore = function(child, anchor = null) {
+        anchorFragment.appendChild(child, anchor);
     };
 
 
-    element.endElement = function() {
+    anchorFragment.endElement = function() {
         return anchorEnd;
     };
 
-    element.startElement = function() {
+    anchorFragment.startElement = function() {
         return anchorStart;
     };
-    element.restore = function() {
-        element.appendChild(element);
+    anchorFragment.restore = function() {
+        anchorFragment.appendChild(anchorFragment);
     };
-    element.clear = element.remove;
-    element.detach = element.remove;
+    anchorFragment.clear = anchorFragment.remove;
+    anchorFragment.detach = anchorFragment.remove;
 
-    element.getByIndex = function(index) {
+    anchorFragment.getByIndex = function(index) {
         let currentNode = anchorStart;
         for(let i = 0; i <= index; i++) {
             if(!currentNode.nextSibling) {
@@ -137,7 +137,7 @@ export default function Anchor(name, isUniqueChild = false) {
         return currentNode !== anchorStart ? currentNode : null;
     };
 
-    return element;
+    return anchorFragment;
 };
 
 /**

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

@@ -21,12 +21,14 @@ export function ForEachArray(data, callback, key, configs = {}) {
         cleanCache();
         lastNumberOfItems = 0;
     };
+
     const getItemKey = (item, indexKey) => {
         if(keysCache.has(item)) {
             return keysCache.get(item);
         }
         return getKey(item, indexKey, key);
     };
+
     const getItemChild = (item) => {
         return getChildByKey(getItemKey(item));
     };
@@ -143,9 +145,9 @@ export function ForEachArray(data, callback, key, configs = {}) {
         },
         add(items, delay = 2) {
             const fragment = Actions.toFragment(items);
-            setTimeout(() => {
+            Promise.resolve().then(() => {
                 element.appendElement(fragment);
-            }, delay);
+            });
         },
         replace(items) {
             clear();