@samline/notify 1.0.1 → 1.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.
Files changed (30) hide show
  1. package/README.md +7 -4
  2. package/dist/notify.d.mts +5 -1
  3. package/dist/notify.d.mts.map +1 -1
  4. package/dist/notify.d.ts +5 -1
  5. package/dist/notify.d.ts.map +1 -1
  6. package/dist/notify.js +117 -1
  7. package/dist/notify.mjs +117 -2
  8. package/dist/{react-notify-12s-BjWbwTu8.mjs → react-notify-12s--2JK5UjB.mjs} +180 -2
  9. package/dist/{react-notify-12s-7LOZlSBi.js → react-notify-12s-Kv2M6zlv.js} +180 -1
  10. package/dist/react.d.mts +5 -1
  11. package/dist/react.d.mts.map +1 -1
  12. package/dist/react.d.ts +5 -1
  13. package/dist/react.d.ts.map +1 -1
  14. package/dist/react.js +2 -1
  15. package/dist/react.mjs +1 -1
  16. package/dist/render-notify-toasts.js +213 -0
  17. package/dist/styles.css +81 -0
  18. package/dist/svelte.d.mts +5 -1
  19. package/dist/svelte.d.mts.map +1 -1
  20. package/dist/svelte.d.ts +5 -1
  21. package/dist/svelte.d.ts.map +1 -1
  22. package/dist/svelte.js +116 -0
  23. package/dist/svelte.mjs +116 -1
  24. package/dist/vue.d.mts +5 -1
  25. package/dist/vue.d.mts.map +1 -1
  26. package/dist/vue.d.ts +5 -1
  27. package/dist/vue.d.ts.map +1 -1
  28. package/dist/vue.js +119 -3
  29. package/dist/vue.mjs +119 -4
  30. package/package.json +1 -1
package/dist/svelte.js CHANGED
@@ -164,5 +164,121 @@ function showNotifyToast(options) {
164
164
  return notifyCore.show(options);
165
165
  }
166
166
 
