native-document 1.0.76 → 1.0.78

package/src/components/divider/Divider.js

@@ -0,0 +1,126 @@
+import BaseComponent from "../BaseComponent";
+
+export default function Divider(config = {}) {
+    if(!(this instanceof Divider)) {
+        return new Divider(config);
+    }
+
+    this.$description = {
+        orientation: 'horizontal',
+        variant: 'solid',
+        thickness: null,
+        spacing: null,
+        label: null,
+        labelPosition: 'center',
+        color: null,
+        render: null,
+        inset: null,
+        indent: null,
+        leading: null,
+        trailing: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Divider);
+
+Divider.defaultTemplate = null;
+
+Divider.use = function(template) {
+    Divider.defaultTemplate = template.divider;
+};
+
+Divider.prototype.orientation = function(orientation) {
+    this.$description.orientation = orientation;
+    return this;
+};
+
+Divider.prototype.horizontal = function() {
+    this.$description.orientation = 'horizontal';
+    return this;
+};
+
+Divider.prototype.vertical = function() {
+    this.$description.orientation = 'vertical';
+    return this;
+};
+
+Divider.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+Divider.prototype.solid = function() {
+    this.$description.variant = 'solid';
+    return this;
+};
+
+Divider.prototype.dashed = function() {
+    this.$description.variant = 'dashed';
+    return this;
+};
+
+Divider.prototype.dotted = function() {
+    this.$description.variant = 'dotted';
+    return this;
+};
+
+Divider.prototype.thickness = function(thickness) {
+    this.$description.thickness = thickness;
+    return this;
+};
+
+Divider.prototype.spacing = function(spacing) {
+    this.$description.spacing = spacing;
+    return this;
+};
+
+Divider.prototype.inset = function(inset) {
+    this.$description.inset = inset;
+    return this;
+};
+Divider.prototype.leading = function(leading) {
+    this.$description.leading = leading;
+    return this;
+};
+
+Divider.prototype.trailing = function(trailing) {
+    this.$description.trailing = trailing;
+    return this;
+}
+
+Divider.prototype.indent = function(leading, trailing) {
+    this.leading(leading);
+    this.trailing(trailing);
+    return this;
+};
+
+Divider.prototype.label = function(label) {
+    this.$description.label = label;
+    return this;
+};
+
+Divider.prototype.labelPosition = function(position) {
+    this.$description.labelPosition = position;
+    return this;
+};
+
+Divider.prototype.labelAtLeading = function() {
+    this.$description.labelPosition = 'leading';
+    return this;
+};
+
+Divider.prototype.labelAtCenter = function() {
+    this.$description.labelPosition = 'center';
+    return this;
+};
+
+Divider.prototype.labelAtTrailing = function() {
+    this.$description.labelPosition = 'trailing';
+    return this;
+};
+
+Divider.prototype.color = function(color) {
+    this.$description.color = color;
+    return this;
+};

package/src/components/divider/index.js

@@ -0,0 +1,6 @@
+import Divider from "./Divider";
+
+
+export {
+    Divider
+}

package/src/components/dropdown/Dropdown.js

@@ -0,0 +1,170 @@
+import BaseComponent from "../BaseComponent";
+import EventEmitter from "../../../src/core/utils/EventEmitter";
+import DropdownGroup from "./DropdownGroup";
+import DropdownTrigger from "./DropdownTrigger";
+import DropdownDivider from "./DropdownDivider";
+
+export default function Dropdown(config = {}) {
+    if (!(this instanceof Dropdown)) {
+        return new Dropdown(config);
+    }
+
+    this.$description = {
+        trigger: null,
+        items: [],
+        position: 'bottom-start',
+        offset: [0, 4],
+        disabled: false,
+        closeOnSelect: true,
+        closeOnClickOutside: true,
+        closeOnEscape: true,
+        isOpen: $(false),
+        maxHeight: null,
+        searchable: false,
+        searchPlaceholder: 'Search...',
+        loopOnKeyboard: true,
+        renderTrigger: null,
+        renderItem: null,
+        renderDivider: null,
+        renderHeader: null,
+        renderFooter: null,
+        render: null,
+        ...config,
+    };
+
+    this.$element = null;
+}
+
+BaseComponent.extends(Dropdown, EventEmitter);
+
+
+Dropdown.defaultTemplate = null;
+
+Dropdown.use = function(template) {
+    Dropdown.defaultTemplate = template.render;
+};
+
+Dropdown.prototype.value = function(value) {
+    this.$description.value = value;
+    return this;
+};
+
+Dropdown.prototype.placeholder = function(placeholder) {
+    this.$description.placeholder = placeholder;
+    return this;
+};
+
+Dropdown.prototype.searchable = function(searchable, placeholder = null) {
+    this.$description.searchable = searchable;
+    if (placeholder) {
+        this.$description.searchPlaceholder = placeholder;
+    }
+    return this;
+};
+
+Dropdown.prototype.searchPlaceholder = function(placeholder) {
+    this.$description.searchPlaceholder = placeholder;
+    return this;
+};
+
+Dropdown.prototype.closeOnClickOutside = function(closeOnClickOutside) {
+    this.$description.closeOnClickOutside = closeOnClickOutside;
+    return this;
+};
+
+Dropdown.prototype.closeOnEscape = function(closeOnEscape) {
+    this.$description.closeOnEscape = closeOnEscape;
+    return this;
+};
+
+Dropdown.prototype.closeOnSelect = function(closeOnSelect) {
+    this.$description.closeOnSelect = closeOnSelect;
+    return this;
+};
+
+Dropdown.prototype.maxHeight = function(maxHeight) {
+    this.$description.maxHeight = maxHeight;
+    return this;
+};
+
+Dropdown.prototype.trigger = function(trigger) {
+    if (trigger instanceof DropdownTrigger) {
+        trigger.setIsOpen(this.$description.isOpen);
+        this.$description.trigger = trigger;
+        return this;
+    }
+
+    this.$description.trigger = trigger;
+    return this;
+};
+
+Dropdown.prototype.add = function(item) {
+    this.$description.items.push(item);
+    return this;
+};
+Dropdown.prototype.item = Dropdown.prototype.add;
+
+Dropdown.prototype.items = function(items) {
+    for(const item of items) {
+        this.add(item);
+    }
+    return this;
+};
+
+Dropdown.prototype.group = function(groupBuilder) {
+    const group = new DropdownGroup();
+    groupBuilder && groupBuilder(group);
+    this.$description.items.push(group);
+    return this;
+};
+
+Dropdown.prototype.divider = function() {
+    this.$description.items.push(new DropdownDivider());
+    return this;
+};
+
+Dropdown.prototype.select = function(value) {
+    this.$description.value?.set(value);
+};
+
+Dropdown.prototype.next = function() {
+
+};
+
+Dropdown.prototype.preview = function() {
+
+};
+Dropdown.prototype.loopOnKeyboard = function(loopOnKeyboard) {
+    this.$description.loopOnKeyboard = loopOnKeyboard;
+    return this;
+};
+
+Dropdown.prototype.onChange= function(handler) {
+    this.on('change', handler);
+    return this;
+};
+
+Dropdown.prototype.renderTrigger = function(renderFn) {
+    this.$description.renderTrigger = renderFn;
+    return this;
+};
+
+Dropdown.prototype.renderSearch = function(renderFn) {
+    this.$description.renderSearch = renderFn;
+    return this;
+};
+
+Dropdown.prototype.renderItem = function(renderFn) {
+    this.$description.renderItem = renderFn;
+    return this;
+};
+
+Dropdown.prototype.renderMenu = function(renderFn) {
+    this.$description.renderMenu = renderFn;
+    return this;
+};
+
+Dropdown.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/dropdown/DropdownDivider.js

@@ -0,0 +1,24 @@
+import BaseComponent from "../BaseComponent";
+
+export default function DropdownDivider() {
+    if(!(this instanceof DropdownDivider)) {
+        return new DropdownDivider();
+    }
+    this.$description  = {
+        type: 'divider'
+    };
+}
+
+BaseComponent.extends(DropdownDivider);
+
+DropdownDivider.defaultTemplate = null;
+
+DropdownDivider.use = function(template) {
+    DropdownDivider.defaultTemplate = template.divider;
+};
+
+
+DropdownDivider.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/dropdown/DropdownGroup.js

@@ -0,0 +1,44 @@
+import DropdownItem from "./DropdownItem";
+import BaseComponent from "../BaseComponent";
+import DropdownDivider from "./DropdownDivider";
+
+
+export default function DropdownGroup(config) {
+    if(!(this instanceof DropdownGroup)) {
+        return new DropdownGroup(config);
+    }
+
+    DropdownItem.call(this, config);
+
+    Object.assign(this.$description, {
+        renderItem: config.renderItem || null,
+        items: config.items || []
+    });
+}
+
+BaseComponent.extends(DropdownGroup, DropdownItem);
+
+DropdownGroup.prototype.group = function(groupBuilder) {
+    const item = new DropdownGroup();
+    groupBuilder && groupBuilder(item);
+    this.$description.items.push(item);
+    return this;
+};
+
+DropdownGroup.prototype.divider = function() {
+    this.$description.items.push(new DropdownDivider());
+    return this;
+};
+
+DropdownGroup.prototype.renderItem = function(renderFn) {
+    this.$description.renderItem = renderFn;
+};
+
+
+DropdownGroup.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+};
+
+DropdownGroup.prototype.toNdElement = function() {
+
+};

