native-document 1.0.290 → 1.0.292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.290",
+  "version": "1.0.292",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/components/breadcrumb/types/BreadCrumb.d.ts

@@ -33,10 +33,8 @@ export interface BreadCrumbInterface extends BaseComponent {
 export declare function BreadCrumb(props?: Record<string, unknown>): BreadCrumbInterface;
 export declare namespace BreadCrumb {
 
-
     function use(template: (description: BreadCrumbDescription, instance: BreadCrumbInterface) => ValidChild): void;
     function preset(name: string, callback: (instance: BreadCrumbInterface) => BreadCrumbInterface): void;
     function presets(presets: Record<string, (instance: BreadCrumbInterface) => BreadCrumbInterface>): void;
 
-
 }

package/src/components/button/Button.js

@@ -319,3 +319,21 @@ Button.prototype.block = function() {
     this.$description.block = true;
     return this;
 };
+
+
+// /**
+//  * @param {{name: string, params?: *}} route
+//  */
+// Button.prototype.linkTo = function(route) {
+//     this.$description.linkTo = route;
+//     return this;
+// };
+//
+// /**
+//  * @param {string} url
+//  */
+// Button.prototype.link = function(url, target = null) {
+//     this.$description.link = url;
+//     this.$description.linkTarget = target;
+//     return this;
+// };

package/src/components/button/types/Button.d.ts

@@ -47,6 +47,8 @@ export interface ButtonInterface extends BaseComponent {
     circle(): this;
     smooth(): this;
     block(): this;
+    // linkTo(route: {name: string, params?: object}): this;
+    // link(url: string, target?: string): this;
 }
 
 

package/src/components/form/field/Field.js

@@ -35,11 +35,11 @@ export default function Field(name, type, props) {
         type:          type,
         key:           name,
         label:         null,
-        placeholder:   null,
+        placeholder:   props?.placeholder ?? null,
         help:          null,
         defaultValue:  null,
-        disabled:      false,
-        readonly:      false,
+        disabled:      props?.disabled ?? null,
+        readonly:      props?.readonly ?? null,
         rules: [],
         clearErrorOn:  'focus',
         validateOn:    'blur',
@@ -75,6 +75,7 @@ BaseComponent.extends(Field);
 BaseComponent.use(Field, HasEventEmitter);
 BaseComponent.use(Field, HasValidation);
 
+
 /**
  * Registers the render template for Field.
  * @param {(description: {

package/src/router/Route.js

@@ -34,6 +34,7 @@ export const RouteParamPatterns = {
  * @param {boolean} [$options.shouldRebuild] - Whether to rebuild component on each navigation
  * @param {Object} [$options.with] - Custom parameter validation patterns
  * @param {Function} [$options.layout] - Layout component wrapper function
+ * @param {Function[]} [$options.layouts] - All prent Layouts component wrapper function
  */
 export function Route($path, $component, $options = {}) {
 
@@ -46,6 +47,7 @@ export function Route($path, $component, $options = {}) {
     const $shouldRebuild = $options.shouldRebuild || false;
     const $paramsValidators = $options.with || {};
     const $layout = $options.layout  || null;
+    const $layouts = $options.layouts  || null;
 
     const $params = {};
     const $paramsNames = [];
@@ -91,6 +93,7 @@ export function Route($path, $component, $options = {}) {
     this.shouldRebuild = () => $shouldRebuild;
     this.path = () => $path;
     this.layout = () => $layout;
+    this.layouts = () => $layouts;
 
     /**
      *

package/src/router/RouteGroupHelper.js

@@ -57,4 +57,9 @@ export const RouteGroupHelper = {
         }
         return null;
     },
+    layouts($groupTree) {
+        return $groupTree
+            .map(g => g.options?.layout)
+            .filter(Boolean);
+    },
 };

package/src/router/Router.js

@@ -63,6 +63,10 @@ export default function Router($options = {}) {
             middlewares: RouteGroupHelper.fullMiddlewares($groupTree, options?.middlewares || []),
             name: options?.name ? RouteGroupHelper.fullName($groupTree, options.name) : null,
             layout: options?.layout || RouteGroupHelper.layout($groupTree),
+            layouts: [
+                ...RouteGroupHelper.layouts($groupTree),
+                ...(options?.layout ? [options.layout] : []),
+            ],
         });
         $routes.push(route);
         if(route.name()) {
@@ -219,6 +223,10 @@ export default function Router($options = {}) {
         return middlewares[currentIndex](request, next);
     };
 
+    this.currentRouteName = function() {
+        return $currentState.route.name();
+    };
+
 }
 
 Router.routers = {};
@@ -267,6 +275,10 @@ Router.create = function(options, callback) {
     return router;
 };
 
+Router.currentRouteName = function(name = null) {
+    return Router.get(name).currentRouteName();
+};
+
 Router.get = function(name) {
     const router = Router.routers[name || DEFAULT_ROUTER_NAME];
     if(!router) {
@@ -275,6 +287,10 @@ Router.get = function(name) {
     return router;
 };
 
+Router.currentRoute = function(name = null) {
+    return Router.get(name).currentState().route;
+}
+
 Router.push = function(target, name = null) {
     return Router.get(name).push(target);
 };

package/src/router/RouterComponent.js

@@ -18,6 +18,7 @@ export function RouterComponent(router, container) {
 
     const $lifecycles = new Map();
     let $currentPath = null;
+    let $mountedChain = [];
 
     const getNodeAnchorForLayout = (node, path) => {
         const existingAnchor = $routeInstanceAnchors.get(node);
@@ -55,39 +56,65 @@ export function RouterComponent(router, container) {
         return nodeToInsert;
     };
 
-    const updateContainerByLayout = (layout, node, route, path) => {
+    const updateContainerByLayout = (layouts, node, route, path) => {
+
         const nodeToInsert = getNodeToInsert(node);
+        let matchDepth = 0;
 
-        const cachedLayout = $layoutCache.get(nodeToInsert);
-        if(cachedLayout) {
-            if(cachedLayout === $currentLayout) {
-                const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
-                removeLastNodeInserted();
-                $lastNodeInserted = nodeToInsert;
-                layoutAnchor.replaceContent(nodeToInsert);
-                return;
-            }
-            cleanContainer();
+        while (matchDepth < $mountedChain.length && matchDepth < layouts.length && $mountedChain[matchDepth].layoutFn === layouts[matchDepth]) {
+            matchDepth++;
+        }
+
+        if (matchDepth === layouts.length && matchDepth === $mountedChain.length) {
+            removeLastNodeInserted();
             $lastNodeInserted = nodeToInsert;
-            $currentLayout = cachedLayout;
-            const layoutAnchor = getNodeAnchorForLayout(nodeToInsert, path);
-            layoutAnchor.replaceContent(nodeToInsert);
-            container.appendChild($currentLayout);
+            $mountedChain[matchDepth - 1]?.anchor?.replaceContent(nodeToInsert);
             return;
         }
-        cleanContainer();
+
+
+        if ($mountedChain[matchDepth]) {
+            $mountedChain[matchDepth].element.remove();
+        }
+
+        const $mountedChainKeep = $mountedChain.slice(0, matchDepth);
+        const newLayers = [];
+        let slot = nodeToInsert;
         $lastNodeInserted = nodeToInsert;
-        const anchor = getNodeAnchorForLayout(nodeToInsert, path);
 
-        $currentLayout = ElementCreator.getChild(layout(anchor));
-        $layoutCache.set(nodeToInsert, $currentLayout);
-        container.appendChild($currentLayout);
+        for(let i = layouts.length - 1; i >= matchDepth; i -= 1) {
+            const layout = layouts[i];
+            let cached  = $layoutCache.get(layout);
+            if(!cached) {
+                const anchor = getNodeAnchorForLayout(slot, `${path}:layout:${i}`);
+                const element = ElementCreator.getChild(layout(anchor));
+                cached = { element, anchor };
+                $layoutCache.set(layout, cached);
+            }
+            else {
+                cached.anchor.replaceContent(slot);
+            }
+
+            newLayers.unshift({ layoutFn: layout, anchor: cached.anchor, element: cached.element });
+            slot = cached.element;
+        }
+
+        $mountedChain = [...$mountedChainKeep, ...newLayers];
+
+        if (matchDepth === 0) {
+            container.appendChild(newLayers[0].element);
+        } else {
+            $mountedChainKeep[matchDepth - 1].anchor.replaceContent(newLayers[0].element);
+        }
+
     };
 
     const updateContainer = function(node, route, path) {
-        const layout = route.layout();
-        if(layout) {
-            updateContainerByLayout(layout, node, route, path);
+        const layouts = route.layouts();
+
+
+        if(layouts.length) {
+            updateContainerByLayout(layouts, node, route, path);
             return;
         }
         const nodeToInsert = getNodeToInsert(node);

package/src/ui/components/button/ButtonRender.js

@@ -1,5 +1,6 @@
 import {Button as NativeButton, ShowIf, Span} from '../../../core/elements';
 import {Spinner} from '../../../components/spinner';
+import {Router} from '../../../../router';
 
 import './button.css';
 
@@ -32,7 +33,7 @@ export default function ButtonRender($desc, instance) {
 
     const content = buildContent($desc);
 
-    return NativeButton({
+    const button = NativeButton({
         ...instance.resolveProps(),
         type:     $desc.type || 'button',
         disabled: $desc.disabled,
@@ -40,6 +41,8 @@ export default function ButtonRender($desc, instance) {
         ...($desc.loading  ? { 'aria-busy':     $desc.loading  } : {}),
         ...($desc.disabled ? { 'aria-disabled': $desc.disabled } : {}),
     }, content);
+
+    return button;
 }
 
 function buildContent($desc) {

package/src/ui/components/button/CopyButtonRender.js

@@ -8,6 +8,6 @@ export default function CopyButtonRender($desc, instance) {
             return;
         }
 
-        navigator.clipboard.writeText($desc.target.val());
+        navigator.clipboard.writeText($desc.target.valueOf());
     });
 }

package/src/ui/components/dropdown/dropdown.css

@@ -35,18 +35,21 @@
     border-radius: var(--dropdown-radius);
     box-shadow: var(--dropdown-shadow);
     min-width: var(--dropdown-min-width);
-    max-width: var(--dropdown-max-width);
     font-size: var(--dropdown-font-size);
     box-sizing: border-box;
     margin: 0;
     padding: var(--space-cozy) 0;
-    inset: unset;
+    /*inset: unset;*/
     overflow: hidden;
 
     &:popover-open {
         animation: dropdown-in var(--dropdown-animation-duration) ease forwards;
     }
 
+    &.has-max-width {
+        max-width: var(--dropdown-max-width);
+    }
+
     &.has-max-height {
         overflow-y: auto;
     }

package/src/ui/components/form/FormControlRender.js

@@ -29,6 +29,7 @@ export default function FormControlRender($desc, instance) {
         fields: fieldsObject,
         errors: errorsSummary,
         form:   instance,
+        data: dataProxy(fieldsObject),
     }, instance);
 
     if(!((form instanceof HTMLFormElement) || form?.$element instanceof HTMLFormElement)) {
@@ -44,6 +45,17 @@ export default function FormControlRender($desc, instance) {
     return form;
 }
 
+const dataProxy = (fieldsObject) => {
+    const data = {};
+    for(const name in fieldsObject) {
+        if(!fieldsObject[name]?.$model) {
+            continue;
+        }
+        data[name] = fieldsObject[name].$model();
+    }
+    return data;
+};
+
 const buildDefaultLayout = ({ fields, errors, form }) => {
     return Form({ class: 'form-control-default', ...form.resolveProps() }, [
         ...Object.values(fields),

package/src/ui/components/popover/PopoverRender.js

@@ -35,17 +35,20 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
         : $desc.trigger).toNdElement();
 
     const editableProps = instance.getEditableProps();
-    const toUnit = v => v + 'px';
 
     const popoverId = classPrefix+'-nd-' + (++$popoverId);
+    const toUnit = v => v + 'px';
     const $x        = Observable(10).intercept(toUnit);
     const $y        = Observable(0).intercept(toUnit);
 
-    const popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow'}) : null;
+    const popoverArrow = $desc.arrow ? Span({class: classPrefix+'-arrow popover-arrow'}) : null;
 
-    editableProps.class.add(classPrefix);
+    editableProps.class.add('popover');
+    if(classPrefix !== 'popover') {
+        editableProps.class.add(classPrefix);
+    }
     editableProps.class.add('is-'+$desc.variant);
-    editableProps.style.add({left: $x, top: $y});
+    editableProps.style.add({ '--popover-left-position': $x, '--popover-top-position': $y});
 
     const popover = Div({
         popover: 'manual',
@@ -62,12 +65,23 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
 
     let position;
     const isSupportsPopover = supportsPopover();
+
+    let targetElement = trigger;
+    if($desc.matchTargetWidth) {
+        if($desc.matchTargetWidth.$element) {
+            targetElement = $desc.matchTargetWidth.$element;
+        }
+        else if($desc.matchTargetWidth.tagName) {
+            targetElement = $desc.matchTargetWidth;
+        }
+    }
+
     const updatePosition = (state) => {
         if(!state) {
             return;
         }
 
-        let targetElement = trigger;
+        targetElement = trigger;
         if($desc.matchTargetWidth) {
             if($desc.matchTargetWidth.$element) {
                 targetElement = $desc.matchTargetWidth.$element;
@@ -111,12 +125,13 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
                 }
 
                 const arrowData  = middlewareData.arrow;
+                const side = placement.split('-')[0];
                 const staticSide = {
                     top:    'bottom',
                     right:  'left',
                     bottom: 'top',
                     left:   'right',
-                }[placement.split('-')[0]];
+                }[side];
 
                 Object.assign(popoverArrow.style, {
                     left:         arrowData.x != null ? arrowData.x + 'px' : '',
@@ -148,7 +163,7 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
 
     const observer = new ResizeObserver(updatePositionHandler);
 
-    observer.observe(trigger);
+    observer.observe(targetElement);
     window.addEventListener('resize', updatePositionHandler);
     window.addEventListener('scroll', updatePositionHandler);
 

package/src/ui/components/popover/popover.css

@@ -1,5 +1,6 @@
 :root {
     --popover-bg: var(--background);
+    --popover-color: var(--text-color, black);
     --popover-border: var(--gray-lite-3);
     --popover-radius: var(--radius-card);
     --popover-shadow: var(--shadow-lg);
@@ -12,6 +13,24 @@
     --popover-header-weight: 600;
     --popover-arrow-size: 8px;
     --popover-animation-duration: 0.15s;
+
+    --popover-left-offset: 0px;
+    --popover-top-offset: 0px;
+
+    --popover-top-position: 0px;
+    --popover-left-position: 0px;
+}
+
+
+.popover-arrow {
+    position: absolute;
+    width: var(--popover-arrow-size);
+    height: var(--popover-arrow-size);
+    background: var(--popover-bg);
+    color: var(--popover-color);
+    transform: rotate(45deg);
+    pointer-events: none;
+    z-index: -1;
 }
 
 .popover {
@@ -29,6 +48,8 @@
     padding: 0;
     inset: unset;
     overflow: initial;
+    top: calc(var(--popover-top-position) + var(--popover-top-offset));
+    left: calc(var(--popover-left-position) + var(--popover-left-offset));
 
     &.is-primary {
         --popover-bg: var(--color-primary);

package/src/ui/components/tooltip/tooltip.css

@@ -27,7 +27,6 @@
     padding: var(--tooltip-padding);
     box-sizing: border-box;
     margin: 0;
-    inset: unset;
     overflow: initial;
     line-height: 1.5;
     pointer-events: none;
@@ -68,37 +67,6 @@
     width: var(--tooltip-arrow-size);
     height: var(--tooltip-arrow-size);
     background: var(--tooltip-bg);
-    transform: rotate(45deg);
-    pointer-events: none;
-    z-index: -1;
-}
-
-.tooltip[data-placement^='top'] {
-    .tooltip-arrow {
-        border-top: none;
-        border-left: none;
-    }
-}
-
-.tooltip[data-placement^='bottom'] {
-    .tooltip-arrow {
-        border-bottom: none;
-        border-right: none;
-    }
-}
-
-.tooltip[data-placement^='left'] {
-    .tooltip-arrow {
-        border-left: none;
-        border-bottom: none;
-    }
-}
-
-.tooltip[data-placement^='right'] {
-    .tooltip-arrow {
-        border-right: none;
-        border-top: none;
-    }
 }
 
 @keyframes tooltip-in {