@lemonadejs/modal 5.3.0 → 5.8.1

package/dist/index.js

@@ -390,7 +390,10 @@ if (!lemonade && typeof (require) === 'function') {
 
         if (self.position === 'absolute') {
             if (bottomEdgeDistance < 5) {
-                transformY = (-1 * el.height) - margin - 20;
+                transformY = (-1 * el.height) - margin - 12;
+                if (el.top + transformY < 0) {
+                    transformY = -el.top + 10;
+                }
             }
         } else {
             if (bottomEdgeDistance < 0) {
@@ -426,7 +429,7 @@ if (!lemonade && typeof (require) === 'function') {
         }
     }
 
-    const Modal = function (template, { onchange, onload }) {
+    const Modal = function (template, { onchange, onload, track }) {
         let self = this;
         let backdrop = null;
         let elements = null;
@@ -831,7 +834,12 @@ if (!lemonade && typeof (require) === 'function') {
             }
         });
 
-        return render => render`<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" tabindex="-1" role="modal" onmousedown="${mousedown}" onmousemove="${mousemove}" onclick="${click}">
+        track('top');
+        track('left');
+        track('width');
+        track('height');
+
+        return render => render`<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}}" tabindex="-1" role="modal" onmousedown="${mousedown}" onmousemove="${mousemove}" onclick="${click}">
             <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 :ref="self.root">${template}</div>
         </div>`

package/dist/style.css

@@ -4,7 +4,7 @@
     min-height: 200px;
     border-radius: 5px;
     z-index: 15;
-    background-color: var(--lm-background-color, #fff);
+    background-color: var(--lm-background-color-input, #fff);
     box-sizing: border-box;
     box-shadow: 0 0 12px rgb(0 0 0 / 22%);
     opacity: 1;

package/package.json

@@ -13,9 +13,9 @@
         "modal js"
     ],
     "dependencies": {
-        "lemonadejs": "^5.3.1"
+        "lemonadejs": "^5.3.6"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "5.3.0"
+    "version": "5.8.1"
 }