theshtify 1.0.4 → 2.0.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.
- package/.claude/settings.local.json +8 -0
- package/LICENSE +21 -21
- package/css/theshtify.css +50 -40
- package/dist/assets/index-CGwBVT47.css +1 -0
- package/dist/index.html +65 -0
- package/dist/theshtify.cdn.js +674 -0
- package/dist/theshtify.min.js +2 -0
- package/index.html +65 -54
- package/lib/documentation.js +31 -31
- package/lib/theshtify.js +937 -730
- package/lib/theshtifyCDN.js +3 -730
- package/package.json +33 -27
- package/readme.md +221 -331
- package/tests/theshtify.test.js +228 -0
- package/vitest.config.js +7 -0
- package/lib/notif.js +0 -347
package/package.json
CHANGED
|
@@ -1,27 +1,33 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "theshtify",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "Thesharsol notifyer is a lightweight, vanilla JS toast notification library.",
|
|
5
|
-
"main": "
|
|
6
|
-
"directories": {
|
|
7
|
-
"lib": "lib"
|
|
8
|
-
},
|
|
9
|
-
"scripts": {
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
"
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "theshtify",
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "Thesharsol notifyer is a lightweight, vanilla JS toast notification library.",
|
|
5
|
+
"main": "lib/theshtify.js",
|
|
6
|
+
"directories": {
|
|
7
|
+
"lib": "lib"
|
|
8
|
+
},
|
|
9
|
+
"scripts": {
|
|
10
|
+
"build": "esbuild lib/theshtifyCDN.js --bundle --outfile=dist/theshtify.cdn.js && esbuild lib/theshtify.js --bundle --minify --outfile=dist/theshtify.min.js",
|
|
11
|
+
"test": "vitest run"
|
|
12
|
+
},
|
|
13
|
+
"repository": {
|
|
14
|
+
"type": "git",
|
|
15
|
+
"url": "git+https://github.com/thesharsol/theshtify.git"
|
|
16
|
+
},
|
|
17
|
+
"keywords": [
|
|
18
|
+
"notification",
|
|
19
|
+
"toast",
|
|
20
|
+
"notif"
|
|
21
|
+
],
|
|
22
|
+
"author": "BEBE EPEE Ivan Sampi",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com/thesharsol/theshtify/issues"
|
|
26
|
+
},
|
|
27
|
+
"homepage": "https://github.com/thesharsol/theshtify#readme",
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"esbuild": "^0.27.3",
|
|
30
|
+
"jsdom": "^28.1.0",
|
|
31
|
+
"vitest": "^4.0.18"
|
|
32
|
+
}
|
|
33
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,331 +1,221 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
color: 'gray'</br>
|
|
223
|
-
},</br>
|
|
224
|
-
progress: {</br>
|
|
225
|
-
bg: 'gray'</br>
|
|
226
|
-
}</br>
|
|
227
|
-
}
|
|
228
|
-
</td>
|
|
229
|
-
<td style="border:1px solid;"><span style="color:red">no</span></td>
|
|
230
|
-
</tr>
|
|
231
|
-
</table>
|
|
232
|
-
|
|
233
|
-
## Example with type "custom"
|
|
234
|
-
Using the **“custom”** type you can (as described in the table above) describe custom colors for different parts of your notification.
|
|
235
|
-
```js
|
|
236
|
-
theshtify(
|
|
237
|
-
{
|
|
238
|
-
message: 'welcome to theshtify',
|
|
239
|
-
type: 'custom',
|
|
240
|
-
config:{
|
|
241
|
-
colors: {
|
|
242
|
-
bg: '#0C7059',/** notification background */
|
|
243
|
-
color: '#E0BC29',/** text-color*/
|
|
244
|
-
border: {
|
|
245
|
-
type: 'solid',/** border-type support all css types */
|
|
246
|
-
color: 'gray'/**the border color */
|
|
247
|
-
},
|
|
248
|
-
progress: {
|
|
249
|
-
bg: '#E0BC29'/** the progress bar color */
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
}
|
|
255
|
-
);
|
|
256
|
-
```
|
|
257
|
-
>If you use the **“custom”** type without describing the colors as in the example, or omit certain parameters, theshtify will use the default values configured for the type
|
|
258
|
-
|
|
259
|
-
## Colors configuration example
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
By default theshtify provides 4 types of notifications **success, infos, danger and warning** with corresponding colors. it may be that in the context of your project you want to redefine these colors, to do this simply redefine the description of the type in the **“customColors”**.
|
|
263
|
-
|
|
264
|
-
```js
|
|
265
|
-
theshtify(
|
|
266
|
-
{
|
|
267
|
-
message: 'welcome to theshtify',
|
|
268
|
-
type: 'success',
|
|
269
|
-
config: {
|
|
270
|
-
custom_colors: {
|
|
271
|
-
success: {
|
|
272
|
-
bg: '#0C7059',
|
|
273
|
-
color: '#E0BC29',
|
|
274
|
-
border: {
|
|
275
|
-
type: 'solid',
|
|
276
|
-
color: 'gray'
|
|
277
|
-
},
|
|
278
|
-
progress: {
|
|
279
|
-
bg: '#E0BC29'
|
|
280
|
-
}
|
|
281
|
-
},
|
|
282
|
-
},
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
}
|
|
286
|
-
)
|
|
287
|
-
```
|
|
288
|
-
|
|
289
|
-
>In the previous example, theshtify will use the configurations you specified for the **“success”** type. naturally, the other types will use theshtify's default colors, since we only specified custom configurations for the **“success”** type.
|
|
290
|
-
|
|
291
|
-
## Full example
|
|
292
|
-
|
|
293
|
-
```js
|
|
294
|
-
let config = {
|
|
295
|
-
x_align: 'right',
|
|
296
|
-
y_align: 'top',
|
|
297
|
-
duration: 5000,
|
|
298
|
-
font: {
|
|
299
|
-
size: 15,
|
|
300
|
-
weight: 900,
|
|
301
|
-
family: 'arlon'
|
|
302
|
-
},
|
|
303
|
-
custom_colors: {
|
|
304
|
-
success: {
|
|
305
|
-
bg: '#0C7059',
|
|
306
|
-
color: '#E0BC29',
|
|
307
|
-
border: {
|
|
308
|
-
type: 'solid',
|
|
309
|
-
color: 'gray'
|
|
310
|
-
},
|
|
311
|
-
progress: {
|
|
312
|
-
bg: '#E0BC29'
|
|
313
|
-
}
|
|
314
|
-
},
|
|
315
|
-
/** you can also add other types configs */
|
|
316
|
-
},
|
|
317
|
-
radius: 20,
|
|
318
|
-
bordered: true,
|
|
319
|
-
border_width: 1,
|
|
320
|
-
closer: true,
|
|
321
|
-
progress: true,
|
|
322
|
-
progress_height: 2
|
|
323
|
-
|
|
324
|
-
}
|
|
325
|
-
theshtify({ message: 'welcome to theshtify', type: 'success', config: config });
|
|
326
|
-
```
|
|
327
|
-
>if you're working with modules, you can define the configuration in a separate file and import it at runtime
|
|
328
|
-
|
|
329
|
-
## Errors
|
|
330
|
-
|
|
331
|
-
in the event of an error, theshtify will generate an error visible in your browser's console
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
# Theshtify
|
|
6
|
+
|
|
7
|
+
A lightweight, zero-dependency vanilla JS toast notification library. Fully customizable to match your project's design.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
### npm
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm i theshtify
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
### CDN
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/theshtify/dist/theshtify.cdn.js"></script>
|
|
21
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/theshtify/css/theshtify.css" />
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### ES Module
|
|
25
|
+
|
|
26
|
+
```js
|
|
27
|
+
import { theshtify } from "theshtify";
|
|
28
|
+
import "theshtify/css/theshtify.css";
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Features
|
|
32
|
+
|
|
33
|
+
- Easy to use with a simple API
|
|
34
|
+
- Multiple stacked notifications
|
|
35
|
+
- Fully customizable (colors, fonts, borders, positions...)
|
|
36
|
+
- Non-blocking execution
|
|
37
|
+
- Progress bar with duration tracking
|
|
38
|
+
- Fade in/out CSS animations
|
|
39
|
+
- Click callback support
|
|
40
|
+
- Title support
|
|
41
|
+
|
|
42
|
+
## Quick start
|
|
43
|
+
|
|
44
|
+
```js
|
|
45
|
+
theshtify({ message: "Welcome to theshtify", type: "success" });
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## API
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
theshtify({ message, type, title, config, callback });
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
| Parameter | Description | Type | Values | Required |
|
|
55
|
+
| ---------- | ---------------------------------------- | ---------- | -------------------------------------------- | -------- |
|
|
56
|
+
| `message` | The text to display in the notification | `String` | Any string | Yes |
|
|
57
|
+
| `type` | The notification type | `String` | `success` \| `danger` \| `info` \| `warning` \| `custom` | Yes |
|
|
58
|
+
| `title` | A title displayed above the message | `String` | Any string | No |
|
|
59
|
+
| `config` | Display and behavior settings | `Object` | See configuration below | No |
|
|
60
|
+
| `callback` | Function called when the notification is clicked | `Function` | | No |
|
|
61
|
+
|
|
62
|
+
## Configuration options
|
|
63
|
+
|
|
64
|
+
Pass a `config` object to customize the notification appearance and behavior.
|
|
65
|
+
|
|
66
|
+
| Option | Description | Type | Values | Default |
|
|
67
|
+
| --- | --- | --- | --- | --- |
|
|
68
|
+
| `duration` | How long the notification is displayed (ms) | `Number` | `1000` - `5000` | `5000` |
|
|
69
|
+
| `x_align` | Horizontal position | `String` | `left` \| `right` \| `middle` | `right` |
|
|
70
|
+
| `y_align` | Vertical position | `String` | `top` \| `bottom` \| `middle` | `top` |
|
|
71
|
+
| `closer` | Show the close button | `Boolean` | `true` \| `false` | `false` |
|
|
72
|
+
| `bordered` | Show a border around the notification | `Boolean` | `true` \| `false` | `false` |
|
|
73
|
+
| `border_width` | Border thickness in px | `Number` | Any number | `1` |
|
|
74
|
+
| `radius` | Border radius in px | `Number` | Any number | `5` |
|
|
75
|
+
| `progress` | Show the progress bar | `Boolean` | `true` \| `false` | `false` |
|
|
76
|
+
| `progress_height` | Progress bar height in px | `Number` | `1` - `5` | `2` |
|
|
77
|
+
| `font` | Font settings | `Object` | `{ family, size, weight }` | - |
|
|
78
|
+
| `colors` | Custom colors (only with type `custom`) | `Object` | See below | - |
|
|
79
|
+
| `custom_colors` | Override colors for built-in types | `Object` | See below | - |
|
|
80
|
+
| `main_box_classes` | Additional CSS class to add to the notification | `String` | Any class name | - |
|
|
81
|
+
|
|
82
|
+
## Examples
|
|
83
|
+
|
|
84
|
+
### Basic
|
|
85
|
+
|
|
86
|
+
```js
|
|
87
|
+
theshtify({ message: "File saved successfully", type: "success" });
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### With title and callback
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
theshtify({
|
|
94
|
+
message: "Your session will expire soon",
|
|
95
|
+
type: "warning",
|
|
96
|
+
title: "Warning",
|
|
97
|
+
callback: () => {
|
|
98
|
+
console.log("Notification clicked!");
|
|
99
|
+
},
|
|
100
|
+
});
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Custom type with custom colors
|
|
104
|
+
|
|
105
|
+
Using the `custom` type, you can define your own color scheme for the notification.
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
theshtify({
|
|
109
|
+
message: "Welcome to theshtify",
|
|
110
|
+
type: "custom",
|
|
111
|
+
config: {
|
|
112
|
+
colors: {
|
|
113
|
+
bg: "#0C7059",
|
|
114
|
+
color: "#E0BC29",
|
|
115
|
+
border: {
|
|
116
|
+
type: "solid",
|
|
117
|
+
color: "gray",
|
|
118
|
+
},
|
|
119
|
+
progress: {
|
|
120
|
+
bg: "#E0BC29",
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
});
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
> If you use the `custom` type without specifying colors, theshtify will fall back to default values.
|
|
128
|
+
|
|
129
|
+
### Override built-in type colors
|
|
130
|
+
|
|
131
|
+
By default, theshtify provides 4 notification types (`success`, `info`, `danger`, `warning`) with predefined colors. You can override them with `custom_colors`:
|
|
132
|
+
|
|
133
|
+
```js
|
|
134
|
+
theshtify({
|
|
135
|
+
message: "Welcome to theshtify",
|
|
136
|
+
type: "success",
|
|
137
|
+
config: {
|
|
138
|
+
custom_colors: {
|
|
139
|
+
success: {
|
|
140
|
+
bg: "#0C7059",
|
|
141
|
+
color: "#E0BC29",
|
|
142
|
+
border: {
|
|
143
|
+
type: "solid",
|
|
144
|
+
color: "gray",
|
|
145
|
+
},
|
|
146
|
+
progress: {
|
|
147
|
+
bg: "#E0BC29",
|
|
148
|
+
},
|
|
149
|
+
},
|
|
150
|
+
},
|
|
151
|
+
},
|
|
152
|
+
});
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
> Only the types you specify in `custom_colors` are overridden. The others keep their default colors.
|
|
156
|
+
|
|
157
|
+
### Full configuration
|
|
158
|
+
|
|
159
|
+
```js
|
|
160
|
+
const config = {
|
|
161
|
+
x_align: "right",
|
|
162
|
+
y_align: "top",
|
|
163
|
+
duration: 5000,
|
|
164
|
+
font: {
|
|
165
|
+
size: 15,
|
|
166
|
+
weight: 900,
|
|
167
|
+
family: "Arial",
|
|
168
|
+
},
|
|
169
|
+
custom_colors: {
|
|
170
|
+
success: {
|
|
171
|
+
bg: "#0C7059",
|
|
172
|
+
color: "#E0BC29",
|
|
173
|
+
border: { type: "solid", color: "gray" },
|
|
174
|
+
progress: { bg: "#E0BC29" },
|
|
175
|
+
},
|
|
176
|
+
// you can also override danger, info, warning...
|
|
177
|
+
},
|
|
178
|
+
radius: 20,
|
|
179
|
+
bordered: true,
|
|
180
|
+
border_width: 1,
|
|
181
|
+
closer: true,
|
|
182
|
+
progress: true,
|
|
183
|
+
progress_height: 2,
|
|
184
|
+
};
|
|
185
|
+
|
|
186
|
+
theshtify({
|
|
187
|
+
message: "Welcome to theshtify",
|
|
188
|
+
type: "success",
|
|
189
|
+
title: "Hello",
|
|
190
|
+
config: config,
|
|
191
|
+
callback: () => console.log("clicked"),
|
|
192
|
+
});
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
> You can define the configuration in a separate file and import it if you're working with ES modules.
|
|
196
|
+
|
|
197
|
+
### Color object structure
|
|
198
|
+
|
|
199
|
+
The `colors` and `custom_colors` options share the same structure:
|
|
200
|
+
|
|
201
|
+
```js
|
|
202
|
+
{
|
|
203
|
+
bg: "#efefef", // background color
|
|
204
|
+
color: "black", // text color
|
|
205
|
+
border: {
|
|
206
|
+
type: "solid", // CSS border style
|
|
207
|
+
color: "gray" // border color
|
|
208
|
+
},
|
|
209
|
+
progress: {
|
|
210
|
+
bg: "gray" // progress bar color
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
## Error handling
|
|
216
|
+
|
|
217
|
+
If an invalid configuration is passed, theshtify will log a descriptive error in your browser's console.
|
|
218
|
+
|
|
219
|
+
## License
|
|
220
|
+
|
|
221
|
+
[MIT](LICENSE)
|