native-document 1.0.76 → 1.0.77

package/src/components/badge/Badge.js

@@ -0,0 +1,103 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+
+export default function Badge(config = {}) {
+    if(!(this instanceof Badge)) {
+        return new Badge(config);
+    }
+
+    this.$description = {
+        style: null,
+        shape: null,
+        variant,
+        ...config
+    };
+}
+
+BaseComponent.extends(Badge);
+
+Badge.defaultTemplate = null;
+
+Badge.use = function(template) {};
+
+Badge.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+Badge.prototype.primary = function() {
+    return this.variant('primary');
+};
+Badge.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+Badge.prototype.success = function() {
+    return this.variant('success');
+};
+Badge.prototype.danger = function() {
+    return this.variant('danger');
+};
+Badge.prototype.warning = function() {
+    return this.variant('warning');
+};
+Badge.prototype.info = function() {
+    return this.variant('info');
+};
+
+Badge.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+Badge.prototype.small = function() {
+    return this.size('small');
+};
+Badge.prototype.medium = function() {
+    return this.size('medium');
+};
+Badge.prototype.large = function() {
+    return this.size('large');
+};
+
+Badge.prototype.shape = function(shape) {
+    this.$description.shape = shape;
+    return this;
+};
+
+Badge.prototype.rounded = function() {
+    return this.shape('rounded');
+};
+Badge.prototype.pill = function() {
+    return this.shape('pill');
+};
+
+Badge.prototype.style = function(style) {
+    this.$description.style = style;
+    return this;
+};
+Badge.prototype.outline = function() {
+    return this.style('outline');
+};
+Badge.prototype.filled = function() {
+    return this.style('filled');
+};
+Badge.prototype.bordered = function() {
+    return this.style('bordered');
+};
+
+Badge.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+Badge.prototype.clickable = function(handler) {};
+
+
+Badge.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Badge.prototype.$build = function() {
+
+};
+Badge.prototype.toNdElement = function() {};

package/src/components/badge/index.js

@@ -0,0 +1,6 @@
+import Badge from './Badge'
+
+
+export {
+    Badge
+};

package/src/components/breadcrumb/BreadCrumb.js

@@ -0,0 +1,70 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Breadcrumb(config = {}) {
+    if (!(this instanceof Breadcrumb)) {
+        return new Breadcrumb(config);
+    }
+
+    this.$description = {
+        separator: null,
+        items: [],
+        renderSeparator: null,
+        renderItem: null,
+        ...config,
+    };
+}
+
+BaseComponent.extends(Breadcrumb, EventEmitter);
+
+Breadcrumb.use = function(template) {};
+Breadcrumb.defaultTemplate = null;
+
+Breadcrumb.prototype.item = function(label, href) {
+    this.$description.items.push({ label, href });
+    return this;
+};
+Breadcrumb.prototype.items = function(items) {
+    this.$description.items = [];
+    for(const item of items) {
+        this.addItem(item.label, item.href);
+    }
+    return this;
+};
+Breadcrumb.prototype.addItem = function(label, href) {
+    this.$description.items.push({ label, href });
+    return this;
+};
+Breadcrumb.prototype.removeItem = function(index) {
+    this.$description.items.splice(index, 1);
+};
+
+Breadcrumb.prototype.separator = function(separator) {
+    this.$description.separator = separator;
+    return this;
+};
+
+
+Breadcrumb.prototype.onItemClick = function(handler) {
+    this.on('clickItem', handler);
+    return this;
+};
+
+// Render
+Breadcrumb.prototype.renderSeparator = function(renderFn) {
+    this.$description.renderSeparator = renderFn;
+    return this;
+};
+Breadcrumb.prototype.renderItem = function(renderFn) {
+    this.$description.renderItem = renderFn;
+    return this;
+};
+Breadcrumb.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Breadcrumb.prototype.$build = function() {
+
+};
+Breadcrumb.prototype.toNdElement = function() {};

package/src/components/breadcrumb/index.js

@@ -0,0 +1,5 @@
+import Breadcrumb from './BreadCrumb';
+
+export {
+    Breadcrumb
+}

package/src/components/button/Button.js

