native-document 1.0.138 → 1.0.140

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

@@ -1,25 +1,33 @@
 import Field from "../Field";
 
-export default function SelectField(name, options, defaultConfig) {
+export default function SelectField(name, props) {
     if(!(this instanceof SelectField)) {
-        return new SelectField(name, defaultConfig);
+        return new SelectField(name, props);
     }
 
-    Field.call(this, name, 'select', defaultConfig);
+    Field.call(this, name, 'select', props);
 
     Object.assign(this.$description, {
-        options: options || [],
+        options: [],
         multiple: false,
         searchable: false,
+        searchPlaceholder: null,
         clearable: false,
-        groups: null
+        groups: null,
+        multipleDisplay: 'text',
+        removeSelected: false,
+        truncateRender: false,
+        countRender: false,
+        selectedLabelRender: false,
+        renderItem: null,
+        truncateMax: null
     });
 }
 
 SelectField.defaultTemplate = null;
 
 SelectField.use = function(template) {
-    SelectField.defaultTemplate = template.selectField;
+    SelectField.defaultTemplate = template;
 };
 
 SelectField.prototype = Object.create(Field.prototype);
@@ -30,13 +38,19 @@ SelectField.prototype.options = function(opts) {
     return this;
 };
 
+SelectField.prototype.option = function(value, label, props = {}) {
+    this.$description.options.push({ label, value, props });
+    return this;
+};
+
 SelectField.prototype.multiple = function(enabled = true) {
     this.$description.multiple = enabled;
     return this;
 };
 
-SelectField.prototype.searchable = function(enabled = true) {
+SelectField.prototype.searchable = function(enabled = true, placeholder = null) {
     this.$description.searchable = enabled;
+    this.$description.searchPlaceholder = placeholder;
     return this;
 };
 
@@ -48,4 +62,57 @@ SelectField.prototype.clearable = function(enabled = true) {
 SelectField.prototype.groups = function(groupsConfig) {
     this.$description.groups = groupsConfig;
     return this;
-};
+};
+
+SelectField.prototype.multipleDisplay = function(mode) {
+    this.$description.multipleDisplay = mode;
+    return this;
+};
+SelectField.prototype.multipleDisplayAsTags = function() {
+    this.$description.multipleDisplay = 'tags';
+    return this;
+};
+
+SelectField.prototype.multipleDisplayAsText = function() {
+    this.$description.multipleDisplay = 'text';
+    return this;
+};
+
+SelectField.prototype.multipleDisplayAsCount = function() {
+    this.$description.multipleDisplay = 'count';
+    return this;
+};
+
+SelectField.prototype.multipleDisplayAsTruncate = function(max = 2) {
+    this.$description.multipleDisplay = 'truncate';
+    this.$description.truncateMax = max;
+    return this;
+};
+
+SelectField.prototype.removeSelected = function(enabled = true) {
+    this.$description.removeSelected = enabled;
+    return this;
+};
+
+SelectField.prototype.truncateRender = function(callback) {
+    this.$description.truncateRender = callback;
+    return this;
+};
+
+SelectField.prototype.countRender = function(callback) {
+    this.$description.countRender = callback;
+    return this;
+};
+
+SelectField.prototype.selectedLabelRender = function(callback) {
+    this.$description.selectedLabelRender = callback;
+    return this;
+};
+SelectField.prototype.renderItem = function(callback) {
+    this.$description.renderItem = callback;
+    return this;
+};
+SelectField.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+}

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

@@ -1,18 +1,18 @@
 import Field from "../Field";
 import {Validation} from "../../validation/Validation";
 
-export default function StringField(name, type = 'text', defaultConfig = {}) {
+export default function StringField(name, type = 'text', props = {}) {
     if(!(this instanceof StringField)) {
-        return new StringField(name, defaultConfig);
+        return new StringField(name, props);
     }
 
-    Field.call(this, name, type, defaultConfig);
+    Field.call(this, name, type, props);
 }
 
 StringField.defaultTemplate = null;
 
 StringField.use = function(template) {
-    StringField.defaultTemplate = template.stringField;
+    StringField.defaultTemplate = template;
 };
 
 StringField.prototype = Object.create(Field.prototype);

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

@@ -1,12 +1,12 @@
 import StringField from "./StringField";
 import {Validation} from "../../validation/Validation";
 
-export default function TelField(name, defaultConfig) {
+export default function TelField(name, props) {
     if(!(this instanceof TelField)) {
-        return new TelField(name, defaultConfig);
+        return new TelField(name, props);
     }
 
-    StringField.call(this, name, 'tel', defaultConfig);
+    StringField.call(this, name, 'tel', props);
 
     Object.assign(this.$description, {
         countryCode: false,
@@ -17,7 +17,7 @@ export default function TelField(name, defaultConfig) {
 TelField.defaultTemplate = null;
 
 TelField.use = function(template) {
-    TelField.defaultTemplate = template.telField;
+    TelField.defaultTemplate = template;
 };
 
 TelField.prototype = Object.create(StringField.prototype);

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

@@ -1,11 +1,11 @@
 import StringField from "./StringField";
 
-export default function TextAreaField(name, defaultConfig) {
+export default function TextAreaField(name, props) {
     if(!(this instanceof TextAreaField)) {
-        return new TextAreaField(name, defaultConfig);
+        return new TextAreaField(name, props);
     }
 
-    StringField.call(this, name, 'textarea', defaultConfig);
+    StringField.call(this, name, 'textarea', props);
 
     Object.assign(this.$description, {
         ...this.$description,
@@ -13,6 +13,7 @@ export default function TextAreaField(name, defaultConfig) {
         cols: null,
         resize: 'vertical',
         autoGrow: false,
+        wordCount: false,
         characterCounter: false,
     });
 }
@@ -20,7 +21,7 @@ export default function TextAreaField(name, defaultConfig) {
 TextAreaField.defaultTemplate = null;
 
 TextAreaField.use = function(template) {
-    TextAreaField.defaultTemplate = template.textareaField;
+    TextAreaField.defaultTemplate = template;
 };
 
 TextAreaField.prototype = Object.create(StringField.prototype);
@@ -52,8 +53,9 @@ TextAreaField.prototype.characterCounter = function(enabled = true) {
 };
 
 TextAreaField.prototype.wordCount = function(min, max, message) {
+    this.$description.wordCount = true;
     this.$description.rules.push({
-        validate: (value) => {
+        fn: (value) => {
             if (!value) return true;
             const words = value.trim().split(/\s+/).length;
             if (min && words < min) return false;

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

@@ -1,23 +1,30 @@
 import Field from "../Field";
 import {Validation} from "../../validation/Validation";
+import BaseComponent from "../../../BaseComponent";
 
-export default function TimeField(name, defaultConfig) {
+export default function TimeField(name, props = {}) {
     if(!(this instanceof TimeField)) {
-        return new TimeField(name, defaultConfig);
+        return new TimeField(name, props);
     }
 
-    Field.call(this, name, 'time', defaultConfig);
+    Field.call(this, name, 'time', props);
 
     Object.assign(this.$description, {
-        format: 'HH:mm',
-        step: null
+        format:         'HH:mm',
+        step:           null,
+        clearable:      false,
+        range:          false,
+        valueStart:     null,
+        valueEnd:       null,
+        rangeSeparator: null,
+        props
     });
 }
 
 TimeField.defaultTemplate = null;
 
 TimeField.use = function(template) {
-    TimeField.defaultTemplate = template.timeField;
+    TimeField.defaultTemplate = template;
 };
 
 TimeField.prototype = Object.create(Field.prototype);
@@ -33,6 +40,45 @@ TimeField.prototype.step = function(seconds) {
     return this;
 };
 
+TimeField.prototype.clearable = function(enabled = true) {
+    this.$description.clearable = BaseComponent.obs(enabled);
+    return this;
+};
+
+TimeField.prototype.range = function(enabled = true) {
+    this.$description.range = BaseComponent.obs(enabled);
+    return this;
+};
+
+TimeField.prototype.modelStart = function(observable) {
+    if(!this.$description.range) {
+        console.warn('TimeField: modelStart is only available in range mode');
+    }
+    this.$description.valueStart = observable;
+    return this;
+};
+
+TimeField.prototype.modelEnd = function(observable) {
+    this.$description.valueEnd = observable;
+    return this;
+};
+
+TimeField.prototype.rangeSeparator = function(sep) {
+    this.$description.rangeSeparator = sep;
+    return this;
+};
+
+TimeField.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+};
+
+TimeField.prototype.onClear = function(handler) {
+    this.on('clear', handler);
+    return this;
+};
+
+// Validation
 TimeField.prototype.min = function(time, message) {
     return this.addRule(Validation.afterTime, [time], message);
 };

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

@@ -1,20 +1,19 @@
 import StringField from "./StringField";
 import {Validation} from "../../validation/Validation";
 
-export default function UrlField(name, defaultConfig) {
+export default function UrlField(name, props) {
     if(!(this instanceof UrlField)) {
-        return new UrlField(name, defaultConfig);
+        return new UrlField(name, props);
     }
-    StringField.call(this, name, 'url', defaultConfig);
+    StringField.call(this, name, 'url', props);
 
-    // Auto-apply url validation
     this.addRule(Validation.url, []);
 }
 
 UrlField.defaultTemplate = null;
 
 UrlField.use = function(template) {
-    UrlField.defaultTemplate = template.urlField;
+    UrlField.defaultTemplate = template;
 };
 
 UrlField.prototype = Object.create(StringField.prototype);

package/src/components/form/field/types/file-field-mode/FileAvatarMode.js

@@ -0,0 +1,104 @@
+import BaseComponent from "../../../../BaseComponent";
+import HasEventEmitter from "../../../../../core/utils/HasEventEmitter";
+
+export default function FileAvatarMode(props = {}) {
+    if(!(this instanceof FileAvatarMode)) {
+        return new FileAvatarMode(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        variant: 'hover-overlay',
+        shape: 'circle',
+        size: 100,
+        placeholderIcon: null,
+        overlayIcon: null,
+        editImageIcon: null,
+        changeLabel: 'Change photo',
+        removeLabel: 'Remove',
+        renderAvatar: null,
+        renderOverlay: null,
+        renderActions: null,
+        props
+    };
+}
+
+BaseComponent.extends(FileAvatarMode);
+BaseComponent.use(FileAvatarMode, HasEventEmitter);
+
+FileAvatarMode.defaultTemplate = null;
+
+FileAvatarMode.use = function(template) {
+    FileAvatarMode.defaultTemplate = template;
+};
+
+FileAvatarMode.prototype.hoverOverlay = function() {
+    this.$description.variant = 'hover-overlay';
+    return this;
+};
+
+FileAvatarMode.prototype.cornerBadge = function() {
+    this.$description.variant = 'corner-badge';
+    return this;
+};
+
+FileAvatarMode.prototype.actionButtons = function() {
+    this.$description.variant = 'action-buttons';
+    return this;
+};
+
+FileAvatarMode.prototype.circle = function() {
+    this.$description.shape = 'circle';
+    return this;
+};
+
+FileAvatarMode.prototype.square = function() {
+    this.$description.shape = 'square';
+    return this;
+};
+
+FileAvatarMode.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+FileAvatarMode.prototype.placeholderIcon = function(icon) {
+    this.$description.placeholderIcon = icon;
+    return this;
+};
+
+FileAvatarMode.prototype.overlayIcon = function(icon) {
+    this.$description.overlayIcon = icon;
+    return this;
+};
+
+FileAvatarMode.prototype.editImageIcon = function(icon) {
+    this.$description.editImageIcon = icon;
+    return this;
+};
+
+FileAvatarMode.prototype.changeLabel = function(label) {
+    this.$description.changeLabel = label;
+    return this;
+};
+
+FileAvatarMode.prototype.removeLabel = function(label) {
+    this.$description.removeLabel = label;
+    return this;
+};
+
+FileAvatarMode.prototype.renderAvatar = function(fn) {
+    this.$description.renderAvatar = fn;
+    return this;
+};
+
+FileAvatarMode.prototype.renderOverlay = function(fn) {
+    this.$description.renderOverlay = fn;
+    return this;
+};
+
+FileAvatarMode.prototype.renderActions = function(fn) {
+    this.$description.renderActions = fn;
+    return this;
+};

package/src/components/form/field/types/file-field-mode/FileDropzoneMode.js

@@ -0,0 +1,59 @@
+import BaseComponent from "../../../../BaseComponent";
+import HasEventEmitter from "../../../../../core/utils/HasEventEmitter";
+
+export default function FileDropzoneMode(props = {}) {
+    if(!(this instanceof FileDropzoneMode)) {
+        return new FileDropzoneMode(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        icon:       null,
+        text:       'Click or drag & drop files here',
+        hint:       null,
+        height:     null,
+        renderZone: null,
+        removeIcon: null,
+        props
+    };
+}
+
+BaseComponent.extends(FileDropzoneMode);
+BaseComponent.use(FileDropzoneMode, HasEventEmitter);
+
+FileDropzoneMode.defaultTemplate = null;
+
+FileDropzoneMode.use = function(template) {
+    FileDropzoneMode.defaultTemplate = template;
+};
+
+FileDropzoneMode.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+FileDropzoneMode.prototype.text = function(text) {
+    this.$description.text = text;
+    return this;
+};
+
+FileDropzoneMode.prototype.hint = function(hint) {
+    this.$description.hint = hint;
+    return this;
+};
+
+FileDropzoneMode.prototype.height = function(value) {
+    this.$description.height = value;
+    return this;
+};
+
+FileDropzoneMode.prototype.renderZone = function(fn) {
+    this.$description.renderZone = fn;
+    return this;
+};
+
+FileDropzoneMode.prototype.removeIcon = function(icon) {
+    this.$description.removeIcon = icon;
+    return this;
+};

package/src/components/form/field/types/file-field-mode/FileItemPreview.js

@@ -0,0 +1,74 @@
+import BaseComponent from "../../../../BaseComponent";
+import HasEventEmitter from "../../../../../core/utils/HasEventEmitter";
+import { $ } from '../../../../../../index';
+
+export default function FileItemPreview(file, props = {}) {
+    if(!(this instanceof FileItemPreview)) {
+        return new FileItemPreview(file, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        file:     file || null,
+        status:   $('idle'),
+        progress: $(0),
+        error:    $(null),
+        props
+    };
+}
+
+BaseComponent.extends(FileItemPreview);
+BaseComponent.use(FileItemPreview, HasEventEmitter);
+
+FileItemPreview.defaultTemplate = null;
+
+FileItemPreview.use = function(template) {
+    FileItemPreview.defaultTemplate = template;
+};
+
+FileItemPreview.prototype.file = function() {
+    return this.$description.file;
+};
+
+FileItemPreview.prototype.status = function(status) {
+    this.$description.status.set(status);
+    return this;
+};
+
+FileItemPreview.prototype.progress = function(value) {
+    this.$description.progress.set(value);
+    return this;
+};
+
+FileItemPreview.prototype.error = function(message) {
+    this.$description.error.set(message);
+    this.$description.status.set('error');
+    return this;
+};
+
+FileItemPreview.prototype.done = function() {
+    this.$description.status.set('done');
+    this.$description.progress.set(100);
+    return this;
+};
+
+FileItemPreview.prototype.uploading = function() {
+    this.$description.status.set('uploading');
+    return this;
+};
+
+FileItemPreview.prototype.onClick = function(handler) {
+    this.on('click', handler);
+    return this;
+};
+
+FileItemPreview.prototype.onRemove = function(handler) {
+    this.on('remove', handler);
+    return this;
+};
+
+FileItemPreview.prototype.onReplace = function(handler) {
+    this.on('replace', handler);
+    return this;
+};

package/src/components/form/field/types/file-field-mode/FileNativeMode.js

@@ -0,0 +1,21 @@
+import BaseComponent from "../../../../BaseComponent";
+
+export default function FileNativeMode(props = {}) {
+    if(!(this instanceof FileNativeMode)) {
+        return new FileNativeMode(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        props
+    };
+}
+
+BaseComponent.extends(FileNativeMode);
+
+FileNativeMode.defaultTemplate = null;
+
+FileNativeMode.use = function(template) {
+    FileNativeMode.defaultTemplate = template;
+};

package/src/components/form/field/types/file-field-mode/FileUploadButtonMode.js

@@ -0,0 +1,59 @@
+import BaseComponent from "../../../../BaseComponent";
+import HasEventEmitter from "../../../../../core/utils/HasEventEmitter";
+
+export default function FileUploadButtonMode(props = {}) {
+    if(!(this instanceof FileUploadButtonMode)) {
+        return new FileUploadButtonMode(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        buttonLabel:  'Add file',
+        buttonIcon:   null,
+        showProgress: true,
+        renderItem:   null,
+        renderButton: null,
+        renderList:   null,
+        props
+    };
+}
+
+BaseComponent.extends(FileUploadButtonMode);
+BaseComponent.use(FileUploadButtonMode, HasEventEmitter);
+
+FileUploadButtonMode.defaultTemplate = null;
+
+FileUploadButtonMode.use = function(template) {
+    FileUploadButtonMode.defaultTemplate = template;
+};
+
+FileUploadButtonMode.prototype.buttonLabel = function(label) {
+    this.$description.buttonLabel = label;
+    return this;
+};
+
+FileUploadButtonMode.prototype.buttonIcon = function(icon) {
+    this.$description.buttonIcon = icon;
+    return this;
+};
+
+FileUploadButtonMode.prototype.showProgress = function(enabled = true) {
+    this.$description.showProgress = enabled;
+    return this;
+};
+
+FileUploadButtonMode.prototype.renderItem = function(fn) {
+    this.$description.renderItem = fn;
+    return this;
+};
+
+FileUploadButtonMode.prototype.renderButton = function(fn) {
+    this.$description.renderButton = fn;
+    return this;
+};
+
+FileUploadButtonMode.prototype.renderList = function(fn) {
+    this.$description.renderList = fn;
+    return this;
+};

package/src/components/form/field/types/file-field-mode/FileWallMode.js

@@ -0,0 +1,53 @@
+import BaseComponent from "../../../../BaseComponent";
+import HasEventEmitter from "../../../../../core/utils/HasEventEmitter";
+
+export default function FileWallMode(props = {}) {
+    if(!(this instanceof FileWallMode)) {
+        return new FileWallMode(props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        cellSize:   96,
+        addLabel:   'Upload',
+        addIcon:    null,
+        renderCell: null,
+        renderAdd:  null,
+        props
+    };
+}
+
+BaseComponent.extends(FileWallMode);
+BaseComponent.use(FileWallMode, HasEventEmitter);
+
+FileWallMode.defaultTemplate = null;
+
+FileWallMode.use = function(template) {
+    FileWallMode.defaultTemplate = template;
+};
+
+FileWallMode.prototype.cellSize = function(size) {
+    this.$description.cellSize = size;
+    return this;
+};
+
+FileWallMode.prototype.addLabel = function(label) {
+    this.$description.addLabel = label;
+    return this;
+};
+
+FileWallMode.prototype.addIcon = function(icon) {
+    this.$description.addIcon = icon;
+    return this;
+};
+
+FileWallMode.prototype.renderCell = function(fn) {
+    this.$description.renderCell = fn;
+    return this;
+};
+
+FileWallMode.prototype.renderAdd = function(fn) {
+    this.$description.renderAdd = fn;
+    return this;
+};