@lemonadejs/modal 2.4.5 → 2.4.9

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 (4) hide show
  1. package/README.md +68 -43
  2. package/dist/index.js +5 -2
  3. package/dist/vue.js +3 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -39,74 +39,99 @@ To use modal via a CDN, include the following script tags in your HTML file:
39
39
  Declarative - Quick example with Lemonade
40
40
 
41
41
  ```javascript
42
- import Modal from "@lemonadejs/modal";
43
- import "@lemonadejs/modal/dist/style.css"
42
+ import lemonade from 'lemonadejs'
43
+ import Modal from '@lemonadejs/modal';
44
+ import '@lemonadejs/modal/dist/style.css';
44
45
 
45
- export default function Component() {
46
+ export default function App() {
46
47
  const self = this;
47
- self.width = 400;
48
- self.height = 200;
49
48
 
50
- return `<Modal width="{{self.width}}" height="{{self.height}}" title="My window modal">
51
- <h1>Quick example!</h1>
52
- </Modal>`;
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
+ </>`
53
62
  }
54
63
  ```
55
64
 
56
65
  Programmatical - Quick example with Javascript
57
66
 
58
67
  ```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>
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>
61
71
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
62
72
 
63
73
  <div id="root">
64
- <h1>Quick example!</h1>
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>
65
78
  </div>
79
+ <input type="button" value="Toggle Modal" id="button" />
66
80
 
67
81
  <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, {
82
+ const modal = Modal(document.getElementById("root"), {
73
83
  width: 400,
74
84
  height: 200,
75
85
  title: "My window modal",
76
- })
86
+ closed: true,
87
+ center: true,
88
+ });
89
+ button.addEventListener('click', () => {
90
+ console.log(modal.closed)
91
+ modal.closed = !modal.closed;
92
+ });
77
93
  </script>
94
+ </html>
78
95
  ```
79
96
 
80
97
  ### Configuration
81
98
 
82
99
  You can configure things such as position, size, and functionalities.
83
100
 
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 |
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. |
110
135
 
111
136
  ## License
112
137
 
package/dist/index.js CHANGED
@@ -208,7 +208,6 @@ if (!lemonade && typeof (require) === 'function') {
208
208
 
209
209
  const adjustLeft = function() {
210
210
  let self = this;
211
- self.el.style.marginLeft = '';
212
211
  let rect = self.el.getBoundingClientRect();
213
212
  // Make sure component will be visible on page
214
213
  let limit = document.documentElement.clientWidth - (rect.left + rect.width);
@@ -356,7 +355,7 @@ if (!lemonade && typeof (require) === 'function') {
356
355
  }
357
356
  }
358
357
  }
359
- console.log(self)
358
+
360
359
  self.mousemove = function(e) {
361
360
  if (getButton(e)) {
362
361
  return;
@@ -441,6 +440,10 @@ if (!lemonade && typeof (require) === 'function') {
441
440
 
442
441
  e.preventDefault();
443
442
  } else if (isTrue(self.draggable) && self.title && y - rect.top < 40) {
443
+ self.left = parseInt(self.el.style.left) + parseInt(self.el.style.marginLeft);
444
+ self.top = parseInt(self.el.style.top) + parseInt(self.el.style.marginTop);
445
+ self.el.style.marginLeft = 0;
446
+ self.el.style.marginTop = 0;
444
447
  // Action
445
448
  controls.type = 'move';
446
449
  // Callback
package/dist/vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { h } from 'vue';
2
2
  import component from "./index.js";
3
3
 
4
- export default {
4
+ export const Modal = {
5
5
  inheritAttrs: false,
6
6
  mounted() {
7
7
  let options = {
@@ -49,3 +49,5 @@ export default {
49
49
  }
50
50
  }
51
51
  };
52
+
53
+ export default Modal;
package/package.json CHANGED
@@ -17,5 +17,5 @@
17
17
  },
18
18
  "main": "dist/index.js",
19
19
  "types": "dist/index.d.ts",
20
- "version": "2.4.5"
20
+ "version": "2.4.9"
21
21
  }