native-document 1.0.76 → 1.0.78

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

@@ -1,14 +1,27 @@
 import Field from "../Field";
+import {Validator} from "../../../../../index";
+import CheckboxField from "./CheckboxField";
+
+export default function RadioField(name, options, defaultConfig = {}) {
+    if(!(this instanceof RadioField)) {
+        return new RadioField(name, defaultConfig);
+    }
 
-export default function RadioField(name, options, defaultConfig) {
     Field.call(this, name, 'radio', defaultConfig);
 
     Object.assign(this.$description, {
         options: options || [],
-        layout: 'vertical'
+        layout: 'vertical' || defaultConfig?.layout,
+        checked: false
     });
 }
 
+RadioField.defaultTemplate = null;
+
+RadioField.use = function(template) {
+    RadioField.defaultTemplate = template.radioField;
+};
+
 RadioField.prototype = Object.create(Field.prototype);
 RadioField.prototype.constructor = RadioField;
 
@@ -17,6 +30,19 @@ RadioField.prototype.options = function(opts) {
     return this;
 };
 
+RadioField.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;
+};
+
 RadioField.prototype.layout = function(value) {
     const allowedLayouts = ['vertical', 'horizontal', 'grid'];
 

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

@@ -1,6 +1,10 @@
 import NumberField from "./NumberField";
 
 export default function RangeField(name, defaultConfig) {
+    if(!(this instanceof RangeField)) {
+        return new RangeField(name, defaultConfig);
+    }
+
     NumberField.call(this, name, 'range', defaultConfig);
 
     Object.assign(this.$description, {
@@ -8,6 +12,12 @@ export default function RangeField(name, defaultConfig) {
     });
 }
 
+RangeField.defaultTemplate = null;
+
+RangeField.use = function(template) {
+    RangeField.defaultTemplate = template.rangeField;
+};
+
 RangeField.prototype = Object.create(NumberField.prototype);
 RangeField.prototype.constructor = RangeField;
 

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

@@ -1,6 +1,10 @@
 import StringField from "./StringField";
 
 export default function SearchField(name, defaultConfig) {
+    if(!(this instanceof SearchField)) {
+        return new SearchField(name, defaultConfig);
+    }
+
     StringField.call(this, name, 'search', defaultConfig);
 
     Object.assign(this.$description, {
@@ -8,6 +12,12 @@ export default function SearchField(name, defaultConfig) {
     });
 }
 
+SearchField.defaultTemplate = null;
+
+SearchField.use = function(template) {
+    SearchField.defaultTemplate = template.searchField;
+};
+
 SearchField.prototype = Object.create(StringField.prototype);
 SearchField.prototype.constructor = SearchField;
 

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

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

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

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

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

@@ -1,8 +1,11 @@
-// TelField.js
 import StringField from "./StringField";
 import {Validation} from "../../validation/Validation";
 
 export default function TelField(name, defaultConfig) {
+    if(!(this instanceof TelField)) {
+        return new TelField(name, defaultConfig);
+    }
+
     StringField.call(this, name, 'tel', defaultConfig);
 
     Object.assign(this.$description, {
@@ -11,6 +14,12 @@ export default function TelField(name, defaultConfig) {
     });
 }
 
+TelField.defaultTemplate = null;
+
+TelField.use = function(template) {
+    TelField.defaultTemplate = template.telField;
+};
+
 TelField.prototype = Object.create(StringField.prototype);
 TelField.prototype.constructor = TelField;
 

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

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

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

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

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

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

package/src/components/form/index.js

@@ -0,0 +1,49 @@
+import Field from "./field/Field";
+import FormControl from "./FormControl";
+import StringField from "./field/types/StringField";
+import EmailField from "./field/types/EmailField";
+import PasswordField from "./field/types/PasswordField";
+import NumberField from "./field/types/NumberField";
+import TextAreaField from "./field/types/TextAreaField";
+import CheckboxField from "./field/types/CheckboxField";
+import RadioField from "./field/types/RadioField";
+import SelectField from "./field/types/SelectField";
+import HiddenField from "./field/types/HiddenField";
+import FileField from "./field/types/FileField";
+import DateField from "./field/types/DateField";
+import TimeField from "./field/types/TimeField";
+import TelField from "./field/types/TelField";
+import UrlField from "./field/types/UrlField";
+import ColorField from "./field/types/ColorField";
+import RangeField from "./field/types/RangeField";
+import ImageField from "./field/types/ImageField";
+import CheckboxGroupField from "./field/types/CheckboxGroupField";
+import AutocompleteField from "./field/types/AutocompleteField";
+import FieldCollection from "./field/FieldCollection";
+
+import './field/FieldFactory';
+
+export {
+    Field,
+    FormControl,
+    StringField,
+    EmailField,
+    PasswordField,
+    NumberField,
+    TextAreaField,
+    CheckboxField,
+    RadioField,
+    SelectField,
+    HiddenField,
+    FileField,
+    DateField,
+    TimeField,
+    TelField,
+    UrlField,
+    ColorField,
+    RangeField,
+    ImageField,
+    CheckboxGroupField,
+    AutocompleteField,
+    FieldCollection
+}

package/src/components/list/List.js

@@ -0,0 +1,106 @@
+
+import BaseComponent from "../BaseComponent";
+import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasItems from "../$traits/HasItems";
+import Dropdown from "../dropdown/Dropdown";
+
+export default function List(config = {}) {
+    if(!(this instanceof List)) {
+        return new List(config);
+    }
+
+    this.$description = {
+        selectable: false,
+        multiSelect: false,
+        selectedValues: null,
+        inset: false,
+        divider: false,
+        data: null,
+        render: null,
+        selectByCheckbox: false,
+        selectByClick: false,
+        loopOnKeyboard: true,
+        ...config
+    };
+
+}
+
+List.defaultTemplate = null;
+
+List.use = function(template) {
+    List.defaultTemplate = template.list;
+};
+
+BaseComponent.extends(List, HasItems, EventEmitter);
+
+List.defaultTemplate = null;
+
+List.use = function(template) {
+    List.defaultTemplate = template.list;
+};
+
+List.prototype.selectable = function(selectable = true) {
+    this.$description.selectable = selectable;
+    return this;
+};
+
+List.prototype.selectByClick = function() {
+    this.$description.selectByClick = true;
+    this.$description.selectByCheckbox = false;
+};
+List.prototype.selectByCheckbox = function() {
+    this.$description.selectByClick = false;
+    this.$description.selectByCheckbox = true;
+};
+
+List.prototype.multiSelect = function(multi = true) {
+    this.$description.multiSelect = multi;
+    this.$description.selectable = true;
+    return this;
+};
+
+List.prototype.selectedValuesModel = function(observable) {
+    this.$description.selectedValues = observable;
+    return this;
+};
+
+List.prototype.inset = function(inset = true) {
+    this.$description.inset = inset;
+    return this;
+};
+
+Dropdown.prototype.next = function() {
+
+};
+
+Dropdown.prototype.preview = function() {
+
+};
+Dropdown.prototype.loopOnKeyboard = function(loopOnKeyboard) {
+    this.$description.loopOnKeyboard = loopOnKeyboard;
+    return this;
+};
+
+List.prototype.withDivider = function(divider = true) {
+    this.$description.divider = divider;
+    return this;
+};
+
+List.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+List.prototype.onItemClick = function(handler) {
+    this.on('itemClick', handler);
+    return this;
+};
+
+List.prototype.onItemSelect = function(handler) {
+    this.on('itemSelect', handler);
+    return this;
+};
+
+List.prototype.$build = function() {
+
+};

package/src/components/list/ListGroup.js

@@ -0,0 +1,67 @@
+import BaseComponent from "../BaseComponent";
+import HasItems from "../$traits/HasItems";
+
+export default function ListGroup(label, config = {}) {
+    if(!(this instanceof ListGroup)) {
+        return new ListGroup(label, config);
+    }
+
+    this.$description = {
+        header: label || null,
+        footer: null,
+        items: [],
+        inset: false,
+        data: null,
+        renderHeader: null,
+        renderFooter: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(ListGroup, HasItems);
+
+ListGroup.defaultTemplate = null;
+
+ListGroup.use = function(template) {
+    ListGroup.defaultTemplate = template.listGroup;
+};
+
+ListGroup.prototype.header = function(header) {
+    this.$description.header = header;
+    return this;
+};
+
+ListGroup.prototype.title = function(title) {
+    return this.header(title);
+};
+
+ListGroup.prototype.footer = function(footer) {
+    this.$description.footer = footer;
+    return this;
+};
+
+ListGroup.prototype.inset = function(inset = true) {
+    this.$description.inset = inset;
+    return this;
+};
+
+ListGroup.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+ListGroup.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+
+ListGroup.prototype.renderFooter = function(renderFn) {
+    this.$description.renderFooter = renderFn;
+    return this;
+};
+
+
+ListGroup.prototype.$build = function() {
+
+};

package/src/components/list/ListItem.js

@@ -0,0 +1,103 @@
+import BaseComponent from "../BaseComponent";
+import {Validator} from "../../../index";
+
+export default function ListItem(content, config = {}) {
+    if(!(this instanceof ListItem)) {
+        return new ListItem(content, config);
+    }
+
+    this.$description = {
+        content: content || null,
+        icon: null,
+        trailing: null,
+        leading: null,
+        disabled: false,
+        selectable: false,
+        selected: false,
+        divider: false,
+        data: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(ListItem);
+
+ListItem.defaultTemplate = null;
+
+ListItem.use = function(template) {
+    ListItem.defaultTemplate = template.listItem;
+};
+
+ListItem.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+ListItem.prototype.label = function(label) {
+    this.$description.content = label;
+    return this;
+};
+
+ListItem.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+ListItem.prototype.leading = function(leading) {
+    this.$description.leading = leading;
+    return this;
+};
+
+ListItem.prototype.trailing = function(trailing) {
+    this.$description.trailing = trailing;
+    return this;
+};
+
+ListItem.prototype.leading = function(leading) {
+    this.$description.leading = leading;
+    return this;
+};
+
+ListItem.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = disabled;
+    return this;
+};
+
+ListItem.prototype.selectable = function() {
+    this.$description.selectable = true;
+    if(Validator.isObservable(this.$description.selected)) {
+        return this;
+    }
+    this.$description.selected = $(false);
+    return this;
+};
+
+ListItem.prototype.selected = function(selected = true) {
+    if(Validator.isObservable(this.$description.selected)) {
+        this.$description.selected.set(selected);
+        return this;
+    }
+    this.$description.selected = selected;
+    return this;
+};
+
+ListItem.prototype.divider = function(show = true) {
+    this.$description.divider = show;
+    return this;
+};
+
+ListItem.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+ListItem.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+
+ListItem.prototype.$build = function() {
+
+};

package/src/components/list/index.js

@@ -0,0 +1,10 @@
+import List from "./List";
+import ListItem from "./ListItem";
+import ListGroup from "./ListGroup";
+
+
+export default {
+    List,
+    ListItem,
+    ListGroup
+}

package/src/components/menu/Menu.js

@@ -0,0 +1,82 @@
+import BaseComponent from "../BaseComponent";
+import EventEmitter from "../../../src/core/utils/EventEmitter";
+import HasItems from "../$traits/HasItems";
+import MenuDivider from "./MenuDivider";
+import MenuGroup from "./MenuGroup";
+
+export default function Menu(config = {}) {
+
+    if(!(this instanceof Menu)) {
+        return new Menu(config)
+    }
+
+    this.$description = {
+        items: [],
+        render: null,
+        orientation: 'horizontal',
+        closeOnSelect: true,
+        keyboardLoop: true,
+        ...config
+    };
+
+}
+
+BaseComponent.extends(Menu, HasItems, EventEmitter);
+
+Menu.defaultTemplate = null;
+
+Menu.use = function(template) {
+    Menu.defaultTemplate = template.menu;
+};
+
+Menu.prototype.orientation = function(orientation) {
+    this.$description.orientation = orientation;
+    return this;
+};
+
+Menu.prototype.horizontal = function() {
+    this.$description.orientation = 'horizontal';
+    return this;
+};
+
+Menu.prototype.vertical = function() {
+    this.$description.orientation = 'vertical';
+    return this;
+};
+
+Menu.prototype.closeOnSelect = function(close = true) {
+    this.$description.closeOnSelect = close;
+    return this;
+};
+
+Menu.prototype.keyboardLoop = function(keyboardLoop = true) {
+    this.$description.keyboardLoop = keyboardLoop;
+    return this;
+};
+
+Menu.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+Menu.prototype.onItemClick = function(handler) {
+    this.on('itemClick', handler);
+    return this;
+};
+
+Menu.prototype.onItemSelect = function(handler) {
+    this.on('itemSelect', handler);
+    return this;
+};
+
+
+
+Menu.prototype.divider = function() {
+    return this.item(new MenuDivider());
+};
+
+Menu.prototype.group = function(label, builder) {
+    const group = new MenuGroup(label);
+    builder && builder(group);
+    return this.item(group);
+};

package/src/components/menu/MenuDivider.js

@@ -0,0 +1,22 @@
+import BaseComponent from "../BaseComponent";
+
+
+export default function MenuDivider() {
+    if(!this instanceof MenuDivider) {
+        return new MenuDivider();
+    }
+
+}
+
+BaseComponent.extends(MenuDivider);
+
+
+MenuDivider.defaultTemplate = null;
+
+MenuDivider.use = function(template) {
+    MenuDivider.defaultTemplate = template.divider;
+};
+
+MenuDivider.prototype.$build = function() {
+
+};