native-document 1.0.130 → 1.0.131

package/src/components/badge/Badge.js

@@ -1,17 +1,22 @@
 import BaseComponent from "../BaseComponent";
-import EventEmitter from "../../../src/core/utils/EventEmitter";
+import DebugManager from "../../core/utils/debug-manager";
 
 
-export default function Badge(config = {}) {
+export default function Badge(content, props = {}) {
     if(!(this instanceof Badge)) {
-        return new Badge(config);
+        return new Badge(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
-        style: null,
-        shape: null,
-        variant,
-        ...config
+        style: 'filled',
+        borderRadiusType: 'pill',
+        variant: 'primary',
+        size: 'medium',
+        onClick: null,
+        content,
+        props
     };
 }
 
@@ -21,6 +26,20 @@ Badge.defaultTemplate = null;
 
 Badge.use = function(template) {};
 
+Badge.preset = function(name, callback) {
+    if (Badge.prototype[name] || Badge[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in Badge.`);
+        return;
+    }
+    Badge[name] = (content, props) => callback(new Badge(content, props));
+};
+
+Badge.presets = function(presets) {
+    for (const name in presets) {
+        Badge.preset(name, presets[name]);
+    }
+};
+
 Badge.prototype.variant = function(variant) {
     this.$description.variant = variant;
     return this;
@@ -59,15 +78,21 @@ Badge.prototype.large = function() {
 };
 
 Badge.prototype.shape = function(shape) {
-    this.$description.shape = shape;
+    this.$description.borderRadiusType = shape;
     return this;
 };
 
 Badge.prototype.rounded = function() {
-    return this.shape('rounded');
+    this.$description.borderRadiusType = 'rounded';
+    return this;
 };
 Badge.prototype.pill = function() {
-    return this.shape('pill');
+    this.$description.borderRadiusType = 'pill';
+    return this;
+};
+Badge.prototype.circle = function() {
+    this.$description.borderRadiusType = 'circle';
+    return this;
 };
 
 Badge.prototype.style = function(style) {
@@ -75,13 +100,16 @@ Badge.prototype.style = function(style) {
     return this;
 };
 Badge.prototype.outline = function() {
-    return this.style('outline');
+    this.$description.style = 'outline';
+    return this;
 };
 Badge.prototype.filled = function() {
-    return this.style('filled');
+    this.$description.style = 'filled';
+    return this;
 };
 Badge.prototype.bordered = function() {
-    return this.style('bordered');
+    this.$description.style = 'bordered';
+    return this;
 };
 
 Badge.prototype.content = function(content) {
@@ -89,15 +117,7 @@ Badge.prototype.content = function(content) {
     return this;
 };
 
-Badge.prototype.clickable = function(handler) {};
-
-
-Badge.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
+Badge.prototype.onClick = function(handler) {
+    this.$description.onClick = handler;
     return this;
-};
-
-Badge.prototype.$build = function() {
-
-};
-Badge.prototype.toNdElement = function() {};
+};

package/src/components/button/Button.js

@@ -1,12 +1,11 @@
 import BaseComponent from "../BaseComponent";
-import { Button as NativeButton } from "../../../elements";
 
-export default function Button(label, config = {}) {
+export default function Button(label, props = {}) {
     if(!(this instanceof Button)) {
-        return new Button(label, config);
+        return new Button(label, props);
     }
 
-    BaseComponent.call(this, config);
+    BaseComponent.call(this, props);
 
     this.$description = {
         label: label,
@@ -21,7 +20,7 @@ export default function Button(label, config = {}) {
         block: null,
         borderRadiusType: null,
         outline: null,
-        ...config
+        props
     };
 
     this.$element = null;
@@ -37,6 +36,20 @@ Button.use = function(template = {}) {
 
 BaseComponent.extends(Button);
 
+Button.preset = function(name, callback) {
+    if (Button.prototype[name] || Button[name]) {
+        console.warn(`Warning: the ${name} method already exist in Button.`);
+        return;
+    }
+    Button[name] = (label, props) => callback(new Button(label, props));
+};
+
+Button.presets = function(presets) {
+    for (const name in presets) {
+        Button.preset(name, presets[name]);
+    }
+};
+
 Button.prototype.type = function(type) {
     this.$description.type = type;
     return this;
@@ -86,18 +99,19 @@ Button.prototype.medium = function() {
     return this.size('medium');
 };
 
-Button.prototype.icon = function(icon, iconPosition = 'left') {
+Button.prototype.icon = function(icon, iconPosition = 'leading') {
     this.$description.icon = icon;
     this.$description.iconPosition = iconPosition;
     return this;
 };
 
-Button.prototype.iconAtLeft = function() {
-    this.$description.iconPosition = 'left';
+Button.prototype.iconAtLeading = function() {
+    this.$description.iconPosition = 'leading';
     return this;
 };
-Button.prototype.iconAtRight = function() {
-    this.$description.iconPosition = 'right';
+
+Button.prototype.iconAtTrailing = function() {
+    this.$description.iconPosition = 'trailing';
     return this;
 };
 Button.prototype.iconAtTop = function() {
@@ -138,16 +152,16 @@ Button.prototype.rounded = function() {
     this.$description.borderRadiusType = 'rounded';
     return this;
 };
-Button.prototype.circle = function() {
-    this.$description.borderRadiusType = 'circle';
+Button.prototype.pill = function() {
+    this.$description.borderRadiusType = 'pill';
     return this;
 };
-Button.prototype.pill = function() {
-    this.$description.shape = 'circle';
+Button.prototype.circle = function() {
+    this.$description.borderRadiusType = 'circle';
     return this;
 };
 Button.prototype.smooth = function() {
-    this.$description.shape = 'smooth';
+    this.$description.borderRadiusType = 'smooth';
     return this;
 };
 Button.prototype.block = function() {
@@ -155,22 +169,6 @@ Button.prototype.block = function() {
     return this;
 };
 
-Button.prototype.$build = function() {
-    if(this.$element) {
-        return this.$element;
-    }
-    const renderFn = this.$description.render || Button.defaultTemplate;
-
-    if(typeof renderFn === 'function') {
-        this.$element = renderFn(this);
-    }
-    else {
-        const props = {};
-        this.$element = NativeButton(props, this.$description.label);
-    }
-    return this.$element;
-};
-
 Button.prototype.node = function() {
     return this.$build();
 };

package/src/components/divider/Divider.js

@@ -1,16 +1,17 @@
 import BaseComponent from "../BaseComponent";
+import DebugManager from "../../core/utils/debug-manager";
 
-export default function Divider(config = {}) {
+export default function Divider(label, props = {}) {
     if(!(this instanceof Divider)) {
-        return new Divider(config);
+        return new Divider(label, props);
     }
 
     this.$description = {
         orientation: 'horizontal',
         variant: 'solid',
-        thickness: null,
-        spacing: null,
-        label: null,
+        thickness: 1,
+        spacing: 16,
+        label,
         labelPosition: 'center',
         color: null,
         render: null,
@@ -18,7 +19,7 @@ export default function Divider(config = {}) {
         indent: null,
         leading: null,
         trailing: null,
-        ...config
+        props
     };
 }
 
@@ -30,6 +31,20 @@ Divider.use = function(template) {
     Divider.defaultTemplate = template.divider;
 };
 
+Divider.preset = function(name, callback) {
+    if (Divider.prototype[name] || Divider[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in Divider.`);
+        return;
+    }
+    Divider[name] = (label, props) => callback(new Divider(label, props));
+};
+
+Divider.presets = function(presets) {
+    for (const name in presets) {
+        Divider.preset(name, presets[name]);
+    }
+};
+
 Divider.prototype.orientation = function(orientation) {
     this.$description.orientation = orientation;
     return this;

package/src/components/layouts/HStack.js

@@ -0,0 +1,27 @@
+import Stack from "./Stack";
+import DebugManager from "../../core/utils/debug-manager";
+
+export default function HStack(content, props = {}) {
+    if (!(this instanceof HStack)) {
+        return new HStack(content, props);
+    }
+
+    Stack.call(this, content, props);
+    this.$description.orientation = 'horizontal';
+}
+
+Stack.extends(HStack);
+
+HStack.preset = function(name, callback) {
+    if (HStack.prototype[name] || HStack[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in HStack.`);
+        return;
+    }
+    HStack[name] = (content, props) => callback(new HStack(content, props));
+};
+
+HStack.presets = function(presets) {
+    for (const name in presets) {
+        HStack.preset(name, presets[name]);
+    }
+};

package/src/components/layouts/Stack.js

@@ -0,0 +1,75 @@
+
+
+import BaseComponent from "../BaseComponent";
+
+export default function Stack(content, props = {}) {
+    if (!(this instanceof Stack)) {
+        return new Stack(content, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        orientation: 'horizontal',
+        content: content,
+        spacing: 0,
+        alignment: 'center',
+        justifyContent: 'start',
+        props
+    };
+}
+
+BaseComponent.extends(Stack);
+
+Stack.prototype.wrap = function(enabled = true) {
+    this.$description.wrap = enabled;
+    return this;
+};
+
+Stack.prototype.spacing = function(value) {
+    this.$description.spacing = value;
+    return this;
+};
+
+Stack.prototype.alignLeading = function() {
+    this.$description.alignment = 'leading';
+    return this;
+};
+Stack.prototype.alignCenter = function() {
+    this.$description.alignment = 'center';
+    return this;
+};
+Stack.prototype.alignTrailing = function() {
+    this.$description.alignment = 'trailing';
+    return this;
+};
+Stack.prototype.alignStretch = function() {
+    this.$description.alignment = 'stretch';
+    return this;
+};
+
+Stack.prototype.justifyStart = function() {
+    this.$description.justifyContent = 'start';
+    return this;
+};
+Stack.prototype.justifyCenter = function() {
+    this.$description.justifyContent = 'center';
+    return this;
+};
+Stack.prototype.justifyEnd = function() {
+    this.$description.justifyContent = 'end';
+    return this;
+};
+Stack.prototype.justifyBetween = function() {
+    this.$description.justifyContent = 'between';
+    return this;
+};
+Stack.prototype.justifyAround = function() {
+    this.$description.justifyContent = 'around';
+    return this;
+};
+
+Stack.prototype.center = function() {
+    this.alignCenter().justifyCenter();
+    return this;
+};

package/src/components/layouts/VStack.js

@@ -0,0 +1,26 @@
+import Stack from "./Stack";
+import DebugManager from "../../core/utils/debug-manager";
+
+
+export default function VStack(content, props = {}) {
+    if (!(this instanceof VStack)) return new VStack(content, props);
+
+    Stack.call(this, content, props);
+    this.$description.orientation = 'vertical';
+    this.$description.alignment = 'leading';
+}
+Stack.extends(VStack);
+
+VStack.preset = function(name, callback) {
+    if (VStack.prototype[name] || VStack[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in VStack.`);
+        return;
+    }
+    VStack[name] = (content, props) => callback(new VStack(content, props));
+};
+
+VStack.presets = function(presets) {
+    for (const name in presets) {
+        VStack.preset(name, presets[name]);
+    }
+};

package/src/components/layouts/ZStack.js

@@ -0,0 +1,36 @@
+import BaseComponent from "../BaseComponent";
+import DebugManager from "../../core/utils/debug-manager";
+
+export default function ZStack(content, props = {}) {
+    if (!(this instanceof ZStack)) {
+        return new ZStack(content, props);
+    }
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        content: content,
+        alignment: 'center',
+        props
+    };
+}
+
+BaseComponent.extends(ZStack);
+
+ZStack.preset = function(name, callback) {
+    if (ZStack.prototype[name] || ZStack[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exists in ZStack.`);
+        return;
+    }
+    ZStack[name] = (content, props) => callback(new ZStack(content, props));
+};
+
+ZStack.presets = function(presets) {
+    for (const name in presets) {
+        ZStack.preset(name, presets[name]);
+    }
+};
+
+ZStack.prototype.alignment = function(align) {
+    this.$description.alignment = align;
+    return this;
+};

package/src/components/layouts/index.js

@@ -0,0 +1,19 @@
+import Stack from "./Stack";
+import VStack from "./VStack";
+import ZStack from "./ZStack";
+import HStack from "./HStack";
+
+
+const Row = HStack;
+const Col = VStack;
+const Overlay = ZStack;
+
+export {
+    Stack,
+    HStack,
+    VStack,
+    ZStack,
+    Row,
+    Col,
+    Overlay
+}

package/src/components/menu/Menu.js

@@ -3,11 +3,13 @@ import EventEmitter from "../../../src/core/utils/EventEmitter";
 import HasItems from "../$traits/HasItems";
 import MenuDivider from "./MenuDivider";
 import MenuGroup from "./MenuGroup";
+import MenuItem from "./MenuItem";
+import MenuLink from "./MenuLink";
 
-export default function Menu(config = {}) {
+export default function Menu(props = {}) {
 
     if(!(this instanceof Menu)) {
-        return new Menu(config)
+        return new Menu(props)
     }
 
     this.$description = {
@@ -17,7 +19,7 @@ export default function Menu(config = {}) {
         closeOnSelect: true,
         keyboardLoop: true,
         active: null,
-        ...config
+        props
     };
 
 }
@@ -89,10 +91,54 @@ Menu.prototype.separator = function() {
     return this.add(new MenuDivider());
 };
 
+
+/**
+ * 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;
+};
+
+/**
+ * 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);
+    return this;
+};
+
 Menu.prototype.divider = Menu.prototype.separator;
 
-Menu.prototype.group = function(label, icon, builder) {
-    const group = new MenuGroup({ label, icon});
+Menu.prototype.group = function(label, icon, builder, props = {}) {
+    const group = new MenuGroup(label, props);
+    group.icon(icon);
     builder && builder(group);
     return this.add(group);
 };

package/src/components/menu/MenuDivider.js

@@ -1,12 +1,14 @@
 import BaseComponent from "../BaseComponent";
 
 
-export default function MenuDivider() {
+export default function MenuDivider(props = {}) {
     if(!(this instanceof MenuDivider)) {
-        return new MenuDivider();
+        return new MenuDivider(props);
     }
 
-    this.$description = {}
+    this.$description = {
+        props
+    };
 }
 
 BaseComponent.extends(MenuDivider);
@@ -15,9 +17,5 @@ BaseComponent.extends(MenuDivider);
 MenuDivider.defaultTemplate = null;
 
 MenuDivider.use = function(template) {
-    MenuDivider.defaultTemplate = template.divider;
-};
-
-MenuDivider.prototype.$build = function() {
-
+    MenuDivider.defaultTemplate = template.menuDivider;
 };

package/src/components/menu/MenuGroup.js

@@ -3,9 +3,9 @@ import HasItems from "../$traits/HasItems";
 import MenuDivider from "./MenuDivider";
 
 
-export default function MenuGroup(label, config) {
+export default function MenuGroup(label, props) {
     if(!(this instanceof MenuGroup)) {
-        return new MenuGroup(label, config);
+        return new MenuGroup(label, props);
     }
 
     this.$description = {
@@ -13,8 +13,8 @@ export default function MenuGroup(label, config) {
         data: null,
         items: [],
         render: null,
-        ...config
-    }
+        props
+    };
 }
 
 MenuGroup.defaultTemplate = null;

package/src/components/menu/MenuItem.js

@@ -4,9 +4,9 @@ import MenuDivider from "./MenuDivider";
 import MenuGroup from "./MenuGroup";
 
 
-export default function MenuItem(config = {}) {
+export default function MenuItem(props = {}) {
     if(!(this instanceof MenuItem)) {
-        return new MenuItem(config);
+        return new MenuItem(props);
     }
 
     this.$description = {
@@ -21,7 +21,7 @@ export default function MenuItem(config = {}) {
         data: null,
         render: null,
         trailing: null,
-        ...config
+        props
     };
 
 }

package/src/components/menu/MenuLink.js

@@ -1,11 +1,11 @@
 import MenuItem from "./MenuItem";
 
 
-export default function MenuLink(config) {
+export default function MenuLink(props = {}) {
     if(!(this instanceof MenuLink)) {
-        return new MenuLink(config);
+        return new MenuLink(props);
     }
-    MenuItem.call(this, config);
+    MenuItem.call(this, props);
 }
 
 MenuLink.prototype = Object.create(MenuItem.prototype);