native-document 1.0.76 → 1.0.77

package/src/components/menu/Menu.js

@@ -0,0 +1,82 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+import HasItems from "@components/$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 "@components/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() {
+
+};

package/src/components/menu/MenuGroup.js

@@ -0,0 +1,42 @@
+import BaseComponent from "@components/BaseComponent";
+import HasItems from "@components/$traits/HasItems";
+import MenuDivider from "./MenuDivider";
+
+
+export default function MenuGroup(label, config) {
+    if(!(this instanceof MenuGroup)) {
+        return new MenuGroup(label, config);
+    }
+
+    this.$description = {
+        label,
+        data: null,
+        items: [],
+        render: null,
+        ...config
+    }
+}
+
+MenuGroup.defaultTemplate = null;
+
+MenuGroup.use = function(template) {
+    MenuGroup.defaultTemplate = template.menuGroup;
+};
+
+BaseComponent.extends(MenuGroup, HasItems);
+
+MenuGroup.prototype.data = function(data) {
+    this.$description.data = data;
+    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);
+};

package/src/components/menu/MenuItem.js

@@ -0,0 +1,71 @@
+import BaseComponent from "@components/BaseComponent";
+import HasItems from "@components/$traits/HasItems";
+import MenuDivider from "./MenuDivider";
+import MenuGroup from "./MenuGroup";
+
+
+export default function MenuItem(config = {}) {
+    if(!(this instanceof MenuItem)) {
+        return new MenuItem(config);
+    }
+
+    this.$description = {
+        items: [],
+        ...config
+    };
+
+}
+
+MenuItem.defaultTemplate = null;
+
+MenuItem.use = function(template) {
+    MenuItem.defaultTemplate = template.menuItem;
+};
+
+BaseComponent.extends(MenuItem, HasItems);
+
+
+MenuItem.prototype.label = function(label) {
+    this.$description.label = label;
+    return this;
+};
+
+MenuItem.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+MenuItem.prototype.shortcut = function(shortcut) {
+    this.$description.shortcut = shortcut;
+    return this;
+};
+
+MenuItem.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = disabled;
+    return this;
+};
+
+MenuItem.prototype.selected = function(selected = true) {
+    this.$description.selected = selected;
+    return this;
+};
+
+MenuItem.prototype.value = function(value) {
+    this.$description.value = value;
+    return this;
+};
+
+MenuItem.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+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);
+};

package/src/components/menu/index.js

@@ -0,0 +1,13 @@
+import Menu from "./Menu";
+import MenuItem from "./MenuItem";
+import MenuGroup from "./MenuGroup";
+import MenuDivider from "./MenuDivider";
+
+
+export {
+    Menu,
+    MenuItem,
+    MenuGroup,
+    MenuDivider,
+    MenuInterface
+};

package/src/components/modal/Modal.js

