@lemonadejs/modal 2.4.9 → 2.5.0

package/dist/react.d.ts

@@ -1,17 +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;
+/**
+ * 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/react.js

@@ -1,37 +1,37 @@
-import React, { useRef, useEffect } from "react";
-import { renderToStaticMarkup } from 'react-dom/server';
-import Component from './index';
-
-
-export default React.forwardRef((props, mainReference) => {
-    // Dom element
-    const Ref = useRef(null);
-
-    const template = renderToStaticMarkup(props.children)
-
-    // Get the properties for the spreadsheet
-    let options = { ...props };
-
-    useEffect(() => {
-        if (!Ref.current.innerHTML) {
-            mainReference.current = Component(Ref.current, options, template);
-        }
-    }, []);
-
-    useEffect(() => {
-        for (let key in props) {
-            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
-                if (props[key] !== mainReference.current[key]) {
-                    mainReference.current[key] = props[key];
-                }
-            }
-        }
-    }, [props])
-
-    let prop = {
-        ref: Ref,
-        style: { height: '100%', width: '100%' }
-    };
-
-    return React.createElement("div", prop);
+import React, { useRef, useEffect } from "react";
+import { renderToStaticMarkup } from 'react-dom/server';
+import Component from './index';
+
+
+export default React.forwardRef((props, mainReference) => {
+    // Dom element
+    const Ref = useRef(null);
+
+    const template = renderToStaticMarkup(props.children)
+
+    // Get the properties for the spreadsheet
+    let options = { ...props };
+
+    useEffect(() => {
+        if (!Ref.current.innerHTML) {
+            mainReference.current = Component(Ref.current, options, template);
+        }
+    }, []);
+
+    useEffect(() => {
+        for (let key in props) {
+            if (props.hasOwnProperty(key) && mainReference.current.hasOwnProperty(key)) {
+                if (props[key] !== mainReference.current[key]) {
+                    mainReference.current[key] = props[key];
+                }
+            }
+        }
+    }, [props])
+
+    let prop = {
+        ref: Ref,
+        style: { height: '100%', width: '100%' }
+    };
+
+    return React.createElement("div", prop);
 })

package/dist/style.css

@@ -1,166 +1,173 @@
-.lm-modal {
-    position: fixed;
-    min-width: 300px;
-    min-height: 240px;
-    border-radius: 5px;
-    z-index: 15;
-    background-color: #fff;
-    box-sizing: border-box;
-    box-shadow: 0 0 12px rgb(0 0 0 / 22%);
-    opacity: 1;
-    transition: opacity 0.5s ease;
-    will-change: transform;
-    border: 1px solid #bbb;
-    outline: none;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-.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-title:empty {
-    display: none;
-}
-
-.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[closable="true"]::after {
-    content: 'close';
-    width: 24px;
-    height: 24px;
-    font-size: 24px;
-    font-family: "Material Icons";
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    cursor: pointer;
-}
-
-.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"] {
-    display: none !important;
-}
-
-.lm-modal[minimized="true"] {
-    bottom: 0;
-    top: initial !important;
-    left: initial !important;
-    width: 200px !important;
-    height: 45px !important;
-    min-width: initial;
-    min-height: initial;
-    overflow: hidden;
-    transition: margin 0.2s ease-in-out;
-}
-
-.lm-modal[minimized="true"]::after {
-    content: 'open_in_full';
-}
-
-@keyframes slide-bottom-in {
-    0% { transform: translateY(100%); }
-    100% { transform: translateY(0%); }
-}
-
-.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;
-}
-
-.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;
+.lm-modal {
+    position: fixed;
+    min-width: 300px;
+    min-height: 240px;
+    border-radius: 5px;
+    z-index: 15;
+    background-color: #fff;
+    box-sizing: border-box;
+    box-shadow: 0 0 12px rgb(0 0 0 / 22%);
+    opacity: 1;
+    will-change: transform;
+    border: 1px solid #bbb;
+    outline: none;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    transition: opacity 0.4s ease, top 0.4s ease, left 0.4s ease, width 0.4s ease, height 0.4s ease;
+}
+
+.lm-modal-title {
+    width: 100%;
+    border-bottom: 1px solid #e9e9e9;
+    padding: 10px;
+    box-sizing: border-box;
+    font-size: 1.2em;
+    line-height: 24px;
+    background: #fff;
+    user-select: none;
+    display: flex;
+    border-radius: 5px;
+}
+
+.lm-modal-title:empty {
+    display: none;
+}
+
+.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[closable="true"]::after {
+    content: 'close';
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    font-family: "Material Icons";
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+}
+
+.lm-modal[minimizable="true"]::before {
+    content: '\2500';
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+    font-family: "Material Icons";
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    cursor: pointer;
+}
+
+.lm-modal[closable="true"].lm-modal[minimizable="true"]::before {
+    right: 35px;
+}
+
+.lm-modal[closed="true"] {
+    display: none !important;
+}
+
+.lm-modal[minimized="true"]:before {
+    content: '\e5d7';
+}
+
+.lm-modal.hide {
+    opacity: 0;
+}
+
+.lm-modal-layers:focus {
+    z-index: 999;
+}
+
+.lm-modal[data-responsive].fullscreen {
+    top: 0;
+    height: 100% !important;
+}
+
+.lm-modal.moving {
+    cursor: move !important;
+    transition: initial;
+}
+
+.lm-modal.resizing {
+    transition: initial;
+}
+
+.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;
+}
+
+.lm-modal[position="left"] {
+    top: 0;
+    left: 0;
+    width: 280px;
+    height: 100vh !important;
+    border-width: 0;
+    border-radius: initial;
+}
+
+.lm-modal[position="right"] {
+    top: 0;
+    left: auto;
+    right: 0;
+    width: 280px;
+    height: 100vh !important;
+    border-width: 0;
+    border-radius: initial;
+}
+
+.lm-modal[position="bottom"] {
+    top: auto;
+    left: 0;
+    bottom: 0;
+    width: 100vw !important;
+    height: 280px;
+    border-width: 0;
+    border-radius: initial;
+}
+
+.lm-modal[minimized="true"] {
+    width: 200px !important;
+    height: 45px !important;
+    min-width: initial;
+    min-height: initial;
+    overflow: hidden;
 }

package/dist/vue.d.ts

@@ -1,15 +1,15 @@
-/**
- * Official Type definitions for the LemonadeJS plugins
- * https://lemonadejs.net
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
- */
-import Component from './index';
-
-interface Modal {
-    (): any
-    [key: string]: any
-}
-
-declare function Modal<Modal>(props: Component.Options): any;
-
+/**
+ * Official Type definitions for the LemonadeJS plugins
+ * https://lemonadejs.net
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+ */
+import Component from './index';
+
+interface Modal {
+    (): any
+    [key: string]: any
+}
+
+declare function Modal<Modal>(props: Component.Options): any;
+
 export default Modal;

