native-document 1.0.138 → 1.0.140

package/src/components/$traits/has-resizable/HasResizable.js

@@ -0,0 +1,113 @@
+
+import './has-resizable.css';
+
+export default function HasResizable() {}
+
+HasResizable.prototype.makeResizable = function(parent, options = {}) {
+    if(!this.emit) {
+        throw new Error('HasResizable requires HasEventEmitter — add it via BaseComponent.use(Component, HasEventEmitter).');
+    }
+
+    const directions = options.directions || ['right', 'bottom', 'bottom-right'];
+    const sizeConstraint = options.size || { minWidth: 200, minHeight: 200 };
+    sizeConstraint.minWidth = sizeConstraint.minWidth || 200;
+    sizeConstraint.minHeight = sizeConstraint.minHeight || 200;
+
+    parent.classList.add('is-resizable');
+
+    const handles = [];
+
+    directions.forEach((direction) => {
+        const handle = document.createElement('div');
+        handle.className = 'resize-handle is-' + direction;
+        parent.appendChild(handle);
+        handles.push(handle);
+
+        setupResizeHandle(handle, parent, direction, sizeConstraint, this);
+    });
+
+    return () => {
+        handles.forEach(h => h.remove());
+    };
+};
+
+const setupResizeHandle = (handle, parent, direction, sizeConstraint, instance) => {
+    let isResizing = false;
+    let startX     = 0;
+    let startY     = 0;
+    let startW     = 0;
+    let startH     = 0;
+    let startLeft  = 0;
+    let startTop   = 0;
+
+    const onMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        isResizing = true;
+        startX     = e.clientX;
+        startY     = e.clientY;
+        startW     = parent.offsetWidth;
+        startH     = parent.offsetHeight;
+        startLeft  = parent.offsetLeft;
+        startTop   = parent.offsetTop;
+
+        document.body.classList.add('is-resizing');
+        instance.emit?.('onResizeStart', [e, startW, startH]);
+    };
+
+    const onMouseMove = (e) => {
+        if(!isResizing) {
+            return;
+        }
+
+        const dx = e.clientX - startX;
+        const dy = e.clientY - startY;
+
+        if(direction === 'right' || direction === 'top-right' || direction === 'bottom-right') {
+            const newWidth = Math.max(sizeConstraint.minWidth, startW + dx);
+            if(newWidth > sizeConstraint.minWidth && (!sizeConstraint.maxWidth || newWidth <= sizeConstraint.maxWidth)) {
+                parent.style.width = newWidth + 'px';
+            }
+        }
+
+        if(direction === 'left' || direction === 'top-left' || direction === 'bottom-left') {
+            const newWidth = Math.max(sizeConstraint.minWidth, startW - dx);
+            if(newWidth > sizeConstraint.minWidth && (!sizeConstraint.maxWidth || newWidth <= sizeConstraint.maxWidth)) {
+                parent.style.width = newWidth + 'px';
+                parent.style.left  = (startLeft + dx) + 'px';
+            }
+        }
+
+        if(direction === 'bottom' || direction === 'bottom-right' || direction === 'bottom-left') {
+            const newHeight = Math.max(sizeConstraint.minHeight, startH + dy);
+            if(newHeight > sizeConstraint.minHeight && (!sizeConstraint.maxHeight || newHeight <= sizeConstraint.maxHeight)) {
+                parent.style.height = newHeight + 'px';
+            }
+        }
+
+        if(direction === 'top' || direction === 'top-right' || direction === 'top-left') {
+            const newHeight = Math.max(sizeConstraint.minHeight, startH - dy);
+            if(newHeight > sizeConstraint.minHeight && (!sizeConstraint.maxHeight || newHeight <= sizeConstraint.maxHeight)) {
+                parent.style.height = newHeight + 'px';
+                parent.style.top    = (startTop + dy) + 'px';
+            }
+        }
+
+        instance.emit?.('onResize', [e, parent.offsetWidth, parent.offsetHeight]);
+    };
+
+    const onMouseUp = () => {
+        if(!isResizing) {
+            return;
+        }
+
+        isResizing = false;
+        document.body.classList.remove('is-resizing');
+        instance.emit?.('onResizeEnd', [parent.offsetWidth, parent.offsetHeight]);
+    };
+
+    handle.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+};

package/src/components/$traits/has-resizable/has-resizable.css

