@lemonadejs/modal 2.4.1 → 2.4.2

package/dist/index.d.ts

@@ -4,70 +4,102 @@
  * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
  */
 
-interface Modal {
-    (): any
-    [key: string]: any
-}
+declare function Modal(el: HTMLElement, options?: Modal.Options): Modal.Instance;
 
-interface options {
-    // Create a backdrop
-    backdrop?: boolean;
-    /** Modal is closed */
-    closed?: boolean;
-    /** Modal is minimized */
-    minimized?: boolean;
-    /** Modal can be closed */
-    closable?: 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;
-    /** Load the content from a remote URL */
-    url?: string;
-    /** Responsive mode. Default is true */
-    responsive?: boolean;
-    /** Bring to front on focus */
-    layers?: boolean;
-    /** Close the modal when it loses the focus */
-    'auto-close'?: boolean;
-    /** Ensures modal will be visible on screen */
-    'auto-adjust'?: boolean;
-    /** Focus on the modal when open it. Default: true */
-    focus?: boolean;
-}
+declare namespace Modal {
+    interface Options {
+        /** Activate the backdrop when the modal is opened */
+        backdrop?: boolean;
+        /** Current visibility state of the modal */
+        closed?: boolean;
+        /** Current state of the modal */
+        minimized?: boolean;
+        /** Modal can be closed. Default: false */
+        closable?: boolean;
+        /** Modal can be minimized. Default: false */
+        minimizable?: boolean;
+        /** Modal can be resized. Default: false */
+        resizable?: boolean;
+        /** Modal can be moved from its original position. Default: false */
+        draggable?: boolean;
+        /** Modal is automatic align center during initialization */
+        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;
+        /** Load the content from a remote URL during initialization */
+        url?: string;
+        /** Responsive mode. Default is true */
+        responsive?: boolean;
+        /** Bring to front on focus */
+        layers?: boolean;
+        /** Close the modal when it loses the focus. Default: false */
+        'auto-close'?: boolean;
+        /** Ensures modal will be visible on screen. Default: false */
+        'auto-adjust'?: boolean;
+        /** Focus on the modal when open it. Default: true */
+        focus?: boolean;
+        /** Create scroll when the content is larger than the modal. Default: false */
+        overflow?: boolean;
+    }
 
-interface instance {
-    closed: boolean;
-    closable: boolean;
-    minimized: boolean;
-    minimizable: boolean;
-    resizable: boolean;
-    draggable: boolean;
-    center: boolean;
-    title: string;
-    width: number;
-    height: number;
-    top: number;
-    left: number;
-    front: () => void;
-    back: () => void;
-    'auto-close': boolean;
-    /** Ensures modal will be visible on screen */
-    'auto-adjust'?: boolean;
+    interface Instance {
+        /** Backdrop is shown when the modal is opened */
+        backdrop?: boolean;
+        /** Current visibility state of the modal */
+        closed: boolean;
+        /** Current state of the modal */
+        minimized?: boolean;
+        /** Modal can be closed. */
+        closable?: 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 during initialization */
+        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;
+        /** Load the content from a remote URL during initialization */
+        url?: string;
+        /** Responsive mode is active */
+        responsive?: boolean;
+        /** Bring to front on focus */
+        layers?: boolean;
+        /** Close the modal when it loses the focus. */
+        'auto-close'?: boolean;
+        /** Ensures modal will be visible on screen. */
+        'auto-adjust'?: boolean;
+        /** Focus on the modal when open it. */
+        focus?: boolean;
+        /** Create scroll when the content is larger than the modal. Default: false */
+        overflow?: boolean;
+        /** Open the modal */
+        open: () => void;
+        /** Close the modal */
+        close: () => void;
+        /** Send to front when layers is activated */
+        front: () => void;
+        /** Send to back when layers is activated */
+        back: () => void;
+    }
 }
 
-export declare function Modal(el: HTMLElement, options?: options): instance;
+export default Modal;

package/dist/index.js

@@ -31,7 +31,7 @@ if (!lemonade && typeof (require) === 'function') {
     const sendToFront = function(container) {
         let highestXIndex = defaultZIndex;
         for (let i = 0; i < modals.length; i++) {
-            const zIndex = parseInt(modals[i].style.zIndex);
+            const zIndex = parseInt(modals[i].el.style.zIndex);
             if (zIndex > highestXIndex) {
                 highestXIndex = zIndex;
             }
@@ -230,8 +230,12 @@ if (!lemonade && typeof (require) === 'function') {
         // Keep all modals references
         modals.push(self);
 
-        self.back = sendToBack;
-        self.front = sendToFront;
+        self.back = function() {
+            sendToBack(self.el);
+        }
+        self.front = function() {
+            sendToFront(self.el);
+        }
 
         self.onload = function() {
             if (self.url) {
@@ -266,8 +270,8 @@ if (!lemonade && typeof (require) === 'function') {
 
             // Initial centralize
             if (self.center === true) {
-                self.top = (window.innerHeight - self.el.offsetHeight) / 2;
-                self.left = (window.innerWidth - self.el.offsetWidth) / 2;
+                self.top = (window.innerHeight - self.height) / 2;
+                self.left = (window.innerWidth - self.width) / 2;
             }
 
             // Full screen
@@ -337,18 +341,18 @@ if (!lemonade && typeof (require) === 'function') {
                         self.el.classList.remove('lm-modal-animation');
                     }
                 }
+
                 // Call the vents
                 self.closed ? Dispatch.call(self,'onclose') : Dispatch.call(self,'onopen');
             } else if (property === 'top' || property === 'left' || property === 'width' || property === 'height') {
                 self.el.style[property] = self[property] + 'px';
+            }
 
-                // Adjust position
+            // Adjust position
+            if (self.closed === false) {
                 if (isTrue(self['auto-adjust'])) {
-                    if (property === 'top') {
-                        adjustTop.call(self);
-                    } else if (property === 'left') {
-                        adjustLeft.call(self);
-                    }
+                    adjustTop.call(self);
+                    adjustLeft.call(self);
                 }
             }
         }
@@ -461,12 +465,15 @@ if (!lemonade && typeof (require) === 'function') {
             }
         }
 
-        return `<div class="lm-modal" title="{{self.title}}" closed="{{self.closed}}" closable="{{self.closable}}" minimizable="{{self.minimizable}}" minimized="{{self.minimized}}" center="{{self.center}}" :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" 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>`
     }
 
     lemonade.setComponents({ Modal: Modal });
 
-    return function (root, options, template = '') {
+    return function (root, options, template) {
         if (typeof(root) === 'object') {
             // Keep the DOM elements
             let elements = [];
@@ -479,13 +486,13 @@ if (!lemonade && typeof (require) === 'function') {
             // Append any elements inside the modal
             if (elements.length) {
                 while (elements[0]) {
-                    e.appendChild(elements[0]);
+                    e.children[1].appendChild(elements[0]);
                     elements.shift();
                 }
             }
             return options;
         } else {
-            return Modal.call(this, root)
+            return Modal.call(this, root);
         }
     }
 })));

package/dist/react.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Official Type definitions for Jspreadsheet React
+ * https://jspreadsheet.com/v10/docs/react
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+
+
+import ModalComponent from './index';
+
+interface Modal {
+    (): any
+    [key: string]: any
+}
+
+declare function Modal<Modal>(props: ModalComponent.Options): any;
+
+export default Modal;

package/dist/style.css

@@ -13,83 +13,55 @@
     border: 1px solid #bbb;
     outline: none;
     margin: 0;
+    display: flex;
+    flex-direction: column;
 }
 
