native-document 1.0.138 → 1.0.140

package/src/core/utils/shortcut-manager.js

@@ -0,0 +1,242 @@
+import DebugManager from '../../core/utils/debug-manager';
+
+const isMac = navigator.platform.toUpperCase().includes('MAC')
+    || navigator.userAgent.includes('Mac');
+
+const MAC_SYMBOLS = {
+    meta:  '⌘',
+    shift: '⇧',
+    alt:   '⌥',
+    ctrl:  '⌃',
+};
+
+const WIN_LABELS = {
+    meta:  'Ctrl',
+    shift: 'Shift',
+    alt:   'Alt',
+    ctrl:  'Ctrl',
+};
+
+/**
+ * Parse a shortcut string into a normalized object.
+ * Supports:
+ *   Short convention : '+S', '++S', '+Shift+S'
+ *   Standard         : 'Ctrl+S', 'Cmd+S', 'Ctrl+Alt+S'
+ */
+const parse = (shortcut) => {
+    if(!shortcut) return null;
+
+    const result = { meta: false, shift: false, alt: false, ctrl: false, key: '' };
+
+    // Short convention — starts with '+'
+    if(shortcut.startsWith('+')) {
+        result.meta = true;
+
+        let rest = shortcut.slice(1);
+
+        // '++S' → alt
+        if(rest.startsWith('+')) {
+            result.alt = true;
+            rest = rest.slice(1);
+        }
+
+        const parts = rest.split('+').filter(Boolean);
+
+        for(const part of parts) {
+            const upper = part.toUpperCase();
+            if(upper === 'SHIFT')      result.shift = true;
+            else if(upper === 'ALT')   result.alt   = true;
+            else if(upper === 'CTRL')  result.ctrl  = true;
+            else                       result.key   = part.toUpperCase();
+        }
+
+        return result;
+    }
+
+    // Standard convention — 'Ctrl+S', 'Cmd+Shift+S'
+    const parts = shortcut.split('+').filter(Boolean);
+
+    for(const part of parts) {
+        const upper = part.toUpperCase();
+        if(upper === 'CTRL' || upper === 'CMD' || upper === 'META') result.meta  = true;
+        else if(upper === 'SHIFT')                                   result.shift = true;
+        else if(upper === 'ALT' || upper === 'OPTION')               result.alt   = true;
+        else                                                         result.key   = part.toUpperCase();
+    }
+
+    return result;
+};
+
+/**
+ * Normalize a parsed shortcut to a canonical key string
+ * used for storage and comparison.
+ */
+const normalize = (parsed) => {
+    const parts = [];
+    if(parsed.meta)  parts.push('meta');
+    if(parsed.ctrl)  parts.push('ctrl');
+    if(parsed.shift) parts.push('shift');
+    if(parsed.alt)   parts.push('alt');
+    parts.push(parsed.key.toLowerCase());
+    return parts.join('+');
+};
+
+const displayOnMac = (shortcut) => {
+    const parsed = parse(shortcut);
+    if(!parsed) return '';
+
+    const parts = [];
+
+    if(parsed.meta) {
+        parts.push(MAC_SYMBOLS.meta);
+    }
+    if(parsed.ctrl) {
+        parts.push(MAC_SYMBOLS.ctrl);
+    }
+    if(parsed.shift) {
+        parts.push(MAC_SYMBOLS.shift);
+    }
+    if(parsed.alt) {
+        parts.push(MAC_SYMBOLS.alt);
+    }
+    parts.push(parsed.key);
+
+    return parts.join(' ');
+};
+
+const displayOnWindows = (shortcut) => {
+    const parsed = parse(shortcut);
+    if(!parsed) return '';
+
+    const parts = [];
+    if(parsed.meta || parsed.ctrl) {
+        parts.push(WIN_LABELS.meta);
+    }
+    if(parsed.shift) {
+        parts.push(WIN_LABELS.shift);
+    }
+    if(parsed.alt) {
+        parts.push(WIN_LABELS.alt);
+    }
+    parts.push(parsed.key);
+
+    return parts.join('+');
+}
+
+/**
+ * Display a shortcut string for the current OS.
+ */
+const display = isMac ? displayOnMac : displayOnWindows;
+
+const $registry   = new Map();
+const $handlers   = new Map();
+
+const ShortcutManager = {
+
+    /**
+     * Register a shortcut.
+     * @param {string} shortcut
+     * @param {Function} handler
+     * @param {{ context?: string, force?: boolean, source?: string }} options
+     */
+    register(shortcut, handler, options = {}) {
+        const parsed = parse(shortcut);
+        if(!parsed || !parsed.key) {
+            DebugManager.warn(`ShortcutManager: invalid shortcut "${shortcut}"`);
+            return this;
+        }
+
+        const key     = normalize(parsed);
+        const context = options.context || 'global';
+        const source  = options.source  || 'unknown';
+        const mapKey  = context + ':' + key;
+
+        if($registry.has(mapKey) && !options.force) {
+            const existing = $registry.get(mapKey);
+            DebugManager.warn(
+                `ShortcutManager: "${shortcut}" is already registered by "${existing.source}" in context "${context}". Use { force: true } to override.`
+            );
+            return this;
+        }
+
+        $registry.set(mapKey, {handler, source, context, parsed});
+        return this;
+    },
+
+    /**
+     * Unregister a shortcut.
+     */
+    unregister(shortcut, context = 'global') {
+        const parsed = parse(shortcut);
+        if(!parsed) return this;
+
+        const key    = normalize(parsed);
+        const mapKey = context + ':' + key;
+
+        $registry.delete(mapKey);
+        return this;
+    },
+
+    /**
+     * Display a shortcut for the current OS.
+     */
+    display,
+
+    /**
+     * Parse a shortcut string.
+     */
+    parse,
+
+    /**
+     * Check if a shortcut is registered.
+     */
+    has(shortcut, context = 'global') {
+        const parsed = parse(shortcut);
+        if(!parsed) return false;
+        return $registry.has(context + ':' + normalize(parsed));
+    },
+
+    /**
+     * Initialize the global keyboard listener.
+     */
+    init() {
+        if(this.$initialized) {
+            return this;
+        }
+
+        this.$initialized = true;
+
+        document.addEventListener('keydown', (e) => {
+            const key = e.key.toUpperCase();
+
+            const parts = [];
+            if(e.metaKey || e.ctrlKey) parts.push('meta');
+            if(e.ctrlKey && !e.metaKey) parts.push('ctrl');
+            if(e.shiftKey)              parts.push('shift');
+            if(e.altKey)                parts.push('alt');
+            parts.push(key.toLowerCase());
+            parts.push(key.toLowerCase());
+
+            const normalizedKey = parts.join('+');
+
+            const globalKey = 'global:' + normalizedKey;
+            if($registry.has(globalKey)) {
+                e.preventDefault();
+                $registry.get(globalKey).handler(e);
+                return;
+            }
+
+            for(const [mapKey, entry] of $registry.entries()) {
+                if(mapKey.endsWith(':' + normalizedKey) && entry.context !== 'global') {
+                    e.preventDefault();
+                    entry.handler(e);
+                    return;
+                }
+            }
+        });
+
+        return this;
+    },
+};
+
+export default ShortcutManager;

