native-document 1.0.76 → 1.0.77

package/src/components/slider/Slider.js

@@ -0,0 +1,183 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+
+export default function Slider(config = {}) {
+    if (!(this instanceof Slider)) {
+        return new Slider(config);
+    }
+
+    this.$description = {
+        value: null,
+        defaultValue: null,
+        range: null,
+        min: null,
+        max: null,
+        step: null,
+        showValue: null,
+        showTooltip: null,
+        tooltipFormat: null,
+        marks: null,
+        showMarks: null,
+        variant: null,
+        color: null,
+        trackColor: null,
+        vertical: null,
+        height: null,
+        disabled: null,
+        readonly: null,
+        reverse: null,
+        snapToMarks: null,
+        render: null,
+        renderCursor: null,
+        ...config
+    };
+}
+
+BaseComponent.extends(Slider, EventEmitter);
+
+Slider.use = function(template) {};
+Slider.defaultTemplate = null;
+
+
+Slider.prototype.value = function(value) {
+    this.$description.value = value;
+    return this;
+};
+
+Slider.prototype.value = function() {
+    return this.$description.value?.val();
+};
+
+Slider.prototype.setCurrentStep = function(value) {
+    this.$description.value?.set(value);
+    this.emit('change', value);
+    return this;
+};
+
+Slider.prototype.range = function(min, max) {
+    this.$description.range = {min, max};
+    return this;
+};
+
+Slider.prototype.min = function(min) {
+    this.$description.min = min;
+    return this;
+};
+
+Slider.prototype.max = function(max) {
+    this.$description.max = max;
+    return this;
+};
+
+Slider.prototype.step = function(step) {
+    this.$description.step = step;
+    return this;
+};
+
+Slider.prototype.showValue = function(enabled = true) {
+    this.$description.showValue = enabled;
+    return this;
+};
+
+Slider.prototype.showTooltip = function(enabled = true) {
+    this.$description.showTooltip = enabled;
+    return this;
+};
+
+Slider.prototype.tooltipFormat = function(formatFn) {
+    this.$description.tooltipFormat = formatFn;
+    return this;
+};
+
+Slider.prototype.marks = function(marks) {
+    this.$description.marks = marks;
+    return this;
+};
+
+Slider.prototype.showMarks = function(enabled = true) {
+    this.$description.showMarks = enabled;
+    return this;
+};
+
+Slider.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+
+Slider.prototype.primary = function() {
+    return this.variant('primary');
+};
+Slider.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+Slider.prototype.success = function() {
+    return this.variant('success');
+};
+Slider.prototype.warning = function() {
+    return this.variant('warning');
+};
+Slider.prototype.danger = function() {
+    return this.variant('danger');
+};
+Slider.prototype.info = function() {
+    return this.variant('info');
+};
+
+Slider.prototype.vertical = function(enabled = true) {
+    this.$description.vertical = enabled;
+    return this;
+};
+
+Slider.prototype.height = function(height) {
+    this.$description.height = height;
+    return this;
+};
+
+Slider.prototype.disabled = function(condition = true) {
+    this.$description.disabled = condition;
+    return this;
+};
+
+Slider.prototype.readonly = function(condition = true) {
+    this.$description.readonly = condition;
+    return this;
+};
+
+Slider.prototype.reverse = function(enabled = true) {
+    this.$description.reverse = enabled;
+    return this;
+};
+
+Slider.prototype.snapToMarks = function(enabled = true) {
+    this.$description.snapToMarks = enabled;
+    return this;
+};
+
+Slider.prototype.onChange = function(handler) {
+    this.on('change', handler);
+    return this;
+};
+
+Slider.prototype.onComplete = function(handler) {
+    this.on('complete', handler);
+    return this;
+};
+
+
+Slider.prototype.renderCursor = function(renderFn) {
+    this.$description.renderCursor = renderFn;
+    return this;
+};
+
+Slider.prototype.render = function(renderFn) {
+    this.$description.render = renderFn;
+};
+
+
+Slider.prototype.$build = function() {
+    // TODO: Implementation
+};
+
+Slider.prototype.toNdElement = function() {
+    return this.$build();
+};

package/src/components/slider/index.js

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

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,95 @@
+import BaseComponent from "@components/BaseComponent";
+import EventEmitter from "@src/core/utils/EventEmitter";
+import SplitterPanel from "./SplitterPanel";
+import {Validator} from "@core";
+
+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 "@components/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
+}