@wokki20/jspt 2.0.3 → 2.0.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 (11) hide show
  1. package/README.md +134 -31
  2. package/dist/jspt.css +5 -0
  3. package/dist/jspt.d.ts +56 -49
  4. package/dist/jspt.js +668 -626
  5. package/dist/jspt.min.js +1 -1
  6. package/dist/jspt.module.js +620 -611
  7. package/package.json +1 -1
  8. package/src/jspt.css +5 -0
  9. package/src/jspt.d.ts +56 -49
  10. package/src/jspt.js +668 -626
  11. package/src/jspt.module.js +620 -611
package/README.md CHANGED
@@ -15,12 +15,17 @@ Get started in seconds with our CDN:
15
15
  <html>
16
16
  <head>
17
17
  <!-- JSPT CSS -->
18
- <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
18
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css">
19
19
  <!-- JSPT JavaScript -->
20
- <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
20
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.min.js"></script>
21
21
  </head>
22
22
  <body>
23
23
  <script>
24
+ // Import icon libraries (required for classic scripts)
25
+ jspt.importScript({
26
+ names: ['material_symbols_rounded']
27
+ });
28
+
24
29
  // Show a toast notification
25
30
  jspt.makeToast({
26
31
  message: "Hello World!",
@@ -74,15 +79,22 @@ See [FOLDER_STRUCTURE.md](FOLDER_STRUCTURE.md) for detailed information.
74
79
  #### Production (Pinned Version - Stable)
75
80
  ```html
76
81
  <!-- CSS -->
77
- <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
82
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css">
78
83
 
79
84
  <!-- JavaScript (minified) -->
80
- <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
85
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.min.js"></script>
81
86
 
82
87
  <!-- Usage -->
83
88
  <script>
89
+ // Import icon libraries (required for classic scripts when using icons)
90
+ jspt.importScript({
91
+ names: ['material_symbols_rounded']
92
+ });
93
+
84
94
  jspt.makeToast({
85
- message: "Hello from CDN!"
95
+ message: "Hello from CDN!",
96
+ icon_left: "check_circle",
97
+ icon_left_type: "google_material_rounded"
86
98
  });
87
99
  </script>
88
100
  ```
@@ -96,25 +108,37 @@ jspt.makeToast({
96
108
 
97
109
  #### ES Module from CDN
98
110
  ```html
99
- <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
111
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css">
100
112
 
101
113
  <script type="module">
102
- import { makeToast, makePopup } from 'https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.module.js';
114
+ import { makeToast, makePopup } from 'https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.module.js';
103
115
 
104
116
  makeToast({ message: "ES Module from CDN!" });
105
117
  </script>
106
118
  ```
107
119
 
120
+ **Note:** When using ES modules, you must manually include icon libraries in your HTML if needed:
121
+ ```html
122
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
123
+ ```
124
+
108
125
  ### Option 2: Download and Self-Host
109
126
 
110
- #### Script Tag (Traditional)
127
+ #### Script Tag (Classic Script)
111
128
  ```html
112
129
  <link rel="stylesheet" href="dist/jspt.css">
113
130
  <script src="dist/jspt.js"></script>
114
131
 
115
132
  <script>
133
+ // Import icon libraries first (required for classic scripts when using icons)
134
+ jspt.importScript({
135
+ names: ['material_symbols_rounded']
136
+ });
137
+
116
138
  jspt.makeToast({
117
- message: "Hello World!"
139
+ message: "Hello World!",
140
+ icon_left: "check_circle",
141
+ icon_left_type: "google_material_rounded"
118
142
  });
119
143
  </script>
120
144
  ```
@@ -134,6 +158,47 @@ makeToast({
134
158
  });
135
159
  ```
136
160
 
161
+ **Note:** For ES modules, manually include icon libraries in your HTML:
162
+ ```html
163
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
164
+ ```
165
+
166
+ ### Option 3: NPM Package
167
+
168
+ ```bash
169
+ npm install @wokki20/jspt
170
+ ```
171
+
172
+ ## Icon Libraries
173
+
174
+ ### Classic Scripts (Regular `<script>` tag)
175
+
176
+ When using JSPT with classic scripts, you **must** call `jspt.importScript()` to load icon libraries:
177
+
178
+ ```javascript
179
+ jspt.importScript({
180
+ names: ['material_symbols_rounded', 'material_symbols_outlined', 'lucide']
181
+ });
182
+ ```
183
+
184
+ **Available icon libraries:**
185
+ - `'material_symbols_rounded'` - Google Material Symbols (Rounded)
186
+ - `'material_symbols_outlined'` - Google Material Symbols (Outlined)
187
+ - `'lucide'` - Lucide Icons
188
+ - `'highlightjs'` - Highlight.js (for code syntax highlighting)
189
+
190
+ ### ES Modules
191
+
192
+ When using ES modules, `jspt.importScript()` is not available. You must manually include icon libraries in your HTML:
193
+
194
+ ```html
195
+ <!-- Material Symbols -->
196
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
197
+
198
+ <!-- Lucide Icons -->
199
+ <script src="https://unpkg.com/lucide@latest"></script>
200
+ ```
201
+
137
202
  ## CDN Usage
138
203
 
139
204
  JSPT is hosted on `https://cdn.wokki20.nl` with two delivery methods:
@@ -143,20 +208,20 @@ JSPT is hosted on `https://cdn.wokki20.nl` with two delivery methods:
143
208
  Use specific versions for stability and caching:
144
209
 
145
210
  ```html
146
- <!-- v2.0.3 - Minified (10KB) -->
147
- <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
211
+ <!-- v2.0.5 - Minified (10KB) -->
212
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.min.js"></script>
148
213
 
149
- <!-- v2.0.3 - Full with JSDoc (24KB) -->
150
- <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.js"></script>
214
+ <!-- v2.0.5 - Full with JSDoc (24KB) -->
215
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.js"></script>
151
216
 
152
- <!-- v2.0.3 - ES Module (21KB) -->
153
- <script type="module" src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.module.js"></script>
217
+ <!-- v2.0.5 - ES Module (21KB) -->
218
+ <script type="module" src="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.module.js"></script>
154
219
 
155
220
  <!-- CSS -->
156
- <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
221
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css">
157
222
 
158
223
  <!-- TypeScript Definitions -->
159
- /// <reference path="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.d.ts" />
224
+ /// <reference path="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.d.ts" />
160
225
  ```
161
226
 
162
227
  ✅ **Benefits:**
@@ -196,11 +261,11 @@ Always get the newest version automatically:
196
261
 
197
262
  | Use Case | Recommended URL |
198
263
  |----------|----------------|
199
- | Production website | `content/jspt-v2.0.3/jspt.min.js` (versioned) |
264
+ | Production website | `content/jspt-v2.0.5/jspt.min.js` (versioned) |
200
265
  | Testing/Development | `dynamic/jspt/jspt.js` (dynamic) |
201
- | Maximum performance | `content/jspt-v2.0.3/jspt.min.js` (minified + cached) |
202
- | ES6 Projects | `content/jspt-v2.0.3/jspt.module.js` (versioned module) |
203
- | TypeScript Projects | `content/jspt-v2.0.3/jspt.d.ts` (type definitions) |
266
+ | Maximum performance | `content/jspt-v2.0.5/jspt.min.js` (minified + cached) |
267
+ | ES6 Projects | `content/jspt-v2.0.5/jspt.module.js` (versioned module) |
268
+ | TypeScript Projects | `content/jspt-v2.0.5/jspt.d.ts` (type definitions) |
204
269
 
205
270
  ## Usage
206
271
 
@@ -217,6 +282,11 @@ jspt.makeToast({
217
282
  #### Toast with Icon
218
283
 
219
284
  ```javascript
285
+ // For classic scripts, import icons first
286
+ jspt.importScript({
287
+ names: ['material_symbols_rounded']
288
+ });
289
+
220
290
  jspt.makeToast({
221
291
  message: "Success!",
222
292
  style: "default",
@@ -279,6 +349,29 @@ jspt.makePopup({
279
349
 
280
350
  ## API Reference
281
351
 
352
+ ### `jspt.importScript(options)`
353
+
354
+ **(Classic scripts only)** Loads external libraries like icon fonts or syntax highlighters.
355
+
356
+ **Options:**
357
+
358
+ | Property | Type | Description |
359
+ |----------|------|-------------|
360
+ | `names` | string[] | Array of library names to import |
361
+
362
+ **Available libraries:**
363
+ - `'highlightjs'` - Highlight.js for code syntax highlighting
364
+ - `'material_symbols_rounded'` - Google Material Symbols (Rounded)
365
+ - `'material_symbols_outlined'` - Google Material Symbols (Outlined)
366
+ - `'lucide'` - Lucide Icons
367
+
368
+ **Example:**
369
+ ```javascript
370
+ jspt.importScript({
371
+ names: ['material_symbols_rounded', 'lucide', 'highlightjs']
372
+ });
373
+ ```
374
+
282
375
  ### `jspt.makeToast(options)`
283
376
 
284
377
  Creates a toast notification.
@@ -307,6 +400,7 @@ Creates a toast notification.
307
400
  - `'image'` - Image URL
308
401
  - `'text'` - Plain text
309
402
  - `'emoji'` - Emoji characters
403
+ - `'lucide_icon'` - Lucide Icons
310
404
 
311
405
  ### `jspt.makePopup(options)`
312
406
 
@@ -369,12 +463,9 @@ The TypeScript definitions are automatically picked up when you import the modul
369
463
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
370
464
  <title>JSPT CDN Example</title>
371
465
 
372
- <!-- Optional: Material Icons for icon support -->
373
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
374
-
375
466
  <!-- JSPT from CDN -->
376
- <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
377
- <script src="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js"></script>
467
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css">
468
+ <script src="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.min.js"></script>
378
469
  </head>
379
470
  <body>
380
471
  <h1>JSPT Example</h1>
@@ -382,6 +473,10 @@ The TypeScript definitions are automatically picked up when you import the modul
382
473
  <button onclick="showPopup()">Show Popup</button>
383
474
 
384
475
  <script>
476
+ jspt.importScript({
477
+ names: ['material_symbols_rounded']
478
+ });
479
+
385
480
  function showToast() {
386
481
  jspt.makeToast({
387
482
  message: "Hello from CDN!",
@@ -414,7 +509,6 @@ See `examples/example-script.html` for a full working example.
414
509
  <html>
415
510
  <head>
416
511
  <link rel="stylesheet" href="dist/jspt.css">
417
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
418
512
  </head>
419
513
  <body>
420
514
  <button onclick="showToast()">Show Toast</button>
@@ -422,6 +516,10 @@ See `examples/example-script.html` for a full working example.
422
516
 
423
517
  <script src="dist/jspt.js"></script>
424
518
  <script>
519
+ jspt.importScript({
520
+ names: ['material_symbols_rounded']
521
+ });
522
+
425
523
  function showToast() {
426
524
  jspt.makeToast({
427
525
  message: "Hello World!",
@@ -452,19 +550,22 @@ See `examples/example-script.html` for a full working example.
452
550
  <!DOCTYPE html>
453
551
  <html>
454
552
  <head>
455
- <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css">
553
+ <link rel="stylesheet" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css">
554
+ <!-- Manually include icon libraries for ES modules -->
555
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
456
556
  </head>
457
557
  <body>
458
558
  <button id="myButton">Show Toast</button>
459
559
  <button id="errorButton">Show Error</button>
460
560
 
461
561
  <script type="module">
462
- import { makeToast } from 'https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.module.js';
562
+ import { makeToast } from 'https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.module.js';
463
563
 
464
564
  document.getElementById('myButton').addEventListener('click', () => {
465
565
  makeToast({
466
566
  message: "Button clicked!",
467
567
  icon_left: "check",
568
+ icon_left_type: "google_material_rounded",
468
569
  duration: 2000
469
570
  });
470
571
  });
@@ -474,6 +575,7 @@ See `examples/example-script.html` for a full working example.
474
575
  style: "default-error",
475
576
  message: "Something went wrong",
476
577
  icon_left: "error",
578
+ icon_left_type: "google_material_rounded",
477
579
  duration: -1,
478
580
  close_on_click: true
479
581
  });
@@ -529,8 +631,8 @@ The library uses CSS custom properties for easy customization. You can override
529
631
  - ✅ **Pin to specific version** - Avoid unexpected breaking changes
530
632
  - ✅ **Preload for faster loading:**
531
633
  ```html
532
- <link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.min.js" as="script">
533
- <link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.0.3/jspt.css" as="style">
634
+ <link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.min.js" as="script">
635
+ <link rel="preload" href="https://cdn.wokki20.nl/content/jspt-v2.0.5/jspt.css" as="style">
534
636
  ```
535
637
 
536
638
  ### File Sizes
@@ -579,6 +681,7 @@ MIT - See [LICENSE](LICENSE) file for details.
579
681
 
580
682
  ### Quick Links
581
683
  - [Installation Guide](#installation)
684
+ - [Icon Libraries](#icon-libraries)
582
685
  - [CDN Usage](#cdn-usage)
583
686
  - [API Reference](#api-reference)
584
687
  - [Examples](#examples)
package/dist/jspt.css CHANGED
@@ -73,6 +73,11 @@
73
73
  color: #fff;
74
74
  }
75
75
 
76
+ .toast-container .toast .toast-icon.lucide {
77
+ width: 20px;
78
+ height: 20px;
79
+ }
80
+
76
81
  .toast-container .toast .toast-icon.toast-icon-image {
77
82
  width: 20px;
78
83
  height: 20px;
package/dist/jspt.d.ts CHANGED
@@ -1,49 +1,56 @@
1
- export interface PopupOptions {
2
- style?: 'default';
3
- content_type?: 'text' | 'html';
4
- header?: string;
5
- title?: string;
6
- message?: string;
7
- content?: string;
8
- close_on_blur?: boolean;
9
- custom_id?: string;
10
- }
11
-
12
- export interface ToastOptions {
13
- style?: 'default' | 'default-error' | string;
14
- message: string;
15
- custom_id?: string;
16
- icon_left?: string;
17
- icon_left_type?: 'google_material_rounded' | 'google_material_outlined' | 'svg' | 'image' | 'text' | 'emoji';
18
- icon_left_action?: () => void;
19
- icon_right?: string;
20
- icon_right_type?: 'google_material_rounded' | 'google_material_outlined' | 'svg' | 'image' | 'text' | 'emoji';
21
- icon_right_action?: () => void;
22
- duration?: number;
23
- close_on_click?: boolean;
24
- onclick?: () => void;
25
- }
26
-
27
- export interface ClosePopupOptions {
28
- custom_id: string;
29
- }
30
-
31
- export function makePopup(options: PopupOptions): void;
32
-
33
- export function makeToast(options: ToastOptions): void;
34
-
35
- export function closePopup(options: ClosePopupOptions): void;
36
-
37
- declare const jspt: {
38
- makePopup: typeof makePopup;
39
- makeToast: typeof makeToast;
40
- closePopup: typeof closePopup;
41
- };
42
-
43
- export default jspt;
44
-
45
- declare global {
46
- interface Window {
47
- jspt: typeof jspt;
48
- }
49
- }
1
+ export interface PopupOptions {
2
+ style?: 'default';
3
+ content_type?: 'text' | 'html';
4
+ header?: string;
5
+ title?: string;
6
+ message?: string;
7
+ content?: string;
8
+ close_on_blur?: boolean;
9
+ custom_id?: string;
10
+ }
11
+
12
+ export interface ToastOptions {
13
+ style?: 'default' | 'default-error' | string;
14
+ message: string;
15
+ custom_id?: string;
16
+ icon_left?: string;
17
+ icon_left_type?: 'google_material_rounded' | 'google_material_outlined' | 'svg' | 'image' | 'text' | 'emoji' | 'lucide_icon';
18
+ icon_left_action?: () => void;
19
+ icon_right?: string;
20
+ icon_right_type?: 'google_material_rounded' | 'google_material_outlined' | 'svg' | 'image' | 'text' | 'emoji' | 'lucide_icon';
21
+ icon_right_action?: () => void;
22
+ duration?: number;
23
+ close_on_click?: boolean;
24
+ onclick?: () => void;
25
+ }
26
+
27
+ export interface ClosePopupOptions {
28
+ custom_id: string;
29
+ }
30
+
31
+ export interface ImportScripts {
32
+ names: Array <'highlightjs' | 'material_symbols_rounded' | 'material_symbols_outlined' | 'lucide'>;
33
+ };
34
+
35
+ export function makePopup(options: PopupOptions): void;
36
+
37
+ export function makeToast(options: ToastOptions): void;
38
+
39
+ export function closePopup(options: ClosePopupOptions): void;
40
+
41
+ export function importScripts(options: ImportScripts): void;
42
+
43
+ declare const jspt: {
44
+ makePopup: typeof makePopup;
45
+ makeToast: typeof makeToast;
46
+ closePopup: typeof closePopup;
47
+ importScripts: typeof importScripts;
48
+ };
49
+
50
+ export default jspt;
51
+
52
+ declare global {
53
+ interface Window {
54
+ jspt: typeof jspt;
55
+ }
56
+ }