@@ -0,0 +1,121 @@
+:root {
+    --resize-handle-size: 3px;
+    --resize-handle-color: var(--gray-lite-3);
+    --resize-handle-color-hover: var(--gray-lite-1);
+    --resize-notch-size: 6px;
+}
+
+.is-resizable {
+    box-sizing: border-box;
+}
+
+.resize-handle {
+    position: absolute;
+    z-index: 10;
+
+    &.is-right {
+        top: 0;
+        right: 0;
+        width: var(--resize-handle-size);
+        height: 100%;
+        cursor: ew-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-left {
+        top: 0;
+        left: 0;
+        width: var(--resize-handle-size);
+        height: 100%;
+        cursor: ew-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-top {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: var(--resize-handle-size);
+        cursor: ns-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-bottom {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: var(--resize-handle-size);
+        cursor: ns-resize;
+
+        &:hover {
+            background: var(--resize-handle-color-hover);
+            opacity: 0.3;
+        }
+    }
+
+    &.is-top-left {
+        top: 0;
+        left: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nwse-resize;
+    }
+
+    &.is-top-right {
+        top: 0;
+        right: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nesw-resize;
+    }
+
+    &.is-bottom-left {
+        bottom: 0;
+        left: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nesw-resize;
+    }
+
+    &.is-bottom-right {
+        bottom: 0;
+        right: 0;
+        width: var(--resize-notch-size);
+        height: var(--resize-notch-size);
+        cursor: nwse-resize;
+
+        &::after {
+            content: '';
+            position: absolute;
+            bottom: 3px;
+            right: 3px;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 0 var(--resize-notch-size) var(--resize-notch-size);
+            border-color: transparent transparent var(--resize-handle-color) transparent;
+            transition: border-color 0.15s ease;
+        }
+
+        &:hover::after {
+            border-color: transparent transparent var(--resize-handle-color-hover) transparent;
+        }
+    }
+}
+
+body.is-resizing {
+    cursor: nwse-resize;
+    user-select: none;
+}

package/src/components/$traits/has-validation/HasValidation.js

@@ -0,0 +1,86 @@
+import {resolveParams} from "../../form/utils";
+import BaseComponent from "../../BaseComponent";
+import {Validation} from "../../form/validation/Validation";
+
+export default function HasValidation() {}
+
+HasValidation.prototype.required = function(message) {
+    this.$description.rules.push({
+        fn:      Validation.required,
+        message: message || `${this.$description.label || this.$description.name} is required`
+    });
+    return this;
+};
+
+HasValidation.prototype.custom = function(validatorFn, message) {
+    this.$description.rules.push({
+        validate: validatorFn,
+        message:  message || 'Validation failed'
+    });
+    return this;
+};
+
+HasValidation.prototype.addRule = function(validationFn, params, message) {
+    this.$description.rules.push({
+        fn:      validationFn,
+        params:  params || [],
+        message
+    });
+    return this;
+};
+
+HasValidation.prototype.requiredIf = function(condition, message) {
+    return this.addRule(Validation.requiredIf, [condition], message);
+};
+
+HasValidation.prototype.clearErrorOn = function(event) {
+    this.$description.clearErrorOn = event;
+    return this;
+};
+
+HasValidation.prototype.validateOn = function(event) {
+    this.$description.validateOn = event;
+    return this;
+};
+
+HasValidation.prototype.showErrors = function(show = true) {
+    this.$description.showErrors = BaseComponent.obs(show);
+    return this;
+};
+
+HasValidation.prototype.hideErrors = function() {
+    this.$description.showErrors.set(false);
+    return this;
+};
+
+HasValidation.prototype.setError = function(error) {
+    this.$description.errors?.set?.(error);
+    return this;
+};
+
+HasValidation.prototype.validate = function(allValues = {}) {
+    if(!this.$description.rules || this.$description.rules.length === 0) {
+        this.$description.errors.clear();
+        this.$description.hasErrors.set(false);
+        return {key: this.$description.key, errors: []};
+    }
+
+    const errors = [];
+    const value  = this.value();
+
+    for(const rule of this.$description.rules) {
+        const paramsResolved = resolveParams(rule, allValues);
+        const validateFn     = rule.validate || rule.fn;
+        const rawResult      = validateFn(value, ...paramsResolved, allValues);
+        const result         = typeof rawResult === 'boolean' ? {valid: rawResult} : rawResult;
+
+        if(!result.valid) {
+            errors.push(rule.message || result.message);
+        }
+    }
+
+    this.$description.errors.set(errors);
+    this.$description.hasErrors.set(errors.length > 0);
+
+    return {key: this.$description.key, errors};
+};

package/src/components/BaseComponent.js

@@ -1,22 +1,40 @@
+import {classPropertyAccumulator, cssPropertyAccumulator} from "../../utils";
+import {Observable} from "../../index";
+import {ShowIf} from "../core/elements/index";
+import Anchor from "../core/elements/anchor/anchor";
+import {NDElement} from "../core/wrappers/NDElement";
+
+import './base-component.css';
+
+
 /**
  *
  * @class
  */
 export default function BaseComponent() {
     this.$description = {};
+    this.$editableProps = null;
+    this.$attachements = null;
 }
 
 Object.defineProperty( BaseComponent.prototype, 'nd', {
     get: function() {
         if(this.$element) {
-            return this.$element.nd;
+            const nd = this.$element.nd;
+            if(this.$attachements) {
+                nd.$attachements = this.$attachements;
+            }
+            return nd;
         }
         this.$storeElement(this.toNdElement());
-        return this.$element?.nd;
+        const nd = this.$element.nd;
+        if(this.$attachements) {
+            nd.$attachements = this.$attachements;
+        }
+        return nd;
     }
 });
 
-
 BaseComponent.extends = function(Component, ...parents) {
     const MainParent = parents[0] || BaseComponent;
     Component.prototype = Object.create(MainParent.prototype);
@@ -41,17 +59,39 @@ BaseComponent.obs = (value) => {
     return value.__$Observable ? value : Observable(value);
 };
 
+BaseComponent.prototype.setDescription = function(description) {
+    for(const key in description) {
+        if(this.$description[key]?.__$Observable) {
+            this.$description[key].set(description[key]);
+            continue;
+        }
+        this.$description[key] = description[key];
+    }
+    return this;
+}
+
 BaseComponent.prototype.$storeElement = function(element) {
     this.$element = element;
     return this;
 };
 
+BaseComponent.prototype.postBuild = function(callback) {
+    this.$postBuild = this.$postBuild || [];
+    this.$postBuild.push(callback);
+    return this;
+}
+
+BaseComponent.prototype.ghostDom = NDElement.prototype.ghostDom;
+
 BaseComponent.prototype.refSelf = function(target, name) {
     target[name] = this;
     return this;
 };
 
 BaseComponent.prototype.$build = function() {
+    if(this.$beforeRender) {
+        this.$beforeRender();
+    }
     const ComponentClass = this.constructor;
     const renderer = this.$description.render || ComponentClass.defaultTemplate;
 
@@ -67,9 +107,27 @@ BaseComponent.prototype.toNdElement = function() {
         return this.$element;
     }
     this.$element = this.$build();
+    if(this.$description.showIf) {
+        this.$element = ShowIf(this.$description.showIf, this.$element);
+    }
+    if(this.$postBuild) {
+        for(let i = 0; i < this.$postBuild.length; i++) {
+            this.$postBuild[i](this.$element);
+        }
+        this.$postBuild = null;
+    }
+    if(this.$attachements) {
+        const nd = this.$element.nd;
+        nd.ghostDom(this.$attachements);
+        this.$attachements = null;
+        return nd;
+    }
+
     return this.$element;
 };
 
+BaseComponent.prototype.node = BaseComponent.prototype.toNdElement;
+
 BaseComponent.prototype.toJSON = function() {
     if(!this.$description) {
         return {};
@@ -83,4 +141,51 @@ BaseComponent.prototype.render = function(renderFn) {
     }
     this.$description.render = renderFn;
     return this;
-};
+};
+
+BaseComponent.prototype.getEditableProps = function() {
+    if(!this.$editableProps) {
+        const rawProps = this.$description.props || {};
+        this.$editableProps = {
+            ...rawProps,
+            class: classPropertyAccumulator(rawProps.class || {}),
+            style: cssPropertyAccumulator(rawProps.style || {})
+        };
+    }
+
+    return this.$editableProps;
+};
+
+BaseComponent.prototype.resolveProps = function() {
+    if(!this.$editableProps) {
+        return this.$description.props ? { ...this.$description.props } : {};
+    }
+    const props = { ...this.$editableProps };
+    if(props.class) {
+        props.class = props.class.value();
+    }
+    if(props.style) {
+        props.style = props.style.value();
+    }
+
+    return props;
+};
+
+
+BaseComponent.prototype.style = function(style) {
+    const props = this.getEditableProps();
+    props.style.add(style);
+    return this;
+};
+
+BaseComponent.prototype.showIf = function(condition) {
+    this.$description.showIf = BaseComponent.obs(condition);
+    return this;
+};
+
+BaseComponent.prototype.context = function(context) {
+    this.$description.$context = context;
+    return this;
+}
+
+BaseComponent.prototype.visibility = BaseComponent.prototype.showIf;

package/src/components/accordion/Accordion.js

@@ -1,5 +1,6 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import AccordionItem from "./AccordionItem";
 
 
 /**
@@ -13,40 +14,51 @@ import HasEventEmitter from "../../core/utils/HasEventEmitter";
  * @returns {Accordion}
  * @class
  */
-export default function Accordion(config = {}) {
+export default function Accordion(props = {}) {
     if (!(this instanceof Accordion)) {
-        return new Accordion(config);
+        return new Accordion(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         items: [],
         multiple: null,
         variant: null,
         renderContent: null,
-        ...config
+        renderIndicator: null,
+        props
     };
 }
 
-BaseComponent.extends(Accordion, HasEventEmitter);
+BaseComponent.extends(Accordion);
+BaseComponent.use(Accordion, HasEventEmitter);
 
 Accordion.defaultTemplate = null;
-
-
-/**
- * Sets the default template for all Accordion instances
- * @param {{accordion: (accordion: Accordion) => ValidChildren}} template - Template object containing accordion factory function
- */
 Accordion.use = function(template) {
-    Accordion.defaultTemplate = template.accordion;
+    Accordion.defaultTemplate = template;
 };
 
-/**
- * Adds an accordion item to the collection
- * @param {AccordionItem} accordionItem - The accordion item to add
- * @returns {Accordion}
- */
-Accordion.prototype.item = function(accordionItem) {
-    this.$description.items.push(accordionItem);
+
+Accordion.prototype.item = function(title, content, options) {
+    let item = null;
+
+    if(title instanceof AccordionItem) {
+        item = title;
+    }
+    else {
+        const config = typeof options === 'object' ? options : {};
+        item = new AccordionItem(config);
+        item.title(title);
+        item.content(content);
+        item.setDescription(config);
+    }
+
+    if(typeof options === 'function') {
+        options(item);
+    }
+
+    this.$description.items.push(item);
     return this;
 };
 
@@ -219,19 +231,13 @@ Accordion.prototype.renderContent = function(renderFn) {
     return this;
 };
 
+
 /**
- * Builds the accordion component
- * @private
+ * Sets the indicator render function
+ * @param {Function} renderFn - Function to render the indicator
+ * @returns {AccordionItem}
  */
-Accordion.prototype.$build = function() {
-    // TODO: Implementation
-    // this.$description.items.forEach(item => {
-    //     item.onExpand(() => {
-    //         if (!this.$description.multiple) {
-    //             this.$description.items
-    //                 .filter(i => i !== item)
-    //                 .forEach(i => i.expanded(false));
-    //         }
-    //     });
-    // });
+Accordion.prototype.renderIndicator = function(renderFn) {
+    this.$description.renderIndicator = renderFn;
+    return this;
 };

package/src/components/accordion/AccordionItem.js

@@ -1,16 +1,19 @@
 import { $ } from '../../../index';
 import BaseComponent from "../BaseComponent";
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
 /**
  * Represents an individual item within an Accordion component
  * @param {{ id?: string|number, title?: string, icon?: string, collapsible?: boolean, content?: ValidChildren, renderHeader?: Function, renderContent?: Function, render?: Function, expanded?: Observable<boolean>, disabled?: boolean }} config - Configuration object
  * @class
  */
-export default function AccordionItem(config = {}) {
+export default function AccordionItem(props = {}) {
     if(!(this instanceof AccordionItem)){
         return new AccordionItem()
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         id: null,
         title: null,
@@ -18,15 +21,22 @@ export default function AccordionItem(config = {}) {
         collapsible: true,
         content: null,
         renderHeader: null,
+        renderIndicator: null,
         renderContent: null,
         render: null,
         expanded: $(false),
-        disabled: false,
-        ...config
+        disabled: $(false),
+        props
     };
 }
 
 BaseComponent.extends(AccordionItem);
+BaseComponent.use(AccordionItem, HasEventEmitter);
+
+AccordionItem.defaultTemplate = null;
+AccordionItem.use = function(template) {
+    AccordionItem.defaultTemplate = template;
+};
 
 /**
  * Gets the id of the accordion item
@@ -128,7 +138,7 @@ AccordionItem.prototype.toggle = function() {
  * @returns {AccordionItem}
  */
 AccordionItem.prototype.disabled = function(disabled = true) {
-    this.$description.disabled = disabled;
+    this.$description.disabled.set(disabled);
     return this;
 };
 
@@ -189,20 +199,3 @@ AccordionItem.prototype.renderIndicator = function(renderFn) {
     return this;
 };
 
-/**
- * Sets the render function for the entire item
- * @param {Function} renderFn - Function to render the item
- * @returns {AccordionItem}
- */
-AccordionItem.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
-}
-
-/**
- * Builds the accordion item component
- * @private
- */
-AccordionItem.prototype.$build = function() {
-
-};