package/src/components/dropdown/DropdownItem.js

@@ -0,0 +1,71 @@
+import BaseComponent from "../BaseComponent";
+
+
+export default function DropdownItem(config = {}) {
+    if(!(this instanceof DropdownItem)) {
+        return new DropdownItem(config);
+    }
+    this.$description = {
+        icon: null,
+        content: null,
+        shortcuts: null,
+        value: null,
+        disabled: false,
+        data: null,
+        render: null,
+        ...config
+    };
+};
+
+BaseComponent.extends(DropdownItem);
+
+DropdownItem.prototype.value = function(value) {
+    this.$description.value = value;
+    return this;
+};
+
+DropdownItem.prototype.getValue = function() {
+    return this.$description.value;
+};
+
+DropdownItem.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = disabled;
+    return this;
+};
+
+DropdownItem.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+DropdownItem.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+DropdownItem.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+DropdownItem.prototype.getData = function() {
+    return this.$description.data;
+};
+
+DropdownItem.prototype.shortcuts = function(shortcuts) {
+    this.$description.shortcuts = shortcuts;
+    return this;
+};
+
+DropdownItem.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+DropdownItem.prototype.$build = function() {
+
+};
+
+DropdownItem.prototype.toNdElement = function() {
+
+};

package/src/components/dropdown/DropdownTrigger.js