167
+ const ICONS = {
168
+ success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
169
+ error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
170
+ warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
171
+ info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
172
+ loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
173
+ action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
174
+ };
175
+ const EXIT_MS = 600;
176
+ function capitalize(s) {
177
+ return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
178
+ }
179
+ let viewport = null;
180
+ const toastEls = new Map();
181
+ function getOrCreateViewport(position) {
182
+ if (!viewport) {
183
+ viewport = document.createElement("div");
184
+ viewport.setAttribute("data-notify-viewport", "");
185
+ viewport.setAttribute("data-position", position);
186
+ viewport.setAttribute("data-theme", "light");
187
+ document.body.appendChild(viewport);
188
+ }
189
+ return viewport;
190
+ }
191
+ function buildToastEl(toast) {
192
+ const state = toast.type || "success";
193
+ const btn = document.createElement("button");
194
+ btn.type = "button";
195
+ btn.setAttribute("data-notify-toast", "");
196
+ btn.setAttribute("data-state", state);
197
+ btn.setAttribute("data-ready", "false");
198
+ btn.setAttribute("data-exiting", "false");
199
+ const card = document.createElement("div");
200
+ card.setAttribute("data-notify-card", "");
201
+ const header = document.createElement("div");
202
+ header.setAttribute("data-notify-header", "");
203
+ const badge = document.createElement("div");
204
+ badge.setAttribute("data-notify-badge", "");
205
+ badge.setAttribute("data-state", state);
206
+ badge.innerHTML = ICONS[state] || ICONS.success;
207
+ const titleEl = document.createElement("span");
208
+ titleEl.setAttribute("data-notify-title", "");
209
+ titleEl.setAttribute("data-state", state);
210
+ titleEl.textContent = toast.title || capitalize(state);
211
+ header.appendChild(badge);
212
+ header.appendChild(titleEl);
213
+ card.appendChild(header);
214
+ if (toast.description || toast.button) {
215
+ const content = document.createElement("div");
216
+ content.setAttribute("data-notify-content", "");
217
+ content.setAttribute("data-visible", "true");
218
+ if (toast.description) {
219
+ const desc = document.createElement("div");
220
+ desc.setAttribute("data-notify-description", "");
221
+ desc.textContent = toast.description;
222
+ content.appendChild(desc);
223
+ }
224
+ if (toast.button) {
225
+ const actionBtn = document.createElement("button");
226
+ actionBtn.setAttribute("data-notify-button", "");
227
+ actionBtn.setAttribute("data-state", state);
228
+ actionBtn.textContent = toast.button.title;
229
+ actionBtn.addEventListener("click", (e)=>{
230
+ var _toast_button;
231
+ e.stopPropagation();
232
+ (_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
233
+ notifyCore.dismiss(toast.id);
234
+ });
235
+ content.appendChild(actionBtn);
236
+ }
237
+ card.appendChild(content);
238
+ }
239
+ btn.appendChild(card);
240
+ btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
241
+ requestAnimationFrame(()=>{
242
+ requestAnimationFrame(()=>{
243
+ btn.setAttribute("data-ready", "true");
244
+ });
245
+ });
246
+ return btn;
247
+ }
248
+ function updateToastEl(el, toast) {
249
+ const state = toast.type || "success";
250
+ el.setAttribute("data-state", state);
251
+ if (toast.exiting) {
252
+ el.setAttribute("data-exiting", "true");
253
+ }
254
+ }
255
+ function renderNotifyToasts(options = {}) {
256
+ var _options_position;
257
+ const position = (_options_position = options.position) != null ? _options_position : "top-right";
258
+ const vp = getOrCreateViewport(position);
259
+ return notifyCore.subscribe((toasts)=>{
260
+ const liveIds = new Set(toasts.map((t)=>t.id));
261
+ for (const [id, el] of toastEls){
262
+ if (!liveIds.has(id)) {
263
+ el.setAttribute("data-exiting", "true");
264
+ setTimeout(()=>{
265
+ el.remove();
266
+ toastEls.delete(id);
267
+ }, EXIT_MS);
268
+ }
269
+ }
270
+ for (const toast of toasts){
271
+ if (toastEls.has(toast.id)) {
272
+ updateToastEl(toastEls.get(toast.id), toast);
273
+ } else {
274
+ const el = buildToastEl(toast);
275
+ toastEls.set(toast.id, el);
276
+ vp.appendChild(el);
277
+ }
278
+ }
279
+ });
280
+ }
281
+
167
282
  exports.notifyToasts = notifyToasts;
283
+ exports.renderNotifyToasts = renderNotifyToasts;
168
284
  exports.showNotifyToast = showNotifyToast;
package/dist/svelte.mjs CHANGED
@@ -162,4 +162,119 @@ function showNotifyToast(options) {
162
162
  return notifyCore.show(options);
163
163
  }
164
164
 
165
- export { notifyToasts, showNotifyToast };
165
+ const ICONS = {
166
+ success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
167
+ error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
168
+ warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
169
+ info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
170
+ loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
171
+ action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
172
+ };
173
+ const EXIT_MS = 600;
174
+ function capitalize(s) {
175
+ return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
176
+ }
177
+ let viewport = null;
178
+ const toastEls = new Map();
179
+ function getOrCreateViewport(position) {
180
+ if (!viewport) {
181
+ viewport = document.createElement("div");
182
+ viewport.setAttribute("data-notify-viewport", "");
183
+ viewport.setAttribute("data-position", position);
184
+ viewport.setAttribute("data-theme", "light");
185
+ document.body.appendChild(viewport);
186
+ }
187
+ return viewport;
188
+ }
189
+ function buildToastEl(toast) {
190
+ const state = toast.type || "success";
191
+ const btn = document.createElement("button");
192
+ btn.type = "button";
193
+ btn.setAttribute("data-notify-toast", "");
194
+ btn.setAttribute("data-state", state);
195
+ btn.setAttribute("data-ready", "false");
196
+ btn.setAttribute("data-exiting", "false");
197
+ const card = document.createElement("div");
198
+ card.setAttribute("data-notify-card", "");
199
+ const header = document.createElement("div");
200
+ header.setAttribute("data-notify-header", "");
201
+ const badge = document.createElement("div");
202
+ badge.setAttribute("data-notify-badge", "");
203
+ badge.setAttribute("data-state", state);
204
+ badge.innerHTML = ICONS[state] || ICONS.success;
205
+ const titleEl = document.createElement("span");
206
+ titleEl.setAttribute("data-notify-title", "");
207
+ titleEl.setAttribute("data-state", state);
208
+ titleEl.textContent = toast.title || capitalize(state);
209
+ header.appendChild(badge);
210
+ header.appendChild(titleEl);
211
+ card.appendChild(header);
212
+ if (toast.description || toast.button) {
213
+ const content = document.createElement("div");
214
+ content.setAttribute("data-notify-content", "");
215
+ content.setAttribute("data-visible", "true");
216
+ if (toast.description) {
217
+ const desc = document.createElement("div");
218
+ desc.setAttribute("data-notify-description", "");
219
+ desc.textContent = toast.description;
220
+ content.appendChild(desc);
221
+ }
222
+ if (toast.button) {
223
+ const actionBtn = document.createElement("button");
224
+ actionBtn.setAttribute("data-notify-button", "");
225
+ actionBtn.setAttribute("data-state", state);
226
+ actionBtn.textContent = toast.button.title;
227
+ actionBtn.addEventListener("click", (e)=>{
228
+ var _toast_button;
229
+ e.stopPropagation();
230
+ (_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
231
+ notifyCore.dismiss(toast.id);
232
+ });
233
+ content.appendChild(actionBtn);
234
+ }
235
+ card.appendChild(content);
236
+ }
237
+ btn.appendChild(card);
238
+ btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
239
+ requestAnimationFrame(()=>{
240
+ requestAnimationFrame(()=>{
241
+ btn.setAttribute("data-ready", "true");
242
+ });
243
+ });
244
+ return btn;
245
+ }
246
+ function updateToastEl(el, toast) {
247
+ const state = toast.type || "success";
248
+ el.setAttribute("data-state", state);
249
+ if (toast.exiting) {
250
+ el.setAttribute("data-exiting", "true");
251
+ }
252
+ }
253
+ function renderNotifyToasts(options = {}) {
254
+ var _options_position;
255
+ const position = (_options_position = options.position) != null ? _options_position : "top-right";
256
+ const vp = getOrCreateViewport(position);
257
+ return notifyCore.subscribe((toasts)=>{
258
+ const liveIds = new Set(toasts.map((t)=>t.id));
259
+ for (const [id, el] of toastEls){
260
+ if (!liveIds.has(id)) {
261
+ el.setAttribute("data-exiting", "true");
262
+ setTimeout(()=>{
263
+ el.remove();
264
+ toastEls.delete(id);
265
+ }, EXIT_MS);
266
+ }
267
+ }
268
+ for (const toast of toasts){
269
+ if (toastEls.has(toast.id)) {
270
+ updateToastEl(toastEls.get(toast.id), toast);
271
+ } else {
272
+ const el = buildToastEl(toast);
273
+ toastEls.set(toast.id, el);
274
+ vp.appendChild(el);
275
+ }
276
+ }
277
+ });
278
+ }
279
+
280
+ export { notifyToasts, renderNotifyToasts, showNotifyToast };
package/dist/vue.d.mts CHANGED
@@ -99,5 +99,9 @@ declare function useNotifyToasts(): {
99
99
  };
100
100
  declare function showNotifyToast(options: NotifyOptions): string;
101
101
 
102
- export { showNotifyToast, useNotifyToasts };
102
+ declare function renderNotifyToasts(options?: {
103
+ position?: NotifyPosition;
104
+ }): () => boolean;
105
+
106
+ export { renderNotifyToasts, showNotifyToast, useNotifyToasts };
103
107
  //# sourceMappingURL=vue.d.mts.map
package/dist/vue.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vue.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}
1
+ {"version":3,"file":"vue.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts","../src/render-notify-toasts.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;AC9DvD,iBAAiB,kBAAkB;AACnC,eAAe,cAAc;AAC7B;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}
package/dist/vue.d.ts CHANGED
@@ -99,5 +99,9 @@ declare function useNotifyToasts(): {
99
99
  };
100
100
  declare function showNotifyToast(options: NotifyOptions): string;
101
101
 
102
- export { showNotifyToast, useNotifyToasts };
102
+ declare function renderNotifyToasts(options?: {
103
+ position?: NotifyPosition;
104
+ }): () => boolean;
105
+
106
+ export { renderNotifyToasts, showNotifyToast, useNotifyToasts };
103
107
  //# sourceMappingURL=vue.d.ts.map
package/dist/vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vue.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}
1
+ {"version":3,"file":"vue.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vue-notify.ts","../src/render-notify-toasts.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACJA,iBAAiB,eAAe;AAChC,YAAY,GAAG,CAAC,GAAG;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeA,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAA6B;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeF,WAAmB;AAClC,mBAAmBC,cAAsB;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,eAAe,UAAU,aAAa;;AC9DvD,iBAAiB,kBAAkB;AACnC,eAAe,cAAc;AAC7B;;;;","names":["__types.NotifyState","__types.NotifyPosition","__core_notify_core.NotifyItem"]}
package/dist/vue.js CHANGED
@@ -43,11 +43,11 @@ const cacheStringFunction = (fn)=>{
43
43
  return hit || (cache[str] = fn(str));
44
44
  };
45
45
  };