package/src/core/utils/validator.js

@@ -19,7 +19,7 @@ VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
 const Validator = {
     isObservable(value) {
-        return  value?.__$isObservable;
+        return  value && (value.__$isObservable || value.__$Observable);
     },
     isTemplateBinding(value) {
         return  value?.__$isTemplateBinding;

package/src/core/wrappers/AttributesWrapper.js

@@ -12,6 +12,18 @@ export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
         if(value.__$Observable) {
+            if(value.__$isObservableChecker) {
+                let lastClass = value.val();
+                if(typeof lastClass === "string") {
+                    element.classes.toggle(lastClass, true);
+                    value.subscribe((currentValue) => {
+                        element.classes.remove(lastClass);
+                        element.classes.toggle(currentValue, true);
+                        lastClass = currentValue;
+                    });
+                    continue;
+                }
+            }
             element.classes.toggle(className, value.val());
             value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
             continue;
@@ -32,14 +44,39 @@ export const bindClassAttribute = (element, data) => {
 export const bindStyleAttribute = (element, data) => {
     for(const styleName in data) {
         const value = data[styleName];
-        if(value.__$isObservable) {
-            element.style[styleName] = value.val();
-            value.subscribe((newValue) => element.style[styleName] = newValue);
+        const isCustomProperty = styleName.startsWith('--');
+
+        if(value.__$Observable) {
+            if(isCustomProperty) {
+                element.style.setProperty(styleName, value.val());
+                value.subscribe((newValue) => {
+                    if(newValue === false) {
+                        element.style.removeProperty(styleName);
+                        return;
+                    }
+                    element.style.setProperty(styleName, newValue)
+                });
+            } else {
+                element.style[styleName] = value.val();
+                value.subscribe((newValue) => {
+                    if(newValue === false) {
+                        element.style.removeProperty(styleName);
+                        return;
+                    }
+                    element.style[styleName] = newValue
+                });
+            }
+            continue;
+        }
+
+        if(isCustomProperty) {
+            element.style.setProperty(styleName, value);
             continue;
         }
+
         element.style[styleName] = value;
     }
-}
+};
 
 /**
  *

package/src/core/wrappers/DocumentObserver.js

@@ -62,7 +62,6 @@ const DocumentObserver = {
     },
 
     checkMutation: function(mutationsList) {
-        console.log('mutationsList', mutationsList);
         for(const mutation of mutationsList) {
             if(DocumentObserver.mountedSupposedSize > 0) {
                 for(const node of mutation.addedNodes) {

package/src/core/wrappers/HtmlElementWrapper.js

@@ -17,7 +17,7 @@ export const createTextNode = (value) => {
 };
 
 
-const createHtmlElement = (element, _attributes, _children = null) => {
+export const createHtmlElement = (element, _attributes, _children = null) => {
     let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
 
     ElementCreator.processAttributes(element, attributes);

package/src/core/wrappers/NDElement.js

@@ -2,9 +2,12 @@ import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
 import NativeDocumentError from "../errors/NativeDocumentError.js";
 import DebugManager from "../utils/debug-manager.js";
+import Anchor from "../elements/anchor/anchor";
+import {ElementCreator} from "./ElementCreator";
 
 export function NDElement(element) {
     this.$element = element;
+    this.$attachements = null;
     if(process.env.NODE_ENV === 'development') {
         PluginsManager.emit('NDElementCreated', element, this);
     }
@@ -12,6 +15,14 @@ export function NDElement(element) {
 
 NDElement.prototype.__$isNDElement = true;
 
+NDElement.prototype.ghostDom = function(element) {
+    if(!this.$attachements) {
+        this.$attachements = document.createDocumentFragment();
+    }
+    this.$attachements.appendChild(ElementCreator.getChild(element));
+    return this;
+};
+
 NDElement.prototype.valueOf = function() {
     return this.$element;
 };
@@ -22,7 +33,9 @@ NDElement.prototype.ref = function(target, name) {
 };
 
 NDElement.prototype.refSelf = function(target, name) {
-    target[name] = new NDElement(this.$element);
+    target[name] = this;
+    // TODO: @DIM to check
+    // target[name] = new NDElement(this.$element);
     return this;
 };
 
@@ -166,7 +179,7 @@ NDElement.prototype.with = function(methods) {
         const method = methods[name];
 
         if (typeof method !== 'function') {
-            console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+            DebugManager.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
             continue;
         }
         if(process.env.NODE_ENV === 'development') {

package/src/core/wrappers/SvgElementWrapper.js

@@ -0,0 +1,15 @@
+import {createHtmlElement} from "./HtmlElementWrapper";
+
+export default function SvgElementWrapper(name) {
+    let node = null;
+
+    let createElement = (attr, children) => {
+        node = document.createElementNS('http://www.w3.org/2000/svg', name);
+        createElement = (attr, children) => {
+            return createHtmlElement(node.cloneNode(), attr, children);
+        };
+        return createHtmlElement(node.cloneNode(), attr, children);
+    };
+
+    return (attr, children) => createElement(attr, children);
+}

package/src/core/wrappers/prototypes/attributes-extensions.js

@@ -5,6 +5,7 @@ import {
 import ObservableItem from "../../data/ObservableItem";
 import TemplateBinding from "../TemplateBinding";
 import {BOOLEAN_ATTRIBUTES} from "../constants";
+import ObservableChecker from "../../data/ObservableChecker";
 
 
 ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
@@ -16,6 +17,8 @@ ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
     bindAttributeWithObservable(element, attributeName, this);
 };
 
-TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+
+    TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
     this.$hydrate(element, attributeName);
 };

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -36,7 +36,14 @@ ObservableItem.prototype.toNdElement = function () {
 ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
 
 NDElement.prototype.toNdElement = function () {
-    return this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+    const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+    if(this.$attachements) {
+        if(!this.$attachements.contains(this.$element)) {
+            this.$attachements.append(this.$element);
+        }
+        return this.$attachements;
+    }
+    return element;
 };
 
 Array.prototype.toNdElement = function () {

package/src/router/Router.js

@@ -287,6 +287,5 @@ Router.redirectTo = function(pathOrRouteName, params = null, name = null) {
     if(route) {
         target = { name: pathOrRouteName, params}
     }
-    console.log(target);
     return router.push(target);
 };

package/src/ui/components/accordion/AccordionItemRender.js

@@ -0,0 +1,63 @@
+import {Div, Span, ShowIf} from '../../../core/elements';
+
+export default function AccordionItemRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('accordion-item');
+    props.class.add({'is-disabled': $desc.disabled});
+
+    const header = buildHeader($desc, instance);
+    const content = buildContent($desc, instance);
+
+    return Div(instance.resolveProps(), [header, content]);
+}
+
+const buildHeader = ($desc, instance) => {
+    if($desc.renderHeader) {
+        return $desc.renderHeader($desc, instance);
+    }
+
+    const indicatorClass = $desc.expanded.transform(
+        (expanded) => 'accordion-indicator' + (expanded ? ' is-expanded' : '')
+    );
+
+    const content = [
+        Span({class: 'accordion-header-icon'}, $desc.icon),
+        Span({class: 'accordion-header-title'}, $desc.title),
+        buildIndicator($desc),
+    ];
+
+    const header = Div({class: 'accordion-header'}, content);
+
+    if(!$desc.disabled?.val()) {
+        header.nd.onClick(() => {
+            if($desc.collapsible || !$desc.expanded.val()) {
+                instance.toggle();
+            }
+        });
+    }
+
+    return header;
+};
+
+const buildIndicator = ($desc) => {
+    if($desc.renderIndicator) {
+        return $desc.renderIndicator($desc.expanded);
+    }
+
+    return Span({
+        class: $desc.expanded.transform((expanded) => 'accordion-indicator' + (expanded ? ' is-expanded' : '')),
+    }, '▾');
+};
+
+const buildContent = ($desc, instance) => {
+    if($desc.renderContent) {
+        return ShowIf($desc.expanded, () =>
+            Div({class: 'accordion-content'}, $desc.renderContent($desc, instance))
+        );
+    }
+
+    return ShowIf($desc.expanded, () =>
+        Div({class: 'accordion-content'}, $desc.content)
+    );
+};

package/src/ui/components/accordion/AccordionRender.js

@@ -0,0 +1,34 @@
+import {Div, ForEachArray} from '../../../core/elements';
+import './accordion.css';
+
+export default function AccordionRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('accordion');
+
+    if($desc.variant) {
+        props.class.add('is-' + $desc.variant);
+    }
+
+    const addItem = (item) => {
+        if($desc.renderIndicator && !item.$description.renderIndicator) {
+            item.renderIndicator($desc.renderIndicator);
+        }
+        item.onCollapse(() => instance.emit('collapse', item));
+        item.onExpand(() => {
+            instance.emit('expand', item);
+            if($desc.multiple) {
+                return;
+            }
+            $desc.items.forEach((other) => {
+                if(other !== item && other.isExpanded()) {
+                    other.expanded(false);
+                }
+            });
+        });
+
+        return item;
+    }
+
+    return Div(instance.resolveProps(), ForEachArray($desc.items, addItem));
+}

package/src/ui/components/accordion/accordion.css

@@ -0,0 +1,121 @@
+:root {
+    --accordion-border: var(--gray-lite-3);
+    --accordion-radius: var(--radius-card);
+    --accordion-font-size: var(--description-size);
+    --accordion-header-padding: var(--space-comfortable);
+    --accordion-content-padding: var(--space-comfortable);
+    --accordion-header-color: var(--text-color);
+    --accordion-header-color-hover: var(--text-color);
+    --accordion-header-bg-hover: var(--gray-lite-5);
+    --accordion-indicator-color: var(--gray);
+    --accordion-transition: 0.2s ease;
+}
+
+.accordion {
+    width: 100%;
+    font-size: var(--accordion-font-size);
+
+    &.is-bordered {
+        border: 1px solid var(--accordion-border);
+        border-radius: var(--accordion-radius);
+        overflow: hidden;
+
+        .accordion-item {
+            border-bottom: 1px solid var(--accordion-border);
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
+    &.is-separated {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-cozy);
+
+        .accordion-item {
+            border: 1px solid var(--accordion-border);
+            border-radius: var(--accordion-radius);
+            overflow: hidden;
+        }
+    }
+
+    &.is-flush {
+        .accordion-item {
+            border-bottom: 1px solid var(--accordion-border);
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        .accordion-header {
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+        .accordion-content {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
+
+.accordion-item {
+    &.is-disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+}
+
+.accordion-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-cozy);
+    padding: var(--accordion-header-padding);
+    cursor: pointer;
+    color: var(--accordion-header-color);
+    user-select: none;
+    transition: background var(--accordion-transition);
+
+    &:hover {
+        background: var(--accordion-header-bg-hover);
+        color: var(--accordion-header-color-hover);
+    }
+}
+
+.accordion-header-icon {
+    display: inline-flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.accordion-header-title {
+    flex: 1;
+    font-weight: 500;
+}
+
+.accordion-indicator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--accordion-indicator-color);
+    transition: transform var(--accordion-transition);
+    flex-shrink: 0;
+
+    &.is-expanded {
+        transform: rotate(180deg);
+    }
+}
+
+.accordion-content {
+    padding: var(--accordion-content-padding);
+    border-top: 1px solid var(--accordion-border);
+    overflow: hidden;
+}