layerpro 2.0.0 → 2.0.2
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 +106 -218
- package/index.cjs +18 -490
- package/index.css +1 -0
- package/index.js +18 -490
- package/package.json +1 -2
- package/index.global.js +0 -545
package/README.md
CHANGED
|
@@ -1,296 +1,184 @@
|
|
|
1
1
|
# LayerPro 🚀
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
[](https://npmjs.com/package/layerpro)
|
|
8
|
-
[](https://npmjs.com/package/layerpro)
|
|
9
|
-
[](https://github.com/passariello/layerpro/blob/main/LICENSE)
|
|
10
|
-
[](https://www.typescriptlang.org/)
|
|
11
|
-
<!-- [](https://github.com/passariello/layerpro/actions) -->
|
|
12
|
-
|
|
13
|
-
<!-- [](https://a51.gitbook.io/layerpro) -->
|
|
14
|
-
[](https://www.patreon.com/passariello)
|
|
15
|
-
|
|
16
|
-
</div>
|
|
3
|
+
Drop-in replacement for browser modals with superpowers.
|
|
17
4
|
|
|
18
5
|
---
|
|
19
6
|
|
|
20
7
|
## What is LayerPro?
|
|
21
8
|
|
|
22
|
-
LayerPro
|
|
9
|
+
LayerPro replaces the boring browser `alert()`, `confirm()`, and `prompt()` with beautiful, customizable modals that work everywhere.
|
|
23
10
|
|
|
24
|
-
|
|
11
|
+
No more ugly popup boxes. No more blocking the main thread. Just clean, modern modals that your users will love.
|
|
25
12
|
|
|
26
13
|
---
|
|
27
14
|
|
|
28
|
-
##
|
|
29
|
-
|
|
30
|
-
| Feature | Description |
|
|
31
|
-
|---------|-------------|
|
|
32
|
-
| **🪟 Multiple Modal Types** | Alert, Confirm, Prompt, Message - all customizable |
|
|
33
|
-
| **🎨 Fully Customizable** | Control appearance, behavior, animations |
|
|
34
|
-
| **📍 Dockable Windows** | Minimize modals to a dock bar |
|
|
35
|
-
| **🖱️ Draggable & Resizable** | Users can move and resize modals |
|
|
36
|
-
| **⚡ Smooth Animations** | Built-in fade in/out transitions |
|
|
37
|
-
| **🔒 Security First** | XSS protection with HTML sanitization |
|
|
38
|
-
| **🧠 Memory Safe** | Proper cleanup of React roots and event listeners |
|
|
39
|
-
| **🌐 Universal** | Works with React, Vue, Angular, Vanilla JS |
|
|
40
|
-
| **📱 Responsive** | Adapts to any screen size |
|
|
41
|
-
| **🎯 TypeScript** | Full type definitions included |
|
|
15
|
+
## Features
|
|
42
16
|
|
|
43
|
-
|
|
17
|
+
- **Multiple modal types**: alert, confirm, prompt, message
|
|
18
|
+
- **Fully customizable**: appearance, behavior, animations
|
|
19
|
+
- **Dockable windows**: minimize modals to a dock bar
|
|
20
|
+
- **Draggable & Resizable**: users can move and resize
|
|
21
|
+
- **Smooth animations**: fade in/out transitions
|
|
22
|
+
- **XSS protection**: built-in HTML sanitization
|
|
23
|
+
- **TypeScript support**: full type definitions
|
|
44
24
|
|
|
45
|
-
|
|
25
|
+
---
|
|
46
26
|
|
|
47
|
-
|
|
27
|
+
## Installation
|
|
48
28
|
|
|
49
29
|
```bash
|
|
50
|
-
npm install layerpro
|
|
51
|
-
# or
|
|
52
|
-
npm install layerpro@latest --save-dev
|
|
30
|
+
npm install layerpro
|
|
53
31
|
```
|
|
54
32
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
```javascript
|
|
58
|
-
// index.js or index.ts
|
|
59
|
-
import "layerpro";
|
|
33
|
+
Or use directly in HTML:
|
|
60
34
|
|
|
61
|
-
|
|
35
|
+
```html
|
|
36
|
+
<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
|
|
62
37
|
```
|
|
63
38
|
|
|
64
|
-
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
## Quick Start
|
|
65
42
|
|
|
66
|
-
|
|
67
|
-
|
|
43
|
+
Import LayerPro once in your app entry point:
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
import "layerpro";
|
|
68
47
|
```
|
|
69
48
|
|
|
49
|
+
That's it. Now you have `alert()`, `confirm()`, `prompt()`, and `message()` globally.
|
|
50
|
+
|
|
70
51
|
---
|
|
71
52
|
|
|
72
|
-
##
|
|
53
|
+
## Usage
|
|
73
54
|
|
|
74
|
-
### Basic
|
|
55
|
+
### Basic Modals
|
|
75
56
|
|
|
76
57
|
```javascript
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
confirm(
|
|
82
|
-
"Are you sure?",
|
|
83
|
-
() => console.log("User clicked YES"),
|
|
84
|
-
() => console.log("User clicked NO")
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
// Input prompt
|
|
88
|
-
prompt("What's your name?", (value) => {
|
|
89
|
-
console.log("User entered:", value);
|
|
58
|
+
alert("Hello World!");
|
|
59
|
+
|
|
60
|
+
confirm("Are you sure?", () => {
|
|
61
|
+
console.debug("User clicked YES");
|
|
90
62
|
});
|
|
91
63
|
|
|
92
|
-
|
|
93
|
-
|
|
64
|
+
prompt("What's your name?", (name) => {
|
|
65
|
+
console.debug("User entered:", name);
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
message("Operation complete!");
|
|
94
69
|
```
|
|
95
70
|
|
|
96
|
-
###
|
|
71
|
+
### Custom Popups
|
|
97
72
|
|
|
98
73
|
```javascript
|
|
99
74
|
layerpro.popup.open({
|
|
100
75
|
id: 'myModal',
|
|
101
|
-
name: 'My
|
|
102
|
-
body: '<p>Your
|
|
103
|
-
icon: '⚠', // Warning icon HTML entity
|
|
104
|
-
|
|
105
|
-
// Dimensions
|
|
76
|
+
name: 'My Modal',
|
|
77
|
+
body: '<p>Your content here</p>',
|
|
106
78
|
width: 450,
|
|
107
79
|
height: 350,
|
|
108
|
-
minWidth: 300,
|
|
109
|
-
minHeight: 200,
|
|
110
|
-
|
|
111
|
-
// Position
|
|
112
|
-
top: '20%',
|
|
113
|
-
left: '50%',
|
|
114
|
-
|
|
115
|
-
// Features
|
|
116
|
-
movable: true,
|
|
117
|
-
resizable: true,
|
|
118
|
-
maximize: true,
|
|
119
|
-
iconize: true,
|
|
120
|
-
dockable: true,
|
|
121
|
-
close: true,
|
|
122
|
-
|
|
123
|
-
// Animation
|
|
124
|
-
fadeIn: 300,
|
|
125
|
-
fadeOut: 300,
|
|
126
|
-
|
|
127
|
-
// Custom buttons
|
|
128
80
|
buttons: {
|
|
129
|
-
confirm: {
|
|
130
|
-
|
|
131
|
-
cb: () => handleAccept()
|
|
132
|
-
},
|
|
133
|
-
cancel: {
|
|
134
|
-
text: "Cancel",
|
|
135
|
-
cb: () => handleCancel()
|
|
136
|
-
}
|
|
81
|
+
confirm: { text: "OK", cb: () => {} },
|
|
82
|
+
cancel: { text: "Cancel", cb: () => {} }
|
|
137
83
|
}
|
|
138
84
|
});
|
|
139
85
|
```
|
|
140
86
|
|
|
141
|
-
### React
|
|
87
|
+
### React Components
|
|
88
|
+
|
|
89
|
+
In a React environment, you can pass React components directly:
|
|
142
90
|
|
|
143
91
|
```jsx
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
name: 'React Modal',
|
|
152
|
-
body: <MyReactComponent />,
|
|
153
|
-
width: 500,
|
|
154
|
-
height: 400,
|
|
155
|
-
buttons: {
|
|
156
|
-
confirm: {
|
|
157
|
-
text: "Save",
|
|
158
|
-
cb: () => console.log("Saved!")
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
return (
|
|
165
|
-
<button onClick={handleClick}>Open Modal</button>
|
|
166
|
-
);
|
|
167
|
-
}
|
|
92
|
+
layerpro.popup.open({
|
|
93
|
+
id: 'reactModal',
|
|
94
|
+
name: 'React Modal',
|
|
95
|
+
body: <MyComponent />, // React element
|
|
96
|
+
width: 500,
|
|
97
|
+
height: 400
|
|
98
|
+
});
|
|
168
99
|
```
|
|
169
100
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
## 🎯 API Reference
|
|
101
|
+
### The `body` Parameter
|
|
173
102
|
|
|
174
|
-
|
|
103
|
+
The `body` property accepts different content types:
|
|
175
104
|
|
|
176
|
-
|
|
|
177
|
-
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
| `message(text, callback)` | Display notification message |
|
|
105
|
+
| Type | Example |
|
|
106
|
+
|------|---------|
|
|
107
|
+
| Plain text | `body: "Hello"` |
|
|
108
|
+
| HTML string | `body: "<p>Hello</p>"` |
|
|
109
|
+
| React element | `body: <Component />` |
|
|
182
110
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
| Method | Description |
|
|
186
|
-
|--------|-------------|
|
|
187
|
-
| `layerpro.popup.open(props)` | Open a new modal |
|
|
188
|
-
| `layerpro.popup.close(id)` | Close a modal |
|
|
189
|
-
| `layerpro.popup.center(id)` | Center modal on screen |
|
|
190
|
-
| `layerpro.popup.maximize(id)` | Maximize modal |
|
|
191
|
-
| `layerpro.popup.iconize(id)` | Minimize to dock |
|
|
192
|
-
| `layerpro.popup.movable(id)` | Enable drag functionality |
|
|
193
|
-
| `layerpro.popup.resizable(id)` | Enable resize functionality |
|
|
194
|
-
| `layerpro.popup.dockable(id)` | Enable dock functionality |
|
|
195
|
-
| `layerpro.popup.zIndex()` | Get next z-index value |
|
|
111
|
+
> **Note**: In React, always use elements (`<Component />`), not function calls (`Component()`).
|
|
196
112
|
|
|
197
113
|
---
|
|
198
114
|
|
|
199
|
-
##
|
|
200
|
-
|
|
201
|
-
**Note on `body` parameter:**
|
|
202
|
-
The `body` property supports multiple content types:
|
|
203
|
-
- **Plain text**: `body: "Hello World"`
|
|
204
|
-
- **HTML string**: `body: "<p>Your HTML here</p>"`
|
|
205
|
-
- **React element** (React environment): `body: <MyComponent />`
|
|
206
|
-
|
|
207
|
-
> ⚠️ **Important**: When using React, always pass components as elements (`<MyComponent />`), not as function calls (`MyComponent()`). Passing a function will show an error message.
|
|
115
|
+
## Options
|
|
208
116
|
|
|
209
117
|
```typescript
|
|
210
|
-
|
|
211
|
-
id: string
|
|
212
|
-
body
|
|
213
|
-
name
|
|
214
|
-
icon
|
|
118
|
+
{
|
|
119
|
+
id: string, // Unique ID
|
|
120
|
+
body: any, // Content (text, HTML, or React)
|
|
121
|
+
name: string, // Modal title
|
|
122
|
+
icon: string, // Icon (HTML entity)
|
|
215
123
|
|
|
216
124
|
// Dimensions
|
|
217
|
-
width
|
|
218
|
-
height
|
|
219
|
-
minWidth
|
|
220
|
-
minHeight
|
|
221
|
-
maxWidth
|
|
222
|
-
maxHeight
|
|
125
|
+
width: number,
|
|
126
|
+
height: number,
|
|
127
|
+
minWidth: number,
|
|
128
|
+
minHeight: number,
|
|
129
|
+
maxWidth: number,
|
|
130
|
+
maxHeight: number,
|
|
223
131
|
|
|
224
132
|
// Position
|
|
225
|
-
top
|
|
226
|
-
left
|
|
227
|
-
right
|
|
228
|
-
bottom
|
|
133
|
+
top: number | string,
|
|
134
|
+
left: number | string,
|
|
135
|
+
right: number | string,
|
|
136
|
+
bottom: number | string,
|
|
229
137
|
|
|
230
138
|
// Animation
|
|
231
|
-
fadeIn
|
|
232
|
-
fadeOut
|
|
233
|
-
timer
|
|
139
|
+
fadeIn: number,
|
|
140
|
+
fadeOut: number,
|
|
141
|
+
timer: number,
|
|
234
142
|
|
|
235
143
|
// Features
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
close
|
|
242
|
-
raised
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
// Custom Buttons
|
|
250
|
-
buttons?: {
|
|
251
|
-
confirm?: { text: string; cb?: () => void };
|
|
252
|
-
cancel?: { text: string; cb?: () => void };
|
|
253
|
-
};
|
|
144
|
+
movable: boolean,
|
|
145
|
+
resizable: boolean,
|
|
146
|
+
maximize: boolean,
|
|
147
|
+
iconize: boolean,
|
|
148
|
+
dockable: boolean,
|
|
149
|
+
close: boolean,
|
|
150
|
+
raised: boolean,
|
|
151
|
+
|
|
152
|
+
// Buttons
|
|
153
|
+
buttons: {
|
|
154
|
+
confirm?: { text: string; cb?: () => void },
|
|
155
|
+
cancel?: { text: string; cb?: () => void }
|
|
156
|
+
}
|
|
254
157
|
}
|
|
255
158
|
```
|
|
256
159
|
|
|
257
160
|
---
|
|
258
161
|
|
|
259
|
-
##
|
|
162
|
+
## Methods
|
|
260
163
|
|
|
261
|
-
|
|
|
262
|
-
|
|
263
|
-
|
|
|
264
|
-
|
|
|
265
|
-
|
|
|
266
|
-
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
## 📄 License
|
|
271
|
-
|
|
272
|
-
MIT License - see [LICENSE.md](LICENSE.md) for details.
|
|
273
|
-
|
|
274
|
-
---
|
|
275
|
-
|
|
276
|
-
## 👤 Author
|
|
277
|
-
|
|
278
|
-
**Dario Passariello**
|
|
279
|
-
|
|
280
|
-
- GitHub: [@passariello](https://github.com/passariello)
|
|
281
|
-
- Email: dariopassariello@gmail.com
|
|
282
|
-
- Website: https://dario.passariello.ca
|
|
164
|
+
| Method | Description |
|
|
165
|
+
|--------|-------------|
|
|
166
|
+
| `layerpro.popup.open(props)` | Open a modal |
|
|
167
|
+
| `layerpro.popup.close(id)` | Close a modal |
|
|
168
|
+
| `layerpro.popup.center(id)` | Center modal |
|
|
169
|
+
| `layerpro.popup.maximize(id)` | Maximize modal |
|
|
170
|
+
| `layerpro.popup.iconize(id)` | Minimize to dock |
|
|
171
|
+
| `layerpro.popup.movable(id)` | Enable drag |
|
|
172
|
+
| `layerpro.popup.resizable(id)` | Enable resize |
|
|
283
173
|
|
|
284
174
|
---
|
|
285
175
|
|
|
286
|
-
##
|
|
176
|
+
## Browser Support
|
|
287
177
|
|
|
288
|
-
|
|
178
|
+
Chrome 80+ • Firefox 75+ • Safari 13+ • Edge 80+
|
|
289
179
|
|
|
290
180
|
---
|
|
291
181
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
Made with ❤️ by [Dario Passariello](https://dario.passariello.ca) with a lot of caffe' espresso!
|
|
182
|
+
## License
|
|
295
183
|
|
|
296
|
-
|
|
184
|
+
MIT
|