layerpro 1.1.2 → 1.1.4
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/index.js +1 -1
- package/package.json +3 -3
- package/docs/index.md +0 -208
- package/documents/empty +0 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "layerpro",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "Custom modals, alert, confirm, prompt... by Dario Passariello",
|
|
5
5
|
"copyright": "Dario Passariello",
|
|
6
6
|
"license": "MIT",
|
|
@@ -142,8 +142,8 @@
|
|
|
142
142
|
"eslint": "9.39.1",
|
|
143
143
|
"file-loader": "6.2.0",
|
|
144
144
|
"jquery": "3.7.1",
|
|
145
|
-
"react": "19.2.
|
|
146
|
-
"react-dom": "19.2.
|
|
145
|
+
"react": "19.2.1",
|
|
146
|
+
"react-dom": "19.2.1",
|
|
147
147
|
"sass": "^1.94.2",
|
|
148
148
|
"sass-loader": "^16.0.6",
|
|
149
149
|
"style-loader": "^4.0.0",
|
package/docs/index.md
DELETED
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
# [LayerPro](https://npmjs.com/package/layerpro)
|
|
2
|
-
|
|
3
|
-

|
|
4
|
-
|
|
5
|
-
[](https://npmjs.org/package/layerpro)
|
|
6
|
-
[](https://npmjs.org/package/layerpro)
|
|
7
|
-
|
|
8
|
-
[](https://a51.gitbook.io/layerpro)
|
|
9
|
-
|
|
10
|
-
[](https://npmjs.com/package/layerpro)
|
|
11
|
-
|
|
12
|
-
## About
|
|
13
|
-
|
|
14
|
-
LayerPro offers a completely new way to customize web modals in your application. With LayerPro, you can create custom alerts, prompts, confirmations, and messages, effectively replacing the default browser modals.
|
|
15
|
-
|
|
16
|
-
Please make sure to read the [LICENSE](/LICENSE.md) agreement before implementing it in your application.
|
|
17
|
-
|
|
18
|
-
## Live demo
|
|
19
|
-
|
|
20
|
-
[https://tests.a51.dev/](https://tests.a51.dev/)
|
|
21
|
-
|
|
22
|
-
You can view an HTML version demonstrating how dpHelper and LayerPro work together. These tools can be used with HTML, React, Vue, or any other frontend framework/library.
|
|
23
|
-
|
|
24
|
-
---
|
|
25
|
-
|
|
26
|
-
## Install for react + webpack projects
|
|
27
|
-
|
|
28
|
-
```js
|
|
29
|
-
npm i layerpro --save-dev
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
or update:
|
|
33
|
-
|
|
34
|
-
```js
|
|
35
|
-
npm i layerpro@latest --save-dev
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
in the index (and only there):
|
|
39
|
-
|
|
40
|
-
```js
|
|
41
|
-
import "layerpro";
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
or
|
|
45
|
-
|
|
46
|
-
```js
|
|
47
|
-
require("layerpro");
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## Install for ejs or other type of projects (like html)
|
|
51
|
-
|
|
52
|
-
```html
|
|
53
|
-
<script src="https://cdn.jsdelivr.net/npm/layerpro"></script>
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
## How to use it
|
|
57
|
-
|
|
58
|
-
ype layerpro in your console to explore all the available tools you can use globally! You can call these tools from anywhere without needing to import them (just include the import once in your index file).
|
|
59
|
-
|
|
60
|
-
For example, if you type **alert("hello, world!")**, you can see the result.
|
|
61
|
-
|
|
62
|
-
You can also use these tools as messages directly from the console.
|
|
63
|
-
|
|
64
|
-
```js
|
|
65
|
-
alert("Hello world"); // Normal alert
|
|
66
|
-
|
|
67
|
-
prompt("Your Name"); // Ask for input
|
|
68
|
-
|
|
69
|
-
confirm(
|
|
70
|
-
"Hello world",
|
|
71
|
-
()=>console.log("hello"), // callback for YES / OK
|
|
72
|
-
()=>console.log("bye") // callback for NO / CANCEL (you can use null if you don't want CB)
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
message(
|
|
76
|
-
"Hello world",
|
|
77
|
-
()=>console.log("This happen after OK") // callback for YES / OK)
|
|
78
|
-
);
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
Example:
|
|
82
|
-
|
|
83
|
-
```js
|
|
84
|
-
import 'layerpro'
|
|
85
|
-
|
|
86
|
-
// EXAMPLE WITH ALL OPTIONS
|
|
87
|
-
function App() {
|
|
88
|
-
|
|
89
|
-
layerpro.popup.open(
|
|
90
|
-
{
|
|
91
|
-
id: 'exampleModal',
|
|
92
|
-
body: 'Example',
|
|
93
|
-
name: 'example',
|
|
94
|
-
icon: '⚠',
|
|
95
|
-
|
|
96
|
-
buttons: {
|
|
97
|
-
confirm: {
|
|
98
|
-
text: "accept",
|
|
99
|
-
cb: (e) => message("confirmed")
|
|
100
|
-
},
|
|
101
|
-
cancel: {
|
|
102
|
-
text: "cancel"
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
|
|
106
|
-
width: 400,
|
|
107
|
-
height: 300,
|
|
108
|
-
maxWidth: 500,
|
|
109
|
-
maxHeight: 350,
|
|
110
|
-
minWidth: 200,
|
|
111
|
-
minHeight: 150,
|
|
112
|
-
top: '10%',
|
|
113
|
-
left: '10%',
|
|
114
|
-
right: 'auto',
|
|
115
|
-
bottom: 'auto',
|
|
116
|
-
|
|
117
|
-
fadeIn: 500,
|
|
118
|
-
fadeOut: 500,
|
|
119
|
-
timer: 0,
|
|
120
|
-
|
|
121
|
-
iconize: true,
|
|
122
|
-
maximize: true,
|
|
123
|
-
close: true,
|
|
124
|
-
isMaximize: false,
|
|
125
|
-
dockable: false,
|
|
126
|
-
raised: true,
|
|
127
|
-
movable: true,
|
|
128
|
-
resizable: false,
|
|
129
|
-
store: false
|
|
130
|
-
}
|
|
131
|
-
)
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
export default App
|
|
135
|
-
|
|
136
|
-
```
|
|
137
|
-
|
|
138
|
-
Example with a React component:
|
|
139
|
-
|
|
140
|
-
```js
|
|
141
|
-
|
|
142
|
-
// Example using React Component
|
|
143
|
-
|
|
144
|
-
import React from "react"
|
|
145
|
-
import 'layerpro'
|
|
146
|
-
|
|
147
|
-
export default () => {
|
|
148
|
-
|
|
149
|
-
// Custom Component6
|
|
150
|
-
const TestApp = () => {
|
|
151
|
-
return (
|
|
152
|
-
<div>
|
|
153
|
-
Hello
|
|
154
|
-
<label>
|
|
155
|
-
Alert: <input type="button" value="Alert" onClick={() => alert("Hello")} />
|
|
156
|
-
</label>
|
|
157
|
-
</div>
|
|
158
|
-
)
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
// Run into layerpro
|
|
162
|
-
layerpro.popup.open(
|
|
163
|
-
{
|
|
164
|
-
id: 'exampleModal',
|
|
165
|
-
body: TestApp(),
|
|
166
|
-
buttons: {
|
|
167
|
-
confirm: {
|
|
168
|
-
text: "accept",
|
|
169
|
-
cb: () => {
|
|
170
|
-
message("confirmed")
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
cancel: {
|
|
174
|
-
text: "cancel",
|
|
175
|
-
cb: () => {
|
|
176
|
-
alert("cancelled")
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
},
|
|
180
|
-
width: 350,
|
|
181
|
-
height: 300,
|
|
182
|
-
name: 'example',
|
|
183
|
-
icon: '⚠',
|
|
184
|
-
iconize: true,
|
|
185
|
-
maximize: true,
|
|
186
|
-
close: true,
|
|
187
|
-
isMaximize: false,
|
|
188
|
-
dockable: false,
|
|
189
|
-
raised: true,
|
|
190
|
-
movable: true,
|
|
191
|
-
resizable: false,
|
|
192
|
-
store: false,
|
|
193
|
-
top: '10%',
|
|
194
|
-
left: '10%',
|
|
195
|
-
right: 'auto',
|
|
196
|
-
bottom: 'auto',
|
|
197
|
-
minWidth: 200,
|
|
198
|
-
minHeight: 150,
|
|
199
|
-
fadeIn: 500,
|
|
200
|
-
fadeOut: 500,
|
|
201
|
-
timer: 0
|
|
202
|
-
}
|
|
203
|
-
)
|
|
204
|
-
|
|
205
|
-
}
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
copyright (c) 2019 - 2025 by Dario Passariello
|
package/documents/empty
DELETED
|
File without changes
|