native-document 1.0.69 → 1.0.72

package/src/components/fom-control/field/Field.js

@@ -0,0 +1,396 @@
+import {Validation} from "../validation/Validation";
+import DefaultRender from "./DefaultRender";
+import {Validator} from "../../../../index";
+import {ShowIf} from "../../../../elements";
+import {resolveParams} from "../utils";
+
+export default function Field(name, type, defaultConfig) {
+
+    this.$description = {
+        name: name,
+        type: type,
+        key: name,
+        label: null,
+        placeholder: null,
+        help: null,
+        defaultValue: null,
+        disabled: false,
+        readonly: false,
+        rules: [],
+        clearErrorOn: 'focus',
+        validateOn: 'blur',
+        showIf: null,
+        requiredIf: null,
+        value: null,
+        errors: null,
+        showErrors: true,
+        id: null,
+        suffix: 'field',
+        classes: {
+            wrapper: null,
+            label: null,
+            input: null,
+            error: null,
+            hint: null
+        },
+        events: {},
+        ...defaultConfig
+    };
+
+    this.$element = null;
+    this.$input = null;
+
+}
+
+Field.renderers = {};
+
+Field.defaultRenderer = DefaultRender;
+
+
+
+// ---------------------------------------------
+// COMMON METHODS
+// ---------------------------------------------
+Object.defineProperty( Field.prototype, 'nd', {
+    get: function() {
+        return this.field().nd;
+    }
+});
+
+Field.prototype.id = function(value) {
+    this.$description.id = value;
+    return this;
+};
+
+Field.prototype.suffix = function(value) {
+    this.$description.suffix = value;
+    return this;
+};
+
+Field.prototype.field = function() {
+    if(!this.$element) {
+        this.$element = this.toNdElement();
+    }
+    return this.$element;
+};
+
+Field.prototype.input = function(callback) {
+    if(!this.$input) {
+        this.field();
+    }
+    callback && callback(this.$input);
+    return this;
+};
+
+Field.prototype.render = function(customRenderer) {
+    if (typeof customRenderer !== 'function') {
+        throw new Error('Custom renderer must be a function');
+    }
+
+    this.$description.customRenderer = customRenderer;
+    return this;
+};
+
+Field.registerRenderer = function(type, renderer) {
+    if (typeof renderer !== 'function') {
+        throw new Error(`Renderer for type "${type}" must be a function`);
+    }
+
+    Field.renderers[type] = renderer;
+};
+
+Field.prototype.getRenderer = function() {
+    if (this.$description.customRenderer) {
+        return this.$description.customRenderer;
+    }
+
+    const typeRenderer = Field.renderers[this.$description.type];
+    if (typeRenderer) {
+        return typeRenderer;
+    }
+
+    return Field.defaultRenderer;
+};
+
+Field.prototype.showErrors = function(show = true) {
+    this.$description.showErrors = show;
+    return this;
+};
+
+Field.prototype.hideErrors = function() {
+    this.$description.showErrors = false;
+    return this;
+};
+
+Field.prototype.value = function(value) {
+    this.$description.value = value;
+    return this;
+};
+
+Field.prototype.errors = function(errors) {
+    if(!Validator.isObservable(errors)) {
+        throw new Error('Errors must be an observable');
+    }
+    this.$description.errors = errors;
+    return this;
+};
+
+Field.prototype.setError = function(error) {
+    this.$description.errors?.set?.(error);
+    return this;
+};
+
+Field.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+
+Field.prototype.key = function(keyInData) {
+    this.$description.key = keyInData;
+    return this;
+};
+
+Field.prototype.default = function(value) {
+    this.$description.defaultValue = value;
+    return this;
+};
+
+Field.prototype.label = function(text) {
+    this.$description.label = text;
+    return this;
+};
+
+Field.prototype.help = function(text) {
+    this.$description.help = text;
+    return this;
+};
+
+Field.prototype.hint = function(text) {
+    this.$description.help = text;
+    return this;
+};
+
+Field.prototype.placeholder = function(text) {
+    this.$description.placeholder = text;
+    return this;
+};
+
+Field.prototype.disabled = function(value) {
+    this.$description.disabled = value;
+    return this;
+};
+
+Field.prototype.readonly = function(value) {
+    this.$description.readonly = value;
+    return this;
+};
+
+Field.prototype.required = function(message) {
+    this.$description.rules.push({
+        fn: Validation.required,
+        message: message || `${this.$description.label || this.$description.name} is required`
+    });
+    return this;
+};
+
+Field.prototype.custom = function(validatorFn, message) {
+    this.$description.rules.push({
+        validate: validatorFn,
+        message: message || 'Validation failed'
+    });
+    return this;
+};
+
+Field.prototype.clearErrorOn = function(event) {
+    this.$description.clearErrorOn = event;
+    return this;
+};
+
+Field.prototype.validateOn = function(event) {
+    this.$description.validateOn = event;
+    return this;
+};
+
+Field.prototype.showIf = function(condition) {
+    this.$description.showIf = condition;
+    return this;
+};
+
+Field.prototype.requiredIf = function(condition, message) {
+    this.addRule(Validation.requiredIf, [condition], message);
+    return this;
+};
+
+Field.prototype.addRule = function(validationFn, params, message) {
+    this.$description.rules.push({
+        fn: validationFn,
+        params: params || [],
+        message
+    });
+    return this;
+};
+
+Field.prototype.getValue = function() {
+    const value = this.$description.value || this.$description.checked;
+    return Validator.isObservable(value) ? value.val() : value;
+};
+
+Field.prototype.validate = function(allValues = {}) {
+    if (!this.$description.rules || this.$description.rules.length === 0) {
+        this.$description.errors?.set(null);
+        return [];
+    }
+
+    const errors = [];
+    const value = this.getValue();
+
+    for (const rule of this.$description.rules) {
+        const paramsResolved = resolveParams(rule, allValues);
+        const result = rule.fn(value, ...paramsResolved, allValues);
+
+        if (!result.valid) {
+            errors.push(rule.message || result.message);
+        }
+    }
+
+    this.$description.errors?.set(errors.length ? errors : null);
+    return errors;
+};
+
+Field.prototype.toJSON = function() {
+    return {
+        ...this.$description,
+        rules: this.$description.rules?.map(r => ({
+            type: r.fn.name,
+            params: r.params,
+            message: r.message
+        })),
+    };
+};
+
+Field.prototype.classes = function(classesObject) {
+    Object.assign(this.$description.classes, classesObject);
+    return this;
+};
+
+Field.prototype.wrapperClass = function(wrapperClass) {
+    this.$description.classes.wrapper = wrapperClass;
+    return this;
+};
+
+Field.prototype.inputClass = function(inputClass) {
+    this.$description.classes.input = inputClass;
+    return this;
+};
+
+Field.prototype.labelClass = function(labelClass) {
+    this.$description.classes.label = labelClass;
+    return this;
+};
+
+Field.prototype.errorClass = function(errorClass) {
+    this.$description.classes.error = errorClass;
+    return this;
+};
+
+Field.prototype.hintClass = function(hintClass) {
+    this.$description.classes.error = hintClass;
+    return this;
+};
+
+Field.prototype.toNdElement = function() {
+    if(this.$element) {
+        return this.$element;
+    }
+    const renderer = this.getRenderer();
+    this.$element = renderer(this);
+
+    if(this.$description.showIf) {
+        ShowIf(this.$description.showIf, this.$element);
+    }
+
+    return this.$element;
+};
+
+// ---------------------------------------------
+// Events METHODS
+// ---------------------------------------------
+Field.prototype.onChange = function(callback) {
+    this.$description.events['change'] = callback;
+    return this;
+};
+
+Field.prototype.onInput = function(callback) {
+    this.$description.events['input'] = callback;
+    return this;
+};
+
+Field.prototype.onFocus = function(callback) {
+    this.$description.events['focus'] = callback;
+    return this;
+};
+
+Field.prototype.onBlur = function(callback) {
+    this.$description.events['blur'] = callback;
+    return this;
+};
+
+
+Field.prototype.onKeydown = function(callback) {
+    this.$description.events['keydown'] = callback;
+    return this;
+};
+
+Field.prototype.onKeyup = function(callback) {
+    this.$description.events['keyup'] = callback;
+    return this;
+};
+
+Field.prototype.onKeypress = function(callback) {
+    this.$description.events['keypress'] = callback;
+    return this;
+};
+
+
+Field.prototype.onPaste = function(callback) {
+    this.$description.events['paste'] = callback;
+    return this;
+};
+
+Field.prototype.onCut = function(callback) {
+    this.$description.events['cut'] = callback;
+    return this;
+};
+
+Field.prototype.onCopy = function(callback) {
+    this.$description.events['copy'] = callback;
+    return this;
+};
+
+
+Field.prototype.onFileSelect = function(callback) {
+    this.$description.events['fileselect'] = callback;
+    return this;
+};
+
+Field.prototype.onDrop = function(callback) {
+    this.$description.events['drop'] = callback;
+    return this;
+};
+
+Field.prototype.onDragover = function(callback) {
+    this.$description.events['dragover'] = callback;
+    return this;
+};
+
+
+// Autocomplete
+Field.prototype.onSearch = function(callback) {
+    this.$description.events['search'] = callback;
+    return this;
+};
+
+Field.prototype.onSelect = function(callback) {
+    this.$description.events['select'] = callback;
+    return this;
+};

