native-document 1.0.16 → 1.0.17-1.2

package/src/components/$traits/has-validation/HasValidation.d.ts

@@ -0,0 +1,17 @@
+import type { ObservableItem } from '../../../../types/observable';
+
+export interface HasValidation {
+    required(message?: string): this;
+    custom(validatorFn: (value: unknown, allValues?: Record<string, unknown>) => boolean, message?: string): this;
+    addRule(validationFn: Function, params?: unknown[], message?: string): this;
+    requiredIf(
+        condition: ObservableItem<boolean> | boolean | string | ((v: Record<string, unknown>) => boolean),
+        message?: string
+    ): this;
+    clearErrorOn(event: string): this;
+    validateOn(event: string): this;
+    showErrors(show?: boolean | ObservableItem<boolean>): this;
+    hideErrors(): this;
+    setError(error: string | string[]): this;
+    validate(allValues?: Record<string, unknown>): { key: string; errors: string[] };
+}

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

@@ -0,0 +1,133 @@
+import {resolveParams} from '../../form/utils';
+import BaseComponent from '../../BaseComponent';
+import {Validation} from '../../form/validation/Validation';
+
+/**
+ *
+ * @constructor
+ */
+export default function HasValidation() {}
+
+/**
+ * @param {string} message
+ * @returns {this}
+ */
+HasValidation.prototype.required = function(message) {
+    this.$description.rules.push({
+        fn:      Validation.required,
+        message: message || `${this.$description.label || this.$description.name} is required`,
+    });
+    return this;
+};
+
+/**
+ * @param {(value: *, allValues?: Record<string, *>) => boolean} validatorFn
+ * @param {string} [message]
+ * @returns {this}
+ */
+HasValidation.prototype.custom = function(validatorFn, message) {
+    this.$description.rules.push({
+        validate: validatorFn,
+        message:  message || 'Validation failed',
+    });
+    return this;
+};
+
+/**
+ * @param {Function} validationFn
+ * @param {*[]} params
+ * @param {string} [message]
+ * @returns {this}
+ */
+HasValidation.prototype.addRule = function(validationFn, params, message) {
+    this.$description.rules.push({
+        fn:      validationFn,
+        params:  params || [],
+        message,
+    });
+    return this;
+};
+
+/**
+ * @param {Observable<boolean>|boolean|string|((v: Record<string, *>) => boolean)} condition
+ * @param {string} [message]
+ * @returns {this}
+ */
+HasValidation.prototype.requiredIf = function(condition, message) {
+    return this.addRule(Validation.requiredIf, [condition], message);
+};
+
+/**
+ * @param {string} event
+ * @returns {this}
+ */
+HasValidation.prototype.clearErrorOn = function(event) {
+    this.$description.clearErrorOn = event;
+    return this;
+};
+
+/**
+ * @param {string} event
+ * @returns {this}
+ */
+HasValidation.prototype.validateOn = function(event) {
+    this.$description.validateOn = event;
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [show=true]
+ * @returns {this}
+ */
+HasValidation.prototype.showErrors = function(show = true) {
+    this.$description.showErrors = BaseComponent.obs(show);
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+HasValidation.prototype.hideErrors = function() {
+    this.$description.showErrors.set(false);
+    return this;
+};
+
+/**
+ * @param {string|string[]} error
+ * @returns {this}
+ */
+HasValidation.prototype.setError = function(error) {
+    this.$description.errors?.set?.(error);
+    return this;
+};
+
+/**
+ * @param {Record<string, *>} [allValues={}]
+ * @returns {{ key: string, errors: string[] }}
+ */
+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.d.ts

@@ -0,0 +1,32 @@
+import type { ValidChild, GlobalAttributes, NdStyleMap } from '../../types/elements';
+import type { ObservableItem } from '../../types/observable';
+import type { CssPropertyAccumulator, ClassPropertyAccumulator } from '../../types/property-accumulator';
+
+export type EditableProps = Omit<GlobalAttributes, 'class' | 'style'> & {
+    class: ClassPropertyAccumulator;
+    style: CssPropertyAccumulator;
+};
+
+export interface BaseComponent {
+    setDescription(description: Record<string, unknown>): this;
+    postBuild(callback: (element: HTMLElement) => void): this;
+    refSelf(target: Record<string, unknown>, name: string): this;
+    toNdElement(): HTMLElement | DocumentFragment;
+    node(): HTMLElement | DocumentFragment;
+    toJSON(): Record<string, unknown>;
+    getEditableProps(): EditableProps;
+    resolveProps(): GlobalAttributes;
+    props(props: GlobalAttributes): this;
+    style(style: NdStyleMap): this;
+    showIf(condition: boolean | ObservableItem<boolean>): this;
+    visibility(condition: boolean | ObservableItem<boolean>): this;
+    context(context: unknown): this;
+    ghostDom(element: ValidChild): this;
+}
+
+export declare namespace BaseComponent {
+
+    function use(Component: Function, ...traits: Function[]): void;
+    function obs<T>(value: T | ObservableItem<T>): ObservableItem<T>;
+
+}

package/src/components/BaseComponent.js

@@ -0,0 +1,289 @@
+import {classPropertyAccumulator, cssPropertyAccumulator} from '../core/utils/property-accumulator';
+import {Observable} from '../core/data/Observable';
+import {ShowIf} from '../core/elements/control/show-if';
+import {NDElement} from '../core/wrappers/NDElement';
+
+/**
+ *
+ * @class
+ */
+export default function BaseComponent() {
+    this.$description = {};
+    this.$editableProps = null;
+    this.$attachements = null;
+}
+
+Object.defineProperty( BaseComponent.prototype, 'nd', {
+    get: function() {
+        if(this.$element) {
+            const nd = this.$element.nd;
+            if(this.$attachements) {
+                nd.$attachements = this.$attachements;
+            }
+            return nd;
+        }
+        this.$storeElement(this.toNdElement());
+        const nd = this.$element.nd;
+        if(this.$attachements) {
+            nd.$attachements = this.$attachements;
+        }
+        return nd;
+    },
+});
+
+/**
+ * @param {Function} Component
+ * @param {...Function} parents
+ */
+BaseComponent.extends = function(Component, ...parents) {
+    const MainParent = parents[0] || BaseComponent;
+    Component.prototype = Object.create(MainParent.prototype);
+
+    if(parents.length > 0) {
+        for(const parent of parents) {
+            Object.assign(Component.prototype, parent.prototype);
+        }
+    }
+    Component.prototype.constructor = Component;
+};
+
+BaseComponent.use = function(Component, ...traits) {
+    if(traits.length > 0) {
+        for(const trait of traits) {
+            Object.assign(Component.prototype, trait.prototype);
+        }
+    }
+};
+
+BaseComponent.obs = (value) => {
+    return value.__$Observable ? value : Observable(value);
+};
+
+/**
+ * @param {Record<string, *>} description
+ * @returns {this}
+ */
+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;
+};
+
+/**
+ * @param {(element: HTMLElement) => void} callback
+ * @returns {this}
+ */
+BaseComponent.prototype.postBuild = function(callback) {
+    this.$postBuild = this.$postBuild || [];
+    this.$postBuild.push(callback);
+    return this;
+};
+
+BaseComponent.prototype.ghostDom = NDElement.prototype.ghostDom;
+
+/**
+ * @param {Record<string, *>} target
+ * @param {string} name
+ * @returns {this}
+ */
+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;
+
+    if (!renderer) {
+        throw new Error(`No renderer for ${ComponentClass.name}`);
+    }
+
+    return renderer(this.$description, this);
+};
+
+/**
+ * @returns {HTMLElement|DocumentFragment}
+ */
+BaseComponent.prototype.toNdElement = function() {
+    if (this.$element) {
+        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;
+
+/**
+ * @returns {Record<string, *>}
+ */
+BaseComponent.prototype.toJSON = function() {
+    if(!this.$description) {
+        return {};
+    }
+    return { ...this.$description };
+};
+
+/**
+ * @param {(description: *, component: *) => NdChild} renderFn
+ * @returns {this}
+ */
+BaseComponent.prototype.render = function(renderFn) {
+    if (typeof renderFn !== 'function') {
+        throw new Error('Custom renderer must be a function');
+    }
+    this.$description.render = renderFn;
+    return this;
+};
+
+/**
+ * Returns the internal editable props object for this component.
+ * The `class` and `style` properties are wrapped in reactive accumulators
+ * ({@link ClassPropertyAccumulatorType} and {@link CssPropertyAccumulatorType})
+ * instead of plain strings, to allow incremental reactive updates.
+ * @returns {Omit<GlobalAttributes, "class"|"style"> & { class: ClassPropertyAccumulatorType, style: CssPropertyAccumulatorType }}
+ */
+BaseComponent.prototype.getEditableProps = function() {
+    if(!this.$editableProps) {
+        const rawProps = this.$description.props || {};
+        this.$editableProps = {
+            ...rawProps,
+            class: classPropertyAccumulator(rawProps.class || {}),
+            style: cssPropertyAccumulator(rawProps.style || {}),
+        };
+
+        if (this.aria) {
+            for (const key in this.aria) {
+                this.$editableProps[resolveAriaKey(key)] = this.aria[key];
+            }
+        }
+    }
+
+    return this.$editableProps;
+};
+
+/**
+ * Returns a plain snapshot of the resolved props, with class and style
+ * unwrapped from their reactive accumulators to their current values.
+ * @returns {GlobalAttributes}
+ */
+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;
+};
+
+/**
+ * @param {GlobalAttributes} props
+ * @returns {this}
+ */
+BaseComponent.prototype.props = function(props) {
+    this.$description.props = props;
+    return this;
+};
+
+
+/**
+ * @param {NdStyleMap} style
+ * @returns {this}
+ */
+BaseComponent.prototype.style = function(style) {
+    const props = this.getEditableProps();
+    props.style.add(style);
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} condition
+ * @returns {this}
+ */
+BaseComponent.prototype.showIf = function(condition) {
+    this.$description.showIf = BaseComponent.obs(condition);
+    return this;
+};
+
+/**
+ * @param {*} context
+ * @returns {this}
+ */
+BaseComponent.prototype.context = function(context) {
+    this.$description.$context = context;
+    return this;
+};
+
+BaseComponent.prototype.visibility = BaseComponent.prototype.showIf;
+
+//------------------------------------------------------------------------------
+//--Component Aria -------------------------------------------------------------
+//------------------------------------------------------------------------------
+const ARIA_NO_PREFIX = new Set(['role', 'id', 'tabindex']);
+
+/**
+ * @param {string} key
+ * @returns {string}
+ */
+const resolveAriaKey = (key) =>
+    ARIA_NO_PREFIX.has(key) || key.startsWith('aria-') ? key : `aria-${key}`;
+
+/**
+ * Override or extend aria attributes on the root element.
+ * Automatically prefixes keys with 'aria-' unless they are in ARIA_NO_PREFIX.
+ *
+ * @example
+ * Modal()
+ *     .setAria({ label: 'Confirmation dialog' })
+ *     .setAria({ describedby: 'modal-desc' })
+ *
+ * @param {Record<string, string|boolean|Observable>} attrs
+ * @returns {this}
+ */
+BaseComponent.prototype.setAria = function(attrs) {
+    if (!this.aria) {
+        this.aria = {};
+    }
+    for (const key in attrs) {
+        this.aria[resolveAriaKey(key)] = attrs[key];
+    }
+    return this;
+};
+
+