vue-notifyr 0.1.1 → 0.1.3

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 (3) hide show
  1. package/dist/index.cjs +88 -159
  2. package/dist/style.css +0 -3
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,16 +1,11 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined'
3
- ? factory(exports, require('vue'))
4
- : typeof define === 'function' && define.amd
5
- ? define(['exports', 'vue'], factory)
6
- : ((global = typeof globalThis !== 'undefined' ? globalThis : global || self),
7
- factory((global.VueNotifyr = {}), global.Vue));
8
- })(this, function (exports2, vue) {
9
- 'use strict';
1
+ (function(global, factory) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.VueNotifyr = {}, global.Vue));
3
+ })(this, function(exports2, vue) {
4
+ "use strict";
10
5
  const DEFAULT_OPTIONS = {
11
- position: 'top-center',
6
+ position: "top-center",
12
7
  autoClose: 3e3,
13
- progress: true,
8
+ progress: true
14
9
  };
15
10
  class NotificationManager {
16
11
  constructor() {
@@ -51,7 +46,7 @@
51
46
  */
52
47
  setDefaults(opts) {
53
48
  this.options = { ...this.options, ...opts };
54
- this.emit('options-changed', this.options);
49
+ this.emit("options-changed", this.options);
55
50
  }
56
51
  /**
57
52
  * Show a notification.
@@ -60,17 +55,17 @@
60
55
  * @param opts - Optional override options
61
56
  */
62
57
  show(type, title, opts) {
63
- const options = { ...this.options, ...(opts || {}) };
58
+ const options = { ...this.options, ...opts || {} };
64
59
  const item = {
65
60
  id: this.idCounter++,
66
61
  type,
67
62
  title,
68
63
  options,
69
- createdAt: Date.now(),
64
+ createdAt: Date.now()
70
65
  };
71
66
  this.notifications.push(item);
72
- this.emit('notification-added', item);
73
- if (options.autoClose !== false && typeof window !== 'undefined') {
67
+ this.emit("notification-added", item);
68
+ if (options.autoClose !== false && typeof window !== "undefined") {
74
69
  setTimeout(() => this.remove(item.id), options.autoClose);
75
70
  }
76
71
  }
@@ -82,7 +77,7 @@
82
77
  const index = this.notifications.findIndex((n) => n.id === id);
83
78
  if (index !== -1) {
84
79
  const removed = this.notifications.splice(index, 1)[0];
85
- this.emit('notification-removed', removed);
80
+ this.emit("notification-removed", removed);
86
81
  }
87
82
  }
88
83
  /**
@@ -91,7 +86,7 @@
91
86
  clear() {
92
87
  const removed = [...this.notifications];
93
88
  this.notifications.splice(0);
94
- this.emit('notifications-cleared', removed);
89
+ this.emit("notifications-cleared", removed);
95
90
  }
96
91
  /**
97
92
  * Get a copy of the current notifications.
@@ -113,7 +108,7 @@
113
108
  * @param opts - Optional options
114
109
  */
115
110
  success(title, opts) {
116
- this.show('success', title, opts);
111
+ this.show("success", title, opts);
117
112
  }
118
113
  /**
119
114
  * Error notification shorthand.
@@ -121,7 +116,7 @@
121
116
  * @param opts - Optional options
122
117
  */
123
118
  error(title, opts) {
124
- this.show('error', title, opts);
119
+ this.show("error", title, opts);
125
120
  }
126
121
  /**
127
122
  * Warning notification shorthand.
@@ -129,7 +124,7 @@
129
124
  * @param opts - Optional options
130
125
  */
131
126
  warning(title, opts) {
132
- this.show('warning', title, opts);
127
+ this.show("warning", title, opts);
133
128
  }
134
129
  /**
135
130
  * Info notification shorthand.
@@ -137,25 +132,25 @@
137
132
  * @param opts - Optional options
138
133
  */
139
134
  info(title, opts) {
140
- this.show('info', title, opts);
135
+ this.show("info", title, opts);
141
136
  }
142
137
  }
143
138
  const notificationManager = new NotificationManager();
144
139
  function createReactiveNotificationStore(manager = notificationManager) {
145
140
  const store = vue.reactive({
146
141
  notifications: manager.getNotifications(),
147
- options: manager.getOptions(),
142
+ options: manager.getOptions()
148
143
  });
149
- manager.on('notification-added', () => {
144
+ manager.on("notification-added", () => {
150
145
  store.notifications = manager.getNotifications();
151
146
  });
152
- manager.on('notification-removed', () => {
147
+ manager.on("notification-removed", () => {
153
148
  store.notifications = manager.getNotifications();
154
149
  });
155
- manager.on('notifications-cleared', () => {
150
+ manager.on("notifications-cleared", () => {
156
151
  store.notifications = manager.getNotifications();
157
152
  });
158
- manager.on('options-changed', () => {
153
+ manager.on("options-changed", () => {
159
154
  store.options = manager.getOptions();
160
155
  });
161
156
  return store;
@@ -172,37 +167,37 @@
172
167
  clear: () => manager.clear(),
173
168
  setDefaults: (opts) => manager.setDefaults(opts),
174
169
  getNotifications: () => manager.getNotifications(),
175
- getOptions: () => manager.getOptions(),
170
+ getOptions: () => manager.getOptions()
176
171
  };
177
172
  }
178
173
  function createVueNotificationPlugin$1(manager = notificationManager) {
179
174
  return {
180
175
  install(app) {
181
176
  app.config.globalProperties.$notificationManager = manager;
182
- app.provide('notificationManager', manager);
183
- },
177
+ app.provide("notificationManager", manager);
178
+ }
184
179
  };
185
180
  }
186
- const _hoisted_1 = ['data-position'];
187
- const _hoisted_2 = { class: 'notification-content' };
188
- const _hoisted_3 = { class: 'notification-title' };
189
- const _hoisted_4 = { class: 'notification-close' };
190
- const _hoisted_5 = ['onClick'];
181
+ const _hoisted_1 = ["data-position"];
182
+ const _hoisted_2 = { class: "notification-content" };
183
+ const _hoisted_3 = { class: "notification-title" };
184
+ const _hoisted_4 = { class: "notification-close" };
185
+ const _hoisted_5 = ["onClick"];
191
186
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
192
- __name: 'NotificationContainer',
187
+ __name: "NotificationContainer",
193
188
  setup(__props) {
194
189
  const isClient = vue.ref(false);
195
- if (typeof window !== 'undefined') {
190
+ if (typeof window !== "undefined") {
196
191
  isClient.value = true;
197
192
  }
198
193
  const groups = vue.computed(() => {
199
194
  const map = {
200
- 'top-left': [],
201
- 'top-center': [],
202
- 'top-right': [],
203
- 'bottom-left': [],
204
- 'bottom-center': [],
205
- 'bottom-right': [],
195
+ "top-left": [],
196
+ "top-center": [],
197
+ "top-right": [],
198
+ "bottom-left": [],
199
+ "bottom-center": [],
200
+ "bottom-right": []
206
201
  };
207
202
  for (const notification of notificationStore.notifications) {
208
203
  map[notification.options.position].push(notification);
@@ -213,120 +208,54 @@
213
208
  notificationManager.remove(id);
214
209
  }
215
210
  return (_ctx, _cache) => {
216
- return isClient.value
217
- ? (vue.openBlock(),
218
- vue.createBlock(
219
- vue.Teleport,
220
- {
221
- key: 0,
222
- to: 'body',
223
- },
224
- [
225
- (vue.openBlock(true),
226
- vue.createElementBlock(
227
- vue.Fragment,
228
- null,
229
- vue.renderList(groups.value, (items, pos) => {
230
- return (
231
- vue.openBlock(),
232
- vue.createBlock(
233
- vue.TransitionGroup,
234
- {
235
- key: pos,
236
- tag: 'div',
237
- name: 'notification',
238
- class: 'notification-list',
239
- 'data-position': pos,
240
- },
241
- {
242
- default: vue.withCtx(() => [
243
- (vue.openBlock(true),
244
- vue.createElementBlock(
245
- vue.Fragment,
246
- null,
247
- vue.renderList(items, (notification) => {
248
- return (
249
- vue.openBlock(),
250
- vue.createElementBlock(
251
- 'article',
252
- {
253
- key: notification.id,
254
- class: vue.normalizeClass([
255
- 'notification',
256
- [
257
- `notification-${notification.type}`,
258
- {
259
- 'notification-auto-close':
260
- notification.options.progress &&
261
- notification.options.autoClose !== false,
262
- },
263
- ],
264
- ]),
265
- 'data-position': pos,
266
- },
267
- [
268
- vue.createElementVNode('div', _hoisted_2, [
269
- vue.createElementVNode(
270
- 'span',
271
- _hoisted_3,
272
- vue.toDisplayString(notification.title),
273
- 1
274
- ),
275
- ]),
276
- notification.options.progress &&
277
- notification.options.autoClose !== false
278
- ? (vue.openBlock(),
279
- vue.createElementBlock(
280
- 'div',
281
- {
282
- key: 0,
283
- class: 'notification-progress',
284
- style: vue.normalizeStyle({
285
- animationDuration:
286
- (notification.options.autoClose || 0) + 'ms',
287
- }),
288
- },
289
- null,
290
- 4
291
- ))
292
- : vue.createCommentVNode('', true),
293
- vue.createElementVNode('div', _hoisted_4, [
294
- vue.createElementVNode(
295
- 'button',
296
- {
297
- type: 'button',
298
- onClick: ($event) =>
299
- removeNotification(notification.id),
300
- 'aria-label': 'Dismiss notification',
301
- },
302
- ' × ',
303
- 8,
304
- _hoisted_5
305
- ),
306
- ]),
307
- ],
308
- 10,
309
- _hoisted_1
310
- )
311
- );
312
- }),
313
- 128
314
- )),
315
- ]),
316
- _: 2,
317
- },
318
- 1032,
319
- ['data-position']
320
- )
321
- );
322
- }),
323
- 128
324
- )),
325
- ]
326
- ))
327
- : vue.createCommentVNode('', true);
211
+ return isClient.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
212
+ key: 0,
213
+ to: "body"
214
+ }, [
215
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(groups.value, (items, pos) => {
216
+ return vue.openBlock(), vue.createBlock(vue.TransitionGroup, {
217
+ key: pos,
218
+ tag: "div",
219
+ name: "notification",
220
+ class: "notification-list",
221
+ "data-position": pos
222
+ }, {
223
+ default: vue.withCtx(() => [
224
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (notification) => {
225
+ return vue.openBlock(), vue.createElementBlock("article", {
226
+ key: notification.id,
227
+ class: vue.normalizeClass(["notification", [
228
+ `notification-${notification.type}`,
229
+ {
230
+ "notification-auto-close": notification.options.progress && notification.options.autoClose !== false
231
+ }
232
+ ]]),
233
+ "data-position": pos
234
+ }, [
235
+ vue.createElementVNode("div", _hoisted_2, [
236
+ vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(notification.title), 1)
237
+ ]),
238
+ notification.options.progress && notification.options.autoClose !== false ? (vue.openBlock(), vue.createElementBlock("div", {
239
+ key: 0,
240
+ class: "notification-progress",
241
+ style: vue.normalizeStyle({ animationDuration: (notification.options.autoClose || 0) + "ms" })
242
+ }, null, 4)) : vue.createCommentVNode("", true),
243
+ vue.createElementVNode("div", _hoisted_4, [
244
+ vue.createElementVNode("button", {
245
+ type: "button",
246
+ onClick: ($event) => removeNotification(notification.id),
247
+ "aria-label": "Dismiss notification"
248
+ }, " × ", 8, _hoisted_5)
249
+ ])
250
+ ], 10, _hoisted_1);
251
+ }), 128))
252
+ ]),
253
+ _: 2
254
+ }, 1032, ["data-position"]);
255
+ }), 128))
256
+ ])) : vue.createCommentVNode("", true);
328
257
  };
329
- },
258
+ }
330
259
  });
