native-document 1.0.76 → 1.0.78

package/src/components/spinner/Spinner.js

@@ -0,0 +1,160 @@
+
+export default function Spinner(config = {}) {
+    if (!(this instanceof Spinner)) {
+        return new Spinner(config);
+    }
+
+    this.$description = {
+        type: 'circle',
+        variant: null,
+        color: null,
+        size: 'small',
+        label: null,
+        labelPosition: null,
+        overlay: null,
+        backdrop: null,
+        render: null,
+        loading: null,
+        speed: null,
+        ...config
+    };
+}
+
+Spinner.use = function(template) {};
+Spinner.defaultTemplate = null;
+
+Spinner.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+
+Spinner.prototype.circle = function() {
+    return this.type('circle');
+};
+Spinner.prototype.dots = function() {
+    return this.type('dots');
+};
+Spinner.prototype.bars = function() {
+    return this.type('bars');
+};
+Spinner.prototype.pulse = function() {
+    return this.type('pulse');
+};
+Spinner.prototype.ring = function() {
+    return this.type('ring');
+};
+
+/**
+ * @param {string|int} size
+ * @returns {Spinner}
+ */
+Spinner.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+Spinner.prototype.extraSmall = function() {
+    return this.size('extra-small');
+};
+Spinner.prototype.small = function() {
+    return this.size('small');
+};
+Spinner.prototype.medium = function() {
+    return this.size('medium');
+};
+Spinner.prototype.large = function() {
+    return this.size('large');
+};
+Spinner.prototype.extraLarge = function() {
+    return this.size('extra-large');
+};
+
+Spinner.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+Spinner.prototype.primary = function() {
+    return this.variant('primary');
+};
+Spinner.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+Spinner.prototype.success = function() {
+    return this.variant('success');
+};
+Spinner.prototype.danger = function() {
+    return this.variant('danger');
+};
+Spinner.prototype.warning = function() {
+    return this.variant('warning');
+}
+Spinner.prototype.color = function(color) {
+    this.$description.color = color;
+    return this;
+};
+
+Spinner.prototype.label = function(label) {
+    this.$description.label = label;
+    return this;
+};
+Spinner.prototype.labelPosition = function(position) {
+    this.$description.labelPosition = position;
+    return this;
+};
+Spinner.prototype.labelAtTop = function() {
+    return this.labelPosition('top');
+};
+Spinner.prototype.labelAtBottom = function() {
+    return this.labelPosition('bottom');
+};
+Spinner.prototype.labelAtLeft = function() {
+    return this.labelPosition('left');
+};
+Spinner.prototype.labelAtRight = function() {
+    return this.labelPosition('right');
+};
+
+Spinner.prototype.overlay = function(enabled = true) {
+    this.$description.overlay = enabled;
+    return this;
+};
+Spinner.prototype.fullscreen = function() {
+    return this.overlay(true);
+};
+Spinner.prototype.backdrop = function(enabled = true) {
+    this.$description.backdrop = enabled;
+    return this;
+};
+
+/**
+ *
+ * @param {string|int} speed
+ * @returns {Spinner}
+ */
+Spinner.prototype.speed = function(speed) {
+    this.$description.speed = speed;
+    return this;
+};
+Spinner.prototype.slow = function() {
+    return this.speed('slow');
+};
+Spinner.prototype.normal = function() {
+    return this.speed('normal');
+};
+Spinner.prototype.fast = function() {
+    return this.speed('fast');
+};
+Spinner.prototype.loading = function(isLoading) {
+    this.$description.loading = isLoading;
+    return this;
+};
+
+Spinner.prototype.show = function() {};
+Spinner.prototype.hide = function() {};
+
+Spinner.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};
+
+Spinner.prototype.$build = function() {};
+Spinner.prototype.toNdElement = function() {};

package/src/components/spinner/index.js

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

package/src/components/splitter/Splitter.js

