native-document 1.0.138 → 1.0.140

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

@@ -1,56 +1,144 @@
 import Field from "../Field";
 import {Validation} from "../../validation/Validation";
+import BaseComponent from "../../../BaseComponent";
 
-export default function DateField(name, defaultConfig) {
+export default function DateField(name, props = {}) {
     if(!(this instanceof DateField)) {
-        return new DateField(name, defaultConfig);
+        return new DateField(name, props);
     }
 
-    Field.call(this, name, 'date', defaultConfig);
+    Field.call(this, name, 'date', props);
 
     Object.assign(this.$description, {
-        format: 'YYYY-MM-DD',
-        minDate: null,
-        maxDate: null,
-        disabledDates: [],
-        picker: true
+        format:         'YYYY-MM-DD',
+        minDate:        null,
+        maxDate:        null,
+        disabledDates:  null,
+        clearable:      false,
+        withTime:       false,
+        range:          false,
+        firstDayOfWeek: 'monday',
+        locale:         null,
+        timeStep:       null,
+        timezone:       null,
+        valueStart:     null,
+        valueEnd:       null,
+        rangeSeparator:       null,
+        props
     });
 }
 
 DateField.defaultTemplate = null;
 
 DateField.use = function(template) {
-    DateField.defaultTemplate = template.dateField;
+    DateField.defaultTemplate = template;
 };
 
 DateField.prototype = Object.create(Field.prototype);
 DateField.prototype.constructor = DateField;
 
+DateField.prototype.rangeSeparator = function(rangeSeparator) {
+    this.$description.rangeSeparator = rangeSeparator;
+    return this;
+};
+
 DateField.prototype.format = function(formatString) {
     this.$description.format = formatString;
     return this;
 };
 
 DateField.prototype.minDate = function(date) {
-    this.$description.minDate = date;
+    this.$description.minDate = BaseComponent.obs(date);
     return this;
 };
 
 DateField.prototype.maxDate = function(date) {
-    this.$description.maxDate = date;
+    this.$description.maxDate = BaseComponent.obs(date);
     return this;
 };
 
 DateField.prototype.disabledDates = function(dates) {
-    this.$description.disabledDates = dates;
+    this.$description.disabledDates = BaseComponent.obs(dates);
+    return this;
+};
+
+DateField.prototype.withTime = function(enabled = true) {
+    this.$description.withTime = BaseComponent.obs(enabled);
+    return this;
+};
+
+DateField.prototype.range = function(enabled = true) {
+    this.$description.range = BaseComponent.obs(enabled);
+    return this;
+};
+
+DateField.prototype.mondayAsFirstDay = function() {
+    this.$description.firstDayOfWeek = 'monday';
+    return this;
+};
+
+DateField.prototype.sundayAsFirstDay = function() {
+    this.$description.firstDayOfWeek = 'sunday';
+    return this;
+};
+
+DateField.prototype.locale = function(locale) {
+    this.$description.locale = locale;
+    return this;
+};
+
+DateField.prototype.timeStep = function(secondes) {
+    this.$description.timeStep = secondes;
+    return this;
+};
+
+DateField.prototype.fromToday = function() {
+    this.$description.minDate = BaseComponent.obs(new Date().toISOString().split('T')[0]);
+    return this;
+};
+
+DateField.prototype.untilToday = function() {
+    this.$description.maxDate = BaseComponent.obs(new Date().toISOString().split('T')[0]);
     return this;
 };
 
-DateField.prototype.picker = function(enabled = true) {
-    this.$description.picker = enabled;
+DateField.prototype.timezone = function(tz) {
+    this.$description.timezone = tz;
     return this;
 };
 
+DateField.prototype.useLocalTimezone = function() {
+    this.$description.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return this;
+};
+
+DateField.prototype.modelStart = function(observable) {
+    if(!this.$description.range) {
+        console.warn('DateField: modelStart is only available in range mode');
+    }
+    this.$description.valueStart = observable;
+    return this;
+};
+
+DateField.prototype.modelEnd = function(observable) {
+    if(!this.$description.range) {
+        console.warn('DateField: modelEnd is only available in range mode');
+    }
+    this.$description.valueEnd = observable;
+    return this;
+};
+
+DateField.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+};
+
+DateField.prototype.onClear = function(handler) {
+    this.on('clear', handler);
+    return this;
+};
+
+// Validation
 DateField.prototype.min = function(date, message) {
     return this.addRule(Validation.afterDate, [date], message);
 };
@@ -63,10 +151,14 @@ DateField.prototype.between = function(startDate, endDate, message) {
     return this.addRule(Validation.betweenDates, [startDate, endDate], message);
 };
 
-DateField.prototype.after = function(date, message) {
-    return this.addRule(Validation.afterDate, [date], message);
-};
-
 DateField.prototype.before = function(date, message) {
     return this.addRule(Validation.beforeDate, [date], message);
+};
+
+DateField.prototype.weekday = function(message) {
+    return this.addRule(Validation.weekday, [], message);
+};
+
+DateField.prototype.after = function(date, message) {
+    return this.addRule(Validation.afterDate, [date], message);
 };

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

@@ -15,14 +15,14 @@ export default function EmailField(name, defaultConfig) {
 EmailField.defaultTemplate = null;
 
 EmailField.use = function(template) {
-    EmailField.defaultTemplate = template.emailField;
+    EmailField.defaultTemplate = template;
 };
 
 EmailField.prototype = Object.create(Field.prototype);
 EmailField.prototype.constructor = EmailField;
 
 EmailField.prototype.email = function(message) {
-    const existingRule = this.rules.find(r => r.fn === Validation.email);
+    const existingRule = this.$description.rules.find(r => r.fn === Validation.email);
     if (existingRule && message) {
         existingRule.message = message;
     }

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

@@ -1,26 +1,29 @@
 import Field from "../Field";
 import {Validation} from "../../validation/Validation";
+import { $ } from '../../../../../index';
+import FileItemPreview from "./file-field-mode/FileItemPreview";
 
-export default function FileField(name, type = 'file', defaultConfig = {}) {
+export default function FileField(name, props = {}) {
     if(!(this instanceof FileField)) {
-        return new FileField(name, defaultConfig);
+        return new FileField(name, props);
     }
 
-    Field.call(this, name, type, defaultConfig);
+    Field.call(this, name, 'file', props);
 
     Object.assign(this.$description, {
-        accept: null,
+        accept:   null,
         multiple: false,
-        preview: false,
-        dragDrop: false,
-        compress: false
+        mode:     null,
+        files:    $.array([]),
+        fileIcons: [],
+        props
     });
 }
 
 FileField.defaultTemplate = null;
 
 FileField.use = function(template) {
-    FileField.defaultTemplate = template.fileField;
+    FileField.defaultTemplate = template;
 };
 
 FileField.prototype = Object.create(Field.prototype);
@@ -36,18 +39,8 @@ FileField.prototype.multiple = function(enabled = true) {
     return this;
 };
 
-FileField.prototype.preview = function(enabled = true) {
-    this.$description.preview = enabled;
-    return this;
-};
-
-FileField.prototype.dragDrop = function(enabled = true) {
-    this.$description.dragDrop = enabled;
-    return this;
-};
-
-FileField.prototype.compress = function(enabled = true) {
-    this.$description.compress = enabled;
+FileField.prototype.mode = function(mode) {
+    this.$description.mode = mode;
     return this;
 };
 
@@ -73,4 +66,77 @@ FileField.prototype.maxFiles = function(max, message) {
 
 FileField.prototype.minFiles = function(min, message) {
     return this.addRule(Validation.minFiles, [min], message);
-};
+};
+
+FileField.prototype.onFileAdd = function(handler) {
+    this.on('fileAdd', handler);
+    return this;
+};
+
+FileField.prototype.onReset = function(handler) {
+    this.on('reset', handler);
+    return this;
+};
+
+FileField.prototype.onFileRemove = function(handler) {
+    this.on('fileRemove', handler);
+    return this;
+};
+
+FileField.prototype.addFile = function(file, update = true) {
+    const item = new FileItemPreview(file);
+    this.$description.files.push(item);
+    this.emit('fileAdd', item);
+    update && this.$update();
+    return this;
+};
+
+FileField.prototype.setFiles = function(files) {
+    this.$description.files.clear();
+    this.addFiles(files);
+    return this;
+}
+FileField.prototype.addFiles = function(files) {
+    if (!Array.isArray(files)) {
+        throw new Error('addFiles expects an array of files');
+    }
+    for(let i = 0, len = files.length; i < len; i++) {
+        this.addFile(files[i], false);
+    }
+    this.$update();
+    return this;
+};
+
+FileField.prototype.$update = function() {
+    const files = this.$description.files.val();
+    this.$description.value.set(this.$description.multiple ? files.map(i => i.file()) : files[0]?.file() || null);
+    this.validate();
+};
+
+FileField.prototype.removeFile = function(file) {
+    this.$description.files.remove(file);
+    this.emit('fileRemove', file);
+    this.$update();
+    return this;
+};
+
+FileField.prototype.getFiles = function() {
+    return this.$description.files.val();
+};
+
+FileField.prototype.reset = function() {
+    this.$description.files.clear();
+    this.emit('reset');
+    this.$update();
+    return this;
+};
+
+FileField.prototype.fileIcon = function(desc) {
+    this.$description.fileIcons.push(desc);
+    return this;
+};
+
+FileField.prototype.fileIcons = function(icons) {
+    this.$description.fileIcons = icons;
+    return this;
+}

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

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

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

@@ -1,12 +1,12 @@
 import FileField from "./FileField";
 import {Validation} from "../../validation/Validation";
 
-export default function ImageField(name, defaultConfig) {
+export default function ImageField(name, props) {
     if(!(this instanceof ImageField)) {
-        return new ImageField(name, defaultConfig);
+        return new ImageField(name, props);
     }
 
-    FileField.call(this, name, 'image', defaultConfig);
+    FileField.call(this, name, 'image', props);
 
     Object.assign(this.$description, {
         maxWidth: null,
@@ -21,7 +21,7 @@ export default function ImageField(name, defaultConfig) {
 ImageField.defaultTemplate = null;
 
 ImageField.use = function(template) {
-    ImageField.defaultTemplate = template.imageField;
+    ImageField.defaultTemplate = template;
 };
 
 ImageField.prototype = Object.create(FileField.prototype);

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

@@ -1,12 +1,12 @@
 import {Validation} from "../../validation/Validation";
 import Field from "../Field";
 
-export default function NumberField(name, type = 'number', defaultConfig = {}) {
+export default function NumberField(name, type = 'number', props = {}) {
     if(!(this instanceof NumberField)) {
-        return new NumberField(name, defaultConfig);
+        return new NumberField(name, type, props);
     }
 
-    Field.call(this, name, type, defaultConfig);
+    Field.call(this, name, type, props);
 
     Object.assign(this.$description, {
         ...this.$description,
@@ -20,7 +20,7 @@ export default function NumberField(name, type = 'number', defaultConfig = {}) {
 NumberField.defaultTemplate = null;
 
 NumberField.use = function(template) {
-    NumberField.defaultTemplate = template.numberField;
+    NumberField.defaultTemplate = template;
 };
 
 NumberField.prototype = Object.create(Field.prototype);
@@ -68,7 +68,7 @@ NumberField.prototype.step = function(value) {
     return this;
 };
 
-NumberField.prototype.decimals = function(value) {
+NumberField.prototype.decimals = function(value = 2) {
     this.$description.decimals = value;
     return this;
 };

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

@@ -1,22 +1,24 @@
 import {Validation} from "../../validation/Validation";
 import StringField from "./StringField";
 
-export default function PasswordField(name, defaultConfig) {
+export default function PasswordField(name, props = {}) {
     if(!(this instanceof PasswordField)) {
-        return new PasswordField(name, defaultConfig);
+        return new PasswordField(name, props);
     }
 
-    StringField.call(this, name, 'password', defaultConfig);
+    StringField.call(this, name, 'password', props);
     Object.assign(this.$description, {
         visibilityToggle: false,
-        showStrengthMeter: false
+        showStrengthMeter: false,
+        visibilityIcons: {},
+        strengthLabels: null,
     });
 }
 
 PasswordField.defaultTemplate = null;
 
 PasswordField.use = function(template) {
-    PasswordField.defaultTemplate = template.passwordField;
+    PasswordField.defaultTemplate = template;
 };
 
 PasswordField.prototype = Object.create(StringField.prototype);
@@ -63,8 +65,16 @@ PasswordField.prototype.containsSpecialChar = function(message) {
     );
 };
 
-PasswordField.prototype.visibilityToggle = function(enabled = true) {
+PasswordField.prototype.visibilityToggle = function(enabled = true, icons = {}) {
     this.$description.visibilityToggle = enabled;
+    this.$description.visibilityIcons = {
+        show: icons.show || '👁',
+        hide: icons.hide || '🙈',
+    };
+    return this;
+};
+PasswordField.prototype.visibilityIcons = function(show, hide) {
+    this.$description.visibilityIcons = {show, hide};
     return this;
 };
 
@@ -73,6 +83,18 @@ PasswordField.prototype.showStrengthMeter = function(enabled = true) {
     return this;
 };
 
+PasswordField.prototype.strengthLabels = function(labels = {}) {
+    this.$description.strengthLabels = {
+        0: labels[0] || '',
+        1: labels[1] || 'Very weak',
+        2: labels[2] || 'Weak',
+        3: labels[3] || 'Fair',
+        4: labels[4] || 'Strong',
+        5: labels[5] || 'Very strong',
+    };
+    return this;
+};
+
 PasswordField.prototype.same = function(fieldName, message) {
     return this.addRule(Validation.same, [fieldName], message || 'Passwords must match');
 };

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

@@ -1,17 +1,16 @@
 import Field from "../Field";
 import {Validator} from "../../../../../index";
-import CheckboxField from "./CheckboxField";
 
-export default function RadioField(name, options, defaultConfig = {}) {
+export default function RadioField(name, props = {}) {
     if(!(this instanceof RadioField)) {
-        return new RadioField(name, defaultConfig);
+        return new RadioField(name, props);
     }
 
-    Field.call(this, name, 'radio', defaultConfig);
+    Field.call(this, name, 'radio', props);
 
     Object.assign(this.$description, {
-        options: options || [],
-        layout: 'vertical' || defaultConfig?.layout,
+        options: [],
+        layout: 'vertical',
         checked: false
     });
 }
@@ -19,7 +18,7 @@ export default function RadioField(name, options, defaultConfig = {}) {
 RadioField.defaultTemplate = null;
 
 RadioField.use = function(template) {
-    RadioField.defaultTemplate = template.radioField;
+    RadioField.defaultTemplate = template;
 };
 
 RadioField.prototype = Object.create(Field.prototype);
@@ -30,12 +29,17 @@ RadioField.prototype.options = function(opts) {
     return this;
 };
 
+RadioField.prototype.option = function(value, label, props = {}) {
+    this.$description.options.push({ value, label, props });
+    return this;
+};
+
 RadioField.prototype.model = function(observable) {
     this.$description.checked = observable;
     return this;
 };
 
-CheckboxField.prototype.checked = function() {
+RadioField.prototype.checked = function() {
     const checked = this.$description.checked;
     if(Validator.isObservable(checked)) {
         return checked.val();

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

@@ -1,21 +1,25 @@
 import NumberField from "./NumberField";
 
-export default function RangeField(name, defaultConfig) {
+export default function RangeField(name, props) {
     if(!(this instanceof RangeField)) {
-        return new RangeField(name, defaultConfig);
+        return new RangeField(name, props);
     }
 
-    NumberField.call(this, name, 'range', defaultConfig);
+    NumberField.call(this, name, 'range', props);
 
     Object.assign(this.$description, {
-        showValue: true
+        showValue:   true,
+        marks:       null,
+        showMarks:   false,
+        vertical:    false,
+        showTooltip: false,
     });
 }
 
 RangeField.defaultTemplate = null;
 
 RangeField.use = function(template) {
-    RangeField.defaultTemplate = template.rangeField;
+    RangeField.defaultTemplate = template;
 };
 
 RangeField.prototype = Object.create(NumberField.prototype);
@@ -24,4 +28,24 @@ RangeField.prototype.constructor = RangeField;
 RangeField.prototype.showValue = function(enabled = true) {
     this.$description.showValue = enabled;
     return this;
+};
+
+RangeField.prototype.marks = function(marks) {
+    this.$description.marks = marks;
+    return this;
+};
+
+RangeField.prototype.showMarks = function(enabled = true) {
+    this.$description.showMarks = enabled;
+    return this;
+};
+
+RangeField.prototype.vertical = function(enabled = true) {
+    this.$description.vertical = enabled;
+    return this;
+};
+
+RangeField.prototype.showTooltip = function(enabled = true) {
+    this.$description.showTooltip = enabled;
+    return this;
 };

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

@@ -1,11 +1,11 @@
 import StringField from "./StringField";
 
-export default function SearchField(name, defaultConfig) {
+export default function SearchField(name, props) {
     if(!(this instanceof SearchField)) {
-        return new SearchField(name, defaultConfig);
+        return new SearchField(name, props);
     }
 
-    StringField.call(this, name, 'search', defaultConfig);
+    StringField.call(this, name, 'search', props);
 
     Object.assign(this.$description, {
         debounce: 300
@@ -15,7 +15,7 @@ export default function SearchField(name, defaultConfig) {
 SearchField.defaultTemplate = null;
 
 SearchField.use = function(template) {
-    SearchField.defaultTemplate = template.searchField;
+    SearchField.defaultTemplate = template;
 };
 
 SearchField.prototype = Object.create(StringField.prototype);