@lemonadejs/modal 3.2.0 → 5.0.0

package/dist/index.js

@@ -180,8 +180,10 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    document.addEventListener('mouseup', mouseUp);
-    document.addEventListener('mousemove', mouseMove);
+    if (typeof(document) !== "undefined") {
+        document.addEventListener('mouseup', mouseUp);
+        document.addEventListener('mousemove', mouseMove);
+    }
 
     const isTrue = function(e) {
         return e === true || e === 1 || e === 'true';
@@ -435,18 +437,6 @@ if (!lemonade && typeof (require) === 'function') {
 
         // Native lemonade
         self.onload = function() {
-            if (self.url) {
-                fetch(self.url)
-                    .then(response => response.clone().body)
-                    .then(body => {
-                        let reader = body.getReader();
-                        reader.read().then(function pump({done, value}) {
-                            const decoder = new TextDecoder();
-                            template += decoder.decode(value.buffer);
-                        });
-                    });
-            }
-
             // Dimensions
             if (self.width) {
                 self.el.style.width = self.width + 'px';
@@ -506,25 +496,31 @@ if (!lemonade && typeof (require) === 'function') {
                 }
             }
 
-            // Bring to front on focus
-            if (self.layers !== false) {
-                self.el.classList.add('lm-modal-layers');
-            }
-
             // Import content from DOM
             if (self.content) {
-                self.el.children[1].appendChild(self.content);
+                if (typeof(self.content) === 'string') {
+                    self.root.appendChild(document.createTextNode(self.content));
+                } else if (typeof(self.content.tagName) === 'object' && self.content.tagName) {
+                    self.root.appendChild(self.content);
+                }
             }
 
             // Focus out of the component
             self.el.addEventListener('focusout', function(e) {
-                if (isTrue(self['auto-close'])) {
-                    if (! self.el.contains(e.relatedTarget)) {
+                if (! self.el.contains(e.relatedTarget)) {
+                    if (isTrue(self['auto-close'])) {
                         self.closed = true;
                     }
+                    // Remove focus
+                    self.el.classList.remove('lm-modal-focus');
                 }
             });
 
+            // Focus out of the component
+            self.el.addEventListener('focusin', function(e) {
+                self.el.classList.add('lm-modal-focus');
+            });
+
             // Close and stop propagation
             self.el.addEventListener('keydown', (e) => {
                 if (e.key === 'Escape') {
@@ -749,6 +745,8 @@ if (!lemonade && typeof (require) === 'function') {
             if (self.closed === true) {
                 self.closed = false;
             }
+            // Focus on the new modal
+            self.el.focus();
         }
 
         self.close = function() {
@@ -757,22 +755,41 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        if (! template) {
+        if (self.url) {
+            fetch(self.url)
+                .then(response => response.clone().body)
+                .then(body => {
+                    let reader = body.getReader();
+                    reader.read().then(function pump({done, value}) {
+                        const decoder = new TextDecoder();
+                        self.root.innerHTML = decoder.decode(value.buffer);
+                    });
+                });
+        }
+
+        if (! template || typeof(template) !== 'string') {
             template = '';
         }
 
+        // Custom Root Configuration
+        self.settings = {
+            getRoot: function() {
+                return self.root;
+            }
+        }
+
         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 :ref="self.root">${template}</div>
         </div>`
     }
 
-    const Component = function (root, options, template) {
+    const Component = function (root, options) {
         if (typeof(root) === 'object') {
             // Remove elements from the DOM
             let elements = removeElements(root);
             // Create the modal
-            let e = lemonade.render(Modal, root, options, template);
+            let e = lemonade.render(Modal, root, options);
             // Add elements to the container
             appendElements(e.children[1], elements);
 

package/dist/style.css

@@ -1,7 +1,7 @@
 .lm-modal {
     position: fixed;
-    min-width: 300px;
-    min-height: 240px;
+    min-width: 200px;
+    min-height: 200px;
     border-radius: 5px;
     z-index: 15;
     background-color: var(--lm-background-color, #fff);
@@ -28,15 +28,19 @@
 .lm-modal-title {
     width: 100%;
     border-bottom: 1px solid  var(--lm-border-color, #ccc);
-    padding: 10px;
+    padding: 12px;
     box-sizing: border-box;
-    font-size: 1.2em;
+    font-size: 1.3em;
     line-height: 24px;
     user-select: none;
     display: flex;
     border-radius: 5px 5px 0 0;
 }
 
+.lm-modal-focus {
+    z-index: 999;
+}
+
 .lm-modal > .lm-modal-title {
     display: none;
 }
@@ -57,9 +61,9 @@
     height: 24px;
     font-size: 24px;
     cursor: pointer;
-    font-family: "Material Icons";
+    font-family: "Material Symbols Outlined", "Material Icons";
     text-align: center;
-    margin-right: 5px;
+    margin-right: 8px;
     display: none;
 }
 
@@ -92,10 +96,6 @@
     opacity: 0;
 }
 
-.lm-modal-layers:focus {
-    z-index: 999;
-}
-
 .lm-modal[animation="false"] {
     transition: initial;
 }

package/package.json

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