npm - @lemonadejs/modal - Versions diffs - 2.8.1 → 3.2.0 - Mend

@lemonadejs/modal 2.8.1 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -121,7 +121,7 @@ Quick example with Vue
  </script>
 ```
-Programmatical - Quick example with Javascript
+Programmatically - Quick example with Javascript
 ```html
 <html>
@@ -159,43 +159,58 @@ You can configure things such as position, size, and functionalities.
 ### Settings
-| Attribute | Type | Description |
-| --- | --- | --- |
-| title? | String | The header title of the modal. If empty, the header will be not displayed. |
-| height? | Number | The height of the modal in pixels. |
-| width? | Number | The width of the modal in pixels. |
-| top? | Number | The vertical position of the modal within its window in pixels. |
-| left? | Number | The horizontal position of the modal within its window in pixels. |
-| draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
-| resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
-| closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
-| closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
-| center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
-| url? | String | The URL from which to fetch and render content. |
-| auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
-| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
-| backdrop? | Boolean | Enables the backdrop when the modal is opened. |
-| minimizable? | Boolean | Modal can be minimized. `Default: false`.  |
-| minimized? | Boolean | Current minimized state of the modal. |
-| position? | String | Modal is automatic align during initialization. |
-| title? | String | Title of the modal. |
-| responsive? | Boolean | Enables responsive mode. `Default: true`. |
-| layers? | Boolean | Bring to front on focus. |
-| focus? | Boolean | Focus on the modal when open it. `Default: true`. |
-| overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
+| Attribute    | Type    | Description                                                                |
+|--------------|---------|----------------------------------------------------------------------------|
+| title?       | String  | The header title of the modal. If empty, the header will be not displayed. |
+| height?      | Number  | The height of the modal in pixels.                                         |
+| width?       | Number  | The width of the modal in pixels.                                          |
+| top?         | Number  | The vertical position of the modal within its window in pixels.            |
+| left?        | Number  | The horizontal position of the modal within its window in pixels.          |
+| draggable?   | Boolean | Determines if the modal can be dragged. `Default: false`.                  |
+| resizable?   | Boolean | Determines if the modal can be resized. `Default: false`.                  |
+| closed?      | Boolean | Controls the open and close state of the modal. `Default: false`.          |
+| closable?    | Boolean | Disables the ability to close the modal. `Default: false`.                 |
+| center?      | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
+| url?         | String  | The URL from which to fetch and render content.                            |
+| auto-close?  | Boolean | Close the modal when it loses the focus. `Default: false`.                 |
+| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`.                 |
+| backdrop?    | Boolean | Enables the backdrop when the modal is opened.                             |
+| minimizable? | Boolean | Modal can be minimized. `Default: false`.                                  |
+| minimized?   | Boolean | Current minimized state of the modal.                                      |
+| position?    | String  | Modal is automatic align during initialization.                            |
+| title?       | String  | Title of the modal.                                                        |
+| responsive?  | Boolean | Enables responsive mode. `Default: true`.                                  |
+| layers?      | Boolean | Bring to front on focus.                                                   |
+| focus?       | Boolean | Focus on the modal when open it. `Default: true`.                          |
+| overflow?    | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
 ### Events
-| Event                        | Description |
-|------------------------------| --- |
-| onclose? | Called when modal closes. |
-| onopen? | Called when modal opens. |
+| Event     | Description                              |
+|-----------|------------------------------------------|
+| onload?   | When the modal is ready.                 |
+| onclose?  | Called when modal closes.                |
+| onopen?   | Called when modal opens.                 |
+| onresize? | When the user resize the modal.          |
+| onmove?   | When the user change the modal position. |
 ## License
 The LemonadeJS Modal is released under the MIT.
+## Changelog
+### 3.1.1
+- Added new events: `onmove` and `onresize`.
+### 3.1.0
+- Close modal using the keyboard by pressing `Shift + Tab` on the icon.
 ## Other Tools
 -   [jSuites](https://jsuites.net/docs)

package/dist/index.d.ts CHANGED Viewed

@@ -54,6 +54,12 @@ declare namespace Modal {
         onclose?: (self: object) => void;
         /** onload event */
         onload?: (self: object) => void;
+        /** Move event */
+        onmove?: (self: object, x: number, y: number) => void;
+        /** Resize event */
+        onresize?: (self: object, w: number, h: number) => void;
+        /** Import content from DOM reference */
+        content?: HTMLElement;
     }
     interface Instance {

package/dist/index.js CHANGED Viewed

@@ -123,33 +123,59 @@ if (!lemonade && typeof (require) === 'function') {
             state.x = x;
             state.y = y;
-            state.top = top
-            state.left = left
+            state.top = top;
+            state.left = left;
         } else if (controls.type === 'resize') {
+            let top = null;
+            let left = null;
             let width = null;
             let height = null;
-            let newHeight = null;
             if (controls.d === 'e-resize' || controls.d === 'ne-resize' || controls.d === 'se-resize') {
-                // Update width
                 width = controls.w + (x - controls.x);
-                controls.e.style.width = width + 'px';
-                // Update Height
                 if (e.shiftKey) {
-                    newHeight = (x - controls.x) * (controls.h / controls.w);
-                    height = controls.h + newHeight;
-                    controls.e.style.height = height + 'px';
-                } else {
-                    newHeight = false;
+                    height = controls.h + (x - controls.x) * (controls.h / controls.w);
+                }
+            } else if (controls.d === 'w-resize' || controls.d === 'nw-resize'|| controls.d === 'sw-resize') {
+                left = controls.l + (x - controls.x);
+                // Do not move further
+                if (left >= controls.l) {
+                    left = controls.l;
+                }
+                // Update width
+                width = controls.l + controls.w - left;
+                // Consider shift to update height
+                if (e.shiftKey) {
+                    height = controls.h - (x - controls.x) * (controls.h / controls.w);
                 }
             }
-            if (! newHeight) {
-                if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
+            if (controls.d === 's-resize' || controls.d === 'se-resize' || controls.d === 'sw-resize') {
+                if (! height) {
                     height = controls.h + (y - controls.y);
-                    controls.e.style.height = height + 'px';
                 }
+            } else if (controls.d === 'n-resize' || controls.d === 'ne-resize' || controls.d === 'nw-resize') {
+                top = controls.t + (y - controls.y);
+                // Do not move further
+                if (top >= controls.t) {
+                    top = controls.t;
+                }
+                // Update height
+                height = controls.t + controls.h - top;
+            }
+            if (top) {
+                controls.e.style.top = top + 'px';
+            }
+            if (left) {
+                controls.e.style.left = left + 'px';
+            }
+            if (width) {
+                controls.e.style.width = width + 'px';
+            }
+            if (height) {
+                controls.e.style.height = height + 'px';
             }
         }
     }
@@ -162,9 +188,11 @@ if (!lemonade && typeof (require) === 'function') {
     }
     // Dispatcher
-    const Dispatch = function(type, option){
+    const Dispatch = function(type){
         if (typeof this[type] === 'function') {
-            this[type](this, option)
+            let args = Array.from(arguments);
+            args.shift();
+            this[type](...args)
         }
     }
@@ -355,9 +383,40 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
+    const removeElements = function(root) {
+        // Keep the DOM elements
+        let elements = [];
+        if (root) {
+            while (root.firstChild) {
+                elements.push(root.firstChild);
+                root.firstChild.remove();
+            }
+        }
+        return elements;
+    }
+    const appendElements = function(root, elements) {
+        if (elements && elements.length) {
+            while (elements[0]) {
+                root.appendChild(elements.shift());
+            }
+        }
+    }
     const Modal = function (template) {
         let self = this;
         let backdrop = null;
+        let elements = null;
+        if (this.tagName) {
+            // Remove elements from the DOM
+            elements = removeElements(this);
+            this.addEventListener('dragstart', (e) => {
+                e.preventDefault();
+            });
+        }
         // Make sure keep the state as boolean
         self.closed = !!self.closed;
@@ -440,7 +499,11 @@ if (!lemonade && typeof (require) === 'function') {
                 backdrop.classList.add('lm-modal-backdrop');
                 backdrop.addEventListener('click', function() {
                     self.closed = true;
-                })
+                });
+                if (self.closed === false) {
+                    self.el.parentNode.insertBefore(backdrop, self.el);
+                }
             }
             // Bring to front on focus
@@ -448,6 +511,11 @@ if (!lemonade && typeof (require) === 'function') {
                 self.el.classList.add('lm-modal-layers');
             }
+            // Import content from DOM
+            if (self.content) {
+                self.el.children[1].appendChild(self.content);
+            }
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
                 if (isTrue(self['auto-close'])) {
@@ -459,13 +527,20 @@ if (!lemonade && typeof (require) === 'function') {
             // Close and stop propagation
             self.el.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape' && self.closed === false) {
-                    self.closed = true;
-                    e.preventDefault();
-                    e.stopImmediatePropagation();
+                if (e.key === 'Escape') {
+                    if (self.closed === false) {
+                        self.closed = true;
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
+                } else if (e.key === 'Enter') {
+                    self.click(e);
                 }
             });
+            // Append elements to the container
+            appendElements(self.el.children[1], elements);
             if (typeof(onload) === 'function') {
                 Dispatch.call(self, 'onload', self);
             }
@@ -539,6 +614,8 @@ if (!lemonade && typeof (require) === 'function') {
                 return;
             }
+            // Get mouse coordinates
+            let [x,y] = getCoords(e);
             // Root element of the component
             let item = self.el;
             // Get the position and dimensions
@@ -549,17 +626,31 @@ if (!lemonade && typeof (require) === 'function') {
             controls.e = item;
             controls.w = rect.width;
             controls.h = rect.height;
+            controls.t = rect.top;
+            controls.l = rect.left;
             // When resizable
             if (self.resizable === true) {
-                if (rect.height - (e.clientY - rect.top) < cornerSize) {
+                if (e.clientY - rect.top < cornerSize) {
+                    if (rect.width - (e.clientX - rect.left) < cornerSize) {
+                        item.style.cursor = 'ne-resize';
+                    } else if (e.clientX - rect.left < cornerSize) {
+                        item.style.cursor = 'nw-resize';
+                    } else {
+                        item.style.cursor = 'n-resize';
+                    }
+                } else if (rect.height - (e.clientY - rect.top) < cornerSize) {
                     if (rect.width - (e.clientX - rect.left) < cornerSize) {
                         item.style.cursor = 'se-resize';
+                    } else if (e.clientX - rect.left < cornerSize) {
+                        item.style.cursor = 'sw-resize';
                     } else {
                         item.style.cursor = 's-resize';
                     }
                 } else if (rect.width - (e.clientX - rect.left) < cornerSize) {
                     item.style.cursor = 'e-resize';
+                } else if (e.clientX - rect.left < cornerSize) {
+                    item.style.cursor = 'w-resize';
                 } else {
                     item.style.cursor = '';
                 }
@@ -572,6 +663,22 @@ if (!lemonade && typeof (require) === 'function') {
                     controls.d = null;
                 }
             }
+            if (controls.type == null && isTrue(self.draggable)) {
+                if (y - rect.top < 40) {
+                    item.style.cursor = 'move';
+                } else {
+                    item.style.cursor = '';
+                }
+                if (item.style.cursor) {
+                    controls.type = 'move';
+                    controls.d = item.style.cursor;
+                } else {
+                    controls.type = null;
+                    controls.d = null;
+                }
+            }
         }
         self.mousedown = function(e) {
@@ -587,6 +694,8 @@ if (!lemonade && typeof (require) === 'function') {
                 controls.e = item;
                 controls.w = rect.width;
                 controls.h = rect.height;
+                controls.t = rect.top;
+                controls.l = rect.left;
                 // If is not minimized
                 if (controls.type === 'resize') {
                     // Make sure the width and height is defined for the modal
@@ -601,17 +710,18 @@ if (!lemonade && typeof (require) === 'function') {
                         self.width = parseInt(item.style.width);
                         self.height = parseInt(item.style.height);
                         controls.e.classList.remove('action');
+                        // Event
+                        Dispatch.call(self, 'onresize', self, self.width, self.height);
                     }
                     controls.e.classList.add('action');
-                } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
-                    // Action
-                    controls.type = 'move';
+                } else if (isTrue(self.draggable) && y - rect.top < 40) {
                     // Callback
                     controls.action = function () {
                         self.top = parseInt(item.style.top);
                         self.left = parseInt(item.style.left);
                         controls.e.classList.remove('action');
+                        // Event
+                        Dispatch.call(self, 'onmove', self, self.top, self.left);
                     }
                     controls.e.classList.add('action');
                     // Remove transform
@@ -621,36 +731,16 @@ if (!lemonade && typeof (require) === 'function') {
         }
         self.click = function(e) {
-            // Get mouse coordinates
-            let [x,y] = getCoords(e);
-            // Get the position and dimensions
-            let rect = self.el.getBoundingClientRect();
-            // Right
-            let right = rect.width - (x - rect.left);
-            // Corner
-            let corner = (y - rect.top) < 40 && right > 10 && right < 34;
-            // Check if the click in on close
-            if (isTrue(self.closable)) {
-                if (corner) {
-                    self.closed = true;
-                    if (isTrue(self.minimizable)) {
-                        removeMini(self);
-                    }
-                    return;
-                }
-                corner = (y - rect.top) < 40 && right > 10 && right < 65;
+            if (e.target.classList.contains('lm-modal-close')) {
+                self.closed = true;
             }
-            // Check if the click in on minimize
-            if (isTrue(self.minimizable)) {
-                if (corner) {
-                    // Handles minimized modal positioning
-                    if (self.minimized === true) {
-                        removeMini(self);
-                    } else {
-                        setMini(self);
-                    }
+            if (e.target.classList.contains('lm-modal-minimize')) {
+                // Handles minimized modal positioning
+                if (self.minimized === true) {
+                    removeMini(self);
+                } else {
+                    setMini(self);
                 }
             }
         }
@@ -667,37 +757,35 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
-        return `<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown" onmousemove="self.mousemove" onclick="self.click" tabindex="-1">
-            <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
+        if (! template) {
+            template = '';
+        }
+        return `<div class="lm-modal" animation="{{self.animation}}" position="{{self.position}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" overflow="{{self.overflow}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown" onmousemove="self.mousemove" onclick="self.click" tabindex="-1" role="modal">
+            <div class="lm-modal-title" data-title="{{self.title}}" data-icon="{{self.icon}}"><div class="lm-modal-icon">{{self.icon}}</div><div>{{self.title}}</div><div class="lm-modal-icon lm-modal-minimize" tabindex="0"></div><div class="lm-modal-icon lm-modal-close" tabindex="0"></div></div>
             <div>${template}</div>
         </div>`
     }