package/dist/vue.js

@@ -1,53 +1,53 @@
-import { h } from 'vue';
-import component from "./index.js";
-
-export const Modal = {
-        inheritAttrs: false,
-        mounted() {
-            let options = {
-                ...this.$attrs
-            };
-    
-            this.el = this.$refs.container;
-    
-            this.current = component(this.$refs.container, options);
-        },
-        setup(_, context) {
-            let containerProps = {
-                ref: 'container',
-                style: {
-                    width: '100%',
-                    height: '100%',
-                }
-            };
-    
-            let vnode = []; 
-    
-            if (context.slots.default && typeof(context.slots.default) === 'function') {
-                vnode = context.slots.default()
-            }
-    
-            return () =>  h('div', containerProps, vnode);
-        },
-        watch: {
-            $attrs: {
-                deep: true,
-                handler() {
-                    this.updateState();
-                }
-            }
-        },
-        methods: {
-            updateState() {
-                for (let key in this.$attrs) {
-                    if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
-                        if (this.$attrs[key] !== this.current[key]) {
-                            this.current[key] = this.$attrs[key];
-                        }
-                    }
-                }
-            }
-        }
-};
-
+import { h } from 'vue';
+import component from "./index.js";
+
+export const Modal = {
+        inheritAttrs: false,
+        mounted() {
+            let options = {
+                ...this.$attrs
+            };
+    
+            this.el = this.$refs.container;
+    
+            this.current = component(this.$refs.container, options);
+        },
+        setup(_, context) {
+            let containerProps = {
+                ref: 'container',
+                style: {
+                    width: '100%',
+                    height: '100%',
+                }
+            };
+    
+            let vnode = []; 
+    
+            if (context.slots.default && typeof(context.slots.default) === 'function') {
+                vnode = context.slots.default()
+            }
+    
+            return () =>  h('div', containerProps, vnode);
+        },
+        watch: {
+            $attrs: {
+                deep: true,
+                handler() {
+                    this.updateState();
+                }
+            }
+        },
+        methods: {
+            updateState() {
+                for (let key in this.$attrs) {
+                    if (this.$attrs.hasOwnProperty(key) && this.current.hasOwnProperty(key)) {
+                        if (this.$attrs[key] !== this.current[key]) {
+                            this.current[key] = this.$attrs[key];
+                        }
+                    }
+                }
+            }
+        }
+};
+
 export default Modal;

package/package.json

@@ -1,21 +1,21 @@
-{
-    "name": "@lemonadejs/modal",
-    "title": "JavaScript Modal",
-    "description": "LemonadeJS modal is a JavaScript component to create floating modals.",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript modal",
-        "lemonadejs modal",
-        "js modal",
-        "modal js"
-    ],
-    "dependencies": {
-        "lemonadejs": "^4.0.7"
-    },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "version": "2.4.9"
-}
+{
+    "name": "@lemonadejs/modal",
+    "title": "JavaScript Modal",
+    "description": "LemonadeJS modal is a JavaScript component to create floating modals.",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript modal",
+        "lemonadejs modal",
+        "js modal",
+        "modal js"
+    ],
+    "dependencies": {
+        "lemonadejs": "^4.0.7"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "2.5.0"
+}