native-document 1.0.138 → 1.0.140

package/src/components/table/SimpleTable.js

@@ -1,52 +1,37 @@
 import Column from "./Column";
 import ColumnGroup from "./ColumnGroup";
-import { Table, TFoot, TRow } from "../../../elements";
-import DataTable from "./DataTable";
+import BaseComponent from "../BaseComponent";
 
+export default function SimpleTable(props = {}) {
+    if(!(this instanceof SimpleTable)) {
+        return new SimpleTable(props);
+    }
+
+    BaseComponent.call(this, props);
 
-export default function SimpleTable(configs = {}) {
     this.$description = {
-        header: [],
-        columns: [],
-        hasGroups: false,
-        rowTemplate: null,
-        tableTemplate: null,
-        data: null,
-        layout: null,
-        expandable: false,
-        ...configs
+        header:      [],
+        columns:     [],
+        hasGroups:   false,
+        data:        null,
+        empty:       null,
+        onRowClick:  null,
+        rowProps:    null,
+        cellProps:   null,
+        headerProps: null,
     };
-
-    this.$element = null;
-    this.$thead = null;
-    this.$tbody = null;
-    this.$tfoot = null;
 }
 
-SimpleTable.defaultTableTemplate = null;
-SimpleTable.defaultRowTemplate = null;
-SimpleTable.defaultEmptyTemplate = null;
+BaseComponent.extends(SimpleTable);
+
+SimpleTable.defaultTemplate = null;
 
-/**
- *
- * @param {{
- * column: { header: string|Function|null, render: string|Function|null },
- * columnGroup: { header: string|Function|null },
- * row: string|Function|null,
- * table: string|Function|null
- * empty: string|Function|null
- * }} template
- */
 SimpleTable.use = function(template) {
-    Column.use(template.column || {});
-    ColumnGroup.use(template.columnGroup || {});
-    SimpleTable.defaultRowTemplate = template.row || SimpleTable.defaultRowTemplate;
-    SimpleTable.defaultTableTemplate = template.table || SimpleTable.defaultTableTemplate;
-    SimpleTable.defaultEmptyTemplate = template.empty || SimpleTable.defaultEmptyTemplate;
+    SimpleTable.defaultTemplate = template;
 };
 
-SimpleTable.create = function(configs) {
-    return new SimpleTable(configs);
+SimpleTable.create = function(props) {
+    return new SimpleTable(props);
 };
 
 SimpleTable.prototype.column = function(key, title, callback) {
@@ -67,122 +52,22 @@ SimpleTable.prototype.group = function(title, callback) {
     return this;
 };
 
-SimpleTable.prototype.columns = function(columnsArray) {
-    columnsArray.forEach(column => this.column(column.key, column.title, column.callback));
-    return this;
-};
-
 SimpleTable.prototype.data = function(data) {
     this.$description.data = data;
     return this;
 };
 
-DataTable.prototype.expandable = function() {
-    this.$description.expandable = true
+SimpleTable.prototype.empty = function(content) {
+    this.$description.empty = content;
     return this;
 };
 
-SimpleTable.prototype.renderRow = function(template) {
-    this.$description.rowTemplate = template;
+SimpleTable.prototype.onRowClick = function(handler) {
+    this.$description.onRowClick = handler;
     return this;
-}
-
-SimpleTable.prototype.buildRow = function(rowData) {
-    const rowTemplate = this.$description.rowTemplate || SimpleTable.defaultRowTemplate;
-
-    if(typeof rowTemplate === 'function') {
-        return rowTemplate(rowData, this);
-    }
-
-    return TRow(this.$description.columns.map(
-        column => TBodyCell({}, column.buildCell(rowData))
-    ));
 };
 
-SimpleTable.prototype.renderTable = function(template) {
-    this.$description.tableTemplate = template;
+SimpleTable.prototype.rowProps = function(fn) {
+    this.$description.rowProps = fn;
     return this;
-};
-
-SimpleTable.prototype.buildTable = function(slots = {}) {
-    const { headerRows } = slots;
-
-    const tableTemplate = this.$description.tableTemplate || SimpleTable.defaultTableTemplate;
-    if(typeof tableTemplate === 'function') {
-        return tableTemplate(slots, this);
-    }
-
-    return Table({ border: 2 }, [
-        THead(headerRows),
-        TBody(
-            ForEachArray(this.$description.data, rowData => {
-                return this.buildRow(rowData, this);
-            })
-        )
-    ]);
-};
-
-SimpleTable.prototype.onClick = function(callback) {
-    this.$description.onClick = callback;
-};
-
-
-
-//-----------------------------------------------------------------
-// Expandable Actions
-//-----------------------------------------------------------------
-
-DataTable.prototype.expand = function(row) {
-    // TODO: implement this action
-    return this;
-};
-
-DataTable.prototype.collapse = function(row) {
-    // TODO: implement this action
-    return this;
-};
-
-DataTable.prototype.collapseAll = function() {
-    // TODO: implement this action
-    return this;
-};
-
-DataTable.prototype.isRowExpanded = function(row) {
-    // TODO: implement this action
-    return this;
-};
-
-
-//
-
-
-SimpleTable.prototype.$build = function() {
-    const header = [];
-    if(this.$description.hasGroups) {
-        const firstRow = [];
-        const secondRow = [];
-
-        this.$description.header.forEach(columnOrGroup => {
-            if(columnOrGroup.isGroup) {
-                const columns = columnOrGroup.columns();
-                firstRow.push(columnOrGroup.buildHeader());
-                secondRow.push(columns.map(column => THeadCell({}, column.buildHeader())));
-            } else {
-                firstRow.push(columnOrGroup.buildHeader(2));
-            }
-        });
-
-        header.push(TRow(firstRow));
-        header.push(TRow(secondRow));
-    } else {
-        header.push(TRow(
-            this.$description.columns.map(column => column.buildHeader())
-        ));
-    }
-
-    return this.buildTable({ headerRows: header });
-};
-
-SimpleTable.prototype.toNdElement = function() {
-    return this.$build();
 };

package/src/components/tabs/Tabs.js

@@ -1,110 +1,208 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import { $ } from "../../../index";
 
 
-export default function Tabs(config = {}) {
+export default function Tabs(props = {}) {
     if(!(this instanceof Tabs)) {
         return new Tabs();
     }
-    BaseComponent.apply(this);
+    BaseComponent.apply(this, props);
     this.$description = {
         active: $(''),
         tabs: {},
-        ...config,
+        sortable: false,
+        tabAppearance: 'segmented',
+        addPlusButton: null,
+        addPLusCallback: null,
+        stickyHeader: false,
+        overflow: 'scroll',
+        navigationBarPosition: 'top',
+        tabsAlignment: 'leading',
+        closable: false,
+        focusOnNewTab: false,
+        closeIcon: null,
+        renderCloseButton: null,
+        renderPlusButton: null,
+        props,
     };
-
-    this.tabsMap = {};
 }
 
-BaseComponent.extends(Tabs, HasEventEmitter);
+BaseComponent.extends(Tabs);
+BaseComponent.use(Tabs, HasEventEmitter);
 
 Tabs.defaultTemplate = null;
-Tabs.defaultTabTemplate = null;
-Tabs.defaultNavigationBarTemplate = null;
 
-Tabs.use = function(template) {};
+Tabs.use = function(template) {
+    Tabs.defaultTemplate = template;
+};
 
-Tabs.prototype.activateTab = function(key) {};
-Tabs.prototype.closeTab = function(key) {};
+Tabs.prototype.parentEmit = HasEventEmitter.prototype.emit;
+Tabs.prototype.emit = function(eventName, ...args) {
+    this.parentEmit.call(this, eventName, ...args);
+    this.parentEmit.call(this, 'change');
+};
 
-Tabs.prototype.tab = function(label, content, key) {
-    this.$description.tabs[key] = { label, content };
-    this.tabsMap[key] = content;
+Tabs.prototype.sortable = function() {
+    this.$description.sortable = true;
+    return this;
+};
+Tabs.prototype.pills = function() {
+    this.$description.tabAppearance = 'pills';
+    return this;
+};
+Tabs.prototype.segmented = function() {
+    this.$description.tabAppearance = 'segmented';
+    return this;
+};
+
+Tabs.prototype.addPlusButton = function(callback) {
+    this.$description.addPlusButton = true;
+    this.$description.addPLusCallback = callback;
+    return this;
+};
+
+Tabs.prototype.closable = function(mode = true) {
+    this.$description.closable = mode;
+    return this;
+};
+
+Tabs.prototype.renderCloseButton = function(renderFn) {
+    this.$description.renderCloseButton = renderFn;
+    return this;
+};
+
+Tabs.prototype.renderPlusButton = function(renderFn) {
+    this.$description.renderPlusButton = renderFn;
+    return this;
+};
+
+Tabs.prototype.overflow = function(overflow) {
+    this.$description.overflow = overflow;
+    return this;
+};
+
+Tabs.prototype.scrollOnTabOverflow = function() {
+    this.$description.overflow = 'scroll';
+    return this;
+};
+
+Tabs.prototype.menuOnTabOverflow = function() {
+    this.$description.overflow = 'menu';
+    return this;
+};
+
+Tabs.prototype.focusOnNewTab = function(mode = true) {
+    this.$description.focusOnNewTab = mode;
+    return this;
+};
+
+Tabs.prototype.stickyHeader = function(mode = true) {
+    this.$description.stickyHeader = mode;
+    return this;
+};
+
+Tabs.prototype.addTab = function(icon, label, content, key) {
+    const tab = { icon, label, content, key };
+    this.$description.tabs[key] = tab;
+    this.emit('addTab', tab);
     return this;
 };
+
+Tabs.prototype.tab = function(label, content, key) {
+    return this.addTab(null, label, content, key);
+};
+
+Tabs.prototype.tabWithIcon = function(icon, label, content, key) {
+    return this.addTab(icon, label, content, key);
+};
+
 Tabs.prototype.tabs = function(tabs) {
     for(const item of tabs) {
-        this.tab(item.label, item.content, item.key);
+        this.addTab(item.icon, item.label, item.content, item.key);
     }
     return this;
 };
-Tabs.prototype.removeTab = function(key) {
+Tabs.prototype.closeTab = function(key) {
     delete this.$description.tabs[key];
-    delete this.tabsMap[key];
-    // Todo: remove tab from Match element
-    this.active(Object.keys(this.$description.tabs)[0]);
+    this.emit('closeTab', key);
     return this;
 };
 
 Tabs.prototype.active = function(key) {
     this.$description.active.set(key);
+    return this;
 };
-Tabs.prototype.defaultActive = function(key) {};
-Tabs.prototype.getActive = function() {};
 
 Tabs.prototype.navigationBarPosition = function(position) {
     this.$description.navigationBarPosition = position;
     return this;
 };
 Tabs.prototype.navigationBarAtLeft = function() {
-    return this.navigationBarPosition('left');
+    this.$description.navigationBarPosition = 'left';
+    return this;
 };
 Tabs.prototype.navigationBarAtRight = function() {
-    return this.navigationBarPosition('right');
+    this.$description.navigationBarPosition = 'right';
+    return this;
 };
 Tabs.prototype.navigationBarAtTop = function() {
-    return this.navigationBarPosition('top');
+    this.$description.navigationBarPosition = 'top';
+    return this;
 }
 Tabs.prototype.navigationBarAsDock = function() {
-    return this.navigationBarPosition('dock');
+    this.$description.navigationBarPosition = 'dock';
+    return this;
 };
 
-// Events
-Tabs.prototype.onChange = function(handler) {
-    this.on('change', handler);
+Tabs.prototype.tabsAtLeading = function() {
+    this.$description.tabsAlignment = 'leading';
     return this;
 };
-Tabs.prototype.onBeforeChange = function(handler) {
-    this.on('beforeChange', handler);
+
+Tabs.prototype.tabsAtTrailing = function() {
+    this.$description.tabsAlignment = 'trailing';
     return this;
 };
-Tabs.prototype.onTabClick = function(handler) {
-    this.on('tabClick', handler);
+Tabs.prototype.tabsAtCenter = function() {
+    this.$description.tabsAlignment = 'center';
     return this;
 };
-Tabs.prototype.onTabClose = function(handler) {
-    this.on('tabClose', handler);
+Tabs.prototype.tabsJustified = function() {
+    this.$description.tabsAlignment = 'justified';
     return this;
 };
 
-
-Tabs.prototype.renderTab = function(renderFn) {
-    this.$description.renderTab = renderFn;
+// Events
+Tabs.prototype.onChange = function(handler) {
+    this.on('change', handler);
     return this;
 };
-Tabs.prototype.renderNavigationBar = function(renderFn) {
-    return this.$description.renderNavigationBar = renderFn;
+Tabs.prototype.onBeforeTabClose = function(handler) {
+    this.on('beforeTabClose', handler);
+    return this;
 };
 
-Tabs.prototype.layout = function(layoutFn) {
-    this.$description.layout = layoutFn;
+Tabs.prototype.onClickTab = function(handler) {
+    this.on('clickTab', handler);
     return this;
 };
 
-Tabs.prototype.$build = function() {
+Tabs.prototype.onCloseTab = function(handler) {
+    this.on('closeTab', handler);
+    return this;
+};
 
+Tabs.prototype.onAddTab = function(handler) {
+    this.on('addTab', handler);
+    return this;
 };
 
-Tabs.prototype.toNdElement = function() {
 
-};
+Tabs.prototype.renderTab = function(renderFn) {
+    this.$description.renderTab = renderFn;
+    return this;
+};
+Tabs.prototype.renderNavigationBar = function(renderFn) {
+    return this.$description.renderNavigationBar = renderFn;
+};

package/src/components/toast/Toast.js

@@ -1,31 +1,38 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import {Observable} from "../../../index";
 
-export default function Toast(message, config = {}) {
+export default function Toast(content, props = {}) {
     if (!(this instanceof Toast)) {
-        return new Toast(message, config);
+        return new Toast(content, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
+        visibility: Observable(true),
         type: null,
         title: null,
-        content: null,
+        content,
         icon: null,
         showIcon: true,
-        duration: 3000,
+        duration: 5000,
         closable: true,
         pauseOnHover: true,
-        position: 'top-right',
+        position: 'top-trailing',
         actions: [],
         render: null,
-        ...config
+        props
     };
 }
 
-BaseComponent.extends(Toast, HasEventEmitter);
+BaseComponent.extends(Toast);
+BaseComponent.use(Toast, HasEventEmitter);
 
-Toast.use = function(template) {};
 Toast.defaultTemplate = null;
+Toast.use = function(template) {
+    Toast.defaultTemplate = template;
+};
 
 // Types
 Toast.prototype.type = function(type) {
@@ -33,16 +40,20 @@ Toast.prototype.type = function(type) {
     return this;
 };
 Toast.prototype.info = function() {
-    return this.type('info');
+    this.$description.type = 'info';
+    return this;
 };
 Toast.prototype.success = function() {
-    return this.type('success');
+    this.$description.type = 'success';
+    return this;
 };
 Toast.prototype.warning = function() {
-    return this.type('warning');
+    this.$description.type = 'warning';
+    return this;
 };
 Toast.prototype.error = function() {
-    return this.type('error');
+    this.$description.type = 'error';
+    return this;
 };
 
 
@@ -83,18 +94,19 @@ Toast.prototype.position = function(position) {
     this.$description.position = position;
     return this;
 };
-Toast.prototype.atTopStart = function() {
-    return this.position('top-start');
+
+Toast.prototype.atTopLeading = function() {
+    return this.position('top-leading');
 };
 
-Toast.prototype.atTopEnd = function() {
-    return this.position('top-end');
+Toast.prototype.atTopTrailing = function() {
+    return this.position('top-trailing');
 };
-Toast.prototype.atBottomStart = function() {
-    return this.position('bottom-start');
+Toast.prototype.atBottomLeading = function() {
+    return this.position('bottom-leading');
 };
-Toast.prototype.atBottomEnd = function() {
-    return this.position('bottom-end');
+Toast.prototype.atBottomTrailing = function() {
+    return this.position('bottom-trailing');
 };
 Toast.prototype.atTopCenter = function() {
     return this.position('top-center');
@@ -103,27 +115,20 @@ Toast.prototype.atBottomCenter = function() {
     return this.position('bottom-center');
 };
 
-Toast.prototype.clearActions = function() {
-    this.$description.actions = [];
+Toast.prototype.action = function(label, handler, variant = null) {
+    handler = handler || (() => this.close());
+    this.$description.actions.push({ label, handler, variant });
     return this;
 };
-Toast.prototype.action = function(label, handler) {
-    this.$description.actions.push({ label, handler });
-    return this;
+
+Toast.prototype.close = function() {
+    this.$description.visibility?.set(false);
+    this.emit('close');
 };
 
-Toast.prototype.close = function() {};
 Toast.prototype.onClose = function(handler) {
     this.on('close', handler);
     return this;
 };
 
-Toast.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
-};
-
-Toast.prototype.$build = function() {
-
-};
-Toast.prototype.toNdElement = function() {};
+Toast.prototype.show = BaseComponent.prototype.toNdElement;