-    lemonade.setComponents({ Modal: Modal });
-    return function (root, options, template) {
+    const Component = function (root, options, template) {
         if (typeof(root) === 'object') {
-            if (! template) {
-                template = '';
-            }
-            // Keep the DOM elements
-            let elements = [];
-            while (root.firstChild) {
-                elements.push(root.firstChild);
-                root.firstChild.remove();
-            }
+            // Remove elements from the DOM
+            let elements = removeElements(root);
             // Create the modal
             let e = lemonade.render(Modal, root, options, template);
-            // Append any elements inside the modal
-            if (elements.length) {
-                while (elements[0]) {
-                    e.children[1].appendChild(elements[0]);
-                    elements.shift();
-                }
-            }
+            // Add elements to the container
+            appendElements(e.children[1], elements);
             return options;
         } else {
-            return Modal.call(this, root);
+            return Modal.call(this);
         }
     }
+    // Create LemonadeJS Component
+    lemonade.setComponents({ Modal: Modal });
+    // Create Web Component
+    lemonade.createWebComponent('modal', Modal)
+    return Component;
 })));

package/dist/react.d.ts CHANGED Viewed

@@ -5,13 +5,16 @@
  */
-import ModalComponent from './index';
+import Component from './index';
 interface Modal {
+    ref?: MutableRefObject<undefined>;
     (): any
     [key: string]: any
 }
