@lemonadejs/modal 2.4.3 → 2.4.4

package/dist/index.d.ts

@@ -22,8 +22,8 @@ declare namespace Modal {
         resizable?: boolean;
         /** Modal can be moved from its original position. Default: false */
         draggable?: boolean;
-        /** Modal is automatic align center during initialization */
-        center?: boolean;
+        /** Modal is automatic align during initialization */
+        position?: 'center' | 'left' | 'right' | undefined;
         /** Title of the modal */
         title?: string;
         /** Width of the modal */
@@ -66,7 +66,7 @@ declare namespace Modal {
         /** Modal can be moved from its original position. */
         draggable?: boolean;
         /** Modal is automatic align center during initialization */
-        center?: boolean;
+        position?: string | undefined;
         /** Title of the modal */
         title?: string;
         /** Width of the modal */

package/dist/index.js

@@ -269,7 +269,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
 
             // Initial centralize
-            if (self.center === true) {
+            if (self.position === 'center') {
                 self.top = (window.innerHeight - self.height) / 2;
                 self.left = (window.innerWidth - self.width) / 2;
             }
@@ -465,7 +465,7 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        return `<div class="lm-modal" 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(e)" onmousemove="self.mousemove(e)" tabindex="-1">
+        return `<div class="lm-modal" 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(e)" onmousemove="self.mousemove(e)" tabindex="-1">
             <div class="lm-modal-title" data-icon="{{self.icon}}">{{self.title}}</div>
             <div>${template}</div>
         </div>`

package/dist/style.css

@@ -45,13 +45,14 @@
     margin-right: 5px;
 }
 
-.lm-modal[closable="true"] .lm-modal-title::after {
+.lm-modal[closable="true"]::after {
     content: 'close';
     width: 24px;
     height: 24px;
     font-size: 24px;
     font-family: "Material Icons";
     position: absolute;
+    top: 10px;
     right: 10px;
     cursor: pointer;
 }
@@ -143,4 +144,23 @@
 
 .lm-modal > div:last-child::-webkit-scrollbar-thumb {
     background: #888;
+}
+
+.lm-modal[position="left"] {
+    top: 0;
+    left: 0;
+    width: 280px;
+    height: 100vh;
+    border-width: 0;
+    border-radius: initial;
+}
+
+.lm-modal[position="right"] {
+    top: 0;
+    left: initial;
+    right: 0;
+    width: 280px;
+    height: 100vh;
+    border-width: 0;
+    border-radius: initial;
 }

package/package.json

@@ -17,5 +17,5 @@
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "2.4.3"
+    "version": "2.4.4"
 }