native-document 1.0.290 → 1.0.291

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.290",
+  "version": "1.0.291",
   "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',

package/src/router/Router.js

@@ -205,6 +205,8 @@ 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 };
@@ -219,6 +221,10 @@ export default function Router($options = {}) {
         return middlewares[currentIndex](request, next);
     };
 
+    this.currentRouteName = function() {
+        return $currentState.route.name();
+    }
+
 }
 
 Router.routers = {};
@@ -267,6 +273,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 +285,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/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/dropdown/dropdown.css

@@ -35,7 +35,6 @@
     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;
@@ -47,6 +46,10 @@
         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/popover/PopoverRender.js

@@ -41,9 +41,12 @@ export default function PopoverRender($desc, instance, classPrefix = 'popover')
     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});
 
@@ -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,16 +125,17 @@ 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' : '',
-                    top:          arrowData.y != null ? arrowData.y + 'px' : '',
+                    left:         arrowData.x != null ? 'calc('+arrowData.x + 'px - var(--popover-left-offset))' : '',
+                    top:          arrowData.y != null ? 'calc('+arrowData.y + 'px - var(--popover-top-offset))' : '',
                     [staticSide]: '-4px',
                 });
 
@@ -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,21 @@
     --popover-header-weight: 600;
     --popover-arrow-size: 8px;
     --popover-animation-duration: 0.15s;
+
+    --popover-left-offset: 0;
+    --popover-top-offset: 0;
+}
+
+
+.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 {

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

@@ -68,37 +68,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 {