native-document 1.0.138 → 1.0.140

package/src/components/tooltip/Tooltip.js

@@ -1,29 +1,85 @@
 /**
  * Tooltip - Interface
  */
+import {Observable} from "../../../index";
+import {NDElement} from "../../core/wrappers/NDElement";
+import BaseComponent from "../BaseComponent";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import DebugManager from "../../core/utils/debug-manager";
 
-export default function Tooltip(target, content, config = {}) {
+export default function Tooltip(content, props = {}) {
     if (!(this instanceof Tooltip)) {
-        return new Tooltip(target, content, config);
+        return new Tooltip(content, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
-        title: null,
-        content: null,
+        trigger: null,
+        interaction: 'hover',
+        content,
         position: 'top',
-        trigger: 'hover',
-        target: target,
+        title: null,
+        isOpen: Observable(false),
+        offset: 8,
+        shift: {},
         hideDelay: 0,
         arrow: true,
         interactive: true,
         variant: null,
-        ...config,
+        updatePositionOn: null,
+        props,
     };
 }
 
-Tooltip.use = function(template) {};
+BaseComponent.extends(Tooltip);
+BaseComponent.use(Tooltip, HasEventEmitter);
+
 Tooltip.defaultTemplate = null;
 
+Tooltip.use = function(template) {
+    Tooltip.defaultTemplate = template;
+    if(!NDElement.prototype.tooltip) {
+        NDElement.prototype.tooltip = function(content, props) {
+            this.ghostDom((content instanceof Tooltip)
+                ? content.trigger(this.$element)
+                : Tooltip(content, props).trigger(this.$element));
+            return this;
+        };
+    }
+    if(!BaseComponent.prototype.tooltip) {
+        BaseComponent.prototype.tooltip = function(content, props) {
+            this.postBuild(() => {
+                if(content instanceof Tooltip) {
+                    this.ghostDom(content.trigger(this.$element));
+                } else {
+                    this.ghostDom(Tooltip(content, props).trigger(this.$element));
+                }
+            });
+            return this;
+        };
+    }
+};
+
+Tooltip.preset = function(name, callback) {
+    if (Tooltip.prototype[name] || Tooltip[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Tooltip.`);
+        return;
+    }
+    Tooltip[name] = (content, props) => callback(new Tooltip(content, props));
+};
+
+Tooltip.presets = function(presets) {
+    for (const name in presets) {
+        Tooltip.preset(name, presets[name]);
+    }
+};
+
+Tooltip.prototype.trigger = function(trigger) {
+    this.$description.trigger = trigger;
+    return this;
+};
+
 Tooltip.prototype.title = function(title) {
     this.$description.title = title;
     return this;
@@ -32,40 +88,70 @@ Tooltip.prototype.content = function(content) {
     this.$description.content = content;
     return this;
 };
+Tooltip.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+Tooltip.prototype.primary = function() {
+    this.$description.variant = 'primary';
+    return this;
+};
+
+Tooltip.prototype.success = function() {
+    this.$description.variant = 'success';
+    return this;
+};
+
+Tooltip.prototype.warning = function() {
+    this.$description.variant = 'warning';
+    return this;
+};
+
+Tooltip.prototype.danger = function() {
+    this.$description.variant = 'danger';
+    return this;
+};
+
+Tooltip.prototype.info = function() {
+    this.$description.variant = 'info';
+    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.atTop = function() {
+    this.$description.position = 'top';
+    return this;
 };
-Tooltip.prototype.left = function() {
-    return this.position('left');
+Tooltip.prototype.atBottom = function() {
+    this.$description.position = 'bottom';
+    return this;
 };
-Tooltip.prototype.right = function() {
-    return this.position('right');
+Tooltip.prototype.atLeft = function() {
+    this.$description.position = 'left';
+    return this;
 };
-Tooltip.prototype.auto = function() {
-    return this.position('auto');
+Tooltip.prototype.atRight = function() {
+    this.$description.position = 'right';
+    return this;
 };
 
-Tooltip.prototype.trigger = function(trigger, target = null) {
-    this.$description.trigger = trigger;
-    this.$description.target = target;
+Tooltip.prototype.onClicked = function() {
+    this.$description.interaction = 'click';
     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.onHovered = function() {
+    this.$description.interaction = 'hover';
+    return this;
 };
-Tooltip.prototype.showOnFocus = function(target = null) {
-    return this.trigger('focus', target);
+
+Tooltip.prototype.onFocused = function() {
+    this.$description.interaction = 'focus';
+    return this;
 };
 
 Tooltip.prototype.hideDelay = function(ms) {
@@ -81,18 +167,49 @@ Tooltip.prototype.interactive = function(isInteractive = true) {
     return this;
 }
 
-Tooltip.prototype.variant = function(variant) {
-    this.$description.variant = variant;
+Tooltip.prototype.open = function() {
+    this.$description.isOpen.set(true);
+    this.emit('open');
+    return this;
+};
+
+Tooltip.prototype.close = function() {
+    this.$description.isOpen.set(false);
+    this.emit('close');
     return this;
 };
 
-Tooltip.prototype.show = function() {};
-Tooltip.prototype.hide = function() {};
+Tooltip.prototype.toggle = function() {
+    this.$description.isOpen.val() ? this.close() : this.open();
+    return this;
+};
+
+Tooltip.prototype.onOpen = function(handler) {
+    this.on('open', handler);
+    return this;
+};
+
+Tooltip.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
 
 Tooltip.prototype.render = function(renderFn) {
     this.$description.render = renderFn;
     return this;
 };
 
-Tooltip.prototype.$build = function() {};
-Tooltip.prototype.toNdElement = function() {};
+Tooltip.prototype.offset = function(offset) {
+    this.$description.offset = offset;
+    return this;
+};
+
+Tooltip.prototype.shift = function(shift) {
+    this.$description.shift = shift;
+    return this;
+};
+
+Tooltip.prototype.updatePositionOn = function(updatePositionOn) {
+    this.$description.updatePositionOn = updatePositionOn;
+    return this;
+};

package/src/core/data/ObservableArray.js

@@ -9,7 +9,6 @@ import {nextTick} from "../utils/helpers";
 const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
 const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
 
-
 /**
  *
  * @param target
@@ -36,13 +35,26 @@ Object.defineProperty(ObservableArray.prototype, 'length', {
     get() {
         return this.$currentValue.length;
     }
-})
+});
+
+
+ObservableArray.prototype.$mutate = function(action, args, mutateFn) {
+    if(this.$mutationInterceptor) {
+        const value = this.$mutationInterceptor(args, { action });
+        if(args !== undefined) {
+            args = value;
+        }
+    }
+    mutateFn(args);
+};
 
 mutationMethods.forEach((method) => {
     ObservableArray.prototype[method] = function(...values) {
-        const result = this.$currentValue[method].apply(this.$currentValue, values);
-        this.trigger({ action: method, args: values, result });
-        return result;
+        return this.$mutate(method, values, (argsToUse) => {
+            const result = this.$currentValue[method].apply(this.$currentValue, argsToUse);
+            this.trigger({ action: method, args: argsToUse, result });
+            return result;
+        })
     };
 });
 
@@ -52,6 +64,7 @@ noMutationMethods.forEach((method) => {
     };
 });
 
+
 const $clearEvent = { action: 'clear' };
 
 /**
@@ -66,8 +79,10 @@ ObservableArray.prototype.clear = function() {
     if(this.$currentValue.length === 0) {
         return;
     }
-    this.$currentValue.length = 0;
-    this.trigger($clearEvent);
+    this.$mutate('clear', [], () => {
+        this.$currentValue.length = 0;
+        this.trigger($clearEvent);
+    });
     return true;
 };
 
@@ -95,8 +110,10 @@ ObservableArray.prototype.at = function(index) {
  * items.merge([3, 4]); // [1, 2, 3, 4]
  */
 ObservableArray.prototype.merge = function(values) {
-    this.$currentValue.push.apply(this.$currentValue, values);
-    this.trigger({ action: 'merge',  args: values });
+    this.$mutate('merge', values, (valuesToMerge) => {
+        this.$currentValue.push.apply(this.$currentValue, valuesToMerge);
+        this.trigger({ action: 'merge',  args: valuesToMerge });
+    });
 };
 
 /**
@@ -129,25 +146,39 @@ ObservableArray.prototype.count = function(condition) {
  * items.swap(0, 2); // ['c', 'b', 'a']
  */
 ObservableArray.prototype.swap = function(indexA, indexB) {
-    const value = this.$currentValue;
-    const length = value.length;
-    if(length < indexA || length < indexB) {
-        return false;
-    }
-    if(indexB < indexA) {
-        const temp = indexA;
-        indexA = indexB;
-        indexB = temp;
-    }
-    const elementA = value[indexA];
-    const elementB = value[indexB]
+    this.$mutate('swap', [indexA, indexB], ([indexA, indexB]) => {
+        const value = this.$currentValue;
+        const length = value.length;
+        if(indexB < indexA) {
+            const temp = indexA;
+            indexA = indexB;
+            indexB = temp;
+        }
+        if(length < indexA || length < indexB) {
+            return false;
+        }
+        const elementA = value[indexA];
+        const elementB = value[indexB]
 
-    value[indexA] = elementB;
-    value[indexB] = elementA;
-    this.trigger({ action: 'swap', args: [indexA, indexB], result: [elementA, elementB] });
+        value[indexA] = elementB;
+        value[indexB] = elementA;
+        this.trigger({ action: 'swap', args: [indexA, indexB], result: [elementA, elementB] });
+    });
     return true;
 };
 
+ObservableArray.prototype.swapItems = function(itemA, itemB) {
+    const indexA = this.$currentValue.indexOf(itemA);
+    const indexB = this.$currentValue.indexOf(itemB);
+
+    return this.swap(indexA, indexB);
+};
+
+ObservableArray.prototype.insertAfter = function(data, target) {
+    const targetIndex = this.$currentValue.indexOf(target);
+    return this.splice(targetIndex + 1, 0, data);
+};
+
 /**
  * Removes the element at the specified index and triggers an update.
  *
@@ -158,11 +189,14 @@ ObservableArray.prototype.swap = function(indexA, indexB) {
  * items.remove(1); // ['b'] - Array is now ['a', 'c']
  */
 ObservableArray.prototype.remove = function(index) {
-    const deleted = this.$currentValue.splice(index, 1);
-    if(deleted.length === 0) {
-        return [];
-    }
-    this.trigger({ action: 'remove', args: [index], result: deleted[0] });
+    let deleted = [];
+    this.$mutate('remove', [index], ([idx]) => {
+        deleted = this.$currentValue.splice(idx, 1);
+        if(deleted.length === 0) {
+            return;
+        }
+        this.trigger({action: 'remove', args: [idx], result: deleted[0]});
+    });
     return deleted;
 };
 
@@ -191,7 +225,7 @@ ObservableArray.prototype.removeItem = function(item) {
  * const items = Observable.array([]);
  * items.isEmpty(); // true
  */
-ObservableArray.prototype.isEmpty = function() {
+ObservableArray.prototype.empty = function() {
     return this.$currentValue.length === 0;
 };
 
@@ -218,9 +252,13 @@ ObservableArray.prototype.populateAndRender = function(iteration, callback) {
  *   { name: 'John', age: 25 },
  *   { name: 'Jane', age: 30 }
  * ]);
+ *
  * const adults = users.where({ age: (val) => val >= 18 });
  */
 ObservableArray.prototype.where = function(predicates) {
+    if(typeof predicates === 'function') {
+        predicates = { _: predicates };
+    }
     const sourceArray = this;
     const observableDependencies = [sourceArray];
     const filterCallbacks = {};
@@ -380,4 +418,30 @@ ObservableArray.prototype.deepSubscribe = function(callback) {
     };
 };
 
+
+ObservableArray.prototype.sync = function(targetObservable) {
+    if (!targetObservable || !targetObservable.__$isObservableArray) {
+        throw new NativeDocumentError('ObservableArray.sync : target must be an ObservableArray');
+    }
+
+    targetObservable.set([...this.$currentValue]);
+
+    const sync = (currentValue, _, operations) => {
+        if (!operations) {
+            targetObservable.set([...currentValue]);
+            return;
+        }
+
+        const { action, args } = operations;
+        targetObservable[action].apply(targetObservable, args);
+    };
+    this.subscribe(sync);
+
+    return () => this.unsubscribe(sync);
+};
+
+ObservableArray.prototype.clone = function() {
+    return new ObservableArray(this.resolve());
+};
+
 export default ObservableArray;

package/src/core/data/ObservableChecker.js

@@ -1,3 +1,6 @@
+import ObservableItem from "./ObservableItem";
+import PluginsManager from "../utils/plugins-manager";
+
 /**
  *
  * @param {ObservableItem} $observable
@@ -6,89 +9,31 @@
  */
 export default function ObservableChecker($observable, $checker) {
     this.observable = $observable;
-    this.checker = $checker;
-    this.unSubscriptions = [];
-}
 
-export const ObservablePipe = ObservableChecker;
+    ObservableItem.call(this);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('CreateObservableChecker', this);
+    }
 
-ObservableChecker.prototype.__$Observable = true;
-ObservableChecker.prototype.__$isObservableChecker = true;
+    this.$mutation = $checker;
 
-/**
- * Subscribes to changes in the checked/transformed value.
- *
- * @param {Function} callback - Function called with the transformed value when observable changes
- * @returns {Function} Unsubscribe function
- * @example
- * const count = Observable(5);
- * const doubled = count.check(n => n * 2);
- * doubled.subscribe(value => console.log(value)); // Logs: 10
- */
-ObservableChecker.prototype.subscribe = function(callback) {
-    const unSubscribe = this.observable.subscribe((value) => {
-        callback && callback(this.checker(value));
+    $observable.subscribe((newValue) => {
+        this.$updateWithMutation(newValue);
     });
-    this.unSubscriptions.push(unSubscribe);
-    return unSubscribe;
-};
 
-/**
- * Creates a new ObservableChecker by applying another transformation.
- * Allows chaining transformations.
- *
- * @param {(value: *) => *} callback - Transformation function to apply to the current checked value
- * @returns {ObservableChecker} New ObservableChecker with chained transformation
- * @example
- * const count = Observable(5);
- * const result = count.check(n => n * 2).check(n => n + 1);
- * result.val(); // 11
- */
-ObservableChecker.prototype.check = function(callback) {
-    return this.observable.check(() => callback(this.val()));
+    this.$updateWithMutation($observable.val());
 }
 
-/**
- * Gets the current transformed/checked value.
- *
- * @returns {*} The result of applying the checker function to the observable's current value
- * @example
- * const count = Observable(5);
- * const doubled = count.check(n => n * 2);
- * doubled.val(); // 10
- */
-ObservableChecker.prototype.val = function() {
-    return this.checker && this.checker(this.observable.val());
-}
+ObservableChecker.prototype = Object.create(ObservableItem.prototype);
+ObservableChecker.prototype.constructor = ObservableChecker;
+ObservableChecker.prototype.__$Observable = true;
+ObservableChecker.prototype.__$isObservableChecker = true;
 
-/**
- * Sets the value of the underlying observable (not the transformed value).
- *
- * @param {*} value - New value for the underlying observable
- * @example
- * const count = Observable(5);
- * const doubled = count.check(n => n * 2);
- * doubled.set(10); // Sets count to 10, doubled.val() returns 20
- */
-ObservableChecker.prototype.set = function(value) {
-    return this.observable.set(value);
-};
 
-/**
- * Manually triggers the underlying observable to notify subscribers.
- *
- * @example
- * const count = Observable(5);
- * const doubled = count.check(n => n * 2);
- * doubled.trigger(); // Notifies all subscribers
- */
-ObservableChecker.prototype.trigger = function() {
-    return this.observable.trigger();
-};
+export const ObservablePipe = ObservableChecker;
+ObservablePipe.prototype.constructor = ObservablePipe;
 
-/**
- * Cleans up the underlying observable and all its subscriptions.
- */
-ObservableChecker.prototype.cleanup = function() {
-    return this.observable.cleanup();
+ObservableChecker.prototype.$updateWithMutation = function(newValue) {
+    newValue = this.$mutation(newValue);
+    return this.set(newValue);
 };

package/src/core/data/ObservableItem.js

@@ -73,6 +73,11 @@ ObservableItem.prototype.intercept = function(callback) {
     return this;
 };
 
+ObservableItem.prototype.interceptMutations = function(callback) {
+    this.$mutationInterceptor = callback;
+    return this;
+};
+
 ObservableItem.prototype.triggerFirstListener = function(operations) {
     this.$firstListener(this.$currentValue, this.$previousValue, operations);
 };
@@ -115,6 +120,8 @@ ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations)
 ObservableItem.prototype.assocTrigger = function() {
     this.$firstListener = null;
     if(this.$watchers?.size && this.$listeners?.length) {
+        this.$firstListener = this.$listeners[0];
+        this.trigger = this.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener
         this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
         return;
     }
@@ -167,7 +174,8 @@ ObservableItem.prototype.$setWithInterceptor = function(data) {
     }
 
     this.$updateWithNewValue(newValue);
-}
+};
+
 
 /**
  * @param {*} data
@@ -366,10 +374,20 @@ ObservableItem.prototype.check = function(callback) {
 };
 
 ObservableItem.prototype.transform = ObservableItem.prototype.check;
-ObservableItem.prototype.pluck = ObservableItem.prototype.check;
-ObservableItem.prototype.is = ObservableItem.prototype.check;
+ObservableItem.prototype.pluck = function(property) {
+    return new ObservableChecker(this, (value) => value[property]);
+};
+ObservableItem.prototype.is = function(callbackOrValue) {
+    if(typeof callbackOrValue === 'function') {
+        return new ObservableChecker(this, callbackOrValue);
+    }
+    return new ObservableChecker(this, (value) => value === callbackOrValue);
+};
 ObservableItem.prototype.select = ObservableItem.prototype.check;
 
+
+
+
 /**
  * Gets a property value from the observable's current value.
  * If the property is an observable, returns its value.
@@ -573,4 +591,18 @@ ObservableItem.prototype.persist = function(key, options = {}) {
         saver(key, options.set ? options.set(newValue) : newValue);
     });
     return this;
+};
+
+ObservableItem.prototype.clone = function() {
+    let clonedValue = this.$currentValue;
+
+    if(clonedValue && typeof clonedValue === 'object') {
+        if(typeof clonedValue.clone === 'function') {
+            clonedValue = clonedValue.clone();
+        } else {
+            clonedValue = structuredClone(clonedValue);
+        }
+    }
+
+    return new ObservableItem(clonedValue);
 };

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

@@ -27,7 +27,8 @@ import {nextTick} from "../../utils/helpers";
 Observable.computed = function(callback, dependencies = []) {
     const initialValue = callback();
     const observable = new ObservableItem(initialValue);
-    const updatedValue = nextTick(() => observable.set(callback()));
+    const getValues = () => dependencies.map((item) => item.val());
+    const updatedValue = nextTick(() => observable.set(callback(...getValues())));
     if(process.env.NODE_ENV === 'development') {
         PluginsManager.emit('CreateObservableComputed', observable, dependencies);
     }

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

@@ -1,6 +1,7 @@
 import Validator from "../../utils/validator";
 import {Observable} from "../Observable";
 import {ObservableObject} from "../ObservableObject";
+import ObservableItem from "../ObservableItem";
 
 
 Observable.init = function(initialValue, configs = null) {
@@ -22,22 +23,26 @@ Observable.arrayOfObject = function(data) {
  * @returns {{}|*|null}
  */
 Observable.value = function(data) {
-    if(Validator.isObservable(data)) {
-        return data.val();
-    }
-    if(Validator.isProxy(data)) {
-        return data.$value;
-    }
-    if(Validator.isArray(data)) {
+    if(data?.__$isObservableArray) {
         const result = [];
         for(let i = 0, length = data.length; i < length; i++) {
-            const item = data[i];
+            const item = data.at(i);
             result.push(Observable.value(item));
         }
         return result;
     }
+    if(data?.__$Observable) {
+        return data.val();
+    }
+    if(Validator.isProxy(data)) {
+        return data.$value;
+    }
     return data;
 };
 
+ObservableItem.prototype.resolve = function () {
+    return Observable.value(this);
+};
+
 Observable.object = Observable.init;
 Observable.json = Observable.init;