native-document 1.0.14 → 1.0.16-8.1

package/src/router/Router.js

@@ -1,20 +1,20 @@
-import {Route} from "./Route.js";
-import Validator from "../utils/validator.js";
-import RouterError from "../errors/RouterError.js";
-import {RouteGroupHelper} from "./RouteGroupHelper.js";
-import {trim} from "../utils/helpers.js";
-import HashRouter from "./modes/HashRouter.js";
-import HistoryRouter from "./modes/HistoryRouter.js";
-import MemoryRouter from "./modes/MemoryRouter.js";
-import DebugManager from "../utils/debug-manager.js";
-import {RouterComponent} from "./RouterComponent.js";
+import {Route} from './Route.js';
+import Validator from '../core/utils/validator.js';
+import RouterError from './errors/RouterError.js';
+import {RouteGroupHelper} from './RouteGroupHelper.js';
+import {trim} from '../core/utils/helpers.js';
+import HashRouter from './modes/HashRouter.js';
+import HistoryRouter from './modes/HistoryRouter.js';
+import MemoryRouter from './modes/MemoryRouter.js';
+import DebugManager from '../core/utils/debug-manager.js';
+import {RouterComponent} from './RouterComponent.js';
 
 export const DEFAULT_ROUTER_NAME = 'default';
 
 /**
  *
  * @param {{mode: 'memory'|'history'|'hash'}} $options
- * @constructor
+ * @class
  */
 export default function Router($options = {}) {
 
@@ -45,7 +45,7 @@ export default function Router($options = {}) {
                 DebugManager.warn('Route Listener', 'Error in listener:', e);
             }
         }
-    }
+    };
 
     this.routes = () => [...$routes];
     this.currentState = () => ({ ...$currentState });
