@lemonadejs/modal 2.3.6 → 2.4.1
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 +118 -118
- package/dist/index.d.ts +73 -73
- package/dist/index.js +490 -490
- package/dist/react.js +40 -0
- package/dist/style.css +121 -124
- package/dist/vue.js +52 -0
- package/package.json +21 -21
package/README.md
CHANGED
|
@@ -1,118 +1,118 @@
|
|
|
1
|
-
# LemonadeJS Modal
|
|
2
|
-
|
|
3
|
-
[Official website and documentation is here](https://lemonadejs.net/components/modal)
|
|
4
|
-
|
|
5
|
-
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
|
|
6
|
-
|
|
7
|
-
The LemonadeJS JavaScript Modal is a responsive and reactive component that creates floating modals. With its flexible settings, users can easily configure draggability, closability, and resizability according to their needs.
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
- Lightweight: The JavaScript Modal is only about 4 KBytes;
|
|
12
|
-
- Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
|
|
13
|
-
- Integration: It can be used as a standalone library or integrated with any modern framework;
|
|
14
|
-
|
|
15
|
-
## Getting Started
|
|
16
|
-
|
|
17
|
-
You can install using NPM or using directly from a CDN.
|
|
18
|
-
|
|
19
|
-
### npm Installation
|
|
20
|
-
|
|
21
|
-
To install it in your project using npm, run the following command:
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
$ npm install @lemonadejs/modal
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
### CDN
|
|
28
|
-
|
|
29
|
-
To use modal via a CDN, include the following script tags in your HTML file:
|
|
30
|
-
|
|
31
|
-
```html
|
|
32
|
-
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
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" />
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
### Usage
|
|
38
|
-
|
|
39
|
-
Declarative - Quick example with Lemonade
|
|
40
|
-
|
|
41
|
-
```javascript
|
|
42
|
-
import Modal from "@lemonadejs/modal";
|
|
43
|
-
import "@lemonadejs/modal/dist/style.css"
|
|
44
|
-
|
|
45
|
-
export default function Component() {
|
|
46
|
-
const self = this;
|
|
47
|
-
self.width = 400;
|
|
48
|
-
self.height = 200;
|
|
49
|
-
|
|
50
|
-
return `<Modal width="{{self.width}}" height="{{self.height}}" title="My window modal">
|
|
51
|
-
<h1>Quick example!</h1>
|
|
52
|
-
</Modal>`;
|
|
53
|
-
}
|
|
54
|
-
```
|
|
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 | Enables the close button |
|
|
97
|
-
| minimized? | boolean | Controls the minimized state of the modal |
|
|
98
|
-
| minimizable? | boolean | Enables the minimize button |
|
|
99
|
-
| center? | boolean | Enables rendering the modal in the center of its parent container |
|
|
100
|
-
| url? | string | The URL from which to fetch and render content |
|
|
101
|
-
| autoadjust? | boolean | Adjust the position when the modal is outside the viewport |
|
|
102
|
-
| autoclose? | boolean | Close when the modal loses focus |
|
|
103
|
-
|
|
104
|
-
#### Modal Events
|
|
105
|
-
|
|
106
|
-
| Event | Trigger |
|
|
107
|
-
| ----- | ------- |
|
|
108
|
-
| onclose | Called when modal closes |
|
|
109
|
-
| onopen | Called when modal opens |
|
|
110
|
-
|
|
111
|
-
## License
|
|
112
|
-
|
|
113
|
-
The LemonadeJS Modal is released under the MIT.
|
|
114
|
-
|
|
115
|
-
## Other Tools
|
|
116
|
-
|
|
117
|
-
- [jSuites](https://jsuites.net/v4/)
|
|
118
|
-
- [Jspreadsheet Data Grid](https://jspreadsheet.com)
|
|
1
|
+
# LemonadeJS Modal
|
|
2
|
+
|
|
3
|
+
[Official website and documentation is here](https://lemonadejs.net/components/modal)
|
|
4
|
+
|
|
5
|
+
Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.
|
|
6
|
+
|
|
7
|
+
The LemonadeJS JavaScript Modal is a responsive and reactive component that creates floating modals. With its flexible settings, users can easily configure draggability, closability, and resizability according to their needs.
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- Lightweight: The JavaScript Modal is only about 4 KBytes;
|
|
12
|
+
- Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
|
|
13
|
+
- Integration: It can be used as a standalone library or integrated with any modern framework;
|
|
14
|
+
|
|
15
|
+
## Getting Started
|
|
16
|
+
|
|
17
|
+
You can install using NPM or using directly from a CDN.
|
|
18
|
+
|
|
19
|
+
### npm Installation
|
|
20
|
+
|
|
21
|
+
To install it in your project using npm, run the following command:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
$ npm install @lemonadejs/modal
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### CDN
|
|
28
|
+
|
|
29
|
+
To use modal via a CDN, include the following script tags in your HTML file:
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
|
|
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" />
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Usage
|
|
38
|
+
|
|
39
|
+
Declarative - Quick example with Lemonade
|
|
40
|
+
|
|
41
|
+
```javascript
|
|
42
|
+
import Modal from "@lemonadejs/modal";
|
|
43
|
+
import "@lemonadejs/modal/dist/style.css"
|
|
44
|
+
|
|
45
|
+
export default function Component() {
|
|
46
|
+
const self = this;
|
|
47
|
+
self.width = 400;
|
|
48
|
+
self.height = 200;
|
|
49
|
+
|
|
50
|
+
return `<Modal width="{{self.width}}" height="{{self.height}}" title="My window modal">
|
|
51
|
+
<h1>Quick example!</h1>
|
|
52
|
+
</Modal>`;
|
|
53
|
+
}
|
|
54
|
+
```
|
|
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 | Enables the close button |
|
|
97
|
+
| minimized? | boolean | Controls the minimized state of the modal |
|
|
98
|
+
| minimizable? | boolean | Enables the minimize button |
|
|
99
|
+
| center? | boolean | Enables rendering the modal in the center of its parent container |
|
|
100
|
+
| url? | string | The URL from which to fetch and render content |
|
|
101
|
+
| autoadjust? | boolean | Adjust the position when the modal is outside the viewport |
|
|
102
|
+
| autoclose? | boolean | Close when the modal loses focus |
|
|
103
|
+
|
|
104
|
+
#### Modal Events
|
|
105
|
+
|
|
106
|
+
| Event | Trigger |
|
|
107
|
+
| ----- | ------- |
|
|
108
|
+
| onclose | Called when modal closes |
|
|
109
|
+
| onopen | Called when modal opens |
|
|
110
|
+
|
|
111
|
+
## License
|
|
112
|
+
|
|
113
|
+
The LemonadeJS Modal is released under the MIT.
|
|
114
|
+
|
|
115
|
+
## Other Tools
|
|
116
|
+
|
|
117
|
+
- [jSuites](https://jsuites.net/v4/)
|
|
118
|
+
- [Jspreadsheet Data Grid](https://jspreadsheet.com)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Official Type definitions for LemonadeJS plugins
|
|
3
|
-
* https://lemonadejs.net
|
|
4
|
-
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
interface Modal {
|
|
8
|
-
(): any
|
|
9
|
-
[key: string]: any
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
interface options {
|
|
13
|
-
// Create a backdrop
|
|
14
|
-
backdrop?: boolean;
|
|
15
|
-
/** Modal is closed */
|
|
16
|
-
closed?: boolean;
|
|
17
|
-
/** Modal is minimized */
|
|
18
|
-
minimized?: boolean;
|
|
19
|
-
/** Modal can be closed */
|
|
20
|
-
closable?: boolean;
|
|
21
|
-
/** Modal can be minimized */
|
|
22
|
-
minimizable?: boolean;
|
|
23
|
-
/** Modal can be resized */
|
|
24
|
-
resizable?: boolean;
|
|
25
|
-
/** Modal can be moved from its original position */
|
|
26
|
-
draggable?: boolean;
|
|
27
|
-
/** Modal is automatic align center */
|
|
28
|
-
center?: boolean;
|
|
29
|
-
/** Title of the modal */
|
|
30
|
-
title?: string;
|
|
31
|
-
/** Width of the modal */
|
|
32
|
-
width?: number;
|
|
33
|
-
/** Height of the modal */
|
|
34
|
-
height?: number;
|
|
35
|
-
/** Position top */
|
|
36
|
-
top?: number;
|
|
37
|
-
/** Position Left */
|
|
38
|
-
left?: number;
|
|
39
|
-
/** Load the content from a remote URL */
|
|
40
|
-
url?: string;
|
|
41
|
-
/** Responsive mode. Default is true */
|
|
42
|
-
responsive?: boolean;
|
|
43
|
-
/** Bring to front on focus */
|
|
44
|
-
layers?: boolean;
|
|
45
|
-
/** Close the modal when it loses the focus */
|
|
46
|
-
'auto-close'?: boolean;
|
|
47
|
-
/** Ensures modal will be visible on screen */
|
|
48
|
-
'auto-adjust'?: boolean;
|
|
49
|
-
/** Focus on the modal when open it. Default: true */
|
|
50
|
-
focus?: boolean;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
interface instance {
|
|
54
|
-
closed: boolean;
|
|
55
|
-
closable: boolean;
|
|
56
|
-
minimized: boolean;
|
|
57
|
-
minimizable: boolean;
|
|
58
|
-
resizable: boolean;
|
|
59
|
-
draggable: boolean;
|
|
60
|
-
center: boolean;
|
|
61
|
-
title: string;
|
|
62
|
-
width: number;
|
|
63
|
-
height: number;
|
|
64
|
-
top: number;
|
|
65
|
-
left: number;
|
|
66
|
-
front: () => void;
|
|
67
|
-
back: () => void;
|
|
68
|
-
'auto-close': boolean;
|
|
69
|
-
/** Ensures modal will be visible on screen */
|
|
70
|
-
'auto-adjust'?: boolean;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export declare function Modal(el: HTMLElement, options?: options): instance;
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
interface Modal {
|
|
8
|
+
(): any
|
|
9
|
+
[key: string]: any
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface options {
|
|
13
|
+
// Create a backdrop
|
|
14
|
+
backdrop?: boolean;
|
|
15
|
+
/** Modal is closed */
|
|
16
|
+
closed?: boolean;
|
|
17
|
+
/** Modal is minimized */
|
|
18
|
+
minimized?: boolean;
|
|
19
|
+
/** Modal can be closed */
|
|
20
|
+
closable?: boolean;
|
|
21
|
+
/** Modal can be minimized */
|
|
22
|
+
minimizable?: boolean;
|
|
23
|
+
/** Modal can be resized */
|
|
24
|
+
resizable?: boolean;
|
|
25
|
+
/** Modal can be moved from its original position */
|
|
26
|
+
draggable?: boolean;
|
|
27
|
+
/** Modal is automatic align center */
|
|
28
|
+
center?: boolean;
|
|
29
|
+
/** Title of the modal */
|
|
30
|
+
title?: string;
|
|
31
|
+
/** Width of the modal */
|
|
32
|
+
width?: number;
|
|
33
|
+
/** Height of the modal */
|
|
34
|
+
height?: number;
|
|
35
|
+
/** Position top */
|
|
36
|
+
top?: number;
|
|
37
|
+
/** Position Left */
|
|
38
|
+
left?: number;
|
|
39
|
+
/** Load the content from a remote URL */
|
|
40
|
+
url?: string;
|
|
41
|
+
/** Responsive mode. Default is true */
|
|
42
|
+
responsive?: boolean;
|
|
43
|
+
/** Bring to front on focus */
|
|
44
|
+
layers?: boolean;
|
|
45
|
+
/** Close the modal when it loses the focus */
|
|
46
|
+
'auto-close'?: boolean;
|
|
47
|
+
/** Ensures modal will be visible on screen */
|
|
48
|
+
'auto-adjust'?: boolean;
|
|
49
|
+
/** Focus on the modal when open it. Default: true */
|
|
50
|
+
focus?: boolean;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
interface instance {
|
|
54
|
+
closed: boolean;
|
|
55
|
+
closable: boolean;
|
|
56
|
+
minimized: boolean;
|
|
57
|
+
minimizable: boolean;
|
|
58
|
+
resizable: boolean;
|
|
59
|
+
draggable: boolean;
|
|
60
|
+
center: boolean;
|
|
61
|
+
title: string;
|
|
62
|
+
width: number;
|
|
63
|
+
height: number;
|
|
64
|
+
top: number;
|
|
65
|
+
left: number;
|
|
66
|
+
front: () => void;
|
|
67
|
+
back: () => void;
|
|
68
|
+
'auto-close': boolean;
|
|
69
|
+
/** Ensures modal will be visible on screen */
|
|
70
|
+
'auto-adjust'?: boolean;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export declare function Modal(el: HTMLElement, options?: options): instance;
|