@@ -0,0 +1,94 @@
+import BaseComponent from "../BaseComponent";
+import EventEmitter from "../../../src/core/utils/EventEmitter";
+import {Validator} from "../../../index";
+
+export default function Splitter(config = {}) {
+    if(!(this instanceof Splitter)) {
+        return new Splitter(config);
+    }
+
+    this.$description = {
+        orientation: 'horizontal',
+        panels: [],
+        gutterSize: 8,
+        render: null,
+        ...config
+    };
+
+    this.$element = null;
+}
+
+BaseComponent.extends(Splitter, EventEmitter);
+
+Splitter.defaultTemplate = null;
+
+Splitter.use = function(template) {
+    Splitter.defaultTemplate = template.splitter;
+};
+
+Splitter.prototype.dynamic = function(){
+    this.$description.panels = $.array([]);
+    return this;
+};
+
+Splitter.prototype.orientation = function(orientation) {
+    this.$description.orientation = orientation;
+    return this;
+};
+
+Splitter.prototype.horizontal = function() {
+    this.$description.orientation = 'horizontal';
+    return this;
+};
+
+Splitter.prototype.vertical = function() {
+    this.$description.orientation = 'vertical';
+    return this;
+};
+
+Splitter.prototype.gutterSize = function(gutterSize) {
+    this.$description.gutterSize = gutterSize;
+    return this;
+};
+
+Splitter.prototype.panel = function(panel) {
+    this.$description.panels.push(panel);
+    return this;
+};
+
+Splitter.prototype.panels = function(panels) {
+    if(Validator.isObservable(this.$description.panels)) {
+        this.$description.panels.set(panels);
+        return this;
+    }
+    this.$description.panels = [];
+    panels.forEach(panel => this.panel(panel));
+    return this;
+};
+
+
+Splitter.prototype.removePanel = function(panel) {
+    this.$description.panels.remove(panel);
+    // TODO: remove the unnecessary gutter
+    return this;
+}
+
+Splitter.prototype.onResize = function(handler) {
+    this.on('resize', handler);
+    return this;
+};
+
+Splitter.prototype.onPanelAdd = function(handler) {
+    this.on('panelAdd', handler);
+    return this;
+};
+
+Splitter.prototype.onPanelRemove = function(handler) {
+    this.on('panelRemove', handler);
+    return this;
+};
+
+Splitter.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/splitter/SplitterGutter.js

@@ -0,0 +1,57 @@
+
+
+export default function SplitterGutter(leftPanel, rightPanel, config = {}) {
+    if(!(this instanceof SplitterGutter)) {
+        return new SplitterGutter(config);
+    }
+
+    this.$description = {
+        leftPanel: leftPanel || null,
+        rightPanel: rightPanel || null,
+        orientation: config.orientation || 'horizontal',
+        cursor: config.orientation === 'vertical' ? 'row-resize' : 'col-resize',
+        size: 8,
+        isDragging: $(false)
+    }
+}
+
+SplitterGutter.defaultTemplate = null;
+
+SplitterGutter.use = function(template) {
+    SplitterGutter.defaultTemplate = template.splitterGutter;
+};
+
+SplitterGutter.prototype.panels = function(leftPanel, rightPanel) {
+    this.$description.leftPanel = leftPanel;
+    this.$description.rightPanel = rightPanel;
+    return this;
+};
+
+SplitterGutter.prototype.leftPanel = function(leftPanel) {
+    this.$description.leftPanel = leftPanel;
+    return this;
+};
+SplitterGutter.prototype.rightPanel = function(rightPanel) {
+    this.$description.rightPanel = rightPanel;
+    return this;
+};
+
+SplitterGutter.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+SplitterGutter.prototype.onDragStart = function(handler) {
+    this.on('dragStart', handler);
+    return this;
+};
+
+SplitterGutter.prototype.onDrag = function(handler) {
+    this.on('drag', handler);
+    return this;
+};
+
+SplitterGutter.prototype.onDragEnd = function(handler) {
+    this.on('dragEnd', handler);
+    return this;
+};

package/src/components/splitter/SplitterPanel.js

@@ -0,0 +1,82 @@
+import BaseComponent from "../BaseComponent";
+
+export default function SplitterPanel(content, config = {}) {
+    if(!(this instanceof SplitterPanel)) {
+        return new SplitterPanel(content, config);
+    }
+
+    if (typeof content === 'object' && !content.tagName) {
+        config = content;
+        content = config.content || null;
+    }
+
+    this.$description = {
+        content: content || null,
+        size: null,
+        minSize: null,
+        maxSize: null,
+        collapsible: false,
+        collapsed: false,
+        resizable: true,
+        data: null,
+        render: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(SplitterPanel, BaseComponent);
+
+SplitterPanel.defaultTemplate = null;
+
+SplitterPanel.use = function(template) {
+    SplitterPanel.defaultTemplate = template.splitterPanel;
+};
+
+SplitterPanel.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+SplitterPanel.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+SplitterPanel.prototype.minSize = function(size) {
+    this.$description.minSize = size;
+    return this;
+};
+
+SplitterPanel.prototype.maxSize = function(size) {
+    this.$description.maxSize = size;
+    return this;
+};
+
+SplitterPanel.prototype.collapsible = function(collapsible = true) {
+    this.$description.collapsible = collapsible;
+    return this;
+};
+
+SplitterPanel.prototype.collapsed = function(collapsed = true) {
+    this.$description.collapsed = collapsed;
+    return this;
+};
+
+SplitterPanel.prototype.resizable = function(resizable = true) {
+    this.$description.resizable = resizable;
+    return this;
+};
+
+SplitterPanel.prototype.fixed = function() {
+    return this.resizable(false);
+};
+
+SplitterPanel.prototype.data = function(data) {
+    this.$description.data = data;
+    return this;
+};
+
+SplitterPanel.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+    return this;
+};

package/src/components/splitter/index.js

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

package/src/components/stepper/Stepper.js

@@ -0,0 +1,229 @@
+import BaseComponent from "../BaseComponent";
+import EventEmitter from "../../../src/core/utils/EventEmitter";
+import {$, Validator} from "../../../index";
+
+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;
+};