native-document 1.0.166 → 1.0.169

package/src/core/elements/img.js

@@ -6,7 +6,7 @@ import NativeDocumentError from '../errors/NativeDocumentError';
  * Creates an `<img>` element.
  * @type {function(ImgAttributes=): HTMLImageElement}
  */
-export const BaseImage = HtmlElementWrapper('img');
+export const BaseImage = HtmlElementWrapper('img', null, true);
 
 /**
  * Creates an `<img>` element.

package/src/core/elements/medias.js

@@ -16,13 +16,13 @@ export const Video = HtmlElementWrapper('video');
  * Creates a `<source>` element.
  * @type {function(SourceAttributes=): HTMLSourceElement}
  */
-export const Source = HtmlElementWrapper('source');
+export const Source = HtmlElementWrapper('source', null, true);
 
 /**
  * Creates a `<track>` element.
  * @type {function(TrackAttributes=): HTMLTrackElement}
  */
-export const Track = HtmlElementWrapper('track');
+export const Track = HtmlElementWrapper('track', null, true);
 
 /**
  * Creates a `<canvas>` element.

package/src/core/elements/meta-data.js

@@ -40,4 +40,4 @@ export const Var = HtmlElementWrapper('var');
  * Creates a `<wbr>` element.
  * @type {function(GlobalAttributes=): HTMLElement}
  */
-export const Wbr = HtmlElementWrapper('wbr');
+export const Wbr = HtmlElementWrapper('wbr', null, true);

package/src/core/wrappers/AttributesWrapper.js

