native-document 1.0.138 → 1.0.140

package/src/components/form/field/FieldCollection.js

@@ -1,280 +1,187 @@
-import { Observable as $, Validator } from "../../../../index";
-import NativeDocumentError from "../../../../src/core/errors/NativeDocumentError";
-import {Validation} from "../validation/Validation";
-import {resolveParams} from "../utils";
 import BaseComponent from "../../BaseComponent";
+import HasEventEmitter from "../../../core/utils/HasEventEmitter";
+import HasValidation from "../../$traits/has-validation/HasValidation";
+import {Validator, $} from "../../../../index";
+import NativeDocumentError from "../../../core/errors/NativeDocumentError";
 
-export default function FieldCollection(name, config) {
+export default function FieldCollection(name, props = {}) {
     if(!(this instanceof FieldCollection)) {
-        return new FieldCollection(name, config);
+        return new FieldCollection(name, props);
     }
+
+    BaseComponent.call(this, props);
+
     this.$description = {
         name: name,
+        value: $.array([]),
+        rules: [],
+        fields: {},
+        hasErrors: $(false),
+        errors: $.array(),
+        showErrors: $(true),
         defaultItem: null,
-        value: (config?.data && Validator.isObservable(config.data))
-            ? config.data
-            : $.array(config?.data || []),
-        rules: null,
-        layout: null,
-        template: null,
-        ...config
+        fieldBuilder: null,
+        renderItem: null,
+        renderAdd: null,
+        transition: null,
+        props
     };
 
-    this.$items = null;
-    this.$currentRefId = 0;
+    this.$description.value.interceptMutations((items) =>
+        items.map(item => Validator.isObservable(item) ? item : $.object(item))
+    );
 }
 
 BaseComponent.extends(FieldCollection);
+BaseComponent.use(FieldCollection, HasEventEmitter);
+BaseComponent.use(FieldCollection, HasValidation);
 
-FieldCollection.defaultLayoutTemplate = null;
 FieldCollection.defaultTemplate = null;
 
 FieldCollection.use = function(template) {
-    FieldCollection.defaultTemplate = template.fieldCollection;
-    FieldCollection.defaultLayoutTemplate = template.fieldCollectionLayout;
+    FieldCollection.defaultTemplate = template;
 };
 
-
-const setFieldValue = (field, name, proxyData) => {
-    const value = field.$model();
-
-    const data = proxyData[name];
-    if(value != null) {
-        value.set(data);
-        return;
-    }
-    if(Validator.isObservable(data)) {
-        field.model(data);
-        return;
-    }
-    if(typeof field.checked === 'function') {
-        field.checked(data);
-        return;
+FieldCollection.prototype.fields = function(fieldBuilder) {
+    if(typeof fieldBuilder !== 'function') {
+        throw new NativeDocumentError('FieldCollection.fields() expects a function');
     }
-    field.value(data);
-};
-
-Object.defineProperty(FieldCollection.prototype, 'items', {
-    get() { return this.$items; }
-});
-
-FieldCollection.prototype.data = function(data) {
-    this.$description.defaultItem = data;
+    this.$description.fieldBuilder = fieldBuilder;
     return this;
 };
 
-FieldCollection.prototype.isEmpty = function() {
-    return this.$description.value.val().length === 0;
+FieldCollection.prototype.data = function(defaultItem) {
+    if(typeof defaultItem !== 'function') {
+        throw new NativeDocumentError('FieldCollection.data() expects a factory function');
+    }
+    this.$description.defaultItem = defaultItem;
+    return this;
 };
 
-FieldCollection.prototype.count = function() {
-    return this.$description.value.val().length;
+FieldCollection.prototype.renderItem = function(fn) {
+    this.$description.renderItem = fn;
+    return this;
 };
 
-FieldCollection.prototype.addRule = function(validationFn, params, message) {
-    this.$description.rules = this.$description.rules || [];
-    this.$description.rules.push({
-        fn: validationFn,
-        params: params || [],
-        message
-    });
+FieldCollection.prototype.renderAdd = function(fn) {
+    this.$description.renderAdd = fn;
     return this;
 };
 
-FieldCollection.prototype.fields = function(fieldBuilder) {
-    if(typeof fieldBuilder !== "function") {
-        throw new NativeDocumentError('Field builder must be a function');
-    }
-    this.$fieldBuilder = fieldBuilder;
+FieldCollection.prototype.transition = function(transitionName) {
+    this.$description.transition = transitionName;
     return this;
 };
 
-FieldCollection.prototype.template = function(template) {
-    if(typeof template !== "function") {
-        throw new NativeDocumentError('Template must be a function');
+FieldCollection.prototype.model = function(observable) {
+    if(Validator.isObservable(observable)) {
+        this.$description.value = observable;
+        this.$description.value.interceptMutations((items) =>
+            items.map(item => Validator.isObservable(item) ? item : $.object(item))
+        );
+        return this;
     }
-    this.$description.template = function(item, index) {
-        const fields = this.items.get(item).fields;
-        return template.call(this, item, index,  { collection: this, fields });
-    };
+    this.$description.value.set(observable);
     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;
-        })
+FieldCollection.prototype.add = function() {
+    if(!this.$description.fieldBuilder) {
+        throw new NativeDocumentError('FieldCollection: fields() must be defined before add()');
     }
+    const raw  = this.$description.defaultItem
+        ? this.$description.defaultItem()
+        : {};
+    const item = Validator.isObservable(raw) ? raw : $.object(raw);
 
-    this.$items.set(defaultItemData, {
-        refId,
-        fields
-    });
-
-    this.$description.value.push(defaultItemData);
+    this.$description.value.push(item);
+    this.emit('add', item);
     return this;
-
 };
 
 FieldCollection.prototype.remove = function(item) {
     this.$description.value.removeItem(item);
-    this.$items?.delete(item);
+    this.emit('remove', item);
     return this;
 };
 
 FieldCollection.prototype.clear = function() {
-    this.$description.value.forEach((item) => {
-        this.$items.delete(item);
-    })
     this.$description.value.clear();
+    return this;
 };
 
-FieldCollection.prototype.model = function(newValue) {
-    if(Validator.isObservable(newValue)) {
-        this.$description.value?.cleanup?.();
-        this.$description.value = newValue;
-        return this;
-    }
-    this.$description.value.set(newValue);
+FieldCollection.prototype.reset = function() {
+    this.clear();
     return this;
 };
 
 FieldCollection.prototype.value = function() {
-    return this.$description.value.map((item) => {
-        return Validator.isObservable(item) ? item.val() : item;
-    });
+    return this.$description.value.map(item =>
+        Validator.isObservable(item) ? 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.count = function() {
+    return this.$description.value.val().length;
 };
 
-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)`
-    );
+FieldCollection.prototype.isEmpty = function() {
+    return this.$description.value.val().length === 0;
+};
 
+FieldCollection.prototype.onChange = function(handler) {
+    this.on('change', handler);
     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)`
-    );
-
+FieldCollection.prototype.onAdd = function(handler) {
+    this.on('add', handler);
     return this;
 };
 
-FieldCollection.prototype.required = function(message = '') {
-    this.addRule(Validation.required, [], message || this.name+' is required');
+FieldCollection.prototype.onRemove = function(handler) {
+    this.on('remove', handler);
     return this;
 };
 
-FieldCollection.prototype.reset = function() {
-    this.clear();
-    return this;
+FieldCollection.prototype.min = function(minCount, message) {
+    return this.addRule(
+        (values) => ({
+            valid:   values.length >= minCount,
+            message: `Minimum ${minCount} item(s) required`,
+        }),
+        [],
+        message
+    );
 };
 
-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.max = function(maxCount, message) {
+    return this.addRule(
+        (values) => ({
+            valid:   values.length <= maxCount,
+            message: `Maximum ${maxCount} item(s) allowed`,
+        }),
+        [],
+        message
+    );
 };
 
+// Override validate
+FieldCollection.prototype.validate = function(allValues) {
+    const errors     = [];
+    const rowsValues = this.value();
 
-FieldCollection.prototype.$build = function() {
-    const layout = this.$description.layout || FieldCollection.defaultLayoutTemplate;
-    if (!layout) {
-        throw new NativeDocumentError(`Layout not defined for collection "${this.$description.name}"`);
+    if(this.$description.rules) {
+        for(const rule of this.$description.rules) {
+            const result = rule.fn(rowsValues, allValues);
+            if(!result.valid) {
+                errors.push(rule.message || result.message);
+            }
+        }
     }
 
-    const template = this.$description.template || FieldCollection.defaultTemplate;
+    this.$description.errors.set(errors);
+    this.$description.hasErrors.set(errors.length > 0);
 
-    return layout({
-        collection: this,
-        data: this.$description.value,
-        Template: template ? template.bind(this) : null
-    });
+    return errors;
 };

package/src/components/form/field/types/AutocompleteField.js

@@ -1,24 +1,27 @@
 import StringField from "./StringField";
 
-export default function AutocompleteField(name, defaultConfig) {
+export default function AutocompleteField(name, props) {
     if(!(this instanceof AutocompleteField)) {
-        return new AutocompleteField(name, defaultConfig);
+        return new AutocompleteField(name, props);
     }
 
-    StringField.call(this, name, 'autocomplete', defaultConfig);
+    StringField.call(this, name, 'autocomplete', props);
 
     Object.assign(this.$description, {
         source: null,
         minChars: 2,
         debounce: 300,
-        maxResults: 10
+        maxResults: 10,
+        valueKey: 'id',
+        labelKey: 'label',
+        renderItem: null,
     });
 }
 
 AutocompleteField.defaultTemplate = null;
 
 AutocompleteField.use = function(template) {
-    AutocompleteField.defaultTemplate = template.autoCompleteField;
+    AutocompleteField.defaultTemplate = template;
 };
 
 
@@ -54,4 +57,22 @@ AutocompleteField.prototype.oneOf = function(allowedValues, message) {
         message: message || `Must be one of: ${allowedValues.join(', ')}`
     });
     return this;
+};
+
+AutocompleteField.prototype.valueKey = function(key) {
+    this.$description.valueKey = key;
+    return this;
+};
+
+AutocompleteField.prototype.labelKey = function(key) {
+    this.$description.labelKey = key;
+    return this;
+};
+AutocompleteField.prototype.onSelect = function(handler) {
+    this.on('select', handler);
+    return this;
+};
+AutocompleteField.prototype.renderItem = function(callback) {
+    this.$description.renderItem = callback;
+    return this;
 };

package/src/components/form/field/types/CheckboxField.js

@@ -1,12 +1,12 @@
 import Field from "../Field";
 import {Validator} from "../../../../../index";
 
-export default function CheckboxField(name, defaultConfig) {
+export default function CheckboxField(name, props) {
     if(!(this instanceof CheckboxField)) {
-        return new CheckboxField(name, defaultConfig);
+        return new CheckboxField(name, props);
     }
 
-    Field.call(this, name, 'checkbox', defaultConfig);
+    Field.call(this, name, 'checkbox', props);
 
     Object.assign(this.$description, {
         checked: false,
@@ -16,7 +16,7 @@ export default function CheckboxField(name, defaultConfig) {
 CheckboxField.defaultTemplate = null;
 
 CheckboxField.use = function(template) {
-    CheckboxField.defaultTemplate = template.checkboxField;
+    CheckboxField.defaultTemplate = template;
 };
 
 CheckboxField.prototype = Object.create(Field.prototype);

package/src/components/form/field/types/CheckboxGroupField.js

@@ -1,15 +1,16 @@
 import Field from "../Field";
 
-export default function CheckboxGroupField(name, options, defaultConfig) {
+export default function CheckboxGroupField(name, props) {
     if(!(this instanceof CheckboxGroupField)) {
-        return new CheckboxGroupField(name, defaultConfig);
+        return new CheckboxGroupField(name, props);
     }
 
-    Field.call(this, name, 'checkbox-group', defaultConfig);
+    Field.call(this, name, 'checkbox-group', props);
 
     Object.assign(this.$description, {
-        options: options || [],
+        options: [],
         layout: 'vertical',
+        validateOn: 'change',
         defaultValue: []
     });
 }
@@ -17,7 +18,7 @@ export default function CheckboxGroupField(name, options, defaultConfig) {
 CheckboxGroupField.defaultTemplate = null;
 
 CheckboxGroupField.use = function(template) {
-    CheckboxGroupField.defaultTemplate = template.checkboxGroupField;
+    CheckboxGroupField.defaultTemplate = template;
 };
 
 CheckboxGroupField.prototype = Object.create(Field.prototype);
@@ -28,6 +29,11 @@ CheckboxGroupField.prototype.options = function(opts) {
     return this;
 };
 
+CheckboxGroupField.prototype.option = function(value, label, props = {}) {
+    this.$description.options.push({ value, label, props });
+    return this;
+};
+
 CheckboxGroupField.prototype.layout = function(value) {
     const allowedLayouts = ['vertical', 'horizontal', 'grid'];
 

package/src/components/form/field/types/ColorField.js

@@ -2,12 +2,12 @@
 import Field from "../Field";
 import {Validation} from "../../validation/Validation";
 
-export default function ColorField(name, defaultConfig) {
+export default function ColorField(name, props) {
     if(!(this instanceof ColorField)) {
-        return new ColorField(name, defaultConfig);
+        return new ColorField(name, props);
     }
 
-    Field.call(this, name, 'color', defaultConfig);
+    Field.call(this, name, 'color', props);
 
     Object.assign(this.$description, {
         format: 'hex',
@@ -18,7 +18,7 @@ export default function ColorField(name, defaultConfig) {
 ColorField.defaultTemplate = null;
 
 ColorField.use = function(template) {
-    ColorField.defaultTemplate = template.colorField;
+    ColorField.defaultTemplate = template;
 };
 
 ColorField.prototype = Object.create(Field.prototype);