@@ -0,0 +1,64 @@
+import BaseComponent from "../BaseComponent";
+
+export default function DropdownTrigger(config) {
+    if(!(this instanceof DropdownTrigger)) {
+        return new DropdownTrigger(config);
+    }
+    this.$description = {
+        icon: null,
+        content: null,
+        stateOpenIcon: null,
+        render: null,
+        isOpen: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(DropdownTrigger);
+
+DropdownTrigger.defaultTemplate = null;
+
+DropdownTrigger.use = function(template) {
+
+};
+
+DropdownTrigger.prototype.setIsOpen = function(isOpenObservable) {
+    this.$description.isOpen = isOpenObservable;
+    return this;
+};
+
+
+DropdownTrigger.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+DropdownTrigger.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+DropdownTrigger.prototype.stateOpenIcon = function(openIcon) {
+    this.$description.stateOpenIcon = openIcon;
+    return this;
+};
+
+DropdownTrigger.prototype.stateClosedIcon = function(closedIcon) {
+    this.$description.stateClosedIcon = closedIcon;
+    return this;
+};
+
+
+DropdownTrigger.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+}
+
+
+DropdownTrigger.prototype.$build = function() {
+
+};
+
+DropdownTrigger.prototype.toNdElement = function() {
+
+};

package/src/components/dropdown/index.js

@@ -0,0 +1,13 @@
+import DropdownDivider from "./DropdownDivider";
+import Dropdown from "./Dropdown";
+import DropdownGroup from "./DropdownGroup";
+import DropdownItem from "./DropdownItem";
+import DropdownTrigger from "./DropdownTrigger";
+
+export {
+    Dropdown,
+    DropdownDivider,
+    DropdownGroup,
+    DropdownItem,
+    DropdownTrigger
+};

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

@@ -1,14 +1,17 @@
 import {debounce} from "../../core/utils/helpers";
-import EventEmitter from "../../core/utils/EventEmitter";
+import EventEmitter from "../../../src/core/utils/EventEmitter";
 import {Validator, Observable as $ } from "../../../index";
-import NativeDocumentError from "../../core/errors/NativeDocumentError";
-import DefaultLayout from "./default/DefaultLayout";
+import NativeDocumentError from "../../../src/core/errors/NativeDocumentError";
+import BaseComponent from "../BaseComponent";
 
 /**
  * @param { {data: Observable } } configs
  * @constructor
  */
 export default function FormControl(configs) {
+    if(!(this instanceof FormControl)) {
+        return new FormControl(configs);
+    }
     EventEmitter.call(this);
 
     this.$element = null;
@@ -20,12 +23,17 @@ export default function FormControl(configs) {
     this.$isValid = $(false);
 }
 
+FormControl.defaultLayoutTemplate = null;
+
+FormControl.use = function(template) {
+    FormControl.defaultLayoutTemplate = template.formControl;
+};
+
 FormControl.create = function (configs) {
     return new FormControl(configs);
 };
 
-FormControl.prototype = Object.create(EventEmitter.prototype);
-FormControl.prototype.constructor = FormControl;
+BaseComponent.extends(FormControl, EventEmitter);
 
 Object.defineProperty(FormControl.prototype, 'isDirty', {
     get() { return this.$isDirty; }
@@ -53,21 +61,21 @@ FormControl.prototype.field = function(field) {
     this.$fields.set(name, field);
 
     const dataSource = this.$configs?.data?.[name];
-    if(dataSource) {
-        if(typeof field.checked === 'function') {
-            field.checked(dataSource)
-        }
-        else field.value(dataSource);
+    if(!dataSource) {
+        return this;
     }
 
-    const value = field.$description.value || field.$description.checked;
-
-    if(Validator.isObservable(value)) {
-        value.subscribe(() => {
+    if(Validator.isObservable(dataSource)) {
+        field.model(dataSource);
+        dataSource.subscribe(() => {
             this.$isDirty.set(true);
-            this.emit('change', name, value, field);
+            this.emit('change', name, dataSource, field);
         });
+        return this;
     }
+
+    field.value(dataSource);
+
     return this;
 };
 
@@ -145,7 +153,7 @@ FormControl.prototype.enable = function() {
 FormControl.prototype.values = function() {
     const values = {};
     for(const [_, field] of this.$fields) {
-        values[field.$description.name] = field.getValue();
+        values[field.$description.name] = field.value();
     }
     return values;
 };
@@ -223,13 +231,13 @@ FormControl.prototype.onValidationError = function(callback) {
 };
 
 
-FormControl.prototype.toNdElement = function() {
+FormControl.prototype.$build = function() {
     const fieldsObject = {};
     for (const [name, field] of this.$fields) {
         fieldsObject[name] = field;
     }
 
-    const layoutFn = this.$layout || DefaultLayout;
+    const layoutFn = this.$layout || FormControl.defaultLayoutTemplate;
 
     const form = layoutFn({
         fields: fieldsObject,
@@ -242,6 +250,6 @@ FormControl.prototype.toNdElement = function() {
     form.nd.onSubmit(async function(event) {
         return await self.$handleSubmit(event);
     });
-    this.$element = form;
-    return this.$element;
+
+    return form;
 };

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

@@ -1,22 +1,8 @@
-import {Input, Label, Select, ShowIf, Switch} from "../../../core/elements/index";
+import {Input, Label, Select} from "../../../../elements";
 import { $ } from "../../../../index";
 
 
-const ErrorDisplayer = (errors) => {
 
-    const shouldDisplayError = $.computed(() => {
-        const val = errors.val();
-        return (val && val.length > 0);
-    }, [errors]);
-
-    return ShowIf(shouldDisplayError, () => {
-            const val = errors.val();
-            if(typeof val === 'string') return Div({ class: 'form-control-error' }, val);
-            return Div({ class: 'form-control-error' },
-                val.map(error => Div({ class: 'form-control-error-item' }, error))
-            );
-        });
-}
 
 export default function DefaultRender(field) {
     const description = field?.toJSON();