@@ -0,0 +1,153 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+
+export default function Modal(config = {}) {
+    if(!(this instanceof Modal)) {
+        return new Modal(config);
+    }
+
+    this.$description = {
+        centered: true,
+        scrollable: false,
+        title: null,
+        content: null,
+        footer: null,
+        size: null,
+        closeOnBackdrop: true,
+        closeOnEscape: true,
+        closable: true,
+        layout: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Modal, EventEmitter);
+
+// Theming
+Modal.defaultLayout = null;
+// Modal.defaultBackdrop = null;
+Modal.defaultOverlay = null;
+Modal.defaultHeaderTemplate = null;
+Modal.defaultContentTemplate = null;
+Modal.defaultFooterTemplate = null;
+Modal.use = function(template) {};
+
+
+Modal.prototype.open = function() {};
+Modal.prototype.close = function() {};
+Modal.prototype.isOpen = function() {};
+Modal.prototype.isClose = function() {};
+
+// Configuration
+Modal.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+Modal.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+Modal.prototype.footer = function(footer) {
+    this.$description.footer = footer;
+    return this;
+};
+
+Modal.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+Modal.prototype.small = function() {
+    return this.size('small');
+};
+Modal.prototype.medium = function() {
+    return this.size('medium');
+};
+Modal.prototype.large = function() {
+    return this.size('large');
+};
+Modal.prototype.extraLarge = function() {
+    return this.size('extra-large');
+};
+Modal.prototype.fullscreen = function() {
+    return this.size('fullscreen');
+};
+
+Modal.prototype.centered = function() {
+    this.$description.centered = true;
+    return this;
+};
+Modal.prototype.scrollable = function() {
+    this.$description.scrollable = true;
+    return this;
+};
+
+
+Modal.prototype.closeOnBackdrop = function(enabled = true) {
+    this.$description.closeOnBackdrop = enabled;
+    return this;
+};
+Modal.prototype.closeOnEscape = function(enabled = true) {
+    this.$description.closeOnEscape = enabled;
+    return this;
+};
+Modal.prototype.closable = function(enabled = true) {
+    this.$description.closable = enabled;
+    return this;
+};
+
+
+Modal.prototype.onOpen = function(handler) {
+    this.on('open', handler);
+    return this;
+};
+Modal.prototype.onClose = function(handler) {
+    this.on('close', handler);
+    return this;
+};
+Modal.prototype.onBeforeOpen = function(handler) {
+    this.on('beforeOpen', handler);
+    return this;
+};
+Modal.prototype.onBeforeClose = function(handler) {
+    this.on('beforeClose', handler);
+    return this;
+};
+
+Modal.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn
+    return this;
+};
+Modal.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn
+    return this;
+};
+Modal.prototype.renderFooter = function(renderFn) {
+    this.$description.renderFooter = renderFn
+    return this;
+};
+
+Modal.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
+Modal.prototype.$buildHeader = function() {
+
+};
+
+Modal.prototype.$buildContent = function() {
+
+};
+
+Modal.prototype.$buildFooter = function() {
+
+};
+
+Modal.prototype.$build = function() {
+
+};
+
+Modal.prototype.toNdElement = function() {
+
+};

package/src/components/modal/index.js

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

package/src/components/pagination/Pagination.js