@@ -14,27 +14,31 @@ import {Observable} from '../data/Observable';
 export const bindClassAttribute = (element, data) => {
     for(const className in data) {
         const value = data[className];
-        if(value.__$Observable) {
-            if(value.__$isObservableChecker) {
-                let lastClass = value.val();
-                if(typeof lastClass === 'string') {
-                    element.classes.toggle(lastClass, true);
-                    value.subscribe((currentValue) => {
-                        element.classes.remove(lastClass);
-                        element.classes.toggle(currentValue, true);
-                        lastClass = currentValue;
-                    });
-                    continue;
-                }
+
+        if (value.__$isObservableChecker) {
+            let lastClass = value.val();
+            if (typeof lastClass === 'string') {
+                element.classes.toggle(lastClass, true);
+                value.subscribe((currentValue) => {
+                    element.classes.remove(lastClass);
+                    element.classes.toggle(currentValue, true);
+                    lastClass = currentValue;
+                });
+                continue;
             }
+        }
+
+        if (value.__$Observable) {
             element.classes.toggle(className, value.val());
             value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
             continue;
         }
-        if(value.$hydrate) {
+
+        if (value.$hydrate) {
             value.$hydrate(element, className);
             continue;
         }
+
         element.classes.toggle(className, value);
     }
 };
@@ -92,12 +96,12 @@ export const bindStyleAttribute = (element, data) => {
  * @param {boolean|number|Observable} value
  */
 export const bindBooleanAttribute = (element, attributeName, value) => {
-    const isObservable = value.__$isObservable;
+    const isObservable = value.__$Observable;
     const defaultValue = isObservable? value.val() : value;
 
     const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
 
-    if(Validator.isBoolean(defaultValue)) {
+    if(typeof defaultValue === 'boolean') {
         element[attributeRealName] = defaultValue;
     }
     else {
@@ -126,15 +130,14 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
  * @param {Observable} value
  */
 export const bindAttributeWithObservable = (element, attributeName, value) => {
-    const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
-    value.subscribe(applyValue);
-
     if(attributeName === 'value') {
         element.value = value.val();
         element.addEventListener('input', () => value.set(element.value));
+        value.subscribe((newValue) => element.value = newValue);
         return;
     }
     element.setAttribute(attributeName, value.val());
+    value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
 };
 
 /**
@@ -149,16 +152,25 @@ const AttributesWrapper = (element, attributes) => {
     }
 
     for(const originalAttributeName in attributes) {
-        const attributeName = originalAttributeName.toLowerCase();
         const value = attributes[originalAttributeName];
         if(value == null) {
             continue;
         }
-        if(value.handleNdAttribute) {
-            value.handleNdAttribute(element, attributeName, value);
+        const type = typeof value;
+        if(type === 'string' || type === 'number') {
+            element.setAttribute(originalAttributeName, value);
+            continue;
+        }
+        const attributeName = originalAttributeName.toLowerCase();
+        if(value.__$Observable) {
+            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                bindBooleanAttribute(element, attributeName, value);
+                continue;
+            }
+            bindAttributeWithObservable(element, originalAttributeName, value);
             continue;
         }
-        if(typeof value ===  'object') {
+        if(type ===  'object') {
             if(attributeName === 'class') {
                 bindClassAttribute(element, value);
                 continue;
@@ -172,6 +184,9 @@ const AttributesWrapper = (element, attributes) => {
             bindBooleanAttribute(element, attributeName, value);
             continue;
         }
+        if(value.__$isTemplateBinding) {
+            value.$hydrate(element, attributeName);
+        }
 
         element.setAttribute(attributeName, value);
     }

package/src/core/wrappers/ElementCreator.js

@@ -89,30 +89,23 @@ export const ElementCreator = {
 
     },
     getChild: (child) => {
-        if(child == null) {
-            return null;
-        }
-        if(child.toNdElement) {
-            do {
-                child =  child.toNdElement();
-                if(Validator.isElement(child)) {
-                    return child;
-                }
-            } while (child.toNdElement);
+        if (child == null) return null;
+
+        child = child.toNdElement();
+        if (child instanceof Node) return child;
+
+        while (child != null && !(child instanceof Node)) {
+            child = child.toNdElement?.();
         }
 
-        return ElementCreator.createStaticTextNode(null, child);
+        return child instanceof Node ? child : null;
     },
     /**
      *
      * @param {HTMLElement} element
      * @param {Object} attributes
      */
-    processAttributes: (element, attributes) => {
-        if (attributes) {
-            AttributesWrapper(element, attributes);
-        }
-    },
+    processAttributes: AttributesWrapper,
     /**
      *
      * @param {HTMLElement} element

package/src/core/wrappers/HtmlElementWrapper.js

@@ -3,7 +3,6 @@ import {ElementCreator} from './ElementCreator';
 import {normalizeComponentArgs} from '../utils/args-types';
 import './NdPrototype';
 
-import './NdPrototype';
 import '../../core/utils/prototypes.js';
 import '../wrappers/prototypes/nd-element-extensions';
 import '../wrappers/prototypes/bind-class-extensions';
@@ -27,6 +26,21 @@ export const createTextNode = (value) => {
 };
 
 
+/**
+ * Applies attributes to an existing HTMLElement.
+ * Used internally by HtmlElementWrapper on each cloned node.
+ *
+ * @internal
+ * @param {HTMLElement} element - Element to configure
+ * @param {Object|null} attributes - Attributes object or children if no attrs provided
+ * @returns {HTMLElement} The configured element
+ */
+export const createVoidHtmlElement = (element, attributes) => {
+    ElementCreator.processAttributes(element, attributes);
+    return element;
+};
+
+const OBJECT_PROTOTYPE = Object.prototype;
 /**
  * Applies attributes and children to an existing HTMLElement.
  * Used internally by HtmlElementWrapper on each cloned node.
@@ -38,7 +52,11 @@ export const createTextNode = (value) => {
  * @returns {HTMLElement} The configured element
  */
 export const createHtmlElement = (element, _attributes, _children = null) => {
-    const { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
+    let attributes = _attributes, children = _children;
+    if((!_attributes || !_children) && (typeof _attributes !== 'object' || Array.isArray(_attributes) || _attributes === null || Object.getPrototypeOf(_attributes) !== OBJECT_PROTOTYPE ||  _attributes.$hydrate)) { // IF it's not a JSON
+        attributes = _children;
+        children = _attributes;
+    }
 
     ElementCreator.processAttributes(element, attributes);
     ElementCreator.processChildren(children, element);
@@ -63,16 +81,17 @@ export const createHtmlElement = (element, _attributes, _children = null) => {
  *   return el;
  * });
  */
-export default function  HtmlElementWrapper(name, customWrapper = null) {
+export default function  HtmlElementWrapper(name, customWrapper = null, isVoid = false) {
+    const elementCreator = isVoid ? createVoidHtmlElement : createHtmlElement;
     if(name) {
         if(customWrapper) {
             let node = null;
             let createElement = (attr, children) => {
                 node = document.createElement(name);
                 createElement = (attr, children) => {
-                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
+                    return elementCreator(customWrapper(node.cloneNode()), attr, children);
                 };
-                return createHtmlElement(customWrapper(node.cloneNode()), attr, children);;
+                return elementCreator(customWrapper(node.cloneNode()), attr, children);;
             };
 
             return (attr, children) => createElement(attr, children);
@@ -82,9 +101,9 @@ export default function  HtmlElementWrapper(name, customWrapper = null) {
         let createElement = (attr, children) => {
             node = document.createElement(name);
             createElement = (attr, children) => {
-                return createHtmlElement(node.cloneNode(), attr, children);
+                return elementCreator(node.cloneNode(), attr, children);
             };
-            return createHtmlElement(node.cloneNode(), attr, children);
+            return elementCreator(node.cloneNode(), attr, children);
         };
 
         return (attr, children) => createElement(attr, children);

package/src/core/wrappers/NDElement.js

@@ -38,8 +38,19 @@ NDElement.$getChild = (el) => el;
 NDElement.prototype.ghostDom = function(element) {
     if(!this.$attachements) {
         this.$attachements = document.createDocumentFragment();
+        this.toNdElement = () => {
+            const fragment = document.createDocumentFragment();
+            if(!this.$attachements.contains(this.$element)) {
+                fragment.appendChild(this.$element);
+            }
+            fragment.appendChild(this.$attachements);
+            return fragment;
+        };
+    }
+    const child = NDElement.$getChild(element);
+    if(child) {
+        this.$attachements.appendChild(child);
     }
-    this.$attachements.appendChild(NDElement.$getChild(element));
     return this;
 };
 

package/src/core/wrappers/prototypes/attributes-extensions.js

@@ -1,24 +1,24 @@
-import {
-    bindAttributeWithObservable,
-    bindBooleanAttribute,
-} from '../AttributesWrapper';
-import ObservableItem from '../../data/ObservableItem';
-import TemplateBinding from '../TemplateBinding';
-import {BOOLEAN_ATTRIBUTES} from '../constants';
-import ObservableChecker from '../../data/ObservableChecker';
-
-
-ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-    if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-        bindBooleanAttribute(element, attributeName, this);
-        return;
-    }
-
-    bindAttributeWithObservable(element, attributeName, this);
-};
-
-ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
-TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
-    this.$hydrate(element, attributeName);
-};
+// import {
+//     bindAttributeWithObservable,
+//     bindBooleanAttribute,
+// } from '../AttributesWrapper';
+// import ObservableItem from '../../data/ObservableItem';
+// import TemplateBinding from '../TemplateBinding';
+// import {BOOLEAN_ATTRIBUTES} from '../constants';
+// import ObservableChecker from '../../data/ObservableChecker';
+//
+//
+// ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+//     if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+//         bindBooleanAttribute(element, attributeName, this);
+//         return;
+//     }
+//
+//     bindAttributeWithObservable(element, attributeName, this);
+// };
+//
+// ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+//
+// TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+//     this.$hydrate(element, attributeName);
+// };

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -88,14 +88,7 @@ ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
  * @returns {HTMLElement|DocumentFragment} The underlying DOM node
  */
 NDElement.prototype.toNdElement = function () {
-    const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-    if(this.$attachements) {
-        if(!this.$attachements.contains(this.$element)) {
-            this.$attachements.append(this.$element);
-        }
-        return this.$attachements;
-    }
-    return element;
+    return this.$element;
 };
 
 /**

package/src/ui/components/card/CardRender.js

@@ -0,0 +1,133 @@
+import { Div, Img, Span } from '../../../core/elements';
+
+import './card.css';
+import {Button} from '../../../components/button';
+
+export default function CardRender($desc, instance) {
+    const imageSlot   = buildImage($desc, instance);
+    const headerSlot  = buildHeader($desc, instance);
+    const contentSlot = buildContent($desc, instance);
+    const actionsSlot = buildActions($desc, instance);
+    const footerSlot  = buildFooter($desc, instance, actionsSlot);
+
+    if ($desc.layout) {
+        return $desc.layout(
+            { image: imageSlot, header: headerSlot, content: contentSlot, actions: actionsSlot, footer: footerSlot },
+            instance,
+        );
+    }
+
+    const props = instance.getEditableProps();
+
+    props.class.add('card');
+
+    if ($desc.variant) {
+        props.class.add('is-' + $desc.variant);
+    }
+
+    props.class.add({
+        'is-horizontal': $desc.horizontal,
+        'is-hoverable':  $desc.hoverable,
+        'is-clickable':  instance.hasListeners('click'),
+    });
+
+    if ($desc.loading) {
+        props.class.add({ 'is-loading': $desc.loading });
+    }
+
+    const children = [
+        imageSlot,
+        Div({ class: 'card-content'}, [
+            Div({ class: 'card-body' }, [headerSlot, contentSlot]),
+            footerSlot,
+        ]),
+    ];
+
+    const el = Div(instance.resolveProps(), children);
+
+    el.nd.onClick((e) => instance.emit('click', e));
+    el.nd.onMouseEnter((e) => instance.emit('hover', e));
+
+    return el;
+}
+
+function buildImage($desc, instance) {
+    if ($desc.renderImage) {
+        return $desc.renderImage($desc, instance);
+    }
+
+    if (!$desc.image) {
+        return null;
+    }
+
+    return Div({ class: 'card-image-wrapper' }, [
+        Img($desc.image, {
+            class: `card-image is-${$desc.imagePosition}`,
+            alt:   '',
+        })
+    ]);
+}
+
+function buildHeader($desc, instance) {
+    if ($desc.renderHeader) {
+        return $desc.renderHeader($desc, instance);
+    }
+
+    const parts = [];
+
+    if ($desc.title) {
+        parts.push(Span({ class: 'card-title' }, $desc.title));
+    }
+
+    if ($desc.subtitle) {
+        parts.push(Span({ class: 'card-subtitle' }, $desc.subtitle));
+    }
+
+    if (!parts.length) {
+        return null;
+    }
+
+    return Div({ class: 'card-header' }, parts);
+}
+
+function buildContent($desc, instance) {
+    if ($desc.renderContent) {
+        return $desc.renderContent($desc, instance);
+    }
+
+    if (!$desc.content) {
+        return null;
+    }
+
+    return Div({ class: 'card-content' }, $desc.content);
+}
+
+function buildActions($desc, instance) {
+    if ($desc.renderActions) {
+        return $desc.renderActions($desc, instance);
+    }
+
+    if (!$desc.actions?.length) {
+        return null;
+    }
+
+    const buttons = $desc.actions.map(({ label, callback }) => {
+        const btn = (typeof label === 'string') ? Button(label, { class: 'card-action' }) : label;
+        btn.nd.onClick(() => callback?.());
+        return btn;
+    });
+
+    return Div({ class: 'card-actions' }, buttons);
+}
+
+function buildFooter($desc, instance, actionsSlot) {
+    if ($desc.renderFooter) {
+        return $desc.renderFooter($desc, instance);
+    }
+
+    if (!actionsSlot) {
+        return null;
+    }
+
+    return Div({ class: 'card-footer' }, actionsSlot);
+}

package/src/ui/components/card/card.css

@@ -0,0 +1,169 @@
+:root {
+    --card-bg:                  var(--background);
+    --card-border:              var(--gray-lite-3);
+    --card-radius:              var(--radius-card);
+    --card-shadow:              var(--shadow-card);
+    --card-shadow-elevated:     var(--shadow-lg);
+    --card-shadow-hover:        var(--shadow-md);
+    --card-font-size:           var(--description-size);
+    --card-padding:             var(--space-comfortable);
+    --card-img-height:          200px;
+    --card-title-size:          var(--text-size);
+    --card-title-weight:        600;
+    --card-title-color:         var(--text-color);
+    --card-subtitle-size:       var(--note-size);
+    --card-subtitle-color:      var(--gray);
+    --card-footer-padding:      var(--space-cozy) var(--space-comfortable);
+    --card-footer-border:       var(--gray-lite-3);
+    --card-footer-gap:          var(--space-cozy);
+    --card-transition:          box-shadow 0.2s ease;
+    --card-loading-bg:          var(--gray-lite-5);
+    --card-horizontal-img-width: 175px;
+    --card-clickable-cursor:    pointer;
+    --card-header-row-gap: .5rem;
+}
+
+
+.card {
+    background:    var(--card-bg);
+    border:        1px solid var(--card-border);
+    border-radius: var(--card-radius);
+    overflow:      hidden;
+    font-size:     var(--card-font-size);
+    transition:    var(--card-transition);
+    display:       inline-flex;
+    flex-direction: column;
+
+    &.is-elevated {
+        border:     none;
+        box-shadow: var(--card-shadow-elevated);
+    }
+
+    &.is-flat {
+        border:     none;
+        box-shadow: none;
+    }
+
+    &.is-outlined {
+        border-width: 2px;
+    }
+
+    &.is-hoverable:hover {
+        box-shadow: var(--card-shadow-hover);
+    }
+
+    &.is-clickable {
+        cursor: var(--card-clickable-cursor);
+
+        &:hover {
+            box-shadow: var(--card-shadow-hover);
+        }
+
+        &:active {
+            opacity: 0.95;
+        }
+    }
+
+    &.is-horizontal {
+        flex-direction: row;
+
+        .card-image-wrapper {
+            width: var(--card-horizontal-img-width);
+        }
+        .card-image {
+            flex-shrink: 0;
+        }
+        .card-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: flex-start;
+        }
+    }
+
+    &.is-loading {
+        .card-title,
+        .card-subtitle,
+        .card-content {
+            background:    var(--card-loading-bg);
+            border-radius: 4px;
+            color:         transparent;
+            user-select:   none;
+
+            * {
+                visibility: hidden;
+            }
+        }
+
+        .card-title   { width: 60%; }
+        .card-subtitle { width: 40%; }
+        .card-image { background: var(--card-loading-bg); }
+    }
+}
+.card-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    row-gap: var(--card-header-row-gap);
+}
+.card-actions {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    column-gap:  var(--space-tiny);
+    > * {
+        flex: 1;
+    }
+}
+.card-image-wrapper {
+    width: 100%;
+    height:     var(--card-img-height);
+}
+.card-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+
+    &.is-top    { order: -1; }
+    &.is-bottom { order: 10; }
+
+    .card.is-horizontal &.is-left  { order: -1; }
+    .card.is-horizontal &.is-right { order: 10; }
+}
+
+.card-body {
+    padding: var(--card-padding);
+    flex:    1;
+    display: flex;
+    flex-direction: column;
+    gap:     var(--space-cozy);
+}
+
+.card-title {
+    font-size:   var(--card-title-size);
+    font-weight: var(--card-title-weight);
+    color:       var(--card-title-color);
+    margin:      0;
+}
+
+.card-subtitle {
+    font-size: var(--card-subtitle-size);
+    color:     var(--card-subtitle-color);
+    margin:    0;
+}
+
+.card-content {
+    flex: 1;
+}
+
+.card-footer {
+    width: 100%;
+    display:       flex;
+    align-items:   center;
+    justify-content: flex-end;
+    gap:           var(--card-footer-gap);
+    padding:       var(--card-footer-padding);
+    border-top:    1px solid var(--card-footer-border);
+}

package/src/ui/components/contextmenu/ContextmenuRender.js

@@ -18,7 +18,7 @@ export default function ContextMenuRender($desc, instance) {
 
     createPortal(container, {name: 'context-menu'});
 
-    if($desc.trigger) {
+    if($desc.trigger && instance) {
         contextMenuHandler($desc.trigger, instance);
     }