331
260
  function useNotification() {
332
261
  return useNotificationManager();
@@ -338,8 +267,8 @@
338
267
  return {
339
268
  install(app) {
340
269
  app.config.globalProperties.$notificationManager = manager;
341
- app.provide('notificationManager', manager);
342
- },
270
+ app.provide("notificationManager", manager);
271
+ }
343
272
  };
344
273
  }
345
274
  exports2.NotificationContainer = _sfc_main;
@@ -350,6 +279,6 @@
350
279
  exports2.notificationStore = notificationStore;
351
280
  exports2.useNotification = useNotification;
352
281
  exports2.useNotificationManager = useNotificationManager;
353
- Object.defineProperty(exports2, Symbol.toStringTag, { value: 'Module' });
282
+ Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
354
283
  });
355
284
  //# sourceMappingURL=index.cjs.map
package/dist/style.css CHANGED
@@ -1,5 +1,3 @@
1
- @import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap);
2
-
3
1
  :root {
4
2
  --notification-info: #385bbb;
5
3
  --notification-info-rgb: 56, 91, 187;
@@ -111,7 +109,6 @@
111
109
  background-color: #fff;
112
110
  border-radius: 8px;
113
111
  border: 2px solid transparent;
114
- font-family: 'Nunito Sans', system-ui, helvetica, sans-serif;
115
112
  font-size: 15px;
116
113
  font-weight: 600;
117
114
  line-height: 1.4;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-notifyr",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Framework-agnostic notification library with Vue, Nuxt, and Inertia support",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",