@lemonadejs/modal 2.8.1 → 3.1.0

package/dist/index.d.ts

@@ -54,6 +54,8 @@ declare namespace Modal {
         onclose?: (self: object) => void;
         /** onload event */
         onload?: (self: object) => void;
+        /** Import content from DOM reference */
+        content?: HTMLElement;
     }
 
     interface Instance {

package/dist/index.js

@@ -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';
             }
         }
     }
@@ -355,9 +381,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;
 
@@ -448,6 +505,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 +521,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 +608,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 +620,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 +657,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 +688,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
@@ -603,14 +706,11 @@ if (!lemonade && typeof (require) === 'function') {
                         controls.e.classList.remove('action');
                     }
                     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');
                     }
                     controls.e.classList.add('action');
@@ -621,36 +721,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 +747,35 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
+        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">
-            <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
+            <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

@@ -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

@@ -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,10 @@
     color: var(--lm-font-color, #000);
 }
 
+.lm-modal.action {
+    user-select: none;
+}
+
 .lm-modal-title {
     width: 100%;
     border-bottom: 1px solid  var(--lm-border-color, #ccc);
@@ -30,52 +33,58 @@
     border-radius: 5px;
 }
 
-.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-title > div:nth-child(2) {
+    flex: 1;
+}
+
+.lm-modal .lm-modal-icon {
     width: 24px;
     height: 24px;
     font-size: 24px;
+    cursor: pointer;
     font-family: "Material Icons";
-    margin-right: 5px;
+    text-align: center;
+    display: none;
 }
 
-.lm-modal[closable="true"]::after {
+.lm-modal .lm-modal-icon:not(:empty) {
+    display: inherit;
+}
+
+.lm-modal .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-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 div[data-icon] .lm-modal-feature,
+.lm-modal[minimizable="true"] .lm-modal-minimize {
+    margin-right: 5px;
+    display: block;
+}
+
+.lm-modal[closable="true"] .lm-modal-close {
+    display: block;
 }
 
 .lm-modal[closed="true"] {
-    display: none !important;
+    display: none;
 }
 
-.lm-modal[minimized="true"]:before {
+.lm-modal[minimized="true"] .lm-modal-minimize::before {
     content: '\e5d7';
 }
 

package/package.json

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