native-document 1.0.125 → 1.0.127

package/src/components/menu/MenuItem.js

@@ -11,8 +11,7 @@ export default function MenuItem(config = {}) {
 
     this.$description = {
         items: [],
-        link: null,
-        target: null,
+        action: null,
         label: null,
         icon: null,
         shortcut: null,
@@ -21,6 +20,7 @@ export default function MenuItem(config = {}) {
         value: null,
         data: null,
         render: null,
+        trailing: null,
         ...config
     };
 
@@ -40,18 +40,13 @@ MenuItem.prototype.label = function(label) {
     return this;
 };
 
-MenuItem.prototype.link = function(link) {
-    this.$description.link = link;
+MenuItem.prototype.icon = function(icon) {
+    this.$description.icon = icon;
     return this;
 };
 
-MenuItem.prototype.target = function(target) {
-    this.$description.target = target;
-    return this;
-}
-
-MenuItem.prototype.icon = function(icon) {
-    this.$description.icon = icon;
+MenuItem.prototype.trailing = function(trailing) {
+    this.$description.trailing = trailing;
     return this;
 };
 
@@ -61,12 +56,12 @@ MenuItem.prototype.shortcut = function(shortcut) {
 };
 
 MenuItem.prototype.disabled = function(disabled = true) {
-    this.$description.disabled = disabled;
+    this.$description.disabled = BaseComponent.obs(disabled);
     return this;
 };
 
 MenuItem.prototype.selected = function(selected = true) {
-    this.$description.selected = selected;
+    this.$description.selected = BaseComponent.obs(selected);
     return this;
 };
 
@@ -75,6 +70,11 @@ MenuItem.prototype.value = function(value) {
     return this;
 };
 
+MenuItem.prototype.action = function(action) {
+    this.$description.action = action;
+    return this;
+};
+
 MenuItem.prototype.data = function(data) {
     this.$description.data = data;
     return this;

package/src/components/menu/MenuLink.js

@@ -0,0 +1,24 @@
+import MenuItem from "./MenuItem";
+
+
+export default function MenuLink(config) {
+    if(!(this instanceof MenuLink)) {
+        return new MenuLink(config);
+    }
+    MenuItem.call(this, config);
+}
+
+MenuLink.prototype = Object.create(MenuItem.prototype);
+MenuLink.prototype.constructor = MenuLink;
+
+
+MenuLink.defaultTemplate = null;
+
+MenuLink.use = function(template) {
+    MenuLink.defaultTemplate = template.menuLink;
+};
+
+MenuLink.prototype.target = function (target) {
+    this.$description.target = target;
+    return this;
+};

package/src/core/elements/anchor/anchor.js

@@ -6,13 +6,6 @@ import oneChildAnchorOverwriting from "./one-child-anchor-overwriting";
 export default function Anchor(name, isUniqueChild = false) {
     const anchorFragment = new AnchorWithSentinel(name);
 
-    /**
-     * State :
-     * 1. Not injected in the DOM
-     * 2. Injected in the DOM and should be the only child of parent
-     * 3. Injected in the DOM and the parent may have other children
-     */
-
     anchorFragment.onConnectedOnce((parent) => {
         if(isUniqueChild) {
             oneChildAnchorOverwriting(anchorFragment, parent);
@@ -119,7 +112,7 @@ export default function Anchor(name, isUniqueChild = false) {
             return;
         }
         if(isParentUniqueChild(parent)) {
-            anchorFragment.append.apply(anchorFragment, parent.childNodes);
+            anchorFragment.nativeAppend.apply(anchorFragment, parent.childNodes);
             parent.replaceChildren(anchorStart, anchorEnd);
             return;
         }
@@ -148,11 +141,11 @@ export default function Anchor(name, isUniqueChild = false) {
             return;
         }
         if(isParentUniqueChild(parent)) {
-            parent.replaceChildren(anchorStart, childElement, anchorEnd);
+            parent.replaceChildren(anchorStart, child, anchorEnd);
             return;
         }
         anchorFragment.removeChildren();
-        parent.insertBefore(childElement, anchorEnd);
+        parent.insertBefore(child, anchorEnd);
     };
 
     anchorFragment.setContent = anchorFragment.replaceContent;

package/src/core/utils/property-accumulator.js

@@ -7,7 +7,7 @@ export const cssPropertyAccumulator = function(initialValue = {}) {
     return {
         add(key, value) {
             if(isArray) {
-                data.push(key+' :  '+value);
+                data.push(key+':  '+value);
                 return;
             }
             data[key] = value;

package/src/router/Router.js

@@ -118,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) {

package/src/router/RouterComponent.js

@@ -27,7 +27,6 @@ export function RouterComponent(router, container) {
             anchor = Anchor(path);
             anchor.appendChild(node);
         }
-        console.log(anchor);
         $routeInstanceAnchors.set(node, anchor);
         return anchor;
     };
@@ -63,10 +62,12 @@ export function RouterComponent(router, container) {
             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);
@@ -74,6 +75,7 @@ export function RouterComponent(router, container) {
             return;
         }
         cleanContainer();
+        $lastNodeInserted = nodeToInsert;
         const anchor = getNodeAnchorForLayout(nodeToInsert, path);
 
         $currentLayout = ElementCreator.getChild(layout(anchor));

package/src/ui/components/button/button.css

@@ -0,0 +1,362 @@
+/* ─────────────────────────────────────────────
+   Button tokens
+   Dépend de : vars.css (colors, spacings, radius, fonts)
+───────────────────────────────────────────── */
+:root {
+    /* Sizes — hauteurs */
+    --btn-height-sm:        28px;
+    --btn-height-md:        36px;
+    --btn-height-lg:        44px;
+
+    /* Sizes — paddings horizontaux */
+    --btn-padding-sm:       var(--space-cozy) var(--space-cozy-comfortable);
+    --btn-padding-md:       var(--space-cozy) var(--space-comfortable);
+    --btn-padding-lg:       var(--space-cozy-comfortable) var(--space-relaxed);
+
+    /* Sizes — font */
+    --btn-font-size-sm:     var(--note-size);
+    --btn-font-size-md:     var(--description-size);
+    --btn-font-size-lg:     var(--text-size);
+
+    /* Sizes — icon */
+    --btn-icon-size-sm:     14px;
+    --btn-icon-size-md:     16px;
+    --btn-icon-size-lg:     18px;
+
+    /* Shape */
+    --btn-radius:           var(--radius-button);
+    --btn-radius-rounded:   var(--radius-x);
+    --btn-radius-pill:      var(--radius-pill);
+
+    /* Misc */
+    --btn-font-family:      var(--font);
+    --btn-font-weight:      500;
+    --btn-gap:              var(--space-cozy);
+    --btn-transition:       background 120ms ease, color 120ms ease, border-color 120ms ease, opacity 120ms ease;
+    --btn-disabled-opacity: 0.45;
+    --btn-loader-size:      14px;
+    --btn-border-width:     1px;
+
+    /* ── Variants ── */
+
+    /* Primary */
+    --btn-primary-bg:           var(--color-primary);
+    --btn-primary-bg-hover:     var(--color-primary-hover);
+    --btn-primary-color:        var(--white);
+    --btn-primary-border:       var(--color-primary);
+    --btn-primary-border-hover: var(--color-primary-hover);
+
+    /* Secondary */
+    --btn-secondary-bg:           var(--color-secondary);
+    --btn-secondary-bg-hover:     var(--color-secondary-hover);
+    --btn-secondary-color:        var(--color-secondary-text);
+    --btn-secondary-border:       var(--color-secondary);
+    --btn-secondary-border-hover: var(--color-secondary-hover);
+
+    /* Danger */
+    --btn-danger-bg:           var(--color-danger);
+    --btn-danger-bg-hover:     var(--color-danger-hover);
+    --btn-danger-color:        var(--white);
+    --btn-danger-border:       var(--color-danger);
+    --btn-danger-border-hover: var(--color-danger-hover);
+
+    /* Success */
+    --btn-success-bg:           var(--color-success);
+    --btn-success-bg-hover:     var(--color-success-hover);
+    --btn-success-color:        var(--white);
+    --btn-success-border:       var(--color-success);
+    --btn-success-border-hover: var(--color-success-hover);
+
+    /* Warning */
+    --btn-warning-bg:           var(--color-warning);
+    --btn-warning-bg-hover:     var(--color-warning-hover);
+    --btn-warning-color:        var(--white);
+    --btn-warning-border:       var(--color-warning);
+    --btn-warning-border-hover: var(--color-warning-hover);
+
+    /* Info */
+    --btn-info-bg:           var(--color-info);
+    --btn-info-bg-hover:     var(--color-info-hover);
+    --btn-info-color:        var(--white);
+    --btn-info-border:       var(--color-info);
+    --btn-info-border-hover: var(--color-info-hover);
+
+    /* Ghost */
+    --btn-ghost-bg:           var(--color-ghost);
+    --btn-ghost-bg-hover:     var(--color-ghost-hover);
+    --btn-ghost-color:        var(--color-ghost-text);
+    --btn-ghost-border:       transparent;
+    --btn-ghost-border-hover: transparent;
+
+    /* Link */
+    --btn-link-bg:           transparent;
+    --btn-link-bg-hover:     transparent;
+    --btn-link-color:        var(--color-link);
+    --btn-link-color-hover:  var(--color-link-hover);
+    --btn-link-border:       transparent;
+}
+
+/* ─────────────────────────────────────────────
+   Base
+───────────────────────────────────────────── */
+.btn {
+    display:          inline-flex;
+    align-items:      center;
+    justify-content:  center;
+    gap:              var(--btn-gap);
+    border:           var(--btn-border-width) solid transparent;
+    border-radius:    var(--btn-radius);
+    cursor:           pointer;
+    font-family:      var(--btn-font-family);
+    font-weight:      var(--btn-font-weight);
+    font-size:        var(--btn-font-size-md);
+    height:           var(--btn-height-md);
+    padding:          var(--btn-padding-md);
+    line-height:      1;
+    white-space:      nowrap;
+    text-decoration:  none;
+    outline:          none;
+    transition:       var(--btn-transition);
+    user-select:      none;
+    box-sizing:       border-box;
+    vertical-align:   middle;
+}
+
+/* ─────────────────────────────────────────────
+   Sizes
+───────────────────────────────────────────── */
+.btn--sm {
+    height:    var(--btn-height-sm);
+    padding:   var(--btn-padding-sm);
+    font-size: var(--btn-font-size-sm);
+}
+.btn--lg {
+    height:    var(--btn-height-lg);
+    padding:   var(--btn-padding-lg);
+    font-size: var(--btn-font-size-lg);
+}
+
+/* ─────────────────────────────────────────────
+   Shapes
+───────────────────────────────────────────── */
+.btn--rounded { border-radius: var(--btn-radius-rounded); }
+.btn--pill    { border-radius: var(--btn-radius-pill); }
+.btn--circle  {
+    border-radius: 50%;
+    padding:       0;
+    width:         var(--btn-height-md);
+}
+.btn--sm.btn--circle { width: var(--btn-height-sm); }
+.btn--lg.btn--circle { width: var(--btn-height-lg); }
+
+/* ─────────────────────────────────────────────
+   Block
+───────────────────────────────────────────── */
+.btn--block {
+    width:   100%;
+    display: flex;
+}
+
+/* ─────────────────────────────────────────────
+   Icon
+───────────────────────────────────────────── */
+.btn__icon {
+    display:     inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    width:       var(--btn-icon-size-md);
+    height:      var(--btn-icon-size-md);
+}
+.btn--sm .btn__icon {
+    width:  var(--btn-icon-size-sm);
+    height: var(--btn-icon-size-sm);
+}
+.btn--lg .btn__icon {
+    width:  var(--btn-icon-size-lg);
+    height: var(--btn-icon-size-lg);
+}
+.btn--icon-top,
+.btn--icon-bottom { flex-direction: column; }
+
+/* ─────────────────────────────────────────────
+   Loader
+───────────────────────────────────────────── */
+.btn__loader {
+    display:          inline-block;
+    width:            var(--btn-loader-size);
+    height:           var(--btn-loader-size);
+    border:           2px solid currentColor;
+    border-top-color: transparent;
+    border-radius:    50%;
+    flex-shrink:      0;
+    animation:        btn-spin 0.6s linear infinite;
+}
+@keyframes btn-spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ─────────────────────────────────────────────
+   States
+───────────────────────────────────────────── */
+.btn:disabled,
+.btn--disabled,
+.btn--loading {
+    opacity:        var(--btn-disabled-opacity);
+    cursor:         not-allowed;
+    pointer-events: none;
+}
+
+/* ─────────────────────────────────────────────
+   Variants
+───────────────────────────────────────────── */
+
+/* Primary */
+.btn--primary {
+    background:   var(--btn-primary-bg);
+    color:        var(--btn-primary-color);
+    border-color: var(--btn-primary-border);
+}
+.btn--primary:hover {
+    background:   var(--btn-primary-bg-hover);
+    border-color: var(--btn-primary-border-hover);
+}
+
+/* Secondary */
+.btn--secondary {
+    background:   var(--btn-secondary-bg);
+    color:        var(--btn-secondary-color);
+    border-color: var(--btn-secondary-border);
+}
+.btn--secondary:hover {
+    background:   var(--btn-secondary-bg-hover);
+    border-color: var(--btn-secondary-border-hover);
+}
+
+/* Danger */
+.btn--danger {
+    background:   var(--btn-danger-bg);
+    color:        var(--btn-danger-color);
+    border-color: var(--btn-danger-border);
+}
+.btn--danger:hover {
+    background:   var(--btn-danger-bg-hover);
+    border-color: var(--btn-danger-border-hover);
+}
+
+/* Success */
+.btn--success {
+    background:   var(--btn-success-bg);
+    color:        var(--btn-success-color);
+    border-color: var(--btn-success-border);
+}
+.btn--success:hover {
+    background:   var(--btn-success-bg-hover);
+    border-color: var(--btn-success-border-hover);
+}
+
+/* Warning */
+.btn--warning {
+    background:   var(--btn-warning-bg);
+    color:        var(--btn-warning-color);
+    border-color: var(--btn-warning-border);
+}
+.btn--warning:hover {
+    background:   var(--btn-warning-bg-hover);
+    border-color: var(--btn-warning-border-hover);
+}
+
+/* Info */
+.btn--info {
+    background:   var(--btn-info-bg);
+    color:        var(--btn-info-color);
+    border-color: var(--btn-info-border);
+}
+.btn--info:hover {
+    background:   var(--btn-info-bg-hover);
+    border-color: var(--btn-info-border-hover);
+}
+
+/* Ghost */
+.btn--ghost {
+    background:   var(--btn-ghost-bg);
+    color:        var(--btn-ghost-color);
+    border-color: var(--btn-ghost-border);
+}
+.btn--ghost:hover {
+    background:   var(--btn-ghost-bg-hover);
+    border-color: var(--btn-ghost-border-hover);
+}
+
+/* Link */
+.btn--link {
+    background:           var(--btn-link-bg);
+    color:                var(--btn-link-color);
+    border-color:         var(--btn-link-border);
+    text-decoration:      underline;
+    text-underline-offset: 2px;
+}
+.btn--link:hover {
+    color: var(--btn-link-color-hover);
+}
+
+/* ─────────────────────────────────────────────
+   Outline modifier
+───────────────────────────────────────────── */
+.btn--outline.btn--primary {
+    background:   transparent;
+    color:        var(--btn-primary-bg);
+    border-color: var(--btn-primary-bg);
+}
+.btn--outline.btn--primary:hover {
+    background: var(--btn-primary-bg);
+    color:      var(--btn-primary-color);
+}
+
+.btn--outline.btn--danger {
+    background:   transparent;
+    color:        var(--btn-danger-bg);
+    border-color: var(--btn-danger-bg);
+}
+.btn--outline.btn--danger:hover {
+    background: var(--btn-danger-bg);
+    color:      var(--btn-danger-color);
+}
+
+.btn--outline.btn--success {
+    background:   transparent;
+    color:        var(--btn-success-bg);
+    border-color: var(--btn-success-bg);
+}
+.btn--outline.btn--success:hover {
+    background: var(--btn-success-bg);
+    color:      var(--btn-success-color);
+}
+
+.btn--outline.btn--warning {
+    background:   transparent;
+    color:        var(--btn-warning-bg);
+    border-color: var(--btn-warning-bg);
+}
+.btn--outline.btn--warning:hover {
+    background: var(--btn-warning-bg);
+    color:      var(--btn-warning-color);
+}
+
+.btn--outline.btn--info {
+    background:   transparent;
+    color:        var(--btn-info-bg);
+    border-color: var(--btn-info-bg);
+}
+.btn--outline.btn--info:hover {
+    background: var(--btn-info-bg);
+    color:      var(--btn-info-color);
+}
+
+.btn--outline.btn--secondary {
+    background:   transparent;
+    color:        var(--btn-secondary-color);
+    border-color: var(--gray-lite-2);
+}
+.btn--outline.btn--secondary:hover {
+    background: var(--btn-secondary-bg);
+}

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

@@ -0,0 +1,63 @@
+import { Button as NativeButton, Span } from 'native-document/elements';
+import { classPropertyAccumulator } from 'native-document/utils';
+import './button.css';
+
+/**
+ * @param {Button} instance
+ * @returns {HTMLElement}
+ */
+const ButtonRender = function(instance) {
+    const desc = instance.$description;
+
+    const classes = classPropertyAccumulator([
+        'btn',
+        `btn--${desc.variant || 'secondary'}`,
+        desc.outline          && 'btn--outline',
+        desc.block            && 'btn--block',
+        desc.size === 'small' && 'btn--sm',
+        desc.size === 'large' && 'btn--lg',
+        desc.borderRadiusType && `btn--${desc.borderRadiusType}`,
+    ].filter(Boolean));
+
+    classes.add('btn--loading',  desc.loading);
+    classes.add('btn--disabled', desc.disabled);
+
+    const content = buildContent(desc);
+
+    return NativeButton({
+        class:    classes.value(),
+        type:     desc.type || 'button',
+        disabled: desc.disabled,
+    }, content);
+};
+
+/**
+ * Construit le contenu du bouton
+ * icon + label + loader selon la configuration
+ */
+const buildContent = (desc) => {
+    const content = [];
+
+    if (desc.loading) {
+        content.push(Span({ class: 'btn__loader' }));
+    }
+
+    if (desc.icon && isIconBefore(desc.iconPosition)) {
+        content.push(Span({ class: 'btn__icon' }, desc.icon));
+    }
+
+    if (desc.label != null) {
+        content.push(Span({ class: 'btn__label' }, desc.label));
+    }
+
+    if (desc.icon && isIconAfter(desc.iconPosition)) {
+        content.push(Span({ class: 'btn__icon' }, desc.icon));
+    }
+
+    return content;
+};
+
+const isIconBefore = (position) => !position || position === 'left' || position === 'top';
+const isIconAfter  = (position) => position === 'right' || position === 'bottom';
+
+export default ButtonRender;

package/src/ui/theme.js

@@ -1,5 +1,6 @@
+import ButtonRender from "./components/button/button.render";
 
 
 export const DefaultTheme = {
-
+    Button: ButtonRender
 }

package/src/ui/tokens/animation.scss

@@ -0,0 +1,36 @@
+:root {
+  --fast: .2s;
+  --natural: .3s;
+  --medium: .5s;
+  --slow: 1s;
+  --very-slow: 5s;
+
+  --animate-very-fast: .2s;
+  --animate-fast: .5s;
+  --animate-relax: 1s;
+  --animate-slow: 2s;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(15px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+
+@keyframes pulse-shadow {
+  0% {
+    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); /* Initial shadow (subtle or none) */
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(52, 152, 219, 0); /* Shadow expands and fades */
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); /* Returns to initial state */
+  }
+}