-.lm-modal-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: #00000020;
-    z-index: 999;
-}
-
-.lm-modal-layers:focus {
-    z-index: 999;
-}
-
-.lm-modal-animation {
-    transform: none;
-    animation: slide-bottom-in 0.4s forwards;
-}
-
-.lm-modal[data-responsive].fullscreen {
-    top: 0;
-    height: 100% !important;
-}
-
-.lm-modal.moving {
-    cursor: move !important;
-}
-
-.lm-modal-picker {
-    width: 100% !important;
-    height: 260px !important;
-    left: 0;
-    bottom: 0;
-    border: 0;
-    border-radius: 0;
-    transform: none;
-}
-
-.lm-modal[title]::before {
-    content: attr(title);
-    display: block;
-    position: relative;
+.lm-modal-title {
     width: 100%;
     border-bottom: 1px solid #e9e9e9;
     padding: 10px;
     box-sizing: border-box;
     font-size: 1.2em;
     line-height: 24px;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    user-select: none;
+    display: flex;
+    border-radius: 5px;
 }
 
-.lm-modal::after {
-    font-family: 'Material Icons';
-    cursor: pointer;
+.lm-modal-title:empty {
+    display: none;
 }
 
-.lm-modal[closable="true"]::after {
-    content: 'close';
-    display: block;
-    position: absolute;
-    top: 10px;
-    right: 10px;
+.lm-modal-title[data-icon]::before {
+    content: attr(data-icon);
+    width: 24px;
+    height: 24px;
     font-size: 24px;
+    font-family: "Material Icons";
+    margin-right: 5px;
 }
 
-.lm-modal[minimizable="true"]::after {
-    content: '\2500';
-    display: block;
+.lm-modal[closable="true"] .lm-modal-title::after {
+    content: 'close';
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    font-family: "Material Icons";
     position: absolute;
-    top: 10px;
     right: 10px;
-    font-size: 24px;
+    cursor: pointer;
 }
 
-.lm-modal[title=""]::before {
-    display: none;
+.lm-modal[minimizable="true"] .lm-modal-title::after {
+    content: '\2500';
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    font-family: "Material Icons";
 }
 
 .lm-modal[closed="true"] {
@@ -119,4 +91,56 @@
 
 .lm-modal.hide {
     opacity: 0;
+}
+
+.lm-modal-layers:focus {
+    z-index: 999;
+}
+
+.lm-modal-animation {
+    transform: none;
+    animation: slide-bottom-in 0.4s forwards;
+}
+
+.lm-modal[data-responsive].fullscreen {
+    top: 0;
+    height: 100% !important;
+}
+
+.lm-modal.moving {
+    cursor: move !important;
+}
+
+.lm-modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #00000020;
+    z-index: 999;
+}
+
+.lm-modal > div:last-child {
+    width: 100%;
+    height: 100%;
+}
+
+.lm-modal[overflow="true"] > div:last-child {
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #333 transparent;
+}
+
+.lm-modal > div:last-child::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+.lm-modal > div:last-child::-webkit-scrollbar-track {
+    background: #eee;
+}
+
+.lm-modal > div:last-child::-webkit-scrollbar-thumb {
+    background: #888;
 }

package/package.json

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