native-document 1.0.75 → 1.0.77

package/src/components/stepper/Stepper.js

@@ -0,0 +1,229 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+import {$, Validator} from "@core";
+
+export default function Stepper(config = {}) {
+    if(!(this instanceof Stepper)) {
+        return new Stepper(config);
+    }
+
+    this.$description = {
+        steps: [],
+        currentStep: $(0),
+        orientation: 'horizontal',
+        linear: true,
+        alternativeLabel: false,
+        editable: false,
+        showNumbers: true,
+        showConnector: true,
+        data: null,
+        renderStepIndicator: null,
+        renderStepIndicatorConnector: null,
+        renderContent: null,
+        render: null,
+        ...config
+    };
+
+    this.$element = null;
+}
+
+BaseComponent.extends(Stepper, EventEmitter);
+
+Stepper.defaultTemplate = null;
+Stepper.defaultStepTemplate = null;
+Stepper.defaultStepConnectorTemplate = null;
+Stepper.defaultContentTemplate = null;
+
+Stepper.use = function(template) {
+    Stepper.defaultTemplate = template.stepper;
+    Stepper.defaultStepIndicatorTemplate = template.stepperStepIndicator;
+    Stepper.defaultContentTemplate = template.stepperContent;
+    Stepper.defaultStepIndicatorConnectorTemplate = template.stepperStepIndicatorConnector;
+};
+
+Stepper.prototype.dynamic = function(observableArray) {
+    this.$description.steps = observableArray || $.array([]);
+    return this;
+};
+
+Stepper.prototype.steps = function(steps) {
+    if(Validator.isObservable(steps)) {
+        this.$description.steps = steps;
+        return this;
+    }
+    this.$description.steps.set(steps);
+    return this;
+};
+
+Stepper.prototype.step = function(step) {
+    this.$description.steps.push(step);
+    return this;
+};
+
+Stepper.prototype.clear = function() {
+    const steps = this.$description.steps;
+    if (Array.isArray(steps)) {
+        steps.length = 0;
+        return this;
+    }
+
+    steps.clear();
+    return this;
+};
+
+Stepper.prototype.removeStepByIndex = function(index) {
+    this.$description.steps.splice(index, 1);
+    return this;
+};
+
+Stepper.prototype.removeStepByKey = function(key) {
+    const index = this.$description.steps.findIndex(step => step.getKey() === key);
+    if(index === -1) {
+        return this;
+    }
+    this.$description.steps.splice(index, 1);
+    return this;
+};
+
+Stepper.prototype.currentStep = function(step) {
+    return this.$description.currentStep.val();
+};
+
+Stepper.prototype.orientation = function(orientation) {
+    this.$description.orientation = orientation;
+    return this;
+};
+
+Stepper.prototype.horizontal = function() {
+    this.$description.orientation = 'horizontal';
+    return this;
+};
+
+Stepper.prototype.vertical = function() {
+    this.$description.orientation = 'vertical';
+    return this;
+};
+
+Stepper.prototype.linear = function() {
+    this.$description.linear = true;
+    return this;
+};
+
+Stepper.prototype.nonLinear = function() {
+    this.$description.linear = false;
+    return this;
+};
+
+Stepper.prototype.editable = function(editable = true) {
+    this.$description.editable = editable;
+    return this;
+};
+
+Stepper.prototype.alternativeLabel = function(alternative = true) {
+    this.$description.alternativeLabel = alternative;
+    return this;
+};
+
+Stepper.prototype.showNumbers = function(show = true) {
+    this.$description.showNumbers = show;
+    return this;
+};
+
+Stepper.prototype.showConnector = function(show = true) {
+    this.$description.showConnector = show;
+    return this;
+};
+
+
+Stepper.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+Stepper.prototype.next = function() {
+    const current = this.$description.currentStep.val();
+    const total = this.$description.steps.length;
+
+    if (current < total - 1) {
+        const nextStep = current + 1;
+        this.$description.currentStep.set(nextStep);
+        this.emit('stepChange', nextStep);
+    }
+    return this;
+};
+
+Stepper.prototype.previous = function() {
+    const current = this.$description.currentStep.val();
+    if (current > 0) {
+        const previousStep = current - 1;
+        this.$description.currentStep.set(previousStep);
+        this.emit('stepChange', previousStep);
+    }
+    return this;
+};
+
+Stepper.prototype.goToStep = function(index) {
+    const total = this.$description.steps.length;
+    const current = this.$description.currentStep.val();
+
+    if (index < 0 || index >= total) {
+        return this;
+    }
+
+    if(!this.$description.editable && index < current) {
+        return this;
+    }
+    if(this.$description.linear && !(index === current+1 || index === current-1)) {
+        return this;
+
+    }
+    this.$description.currentStep.set(index);
+    this.emit('stepChange', index);
+    return this;
+};
+
+Stepper.prototype.reset = function() {
+    this.$description.currentStep.set(0);
+    this.emit('reset');
+    return this;
+};
+
+Stepper.prototype.onStepChange = function(handler) {
+    this.on('stepChange', handler);
+    return this;
+};
+
+Stepper.prototype.onNext = function(handler) {
+    this.on('next', handler);
+    return this;
+};
+
+Stepper.prototype.onPrevious = function(handler) {
+    this.on('previous', handler);
+    return this;
+};
+
+Stepper.prototype.onComplete = function(handler) {
+    this.on('complete', handler);
+    return this;
+};
+
+Stepper.prototype.onReset = function(handler) {
+    this.on('reset', handler);
+    return this;
+};
+
+Stepper.prototype.renderStepIndicator = function(renderFn) {
+    this.$description.renderStepIndicator = renderFn;
+    return this;
+};
+
+Stepper.prototype.renderStepIndicatorConnector = function(renderFn) {
+    this.$description.renderStepIndicatorConnector = renderFn;
+    return this;
+};
+
+Stepper.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};