@@ -0,0 +1,229 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Pagination(config = {}) {
+    if(!(this instanceof Pagination)) {
+        return new Pagination(config);
+    }
+
+    this.$description = {
+        currentPage: $(1),
+        pages: $.array([]),
+        totalPages: 1,
+        pageSize: 10,
+        totalItems: 0,
+        siblingCount: 1,
+        boundaryCount: 1,
+        showFirstLast: true,
+        showPreviousNext: true,
+        disabled: false,
+        data: null,
+        renderPage: null,
+        renderEllipsis: null,
+        renderPrevious: null,
+        renderNext: null,
+        renderFirst: null,
+        renderLast: null,
+        render: null,
+        ...config
+    };
+
+    this.$element = null;
+}
+
+BaseComponent.extends(Pagination, EventEmitter);
+
+Pagination.defaultTemplate = null;
+
+Pagination.use = function(template) {
+    Pagination.defaultTemplate = template.pagination;
+};
+
+Pagination.prototype.currentPage = function(page) {
+    if (typeof page === 'number') {
+        this.$description.currentPage.set(page);
+    } else {
+        this.$description.currentPage = page;
+    }
+    return this;
+};
+
+Pagination.prototype.totalPages = function(total) {
+    this.$description.totalPages = total;
+    return this;
+};
+
+Pagination.prototype.pageSize = function(size) {
+    this.$description.pageSize = size;
+    return this;
+};
+
+Pagination.prototype.totalItems = function(total) {
+    this.$description.totalItems = total;
+    this.totalPages(Math.ceil(total / this.$description.pageSize));
+    return this;
+};
+
+Pagination.prototype.siblingCount = function(count) {
+    this.$description.siblingCount = count;
+    return this;
+};
+
+Pagination.prototype.boundaryCount = function(count) {
+    this.$description.boundaryCount = count;
+    return this;
+};
+
+Pagination.prototype.showFirstLast = function(show = true) {
+    this.$description.showFirstLast = show;
+    return this;
+};
+
+Pagination.prototype.showPreviousNext = function(show = true) {
+    this.$description.showPreviousNext = show;
+    return this;
+};
+
+Pagination.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = disabled;
+    return this;
+};
+
+Pagination.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+Pagination.prototype.goToPage = function(page) {
+    if (page < 1 || page > this.$description.totalPages) {
+        return this;
+    }
+
+    this.$description.currentPage.set(page);
+    this.emit('pageChange', page);
+    return this;
+};
+
+Pagination.prototype.next = function() {
+    const current = this.$description.currentPage.val();
+    return this.goToPage(current + 1);
+};
+
+Pagination.prototype.previous = function() {
+    const current = this.$description.currentPage.val();
+    return this.goToPage(current - 1)
+};
+
+Pagination.prototype.first = function() {
+    return this.goToPage(1);
+};
+
+Pagination.prototype.last = function() {
+    return this.goToPage(this.$description.totalPages);
+};
+
+Pagination.prototype.hasNext = function() {
+    return this.$description.currentPage.val() < this.$description.totalPages;
+};
+
+Pagination.prototype.hasPrevious = function() {
+    return this.$description.currentPage.val() > 1;
+};
+
+Pagination.prototype.$updatePages = function() {
+    this.$description.pages.set(this.getPageNumbers());
+};
+
+Pagination.prototype.getPageNumbers = function() {
+    const current = this.$description.currentPage.val();
+    const total = this.$description.totalPages;
+    const siblings = this.$description.siblingCount;
+    const boundary = this.$description.boundaryCount;
+
+    const pages = [];
+
+    const leftSiblingIndex = Math.max(current - siblings, boundary + 1);
+    const rightSiblingIndex = Math.min(current + siblings, total - boundary);
+
+    const showLeftEllipsis = leftSiblingIndex > boundary + 2;
+    const showRightEllipsis = rightSiblingIndex < total - boundary - 1;
+
+    for (let i = 1; i <= boundary; i++) {
+        pages.push(i);
+    }
+
+    if (showLeftEllipsis) {
+        pages.push('...');
+    }
+    else {
+        for (let i = boundary + 1; i < leftSiblingIndex; i++) {
+            pages.push(i);
+        }
+    }
+
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        pages.push(i);
+    }
+
+    if (showRightEllipsis) {
+        pages.push('...');
+    }
+    else {
+        for (let i = rightSiblingIndex + 1; i < total - boundary + 1; i++) {
+            pages.push(i);
+        }
+    }
+
+    for (let i = Math.max(total - boundary + 1, boundary + 1); i <= total; i++) {
+        if (!pages.includes(i)) {
+            pages.push(i);
+        }
+    }
+
+    return pages;
+};
+
+Pagination.prototype.onPageChange = function(handler) {
+    this.on('pageChange', handler);
+    return this;
+};
+
+Pagination.prototype.onChange = function(handler) {
+    this.on('pageChange', handler);
+    return this;
+};
+
+Pagination.prototype.renderPage = function(renderFn) {
+    this.$description.renderPage = renderFn;
+    return this;
+};
+
+Pagination.prototype.renderEllipsis = function(renderFn) {
+    this.$description.renderEllipsis = renderFn;
+    return this;
+};
+
+Pagination.prototype.renderPrevious = function(renderFn) {
+    this.$description.renderPrevious = renderFn;
+    return this;
+};
+
+Pagination.prototype.renderNext = function(renderFn) {
+    this.$description.renderNext = renderFn;
+    return this;
+};
+
+Pagination.prototype.renderFirst = function(renderFn) {
+    this.$description.renderFirst = renderFn;
+    return this;
+};
+
+Pagination.prototype.renderLast = function(renderFn) {
+    this.$description.renderLast = renderFn;
+    return this;
+};
+
+Pagination.prototype.$build = function() {
+
+    return null;
+};

package/src/components/pagination/index.js

@@ -0,0 +1,5 @@
+import Pagination from "./Pagination";
+
+export {
+    Pagination
+}