@lemonadejs/modal 2.4.9 → 2.4.10

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.
Files changed (9) hide show
  1. package/README.md +143 -143
  2. package/dist/index.d.ts +108 -108
  3. package/dist/index.js +516 -503
  4. package/dist/react.d.ts +17 -17
  5. package/dist/react.js +36 -36
  6. package/dist/style.css +171 -165
  7. package/dist/vue.d.ts +14 -14
  8. package/dist/vue.js +52 -52
  9. package/package.json +21 -21
package/README.md CHANGED
@@ -1,143 +1,143 @@
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 lemonade from 'lemonadejs'
43
- import Modal from '@lemonadejs/modal';
44
- import '@lemonadejs/modal/dist/style.css';
45
-
46
- export default function App() {
47
- const self = this;
48
-
49
- self.toggle = function () {
50
- self.modalRef.closed = !self.modalRef.closed
51
- }
52
-
53
- return `<>
54
- <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modalRef">
55
- <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
56
- <p>Quick example!</p>
57
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
58
- </div>
59
- </Modal>
60
- <input type="button" value="Toggle Modal" id="button" onclick="self.toggle" />
61
- </>`
62
- }
63
- ```
64
-
65
- Programmatical - Quick example with Javascript
66
-
67
- ```html
68
- <html>
69
- <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
70
- <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
71
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
72
-
73
- <div id="root">
74
- <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
75
- <p>Quick example!</p>
76
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
77
- </div>
78
- </div>
79
- <input type="button" value="Toggle Modal" id="button" />
80
-
81
- <script>
82
- const modal = Modal(document.getElementById("root"), {
83
- width: 400,
84
- height: 200,
85
- title: "My window modal",
86
- closed: true,
87
- center: true,
88
- });
89
- button.addEventListener('click', () => {
90
- console.log(modal.closed)
91
- modal.closed = !modal.closed;
92
- });
93
- </script>
94
- </html>
95
- ```
96
-
97
- ### Configuration
98
-
99
- You can configure things such as position, size, and functionalities.
100
-
101
- ### Settings
102
-
103
- | Attribute | Type | Description |
104
- | --- | --- | --- |
105
- | title? | String | The header title of the modal. If empty, the header will be not displayed. |
106
- | height? | Number | The height of the modal in pixels. |
107
- | width? | Number | The width of the modal in pixels. |
108
- | top? | Number | The vertical position of the modal within its window in pixels. |
109
- | left? | Number | The horizontal position of the modal within its window in pixels. |
110
- | draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
111
- | resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
112
- | closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
113
- | closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
114
- | center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
115
- | url? | String | The URL from which to fetch and render content. |
116
- | auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
117
- | auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
118
- | backdrop? | Boolean | Enables the backdrop when the modal is opened. |
119
- | minimizable? | Boolean | Modal can be minimized. `Default: false`. |
120
- | minimized? | Boolean | Current minimized state of the modal. |
121
- | position? | String | Modal is automatic align during initialization. |
122
- | title? | String | Title of the modal. |
123
- | responsive? | Boolean | Enables responsive mode. `Default: true`. |
124
- | layers? | Boolean | Bring to front on focus. |
125
- | focus? | Boolean | Focus on the modal when open it. `Default: true`. |
126
- | overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
127
-
128
-
129
- ### Events
130
-
131
- | Event | Description |
132
- |------------------------------| --- |
133
- | onclose? | Called when modal closes. |
134
- | onopen? | Called when modal opens. |
135
-
136
- ## License
137
-
138
- The LemonadeJS Modal is released under the MIT.
139
-
140
- ## Other Tools
141
-
142
- - [jSuites](https://jsuites.net/v4/)
143
- - [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 lemonade from 'lemonadejs'
43
+ import Modal from '@lemonadejs/modal';
44
+ import '@lemonadejs/modal/dist/style.css';
45
+
46
+ export default function App() {
47
+ const self = this;
48
+
49
+ self.toggle = function () {
50
+ self.modalRef.closed = !self.modalRef.closed
51
+ }
52
+
53
+ return `<>
54
+ <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modalRef">
55
+ <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
56
+ <p>Quick example!</p>
57
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
58
+ </div>
59
+ </Modal>
60
+ <input type="button" value="Toggle Modal" id="button" onclick="self.toggle" />
61
+ </>`
62
+ }
63
+ ```
64
+
65
+ Programmatical - Quick example with Javascript
66
+
67
+ ```html
68
+ <html>
69
+ <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
70
+ <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
71
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
72
+
73
+ <div id="root">
74
+ <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
75
+ <p>Quick example!</p>
76
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
77
+ </div>
78
+ </div>
79
+ <input type="button" value="Toggle Modal" id="button" />
80
+
81
+ <script>
82
+ const modal = Modal(document.getElementById("root"), {
83
+ width: 400,
84
+ height: 200,
85
+ title: "My window modal",
86
+ closed: true,
87
+ center: true,
88
+ });
89
+ button.addEventListener('click', () => {
90
+ console.log(modal.closed)
91
+ modal.closed = !modal.closed;
92
+ });
93
+ </script>
94
+ </html>
95
+ ```
96
+
97
+ ### Configuration
98
+
99
+ You can configure things such as position, size, and functionalities.
100
+
101
+ ### Settings
102
+
103
+ | Attribute | Type | Description |
104
+ | --- | --- | --- |
105
+ | title? | String | The header title of the modal. If empty, the header will be not displayed. |
106
+ | height? | Number | The height of the modal in pixels. |
107
+ | width? | Number | The width of the modal in pixels. |
108
+ | top? | Number | The vertical position of the modal within its window in pixels. |
109
+ | left? | Number | The horizontal position of the modal within its window in pixels. |
110
+ | draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
111
+ | resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
112
+ | closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
113
+ | closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
114
+ | center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
115
+ | url? | String | The URL from which to fetch and render content. |
116
+ | auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
117
+ | auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
118
+ | backdrop? | Boolean | Enables the backdrop when the modal is opened. |
119
+ | minimizable? | Boolean | Modal can be minimized. `Default: false`. |
120
+ | minimized? | Boolean | Current minimized state of the modal. |
121
+ | position? | String | Modal is automatic align during initialization. |
122
+ | title? | String | Title of the modal. |
123
+ | responsive? | Boolean | Enables responsive mode. `Default: true`. |
124
+ | layers? | Boolean | Bring to front on focus. |
125
+ | focus? | Boolean | Focus on the modal when open it. `Default: true`. |
126
+ | overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
127
+
128
+
129
+ ### Events
130
+
131
+ | Event | Description |
132
+ |------------------------------| --- |
133
+ | onclose? | Called when modal closes. |
134
+ | onopen? | Called when modal opens. |
135
+
136
+ ## License
137
+
138
+ The LemonadeJS Modal is released under the MIT.
139
+
140
+ ## Other Tools
141
+
142
+ - [jSuites](https://jsuites.net/v4/)
143
+ - [Jspreadsheet Data Grid](https://jspreadsheet.com)
package/dist/index.d.ts CHANGED
@@ -1,109 +1,109 @@
1
- /**
2
- * Official Type definitions for LemonadeJS plugins
3
- * https://lemonadejs.net
4
- * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5
- */
6
-
7
- declare function Modal(el: HTMLElement, options?: Modal.Options): Modal.Instance;
8
-
9
- declare namespace Modal {
10
- interface Options {
11
- /** Activate the backdrop when the modal is opened */
12
- backdrop?: boolean;
13
- /** Current visibility state of the modal */
14
- closed?: boolean;
15
- /** Current state of the modal */
16
- minimized?: boolean;
17
- /** Modal can be closed. Default: false */
18
- closable?: boolean;
19
- /** Modal can be minimized. Default: false */
20
- minimizable?: boolean;
21
- /** Modal can be resized. Default: false */
22
- resizable?: boolean;
23
- /** Modal can be moved from its original position. Default: false */
24
- draggable?: boolean;
25
- /** Modal is automatic align during initialization */
26
- position?: 'center' | 'left' | 'right' | undefined;
27
- /** Title of the modal */
28
- title?: string;
29
- /** Width of the modal */
30
- width?: number;
31
- /** Height of the modal */
32
- height?: number;
33
- /** Position top */
34
- top?: number;
35
- /** Position Left */
36
- left?: number;
37
- /** Load the content from a remote URL during initialization */
38
- url?: string;
39
- /** Responsive mode. Default is true */
40
- responsive?: boolean;
41
- /** Bring to front on focus */
42
- layers?: boolean;
43
- /** Close the modal when it loses the focus. Default: false */
44
- 'auto-close'?: boolean;
45
- /** Ensures modal will be visible on screen. Default: false */
46
- 'auto-adjust'?: boolean;
47
- /** Focus on the modal when open it. Default: true */
48
- focus?: boolean;
49
- /** Create scroll when the content is larger than the modal. Default: false */
50
- overflow?: boolean;
51
- /** onopen event */
52
- onopen?: (self: object) => void;
53
- /** onclose event */
54
- onclose?: (self: object) => void;
55
- }
56
-
57
- interface Instance {
58
- /** Backdrop is shown when the modal is opened */
59
- backdrop?: boolean;
60
- /** Current visibility state of the modal */
61
- closed: boolean;
62
- /** Current state of the modal */
63
- minimized?: boolean;
64
- /** Modal can be closed. */
65
- closable?: boolean;
66
- /** Modal can be minimized. */
67
- minimizable?: boolean;
68
- /** Modal can be resized. */
69
- resizable?: boolean;
70
- /** Modal can be moved from its original position. */
71
- draggable?: boolean;
72
- /** Modal is automatic align center during initialization */
73
- position?: string | undefined;
74
- /** Title of the modal */
75
- title?: string;
76
- /** Width of the modal */
77
- width?: number;
78
- /** Height of the modal */
79
- height?: number;
80
- /** Position top */
81
- top?: number;
82
- /** Position Left */
83
- left?: number;
84
- /** Load the content from a remote URL during initialization */
85
- url?: string;
86
- /** Responsive mode is active */
87
- responsive?: boolean;
88
- /** Bring to front on focus */
89
- layers?: boolean;
90
- /** Close the modal when it loses the focus. */
91
- 'auto-close'?: boolean;
92
- /** Ensures modal will be visible on screen. */
93
- 'auto-adjust'?: boolean;
94
- /** Focus on the modal when open it. */
95
- focus?: boolean;
96
- /** Create scroll when the content is larger than the modal. Default: false */
97
- overflow?: boolean;
98
- /** Open the modal */
99
- open: () => void;
100
- /** Close the modal */
101
- close: () => void;
102
- /** Send to front when layers is activated */
103
- front: () => void;
104
- /** Send to back when layers is activated */
105
- back: () => void;
106
- }
107
- }
108
-
1
+ /**
2
+ * Official Type definitions for LemonadeJS plugins
3
+ * https://lemonadejs.net
4
+ * Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5
+ */
6
+
7
+ declare function Modal(el: HTMLElement, options?: Modal.Options): Modal.Instance;
8
+
9
+ declare namespace Modal {
10
+ interface Options {
11
+ /** Activate the backdrop when the modal is opened */
12
+ backdrop?: boolean;
13
+ /** Current visibility state of the modal */
14
+ closed?: boolean;
15
+ /** Current state of the modal */
16
+ minimized?: boolean;
17
+ /** Modal can be closed. Default: false */
18
+ closable?: boolean;
19
+ /** Modal can be minimized. Default: false */
20
+ minimizable?: boolean;
21
+ /** Modal can be resized. Default: false */
22
+ resizable?: boolean;
23
+ /** Modal can be moved from its original position. Default: false */
24
+ draggable?: boolean;
25
+ /** Modal is automatic align during initialization */
26
+ position?: 'center' | 'left' | 'right' | undefined;
27
+ /** Title of the modal */
28
+ title?: string;
29
+ /** Width of the modal */
30
+ width?: number;
31
+ /** Height of the modal */
32
+ height?: number;
33
+ /** Position top */
34
+ top?: number;
35
+ /** Position Left */
36
+ left?: number;
37
+ /** Load the content from a remote URL during initialization */
38
+ url?: string;
39
+ /** Responsive mode. Default is true */
40
+ responsive?: boolean;
41
+ /** Bring to front on focus */
42
+ layers?: boolean;
43
+ /** Close the modal when it loses the focus. Default: false */
44
+ 'auto-close'?: boolean;
45
+ /** Ensures modal will be visible on screen. Default: false */
46
+ 'auto-adjust'?: boolean;
47
+ /** Focus on the modal when open it. Default: true */
48
+ focus?: boolean;
49
+ /** Create scroll when the content is larger than the modal. Default: false */
50
+ overflow?: boolean;
51
+ /** onopen event */
52
+ onopen?: (self: object) => void;
53
+ /** onclose event */
54
+ onclose?: (self: object) => void;
55
+ }
56
+
57
+ interface Instance {
58
+ /** Backdrop is shown when the modal is opened */
59
+ backdrop?: boolean;
60
+ /** Current visibility state of the modal */
61
+ closed: boolean;
62
+ /** Current state of the modal */
63
+ minimized?: boolean;
64
+ /** Modal can be closed. */
65
+ closable?: boolean;
66
+ /** Modal can be minimized. */
67
+ minimizable?: boolean;
68
+ /** Modal can be resized. */
69
+ resizable?: boolean;
70
+ /** Modal can be moved from its original position. */
71
+ draggable?: boolean;
72
+ /** Modal is automatic align center during initialization */
73
+ position?: string | undefined;
74
+ /** Title of the modal */
75
+ title?: string;
76
+ /** Width of the modal */
77
+ width?: number;
78
+ /** Height of the modal */
79
+ height?: number;
80
+ /** Position top */
81
+ top?: number;
82
+ /** Position Left */
83
+ left?: number;
84
+ /** Load the content from a remote URL during initialization */
85
+ url?: string;
86
+ /** Responsive mode is active */
87
+ responsive?: boolean;
88
+ /** Bring to front on focus */
89
+ layers?: boolean;
90
+ /** Close the modal when it loses the focus. */
91
+ 'auto-close'?: boolean;
92
+ /** Ensures modal will be visible on screen. */
93
+ 'auto-adjust'?: boolean;
94
+ /** Focus on the modal when open it. */
95
+ focus?: boolean;
96
+ /** Create scroll when the content is larger than the modal. Default: false */
97
+ overflow?: boolean;
98
+ /** Open the modal */
99
+ open: () => void;
100
+ /** Close the modal */
101
+ close: () => void;
102
+ /** Send to front when layers is activated */
103
+ front: () => void;
104
+ /** Send to back when layers is activated */
105
+ back: () => void;
106
+ }
107
+ }
108
+
109
109
  export default Modal;