package/src/components/fom-control/field/FieldCollection.js

@@ -0,0 +1,260 @@
+import { Observable as $, Validator } from "../../../../index";
+import { Button } from "../../../../elements";
+import NativeDocumentError from "../../../core/errors/NativeDocumentError";
+import {Validation} from "../validation/Validation";
+import DefaultCollectionLayout from "../default/collection/DefaultCollectionLayout";
+import DefaultCollectionTemplate from "../default/collection/DefaultCollectionTemplate";
+import {resolveParams} from "../utils";
+
+export default function FieldCollection(name, config) {
+    this.$description = {
+        name: name,
+        defaultItem: null,
+        value: (config?.data && Validator.isObservable(config.data))
+            ? config.data
+            : $.array(config?.data || []),
+        rules: null,
+        layout: DefaultCollectionLayout,
+        template: DefaultCollectionTemplate,
+        ...config
+    };
+
+    this.$items = null;
+    this.$currentRefId = 0;
+}
+
+
+const setFieldValue = (field, name, proxyData) => {
+    const value = field.$description.value || field.$description.checked;
+
+    if(value != null) {
+        return;
+    }
+    if(typeof field.checked === 'function') {
+        field.checked(proxyData[name]);
+        return;
+    }
+    field.value(proxyData[name]);
+};
+
+Object.defineProperty(FieldCollection.prototype, 'items', {
+    get() { return this.$items; }
+});
+
+FieldCollection.prototype.data = function(data) {
+    this.$description.defaultItem = data;
+    return this;
+};
+
+FieldCollection.prototype.isEmpty = function() {
+    return this.$description.value.val().length === 0;
+};
+
+FieldCollection.prototype.count = function() {
+    return this.$description.value.val().length;
+};
+
+FieldCollection.prototype.addRule = function(validationFn, params, message) {
+    this.$description.rules = this.$description.rules || [];
+    this.$description.rules.push({
+        fn: validationFn,
+        params: params || [],
+        message
+    });
+    return this;
+};
+
+FieldCollection.prototype.fields = function(fieldBuilder) {
+    if(typeof fieldBuilder !== "function") {
+        throw new NativeDocumentError('Field builder must be a function');
+    }
+    this.$fieldBuilder = fieldBuilder;
+    return this;
+};
+
+FieldCollection.prototype.template = function(template) {
+    if(typeof template !== "function") {
+        throw new NativeDocumentError('Template must be a function');
+    }
+    this.$description.template = function(item, index) {
+        const fields = this.items.get(item).fields;
+        return template.call(this, item, index,  { collection: this, fields });
+    };
+    return this;
+};
+
+FieldCollection.prototype.add = function(...args) {
+    if (!this.$fieldBuilder) {
+        throw new NativeDocumentError('Field builder not defined');
+    }
+
+    const defaultItem = this.$description.defaultItem;
+    let defaultItemData = (typeof defaultItem === 'function' ? defaultItem(...args) : defaultItem) || '';
+    defaultItemData = Validator.isObservable(defaultItemData)
+        ? defaultItemData
+        : Validator.isObject(defaultItemData)
+            ? $.init(defaultItemData)
+            : $(defaultItemData);
+
+    this.$items = this.$items || new WeakMap();
+
+    const refId = this.$currentRefId++;
+    const createdFields = this.$fieldBuilder(refId, defaultItemData);
+    let fields = {};
+    if(Array.isArray(createdFields)) {
+        createdFields.forEach(field => {
+            const name = field.$description.name.split('.').pop();
+            setFieldValue(field, name, defaultItemData);
+            fields[name] = field;
+        });
+    } else {
+        Object.entries(createdFields).forEach(([name, field]) => {
+            setFieldValue(field, name, defaultItemData);
+            fields[name] = field;
+        })
+    }
+
+    this.$items.set(defaultItemData, {
+        refId,
+        fields
+    });
+
+    this.$description.value.push(defaultItemData);
+    return this;
+
+};
+
+FieldCollection.prototype.remove = function(item) {
+    this.$description.value.removeItem(item);
+    this.$items?.delete(item);
+    return this;
+};
+
+FieldCollection.prototype.clear = function() {
+    this.$description.value.forEach((item) => {
+        this.$items.delete(item);
+    })
+    this.$description.value.clear();
+};
+
+FieldCollection.prototype.value = function(value) {
+    if(Validator.isObservable(value)) {
+        this.$description.value?.cleanup?.();
+        this.$description.value = value;
+        return this;
+    }
+    this.$description.value.set(value);
+    return this;
+};
+
+FieldCollection.prototype.getValue = function() {
+    return this.$description.value.map((item) => {
+        return typeof item?.val === 'function' ? item.val() : item;
+    });
+};
+
+FieldCollection.prototype.validate = function(allValues) {
+    const errors = [];
+    const rowsValues = [];
+
+    if(this.$items) {
+        this.$description.value.forEach((dataItem) => {
+            const row = this.$items.get(dataItem);
+            const fields = Object.entries(row.fields);
+            const itemValue = dataItem.val();
+            rowsValues.push(itemValue);
+
+            for(const [_, field] of fields) {
+                const fieldErrors = field.validate({ ...itemValue, $parent: allValues });
+                if(fieldErrors && fieldErrors.length) {
+                    errors.push(fieldErrors);
+                }
+            }
+        });
+    }
+
+    if(this.$description.rules) {
+        for(const rule of this.$description.rules) {
+            const paramsResolved = resolveParams(rule, allValues);
+            console.log({ rule, paramsResolved });
+            const result = rule.fn(rowsValues, ...paramsResolved, allValues);
+
+            if (!result.valid) {
+                errors.push(rule.message || result.message);
+            }
+        }
+    }
+
+    return errors;
+};
+
+FieldCollection.prototype.min = function(minCount, message) {
+    if (typeof minCount !== 'number' || minCount < 0) {
+        throw new NativeDocumentError('min() expects a positive number');
+    }
+
+    this.addRule(
+        (values) => {
+            const isValid = values.length >= minCount;
+            return {
+                valid: isValid,
+                message: `Minimum ${minCount} item(s) required`
+            };
+        },
+        [],
+        message || `${this.$description.name} must have at least ${minCount} item(s)`
+    );
+
+    return this;
+};
+
+FieldCollection.prototype.max = function(maxCount, message) {
+    if (typeof maxCount !== 'number' || maxCount < 0) {
+        throw new NativeDocumentError('max() expects a positive number');
+    }
+
+    this.addRule(
+        (values) => {
+            const isValid = values.length <= maxCount;
+            return {
+                valid: isValid,
+                message: `Maximum ${maxCount} item(s) allowed`
+            };
+        },
+        [],
+        message || `${this.$description.name} must have at most ${maxCount} item(s)`
+    );
+
+    return this;
+};
+
+FieldCollection.prototype.required = function(message = '') {
+    this.addRule(Validation.required, [], message || this.name+' is required');
+    return this;
+};
+
+FieldCollection.prototype.reset = function() {
+    this.clear();
+    return this;
+};
+
+FieldCollection.prototype.layout = function(layout) {
+    if(typeof layout !== 'function') {
+        throw new NativeDocumentError(this.name+' FieldCollection Layout must be a function');
+    }
+    this.$description.layout = layout;
+    return this;
+};
+
+
+FieldCollection.prototype.toNdElement = function() {
+    if (!this.$description.layout) {
+        throw new NativeDocumentError(`Layout not defined for collection "${this.$description.name}"`);
+    }
+
+    return this.$description.layout({
+        collection: this,
+        data: this.$description.value,
+        Template: this.$description.template ? this.$description.template.bind(this) : null
+    });
+};