-declare function Modal<Modal>(props: ModalComponent.Options): any;
+type Props = IntrinsicAttributes & Component.Options & Modal;
+declare function Modal<Modal>(props: Props): any;
 export default Modal;

package/dist/style.css CHANGED Viewed

@@ -8,7 +8,6 @@
     box-sizing: border-box;
     box-shadow: 0 0 12px rgb(0 0 0 / 22%);
     opacity: 1;
-    will-change: transform;
     border: 1px solid var(--lm-border-color, #ccc);
     outline: none;
     margin: 0;
@@ -18,6 +17,14 @@
     color: var(--lm-font-color, #000);
 }
+.lm-modal[closed="true"] {
+    display: none;
+}
+.lm-modal.action {
+    user-select: none;
+}
 .lm-modal-title {
     width: 100%;
     border-bottom: 1px solid  var(--lm-border-color, #ccc);
@@ -27,56 +34,58 @@
     line-height: 24px;
     user-select: none;
     display: flex;
-    border-radius: 5px;
+    border-radius: 5px 5px 0 0;
 }
-.lm-modal-title:empty {
+.lm-modal > .lm-modal-title {
     display: none;
 }
-.lm-modal-title[data-icon]::before {
-    content: attr(data-icon);
+.lm-modal > .lm-modal-title[data-icon],
+.lm-modal > .lm-modal-title[data-title],
+.lm-modal[closable="true"] > .lm-modal-title,
+.lm-modal[minimizable="true"] > .lm-modal-title {
+    display: inherit;
+}
+.lm-modal > .lm-modal-title > div:nth-child(2) {
+    flex: 1;
+}
+.lm-modal > .lm-modal-title > .lm-modal-icon {
     width: 24px;
     height: 24px;
     font-size: 24px;
+    cursor: pointer;
     font-family: "Material Icons";
+    text-align: center;
     margin-right: 5px;
+    display: none;
+}
+.lm-modal > .lm-modal-title > .lm-modal-icon:not(:empty) {
+    display: inherit;
 }
-.lm-modal[closable="true"]::after {
+.lm-modal > .lm-modal-title > .lm-modal-close::before {
     content: 'close';
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-    font-family: "Material Icons";
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    cursor: pointer;
 }
-.lm-modal[minimizable="true"]::before {
+.lm-modal > .lm-modal-title > .lm-modal-minimize::before {
     content: '\2500';
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-    font-family: "Material Icons";
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    cursor: pointer;
 }
-.lm-modal[closable="true"].lm-modal[minimizable="true"]::before {
-    right: 35px;
+.lm-modal[minimized="true"] > .lm-modal-title > .lm-modal-minimize::before {
+    content: '\e5d7';
 }
-.lm-modal[closed="true"] {
-    display: none !important;
+.lm-modal[minimizable="true"] > .lm-modal-title > .lm-modal-minimize {
+    display: block;
 }
-.lm-modal[minimized="true"]:before {
-    content: '\e5d7';
+.lm-modal[closable="true"] > .lm-modal-title > .lm-modal-close {
+    margin-right: 0;
+    display: block;
 }
 .lm-modal.hide {
@@ -102,7 +111,7 @@
     width: 100vw;
     height: 100vh;
     background-color: #00000020;
-    z-index: 999;
+    z-index: 15;
 }
 .lm-modal > div:last-child {

package/package.json CHANGED Viewed

@@ -13,9 +13,9 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^4.2.2"
+        "lemonadejs": "^4.3.3"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "2.8.1"
+    "version": "3.2.0"
 }