@lemonadejs/modal 2.0.2 → 2.0.4

package/README.md

@@ -31,26 +31,79 @@ To use data grid via a CDN, include the following script tags in your HTML file:
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
 ```
 
-### Configuration
+### Usage
 
-Quick example
+Declarative - Quick example with Lemonade
 
 ```javascript
-import Signature from "@lemonadejs/modal";
+import Modal from "@lemonadejs/modal";
+import "@lemonadejs/modal/dist/style.css"
 
 export default function Component() {
     const self = this;
     self.width = 400;
     self.height = 200;
 
-    return `<Modal width="{{self.width}}" height="{{self.height}}" title="My windowmodal">
-        <h1>Teste</h1>
+    return `<Modal width="{{self.width}}" height="{{self.height}}" title="My window modal">
+        <h1>Quick example!</h1>
     </Modal>`;
 }
 ```
 
+Programmatical - Quick example with Javascript 
+
+```html
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
+
+<div id="root">
+    <h1>Quick example!</h1>
+</div>
+
+<script>
+// Get root element to be the modal target
+const root = document.getElementById("root")
+
+// Call modal with the target and the options object
+Modal(root, {
+    width: 400,
+    height: 200,
+    title: "My window modal",
+})
+</script>
+```
+
+### Configuration
+
+You can configure things such as position, size, and functionalities.
+
+#### Modal Properties
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| title? | string | The header title of the modal |
+| height? | number | The height of the modal in pixels |
+| width? | number | The width of the modal in pixels |
+| top? | number | The vertical position of the modal within its container in pixels |
+| left? | number | The horizontal position of the modal within its container in pixels |
+| draggable? | boolean | Determines if the modal can be dragged |
+| resizable? | boolean | Determines if the modal can be resized |
+| closed? | boolean | Controls the open and close state of the modal |
+| closable? | boolean | Disables the ability to close the modal |
+| center? | boolean | Enables rendering the modal in the center of its parent container |
+| url? | string | The URL from which to fetch and render content |
+
+#### Modal Events
+
+| Event | Trigger |
+| ----- | ------- |
+| onclose | Called when modal closes |
+| onopen | Called when modal opens |
+
 ## License
 
 The LemonadeJS Modal is released under the MIT.

package/dist/index.js

@@ -258,12 +258,14 @@ if (! lemonade && typeof(require) === 'function') {
         return `<div class="lm-modal" title="{{self.title}}" closed="{{self.closed}}" :closable="self.closable" style="width: {{self.width}}px; height: {{self.height}}px; top: {{self.top}}px; left: {{self.left}}px;" onmousedown="self.mousedown(e)" tabindex="-1">${template}</div>`
     }
 
-
     lemonade.setComponents({ Modal: Modal });
 
     return function (root, options) {
         if (typeof(root) === 'object') {
-            lemonade.render(Modal, root, options)
+            let template = root.innerHTML;
+            root.innerHTML = '';
+
+            lemonade.render(Modal, root, options, template)
             return options;
         } else {
             return Modal.call(this, root)

package/package.json

@@ -16,5 +16,5 @@
         "lemonadejs": "^3.3.1"
     },
     "main": "dist/index.js",
-    "version": "2.0.2"
+    "version": "2.0.4"
 }