@@ -0,0 +1,174 @@
+import BaseComponent from "@components/BaseComponent";
+import { Button as NativeButton } from "@elements";
+
+export default function Button(label, config = {}) {
+    if(!(this instanceof Button)) {
+        return new Button(label, config);
+    }
+
+    BaseComponent.call(this, config);
+
+    this.$description = {
+        label: label,
+        type: null,
+        variant: null,
+        size: null,
+        icon: null,
+        iconPosition: null,
+        loading: null,
+        disabled: null,
+        template: null,
+        block: null,
+        borderRadiusType: null,
+        outline: null,
+    };
+
+    this.$element = null;
+}
+
+Button.defaultTemplate = null;
+Button.defaultLoaderTemplate = null;
+
+Button.use = function(template = {}) {
+    Button.defaultTemplate = template.button;
+    Button.defaultLoaderTemplate = template.loader;
+};
+
+BaseComponent.extends(Button);
+
+Button.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+
+Button.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+Button.prototype.primary = function() {
+    return this.variant('primary');
+};
+Button.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+Button.prototype.danger = function() {
+    return this.variant('danger');
+};
+Button.prototype.success = function() {
+    return this.variant('success');
+};
+Button.prototype.warning = function() {
+    return this.variant('warning');
+};
+Button.prototype.ghost = function() {
+    return this.variant('ghost');
+};
+Button.prototype.link = function() {
+    return this.variant('link');
+};
+Button.prototype.outline = function() {
+    this.$description.outline = true;
+    return this;
+};
+
+Button.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+Button.prototype.small = function() {
+    return this.size('small');
+};
+Button.prototype.large = function() {
+    return this.size('large');
+};
+Button.prototype.medium = function() {
+    return this.size('medium');
+};
+
+Button.prototype.icon = function(icon, iconPosition = 'left') {
+    this.$description.icon = icon;
+    this.$description.iconPosition = iconPosition;
+    return this;
+};
+
+Button.prototype.iconAtLeft = function(position) {
+    return this.iconPosition('left');
+};
+Button.prototype.iconAtRight = function(position) {
+    return this.iconPosition('right');
+};
+Button.prototype.iconAtTop = function() {
+    return this.iconPosition('top');
+};
+
+Button.prototype.iconAtBottom = function() {
+    return this.iconPosition('bottom');
+};
+
+Button.prototype.iconOnly = function() {
+    return this;
+};
+
+Button.prototype.loading = function(loading = true) {
+    this.$description.loading = loading;
+    return this;
+}
+
+Button.prototype.disable = function(disabled = true) {
+    this.$description.disabled = disabled;
+    return this;
+};
+
+Button.prototype.enable = function() {
+    return this.disable(false);
+};
+
+Button.prototype.render = function(renderFunction) {
+    this.$description.render = renderFunction;
+    return this;
+};
+
+Button.prototype.rounded = function() {
+    this.$description.borderRadiusType = 'rounded';
+    return this;
+};
+Button.prototype.circle = function() {
+    this.$description.borderRadiusType = 'circle';
+    return this;
+};
+Button.prototype.pill = function() {
+    this.$description.shape = 'circle';
+    return this;
+};
+Button.prototype.smooth = function() {
+    this.$description.shape = 'smooth';
+    return this;
+};
+Button.prototype.block = function() {
+    this.$description.block = true;
+    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();
+};
+
+Button.prototype.toNdElement = function() {
+    return this.$build();
+};

package/src/components/button/index.js

@@ -0,0 +1,5 @@
+import Button from './Button';
+
+export {
+    Button
+};

package/src/components/card/Card.js

