@lemonadejs/modal 5.2.0 → 5.3.0

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 (3) hide show
  1. package/README.md +218 -214
  2. package/dist/index.js +13 -8
  3. package/package.json +21 -21
package/README.md CHANGED
@@ -1,214 +1,218 @@
1
- # LemonadeJS Modal
2
-
3
- [Official website and documentation is here](https://lemonadejs.com/plugins/modal)
4
-
5
- Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS 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 App() {
46
- const toggle = () => {
47
- this.modal.closed = ! this.modal.closed
48
- }
49
-
50
- return render => render`<>
51
- <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modal">
52
- <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
53
- <p>Quick example!</p>
54
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
55
- </div>
56
- </Modal>
57
- <input type="button" value="Toggle Modal" onclick="${toggle}" />
58
- </>`
59
- }
60
- ```
61
-
62
- Quick example with React
63
-
64
- ```jsx
65
- import React, { useRef } from 'react';
66
- import Modal from '@lemonadejs/modal/dist/react';
67
- import '@lemonadejs/modal/dist/style.css';
68
-
69
- export default function App() {
70
- const modal = useRef();
71
-
72
- const toggle = () => {
73
- modal.current.closed = !modal.current.closed;
74
- };
75
-
76
- return (
77
- <div>
78
- <Modal center={true} width={400} height={200} title="My window modal" ref={modal}>
79
- <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '10px' }}>
80
- <p>Quick example!</p>
81
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
82
- </div>
83
- </Modal>
84
- <input type="button" value="Toggle Modal" id="button" onClick={toggle} />
85
- </div>
86
- );
87
- }
88
- ```
89
-
90
- Quick example with Vue
91
-
92
- ```vue
93
- <template>
94
- <Modal ref='modal' :center="true" :width="400" :height="200" title="My window modal" >
95
- <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
96
- <p>Quick example!</p>
97
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
98
- </div>
99
- </Modal>
100
- <input type="button" value="Toggle Modal" id="button" @click="toggleModal" />
101
- </template>
102
- <script>
103
- import Modal from '@lemonadejs/modal/dist/vue';
104
- import '@lemonadejs/modal/dist/style.css'
105
-
106
- export default {
107
- name: 'App',
108
- components: {
109
- Modal,
110
- },
111
- methods: {
112
- toggleModal() {
113
- console.log(this.$refs.modal);
114
- this.$refs.modal.current.closed = !this.$refs.modal.current.closed;
115
- }
116
- }
117
- };
118
- </script>
119
- ```
120
-
121
- Programmatically - Quick example with Javascript
122
-
123
- ```html
124
- <html>
125
- <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
126
- <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
127
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
128
-
129
- <div id="root">
130
- <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
131
- <p>Quick example!</p>
132
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
133
- </div>
134
- </div>
135
- <input type="button" value="Toggle Modal" id="button" />
136
-
137
- <script>
138
- const modal = Modal(document.getElementById("root"), {
139
- width: 400,
140
- height: 200,
141
- title: "My window modal",
142
- closed: true,
143
- center: true,
144
- });
145
- button.addEventListener('click', () => {
146
- console.log(modal.closed)
147
- modal.closed = !modal.closed;
148
- });
149
- </script>
150
- </html>
151
- ```
152
-
153
- ### Configuration
154
-
155
- You can configure things such as position, size, and functionalities.
156
-
157
- ### Settings
158
-
159
- | Attribute | Type | Description |
160
- |--------------|---------|----------------------------------------------------------------------------|
161
- | title? | String | The header title of the modal. If empty, the header will be not displayed. |
162
- | height? | Number | The height of the modal in pixels. |
163
- | width? | Number | The width of the modal in pixels. |
164
- | top? | Number | The vertical position of the modal within its window in pixels. |
165
- | left? | Number | The horizontal position of the modal within its window in pixels. |
166
- | draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
167
- | resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
168
- | closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
169
- | closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
170
- | center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
171
- | url? | String | The URL from which to fetch and render content. |
172
- | auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
173
- | auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
174
- | backdrop? | Boolean | Enables the backdrop when the modal is opened. |
175
- | minimizable? | Boolean | Modal can be minimized. `Default: false`. |
176
- | minimized? | Boolean | Current minimized state of the modal. |
177
- | position? | String | Modal is automatic align during initialization. |
178
- | title? | String | Title of the modal. |
179
- | responsive? | Boolean | Enables responsive mode. `Default: true`. |
180
- | layers? | Boolean | Bring to front on focus. |
181
- | focus? | Boolean | Focus on the modal when open it. `Default: true`. |
182
- | overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
183
-
184
-
185
- ### Events
186
-
187
- | Event | Description |
188
- |-----------|------------------------------------------|
189
- | onload? | When the modal is ready. |
190
- | onclose? | Called when modal closes. |
191
- | onopen? | Called when modal opens. |
192
- | onresize? | When the user resize the modal. |
193
- | onmove? | When the user change the modal position. |
194
-
195
-
196
- ## License
197
-
198
- The LemonadeJS Modal is released under the MIT.
199
-
200
-
201
- ## Changelog
202
-
203
- ### 3.1.1
204
-
205
- - Added new events: `onmove` and `onresize`.
206
-
207
- ### 3.1.0
208
-
209
- - Close modal using the keyboard by pressing `Shift + Tab` on the icon.
210
-
211
- ## Other Tools
212
-
213
- - [jSuites](https://jsuites.net/docs)
214
- - [Jspreadsheet Data Grid](https://jspreadsheet.com)
1
+ # LemonadeJS Modal
2
+
3
+ [Official website and documentation is here](https://lemonadejs.com/plugins/modal)
4
+
5
+ Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS 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 App() {
46
+ const toggle = () => {
47
+ this.modal.closed = !this.modal.closed;
48
+ };
49
+
50
+ return (render) => render`<>
51
+ <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modal">
52
+ <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
53
+ <p>Quick example!</p>
54
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
55
+ </div>
56
+ </Modal>
57
+ <input type="button" value="Toggle Modal" onclick="${toggle}" />
58
+ </>`;
59
+ }
60
+ ```
61
+
62
+ Quick example with React
63
+
64
+ ```jsx
65
+ import React, { useRef } from 'react';
66
+ import Modal from '@lemonadejs/modal/dist/react';
67
+ import '@lemonadejs/modal/dist/style.css';
68
+
69
+ export default function App() {
70
+ const modal = useRef();
71
+
72
+ const toggle = () => {
73
+ modal.current.closed = !modal.current.closed;
74
+ };
75
+
76
+ return (
77
+ <div>
78
+ <Modal center={true} width={400} height={200} title="My window modal" ref={modal}>
79
+ <div
80
+ style={{
81
+ display: 'flex',
82
+ flexDirection: 'column',
83
+ justifyContent: 'center',
84
+ padding: '10px',
85
+ }}
86
+ >
87
+ <p>Quick example!</p>
88
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
89
+ </div>
90
+ </Modal>
91
+ <input type="button" value="Toggle Modal" id="button" onClick={toggle} />
92
+ </div>
93
+ );
94
+ }
95
+ ```
96
+
97
+ Quick example with Vue
98
+
99
+ ```vue
100
+ <template>
101
+ <Modal ref="modal" :center="true" :width="400" :height="200" title="My window modal">
102
+ <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
103
+ <p>Quick example!</p>
104
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
105
+ </div>
106
+ </Modal>
107
+ <input type="button" value="Toggle Modal" id="button" @click="toggleModal" />
108
+ </template>
109
+ <script>
110
+ import Modal from '@lemonadejs/modal/dist/vue';
111
+ import '@lemonadejs/modal/dist/style.css';
112
+
113
+ export default {
114
+ name: 'App',
115
+ components: {
116
+ Modal,
117
+ },
118
+ methods: {
119
+ toggleModal() {
120
+ console.log(this.$refs.modal);
121
+ this.$refs.modal.current.closed = !this.$refs.modal.current.closed;
122
+ },
123
+ },
124
+ };
125
+ </script>
126
+ ```
127
+
128
+ Programmatically - Quick example with Javascript
129
+
130
+ ```html
131
+ <html>
132
+ <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
133
+ <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
134
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
135
+
136
+ <div id="root">
137
+ <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
138
+ <p>Quick example!</p>
139
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
140
+ </div>
141
+ </div>
142
+ <input type="button" value="Toggle Modal" id="button" />
143
+
144
+ <script>
145
+ const modal = Modal(document.getElementById('root'), {
146
+ width: 400,
147
+ height: 200,
148
+ title: 'My window modal',
149
+ closed: true,
150
+ center: true,
151
+ });
152
+ button.addEventListener('click', () => {
153
+ console.log(modal.closed);
154
+ modal.closed = !modal.closed;
155
+ });
156
+ </script>
157
+ </html>
158
+ ```
159
+
160
+ ### Configuration
161
+
162
+ You can configure things such as position, size, and functionalities.
163
+
164
+ ### Settings
165
+
166
+ | Attribute | Type | Description |
167
+ | ------------ | ------- | -------------------------------------------------------------------------- |
168
+ | title? | String | The header title of the modal. If empty, the header will be not displayed. |
169
+ | height? | Number | The height of the modal in pixels. |
170
+ | width? | Number | The width of the modal in pixels. |
171
+ | top? | Number | The vertical position of the modal within its window in pixels. |
172
+ | left? | Number | The horizontal position of the modal within its window in pixels. |
173
+ | draggable? | Boolean | Determines if the modal can be dragged. `Default: false`. |
174
+ | resizable? | Boolean | Determines if the modal can be resized. `Default: false`. |
175
+ | closed? | Boolean | Controls the open and close state of the modal. `Default: false`. |
176
+ | closable? | Boolean | Disables the ability to close the modal. `Default: false`. |
177
+ | center? | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
178
+ | url? | String | The URL from which to fetch and render content. |
179
+ | auto-close? | Boolean | Close the modal when it loses the focus. `Default: false`. |
180
+ | auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`. |
181
+ | backdrop? | Boolean | Enables the backdrop when the modal is opened. |
182
+ | minimizable? | Boolean | Modal can be minimized. `Default: false`. |
183
+ | minimized? | Boolean | Current minimized state of the modal. |
184
+ | position? | String | Modal is automatic align during initialization. |
185
+ | title? | String | Title of the modal. |
186
+ | responsive? | Boolean | Enables responsive mode. `Default: true`. |
187
+ | layers? | Boolean | Bring to front on focus. |
188
+ | focus? | Boolean | Focus on the modal when open it. `Default: true`. |
189
+ | overflow? | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |
190
+
191
+ ### Events
192
+
193
+ | Event | Description |
194
+ | --------- | ---------------------------------------- |
195
+ | onload? | When the modal is ready. |
196
+ | onclose? | Called when modal closes. |
197
+ | onopen? | Called when modal opens. |
198
+ | onresize? | When the user resize the modal. |
199
+ | onmove? | When the user change the modal position. |
200
+
201
+ ## License
202
+
203
+ The LemonadeJS Modal is released under the MIT.
204
+
205
+ ## Changelog
206
+
207
+ ### 3.1.1
208
+
209
+ - Added new events: `onmove` and `onresize`.
210
+
211
+ ### 3.1.0
212
+
213
+ - Close modal using the keyboard by pressing `Shift + Tab` on the icon.
214
+
215
+ ## Other Tools
216
+
217
+ - [jSuites](https://jsuites.net/docs)
218
+ - [Jspreadsheet Data Grid](https://jspreadsheet.com)
package/dist/index.js CHANGED
@@ -610,7 +610,6 @@ if (!lemonade && typeof (require) === 'function') {
610
610
  self.open = function() {
611
611
  if (self.closed === true) {
612
612
  self.closed = false;
613
- console.l
614
613
  // Close event
615
614
  Dispatch.call(self, self.onopen, 'open', {
616
615
  instance: self
@@ -785,8 +784,10 @@ if (!lemonade && typeof (require) === 'function') {
785
784
  }
786
785
 
787
786
  // Auto adjust
788
- adjustHorizontal(self);
789
- adjustVertical(self);
787
+ queueMicrotask(() => {
788
+ adjustHorizontal(self);
789
+ adjustVertical(self);
790
+ });
790
791
  } else {
791
792
  // Hide backdrop
792
793
  if (backdrop) {
@@ -800,11 +801,15 @@ if (!lemonade && typeof (require) === 'function') {
800
801
  self.el.style[property] = '';
801
802
  }
802
803
 
803
- if (property === 'top') {
804
- adjustVertical(self);
805
- }
806
- if (property === 'left') {
807
- adjustHorizontal(self);
804
+ if (self.closed === false) {
805
+ queueMicrotask(() => {
806
+ if (property === 'top') {
807
+ adjustVertical(self);
808
+ }
809
+ if (property === 'left') {
810
+ adjustHorizontal(self);
811
+ }
812
+ });
808
813
  }
809
814
  } else if (property === 'position') {
810
815
  if (self.position) {
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
- {
2
- "name": "@lemonadejs/modal",
3
- "title": "JavaScript Modal",
4
- "description": "LemonadeJS modal is a JavaScript component to create floating modals.",
5
- "author": {
6
- "name": "Contact <contact@lemonadejs.com>",
7
- "url": "https://lemonadejs.net"
8
- },
9
- "keywords": [
10
- "javascript modal",
11
- "lemonadejs modal",
12
- "js modal",
13
- "modal js"
14
- ],
15
- "dependencies": {
16
- "lemonadejs": "^5.2.0"
17
- },
18
- "main": "dist/index.js",
19
- "types": "dist/index.d.ts",
20
- "version": "5.2.0"
21
- }
1
+ {
2
+ "name": "@lemonadejs/modal",
3
+ "title": "JavaScript Modal",
4
+ "description": "LemonadeJS modal is a JavaScript component to create floating modals.",
5
+ "author": {
6
+ "name": "Contact <contact@lemonadejs.com>",
7
+ "url": "https://lemonadejs.net"
8
+ },
9
+ "keywords": [
10
+ "javascript modal",
11
+ "lemonadejs modal",
12
+ "js modal",
13
+ "modal js"
14
+ ],
15
+ "dependencies": {
16
+ "lemonadejs": "^5.3.1"
17
+ },
18
+ "main": "dist/index.js",
19
+ "types": "dist/index.d.ts",
20
+ "version": "5.3.0"
21
+ }