native-document 1.0.76 → 1.0.77

package/src/components/toast/Toast.js

@@ -0,0 +1,129 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Toast(message, config = {}) {
+    if (!(this instanceof Toast)) {
+        return new Toast(message, config);
+    }
+
+    this.$description = {
+        type: null,
+        title: null,
+        content: null,
+        icon: null,
+        showIcon: true,
+        duration: 3000,
+        closable: true,
+        pauseOnHover: true,
+        position: 'top-right',
+        actions: [],
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Toast, EventEmitter);
+
+Toast.use = function(template) {};
+Toast.defaultTemplate = null;
+
+// Types
+Toast.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+Toast.prototype.info = function() {
+    return this.type('info');
+};
+Toast.prototype.success = function() {
+    return this.type('success');
+};
+Toast.prototype.warning = function() {
+    return this.type('warning');
+};
+Toast.prototype.error = function() {
+    return this.type('error');
+};
+
+
+Toast.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+Toast.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+Toast.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+Toast.prototype.showIcon = function(show = true) {
+    this.$description.showIcon = show;
+    return this;
+};
+
+// Behavior
+Toast.prototype.duration = function(ms) {
+    this.$description.duration = ms;
+    return this;
+};
+Toast.prototype.closable = function(closable = true) {
+    this.$description.closable = closable;
+    return this;
+};
+Toast.prototype.pauseOnHover = function(pauseOnHover = true) {
+    this.$description.pauseOnHover = pauseOnHover;
+    return this;
+};
+
+// Position
+Toast.prototype.position = function(position) {
+    this.$description.position = position;
+    return this;
+};
+Toast.prototype.atTopStart = function() {
+    return this.position('top-start');
+};
+
+Toast.prototype.atTopEnd = function() {
+    return this.position('top-end');
+};
+Toast.prototype.atBottomStart = function() {
+    return this.position('bottom-start');
+};
+Toast.prototype.atBottomEnd = function() {
+    return this.position('bottom-end');
+};
+Toast.prototype.atTopCenter = function() {
+    return this.position('top-center');
+};
+Toast.prototype.atBottomCenter = function() {
+    return this.position('bottom-center');
+};
+
+Toast.prototype.clearActions = function() {
+    this.$description.actions = [];
+    return this;
+};
+Toast.prototype.action = function(label, handler) {
+    this.$description.actions.push({ label, handler });
+    return this;
+};
+
+Toast.prototype.close = function() {};
+Toast.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
+
+Toast.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Toast.prototype.$build = function() {
+
+};
+Toast.prototype.toNdElement = function() {};

package/src/components/toast/index.js

@@ -0,0 +1,5 @@
+import Toast from './Toast'
+
+export {
+    Toast
+}

package/src/components/tooltip/Tooltip.js

@@ -0,0 +1,98 @@
+/**
+ * Tooltip - Interface
+ */
+
+export default function Tooltip(target, content, config = {}) {
+    if (!(this instanceof Tooltip)) {
+        return new Tooltip(target, content, config);
+    }
+
+    this.$description = {
+        title: null,
+        content: null,
+        position: 'top',
+        trigger: 'hover',
+        target: target,
+        hideDelay: 0,
+        arrow: true,
+        interactive: true,
+        variant: null,
+        ...config,
+    };
+}
+
+Tooltip.use = function(template) {};
+Tooltip.defaultTemplate = null;
+
+Tooltip.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+Tooltip.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+Tooltip.prototype.position = function(position) {
+    this.$description.position = position;
+    return this;
+};
+Tooltip.prototype.top = function() {
+    return this.position('top');
+};
+Tooltip.prototype.bottom = function() {
+    return this.position('bottom');
+};
+Tooltip.prototype.left = function() {
+    return this.position('left');
+};
+Tooltip.prototype.right = function() {
+    return this.position('right');
+};
+Tooltip.prototype.auto = function() {
+    return this.position('auto');
+};
+
+Tooltip.prototype.trigger = function(trigger, target = null) {
+    this.$description.trigger = trigger;
+    this.$description.target = target;
+    return this;
+};
+Tooltip.prototype.showOnHover = function(target = null) {
+    return this.trigger('hover', target);
+};
+Tooltip.prototype.showOnClick = function(target = null) {
+    return this.trigger('click', target);
+};
+Tooltip.prototype.showOnFocus = function(target = null) {
+    return this.trigger('focus', target);
+};
+
+Tooltip.prototype.hideDelay = function(ms) {
+    this.$description.hideDelay = ms;
+    return this;
+};
+Tooltip.prototype.arrow = function(enabled = true) {
+    this.$description.arrow = enabled;
+    return this;
+};
+Tooltip.prototype.interactive = function(isInteractive = true) {
+    this.$description.interactive = isInteractive;
+    return this;
+}
+
+Tooltip.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+Tooltip.prototype.show = function() {};
+Tooltip.prototype.hide = function() {};
+
+Tooltip.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Tooltip.prototype.$build = function() {};
+Tooltip.prototype.toNdElement = function() {};

package/src/components/tooltip/index.js

@@ -0,0 +1,5 @@
+import Tooltip from './Tooltip';
+
+export {
+    Tooltip
+}

package/src/components/tooltip/prototypes.js

@@ -0,0 +1,6 @@
+
+import {NDElement} from "@src/core/wrappers/NDElement";
+
+NDElement.prototype.tooltip = function (tooltip) {
+    // TODO: implement tooltip
+};

package/src/core/data/MemoryManager.js

@@ -1,5 +1,5 @@
-import DebugManager from "../utils/debug-manager";
-import Validator from "../utils/validator";
+import DebugManager from "@src/core/utils/debug-manager";
+import Validator from "@src/core/utils/validator";
 
 
 const MemoryManager = (function() {

package/src/core/data/Observable.js

@@ -1,6 +1,6 @@
 import ObservableItem from './ObservableItem';
 import MemoryManager from "./MemoryManager";
-import NativeDocumentError from "../errors/NativeDocumentError";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 
 /**
  *

package/src/core/data/ObservableArray.js

@@ -1,9 +1,9 @@
-import {match} from "../utils/filters/index";
-import Validator from "../utils/validator";
+import {match} from "@src/core/utils/filters";
+import Validator from "@src/core/utils/validator";
 import ObservableItem from "./ObservableItem.js";
 import {Observable} from "./Observable.js";
-import PluginsManager from "../utils/plugins-manager.js";
-import NativeDocumentError from "../errors/NativeDocumentError.js";
+import PluginsManager from "@src/core/utils/plugins-manager.js";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError.js";
 
 const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
 const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
@@ -28,6 +28,13 @@ ObservableArray.prototype = Object.create(ObservableItem.prototype);
 ObservableArray.prototype.constructor = ObservableArray;
 ObservableArray.prototype.__$isObservableArray = true;
 
+
+Object.defineProperty(ObservableArray.prototype, 'length', {
+    get() {
+        return this.$currentValue.length;
+    }
+})
+
 mutationMethods.forEach((method) => {
     ObservableArray.prototype[method] = function(...values) {
         const result = this.$currentValue[method](...values);
@@ -43,6 +50,9 @@ noMutationMethods.forEach((method) => {
 });
 
 ObservableArray.prototype.clear = function() {
+    if(this.$currentValue.length === 0) {
+        return;
+    }
     this.$currentValue.length = 0;
     this.trigger({ action: 'clear' });
     return true;
@@ -72,10 +82,6 @@ ObservableArray.prototype.count = function(condition) {
     return count;
 };
 
-ObservableArray.prototype.length = function() {
-    return this.$currentValue.length;
-};
-
 ObservableArray.prototype.swap = function(indexA, indexB) {
     const value = this.$currentValue;
     const length = value.length;

package/src/core/data/ObservableItem.js

@@ -1,11 +1,11 @@
-import DebugManager from "../utils/debug-manager";
+import DebugManager from "@src/core/utils/debug-manager";
 import MemoryManager from "./MemoryManager";
-import NativeDocumentError from "../errors/NativeDocumentError";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 import ObservableChecker from "./ObservableChecker";
-import PluginsManager from "../utils/plugins-manager";
-import Validator from "../utils/validator";
+import PluginsManager from "@src/core/utils/plugins-manager";
+import Validator from "@src/core/utils/validator";
 import {ObservableWhen} from "./ObservableWhen";
-import {deepClone} from "../utils/helpers.js";
+import {deepClone} from "@src/core/utils/helpers.js";
 
 /**
  *

package/src/core/data/observable-helpers/array.js

@@ -1,5 +1,5 @@
-import {Observable} from "../Observable";
-import ObservableArray from "../ObservableArray.js";
+import {Observable} from "@src/core/data/Observable";
+import ObservableArray from "@src/core/data/ObservableArray.js";
 
 
 /**

package/src/core/data/observable-helpers/batch.js

@@ -1,5 +1,5 @@
-import Validator from "../../utils/validator";
-import {Observable} from "../Observable";
+import Validator from "@src/core/utils/validator";
+import {Observable} from ".@src/core/data/Observable";
 
 /**
  *

package/src/core/data/observable-helpers/computed.js

@@ -1,9 +1,9 @@
-import ObservableItem from "../ObservableItem";
-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";
+import ObservableItem from "@src/core/data/ObservableItem";
+import Validator from "@src/core/utils/validator";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
+import {Observable} from "@src/core/data/Observable";
+import PluginsManager from "@src/core/utils/plugins-manager";
+import {nextTick} from "@src/core/utils/helpers";
 
 /**
  *

package/src/core/data/observable-helpers/object.js

@@ -1,5 +1,5 @@
-import Validator from "../../utils/validator";
-import {Observable} from "../Observable";
+import Validator from "@src/core/utils/validator";
+import {Observable} from "@src/core/data/Observable";
 
 const ObservableObjectValue = function(data) {
     const result = {};

package/src/core/elements/anchor.js

@@ -1,6 +1,6 @@
-import Validator from "../utils/validator";
-import DebugManager from "../utils/debug-manager";
-import {ElementCreator} from "../wrappers/ElementCreator";
+import Validator from "@src/core/utils/validator";
+import DebugManager from "@src/core/utils/debug-manager";
+import {ElementCreator} from "@src/core/wrappers/ElementCreator";
 
 
 export default function Anchor(name, isUniqueChild = false) {

package/src/core/elements/content-formatter.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const Div = HtmlElementWrapper('div');
 export const Span = HtmlElementWrapper('span');

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

@@ -1,11 +1,11 @@
-import Anchor from "../anchor";
-import {Observable} from "../../data/Observable";
-import Validator from "../../utils/validator";
-import {getKey} from "../../utils/helpers";
-import { ElementCreator } from "../../wrappers/ElementCreator";
-import NativeDocumentError from "../../errors/NativeDocumentError";
+import Anchor from "@src/core/elements/anchor";
+import {Observable} from "@src/core/data/Observable";
+import Validator from "@src/core/utils/validator";
+import {getKey} from "@src/core/utils/helpers";
+import { ElementCreator } from "@src/core/wrappers/ElementCreator";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 
-export function ForEachArray(data, callback, key, configs = {}) {
+export function ForEachArray(data, callback, configs = {}) {
     const element = Anchor('ForEach Array');
     const blockEnd = element.endElement();
     const blockStart = element.startElement();
@@ -14,23 +14,14 @@ export function ForEachArray(data, callback, key, configs = {}) {
     let lastNumberOfItems = 0;
     const isIndexRequired = callback.length >= 2;
 
-    const keysCache = new WeakMap();
-
-    const clear = () => {
+    const clear = (items) => {
         element.removeChildren();
-        cleanCache();
+        cleanCache(items);
         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));
+        return cache.get(item)?.child;
     };
 
     const updateIndexObservers = (items, startFrom = 0) => {
@@ -39,16 +30,17 @@ export function ForEachArray(data, callback, key, configs = {}) {
         }
         let index = startFrom;
         for(let i = startFrom, length = items?.length; i < length; i++) {
-            const cacheItem = cache.get(getItemKey(items[i], i));
+            const cacheItem = cache.get(items[i]);
             if(!cacheItem) {
                 continue;
             }
-            cacheItem.indexObserver?.deref()?.set(index);
+            cacheItem.indexObserver?.set(index);
             index++;
         }
     };
 
-    const removeCacheItem = (cacheItem, removeChild = true) => {
+    const removeCacheItem = (item, removeChild = true) => {
+        const cacheItem = cache.get(item);
         if(!cacheItem) {
             return;
         }
@@ -57,14 +49,10 @@ export function ForEachArray(data, callback, key, configs = {}) {
             child?.remove();
             cache.delete(cacheItem.keyId);
         }
-        cacheItem.indexObserver?.deref()?.cleanup();
-    }
-
-    const removeCacheItemByKey = (keyId, removeChild = true) => {
-        removeCacheItem(cache.get(keyId), removeChild);
+        cacheItem.indexObserver?.cleanup();
     };
 
-    const cleanCache = () => {
+    const cleanCache = (items) => {
         if(configs.shouldKeepItemsInCache) {
             return;
         }
@@ -72,53 +60,41 @@ export function ForEachArray(data, callback, key, configs = {}) {
             cache.clear();
             return;
         }
-        for (const [keyId, cacheItem] of cache.entries()) {
-            removeCacheItem(cacheItem, false);
+        for (const [itemAsKey, _] of cache.entries()) {
+            if(items && items.contains(itemAsKey)) {
+                continue;
+            }
+            removeCacheItem(itemAsKey, false);
         }
         cache.clear();
     }
 
     const buildItem = (item, indexKey) => {
-        const keyId = getItemKey(item, indexKey);
-
-        if(cache.has(keyId)) {
-            const cacheItem = cache.get(keyId);
-            cacheItem.indexObserver?.deref()?.set(indexKey);
+        const cacheItem = cache.get(item);
+        if(cacheItem) {
+            cacheItem.indexObserver?.set(indexKey);
             const child = cacheItem.child;
             if(child) {
                 return child;
             }
-            cache.delete(keyId);
+            cache.delete(item);
         }
 
         const indexObserver = isIndexRequired ? Observable(indexKey) : null;
         let child = ElementCreator.getChild(callback(item, indexObserver));
-        if(!child) {
-            throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
+        if(child) {
+            cache.set(item, {
+                child,
+                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
+            });
+            return child;
         }
-        cache.set(keyId, {
-            keyId,
-            child: child,
-            indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
-        });
-        keysCache.set(item, keyId);
-        return child;
-    };
-    const getChildByKey = function(keyId) {
-        const cacheItem = cache.get(keyId);
-        if(!cacheItem) {
-            return null;
-        }
-        const child = cacheItem.child;
-        if(!child) {
-            removeCacheItem(cacheItem, false);
-            return null;
-        }
-        return child;
+
+        throw new NativeDocumentError("ForEachArray child can't be null or undefined!");
     };
 
-    const removeByKey = function(keyId, fragment) {
-        const cacheItem = cache.get(keyId);
+    const removeByItem = function(item, fragment) {
+        const cacheItem = cache.get(item);
         if(!cacheItem) {
             return null;
         }
@@ -144,11 +120,10 @@ export function ForEachArray(data, callback, key, configs = {}) {
             return fragment;
         },
         add(items, delay = 2) {
-            const fragment = Actions.toFragment(items);
-            element.appendElement(fragment);
+            element.appendElement(Actions.toFragment(items));
         },
         replace(items) {
-            clear();
+            clear(items);
             Actions.add(items);
         },
         reOrder(items) {
@@ -164,7 +139,7 @@ export function ForEachArray(data, callback, key, configs = {}) {
             element.appendElement(fragment, blockEnd);
         },
         removeOne(element, index) {
-            removeCacheItemByKey(getItemKey(element, index), true);
+            removeCacheItem(element, true);
         },
         clear,
         merge(items) {
@@ -198,16 +173,15 @@ export function ForEachArray(data, callback, key, configs = {}) {
             const garbageFragment = document.createDocumentFragment();
 
             if(deleted.length > 0) {
-                let firstKey = getItemKey(deleted[0], start);
+                let firstItem = deleted[0];
                 if(deleted.length === 1) {
-                    removeByKey(firstKey, garbageFragment);
+                    removeByItem(firstItem, garbageFragment);
                 } else if(deleted.length > 1) {
-                    const firstChildRemoved = getChildByKey(firstKey);
+                    const firstChildRemoved = getItemChild(deleted[0]);
                     elementBeforeFirst = firstChildRemoved?.previousSibling;
 
                     for(let i = 0; i < deleted.length; i++) {
-                        const keyId = getItemKey(deleted[i], start + i, key);
-                        removeByKey(keyId, garbageFragment);
+                        firstItem(deleted[i], garbageFragment);
                     }
                 }
             } else {

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

@@ -1,10 +1,10 @@
-import {Observable} from "../../data/Observable";
-import Validator from "../../utils/validator";
-import Anchor from "../anchor";
-import DebugManager from "../../utils/debug-manager";
-import {getKey} from "../../utils/helpers";
-import { ElementCreator } from "../../wrappers/ElementCreator";
-import NativeDocumentError from "../../errors/NativeDocumentError";
+import {Observable} from "@src/core/data/Observable";
+import Validator from "@src/core/utils/validator";
+import Anchor from "@src/core/elements/anchor";
+import DebugManager from "@src/core/utils/debug-manager";
+import {getKey} from "@src/core/utils/helpers";
+import { ElementCreator } from "@src/core/wrappers/ElementCreator";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 
 /**
  *

package/src/core/elements/control/show-if.js

@@ -1,8 +1,8 @@
-import { Observable } from "../../data/Observable";
-import Validator from "../../utils/validator";
-import DebugManager from "../../utils/debug-manager.js";
-import Anchor from "../anchor";
-import {ElementCreator} from "../../wrappers/ElementCreator";
+import { Observable } from "@src/core/data/Observable";
+import Validator from "@src/core/utils/validator";
+import DebugManager from "@src/core/utils/debug-manager.js";
+import Anchor from "@src/core/elements/anchor";
+import {ElementCreator} from "@src/core/wrappers/ElementCreator";
 
 /**
  * Show the element if the condition is true

package/src/core/elements/control/show-when.js

@@ -1,5 +1,5 @@
-import Validator from "../../utils/validator.js";
-import NativeDocumentError from "../../errors/NativeDocumentError.js";
+import Validator from "@src/core/utils/validator.js";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError.js";
 import {ShowIf} from "./show-if.js";
 
 export const ShowWhen = function() {

package/src/core/elements/control/switch.js

@@ -1,7 +1,7 @@
-import NativeDocumentError from "../../errors/NativeDocumentError";
-import Validator from "../../utils/validator";
-import Anchor from "../anchor";
-import {ElementCreator} from "../../wrappers/ElementCreator";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
+import Validator from "@src/core/utils/validator";
+import Anchor from "@src/core/elements/anchor";
+import {ElementCreator} from "@src/core/wrappers/ElementCreator";
 
 
 

package/src/core/elements/description-list.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const Dl = HtmlElementWrapper('dl');
 export const Dt = HtmlElementWrapper('dt');