native-document 1.0.15 → 1.0.16-8.1

package/src/components/tooltip/Tooltip.js

@@ -0,0 +1,359 @@
+import {Observable} from '../../core/data/Observable';
+import {NDElement} from '../../core/wrappers/NDElement';
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+import DebugManager from '../../core/utils/debug-manager';
+
+/**
+ * Contextual tooltip anchored to a trigger element. Supports hover/click/focus interactions, position, arrow, and interactive mode.
+ *
+ * @example
+ * const tooltip = new Tooltip(Span('This is a helpful hint'))
+ *     .trigger(iconEl)
+ *     .onHovered()
+ *     .position('top')
+ *     .arrow(true)
+ *     .hideDelay(200)
+ *     .info();
+ *
+ * Tooltip.use((description, instance) => {
+ *     return Div({ class: 'tooltip' }, description.title, description.content);
+ * });
+ *
+ * @constructor
+ * @param {NdChild} content
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function Tooltip(content, props = {}) {
+    if (!(this instanceof Tooltip)) {
+        return new Tooltip(content, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        trigger: null,
+        interaction: 'hover',
+        content,
+        position: 'top',
+        title: null,
+        isOpen: Observable(false),
+        offset: 8,
+        shift: {},
+        hideDelay: 0,
+        arrow: true,
+        interactive: true,
+        variant: null,
+        updatePositionOn: null,
+        props,
+    };
+}
+
+BaseComponent.extends(Tooltip);
+BaseComponent.use(Tooltip, HasEventEmitter);
+
+Tooltip.defaultTemplate = null;
+
+
+/**
+ * Registers the render template for Tooltip.
+ * @param {(description: {
+ *     trigger: HTMLElement|NDElement|null,
+ *     interaction: 'hover'|'click'|'focus',
+ *     content: NdChild,
+ *     position: 'top'|'bottom'|'left'|'right',
+ *     title: NdChild|null,
+ *     isOpen: Observable<boolean>,
+ *     offset: number,
+ *     shift: Record<string, number>,
+ *     hideDelay: number,
+ *     arrow: boolean,
+ *     interactive: boolean,
+ *     variant: string|null,
+ *     updatePositionOn: Observable<*>|null,
+ *     props: GlobalAttributes,
+ * }, instance: Tooltip) => NdChild} template
+ */
+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;
+        };
+    }
+};
+
+/**
+ * @param {string} name
+ * @param {(t: Tooltip) => Tooltip} callback
+ */
+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));
+};
+
+/**
+ * @param {Record<string, (t: Tooltip) => Tooltip>} presets
+ */
+Tooltip.presets = function(presets) {
+    for (const name in presets) {
+        Tooltip.preset(name, presets[name]);
+    }
+};
+
+/**
+ * @param {HTMLElement|NDElement} trigger
+ * @returns {this}
+ */
+Tooltip.prototype.trigger = function(trigger) {
+    this.$description.trigger = trigger;
+    return this;
+};
+
+/**
+ * @param {NdChild} title
+ * @returns {this}
+ */
+Tooltip.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+
+/**
+ * @param {NdChild} content
+ * @returns {this}
+ */
+Tooltip.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+/**
+ * @param {string} variant
+ * @returns {this}
+ */
+Tooltip.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.primary = function() {
+    this.$description.variant = 'primary';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.success = function() {
+    this.$description.variant = 'success';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.warning = function() {
+    this.$description.variant = 'warning';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.danger = function() {
+    this.$description.variant = 'danger';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.info = function() {
+    this.$description.variant = 'info';
+    return this;
+};
+
+/**
+ * @param {'top'|'bottom'|'left'|'right'} position
+ * @returns {this}
+ */
+Tooltip.prototype.position = function(position) {
+    this.$description.position = position;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.atTop = function() {
+    this.$description.position = 'top';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.atBottom = function() {
+    this.$description.position = 'bottom';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.atLeft = function() {
+    this.$description.position = 'left';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.atRight = function() {
+    this.$description.position = 'right';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.onClicked = function() {
+    this.$description.interaction = 'click';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.onHovered = function() {
+    this.$description.interaction = 'hover';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.onFocused = function() {
+    this.$description.interaction = 'focus';
+    return this;
+};
+
+/**
+ * @param {number} ms
+ * @returns {this}
+ */
+Tooltip.prototype.hideDelay = function(ms) {
+    this.$description.hideDelay = ms;
+    return this;
+};
+
+/**
+ * @param {*} [enabled]
+ * @returns {this}
+ */
+Tooltip.prototype.arrow = function(enabled = true) {
+    this.$description.arrow = enabled;
+    return this;
+};
+
+/**
+ * @param {boolean} [isInteractive=true]
+ * @returns {this}
+ */
+Tooltip.prototype.interactive = function(isInteractive = true) {
+    this.$description.interactive = isInteractive;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.open = function() {
+    this.$description.isOpen.set(true);
+    this.emit('open');
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.close = function() {
+    this.$description.isOpen.set(false);
+    this.emit('close');
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Tooltip.prototype.toggle = function() {
+    this.$description.isOpen.val() ? this.close() : this.open();
+    return this;
+};
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
+Tooltip.prototype.onOpen = function(handler) {
+    this.on('open', handler);
+    return this;
+};
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
+Tooltip.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
+
+/**
+ * @param {number} offset
+ * @returns {this}
+ */
+Tooltip.prototype.offset = function(offset) {
+    this.$description.offset = offset;
+    return this;
+};
+
+/**
+ * @param {*} shift
+ * @returns {this}
+ */
+Tooltip.prototype.shift = function(shift) {
+    this.$description.shift = shift;
+    return this;
+};
+
+/**
+ * @param {*} updatePositionOn
+ * @returns {this}
+ */
+Tooltip.prototype.updatePositionOn = function(updatePositionOn) {
+    this.$description.updatePositionOn = updatePositionOn;
+    return this;
+};

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 '../../core/wrappers/NDElement';
+
+NDElement.prototype.tooltip = function (tooltip) {
+    // TODO: implement tooltip
+};

package/src/components/tooltip/types/Tooltip.d.ts

@@ -0,0 +1,65 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type TooltipDescription = {
+        trigger: HTMLElement | null;
+        interaction: 'hover' | 'click' | 'focus';
+        content: ValidChild;
+        position: 'top' | 'bottom' | 'left' | 'right';
+        title: ValidChild | null;
+        isOpen: ObservableItem<boolean>;
+        offset: number;
+        shift: Record<string, number>;
+        hideDelay: number;
+        arrow: boolean;
+        interactive: boolean;
+        variant: string | null;
+        updatePositionOn: ObservableItem<unknown> | null;
+        props: GlobalAttributes;
+    };
+
+export interface TooltipInterface extends BaseComponent {
+    trigger(trigger: HTMLElement): this;
+    title(title: ValidChild): this;
+    content(content: ValidChild): this;
+    variant(variant: string): this;
+    primary(): this;
+    success(): this;
+    warning(): this;
+    danger(): this;
+    info(): this;
+    position(position: 'top' | 'bottom' | 'left' | 'right'): this;
+    atTop(): this;
+    atBottom(): this;
+    atLeft(): this;
+    atRight(): this;
+    onClicked(): this;
+    onHovered(): this;
+    onFocused(): this;
+    hideDelay(ms: number): this;
+    arrow(enabled?: boolean): this;
+    interactive(isInteractive?: boolean): this;
+    open(): this;
+    close(): this;
+    toggle(): this;
+    onOpen(handler: () => void): this;
+    onClose(handler: () => void): this;
+    render(renderFn: (desc: TooltipDescription, instance: TooltipInterface) => ValidChild): this;
+    offset(offset: number): this;
+    shift(shift: Record<string, number>): this;
+    updatePositionOn(obs: ObservableItem<unknown> | unknown): this;
+}
+
+
+export declare function Tooltip(content: ValidChild, props?: Record<string, unknown>): TooltipInterface;
+export declare namespace Tooltip {
+
+
+    function use(template: (description: TooltipDescription, instance: TooltipInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: TooltipInterface) => TooltipInterface): void;
+    function presets(presets: Record<string, (instance: TooltipInterface) => TooltipInterface>): void;
+
+
+}

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

@@ -1,5 +1,4 @@
-import DebugManager from "../utils/debug-manager";
-import Validator from "../utils/validator";
+import DebugManager from '../../core/utils/debug-manager';
 
 
 const MemoryManager = (function() {
@@ -51,7 +50,7 @@ const MemoryManager = (function() {
             if (cleanedCount > 0) {
                 DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
             }
-        }
+        },
     };
 }());
 

package/src/core/data/Observable.js

@@ -0,0 +1,227 @@
+import ObservableItem from './ObservableItem';
+import MemoryManager from './MemoryManager';
+import NativeDocumentError from '../../core/errors/NativeDocumentError';
+import ObservableArray from './ObservableArray';
+import Validator from '../utils/validator';
+import {nextTick} from '../utils/helpers';
+import PluginsManager from '../utils/plugins-manager';
+import {ObservableObject} from './ObservableObject';
+
+import './observable-helpers/observable.is-to';
+import './observable-helpers/observable.prototypes';
+import ObservableResource from './ObservableResource';
+import {Formatters} from '../utils/formatters';
+/**
+ *
+ * @param {*} value
+ * @param {{ propagation: boolean, reset: boolean} | null} configs
+ * @returns {ObservableItem}
+ * @constructor
+ */
+export function Observable(value, configs = null) {
+    return new ObservableItem(value, configs);
+}
+
+export const $ = Observable;
+export const obs = Observable;
+
+/**
+ *
+ * @param {string} propertyName
+ */
+Observable.useValueProperty = function(propertyName = 'value') {
+    Object.defineProperty(ObservableItem.prototype, propertyName, {
+        get() {
+            return this.$currentValue;
+        },
+        set(value) {
+            this.set(value);
+        },
+        configurable: true,
+    });
+};
+
+Observable.setLocale = function(locale) {
+    Formatters.locale = locale.__$Observable ? locale : Observable(locale);
+};
+
+
+/**
+ *
+ * @param id
+ * @returns {ObservableItem|null}
+ */
+Observable.getById = function(id) {
+    const item = MemoryManager.getObservableById(parseInt(id));
+    if(!item) {
+        throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
+    }
+    return item;
+};
+
+/**
+ *
+ * @param {ObservableItem} observable
+ */
+Observable.cleanup = function(observable) {
+    observable.cleanup();
+};
+
+/**
+ * Enable auto cleanup of observables.
+ * @param {Boolean} enable
+ * @param {{interval:Boolean, threshold:number}} options
+ */
+Observable.autoCleanup = function(enable = false, options = {}) {
+    if(!enable) {
+        return;
+    }
+    const { interval = 60000, threshold = 100 } = options;
+
+    window.addEventListener('beforeunload', () => {
+        MemoryManager.cleanup();
+    });
+
+    setInterval(() => MemoryManager.cleanObservables(threshold), interval);
+};
+
+
+/**
+ * Creates an observable array with reactive array methods.
+ * All mutations trigger updates automatically.
+ *
+ * @param {Array} [target=[]] - Initial array value
+ * @param {Object|null} [configs=null] - Configuration options
+ * // @param {boolean} [configs.propagation=true] - Whether to propagate changes to parent observables
+ * // @param {boolean} [configs.deep=false] - Whether to make nested objects observable
+ * @param {boolean} [configs.reset=false] - Whether to store initial value for reset()
+ * @returns {ObservableArray} An observable array with reactive methods
+ * @example
+ * const items = Observable.array([1, 2, 3]);
+ * items.push(4); // Triggers update
+ * items.subscribe((arr) => console.log(arr));
+ */
+Observable.array = function(target = [], configs = null) {
+    return new ObservableArray(target, configs);
+};
+
+/**
+ *
+ * @param {Function} callback
+ * @returns {Function}
+ */
+Observable.batch = function(callback) {
+    const $observer = Observable(0);
+    const batch = function() {
+        if(Validator.isAsyncFunction(callback)) {
+            return (callback(...arguments)).then(() => {
+                $observer.trigger();
+            }).catch(error => { throw error; });
+        }
+        callback(...arguments);
+        $observer.trigger();
+    };
+    batch.$observer = $observer;
+    return batch;
+};
+
+
+/**
+ * Creates a computed observable that automatically updates when its dependencies change.
+ * The callback is re-executed whenever any dependency observable changes.
+ *
+ * @param {Function} callback - Function that returns the computed value
+ * @param {Array<ObservableItem|ObservableChecker|ObservableProxy>|Function} [dependencies=[]] - Array of observables to watch, or batch function
+ * @returns {ObservableItem} A new observable that updates automatically
+ * @example
+ * const firstName = Observable('John');
+ * const lastName = Observable('Doe');
+ * const fullName = Observable.computed(
+ *   () => `${firstName.val()} ${lastName.val()}`,
+ *   [firstName, lastName]
+ * );
+ *
+ * // With batch function
+ * const batch = Observable.batch(() => { ...  });
+ * const computed = Observable.computed(() => { ... }, batch);
+ */
+Observable.computed = function(callback, dependencies = []) {
+    const getValues = () => dependencies.map((item) => item.val());
+    const initialValue = callback(...getValues());
+    const observable = new ObservableItem(initialValue);
+    const updatedValue = nextTick(() => observable.set(callback(...getValues())));
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('CreateObservableComputed', observable, dependencies);
+    }
+
+    if(Validator.isFunction(dependencies)) {
+        if(!Validator.isObservable(dependencies.$observer)) {
+            throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
+        }
+        dependencies.$observer.subscribe(updatedValue);
+        return observable;
+    }
+
+    dependencies.forEach(dependency => {
+        if(dependency.__$isObservableObject) {
+            dependency.observables().forEach((observable) => {
+                observable.subscribe(updatedValue);
+            });
+            return;
+        }
+        dependency.subscribe(updatedValue);
+    });
+
+    return observable;
+};
+ObservableItem.computed = Observable.computed;
+
+
+Observable.init = function(initialValue, configs = null) {
+    return new ObservableObject(initialValue, configs);
+};
+
+/**
+ *
+ * @param {any[]} data
+ * @return Proxy[]
+ */
+Observable.arrayOfObject = function(data) {
+    return data.map(item => Observable.object(item));
+};
+
+/**
+ * Get the value of an observable or an object of observables.
+ * @param {ObservableItem|Object<ObservableItem>} data
+ * @returns {{}|*|null}
+ */
+Observable.value = function(data) {
+    if(data?.__$isObservableArray) {
+        const result = [];
+        for(let i = 0, length = data.length; i < length; i++) {
+            const item = data.at(i);
+            result.push(Observable.value(item));
+        }
+        return result;
+    }
+    if(data?.__$Observable) {
+        return data.val();
+    }
+    return data;
+};
+
+Observable.object = Observable.init;
+Observable.json = Observable.init;
+
+
+Observable.resource = function(fn, deps = [], options = false) {
+    const config = (typeof options === 'boolean')
+        ? { auto: options, debounce: 0, lazy: false }
+        : { auto: false, debounce: 0, lazy: false, ...options };
+
+    return new ObservableResource(fn, deps, config);
+};
+
+ObservableItem.prototype.resolve = function () {
+    return Observable.value(this);
+};