@@ -54,7 +54,7 @@ export default function Router($options = {}) {
      *
      * @param {string} path
      * @param {Function} component
-     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object }} options
+     * @param {{name:?string, middlewares:Function[], shouldRebuild:Boolean, with: Object, layout: Function }} options
      * @returns {this}
      */
     this.add = function(path, component, options) {
@@ -62,6 +62,7 @@ export default function Router($options = {}) {
             ...options,
             middlewares: RouteGroupHelper.fullMiddlewares($groupTree, options?.middlewares || []),
             name: options?.name ? RouteGroupHelper.fullName($groupTree, options.name) : null,
+            layout: options?.layout || RouteGroupHelper.layout($groupTree),
         });
         $routes.push(route);
         if(route.name()) {
@@ -71,11 +72,20 @@ export default function Router($options = {}) {
     };
 
     /**
+     * Groups routes under a common path prefix with shared options.
      *
-     * @param {string} suffix
-     * @param {{ middlewares: Function[], name: string}} options
-     * @param {Function} callback
-     * @returns {this}
+     * @param {string} suffix - Path prefix to prepend to all routes in the group
+     * @param {Object} options - Group configuration options
+     * @param {Function[]} [options.middlewares] - Middlewares applied to all routes in group
+     * @param {string} [options.name] - Name prefix for all routes in group
+     * @param {Function} [options.layout] - Layout component for all routes in group
+     * @param {Function} callback - Function that defines routes within the group
+     * @returns {this} Router instance for chaining
+     * @example
+     * router.group('/admin', { middlewares: [authMiddleware], layout: AdminLayout }, () => {
+     *   router.add('/users', UsersPage, { name: 'users' });
+     *   router.add('/settings', SettingsPage, { name: 'settings' });
+     * });
      */
     this.group = function(suffix, options, callback) {
         if(!Validator.isFunction(callback)) {
@@ -108,6 +118,17 @@ export default function Router($options = {}) {
      * @returns {{route:Route, params:Object, query:Object, path:string}}
      */
     this.resolve = function(target) {
+        if(typeof target === 'string') {
+            const route = $routesByName[target];
+            if(route) {
+                return {
+                    route,
+                    params: [],
+                    query: [],
+                    path: route.url({ name: target }),
+                };
+            }
+        }
         if(Validator.isJson(target)) {
             const route = $routesByName[target.name];
             if(!route) {
@@ -117,7 +138,7 @@ export default function Router($options = {}) {
                 route,
                 params: target.params,
                 query: target.query,
-                path: route.url({ ...target })
+                path: route.url({ ...target }),
             };
         }
 
@@ -193,14 +214,24 @@ export default function Router($options = {}) {
 Router.routers = {};
 
 /**
+ * Creates and initializes a new router instance.
  *
- * @param {{mode: 'memory'|'history'|'hash', name?:string, entry?: string}} options
- * @param {Function} callback
- * @param {Element} container
+ * @param {Object} options - Router configuration
+ * @param {'memory'|'history'|'hash'} options.mode - Routing mode
+ * @param {string} [options.name] - Router name for multi-router apps
+ * @param {string} [options.entry] - Initial route path
+ * @param {Function} callback - Setup function that receives the router instance
+ * @returns {Router} The configured router instance with mount() method
+ * @example
+ * const router = Router.create({ mode: 'history' }, (r) => {
+ *   r.add('/home', HomePage, { name: 'home' });
+ *   r.add('/about', AboutPage, { name: 'about' });
+ * });
+ * router.mount('#app');
  */
 Router.create = function(options, callback) {
     if(!Validator.isFunction(callback)) {
-        DebugManager.error('Router', 'Callback must be a function', e);
+        DebugManager.error('Router', 'Callback must be a function');
         throw new RouterError('Callback must be a function');
     }
     const router = new Router(options);
@@ -248,3 +279,13 @@ Router.forward = function(name = null) {
 Router.back = function(name = null) {
     return Router.get(name).back();
 };
+
+Router.redirectTo = function(pathOrRouteName, params = null, name = null) {
+    let target = pathOrRouteName;
+    const router = Router.get(name);
+    const route = router.resolve({ name: pathOrRouteName, params });
+    if(route) {
+        target = { name: pathOrRouteName, params};
+    }
+    return router.push(target);
+};

package/src/router/RouterComponent.js

@@ -1,3 +1,7 @@
+import Validator from '../core/utils/validator';
+import {Anchor} from '../../elements';
+import {ElementCreator} from '../core/wrappers/ElementCreator';
+
 /**
  *
  * @param {Router} router
@@ -6,26 +10,130 @@
 export function RouterComponent(router, container) {
 
     const $cache = new Map();
+    const $layoutCache = new WeakMap();
+    const $routeInstanceAnchors = new WeakMap();
+    let $currentLayout = null;
+
+    let $lastNodeInserted  = null;
+
+    const $lifecycles = new Map();
+    let $currentPath = null;
+
+    const getNodeAnchorForLayout = (node, path) => {
+        const existingAnchor = $routeInstanceAnchors.get(node);
+        if(existingAnchor) {
+            return existingAnchor;
+        }
+
+        let anchor = node;
+        if(!Validator.isAnchor(node)) {
+            anchor = Anchor(path);
+            anchor.appendChild(node);
+        }
+        $routeInstanceAnchors.set(node, anchor);
+        return anchor;
+    };
+
+    const removeLastNodeInserted = () => {
+        $lastNodeInserted?.remove();
+    };
+
+    const cleanContainer = () => {
+        container.nodeValue = '';
+        removeLastNodeInserted();
+
+        if($currentLayout) {
+            $currentLayout.remove();
+        }
+    };
+
+    const getNodeToInsert = (node) => {
+        let nodeToInsert = node;
+        if(Validator.isNDElement(node)) {
+            nodeToInsert = node.node();
+        }
+        return nodeToInsert;
+    };
+
+    const updateContainerByLayout = (layout, node, route, path) => {
+        const nodeToInsert = getNodeToInsert(node);
 
-    const updateContainer = function(node) {
-        container.innerHTML = '';
-        container.appendChild(node);
+        const cachedLayout = $layoutCache.get(nodeToInsert);
+        if(cachedLayout) {
+            if(cachedLayout === $currentLayout) {
+                const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
+                removeLastNodeInserted();
+                $lastNodeInserted = nodeToInsert;
+                layoutAnchor.replaceContent(nodeToInsert);
+                return;
+            }
+            cleanContainer();
+            $lastNodeInserted = nodeToInsert;
+            $currentLayout = cachedLayout;
+            const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
+            layoutAnchor.replaceContent(nodeToInsert);
+            container.appendChild($currentLayout);
+            return;
+        }
+        cleanContainer();
+        $lastNodeInserted = nodeToInsert;
+        const anchor = getNodeAnchorForLayout(nodeToInsert, path);
+
+        $currentLayout = ElementCreator.getChild(layout(anchor));
+        $layoutCache.set(nodeToInsert, $currentLayout);
+        container.appendChild($currentLayout);
+    };
+
+    const updateContainer = function(node, route, path) {
+        const layout = route.layout();
+        if(layout) {
+            updateContainerByLayout(layout, node, route, path);
+            return;
+        }
+        const nodeToInsert = getNodeToInsert(node);
+
+        cleanContainer();
+        container.appendChild(nodeToInsert);
+        $lastNodeInserted = node;
     };
 
     const handleCurrentRouterState = function(state) {
         if(!state.route) {
             return;
         }
+
         const { route, params, query, path } = state;
+
+        if($currentPath && $currentPath !== path) {
+            $lifecycles.get($currentPath)?.onLeave?.();
+        }
+
         if($cache.has(path)) {
             const cacheNode = $cache.get(path);
-            updateContainer(cacheNode);
+            updateContainer(cacheNode, route);
+
+            $lifecycles.get(path)?.onEnter?.(params, query);
+            $currentPath = path;
+
             return;
         }
+        const pathLifecycles = {};
+        $lifecycles.set(path, pathLifecycles);
+
+
+
         const Component = route.component();
-        const node = Component({ params, query });
+        const node = Component({
+            params,
+            query,
+            onEnter: (cb) => { pathLifecycles.onEnter = cb; },
+            onLeave: (cb) => { pathLifecycles.onLeave = cb; },
+        });
         $cache.set(path, node);
-        updateContainer(node);
+        updateContainer(node, route, path);
+
+        pathLifecycles.onEnter?.(params, query);
+        $currentPath = path;
     };
 
     router.subscribe(handleCurrentRouterState);

package/src/{errors → router/errors}/RouterError.js

@@ -5,5 +5,4 @@ export default class RouterError extends Error {
         super(message);
         this.context = context;
     }
-
 }

package/src/router/link.js

@@ -1,26 +1,25 @@
-import Validator from "../utils/validator.js";
-import {Link as NativeLink} from "../../elements.js";
-import Router, {DEFAULT_ROUTER_NAME} from "./Router.js";
-import RouterError from "../errors/RouterError.js";
+import Validator from '../core/utils/validator';
+import {Link as NativeLink} from '../../elements';
+import Router, {DEFAULT_ROUTER_NAME} from './Router';
+import RouterError from './errors/RouterError';
 
 
 export function Link(options, children){
     const { to, href, ...attributes } = options;
-    const target = to || href;
-    if(Validator.isString(target)) {
+    if(href) {
         const router = Router.get();
-        return NativeLink({ ...attributes, href: target}, children).nd.on.prevent.click(() => {
-            router.push(target);
+        return NativeLink({ ...attributes, href}, children).nd.onPreventClick(() => {
+            router.push(href);
         });
     }
+    const target = typeof to === 'string' ? { name: to } : to;
     const routerName = target.router || DEFAULT_ROUTER_NAME;
     const router = Router.get(routerName);
-    console.log(routerName)
     if(!router) {
         throw new RouterError('Router not found "'+routerName+'" for link "'+target.name+'"');
     }
     const url = router.generateUrl(target.name, target.params, target.query);
-    return NativeLink({ ...attributes, href: url }, children).nd.on.prevent.click(() => {
+    return NativeLink({ ...attributes, href: url }, children).nd.onPreventClick(() => {
         router.push(url);
     });
 }

package/src/router/modes/HashRouter.js

@@ -32,7 +32,7 @@ export default function HashRouter() {
      */
     const setHash = (path) => {
         window.location.replace(`${window.location.pathname}${window.location.search}#${path}`);
-    }
+    };
 
     const getCurrentHash = () => window.location.hash.slice(1);
 
@@ -79,5 +79,5 @@ export default function HashRouter() {
         $history.push({ route, params, query, path });
         $currentIndex = 0;
         this.handleRouteChange(route, params, query, path);
-    }
+    };
 };

package/src/router/modes/HistoryRouter.js

@@ -1,5 +1,4 @@
-import RouterError from '../../errors/RouterError';
-import DebugManager from "../../utils/debug-manager.js";
+import DebugManager from '../../core/utils/debug-manager.js';
 
 export default function HistoryRouter() {
 
@@ -61,6 +60,6 @@ export default function HistoryRouter() {
         });
         const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
         this.handleRouteChange(route, params, query, path);
-    }
+    };
 
 };

package/src/router/modes/MemoryRouter.js

@@ -67,5 +67,5 @@ export default function MemoryRouter() {
         $currentIndex = 0;
 
         this.handleRouteChange(route, params, query, path);
-    }
+    };
 };

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,35 @@
+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;
+}

