native-document 1.0.138 → 1.0.140

package/src/components/form/index.js

@@ -20,8 +20,13 @@ import ImageField from "./field/types/ImageField";
 import CheckboxGroupField from "./field/types/CheckboxGroupField";
 import AutocompleteField from "./field/types/AutocompleteField";
 import FieldCollection from "./field/FieldCollection";
+import FileNativeMode from "./field/types/file-field-mode/FileNativeMode";
+import FileDropzoneMode from "./field/types/file-field-mode/FileDropzoneMode";
+import FileUploadButtonMode from "./field/types/file-field-mode/FileUploadButtonMode";
+import FileWallMode from "./field/types/file-field-mode/FileWallMode";
+import FileAvatarMode from "./field/types/file-field-mode/FileAvatarMode";
 
-import './field/FieldFactory';
+// import './field/FieldFactory';
 
 export {
     Field,
@@ -45,5 +50,12 @@ export {
     ImageField,
     CheckboxGroupField,
     AutocompleteField,
-    FieldCollection
+    FieldCollection,
+
+    FileNativeMode,
+    FileAvatarMode,
+    FileWallMode,
+    FileUploadButtonMode,
+    FileDropzoneMode,
+
 }

package/src/components/form/validation/Validation.js

@@ -288,6 +288,15 @@ export const Validation = {
             message: `Date must be between ${start.toLocaleDateString()} and ${end.toLocaleDateString()}`
         };
     },
