native-document 1.0.75 → 1.0.77

package/src/components/{fom-control → form}/field/Field.js

@@ -1,11 +1,12 @@
-import {Validation} from "../validation/Validation";
-import DefaultRender from "./DefaultRender";
-import {Validator} from "../../../../index";
-import {ShowIf} from "../../../../elements";
-import {resolveParams} from "../utils";
+import {Validation} from "@components/form/validation/Validation";
+import {Validator} from "@core";
+import {resolveParams} from "@components/form/utils";
+import BaseComponent from "@components/BaseComponent";
 
 export default function Field(name, type, defaultConfig) {
 
+    BaseComponent.call(this);
+
     this.$description = {
         name: name,
         type: type,
@@ -34,6 +35,7 @@ export default function Field(name, type, defaultConfig) {
             hint: null
         },
         events: {},
+        render: null,
         ...defaultConfig
     };
 
@@ -44,26 +46,29 @@ export default function Field(name, type, defaultConfig) {
 
 Field.renderers = {};
 
-Field.defaultRenderer = DefaultRender;
+Field.defaultTemplate = null;
 
+BaseComponent.extends(Field);
 
+Field.use = function(template) {
+    Field.defaultTemplate = template.field;
+};
 
 // ---------------------------------------------
 // COMMON METHODS
 // ---------------------------------------------
-Object.defineProperty( Field.prototype, 'nd', {
-    get: function() {
-        return this.field().nd;
-    }
-});
 
-Field.prototype.id = function(value) {
-    this.$description.id = value;
+Field.prototype.$model = function() {
+    return this.$description.value || this.$description.checked;
+};
+
+Field.prototype.id = function(id) {
+    this.$description.id = id;
     return this;
 };
 
-Field.prototype.suffix = function(value) {
-    this.$description.suffix = value;
+Field.prototype.suffix = function(suffix) {
+    this.$description.suffix = suffix;
     return this;
 };
 
@@ -73,6 +78,7 @@ Field.prototype.field = function() {
     }
     return this.$element;
 };
+Field.prototype.node = Field.prototype.field;
 
 Field.prototype.input = function(callback) {
     if(!this.$input) {
@@ -82,36 +88,6 @@ Field.prototype.input = function(callback) {
     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;
@@ -122,8 +98,8 @@ Field.prototype.hideErrors = function() {
     return this;
 };
 
-Field.prototype.value = function(value) {
-    this.$description.value = value;
+Field.prototype.model = function(observable) {
+    this.$description.value = observable;
     return this;
 };
 
@@ -150,8 +126,8 @@ Field.prototype.key = function(keyInData) {
     return this;
 };
 
-Field.prototype.default = function(value) {
-    this.$description.defaultValue = value;
+Field.prototype.default = function(defaultValue) {
+    this.$description.defaultValue = defaultValue;
     return this;
 };
 
@@ -175,13 +151,13 @@ Field.prototype.placeholder = function(text) {
     return this;
 };
 
-Field.prototype.disabled = function(value) {
-    this.$description.disabled = value;
+Field.prototype.disabled = function(disabled) {
+    this.$description.disabled = disabled;
     return this;
 };
 
-Field.prototype.readonly = function(value) {
-    this.$description.readonly = value;
+Field.prototype.readonly = function(readonly) {
+    this.$description.readonly = readonly;
     return this;
 };
 
@@ -230,11 +206,21 @@ Field.prototype.addRule = function(validationFn, params, message) {
     return this;
 };
 
-Field.prototype.getValue = function() {
-    const value = this.$description.value || this.$description.checked;
+Field.prototype.value = function() {
+    const value = this.$model();
     return Validator.isObservable(value) ? value.val() : value;
 };
 
+Field.prototype.setValue = function(newValue) {
+    const value = this.$model();
+    if(Validator.isObservable(value)) {
+        value.set(newValue);
+        return this;
+    }
+    this.$description.value = value;
+    return this;
+};
+
 Field.prototype.validate = function(allValues = {}) {
     if (!this.$description.rules || this.$description.rules.length === 0) {
         this.$description.errors?.set(null);
@@ -242,7 +228,7 @@ Field.prototype.validate = function(allValues = {}) {
     }
 
     const errors = [];
-    const value = this.getValue();
+    const value = this.value();
 
     for (const rule of this.$description.rules) {
         const paramsResolved = resolveParams(rule, allValues);
@@ -298,99 +284,40 @@ Field.prototype.hintClass = function(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);
+Field.prototype.render = function(renderFn) {
+    if (typeof renderFn !== 'function') {
+        throw new Error('Custom renderer must be a function');
     }
 
-    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;
+    this.$description.render = renderFn;
     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.registerRenderer = function(type, renderer) {
+    if (typeof renderer !== 'function') {
+        throw new Error(`Renderer for type "${type}" must be a function`);
+    }
 
-Field.prototype.onDrop = function(callback) {
-    this.$description.events['drop'] = callback;
-    return this;
+    Field.renderers[type] = renderer;
 };
 
-Field.prototype.onDragover = function(callback) {
-    this.$description.events['dragover'] = callback;
-    return this;
-};
+Field.prototype.getRenderer = function() {
+    if (this.$description.render) {
+        return this.$description.render;
+    }
 
+    const typeRenderer = Field.renderers[this.$description.type];
+    if (typeRenderer) {
+        return typeRenderer;
+    }
 
-// Autocomplete
-Field.prototype.onSearch = function(callback) {
-    this.$description.events['search'] = callback;
-    return this;
+    return this.constructor.defaultTemplate || Field.defaultTemplate;
 };
 
-Field.prototype.onSelect = function(callback) {
-    this.$description.events['select'] = callback;
-    return this;
-};
+Field.prototype.$build = function() {
+    const renderer = this.getRenderer();
+    if(!renderer) {
+        return null;
+    }
+    return renderer(this);
+};

package/src/components/{fom-control → form}/field/FieldCollection.js

@@ -1,12 +1,13 @@
-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";
+import { Observable as $, Validator } from "@core";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
+import {Validation} from "@components/form/validation/Validation";
+import {resolveParams} from "@components/form/utils";
+import BaseComponent from "@components/BaseComponent";
 
 export default function FieldCollection(name, config) {
+    if(!(this instanceof FieldCollection)) {
+        return new FieldCollection(name, config);
+    }
     this.$description = {
         name: name,
         defaultItem: null,
@@ -14,8 +15,8 @@ export default function FieldCollection(name, config) {
             ? config.data
             : $.array(config?.data || []),
         rules: null,
-        layout: DefaultCollectionLayout,
-        template: DefaultCollectionTemplate,
+        layout: null,
+        template: null,
         ...config
     };
 
@@ -23,18 +24,34 @@ export default function FieldCollection(name, config) {
     this.$currentRefId = 0;
 }
 
+BaseComponent.extends(FieldCollection);
+
+FieldCollection.defaultLayoutTemplate = null;
+FieldCollection.defaultTemplate = null;
+
+FieldCollection.use = function(template) {
+    FieldCollection.defaultTemplate = template.fieldCollection;
+    FieldCollection.defaultLayoutTemplate = template.fieldCollectionLayout;
+};
+
 
 const setFieldValue = (field, name, proxyData) => {
-    const value = field.$description.value || field.$description.checked;
+    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(proxyData[name]);
+        field.checked(data);
         return;
     }
-    field.value(proxyData[name]);
+    field.value(data);
 };
 
 Object.defineProperty(FieldCollection.prototype, 'items', {
@@ -137,19 +154,19 @@ FieldCollection.prototype.clear = function() {
     this.$description.value.clear();
 };
 
-FieldCollection.prototype.value = function(value) {
-    if(Validator.isObservable(value)) {
+FieldCollection.prototype.model = function(newValue) {
+    if(Validator.isObservable(newValue)) {
         this.$description.value?.cleanup?.();
-        this.$description.value = value;
+        this.$description.value = newValue;
         return this;
     }
-    this.$description.value.set(value);
+    this.$description.value.set(newValue);
     return this;
 };
 
-FieldCollection.prototype.getValue = function() {
+FieldCollection.prototype.value = function() {
     return this.$description.value.map((item) => {
-        return typeof item?.val === 'function' ? item.val() : item;
+        return Validator.isObservable(item) ? item.val() : item;
     });
 };
 
@@ -247,14 +264,17 @@ FieldCollection.prototype.layout = function(layout) {
 };
 
 
-FieldCollection.prototype.toNdElement = function() {
-    if (!this.$description.layout) {
+FieldCollection.prototype.$build = function() {
+    const layout = this.$description.layout || FieldCollection.defaultLayoutTemplate;
+    if (!layout) {
         throw new NativeDocumentError(`Layout not defined for collection "${this.$description.name}"`);
     }
 
-    return this.$description.layout({
+    const template = this.$description.template || FieldCollection.defaultTemplate;
+
+    return layout({
         collection: this,
         data: this.$description.value,
-        Template: this.$description.template ? this.$description.template.bind(this) : null
+        Template: template ? template.bind(this) : null
     });
 };

package/src/components/{fom-control → form}/field/types/AutocompleteField.js

@@ -1,6 +1,10 @@
 import StringField from "./StringField";
 
 export default function AutocompleteField(name, defaultConfig) {
+    if(!(this instanceof AutocompleteField)) {
+        return new AutocompleteField(name, defaultConfig);
+    }
+
     StringField.call(this, name, 'autocomplete', defaultConfig);
 
     Object.assign(this.$description, {
@@ -11,6 +15,13 @@ export default function AutocompleteField(name, defaultConfig) {
     });
 }
 
+AutocompleteField.defaultTemplate = null;
+
+AutocompleteField.use = function(template) {
+    AutocompleteField.defaultTemplate = template.autoCompleteField;
+};
+
+
 AutocompleteField.prototype = Object.create(StringField.prototype);
 AutocompleteField.prototype.constructor = AutocompleteField;
 

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

@@ -0,0 +1,36 @@
+import Field from "../Field";
+import {Validator} from "@core";
+
+export default function CheckboxField(name, defaultConfig) {
+    if(!(this instanceof CheckboxField)) {
+        return new CheckboxField(name, defaultConfig);
+    }
+
+    Field.call(this, name, 'checkbox', defaultConfig);
+
+    Object.assign(this.$description, {
+        checked: false,
+    });
+}
+
+CheckboxField.defaultTemplate = null;
+
+CheckboxField.use = function(template) {
+    CheckboxField.defaultTemplate = template.checkboxField;
+};
+
+CheckboxField.prototype = Object.create(Field.prototype);
+CheckboxField.prototype.constructor = CheckboxField;
+
+CheckboxField.prototype.model = function(observable) {
+    this.$description.checked = observable;
+    return this;
+};
+
+CheckboxField.prototype.checked = function() {
+    const checked = this.$description.checked;
+    if(Validator.isObservable(checked)) {
+        return checked.val();
+    }
+    return checked;
+};

package/src/components/{fom-control → form}/field/types/CheckboxGroupField.js

@@ -1,6 +1,10 @@
 import Field from "../Field";
 
 export default function CheckboxGroupField(name, options, defaultConfig) {
+    if(!(this instanceof CheckboxGroupField)) {
+        return new CheckboxGroupField(name, defaultConfig);
+    }
+
     Field.call(this, name, 'checkbox-group', defaultConfig);
 
     Object.assign(this.$description, {
@@ -10,6 +14,12 @@ export default function CheckboxGroupField(name, options, defaultConfig) {
     });
 }
 
+CheckboxGroupField.defaultTemplate = null;
+
+CheckboxGroupField.use = function(template) {
+    CheckboxGroupField.defaultTemplate = template.checkboxGroupField;
+};
+
 CheckboxGroupField.prototype = Object.create(Field.prototype);
 CheckboxGroupField.prototype.constructor = CheckboxGroupField;
 

package/src/components/{fom-control → form}/field/types/ColorField.js

@@ -1,8 +1,12 @@
 // ColorField.js
 import Field from "../Field";
-import {Validation} from "../../validation/Validation";
+import {Validation} from "@components/form/validation/Validation";
 
 export default function ColorField(name, defaultConfig) {
+    if(!(this instanceof ColorField)) {
+        return new ColorField(name, defaultConfig);
+    }
+
     Field.call(this, name, 'color', defaultConfig);
 
     Object.assign(this.$description, {
@@ -11,6 +15,12 @@ export default function ColorField(name, defaultConfig) {
     });
 }
 
+ColorField.defaultTemplate = null;
+
+ColorField.use = function(template) {
+    ColorField.defaultTemplate = template.colorField;
+};
+
 ColorField.prototype = Object.create(Field.prototype);
 ColorField.prototype.constructor = ColorField;
 

package/src/components/{fom-control → form}/field/types/DateField.js

@@ -1,7 +1,11 @@
 import Field from "../Field";
-import {Validation} from "../../validation/Validation";
+import {Validation} from "@components/form/validation/Validation";
 
 export default function DateField(name, defaultConfig) {
+    if(!(this instanceof DateField)) {
+        return new DateField(name, defaultConfig);
+    }
+
     Field.call(this, name, 'date', defaultConfig);
 
     Object.assign(this.$description, {
@@ -13,6 +17,12 @@ export default function DateField(name, defaultConfig) {
     });
 }
 
+DateField.defaultTemplate = null;
+
+DateField.use = function(template) {
+    DateField.defaultTemplate = template.dateField;
+};
+
 DateField.prototype = Object.create(Field.prototype);
 DateField.prototype.constructor = DateField;
 

package/src/components/{fom-control → form}/field/types/EmailField.js

@@ -1,13 +1,23 @@
 import Field from "../Field";
-import {Validation} from "../../validation/Validation";
+import {Validation} from "@components/form/validation/Validation";
 
 export default function EmailField(name, defaultConfig) {
+    if(!(this instanceof EmailField)) {
+        return new EmailField(name, defaultConfig);
+    }
+
     Field.call(this, name, 'email', defaultConfig);
 
     // Auto-apply email validation
     this.addRule(Validation.email, []);
 }
 
+EmailField.defaultTemplate = null;
+
+EmailField.use = function(template) {
+    EmailField.defaultTemplate = template.emailField;
+};
+
 EmailField.prototype = Object.create(Field.prototype);
 EmailField.prototype.constructor = EmailField;
 

package/src/components/{fom-control → form}/field/types/FileField.js

@@ -1,7 +1,11 @@
 import Field from "../Field";
-import {Validation} from "../../validation/Validation";
+import {Validation} from "@components/form/validation/Validation";
 
 export default function FileField(name, type = 'file', defaultConfig = {}) {
+    if(!(this instanceof FileField)) {
+        return new FileField(name, defaultConfig);
+    }
+
     Field.call(this, name, type, defaultConfig);
 
     Object.assign(this.$description, {
@@ -13,6 +17,12 @@ export default function FileField(name, type = 'file', defaultConfig = {}) {
     });
 }
 
+FileField.defaultTemplate = null;
+
+FileField.use = function(template) {
+    FileField.defaultTemplate = template.fileField;
+};
+
 FileField.prototype = Object.create(Field.prototype);
 FileField.prototype.constructor = FileField;
 

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

@@ -0,0 +1,18 @@
+import Field from "../Field";
+
+export default function HiddenField(name, defaultConfig) {
+    if(!(this instanceof HiddenField)) {
+        return new HiddenField(name, defaultConfig);
+    }
+
+    Field.call(this, name, 'hidden', defaultConfig);
+}
+
+HiddenField.defaultTemplate = null;
+
+HiddenField.use = function(template) {
+    HiddenField.defaultTemplate = template.hiddenField;
+};
+
+HiddenField.prototype = Object.create(Field.prototype);
+HiddenField.prototype.constructor = HiddenField;

package/src/components/{fom-control → form}/field/types/ImageField.js

@@ -1,7 +1,11 @@
 import FileField from "./FileField";
-import {Validation} from "../../validation/Validation";
+import {Validation} from "@components/form/validation/Validation";
 
 export default function ImageField(name, defaultConfig) {
+    if(!(this instanceof ImageField)) {
+        return new ImageField(name, defaultConfig);
+    }
+
     FileField.call(this, name, 'image', defaultConfig);
 
     Object.assign(this.$description, {
@@ -14,6 +18,12 @@ export default function ImageField(name, defaultConfig) {
     this.accept(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);
 }
 
+ImageField.defaultTemplate = null;
+
+ImageField.use = function(template) {
+    ImageField.defaultTemplate = template.imageField;
+};
+
 ImageField.prototype = Object.create(FileField.prototype);
 ImageField.prototype.constructor = ImageField;
 

package/src/components/{fom-control → form}/field/types/NumberField.js

@@ -1,7 +1,11 @@
-import {Validation} from "../../validation/Validation";
+import {Validation} from "@components/form/validation/Validation";
 import Field from "../Field";
 
 export default function NumberField(name, type = 'number', defaultConfig = {}) {
+    if(!(this instanceof NumberField)) {
+        return new NumberField(name, defaultConfig);
+    }
+
     Field.call(this, name, type, defaultConfig);
 
     Object.assign(this.$description, {
@@ -13,6 +17,12 @@ export default function NumberField(name, type = 'number', defaultConfig = {}) {
     });
 }
 
+NumberField.defaultTemplate = null;
+
+NumberField.use = function(template) {
+    NumberField.defaultTemplate = template.numberField;
+};
+
 NumberField.prototype = Object.create(Field.prototype);
 NumberField.prototype.constructor = NumberField;