package/src/ui/components/alert/AlertRender.js

@@ -0,0 +1,81 @@
+import {Div, Span} from '../../../core/elements';
+import Button from '../../../components/button/Button';
+
+import './alert.css';
+
+export default function AlertRender($desc, instance) {
+    const props = instance.getEditableProps();
+
+    props.class.add('alert');
+    props.class.add('is-' + ($desc.variant || 'info'));
+    props.class.add('is-' + ($desc.appearance || 'bordered'));
+
+    const content = [];
+
+    if($desc.showIcon && $desc.icon) {
+        content.push(Span({class: 'alert-icon'}, $desc.icon));
+    }
+
+    content.push(buildBody($desc, instance));
+
+    return Div(instance.resolveProps(), content);
+}
+
+const buildBody = ($desc, instance) => {
+    const body = [];
+
+    if($desc.renderTitle) {
+        body.push(Div({class: 'alert-title'}, [
+            $desc.renderTitle($desc, instance),
+            $desc.closable ? buildClose($desc, instance) : null,
+        ]));
+    }
+    else if($desc.title) {
+        body.push(Div({class: 'alert-title'}, [
+            $desc.title,
+            $desc.closable ? buildClose($desc, instance) : null,
+        ]));
+    }
+
+    if($desc.renderContent) {
+        body.push(Div({class: 'alert-content'}, $desc.renderContent($desc, instance)));
+    }
+    else if($desc.content) {
+        body.push(Div({class: 'alert-content'}, $desc.content));
+    }
+
+    if($desc.renderFooter) {
+        body.push(Div({class: 'alert-footer'}, $desc.renderFooter($desc, instance)));
+    }
+    else if($desc.actions?.length) {
+        body.push(buildFooter($desc, instance));
+    }
+
+    return Div({class: 'alert-body'}, body);
+};
+
+const buildFooter = ($desc, instance) => {
+    const actions = $desc.actions.map((action) => {
+        let classes = '';
+
+        if ($desc.appearance === 'filled') {
+            classes  += ' is-light';
+        }
+
+
+        return Button(action.label, { class: 'alert-action'+classes })
+            .variant(action.variant || $desc.variant || 'info').nd.onClick(function() {
+                action.handler.call(this, ...arguments, instance);
+            });
+    });
+
+    return Div({class: 'alert-footer'}, actions);
+};
+
+const buildClose = ($desc, instance) => {
+    return Button('×', { class: 'alert-close' })
+        .nd.onClick(() => {
+            instance.emit('close');
+            instance.hide();
+        });
+};