package/src/components/stepper/StepperStep.js

@@ -0,0 +1,103 @@
+import BaseComponent from "@components/BaseComponent";
+import { $ } from '@core';
+
+export default function StepperStep(label, config = {}) {
+    if(!(this instanceof StepperStep)) {
+        return new StepperStep(label, config);
+    }
+
+    this.$description = {
+        icon: null,
+        label: label,
+        description: null,
+        content: null,
+        status: $('pending'),
+        optional: $(false),
+        disabled: $(false),
+        completed: $(false),
+        error: $(false),
+        data: null,
+        render: null,
+        validator: null,
+        key: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(StepperStep);
+
+StepperStep.defaultTemplate = null;
+
+StepperStep.use = function(template) {
+    StepperStep.defaultTemplate = template.stepperStep;
+};
+
+StepperStep.prototype.icon = function(icon) {
+    this.$description.icon = icon;
+    return this;
+};
+
+StepperStep.prototype.label = function(label) {
+    this.$description.label = label;
+    return this;
+};
+
+StepperStep.prototype.description = function(description) {
+    this.$description.description = description;
+    return this;
+};
+
+StepperStep.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+StepperStep.prototype.status = function(status) {
+    this.$description.status.set(status);
+    return this;
+};
+
+StepperStep.prototype.optional = function(optional = true) {
+    this.$description.optional.set(optional);
+    return this;
+};
+
+StepperStep.prototype.disabled = function(disabled = true) {
+    this.$description.disabled.set(disabled);
+    return this;
+};
+
+StepperStep.prototype.completed = function(completed = true) {
+    this.$description.completed.set(completed);
+    this.$description.status.set(completed ? 'completed' : 'pending');
+    return this;
+};
+
+StepperStep.prototype.error = function(error = true) {
+    this.$description.error.set(error);
+    this.$description.status.set(error ? 'error' : 'pending');
+    return this;
+};
+
+StepperStep.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+StepperStep.prototype.key = function(key) {
+    this.$description.key = key;
+    return this;
+};
+
+StepperStep.prototype.getKey = function() {
+    return this.$description.key;
+};
+
+StepperStep.prototype.validator = function(validatorFn) {
+    this.$description.validator = validatorFn;
+    return this;
+};
+
+StepperStep.prototype.validate = function() {
+    return true;
+};

package/src/components/stepper/index.js

@@ -0,0 +1,8 @@
+import Stepper from "./Stepper";
+import StepperStep from "./StepperStep";
+
+
+export {
+    Stepper,
+    StepperStep
+}

package/src/components/switch/Switch.js

@@ -0,0 +1,99 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+function Switch(config = {}) {
+    if (!(this instanceof Switch)) {
+        return new Switch(config);
+    }
+
+    this.$description = {
+
+    };
+}
+
+BaseComponent.extends(Switch, EventEmitter);
+
+// Theming
+Switch.defaultTemplate = null;
+Switch.use = function(template) {
+
+};
+
+Switch.prototype.model = function(value) {};
+Switch.prototype.value = function() {};
+
+Switch.prototype.label = function(label) {};
+Switch.prototype.labelPosition = function(position) {};
+
+Switch.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+Switch.prototype.primary = function() {
+    return this.variant('primary');
+};
+Switch.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+Switch.prototype.danger = function() {
+    return this.variant('danger');
+};
+Switch.prototype.success = function() {
+    return this.variant('success');
+};
+Switch.prototype.warning = function() {
+    return this.variant('warning');
+};
+Switch.prototype.ghost = function() {
+    return this.variant('ghost');
+};
+Switch.prototype.link = function() {
+    return this.variant('link');
+};
+Switch.prototype.outline = function() {
+    this.$description.outline = true;
+    return this;
+};
+
+Switch.prototype.disabled = function(condition = true) {
+    this.$description.disabled = condition;
+    return this;
+};
+Switch.prototype.loading = function(isLoading = true) {
+    this.$description.loading = isLoading;
+    return this;
+};
+Switch.prototype.readonly = function(condition = true) {
+    this.$description.readonly = condition;
+    return this;
+};
+
+Switch.prototype.icon = function(onIcon, offIcon) {};
+
+Switch.prototype.toggle = function() {};
+Switch.prototype.on = function() {};
+Switch.prototype.off = function() {};
+
+Switch.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+};
+Switch.prototype.onOn = function(handler) {
+    this.on('on', handler);
+    return this;
+};
+Switch.prototype.onOff = function(handler) {
+    this.on('off', handler);
+    return this;
+};
+
+// Render
+Switch.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Switch.prototype.$build = function() {
+
+};
+Switch.prototype.toNdElement = function() {};

package/src/components/table/ColumnGroup.js

@@ -1,5 +1,5 @@
 import Column from "./Column";
-import { THeadCell } from "../../../elements";
+import { THeadCell } from "@elements";
 
 export default function ColumnGroup(title, configs = {}) {
     this.$description = {

package/src/components/table/DataTable.js

@@ -1,5 +1,5 @@
 import SimpleTable from "./SimpleTable";
-import { Observable as $ } from "../../../index";
+import { Observable as $ } from "@core";
 
 export default function DataTable(name, configs) {
     SimpleTable.call(this, name, configs);
@@ -14,9 +14,9 @@ export default function DataTable(name, configs) {
         ...configs
     });
 
-    this.$currentPage = null;
-    this.$selectedRows = [];
-    this.$expandedRows = [];
+    this.$currentPage = $(1);
+    this.$selectedRows = $.array();
+    this.$expandedRows = $.array();
 }
 
 DataTable.defaultToolbarTemplate = null;
@@ -35,9 +35,6 @@ DataTable.prototype.constructor = DataTable;
 
 DataTable.prototype.paginate = function(size) {
     this.$description.pageSize = size;
-    if(size > 0) {
-        this.$currentPage = $(1);
-    }
     return this;
 };
 
@@ -107,7 +104,7 @@ DataTable.prototype.goToLastPage = function(page) {
     return this;
 };
 
-DataTable.prototype.goToFistPage = function(page) {
+DataTable.prototype.goToFirstPage = function(page) {
     // TODO: implement this action
     return this;
 };

package/src/components/table/SimpleTable.js

@@ -1,6 +1,6 @@
 import Column from "./Column";
 import ColumnGroup from "./ColumnGroup";
-import {Table, TFoot, TRow} from "../../../elements";
+import { Table, TFoot, TRow } from "@elements";
 import DataTable from "./DataTable";
 
 
@@ -122,37 +122,6 @@ SimpleTable.prototype.buildTable = function(slots = {}) {
     ]);
 };
 
-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();
-};
-
 SimpleTable.prototype.onClick = function(callback) {
     this.$description.onClick = callback;
 };
