native-document 1.0.291 → 1.0.292

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.291",
+  "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/form/field/Field.js

@@ -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()) {
@@ -205,8 +209,6 @@ export default function Router($options = {}) {
         $currentState.query = query;
         $currentState.path = path;
 
-        console.log({ builded: true })
-
         const middlewares = [...route.middlewares(), trigger];
         let currentIndex = 0;
         const request = { ...$currentState };
@@ -223,7 +225,7 @@ export default function Router($options = {}) {
 
     this.currentRouteName = function() {
         return $currentState.route.name();
-    }
+    };
 
 }
 

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/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

@@ -39,7 +39,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: var(--space-cozy) 0;
-    inset: unset;
+    /*inset: unset;*/
     overflow: hidden;
 
     &:popover-open {

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,9 +35,9 @@ 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);
 
@@ -48,7 +48,7 @@ export default function PopoverRender($desc, instance, 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',
@@ -134,8 +134,8 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
                 }[side];
 
                 Object.assign(popoverArrow.style, {
-                    left:         arrowData.x != null ? 'calc('+arrowData.x + 'px - var(--popover-left-offset))' : '',
-                    top:          arrowData.y != null ? 'calc('+arrowData.y + 'px - var(--popover-top-offset))' : '',
+                    left:         arrowData.x != null ? arrowData.x + 'px' : '',
+                    top:          arrowData.y != null ? arrowData.y + 'px' : '',
                     [staticSide]: '-4px',
                 });
 

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

@@ -14,8 +14,11 @@
     --popover-arrow-size: 8px;
     --popover-animation-duration: 0.15s;
 
-    --popover-left-offset: 0;
-    --popover-top-offset: 0;
+    --popover-left-offset: 0px;
+    --popover-top-offset: 0px;
+
+    --popover-top-position: 0px;
+    --popover-left-position: 0px;
 }
 
 
@@ -45,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;