@lemonadejs/modal 2.3.3 → 2.3.5

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 (5) hide show
  1. package/README.md +118 -118
  2. package/dist/index.d.ts +73 -65
  3. package/dist/index.js +490 -413
  4. package/dist/style.css +124 -120
  5. 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,65 +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
- /** Modal is closed */
14
- closed?: boolean;
15
- /** Modal is minimized */
16
- minimized?: boolean;
17
- /** Modal can be closed */
18
- closable?: boolean;
19
- /** Modal can be minimized */
20
- minimizable?: boolean;
21
- /** Modal can be resized */
22
- resizable?: boolean;
23
- /** Modal can be moved from its original position */
24
- draggable?: boolean;
25
- /** Modal is automatic align center */
26
- center?: boolean;
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 */
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 */
44
- 'auto-close'?: boolean;
45
- /** Ensures modal will be visible on screen */
46
- 'auto-adjust'?: boolean;
47
- }
48
-
49
- interface instance {
50
- closed: boolean;
51
- closable: boolean;
52
- minimized: boolean;
53
- minimizable: boolean;
54
- resizable: boolean;
55
- draggable: boolean;
56
- center: boolean;
57
- title: string;
58
- width: number;
59
- height: number;
60
- top: number;
61
- left: number;
62
- 'auto-close': boolean;
63
- }
64
-
65
- 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;