@@ -182,3 +151,38 @@ 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

@@ -0,0 +1,110 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+
+export default function Tabs(config = {}) {
+    if(!(this instanceof Tabs)) {
+        return new Tabs();
+    }
+    BaseComponent.apply(this);
+    this.$description = {
+        active: $(''),
+        tabs: {},
+        ...config,
+    };
+
+    this.tabsMap = {};
+}
+
+BaseComponent.extends(Tabs, EventEmitter);
+
+Tabs.defaultTemplate = null;
+Tabs.defaultTabTemplate = null;
+Tabs.defaultNavigationBarTemplate = null;
+
+Tabs.use = function(template) {};
+
+Tabs.prototype.activateTab = function(key) {};
+Tabs.prototype.closeTab = function(key) {};
+
+Tabs.prototype.tab = function(label, content, key) {
+    this.$description.tabs[key] = { label, content };
+    this.tabsMap[key] = content;
+    return this;
+};
+Tabs.prototype.tabs = function(tabs) {
+    for(const item of tabs) {
+        this.tab(item.label, item.content, item.key);
+    }
+    return this;
+};
+Tabs.prototype.removeTab = 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]);
+    return this;
+};
+
+Tabs.prototype.active = function(key) {
+    this.$description.active.set(key);
+};
+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');
+};
+Tabs.prototype.navigationBarAtRight = function() {
+    return this.navigationBarPosition('right');
+};
+Tabs.prototype.navigationBarAtTop = function() {
+    return this.navigationBarPosition('top');
+}
+Tabs.prototype.navigationBarAsDock = function() {
+    return this.navigationBarPosition('dock');
+};
+
+// Events
+Tabs.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+};
+Tabs.prototype.onBeforeChange = function(handler) {
+    this.on('beforeChange', handler);
+    return this;
+};
+Tabs.prototype.onTabClick = function(handler) {
+    this.on('tabClick', handler);
+    return this;
+};
+Tabs.prototype.onTabClose = function(handler) {
+    this.on('tabClose', handler);
+    return this;
+};
+
+
+Tabs.prototype.renderTab = function(renderFn) {
+    this.$description.renderTab = renderFn;
+    return this;
+};
+Tabs.prototype.renderNavigationBar = function(renderFn) {
+    return this.$description.renderNavigationBar = renderFn;
+};
+
+Tabs.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};
+
+Tabs.prototype.$build = function() {
+
+};
+
+Tabs.prototype.toNdElement = function() {
+
+};

package/src/components/tabs/index.js

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