+    weekday(value) {
+        if(!value) return {valid: true};
+        const day = new Date(value).getDay();
+        const valid = day !== 0 && day !== 6;
+        return {
+            valid,
+            message: 'Date must be a weekday'
+        };
+    },
 
     afterTime(value, afterTime) {
         if (!value) return { valid: true };

package/src/components/list/List.js

@@ -1,7 +1,7 @@
 
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
-import HasItems from "../$traits/HasItems";
+import HasItems from "../$traits/has-items/HasItems";
 import Dropdown from "../dropdown/Dropdown";
 
 export default function List(config = {}) {

package/src/components/list/ListGroup.js

@@ -1,5 +1,5 @@
 import BaseComponent from "../BaseComponent";
-import HasItems from "../$traits/HasItems";
+import HasItems from "../$traits/has-items/HasItems";
 
 export default function ListGroup(label, config = {}) {
     if(!(this instanceof ListGroup)) {

package/src/components/menu/HasMenuItem.js

@@ -0,0 +1,133 @@
+import MenuDivider from "./MenuDivider";
+
+const EMPTY_OPTIONS = {};
+
+export default function HasMenuItem() {}
+
+HasMenuItem.prototype.setParent = function(parent) {
+    this.$parent = parent;
+    return this;
+};
+
+HasMenuItem.components = {
+    MenuItem: null,
+    MenuLink: null
+};
+
+const getParams = (options, configBuilder, props) => {
+    if(!options && !configBuilder && !props)  {
+        return { options: EMPTY_OPTIONS, configBuilder: null, props: null };
+    }
+
+    if(typeof options === 'function') {
+        props = configBuilder || EMPTY_OPTIONS;
+        configBuilder = options;
+        options = EMPTY_OPTIONS;
+    }
+
+    return { options, configBuilder, props }
+}
+
+HasMenuItem.prototype.link = function(label, ...args) {
+    const { options, configBuilder, props } = getParams(...args);
+    const MenuLink = HasMenuItem.components.MenuLink;
+    const item = MenuLink(props);
+    this.add(item);
+
+    item.icon(options.icon)
+        .label(label)
+        .action(options.href)
+        .shortcut(options.shortcut)
+        .target(options.target);
+    if(options.disabled !== undefined) {
+        item.disabled(options.disabled);
+    }
+    if(typeof configBuilder === 'function') {
+        configBuilder(item);
+    }
+    return this;
+};
+
+HasMenuItem.prototype.linkTo = function(label, ...args) {
+    const { options, configBuilder, props } = getParams(...args);
+    return this.link(label, { ...options, href: {isRoute: true, to: options.href} }, configBuilder, props);
+};
+
+
+
+HasMenuItem.prototype.item = function(label, ...args) {
+    const { options, configBuilder, props } = getParams(...args);
+    const MenuItem = HasMenuItem.components.MenuItem;
+    const item = MenuItem(props);
+    this.add(item);
+
+    item.icon(options.icon)
+        .label(label)
+        .action(options.action)
+        .shortcut(options.shortcut);
+    if(options.disabled !== undefined) {
+        item.disabled(options.disabled);
+    }
+    if(typeof configBuilder === 'function') {
+        configBuilder(item);
+    }
+    return this;
+};
+
+HasMenuItem.prototype.group = function(label, builder) {
+    const MenuGroup = HasMenuItem.components.MenuGroup;
+    const group = new MenuGroup(label);
+    builder && builder(group);
+    return this.add(group);
+};
+
+HasMenuItem.prototype.separator = function() {
+    return this.add(new MenuDivider());
+};
+
+HasMenuItem.prototype.divider = HasMenuItem.prototype.separator;
+
+
+
+HasMenuItem.prototype.add = function(item) {
+    if(item === this) {
+        return this;
+    }
+    if(this.$description.orientation === 'inline') {
+        item.$description.orientation = 'inline';
+    }
+    item.$description.dataResolver = this.$description.dataResolver;
+    item.$parent = this;
+    this.$description.items.push(item);
+    return this;
+};
+
+HasMenuItem.prototype.getDepth = function() {
+    let depth = 0;
+    let current = this.$parent;
+
+    while (current) {
+        depth++;
+        current = current.$parent;
+    }
+
+    return depth;
+};
+
+HasMenuItem.prototype.onClicked = function() {
+    this.$description.interaction = 'click';
+    return this;
+};
+
+HasMenuItem.prototype.onHovered = function() {
+    this.$description.interaction = 'hover';
+    return this;
+};
+
+HasMenuItem.prototype.getRoot = function() {
+    let current = this;
+    while(current.$parent) {
+        current = current.$parent;
+    }
+    return current;
+};

package/src/components/menu/Menu.js

@@ -1,10 +1,9 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
-import HasItems from "../$traits/HasItems";
-import MenuDivider from "./MenuDivider";
+import HasItems from "../$traits/has-items/HasItems";
 import MenuGroup from "./MenuGroup";
-import MenuItem from "./MenuItem";
-import MenuLink from "./MenuLink";
+import HasMenuItem from "./HasMenuItem";
+import { $ } from '../../../index'
 
 export default function Menu(props = {}) {
 
@@ -12,20 +11,28 @@ export default function Menu(props = {}) {
         return new Menu(props)
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
-        items: [],
+        items: $.array(),
         render: null,
         orientation: 'horizontal',
         closeOnSelect: true,
         keyboardLoop: true,
+        activeItem: $(null),
         active: null,
+        compactThreshold: 60,
+        clickFirst: false,
+        menuActive: $(null),
+        isMenuActivated: $(false),
+        compact: $(null),
         props
     };
 
 }
 
 BaseComponent.extends(Menu);
-BaseComponent.use(Menu, HasItems, HasEventEmitter);
+BaseComponent.use(Menu, HasItems, HasEventEmitter, HasMenuItem);
 
 Menu.defaultTemplate = null;
 
@@ -33,10 +40,22 @@ Menu.use = function(template) {
     Menu.defaultTemplate = template;
 };
 
-Menu.prototype.add = function(item) {
-    this.$description.items.push(item);
+// Menu.prototype.$originalBuild = Menu.prototype.$build;
+// Menu.prototype.$build = function() {
+//     const activeSource = (typeof this.$description.active === 'function') ? this.$description.active() : this.$description.active;
+//     if(activeSource.__$Observable) {
+//         activeSource.subscribe((a) => {
+//             console.log('Subscribe', a);
+//             // Todo: update active element
+//         });
+//     }
+//     return this.$originalBuild();
+// };
+
+Menu.prototype.dataResolver = function(resolver) {
+    this.$description.dataResolver = resolver;
     return this;
-}
+};
 
 Menu.prototype.title = function(title) {
     this.$description.title = title;
@@ -58,6 +77,11 @@ Menu.prototype.vertical = function() {
     return this;
 };
 
+Menu.prototype.inline = function() {
+    this.$description.orientation = 'inline';
+    return this;
+};
+
 Menu.prototype.closeOnSelect = function(close = true) {
     this.$description.closeOnSelect = close;
     return this;
@@ -88,58 +112,25 @@ Menu.prototype.onItemSelect = function(handler) {
     return this;
 };
 
-Menu.prototype.separator = function() {
-    return this.add(new MenuDivider());
+Menu.prototype.group = function(label, icon, builder, props = {}) {
+    const group = new MenuGroup(label, props);
+    group.icon(icon);
+    builder && builder(group);
+    return this.add(group);
 };
 
-
-/**
- * Adds an item to the collection
- * @param {NdChild} label - The item to add
- * @param {?NdChild} icon - The item to add
- * @param {?Function} action - The item to add
- * @param {?Function} configBuilder - The item to add
- * @param {?*} props - The item to add
- * @returns {HasItems}
- */
-Menu.prototype.item = function(label, icon, action, configBuilder, props = {}) {
-    const item = MenuItem();
-    item.icon(icon).label(label).onClick(action);
-    if(typeof configBuilder === 'function') {
-        configBuilder.length ? configBuilder(item) : this.trailing(item);
-    } else if(configBuilder) {
-        this.trailing(item);
-    }
-    this.$description.items.push(item);
-    return this;
+Menu.prototype.getItem = function(key) {
+    return this.$description.items.find(
+        item => item.$description.key === key || item.$description.label === key
+    );
 };
 
-/**
- * Adds an item to the collection
- * @param {NdChild} label - The item to add
- * @param {?NdChild} icon - The item to add
- * @param {?string|{to: string, params: ?*}} url - The item to add
- * @param {?Function} configBuilder - The item to add
- * @param {?*} props - The item to add
- * @returns {HasItems}
- */
-Menu.prototype.link = function(label, icon, url, configBuilder, props = {}) {
-    const item = MenuLink(props);
-    item.icon(icon).label(label).action(url)
-    if(typeof configBuilder === 'function') {
-        configBuilder.length ? configBuilder(item) : this.trailing(item);
-    } else if(configBuilder) {
-        this.trailing(item);
-    }
-    this.$description.items.push(item);
+Menu.prototype.compactThreshold = function(width = 60) {
+    this.$description.compactThreshold = width;
     return this;
 };
 
-Menu.prototype.divider = Menu.prototype.separator;
-
-Menu.prototype.group = function(label, icon, builder, props = {}) {
-    const group = new MenuGroup(label, props);
-    group.icon(icon);
-    builder && builder(group);
-    return this.add(group);
+Menu.prototype.clickFirst = function(mode = true) {
+    this.$description.clickFirst = mode;
+    return this;
 };

package/src/components/menu/MenuGroup.js

@@ -1,22 +1,34 @@
 import BaseComponent from "../BaseComponent";
-import HasItems from "../$traits/HasItems";
+import HasItems from "../$traits/has-items/HasItems";
 import MenuDivider from "./MenuDivider";
+import HasMenuItem from "./HasMenuItem";
+import { $ } from '../../../index';
 
 
-export default function MenuGroup(label, props) {
+export default function MenuGroup(label, props = {}) {
     if(!(this instanceof MenuGroup)) {
         return new MenuGroup(label, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
+        icon: null,
         label,
         data: null,
-        items: [],
+        items: $.array(),
         render: null,
+        collapsable: false,
+        collapsed: null,
+        visibility: $(true),
+        collapsableOpenedIcon: null,
+        collapsableClosedIcon: null,
         props
     };
 }
 
+HasMenuItem.components.MenuGroup = MenuGroup;
+
 MenuGroup.defaultTemplate = null;
 
 MenuGroup.use = function(template) {
@@ -24,20 +36,36 @@ MenuGroup.use = function(template) {
 };
 
 BaseComponent.extends(MenuGroup);
-BaseComponent.use(MenuGroup, HasItems);
+BaseComponent.use(MenuGroup, HasItems, HasMenuItem);
 
 MenuGroup.prototype.data = function(data) {
     this.$description.data = data;
     return this;
 };
 
+MenuGroup.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+MenuGroup.prototype.collapsable = function(mode = true, openedIcon, closedIcon) {
+    this.$description.collapsable = mode;
+    this.$description.collapsed = this.$description.collapsed || $(true);
+    this.$description.collapsableOpenedIcon = openedIcon;
+    this.$description.collapsableClosedIcon = closedIcon;
+    return this;
+};
+
+MenuGroup.prototype.collapsed = function(mode = true) {
+    this.$description.collapsed.set(mode);
+    return this;
+};
 
 MenuGroup.prototype.divider = function() {
     return this.item(new MenuDivider());
 };
 
-MenuGroup.prototype.group = function(label, builder) {
-    const group = new MenuGroup(label);
-    builder && builder(group);
-    return this.item(group);
+MenuGroup.prototype.visibility = function(mode) {
+    this.$description.visibility = BaseComponent.obs(mode);
+    return this;
 };

package/src/components/menu/MenuItem.js

@@ -1,26 +1,34 @@
 import BaseComponent from "../BaseComponent";
-import HasItems from "../$traits/HasItems";
+import HasItems from "../$traits/has-items/HasItems";
 import MenuDivider from "./MenuDivider";
 import MenuGroup from "./MenuGroup";
+import HasMenuItem from "./HasMenuItem";
+import { $ } from '../../../index';
+import HasEventEmitter from "../../core/utils/HasEventEmitter";
 
+const EMPTY_PROPS = {}
 
 export default function MenuItem(props = {}) {
     if(!(this instanceof MenuItem)) {
-        return new MenuItem(props);
+        return new MenuItem(props || EMPTY_PROPS);
     }
 
+    BaseComponent.call(this, props || EMPTY_PROPS);
+
     this.$description = {
-        items: [],
+        items: $.array(),
+        key: null,
         action: null,
         label: null,
         icon: null,
         shortcut: null,
-        disabled: false,
-        selected: false,
+        disabled: null,
+        selected: null,
         value: null,
         data: null,
         render: null,
         trailing: null,
+        visibility: null,
         props
     };
 
@@ -33,7 +41,9 @@ MenuItem.use = function(template) {
 };
 
 BaseComponent.extends(MenuItem);
-BaseComponent.use(MenuItem, HasItems);
+BaseComponent.use(MenuItem, HasItems, HasEventEmitter, HasMenuItem);
+
+HasMenuItem.components.MenuItem = MenuItem;
 
 
 MenuItem.prototype.label = function(label) {
@@ -85,8 +95,12 @@ MenuItem.prototype.divider = function() {
     return this.item(new MenuDivider());
 };
 
-MenuItem.prototype.group = function(label, builder) {
-    const group = new MenuGroup(label);
-    builder && builder(group);
-    return this.item(group);
+MenuItem.prototype.key = function(key) {
+    this.$description.key = key;
+    return this;
+};
+
+MenuItem.prototype.visibility = function(mode) {
+    this.$description.visibility = BaseComponent.obs(mode);
+    return this;
 };

package/src/components/menu/MenuLink.js

@@ -1,4 +1,5 @@
 import MenuItem from "./MenuItem";
+import HasMenuItem from "./HasMenuItem";
 
 
 export default function MenuLink(props = {}) {
@@ -11,6 +12,7 @@ export default function MenuLink(props = {}) {
 MenuLink.prototype = Object.create(MenuItem.prototype);
 MenuLink.prototype.constructor = MenuLink;
 
+HasMenuItem.components.MenuLink = MenuLink;
 
 MenuLink.defaultTemplate = null;