@@ -0,0 +1,110 @@
+import BaseComponent from "@components/BaseComponent";
+
+export default function Card(config = {}) {
+    if(!(this instanceof Card)) {
+        return new Card(config);
+    }
+    this.$description = {
+        ...config
+    };
+};
+
+BaseComponent.extends(Card);
+
+Card.defaultTemplate = null;
+
+Card.use = function(template) {};
+
+Card.prototype.title = function(title) {
+    return this;
+};
+Card.prototype.subtitle = function(title) {
+    return this;
+};
+Card.prototype.image = function(src, position = 'top') {
+    return this;
+};
+Card.prototype.content = function(content) {
+    return this;
+};
+
+// Appearance
+Card.prototype.variant = function(name) {
+    return this;
+};
+Card.prototype.outlined = function() {
+    return this;
+};
+Card.prototype.elevated = function() {
+    return this;
+};
+Card.prototype.flat = function() {
+    return this;
+};
+
+// Behavior
+Card.prototype.clickable = function(handler) {
+    return this;
+};
+Card.prototype.hoverable = function() {
+    return this;
+};
+Card.prototype.loading = function(isLoading = true) {
+    return this;
+};
+
+// Layout
+Card.prototype.horizontal = function() {
+    return this;
+};
+
+// Events
+Card.prototype.onClick = function(handler) {
+    return this;
+};
+Card.prototype.onHover = function(handler) {
+    return this;
+};
+
+Card.prototype.clearActions = function() {
+    this.$description.actions = [];
+    return this;
+};
+
+Card.prototype.action = function(label, callback) {
+    this.$description.actions.push({ label, callback });
+    return this;
+};
+
+Card.prototype.renderImage = function(renderFn) {
+    this.$description.renderImage = renderFn;
+    return this;
+};
+Card.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+Card.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};
+Card.prototype.renderFooter = function(renderFn) {
+    this.$description.renderFooter = renderFn;
+    return this;
+};
+Card.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
+Card.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Card.prototype.$build = function() {
+
+};
+Card.prototype.toNdElement = function() {
+    return this;
+};

package/src/components/card/index.js

@@ -0,0 +1,5 @@
+import Card from './Card'
+
+export default {
+    Card
+}

package/src/components/context-menu/ContextMenu.js

@@ -0,0 +1,60 @@
+import Menu from "@components/menu/Menu";
+import BaseComponent from "@components/BaseComponent";
+
+export default function ContextMenu(config = {}) {
+    if(!(this instanceof ContextMenu)) {
+        return ContextMenu(config);
+    }
+    Menu.call(this, config);
+
+    Object.assign(this.$description, {
+        positionX: $(0),
+        positionY: $(0),
+        target: null,
+        data: null,
+        visibility: $(false)
+    });
+
+    this.onItemClick( () => this.hide());
+}
+
+ContextMenu.defaultTemplate = null;
+BaseComponent.extends(ContextMenu, Menu);
+
+ContextMenu.defaultTemplate = null;
+
+ContextMenu.use = function(template) {
+    ContextMenu.defaultTemplate = template.contextMenu;
+};
+
+ContextMenu.prototype.attachTo = function(target, data) {
+    this.$description.target = target;
+    target.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        this.data(data);
+        this.position(e.clientX, e.clientY).show();
+    });
+    return this;
+};
+
+
+ContextMenu.prototype.position = function(x, y) {
+    this.$description.positionX.set(x);
+    this.$description.positionY.set(y);
+    return this;
+}
+
+ContextMenu.prototype.show = function() {
+    this.$description.visibility.set(true);
+    return this;
+};
+
+ContextMenu.prototype.hide = function() {
+    this.$description.visibility.set(false);
+    return this;
+};
+
+ContextMenu.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};

package/src/components/context-menu/ContextMenuGroup.js

@@ -0,0 +1,16 @@
+import MenuGroup from "@components/menu/MenuGroup";
+
+export default function ContextMenuGroup(label, config) {
+    if(!(this instanceof ContextMenuGroup)) {
+        return new ContextMenuGroup(label, config);
+    }
+
+    MenuGroup.call(this, label, config);
+}
+
+
+ContextMenuGroup.defaultTemplate = null;
+
+ContextMenuGroup.use = function(template) {
+    ContextMenuGroup.defaultTemplate = template.contextMenuGroup;
+};

package/src/components/context-menu/ContextMenuItem.js

@@ -0,0 +1,16 @@
+import MenuItem from "@components/menu/MenuItem";
+
+export default function ContextMenuItem(config) {
+    if(!(this instanceof ContextMenuItem)) {
+        return new ContextMenuItem(config);
+    }
+
+    MenuItem.call(this, config);
+}
+
+
+ContextMenuItem.defaultTemplate = null;
+
+ContextMenuItem.use = function(template) {
+    ContextMenuItem.defaultTemplate = template.contextMenuItem;
+};

package/src/components/context-menu/index.js

@@ -0,0 +1,10 @@
+import ContextMenu from "./ContextMenu";
+import ContextMenuItem from "./ContextMenuItem";
+import ContextMenuGroup from "./ContextMenuGroup";
+
+
+export {
+    ContextMenu,
+    ContextMenuItem,
+    ContextMenuGroup
+}