native-document 1.0.139 → 1.0.141

package/src/components/modal/Modal.js

@@ -1,43 +1,108 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import { Observable } from "../../../index";
+import {NDElement} from "../../core/wrappers/NDElement";
+import HasDraggable from "../$traits/has-draggable/HasDraggable";
+import HasResizable from "../$traits/has-resizable/HasResizable";
+import DebugManager from "../../core/utils/debug-manager";
 
 
-export default function Modal(config = {}) {
+export default function Modal(content, props = {}) {
     if(!(this instanceof Modal)) {
-        return new Modal(config);
+        return new Modal(content, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         centered: true,
         scrollable: false,
         title: null,
-        content: null,
+        content,
         footer: null,
         size: null,
         closeOnBackdrop: true,
         closeOnEscape: true,
         closable: true,
         layout: null,
-        ...config
+        fullscreen: false,
+        draggable: false,
+        dragByHeader: true,
+        resizable: false,
+        resizableOptions: { size: {} },
+        focusTrap: true,
+        lockScroll: true,
+        isOpen: Observable(false),
+        variant: null,
+        props
     };
 }
 
-BaseComponent.extends(Modal, HasEventEmitter);
+BaseComponent.extends(Modal);
+BaseComponent.use(Modal, HasEventEmitter, HasDraggable, HasResizable);
 
 // Theming
-Modal.defaultLayout = null;
-// Modal.defaultBackdrop = null;
-Modal.defaultOverlay = null;
-Modal.defaultHeaderTemplate = null;
-Modal.defaultContentTemplate = null;
-Modal.defaultFooterTemplate = null;
-Modal.use = function(template) {};
+Modal.defaultTemplate = null;
+Modal.use = function(template) {
+    Modal.defaultTemplate = template;
+
+    if(!NDElement.prototype.modal) {
+        NDElement.prototype.modal = function(content, props) {
+            const modal = (content instanceof Modal) ? content : Modal(content, props);
+            modal.toNdElement();
+            this.onClick(() => modal.open());
+            return this;
+        };
+    }
+    if(!BaseComponent.prototype.modal) {
+        BaseComponent.prototype.modal = function(content, props) {
+            this.postBuild(() => {
+                const modal = (content instanceof Modal) ? content : Modal(content, props);
+                modal.toNdElement();
+                this.nd.onClick(() => modal.open());
+            });
+            return this;
+        }
+    }
+};
+
+Modal.prototype.trigger = function(trigger) {
+    this.toNdElement();
+    trigger.nd.onClick(() => this.open());
+    return trigger;
+};
+
+Modal.preset = function(name, callback) {
+    if (Modal.prototype[name] || Modal[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Modal.`);
+        return;
+    }
+    Modal[name] = (content, props) => callback(new Modal(content, props));
+};
+
+Modal.presets = function(presets) {
+    for (const name in presets) {
+        Modal.preset(name, presets[name]);
+    }
+};
 
 
-Modal.prototype.open = function() {};
-Modal.prototype.close = function() {};
-Modal.prototype.isOpen = function() {};
-Modal.prototype.isClose = function() {};
+Modal.prototype.open = function() {
+    this.emit('beforeOpen');
+    this.$description.isOpen.set(true);
+    this.emit('open');
+};
+Modal.prototype.close = function() {
+    this.emit('beforeClose');
+    this.$description.isOpen.set(false);
+    this.emit('close');
+};
+Modal.prototype.isOpen = function() {
+    return this.$description.isOpen.val();
+};
+Modal.prototype.isClose = function() {
+    return !this.isOpen();
+};
 
 // Configuration
 Modal.prototype.title = function(title) {
@@ -77,8 +142,8 @@ Modal.prototype.centered = function() {
     this.$description.centered = true;
     return this;
 };
-Modal.prototype.scrollable = function() {
-    this.$description.scrollable = true;
+Modal.prototype.scrollable = function(scrollable = true) {
+    this.$description.scrollable = scrollable;
     return this;
 };
 
@@ -132,22 +197,87 @@ Modal.prototype.layout = function(layoutFn) {
     return this;
 };
 
-Modal.prototype.$buildHeader = function() {
+Modal.prototype.fullscreen = function(fullscreen = true) {
+    this.$description.fullscreen = fullscreen;
+    return this;
+};
 
+Modal.prototype.draggable = function() {
+    this.$description.draggable = true;
+    return this;
+};
+Modal.prototype.dragByHeader = function() {
+    this.$description.dragByHeader = true;
+    return this;
 };
 
-Modal.prototype.$buildContent = function() {
+Modal.prototype.resizable = function(options = {}) {
+    this.$description.resizable = true;
+    for(const key in options) {
+        this.$description.resizableOptions[key] = options[key];
+    }
+    return this;
+};
+Modal.prototype.resizeDirections = function(directions) {
+    this.$description.resizableOptions.directions = directions;
+    return this;
+};
 
+Modal.prototype.minWidth = function(minWidth) {
+    this.$description.resizableOptions.size.minWidth = minWidth;
+    return this;
 };
 
-Modal.prototype.$buildFooter = function() {
+Modal.prototype.maxWidth = function(maxWidth) {
+    this.$description.resizableOptions.size.maxWidth = maxWidth;
+    return this;
+};
 
+Modal.prototype.minHeight = function(minHeight) {
+    this.$description.resizableOptions.size.minHeight = minHeight;
+    return this;
 };
 
-Modal.prototype.$build = function() {
+Modal.prototype.maxHeight = function(maxHeight) {
+    this.$description.resizableOptions.size.maxHeight = maxHeight;
+    return this;
+};
 
+Modal.prototype.focusTrap = function(focusTrap = true) {
+    this.$description.focusTrap = focusTrap;
+    return this;
+};
+
+Modal.prototype.lockScroll = function(lockScroll = true) {
+    this.$description.lockScroll = lockScroll;
+    return this;
 };
 
-Modal.prototype.toNdElement = function() {
+Modal.prototype.onDragStart = function(handler) {
+    this.on('onDragStart', handler);
+    return this;
+};
 
+Modal.prototype.onDrag = function(handler) {
+    this.on('onDrag', handler);
+    return this;
+};
+
+Modal.prototype.onDragEnd = function(handler) {
+    this.on('onDragEnd', handler);
+    return this;
+};
+Modal.prototype.onResizeStart = function(handler) {
+    this.on('onResizeStart', handler);
+    return this;
+};
+
+Modal.prototype.onResize = function(handler) {
+    this.on('onResize', handler);
+    return this;
+};
+
+Modal.prototype.onResizeEnd = function(handler) {
+    this.on('onResizeEnd', handler);
+    return this;
 };

package/src/components/pagination/Pagination.js

@@ -1,17 +1,21 @@
 import BaseComponent from "../BaseComponent";
+import { $ } from "../../../index";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import DebugManager from "../../core/utils/debug-manager";
 
-export default function Pagination(config = {}) {
+export default function Pagination(props = {}) {
     if(!(this instanceof Pagination)) {
-        return new Pagination(config);
+        return new Pagination(props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         currentPage: $(1),
         pages: $.array([]),
-        totalPages: 1,
-        pageSize: 10,
-        totalItems: 0,
+        totalPages: $(2),
+        pageSize: $(10),
+        totalItems: $(0),
         siblingCount: 1,
         boundaryCount: 1,
         showFirstLast: true,
@@ -25,20 +29,56 @@ export default function Pagination(config = {}) {
         renderFirst: null,
         renderLast: null,
         render: null,
-        ...config
+        props
     };
 
     this.$element = null;
 }
 
-BaseComponent.extends(Pagination, HasEventEmitter);
+BaseComponent.extends(Pagination);
+BaseComponent.use(Pagination, HasEventEmitter);
 
 Pagination.defaultTemplate = null;
 
 Pagination.use = function(template) {
-    Pagination.defaultTemplate = template.pagination;
+    Pagination.defaultTemplate = template;
+};
+
+Pagination.preset = function(name, callback) {
+    if (Pagination.prototype[name] || Pagination[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Pagination.`);
+        return;
+    }
+    Pagination[name] = (props) => callback(new Pagination(props));
+};
+
+Pagination.presets = function(presets) {
+    for (const name in presets) {
+        Pagination.preset(name, presets[name]);
+    }
 };
 
+Pagination.prototype.$originalBuild = BaseComponent.prototype.$build;
+
+Pagination.prototype.$build = function() {
+    const $desc = this.$description;
+
+    const updatePages = () => {
+        $desc.totalPages.set(Math.ceil($desc.totalItems.val() / $desc.pageSize.val()));
+        this.$updatePages();
+    };
+
+    $desc.pageSize.subscribe(updatePages);
+    $desc.currentPage.subscribe(updatePages);
+    $desc.totalItems.subscribe(updatePages);
+    $desc.totalPages.subscribe(() => this.$updatePages());
+
+    const totalPages = Math.ceil($desc.totalItems.val() / $desc.pageSize.val());
+    $desc.totalPages.set(totalPages);
+    this.$updatePages();
+
+    return this.$originalBuild();
+};
 Pagination.prototype.currentPage = function(page) {
     if (typeof page === 'number') {
         this.$description.currentPage.set(page);
@@ -49,18 +89,17 @@ Pagination.prototype.currentPage = function(page) {
 };
 
 Pagination.prototype.totalPages = function(total) {
-    this.$description.totalPages = total;
+    this.$description.totalPages.set(total);
     return this;
 };
 
 Pagination.prototype.pageSize = function(size) {
-    this.$description.pageSize = size;
+    this.$description.pageSize = BaseComponent.obs(size);
     return this;
 };
 
 Pagination.prototype.totalItems = function(total) {
-    this.$description.totalItems = total;
-    this.totalPages(Math.ceil(total / this.$description.pageSize));
+    this.$description.totalItems = BaseComponent.obs(total);
     return this;
 };
 
@@ -95,7 +134,7 @@ Pagination.prototype.data = function(data) {
 };
 
 Pagination.prototype.goToPage = function(page) {
-    if (page < 1 || page > this.$description.totalPages) {
+    if (page < 1 || page > this.$description.totalPages.val()) {
         return this;
     }
 
@@ -119,11 +158,11 @@ Pagination.prototype.first = function() {
 };
 
 Pagination.prototype.last = function() {
-    return this.goToPage(this.$description.totalPages);
+    return this.goToPage(this.$description.totalPages.val());
 };
 
 Pagination.prototype.hasNext = function() {
-    return this.$description.currentPage.val() < this.$description.totalPages;
+    return this.$description.currentPage.val() < this.$description.totalPages.last();
 };
 
 Pagination.prototype.hasPrevious = function() {
@@ -136,7 +175,7 @@ Pagination.prototype.$updatePages = function() {
 
 Pagination.prototype.getPageNumbers = function() {
     const current = this.$description.currentPage.val();
-    const total = this.$description.totalPages;
+    const total = this.$description.totalPages.val();
     const siblings = this.$description.siblingCount;
     const boundary = this.$description.boundaryCount;
 
@@ -221,9 +260,4 @@ Pagination.prototype.renderFirst = function(renderFn) {
 Pagination.prototype.renderLast = function(renderFn) {
     this.$description.renderLast = renderFn;
     return this;
-};
-
-Pagination.prototype.$build = function() {
-
-    return null;
 };

package/src/components/popover/Popover.js

@@ -1,31 +1,46 @@
 import BaseComponent from "../BaseComponent";
 import HasEventEmitter from "../../core/utils/HasEventEmitter";
+import { Observable } from "../../../index";
+import {ElementCreator} from "../../core/wrappers/ElementCreator";
+import {NDElement} from "../../core/wrappers/NDElement";
+import DebugManager from "../../core/utils/debug-manager";
+import HasFullPosition from "../$traits/has-position/HasFullPosition";
 
-export default function Popover(config = {}) {
+export default function Popover(content, props = {}) {
     if (!(this instanceof Popover)) {
-        return new Popover(config);
+        return new Popover(content, props);
     }
 
+    BaseComponent.call(this, props);
+
     this.$description = {
         trigger: null,
-        content: null,
+        interaction: 'click',
+        content,
         header: null,
         footer: null,
-        isOpen: $(false),
+        isOpen: Observable(false),
         defaultOpen: false,
         modal: false,
         closeOnEscape: true,
         closeOnClickOutside: true,
         focusTrap: true,
         returnFocus: true,
-        position: 'bottom',
-        offset: [0, 8],
+        position: 'top',
+        offset: 8,
+        shift: {},
+        arrow: true,
         data: null,
         renderContent: null,
         renderHeader: null,
         renderFooter: null,
         render: null,
-        ...config,
+        variant: null,
+        matchTriggerWidth: null,
+        matchTargetWidth: null,
+        updatePositionOn: null,
+        includeTriggerIntoGhost: true,
+        props,
     };
 
     this.$element = null;
@@ -35,20 +50,74 @@ export default function Popover(config = {}) {
     }
 }
 
-BaseComponent.extends(Popover, HasEventEmitter);
+BaseComponent.extends(Popover);
+BaseComponent.use(Popover, HasEventEmitter, HasFullPosition);
 
 Popover.defaultTemplate = null;
 
 Popover.use = function(template) {
-    Popover.defaultTemplate = template.popover;
+    Popover.defaultTemplate = template;
+
+    if(!NDElement.prototype.popover) {
+        NDElement.prototype.popover = function(content, props) {
+            this.ghostDom((content instanceof Popover)
+                ? content.trigger(this.$element)
+                : Popover(content, props).trigger(this.$element));
+            return this;
+        };
+    }
+    if(!BaseComponent.prototype.popover) {
+        BaseComponent.prototype.popover = function(content, props) {
+            this.postBuild(() => {
+                if(content instanceof Popover) {
+                    this.ghostDom(content.trigger(this.$element));
+                } else {
+                    this.ghostDom(Popover(content, props).trigger(this.$element));
+                }
+            })
+            return this;
+        };
+    }
+
 };
 
-Popover.prototype.trigger = function(trigger) {
-    if (trigger instanceof PopoverTrigger) {
-        this.$description.trigger = trigger.toJSON();
-    } else {
-        this.$description.trigger = trigger;
+
+
+Popover.preset = function(name, callback) {
+    if (Popover.prototype[name] || Popover[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Popover.`);
+        return;
+    }
+    Popover[name] = (content, props) => callback(new Popover(content, props));
+};
+
+Popover.presets = function(presets) {
+    for (const name in presets) {
+        Popover.preset(name, presets[name]);
     }
+};
+
+Popover.prototype.trigger = function(trigger) {
+    this.$description.trigger = ElementCreator.getChild(trigger);
+    return this;
+};
+
+Popover.prototype.interaction = function(interaction) {
+    this.$description.interaction = interaction;
+};
+
+Popover.prototype.onClicked = function() {
+    this.$description.interaction = 'click';
+    return this;
+};
+
+Popover.prototype.onHovered = function() {
+    this.$description.interaction = 'hover';
+    return this;
+};
+
+Popover.prototype.onFocused = function() {
+    this.$description.interaction = 'focus';
     return this;
 };
 
@@ -92,33 +161,18 @@ Popover.prototype.position = function(position) {
     return this;
 };
 
-Popover.prototype.atTop = function() {
-    return this.position('top');
-};
-Popover.prototype.atBottom = function() {
-    return this.position('bottom');
-};
-Popover.prototype.atLeft = function() {
-    return this.position('left');
-};
-Popover.prototype.atRight = function() {
-    return this.position('right');
-};
-Popover.prototype.atTopStart = function() {
-    return this.position('top-start');
-};
-Popover.prototype.atTopEnd = function() {
-    return this.position('top-end');
-};
-Popover.prototype.atBottomStart = function() {
-    return this.position('bottom-start');
+Popover.prototype.offset = function(offset) {
+    this.$description.offset = offset;
+    return this;
 };
-Popover.prototype.atBottomEnd = function() {
-    return this.position('bottom-end');
+
+Popover.prototype.arrow = function(arrow = true) {
+    this.$description.arrow = arrow;
+    return this;
 };
 
-Popover.prototype.offset = function(skidding, distance) {
-    this.$description.offset = [skidding, distance];
+Popover.prototype.shift = function(shift) {
+    this.$description.shift = shift;
     return this;
 };
 
@@ -179,7 +233,40 @@ Popover.prototype.renderFooter = function(renderFn) {
     return this;
 };
 
-Popover.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
+Popover.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+Popover.prototype.primary = function() {
+    this.$description.variant = 'primary';
+    return this;
+};
+
+Popover.prototype.success = function() {
+    this.$description.variant = 'success';
+    return this;
+};
+
+Popover.prototype.warning = function() {
+    this.$description.variant = 'warning';
+    return this;
+};
+
+Popover.prototype.danger = function() {
+    this.$description.variant = 'danger';
+    return this;
+};
+
+Popover.prototype.info = function() {
+    this.$description.variant = 'info';
+    return this;
+};
+Popover.prototype.matchTriggerWidth = function() {
+    this.$description.matchTriggerWidth = true;
+    return this;
+};
+Popover.prototype.updatePositionOn = function(updatePositionOn) {
+    this.$description.updatePositionOn = updatePositionOn;
     return this;
 };

package/src/components/progress/Progress.js

@@ -16,6 +16,7 @@ export default function Progress(props = {}) {
         variant: null,
         max: 100,
         size: null,
+        stroke: null,
         height: null,
         showValue: null,
         showPercentage: null,
@@ -24,13 +25,13 @@ export default function Progress(props = {}) {
         indeterminate: null,
         striped: null,
         animated: null,
-        render: null,
         borderRadiusType: null,
         props
     };
 }
 
-BaseComponent.extends(Progress, HasEventEmitter);
+BaseComponent.extends(Progress);
+BaseComponent.use(Progress, HasEventEmitter);
 
 Progress.defaultTemplate = null;
 
@@ -52,7 +53,6 @@ Progress.presets = function(presets) {
     }
 };
 
-
 Progress.prototype.model = function(observable) {
     this.$description.value = observable;
     return this;
@@ -65,12 +65,9 @@ Progress.prototype.setCurrentStep = function(step) {
     this.emit('change', step);
 };
 
-Progress.prototype.value = function() {
-    const value = this.$description.value;
-    if(Validator.isObservable(value)) {
-        return value.val();
-    }
-    return value;
+Progress.prototype.value = function(value) {
+    this.$description.value = BaseComponent.obs(value);
+    return this;
 };
 
 Progress.prototype.setValue = function(newValue) {
@@ -78,6 +75,10 @@ Progress.prototype.setValue = function(newValue) {
     return this;
 };
 
+Progress.prototype.getCurrentValue = function() {
+    return this.$description.value?.get();
+}
+
 Progress.prototype.max = function(max) {
     this.$description.max = max;
     return this;
@@ -140,6 +141,10 @@ Progress.prototype.size = function(size) {
     this.$description.size = size;
     return this;
 };
+Progress.prototype.stroke = function(stroke) {
+    this.$description.stroke = stroke;
+    return this;
+};
 
 Progress.prototype.small = function() {
     return this.size('small');
@@ -226,18 +231,3 @@ Progress.prototype.onReset = function(handler) {
     this.on('reset', handler);
     return this;
 };
-
-
-Progress.prototype.render = function(renderFn) {
-    this.$description.render = renderFn;
-    return this;
-};
-
-// Build & Render
-Progress.prototype.$build = function() {
-    // TODO: Implementation
-};
-
-Progress.prototype.toNdElement = function() {
-    return this.$build();
-};