@lemonadejs/modal 2.0.1 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -5
- package/dist/index.js +5 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -31,26 +31,79 @@ To use data grid via a CDN, include the following script tags in your HTML file:
|
|
|
31
31
|
```html
|
|
32
32
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
33
33
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
|
|
34
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
|
|
34
35
|
```
|
|
35
36
|
|
|
36
|
-
###
|
|
37
|
+
### Usage
|
|
37
38
|
|
|
38
|
-
Quick example
|
|
39
|
+
Declarative - Quick example with Lemonade
|
|
39
40
|
|
|
40
41
|
```javascript
|
|
41
|
-
import
|
|
42
|
+
import Modal from "@lemonadejs/modal";
|
|
43
|
+
import "@lemonadejs/modal/dist/style.css"
|
|
42
44
|
|
|
43
45
|
export default function Component() {
|
|
44
46
|
const self = this;
|
|
45
47
|
self.width = 400;
|
|
46
48
|
self.height = 200;
|
|
47
49
|
|
|
48
|
-
return `<Modal width="{{self.width}}" height="{{self.height}}" title="My
|
|
49
|
-
<h1>
|
|
50
|
+
return `<Modal width="{{self.width}}" height="{{self.height}}" title="My window modal">
|
|
51
|
+
<h1>Quick example!</h1>
|
|
50
52
|
</Modal>`;
|
|
51
53
|
}
|
|
52
54
|
```
|
|
53
55
|
|
|
56
|
+
Programmatical - Quick example with Javascript
|
|
57
|
+
|
|
58
|
+
```html
|
|
59
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
60
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
|
|
61
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
|
|
62
|
+
|
|
63
|
+
<div id="root">
|
|
64
|
+
<h1>Quick example!</h1>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<script>
|
|
68
|
+
// Get root element to be the modal target
|
|
69
|
+
const root = document.getElementById("root")
|
|
70
|
+
|
|
71
|
+
// Call modal with the target and the options object
|
|
72
|
+
Modal(root, {
|
|
73
|
+
width: 400,
|
|
74
|
+
height: 200,
|
|
75
|
+
title: "My window modal",
|
|
76
|
+
})
|
|
77
|
+
</script>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Configuration
|
|
81
|
+
|
|
82
|
+
You can configure things such as position, size, and functionalities.
|
|
83
|
+
|
|
84
|
+
#### Modal Properties
|
|
85
|
+
|
|
86
|
+
| Property | Type | Description |
|
|
87
|
+
| -------- | ---- | ----------- |
|
|
88
|
+
| title? | string | The header title of the modal |
|
|
89
|
+
| height? | number | The height of the modal in pixels |
|
|
90
|
+
| width? | number | The width of the modal in pixels |
|
|
91
|
+
| top? | number | The vertical position of the modal within its container in pixels |
|
|
92
|
+
| left? | number | The horizontal position of the modal within its container in pixels |
|
|
93
|
+
| draggable? | boolean | Determines if the modal can be dragged |
|
|
94
|
+
| resizable? | boolean | Determines if the modal can be resized |
|
|
95
|
+
| closed? | boolean | Controls the open and close state of the modal |
|
|
96
|
+
| closable? | boolean | Disables the ability to close the modal |
|
|
97
|
+
| center? | boolean | Enables rendering the modal in the center of its parent container |
|
|
98
|
+
| url? | string | The URL from which to fetch and render content |
|
|
99
|
+
|
|
100
|
+
#### Modal Events
|
|
101
|
+
|
|
102
|
+
| Event | Trigger |
|
|
103
|
+
| ----- | ------- |
|
|
104
|
+
| onclose | Called when modal closes |
|
|
105
|
+
| onopen | Called when modal opens |
|
|
106
|
+
|
|
54
107
|
## License
|
|
55
108
|
|
|
56
109
|
The LemonadeJS Modal is released under the MIT.
|
package/dist/index.js
CHANGED
|
@@ -255,15 +255,17 @@ if (! lemonade && typeof(require) === 'function') {
|
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
257
|
|
|
258
|
-
return `<div class="lm-modal" title="{{self.title}}"
|
|
258
|
+
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>`
|
|
259
259
|
}
|
|
260
260
|
|
|
261
|
-
|
|
262
261
|
lemonade.setComponents({ Modal: Modal });
|
|
263
262
|
|
|
264
263
|
return function (root, options) {
|
|
265
264
|
if (typeof(root) === 'object') {
|
|
266
|
-
|
|
265
|
+
let template = root.innerHTML;
|
|
266
|
+
root.innerHTML = '';
|
|
267
|
+
|
|
268
|
+
lemonade.render(Modal, root, options, template)
|
|
267
269
|
return options;
|
|
268
270
|
} else {
|
|
269
271
|
return Modal.call(this, root)
|
package/package.json
CHANGED