@lemonadejs/modal 2.1.1 → 2.2.1

package/dist/index.d.ts

@@ -10,21 +10,36 @@ interface Modal {
 }
 
 interface options {
+    /** Close the modal when it loses the focus */
+    autoclose?: boolean;
+    /** Modal is closed */
     closed?: boolean;
+    /** Modal can be closed */
     closable?: boolean;
+    /** Modal is minimized */
     minimized?: boolean;
+    /** Modal can be minimized */
     minimizable?: boolean;
+    /** Modal can be resized */
     resizable?: boolean;
+    /** Modal can be moved from its original position */
     draggable?: boolean;
+    /** Modal is automatic align center */
     center?: boolean;
+    /** Title of the modal */
     title?: string;
+    /** Width of the modal */
     width?: number;
+    /** Height of the modal */
     height?: number;
+    /** Position top */
     top?: number;
+    /** Position Left */
     left?: number;
 }
 
 interface instance {
+    autoclose: boolean;
     closed: boolean;
     closable: boolean;
     minimized: boolean;

package/dist/index.js

@@ -49,6 +49,11 @@ if (! lemonade && typeof(require) === 'function') {
         if (typeof(controls.action) === 'function') {
             controls.action();
         }
+        // Remove cursor
+        if (controls.e) {
+            controls.e.style.cursor = '';
+            controls.e.classList.remove('moving');
+        }
         // Reset controls
         controls = {};
         // Reset state controls
@@ -82,8 +87,6 @@ if (! lemonade && typeof(require) === 'function') {
             controls.left = left
             controls.e.style.top = top + 'px';
             controls.e.style.left = left + 'px';
-            controls.e.style.cursor = "move";
-
 
             state.x = x;
             state.y = y;
@@ -158,6 +161,15 @@ if (! lemonade && typeof(require) === 'function') {
                 self.el.classList.add('fullscreen');
             }
 
+            // Focus out of the component
+            self.el.addEventListener('focusout', function(e) {
+                if (self.autoclose === true) {
+                    if (!self.el.contains(e.relatedTarget)) {
+                        self.closed = true;
+                    }
+                }
+            });
+
             // Close and stop propagation
             document.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape' && self.closed === false) {
@@ -186,12 +198,11 @@ if (! lemonade && typeof(require) === 'function') {
             // Get the position and dimensions
             let rect = item.getBoundingClientRect();
 
-            controls = {
-                type: null,
-                e: item,
-                w: rect.width,
-                h: rect.height,
-            }
+            controls.type = null;
+            controls.d = null;
+            controls.e = item;
+            controls.w = rect.width;
+            controls.h = rect.height;
 
             // When resizable
             if (self.resizable === true) {
@@ -226,16 +237,22 @@ if (! lemonade && typeof(require) === 'function') {
             let item = self.el;
             // Get the position and dimensions
             let rect = item.getBoundingClientRect();
+
+            controls.e = item;
+            controls.w = rect.width;
+            controls.h = rect.height;
+
             let corner = rect.width - (x - rect.left) < 40 && (y - rect.top) < 40;
 
-            if (self.closable === true && corner === true) {
+            if (self.minimizable === true && corner === true) {
+                self.minimized = ! self.minimized;
+            } else if (self.closable === true && corner === true) {
                 self.closed = true;
-            } else if (self.minimizable === true && corner === true) {
-                self.minimized = ! item.lemon.self.minimized;
-            } else {
+            } else if (! self.minimized) {
+                // If is not minimized
                 if (controls.type === 'resize') {
                     // This will be the callback when finalize the resize
-                    controls.action = function() {
+                    controls.action = function () {
                         self.width = parseInt(item.style.width);
                         self.height = parseInt(item.style.height);
                     }
@@ -246,22 +263,22 @@ if (! lemonade && typeof(require) === 'function') {
                     if (!item.style.height) {
                         item.style.height = controls.h + 'px';
                     }
-                } else {
-                    // Modal is draggable by the title
-                    if (self.draggable === true && self.title && y - rect.top < 40) {
-                        // Action
-                        controls.type = 'move';
-                        // Callback
-                        controls.action = function() {
-                            self.top = parseInt(item.style.top);
-                            self.left = parseInt(item.style.left);
-                        }
+
+                    e.preventDefault();
+                } else if (self.draggable === true && self.title && y - rect.top < 40) {
+                    // Action
+                    controls.type = 'move';
+                    // Callback
+                    controls.action = function () {
+                        self.top = parseInt(item.style.top);
+                        self.left = parseInt(item.style.left);
                     }
+                    controls.e.classList.add('moving');
                 }
             }
         }
 
-        return `<div class="lm-modal" title="{{self.title}}" closed="{{self.closed}}" :closable="self.closable" :minimized="self.minimized" :minimizable="self.minimizable" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">${template}</div>`
+        return `<div class="lm-modal" title="{{self.title}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" :top="self.top" :left="self.left" :width="self.width" :height="self.height" onmousedown="self.mousedown(e)" onmousemove="self.mousemove(e)" tabindex="-1">${template}</div>`
     }
 
     lemonade.setComponents({ Modal: Modal });

package/dist/style.css

@@ -12,6 +12,11 @@
     box-shadow: 0 0 4px 3px rgba(80,80,80,.1);
     opacity: 1;
     transition: opacity 0.5s ease;
+    will-change: transform;
+}
+
+.lm-modal.moving {
+    cursor: move !important;
 }
 
 @media only screen and (max-width : 800px) {
@@ -82,7 +87,6 @@
     font-size: 24px;
 }
 
-
 .lm-modal[title=""]::before {
     display: none;
 }
@@ -92,18 +96,16 @@
 }
 
 .lm-modal[minimized="true"] {
-    bottom: 0;
-    min-height: 0px;
+    bottom: 10px;
+    min-height: 0;
     height: 45px !important;
-}
-
-.lm-modal[minimized="true"]::before {
-    height: 100%;
-    cursor: pointer;
+    top: initial !important;
+    left: initial !important;
+    overflow: hidden;
 }
 
 .lm-modal[minimized="true"]::after {
-    content: '';
+    content: 'open_in_full';
 }
 
 @keyframes slide-bottom-in {

package/package.json

@@ -13,8 +13,8 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^3.3.2"
+        "lemonadejs": "^3.4.0"
     },
     "main": "dist/index.js",
-    "version": "2.1.1"
+    "version": "2.2.1"
 }