46
- const capitalize = cacheStringFunction((str)=>{
46
+ const capitalize$1 = cacheStringFunction((str)=>{
47
47
  return str.charAt(0).toUpperCase() + str.slice(1);
48
48
  });
49
49
  const toHandlerKey = cacheStringFunction((str)=>{
50
- const s = str ? `on${capitalize(str)}` : ``;
50
+ const s = str ? `on${capitalize$1(str)}` : ``;
51
51
  return s;
52
52
  });
53
53
  const hasChanged = (value, oldValue)=>!Object.is(value, oldValue);
@@ -620,7 +620,7 @@ function createReadonlyMethod(type) {
620
620
  return function(...args) {
621
621
  if (!!(process.env.NODE_ENV !== "production")) {
622
622
  const key = args[0] ? `on key "${args[0]}" ` : ``;
623
- warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, toRaw(this));
623
+ warn(`${capitalize$1(type)} operation ${key}failed: target is readonly.`, toRaw(this));
624
624
  }
625
625
  return type === "delete" ? false : type === "clear" ? void 0 : this;
626
626
  };
@@ -2095,5 +2095,121 @@ function showNotifyToast(options) {
2095
2095
  return notifyCore.show(options);
2096
2096
  }
2097
2097
 
2098
+ const ICONS = {
2099
+ success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
2100
+ error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
2101
+ warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
2102
+ info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
2103
+ loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
2104
+ action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
2105
+ };
2106
+ const EXIT_MS = 600;
2107
+ function capitalize(s) {
2108
+ return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
2109
+ }
2110
+ let viewport = null;
2111
+ const toastEls = new Map();
2112
+ function getOrCreateViewport(position) {
2113
+ if (!viewport) {
2114
+ viewport = document.createElement("div");
2115
+ viewport.setAttribute("data-notify-viewport", "");
2116
+ viewport.setAttribute("data-position", position);
2117
+ viewport.setAttribute("data-theme", "light");
2118
+ document.body.appendChild(viewport);
2119
+ }
2120
+ return viewport;
2121
+ }
2122
+ function buildToastEl(toast) {
2123
+ const state = toast.type || "success";
2124
+ const btn = document.createElement("button");
2125
+ btn.type = "button";
2126
+ btn.setAttribute("data-notify-toast", "");
2127
+ btn.setAttribute("data-state", state);
2128
+ btn.setAttribute("data-ready", "false");
2129
+ btn.setAttribute("data-exiting", "false");
2130
+ const card = document.createElement("div");
2131
+ card.setAttribute("data-notify-card", "");
2132
+ const header = document.createElement("div");
2133
+ header.setAttribute("data-notify-header", "");
2134
+ const badge = document.createElement("div");
2135
+ badge.setAttribute("data-notify-badge", "");
2136
+ badge.setAttribute("data-state", state);
2137
+ badge.innerHTML = ICONS[state] || ICONS.success;
2138
+ const titleEl = document.createElement("span");
2139
+ titleEl.setAttribute("data-notify-title", "");
2140
+ titleEl.setAttribute("data-state", state);
2141
+ titleEl.textContent = toast.title || capitalize(state);
2142
+ header.appendChild(badge);
2143
+ header.appendChild(titleEl);
2144
+ card.appendChild(header);
2145
+ if (toast.description || toast.button) {
2146
+ const content = document.createElement("div");
2147
+ content.setAttribute("data-notify-content", "");
2148
+ content.setAttribute("data-visible", "true");
2149
+ if (toast.description) {
2150
+ const desc = document.createElement("div");
2151
+ desc.setAttribute("data-notify-description", "");
2152
+ desc.textContent = toast.description;
2153
+ content.appendChild(desc);
2154
+ }
2155
+ if (toast.button) {
2156
+ const actionBtn = document.createElement("button");
2157
+ actionBtn.setAttribute("data-notify-button", "");
2158
+ actionBtn.setAttribute("data-state", state);
2159
+ actionBtn.textContent = toast.button.title;
2160
+ actionBtn.addEventListener("click", (e)=>{
2161
+ var _toast_button;
2162
+ e.stopPropagation();
2163
+ (_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
2164
+ notifyCore.dismiss(toast.id);
2165
+ });
2166
+ content.appendChild(actionBtn);
2167
+ }
2168
+ card.appendChild(content);
2169
+ }
2170
+ btn.appendChild(card);
2171
+ btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
2172
+ requestAnimationFrame(()=>{
2173
+ requestAnimationFrame(()=>{
2174
+ btn.setAttribute("data-ready", "true");
2175
+ });
2176
+ });
2177
+ return btn;
2178
+ }
2179
+ function updateToastEl(el, toast) {
2180
+ const state = toast.type || "success";
2181
+ el.setAttribute("data-state", state);
2182
+ if (toast.exiting) {
2183
+ el.setAttribute("data-exiting", "true");
2184
+ }
2185
+ }
2186
+ function renderNotifyToasts(options = {}) {
2187
+ var _options_position;
2188
+ const position = (_options_position = options.position) != null ? _options_position : "top-right";
2189
+ const vp = getOrCreateViewport(position);
2190
+ return notifyCore.subscribe((toasts)=>{
2191
+ const liveIds = new Set(toasts.map((t)=>t.id));
2192
+ for (const [id, el] of toastEls){
2193
+ if (!liveIds.has(id)) {
2194
+ el.setAttribute("data-exiting", "true");
2195
+ setTimeout(()=>{
2196
+ el.remove();
2197
+ toastEls.delete(id);
2198
+ }, EXIT_MS);
2199
+ }
2200
+ }
2201
+ for (const toast of toasts){
2202
+ if (toastEls.has(toast.id)) {
2203
+ updateToastEl(toastEls.get(toast.id), toast);
2204
+ } else {
2205
+ const el = buildToastEl(toast);
2206
+ toastEls.set(toast.id, el);
2207
+ vp.appendChild(el);
2208
+ }
2209
+ }
2210
+ });
2211
+ }
2212
+
2213
+ exports.renderNotifyToasts = renderNotifyToasts;
2098
2214
  exports.showNotifyToast = showNotifyToast;
2099
2215
  exports.useNotifyToasts = useNotifyToasts;
package/dist/vue.mjs CHANGED
@@ -41,11 +41,11 @@ const cacheStringFunction = (fn)=>{
41
41
  return hit || (cache[str] = fn(str));
42
42
  };
43
43
  };
44
- const capitalize = cacheStringFunction((str)=>{
44
+ const capitalize$1 = cacheStringFunction((str)=>{
45
45
  return str.charAt(0).toUpperCase() + str.slice(1);
46
46
  });
47
47
  const toHandlerKey = cacheStringFunction((str)=>{
48
- const s = str ? `on${capitalize(str)}` : ``;
48
+ const s = str ? `on${capitalize$1(str)}` : ``;
49
49
  return s;
50
50
  });
51
51
  const hasChanged = (value, oldValue)=>!Object.is(value, oldValue);
@@ -618,7 +618,7 @@ function createReadonlyMethod(type) {
618
618
  return function(...args) {
619
619
  if (!!(process.env.NODE_ENV !== "production")) {
620
620
  const key = args[0] ? `on key "${args[0]}" ` : ``;
621
- warn(`${capitalize(type)} operation ${key}failed: target is readonly.`, toRaw(this));
621
+ warn(`${capitalize$1(type)} operation ${key}failed: target is readonly.`, toRaw(this));
622
622
  }
623
623
  return type === "delete" ? false : type === "clear" ? void 0 : this;
624
624
  };
@@ -2093,4 +2093,119 @@ function showNotifyToast(options) {
2093
2093
  return notifyCore.show(options);
2094
2094
  }
2095
2095
 
2096
- export { showNotifyToast, useNotifyToasts };
2096
+ const ICONS = {
2097
+ success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
2098
+ error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
2099
+ warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>',
2100
+ info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m4.93 4.93 4.24 4.24"/><path d="m14.83 9.17 4.24-4.24"/><path d="m14.83 14.83 4.24 4.24"/><path d="m9.17 14.83-4.24 4.24"/><circle cx="12" cy="12" r="4"/></svg>',
2101
+ loading: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" data-notify-icon="spin" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>',
2102
+ action: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>'
2103
+ };
2104
+ const EXIT_MS = 600;
2105
+ function capitalize(s) {
2106
+ return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
2107
+ }
2108
+ let viewport = null;
2109
+ const toastEls = new Map();
2110
+ function getOrCreateViewport(position) {
2111
+ if (!viewport) {
2112
+ viewport = document.createElement("div");
2113
+ viewport.setAttribute("data-notify-viewport", "");
2114
+ viewport.setAttribute("data-position", position);
2115
+ viewport.setAttribute("data-theme", "light");
2116
+ document.body.appendChild(viewport);
2117
+ }
2118
+ return viewport;
2119
+ }
2120
+ function buildToastEl(toast) {
2121
+ const state = toast.type || "success";
2122
+ const btn = document.createElement("button");
2123
+ btn.type = "button";
2124
+ btn.setAttribute("data-notify-toast", "");
2125
+ btn.setAttribute("data-state", state);
2126
+ btn.setAttribute("data-ready", "false");
2127
+ btn.setAttribute("data-exiting", "false");
2128
+ const card = document.createElement("div");
2129
+ card.setAttribute("data-notify-card", "");
2130
+ const header = document.createElement("div");
2131
+ header.setAttribute("data-notify-header", "");
2132
+ const badge = document.createElement("div");
2133
+ badge.setAttribute("data-notify-badge", "");
2134
+ badge.setAttribute("data-state", state);
2135
+ badge.innerHTML = ICONS[state] || ICONS.success;
2136
+ const titleEl = document.createElement("span");
2137
+ titleEl.setAttribute("data-notify-title", "");
2138
+ titleEl.setAttribute("data-state", state);
2139
+ titleEl.textContent = toast.title || capitalize(state);
2140
+ header.appendChild(badge);
2141
+ header.appendChild(titleEl);
2142
+ card.appendChild(header);
2143
+ if (toast.description || toast.button) {
2144
+ const content = document.createElement("div");
2145
+ content.setAttribute("data-notify-content", "");
2146
+ content.setAttribute("data-visible", "true");
2147
+ if (toast.description) {
2148
+ const desc = document.createElement("div");
2149
+ desc.setAttribute("data-notify-description", "");
2150
+ desc.textContent = toast.description;
2151
+ content.appendChild(desc);
2152
+ }
2153
+ if (toast.button) {
2154
+ const actionBtn = document.createElement("button");
2155
+ actionBtn.setAttribute("data-notify-button", "");
2156
+ actionBtn.setAttribute("data-state", state);
2157
+ actionBtn.textContent = toast.button.title;
2158
+ actionBtn.addEventListener("click", (e)=>{
2159
+ var _toast_button;
2160
+ e.stopPropagation();
2161
+ (_toast_button = toast.button) == null ? void 0 : _toast_button.onClick();
2162
+ notifyCore.dismiss(toast.id);
2163
+ });
2164
+ content.appendChild(actionBtn);
2165
+ }
2166
+ card.appendChild(content);
2167
+ }
2168
+ btn.appendChild(card);
2169
+ btn.addEventListener("click", ()=>notifyCore.dismiss(toast.id));
2170
+ requestAnimationFrame(()=>{
2171
+ requestAnimationFrame(()=>{
2172
+ btn.setAttribute("data-ready", "true");
2173
+ });
2174
+ });
2175
+ return btn;
2176
+ }
2177
+ function updateToastEl(el, toast) {
2178
+ const state = toast.type || "success";
2179
+ el.setAttribute("data-state", state);
2180
+ if (toast.exiting) {
2181
+ el.setAttribute("data-exiting", "true");
2182
+ }
2183
+ }
2184
+ function renderNotifyToasts(options = {}) {
2185
+ var _options_position;
2186
+ const position = (_options_position = options.position) != null ? _options_position : "top-right";
2187
+ const vp = getOrCreateViewport(position);
2188
+ return notifyCore.subscribe((toasts)=>{
2189
+ const liveIds = new Set(toasts.map((t)=>t.id));
2190
+ for (const [id, el] of toastEls){
2191
+ if (!liveIds.has(id)) {
2192
+ el.setAttribute("data-exiting", "true");
2193
+ setTimeout(()=>{
2194
+ el.remove();
2195
+ toastEls.delete(id);
2196
+ }, EXIT_MS);
2197
+ }
2198
+ }
2199
+ for (const toast of toasts){
2200
+ if (toastEls.has(toast.id)) {
2201
+ updateToastEl(toastEls.get(toast.id), toast);
2202
+ } else {
2203
+ const el = buildToastEl(toast);
2204
+ toastEls.set(toast.id, el);
2205
+ vp.appendChild(el);
2206
+ }
2207
+ }
2208
+ });
2209
+ }
2210
+
2211
+ export { renderNotifyToasts, showNotifyToast, useNotifyToasts };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@samline/notify",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A toast notification library designed to bring beautiful, animated notifications to React, Vue, Svelte, and Vanilla JS. Seamless integration across multiple frameworks.",
5
5
  "keywords": [
6
6
  "toast",