@youcan/celeste 0.6.30 → 0.6.32

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 (101) hide show
  1. package/dist/celeste.css +483 -264
  2. package/dist/cjs/alert.js +2 -2
  3. package/dist/cjs/chunks/index.js +229 -2
  4. package/dist/cjs/chunks/index2.js +1457 -0
  5. package/dist/cjs/chunks/index3.js +16457 -0
  6. package/dist/cjs/chunks/sonner.js +1154 -0
  7. package/dist/cjs/config.js +136 -0
  8. package/dist/cjs/extra-settings.js +155 -0
  9. package/dist/cjs/index.js +75 -0
  10. package/dist/cjs/label.js +2 -2
  11. package/dist/cjs/link-bubble.js +228 -0
  12. package/dist/cjs/link-button.js +2 -2
  13. package/dist/cjs/rich-editor.js +4996 -0
  14. package/dist/cjs/select-icon.js +2 -2
  15. package/dist/cjs/sonner-alert.js +41 -0
  16. package/dist/cjs/sonner.js +3 -0
  17. package/dist/cjs/text-input-affix.js +2 -2
  18. package/dist/cjs/types.js +1 -0
  19. package/dist/components/index.d.ts +2 -0
  20. package/dist/components/rich-editor/config.d.ts +33 -0
  21. package/dist/components/rich-editor/extra-settings.d.ts +6 -0
  22. package/dist/components/rich-editor/index.d.ts +2 -0
  23. package/dist/components/rich-editor/link-bubble.d.ts +11 -0
  24. package/dist/components/rich-editor/rich-editor.d.ts +55 -0
  25. package/dist/components/rich-editor/types.d.ts +19 -0
  26. package/dist/components/sonner/index.d.ts +4 -0
  27. package/dist/components/sonner/sonner-alert.d.ts +13 -0
  28. package/dist/components/sonner/sonner.d.ts +5 -0
  29. package/dist/es/alert.js +2 -2
  30. package/dist/es/checkbox-label.js +1 -1
  31. package/dist/es/chunks/index.js +277 -50
  32. package/dist/es/chunks/index2.js +1457 -0
  33. package/dist/es/chunks/index3.js +16458 -0
  34. package/dist/es/chunks/sonner.js +1155 -0
  35. package/dist/es/combobox-group.js +1 -1
  36. package/dist/es/combobox-input.js +1 -1
  37. package/dist/es/combobox-item.js +1 -1
  38. package/dist/es/combobox-list.js +1 -1
  39. package/dist/es/combobox-root.js +1 -1
  40. package/dist/es/combobox-separator.js +1 -1
  41. package/dist/es/combobox-trigger.js +1 -1
  42. package/dist/es/command-group.js +1 -1
  43. package/dist/es/command-input.js +1 -1
  44. package/dist/es/command-item.js +1 -1
  45. package/dist/es/command-list.js +1 -1
  46. package/dist/es/command-root.js +1 -1
  47. package/dist/es/command-separator.js +1 -1
  48. package/dist/es/config.js +136 -0
  49. package/dist/es/dropdown-menu-group.js +1 -1
  50. package/dist/es/dropdown-menu-item.js +1 -1
  51. package/dist/es/dropdown-menu-label.js +1 -1
  52. package/dist/es/dropdown-menu-separator.js +1 -1
  53. package/dist/es/dropdown-menu-trigger.js +1 -1
  54. package/dist/es/dropdown-menu.js +1 -1
  55. package/dist/es/dropdown.js +1 -1
  56. package/dist/es/extra-settings.js +156 -0
  57. package/dist/es/index.js +94 -19
  58. package/dist/es/label.js +3 -3
  59. package/dist/es/link-bubble.js +229 -0
  60. package/dist/es/link-button.js +2 -2
  61. package/dist/es/modal-content.js +1 -1
  62. package/dist/es/modal-header.js +1 -1
  63. package/dist/es/popover-content.js +1 -1
  64. package/dist/es/popover-trigger.js +1 -1
  65. package/dist/es/rich-editor.js +4997 -0
  66. package/dist/es/scroll-bar.js +1 -1
  67. package/dist/es/segmented-control-item.js +1 -1
  68. package/dist/es/segmented-control.js +1 -1
  69. package/dist/es/select-content.js +1 -1
  70. package/dist/es/select-icon.js +2 -2
  71. package/dist/es/select-item.js +1 -1
  72. package/dist/es/select-trigger.js +1 -1
  73. package/dist/es/select-value.js +1 -1
  74. package/dist/es/sonner-alert.js +42 -0
  75. package/dist/es/sonner.js +4 -0
  76. package/dist/es/tab-menu-content.js +1 -1
  77. package/dist/es/tab-menu-item.js +1 -1
  78. package/dist/es/tab-menu-list.js +1 -1
  79. package/dist/es/tab-menu.js +1 -1
  80. package/dist/es/text-input-affix.js +2 -2
  81. package/dist/es/tooltip.js +1 -1
  82. package/dist/es/types.js +1 -0
  83. package/dist/index.d.ts +1 -0
  84. package/dist/utils/index.d.ts +3 -0
  85. package/dist/utils/sonner.d.ts +19 -0
  86. package/package.json +15 -4
  87. package/src/components/index.ts +2 -0
  88. package/src/components/rich-editor/config.ts +150 -0
  89. package/src/components/rich-editor/extra-settings.vue +151 -0
  90. package/src/components/rich-editor/index.ts +2 -0
  91. package/src/components/rich-editor/link-bubble.vue +288 -0
  92. package/src/components/rich-editor/rich-editor.vue +428 -0
  93. package/src/components/rich-editor/stories/rich-editor.stories.ts +87 -0
  94. package/src/components/rich-editor/types.ts +21 -0
  95. package/src/components/sonner/index.ts +5 -0
  96. package/src/components/sonner/sonner-alert.vue +54 -0
  97. package/src/components/sonner/sonner.vue +13 -0
  98. package/src/components/sonner/stories/sonner.stories.ts +194 -0
  99. package/src/index.ts +1 -0
  100. package/src/utils/index.ts +3 -0
  101. package/src/utils/sonner.ts +72 -0
@@ -0,0 +1,1155 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
+ import { defineComponent, useAttrs, ref, computed, watchEffect, nextTick, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, unref, renderList, mergeProps, createBlock, normalizeClass, normalizeStyle, withCtx, renderSlot, createVNode, isVNode, onMounted, onBeforeUnmount, watch, resolveDynamicComponent, normalizeProps, createTextVNode, toDisplayString, guardReactiveProps } from "vue";
5
+ let toastsCounter = 1;
6
+ var Observer = class {
7
+ constructor() {
8
+ __publicField(this, "subscribers");
9
+ __publicField(this, "toasts");
10
+ __publicField(this, "dismissedToasts");
11
+ __publicField(this, "subscribe", (subscriber) => {
12
+ this.subscribers.push(subscriber);
13
+ return () => {
14
+ const index = this.subscribers.indexOf(subscriber);
15
+ this.subscribers.splice(index, 1);
16
+ };
17
+ });
18
+ __publicField(this, "publish", (data) => {
19
+ this.subscribers.forEach((subscriber) => subscriber(data));
20
+ });
21
+ __publicField(this, "addToast", (data) => {
22
+ this.publish(data);
23
+ this.toasts = [...this.toasts, data];
24
+ });
25
+ __publicField(this, "create", (data) => {
26
+ var _a;
27
+ const { message, ...rest } = data;
28
+ const id = typeof data.id === "number" || data.id && ((_a = data.id) == null ? void 0 : _a.length) > 0 ? data.id : toastsCounter++;
29
+ const alreadyExists = this.toasts.find((toast$1) => {
30
+ return toast$1.id === id;
31
+ });
32
+ const dismissible = data.dismissible === void 0 ? true : data.dismissible;
33
+ if (this.dismissedToasts.has(id)) this.dismissedToasts.delete(id);
34
+ if (alreadyExists) this.toasts = this.toasts.map((toast$1) => {
35
+ if (toast$1.id === id) {
36
+ this.publish({
37
+ ...toast$1,
38
+ ...data,
39
+ id,
40
+ title: message
41
+ });
42
+ return {
43
+ ...toast$1,
44
+ ...data,
45
+ id,
46
+ dismissible,
47
+ title: message
48
+ };
49
+ }
50
+ return toast$1;
51
+ });
52
+ else this.addToast({
53
+ title: message,
54
+ ...rest,
55
+ dismissible,
56
+ id
57
+ });
58
+ return id;
59
+ });
60
+ __publicField(this, "dismiss", (id) => {
61
+ if (id) {
62
+ this.dismissedToasts.add(id);
63
+ requestAnimationFrame(() => this.subscribers.forEach((subscriber) => subscriber({
64
+ id,
65
+ dismiss: true
66
+ })));
67
+ } else this.toasts.forEach((toast$1) => {
68
+ this.subscribers.forEach((subscriber) => subscriber({
69
+ id: toast$1.id,
70
+ dismiss: true
71
+ }));
72
+ });
73
+ return id;
74
+ });
75
+ __publicField(this, "message", (message, data) => {
76
+ return this.create({
77
+ ...data,
78
+ message,
79
+ type: "default"
80
+ });
81
+ });
82
+ __publicField(this, "error", (message, data) => {
83
+ return this.create({
84
+ ...data,
85
+ type: "error",
86
+ message
87
+ });
88
+ });
89
+ __publicField(this, "success", (message, data) => {
90
+ return this.create({
91
+ ...data,
92
+ type: "success",
93
+ message
94
+ });
95
+ });
96
+ __publicField(this, "info", (message, data) => {
97
+ return this.create({
98
+ ...data,
99
+ type: "info",
100
+ message
101
+ });
102
+ });
103
+ __publicField(this, "warning", (message, data) => {
104
+ return this.create({
105
+ ...data,
106
+ type: "warning",
107
+ message
108
+ });
109
+ });
110
+ __publicField(this, "loading", (message, data) => {
111
+ return this.create({
112
+ ...data,
113
+ type: "loading",
114
+ message
115
+ });
116
+ });
117
+ __publicField(this, "promise", (promise, data) => {
118
+ if (!data) return;
119
+ let id;
120
+ if (data.loading !== void 0) id = this.create({
121
+ ...data,
122
+ promise,
123
+ type: "loading",
124
+ message: data.loading,
125
+ description: typeof data.description !== "function" ? data.description : void 0
126
+ });
127
+ const p = Promise.resolve(promise instanceof Function ? promise() : promise);
128
+ let shouldDismiss = id !== void 0;
129
+ let result;
130
+ const originalPromise = p.then(async (response) => {
131
+ result = ["resolve", response];
132
+ const isVueComponent = isVNode(response);
133
+ if (isVueComponent) {
134
+ shouldDismiss = false;
135
+ this.create({
136
+ id,
137
+ type: "default",
138
+ message: response
139
+ });
140
+ } else if (isHttpResponse(response) && !response.ok) {
141
+ shouldDismiss = false;
142
+ const promiseData = typeof data.error === "function" ? await data.error(`HTTP error! status: ${response.status}`) : data.error;
143
+ const description = typeof data.description === "function" ? await data.description(`HTTP error! status: ${response.status}`) : data.description;
144
+ const isExtendedResult = typeof promiseData === "object" && !isVNode(promiseData);
145
+ const toastSettings = isExtendedResult ? promiseData : {
146
+ message: promiseData || "",
147
+ id: id || ""
148
+ };
149
+ this.create({
150
+ id,
151
+ type: "error",
152
+ description,
153
+ ...toastSettings
154
+ });
155
+ } else if (response instanceof Error) {
156
+ shouldDismiss = false;
157
+ const promiseData = typeof data.error === "function" ? await data.error(response) : data.error;
158
+ const description = typeof data.description === "function" ? await data.description(response) : data.description;
159
+ const isExtendedResult = typeof promiseData === "object" && !isVNode(promiseData);
160
+ const toastSettings = isExtendedResult ? promiseData : {
161
+ message: promiseData || "",
162
+ id: id || ""
163
+ };
164
+ this.create({
165
+ id,
166
+ type: "error",
167
+ description,
168
+ ...toastSettings
169
+ });
170
+ } else if (data.success !== void 0) {
171
+ shouldDismiss = false;
172
+ const promiseData = typeof data.success === "function" ? await data.success(response) : data.success;
173
+ const description = typeof data.description === "function" ? await data.description(response) : data.description;
174
+ const isExtendedResult = typeof promiseData === "object" && !isVNode(promiseData);
175
+ const toastSettings = isExtendedResult ? promiseData : {
176
+ message: promiseData || "",
177
+ id: id || ""
178
+ };
179
+ this.create({
180
+ id,
181
+ type: "success",
182
+ description,
183
+ ...toastSettings
184
+ });
185
+ }
186
+ }).catch(async (error) => {
187
+ result = ["reject", error];
188
+ if (data.error !== void 0) {
189
+ shouldDismiss = false;
190
+ const promiseData = typeof data.error === "function" ? await data.error(error) : data.error;
191
+ const description = typeof data.description === "function" ? await data.description(error) : data.description;
192
+ const isExtendedResult = typeof promiseData === "object" && !isVNode(promiseData);
193
+ const toastSettings = isExtendedResult ? promiseData : {
194
+ message: promiseData || "",
195
+ id: id || ""
196
+ };
197
+ this.create({
198
+ id,
199
+ type: "error",
200
+ description,
201
+ ...toastSettings
202
+ });
203
+ }
204
+ }).finally(() => {
205
+ var _a;
206
+ if (shouldDismiss) {
207
+ this.dismiss(id);
208
+ id = void 0;
209
+ }
210
+ (_a = data.finally) == null ? void 0 : _a.call(data);
211
+ });
212
+ const unwrap = () => new Promise((resolve, reject) => originalPromise.then(() => result[0] === "reject" ? reject(result[1]) : resolve(result[1])).catch(reject));
213
+ if (typeof id !== "string" && typeof id !== "number") return { unwrap };
214
+ else return Object.assign(id, { unwrap });
215
+ });
216
+ __publicField(this, "custom", (component, data) => {
217
+ const id = (data == null ? void 0 : data.id) || toastsCounter++;
218
+ this.publish({
219
+ component,
220
+ id,
221
+ ...data
222
+ });
223
+ return id;
224
+ });
225
+ __publicField(this, "getActiveToasts", () => {
226
+ return this.toasts.filter((toast$1) => !this.dismissedToasts.has(toast$1.id));
227
+ });
228
+ this.subscribers = [];
229
+ this.toasts = [];
230
+ this.dismissedToasts = /* @__PURE__ */ new Set();
231
+ }
232
+ };
233
+ const ToastState = new Observer();
234
+ function toastFunction(message, data) {
235
+ const id = (data == null ? void 0 : data.id) || toastsCounter++;
236
+ ToastState.create({
237
+ message,
238
+ id,
239
+ type: "default",
240
+ ...data
241
+ });
242
+ return id;
243
+ }
244
+ const isHttpResponse = (data) => {
245
+ return data && typeof data === "object" && "ok" in data && typeof data.ok === "boolean" && "status" in data && typeof data.status === "number";
246
+ };
247
+ const basicToast = toastFunction;
248
+ const getHistory = () => ToastState.toasts;
249
+ const getToasts = () => ToastState.getActiveToasts();
250
+ const toast = Object.assign(basicToast, {
251
+ success: ToastState.success,
252
+ info: ToastState.info,
253
+ warning: ToastState.warning,
254
+ error: ToastState.error,
255
+ custom: ToastState.custom,
256
+ message: ToastState.message,
257
+ promise: ToastState.promise,
258
+ dismiss: ToastState.dismiss,
259
+ loading: ToastState.loading
260
+ }, {
261
+ getHistory,
262
+ getToasts
263
+ });
264
+ function isAction(action) {
265
+ return action.label !== void 0;
266
+ }
267
+ const VISIBLE_TOASTS_AMOUNT = 3;
268
+ const VIEWPORT_OFFSET = "24px";
269
+ const MOBILE_VIEWPORT_OFFSET = "16px";
270
+ const TOAST_LIFETIME = 4e3;
271
+ const TOAST_WIDTH = 356;
272
+ const GAP = 14;
273
+ const SWIPE_THRESHOLD = 45;
274
+ const TIME_BEFORE_UNMOUNT = 200;
275
+ function useIsDocumentHidden() {
276
+ const isDocumentHidden = ref(false);
277
+ watchEffect(() => {
278
+ const callback = () => {
279
+ isDocumentHidden.value = document.hidden;
280
+ };
281
+ document.addEventListener("visibilitychange", callback);
282
+ return () => window.removeEventListener("visibilitychange", callback);
283
+ });
284
+ return { isDocumentHidden };
285
+ }
286
+ function cn(...classes) {
287
+ return classes.filter(Boolean).join(" ");
288
+ }
289
+ function getDefaultSwipeDirections(position) {
290
+ const [y, x] = position.split("-");
291
+ const directions = [];
292
+ if (y) directions.push(y);
293
+ if (x) directions.push(x);
294
+ return directions;
295
+ }
296
+ function assignOffset(defaultOffset, mobileOffset) {
297
+ const styles = {};
298
+ [defaultOffset, mobileOffset].forEach((offset, index) => {
299
+ const isMobile = index === 1;
300
+ const prefix = isMobile ? "--mobile-offset" : "--offset";
301
+ const defaultValue = isMobile ? MOBILE_VIEWPORT_OFFSET : VIEWPORT_OFFSET;
302
+ function assignAll(offset$1) {
303
+ [
304
+ "top",
305
+ "right",
306
+ "bottom",
307
+ "left"
308
+ ].forEach((key) => {
309
+ styles[`${prefix}-${key}`] = typeof offset$1 === "number" ? `${offset$1}px` : offset$1;
310
+ });
311
+ }
312
+ if (typeof offset === "number" || typeof offset === "string") assignAll(offset);
313
+ else if (typeof offset === "object") [
314
+ "top",
315
+ "right",
316
+ "bottom",
317
+ "left"
318
+ ].forEach((key) => {
319
+ if (offset[key] === void 0) styles[`${prefix}-${key}`] = defaultValue;
320
+ else styles[`${prefix}-${key}`] = typeof offset[key] === "number" ? `${offset[key]}px` : offset[key];
321
+ });
322
+ else assignAll(defaultValue);
323
+ });
324
+ return styles;
325
+ }
326
+ const _hoisted_1$7 = [
327
+ "data-rich-colors",
328
+ "data-styled",
329
+ "data-mounted",
330
+ "data-promise",
331
+ "data-swiped",
332
+ "data-removed",
333
+ "data-visible",
334
+ "data-y-position",
335
+ "data-x-position",
336
+ "data-index",
337
+ "data-front",
338
+ "data-swiping",
339
+ "data-dismissible",
340
+ "data-type",
341
+ "data-invert",
342
+ "data-swipe-out",
343
+ "data-swipe-direction",
344
+ "data-expanded"
345
+ ];
346
+ const _hoisted_2$2 = ["aria-label", "data-disabled"];
347
+ var Toast_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
348
+ __name: "Toast",
349
+ props: {
350
+ toast: {},
351
+ toasts: {},
352
+ index: {},
353
+ swipeDirections: {},
354
+ expanded: { type: Boolean },
355
+ invert: { type: Boolean },
356
+ heights: {},
357
+ gap: {},
358
+ position: {},
359
+ visibleToasts: {},
360
+ expandByDefault: { type: Boolean },
361
+ closeButton: { type: Boolean },
362
+ interacting: { type: Boolean },
363
+ style: {},
364
+ cancelButtonStyle: {},
365
+ actionButtonStyle: {},
366
+ duration: {},
367
+ class: {},
368
+ unstyled: { type: Boolean },
369
+ descriptionClass: {},
370
+ loadingIcon: {},
371
+ classes: {},
372
+ icons: {},
373
+ closeButtonAriaLabel: {},
374
+ defaultRichColors: { type: Boolean }
375
+ },
376
+ emits: [
377
+ "update:heights",
378
+ "update:height",
379
+ "removeToast"
380
+ ],
381
+ setup(__props, { emit: __emit }) {
382
+ const props = __props;
383
+ const emit = __emit;
384
+ const swipeDirection = ref(null);
385
+ const swipeOutDirection = ref(null);
386
+ const mounted = ref(false);
387
+ const removed = ref(false);
388
+ const swiping = ref(false);
389
+ const swipeOut = ref(false);
390
+ const swiped = ref(false);
391
+ const offsetBeforeRemove = ref(0);
392
+ const initialHeight = ref(0);
393
+ const remainingTime = ref(props.toast.duration || props.duration || TOAST_LIFETIME);
394
+ const dragStartTime = ref(null);
395
+ const toastRef = ref(null);
396
+ const isFront = computed(() => props.index === 0);
397
+ const isVisible = computed(() => props.index + 1 <= props.visibleToasts);
398
+ const toastType = computed(() => props.toast.type);
399
+ const dismissible = computed(() => props.toast.dismissible !== false);
400
+ const toastClass = computed(() => props.toast.class || "");
401
+ const toastDescriptionClass = computed(() => props.descriptionClass || "");
402
+ const heightIndex = computed(() => {
403
+ const currentPosition = props.toast.position || props.position;
404
+ const samePositionHeights = props.heights.filter((h) => h.position === currentPosition);
405
+ const index = samePositionHeights.findIndex((height) => height.toastId === props.toast.id);
406
+ return index >= 0 ? index : 0;
407
+ });
408
+ const toastsHeightBefore = computed(() => {
409
+ const currentPosition = props.toast.position || props.position;
410
+ const samePositionHeights = props.heights.filter((h) => h.position === currentPosition);
411
+ return samePositionHeights.reduce((prev, curr, reducerIndex) => {
412
+ if (reducerIndex >= heightIndex.value) return prev;
413
+ return prev + curr.height;
414
+ }, 0);
415
+ });
416
+ const offset = computed(() => heightIndex.value * props.gap + toastsHeightBefore.value || 0);
417
+ const closeButton = computed(() => props.toast.closeButton ?? props.closeButton);
418
+ const duration = computed(() => props.toast.duration || props.duration || TOAST_LIFETIME);
419
+ const closeTimerStartTimeRef = ref(0);
420
+ const lastCloseTimerStartTimeRef = ref(0);
421
+ const pointerStartRef = ref(null);
422
+ const coords = computed(() => props.position.split("-"));
423
+ const y = computed(() => coords.value[0]);
424
+ const x = computed(() => coords.value[1]);
425
+ const isStringOfTitle = computed(() => typeof props.toast.title !== "string");
426
+ const isStringOfDescription = computed(() => typeof props.toast.description !== "string");
427
+ const { isDocumentHidden } = useIsDocumentHidden();
428
+ const disabled = computed(() => toastType.value && toastType.value === "loading");
429
+ onMounted(() => {
430
+ mounted.value = true;
431
+ remainingTime.value = duration.value;
432
+ });
433
+ watchEffect(async () => {
434
+ if (!mounted.value || !toastRef.value) return;
435
+ await nextTick();
436
+ const toastNode = toastRef.value;
437
+ const originalHeight = toastNode.style.height;
438
+ toastNode.style.height = "auto";
439
+ const newHeight = toastNode.getBoundingClientRect().height;
440
+ toastNode.style.height = originalHeight;
441
+ initialHeight.value = newHeight;
442
+ emit("update:height", {
443
+ toastId: props.toast.id,
444
+ height: newHeight,
445
+ position: props.toast.position || props.position
446
+ });
447
+ });
448
+ function deleteToast() {
449
+ removed.value = true;
450
+ offsetBeforeRemove.value = offset.value;
451
+ setTimeout(() => {
452
+ emit("removeToast", props.toast);
453
+ }, TIME_BEFORE_UNMOUNT);
454
+ }
455
+ function handleCloseToast() {
456
+ var _a, _b;
457
+ if (disabled.value || !dismissible.value) return {};
458
+ deleteToast();
459
+ (_b = (_a = props.toast).onDismiss) == null ? void 0 : _b.call(_a, props.toast);
460
+ }
461
+ function onPointerDown(event) {
462
+ if (disabled.value || !dismissible.value) return;
463
+ dragStartTime.value = /* @__PURE__ */ new Date();
464
+ offsetBeforeRemove.value = offset.value;
465
+ event.target.setPointerCapture(event.pointerId);
466
+ if (event.target.tagName === "BUTTON") return;
467
+ swiping.value = true;
468
+ pointerStartRef.value = {
469
+ x: event.clientX,
470
+ y: event.clientY
471
+ };
472
+ }
473
+ function onPointerUp() {
474
+ var _a, _b, _c, _d, _e, _f, _g;
475
+ if (swipeOut.value || !dismissible.value) return;
476
+ pointerStartRef.value = null;
477
+ const swipeAmountX = Number(((_a = toastRef.value) == null ? void 0 : _a.style.getPropertyValue("--swipe-amount-x").replace("px", "")) || 0);
478
+ const swipeAmountY = Number(((_b = toastRef.value) == null ? void 0 : _b.style.getPropertyValue("--swipe-amount-y").replace("px", "")) || 0);
479
+ const timeTaken = (/* @__PURE__ */ new Date()).getTime() - (((_c = dragStartTime.value) == null ? void 0 : _c.getTime()) || 0);
480
+ const swipeAmount = swipeDirection.value === "x" ? swipeAmountX : swipeAmountY;
481
+ const velocity = Math.abs(swipeAmount) / timeTaken;
482
+ if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
483
+ offsetBeforeRemove.value = offset.value;
484
+ (_e = (_d = props.toast).onDismiss) == null ? void 0 : _e.call(_d, props.toast);
485
+ if (swipeDirection.value === "x") swipeOutDirection.value = swipeAmountX > 0 ? "right" : "left";
486
+ else swipeOutDirection.value = swipeAmountY > 0 ? "down" : "up";
487
+ deleteToast();
488
+ swipeOut.value = true;
489
+ return;
490
+ } else {
491
+ (_f = toastRef.value) == null ? void 0 : _f.style.setProperty("--swipe-amount-x", `0px`);
492
+ (_g = toastRef.value) == null ? void 0 : _g.style.setProperty("--swipe-amount-y", `0px`);
493
+ }
494
+ swiped.value = false;
495
+ swiping.value = false;
496
+ swipeDirection.value = null;
497
+ }
498
+ function onPointerMove(event) {
499
+ var _a, _b, _c, _d;
500
+ if (!pointerStartRef.value || !dismissible.value) return;
501
+ const isHighlighted = ((_b = (_a = window == null ? void 0 : window.getSelection()) == null ? void 0 : _a.toString()) == null ? void 0 : _b.length) ?? false;
502
+ if (isHighlighted) return;
503
+ const yDelta = event.clientY - pointerStartRef.value.y;
504
+ const xDelta = event.clientX - pointerStartRef.value.x;
505
+ const swipeDirections = props.swipeDirections ?? getDefaultSwipeDirections(props.position);
506
+ if (!swipeDirection.value && (Math.abs(xDelta) > 1 || Math.abs(yDelta) > 1)) swipeDirection.value = Math.abs(xDelta) > Math.abs(yDelta) ? "x" : "y";
507
+ let swipeAmount = {
508
+ x: 0,
509
+ y: 0
510
+ };
511
+ const getDampening = (delta) => {
512
+ const factor = Math.abs(delta) / 20;
513
+ return 1 / (1.5 + factor);
514
+ };
515
+ if (swipeDirection.value === "y") {
516
+ if (swipeDirections.includes("top") || swipeDirections.includes("bottom")) if (swipeDirections.includes("top") && yDelta < 0 || swipeDirections.includes("bottom") && yDelta > 0) swipeAmount.y = yDelta;
517
+ else {
518
+ const dampenedDelta = yDelta * getDampening(yDelta);
519
+ swipeAmount.y = Math.abs(dampenedDelta) < Math.abs(yDelta) ? dampenedDelta : yDelta;
520
+ }
521
+ } else if (swipeDirection.value === "x") {
522
+ if (swipeDirections.includes("left") || swipeDirections.includes("right")) if (swipeDirections.includes("left") && xDelta < 0 || swipeDirections.includes("right") && xDelta > 0) swipeAmount.x = xDelta;
523
+ else {
524
+ const dampenedDelta = xDelta * getDampening(xDelta);
525
+ swipeAmount.x = Math.abs(dampenedDelta) < Math.abs(xDelta) ? dampenedDelta : xDelta;
526
+ }
527
+ }
528
+ if (Math.abs(swipeAmount.x) > 0 || Math.abs(swipeAmount.y) > 0) swiped.value = true;
529
+ (_c = toastRef.value) == null ? void 0 : _c.style.setProperty("--swipe-amount-x", `${swipeAmount.x}px`);
530
+ (_d = toastRef.value) == null ? void 0 : _d.style.setProperty("--swipe-amount-y", `${swipeAmount.y}px`);
531
+ }
532
+ onMounted(() => {
533
+ mounted.value = true;
534
+ if (!toastRef.value) return;
535
+ const height = toastRef.value.getBoundingClientRect().height;
536
+ initialHeight.value = height;
537
+ const newHeights = [{
538
+ toastId: props.toast.id,
539
+ height,
540
+ position: props.toast.position
541
+ }, ...props.heights];
542
+ emit("update:heights", newHeights);
543
+ });
544
+ onBeforeUnmount(() => {
545
+ if (toastRef.value) emit("removeToast", props.toast);
546
+ });
547
+ watchEffect((onInvalidate) => {
548
+ if (props.toast.promise && toastType.value === "loading" || props.toast.duration === Infinity || props.toast.type === "loading") return;
549
+ let timeoutId;
550
+ const pauseTimer = () => {
551
+ if (lastCloseTimerStartTimeRef.value < closeTimerStartTimeRef.value) {
552
+ const elapsedTime = (/* @__PURE__ */ new Date()).getTime() - closeTimerStartTimeRef.value;
553
+ remainingTime.value = remainingTime.value - elapsedTime;
554
+ }
555
+ lastCloseTimerStartTimeRef.value = (/* @__PURE__ */ new Date()).getTime();
556
+ };
557
+ const startTimer = () => {
558
+ if (remainingTime.value === Infinity) return;
559
+ closeTimerStartTimeRef.value = (/* @__PURE__ */ new Date()).getTime();
560
+ timeoutId = setTimeout(() => {
561
+ var _a, _b;
562
+ (_b = (_a = props.toast).onAutoClose) == null ? void 0 : _b.call(_a, props.toast);
563
+ deleteToast();
564
+ }, remainingTime.value);
565
+ };
566
+ if (props.expanded || props.interacting || isDocumentHidden.value) pauseTimer();
567
+ else startTimer();
568
+ onInvalidate(() => {
569
+ clearTimeout(timeoutId);
570
+ });
571
+ });
572
+ watch(() => props.toast.delete, (value) => {
573
+ if (value !== void 0 && value) deleteToast();
574
+ }, { deep: true });
575
+ function handleDragEnd() {
576
+ swiping.value = false;
577
+ swipeDirection.value = null;
578
+ pointerStartRef.value = null;
579
+ }
580
+ return (_ctx, _cache) => {
581
+ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
582
+ return openBlock(), createElementBlock("li", {
583
+ tabindex: "0",
584
+ ref_key: "toastRef",
585
+ ref: toastRef,
586
+ class: normalizeClass(unref(cn)(props.class, toastClass.value, (_a = _ctx.classes) == null ? void 0 : _a.toast, (_b = _ctx.toast.classes) == null ? void 0 : _b.toast, (_c = _ctx.classes) == null ? void 0 : _c[toastType.value], (_e = (_d = _ctx.toast) == null ? void 0 : _d.classes) == null ? void 0 : _e[toastType.value])),
587
+ "data-sonner-toast": "",
588
+ "data-rich-colors": _ctx.toast.richColors ?? _ctx.defaultRichColors,
589
+ "data-styled": !Boolean(_ctx.toast.component || ((_f = _ctx.toast) == null ? void 0 : _f.unstyled) || _ctx.unstyled),
590
+ "data-mounted": mounted.value,
591
+ "data-promise": Boolean(_ctx.toast.promise),
592
+ "data-swiped": swiped.value,
593
+ "data-removed": removed.value,
594
+ "data-visible": isVisible.value,
595
+ "data-y-position": y.value,
596
+ "data-x-position": x.value,
597
+ "data-index": _ctx.index,
598
+ "data-front": isFront.value,
599
+ "data-swiping": swiping.value,
600
+ "data-dismissible": dismissible.value,
601
+ "data-type": toastType.value,
602
+ "data-invert": _ctx.toast.invert || _ctx.invert,
603
+ "data-swipe-out": swipeOut.value,
604
+ "data-swipe-direction": swipeOutDirection.value,
605
+ "data-expanded": Boolean(_ctx.expanded || _ctx.expandByDefault && mounted.value),
606
+ style: normalizeStyle({
607
+ "--index": _ctx.index,
608
+ "--toasts-before": _ctx.index,
609
+ "--z-index": _ctx.toasts.length - _ctx.index,
610
+ "--offset": `${removed.value ? offsetBeforeRemove.value : offset.value}px`,
611
+ "--initial-height": _ctx.expandByDefault ? "auto" : `${initialHeight.value}px`,
612
+ ..._ctx.style,
613
+ ...props.toast.style
614
+ }),
615
+ onDragend: handleDragEnd,
616
+ onPointerdown: onPointerDown,
617
+ onPointerup: onPointerUp,
618
+ onPointermove: onPointerMove
619
+ }, [closeButton.value && !_ctx.toast.component && toastType.value !== "loading" ? (openBlock(), createElementBlock("button", {
620
+ key: 0,
621
+ "aria-label": _ctx.closeButtonAriaLabel || "Close toast",
622
+ "data-disabled": disabled.value,
623
+ "data-close-button": "true",
624
+ class: normalizeClass(unref(cn)((_g = _ctx.classes) == null ? void 0 : _g.closeButton, (_i = (_h = _ctx.toast) == null ? void 0 : _h.classes) == null ? void 0 : _i.closeButton)),
625
+ onClick: handleCloseToast
626
+ }, [((_j = _ctx.icons) == null ? void 0 : _j.close) ? (openBlock(), createBlock(resolveDynamicComponent((_k = _ctx.icons) == null ? void 0 : _k.close), { key: 0 })) : renderSlot(_ctx.$slots, "close-icon", { key: 1 })], 10, _hoisted_2$2)) : createCommentVNode("v-if", true), _ctx.toast.component ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.toast.component), mergeProps({ key: 1 }, _ctx.toast.componentProps, { onCloseToast: handleCloseToast }), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
627
+ toastType.value !== "default" || _ctx.toast.icon || _ctx.toast.promise ? (openBlock(), createElementBlock("div", {
628
+ key: 0,
629
+ "data-icon": "",
630
+ class: normalizeClass(unref(cn)((_l = _ctx.classes) == null ? void 0 : _l.icon, (_n = (_m = _ctx.toast) == null ? void 0 : _m.classes) == null ? void 0 : _n.icon))
631
+ }, [_ctx.toast.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.toast.icon), { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [toastType.value === "loading" ? renderSlot(_ctx.$slots, "loading-icon", { key: 0 }) : toastType.value === "success" ? renderSlot(_ctx.$slots, "success-icon", { key: 1 }) : toastType.value === "error" ? renderSlot(_ctx.$slots, "error-icon", { key: 2 }) : toastType.value === "warning" ? renderSlot(_ctx.$slots, "warning-icon", { key: 3 }) : toastType.value === "info" ? renderSlot(_ctx.$slots, "info-icon", { key: 4 }) : createCommentVNode("v-if", true)], 64))], 2)) : createCommentVNode("v-if", true),
632
+ createElementVNode("div", {
633
+ "data-content": "",
634
+ class: normalizeClass(unref(cn)((_o = _ctx.classes) == null ? void 0 : _o.content, (_q = (_p = _ctx.toast) == null ? void 0 : _p.classes) == null ? void 0 : _q.content))
635
+ }, [createElementVNode("div", {
636
+ "data-title": "",
637
+ class: normalizeClass(unref(cn)((_r = _ctx.classes) == null ? void 0 : _r.title, (_s = _ctx.toast.classes) == null ? void 0 : _s.title))
638
+ }, [isStringOfTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.toast.title), normalizeProps(mergeProps({ key: 0 }, _ctx.toast.componentProps)), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(_ctx.toast.title), 1)], 64))], 2), _ctx.toast.description ? (openBlock(), createElementBlock("div", {
639
+ key: 0,
640
+ "data-description": "",
641
+ class: normalizeClass(unref(cn)(_ctx.descriptionClass, toastDescriptionClass.value, (_t = _ctx.classes) == null ? void 0 : _t.description, (_u = _ctx.toast.classes) == null ? void 0 : _u.description))
642
+ }, [isStringOfDescription.value ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.toast.description), normalizeProps(mergeProps({ key: 0 }, _ctx.toast.componentProps)), null, 16)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(_ctx.toast.description), 1)], 64))], 2)) : createCommentVNode("v-if", true)], 2),
643
+ _ctx.toast.cancel ? (openBlock(), createElementBlock("button", {
644
+ key: 1,
645
+ style: normalizeStyle(_ctx.toast.cancelButtonStyle || _ctx.cancelButtonStyle),
646
+ class: normalizeClass(unref(cn)((_v = _ctx.classes) == null ? void 0 : _v.cancelButton, (_w = _ctx.toast.classes) == null ? void 0 : _w.cancelButton)),
647
+ "data-button": "",
648
+ "data-cancel": "",
649
+ onClick: _cache[0] || (_cache[0] = (event) => {
650
+ var _a2, _b2;
651
+ if (!unref(isAction)(_ctx.toast.cancel)) return;
652
+ if (!dismissible.value) return;
653
+ (_b2 = (_a2 = _ctx.toast.cancel).onClick) == null ? void 0 : _b2.call(_a2, event);
654
+ deleteToast();
655
+ })
656
+ }, toDisplayString(unref(isAction)(_ctx.toast.cancel) ? (_x = _ctx.toast.cancel) == null ? void 0 : _x.label : _ctx.toast.cancel), 7)) : createCommentVNode("v-if", true),
657
+ _ctx.toast.action ? (openBlock(), createElementBlock("button", {
658
+ key: 2,
659
+ style: normalizeStyle(_ctx.toast.actionButtonStyle || _ctx.actionButtonStyle),
660
+ class: normalizeClass(unref(cn)((_y = _ctx.classes) == null ? void 0 : _y.actionButton, (_z = _ctx.toast.classes) == null ? void 0 : _z.actionButton)),
661
+ "data-button": "",
662
+ "data-action": "",
663
+ onClick: _cache[1] || (_cache[1] = (event) => {
664
+ var _a2, _b2;
665
+ if (!unref(isAction)(_ctx.toast.action)) return;
666
+ (_b2 = (_a2 = _ctx.toast.action).onClick) == null ? void 0 : _b2.call(_a2, event);
667
+ if (event.defaultPrevented) return;
668
+ deleteToast();
669
+ })
670
+ }, toDisplayString(unref(isAction)(_ctx.toast.action) ? (_A = _ctx.toast.action) == null ? void 0 : _A.label : _ctx.toast.action), 7)) : createCommentVNode("v-if", true)
671
+ ], 64))], 46, _hoisted_1$7);
672
+ };
673
+ }
674
+ });
675
+ var Toast_default = Toast_vue_vue_type_script_setup_true_lang_default;
676
+ var export_helper_default = (sfc, props) => {
677
+ const target = sfc.__vccOpts || sfc;
678
+ for (const [key, val] of props) target[key] = val;
679
+ return target;
680
+ };
681
+ const _sfc_main$4 = {};
682
+ const _hoisted_1$6 = {
683
+ xmlns: "http://www.w3.org/2000/svg",
684
+ width: "12",
685
+ height: "12",
686
+ viewBox: "0 0 24 24",
687
+ fill: "none",
688
+ stroke: "currentColor",
689
+ "stoke-width": "1.5",
690
+ "stroke-linecap": "round",
691
+ "stroke-linejoin": "round"
692
+ };
693
+ function _sfc_render$4(_ctx, _cache) {
694
+ return openBlock(), createElementBlock("svg", _hoisted_1$6, _cache[0] || (_cache[0] = [createElementVNode("line", {
695
+ x1: "18",
696
+ y1: "6",
697
+ x2: "6",
698
+ y2: "18"
699
+ }, null, -1), createElementVNode("line", {
700
+ x1: "6",
701
+ y1: "6",
702
+ x2: "18",
703
+ y2: "18"
704
+ }, null, -1)]));
705
+ }
706
+ var CloseIcon_default = /* @__PURE__ */ export_helper_default(_sfc_main$4, [["render", _sfc_render$4]]);
707
+ const _hoisted_1$5 = ["data-visible"];
708
+ const _hoisted_2$1 = { class: "sonner-spinner" };
709
+ var Loader_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
710
+ __name: "Loader",
711
+ props: { visible: { type: Boolean } },
712
+ setup(__props) {
713
+ const bars = Array(12).fill(0);
714
+ return (_ctx, _cache) => {
715
+ return openBlock(), createElementBlock("div", {
716
+ class: "sonner-loading-wrapper",
717
+ "data-visible": _ctx.visible
718
+ }, [createElementVNode("div", _hoisted_2$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(bars), (bar) => {
719
+ return openBlock(), createElementBlock("div", {
720
+ key: `spinner-bar-${bar}`,
721
+ class: "sonner-loading-bar"
722
+ });
723
+ }), 128))])], 8, _hoisted_1$5);
724
+ };
725
+ }
726
+ });
727
+ var Loader_default = Loader_vue_vue_type_script_setup_true_lang_default;
728
+ const _sfc_main$3 = {};
729
+ const _hoisted_1$4 = {
730
+ xmlns: "http://www.w3.org/2000/svg",
731
+ viewBox: "0 0 20 20",
732
+ fill: "currentColor",
733
+ height: "20",
734
+ width: "20"
735
+ };
736
+ function _sfc_render$3(_ctx, _cache) {
737
+ return openBlock(), createElementBlock("svg", _hoisted_1$4, _cache[0] || (_cache[0] = [createElementVNode("path", {
738
+ "fill-rule": "evenodd",
739
+ d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
740
+ "clip-rule": "evenodd"
741
+ }, null, -1)]));
742
+ }
743
+ var SuccessIcon_default = /* @__PURE__ */ export_helper_default(_sfc_main$3, [["render", _sfc_render$3]]);
744
+ const _sfc_main$2 = {};
745
+ const _hoisted_1$3 = {
746
+ xmlns: "http://www.w3.org/2000/svg",
747
+ viewBox: "0 0 20 20",
748
+ fill: "currentColor",
749
+ height: "20",
750
+ width: "20"
751
+ };
752
+ function _sfc_render$2(_ctx, _cache) {
753
+ return openBlock(), createElementBlock("svg", _hoisted_1$3, _cache[0] || (_cache[0] = [createElementVNode("path", {
754
+ "fill-rule": "evenodd",
755
+ d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
756
+ "clip-rule": "evenodd"
757
+ }, null, -1)]));
758
+ }
759
+ var InfoIcon_default = /* @__PURE__ */ export_helper_default(_sfc_main$2, [["render", _sfc_render$2]]);
760
+ const _sfc_main$1 = {};
761
+ const _hoisted_1$2 = {
762
+ xmlns: "http://www.w3.org/2000/svg",
763
+ viewBox: "0 0 24 24",
764
+ fill: "currentColor",
765
+ height: "20",
766
+ width: "20"
767
+ };
768
+ function _sfc_render$1(_ctx, _cache) {
769
+ return openBlock(), createElementBlock("svg", _hoisted_1$2, _cache[0] || (_cache[0] = [createElementVNode("path", {
770
+ "fill-rule": "evenodd",
771
+ d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
772
+ "clip-rule": "evenodd"
773
+ }, null, -1)]));
774
+ }
775
+ var WarningIcon_default = /* @__PURE__ */ export_helper_default(_sfc_main$1, [["render", _sfc_render$1]]);
776
+ const _sfc_main$5 = {};
777
+ const _hoisted_1$1 = {
778
+ xmlns: "http://www.w3.org/2000/svg",
779
+ viewBox: "0 0 20 20",
780
+ fill: "currentColor",
781
+ height: "20",
782
+ width: "20"
783
+ };
784
+ function _sfc_render(_ctx, _cache) {
785
+ return openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [createElementVNode("path", {
786
+ "fill-rule": "evenodd",
787
+ d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
788
+ "clip-rule": "evenodd"
789
+ }, null, -1)]));
790
+ }
791
+ var ErrorIcon_default = /* @__PURE__ */ export_helper_default(_sfc_main$5, [["render", _sfc_render]]);
792
+ const _hoisted_1 = ["aria-label"];
793
+ const _hoisted_2 = [
794
+ "data-sonner-theme",
795
+ "dir",
796
+ "data-theme",
797
+ "data-rich-colors",
798
+ "data-y-position",
799
+ "data-x-position",
800
+ "data-lifted"
801
+ ];
802
+ const isClient = typeof window !== "undefined" && typeof document !== "undefined";
803
+ function getDocumentDirection() {
804
+ if (typeof window === "undefined") return "ltr";
805
+ if (typeof document === "undefined") return "ltr";
806
+ const dirAttribute = document.documentElement.getAttribute("dir");
807
+ if (dirAttribute === "auto" || !dirAttribute) return window.getComputedStyle(document.documentElement).direction;
808
+ return dirAttribute;
809
+ }
810
+ var Toaster_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
811
+ name: "Toaster",
812
+ inheritAttrs: false,
813
+ __name: "Toaster",
814
+ props: {
815
+ invert: {
816
+ type: Boolean,
817
+ default: false
818
+ },
819
+ theme: { default: "light" },
820
+ position: { default: "bottom-right" },
821
+ hotkey: { default: () => ["altKey", "KeyT"] },
822
+ richColors: {
823
+ type: Boolean,
824
+ default: false
825
+ },
826
+ expand: {
827
+ type: Boolean,
828
+ default: false
829
+ },
830
+ duration: {},
831
+ gap: { default: GAP },
832
+ visibleToasts: { default: VISIBLE_TOASTS_AMOUNT },
833
+ closeButton: {
834
+ type: Boolean,
835
+ default: false
836
+ },
837
+ toastOptions: { default: () => ({}) },
838
+ class: { default: "" },
839
+ style: {},
840
+ offset: { default: VIEWPORT_OFFSET },
841
+ mobileOffset: { default: MOBILE_VIEWPORT_OFFSET },
842
+ dir: { default: "auto" },
843
+ swipeDirections: {},
844
+ icons: {},
845
+ containerAriaLabel: { default: "Notifications" }
846
+ },
847
+ setup(__props) {
848
+ const props = __props;
849
+ const attrs = useAttrs();
850
+ const toasts = ref([]);
851
+ function filteredToasts(pos, index) {
852
+ return toasts.value.filter((toast$1) => !toast$1.position && index === 0 || toast$1.position === pos);
853
+ }
854
+ const possiblePositions = computed(() => {
855
+ const posList = toasts.value.filter((toast$1) => toast$1.position).map((toast$1) => toast$1.position);
856
+ return posList.length > 0 ? Array.from(new Set([props.position].concat(posList))) : [props.position];
857
+ });
858
+ const toastsByPosition = computed(() => {
859
+ const result = {};
860
+ possiblePositions.value.forEach((pos) => {
861
+ result[pos] = toasts.value.filter((t) => t.position === pos);
862
+ });
863
+ return result;
864
+ });
865
+ const heights = ref([]);
866
+ const expanded = ref(false);
867
+ const interacting = ref(false);
868
+ const actualTheme = ref(props.theme !== "system" ? props.theme : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
869
+ const listRef = ref(null);
870
+ const lastFocusedElementRef = ref(null);
871
+ const isFocusWithinRef = ref(false);
872
+ const hotkeyLabel = props.hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
873
+ function removeToast(toastToRemove) {
874
+ var _a;
875
+ if (!((_a = toasts.value.find((toast$1) => toast$1.id === toastToRemove.id)) == null ? void 0 : _a.delete)) ToastState.dismiss(toastToRemove.id);
876
+ toasts.value = toasts.value.filter(({ id }) => id !== toastToRemove.id);
877
+ setTimeout(() => {
878
+ if (!toasts.value.find((t) => t.id === toastToRemove.id)) heights.value = heights.value.filter((h) => h.toastId !== toastToRemove.id);
879
+ }, TIME_BEFORE_UNMOUNT + 50);
880
+ }
881
+ function onBlur(event) {
882
+ var _a, _b;
883
+ if (isFocusWithinRef.value && !((_b = (_a = event.currentTarget) == null ? void 0 : _a.contains) == null ? void 0 : _b.call(_a, event.relatedTarget))) {
884
+ isFocusWithinRef.value = false;
885
+ if (lastFocusedElementRef.value) {
886
+ lastFocusedElementRef.value.focus({ preventScroll: true });
887
+ lastFocusedElementRef.value = null;
888
+ }
889
+ }
890
+ }
891
+ function onFocus(event) {
892
+ const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
893
+ if (isNotDismissible) return;
894
+ if (!isFocusWithinRef.value) {
895
+ isFocusWithinRef.value = true;
896
+ lastFocusedElementRef.value = event.relatedTarget;
897
+ }
898
+ }
899
+ function onPointerDown(event) {
900
+ if (event.target) {
901
+ const isNotDismissible = event.target instanceof HTMLElement && event.target.dataset.dismissible === "false";
902
+ if (isNotDismissible) return;
903
+ }
904
+ interacting.value = true;
905
+ }
906
+ watchEffect((onInvalidate) => {
907
+ const unsubscribe = ToastState.subscribe((toast$1) => {
908
+ if (toast$1.dismiss) {
909
+ requestAnimationFrame(() => {
910
+ toasts.value = toasts.value.map((t) => t.id === toast$1.id ? {
911
+ ...t,
912
+ delete: true
913
+ } : t);
914
+ });
915
+ return;
916
+ }
917
+ nextTick(() => {
918
+ const indexOfExistingToast = toasts.value.findIndex((t) => t.id === toast$1.id);
919
+ if (indexOfExistingToast !== -1) toasts.value = [
920
+ ...toasts.value.slice(0, indexOfExistingToast),
921
+ {
922
+ ...toasts.value[indexOfExistingToast],
923
+ ...toast$1
924
+ },
925
+ ...toasts.value.slice(indexOfExistingToast + 1)
926
+ ];
927
+ else toasts.value = [toast$1, ...toasts.value];
928
+ });
929
+ });
930
+ onInvalidate(unsubscribe);
931
+ });
932
+ watchEffect((onInvalidate) => {
933
+ if (typeof window === "undefined") return;
934
+ if (props.theme !== "system") {
935
+ actualTheme.value = props.theme;
936
+ return;
937
+ }
938
+ const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
939
+ const updateTheme = (matches) => {
940
+ actualTheme.value = matches ? "dark" : "light";
941
+ };
942
+ updateTheme(darkMediaQuery.matches);
943
+ const handler = (event) => {
944
+ updateTheme(event.matches);
945
+ };
946
+ try {
947
+ darkMediaQuery.addEventListener("change", handler);
948
+ } catch {
949
+ darkMediaQuery.addListener(handler);
950
+ }
951
+ onInvalidate(() => {
952
+ try {
953
+ darkMediaQuery.removeEventListener("change", handler);
954
+ } catch {
955
+ darkMediaQuery.removeListener(handler);
956
+ }
957
+ });
958
+ });
959
+ watchEffect(() => {
960
+ if (listRef.value && lastFocusedElementRef.value) {
961
+ lastFocusedElementRef.value.focus({ preventScroll: true });
962
+ lastFocusedElementRef.value = null;
963
+ isFocusWithinRef.value = false;
964
+ }
965
+ });
966
+ watchEffect(() => {
967
+ if (toasts.value.length <= 1) expanded.value = false;
968
+ });
969
+ watchEffect((onInvalidate) => {
970
+ function handleKeyDown(event) {
971
+ const isHotkeyPressed = props.hotkey.every((key) => event[key] || event.code === key);
972
+ const listRefItem = Array.isArray(listRef.value) ? listRef.value[0] : listRef.value;
973
+ if (isHotkeyPressed) {
974
+ expanded.value = true;
975
+ listRefItem == null ? void 0 : listRefItem.focus();
976
+ }
977
+ const isItemActive = document.activeElement === listRef.value || (listRefItem == null ? void 0 : listRefItem.contains(document.activeElement));
978
+ if (event.code === "Escape" && isItemActive) expanded.value = false;
979
+ }
980
+ if (!isClient) return;
981
+ document.addEventListener("keydown", handleKeyDown);
982
+ onInvalidate(() => {
983
+ document.removeEventListener("keydown", handleKeyDown);
984
+ });
985
+ });
986
+ function handleMouseEnter() {
987
+ expanded.value = true;
988
+ }
989
+ function handleMouseLeave() {
990
+ if (!interacting.value) expanded.value = false;
991
+ }
992
+ function handleDragEnd() {
993
+ expanded.value = false;
994
+ }
995
+ function handlePointerUp() {
996
+ interacting.value = false;
997
+ }
998
+ function updateHeights(h) {
999
+ heights.value = h;
1000
+ }
1001
+ function updateHeight(h) {
1002
+ const index = heights.value.findIndex((item) => item.toastId === h.toastId);
1003
+ if (index !== -1) heights.value[index] = h;
1004
+ else {
1005
+ const samePositionIndex = heights.value.findIndex((item) => item.position === h.position);
1006
+ if (samePositionIndex !== -1) heights.value.splice(samePositionIndex, 0, h);
1007
+ else heights.value.unshift(h);
1008
+ }
1009
+ }
1010
+ return (_ctx, _cache) => {
1011
+ return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" Remove item from normal navigation flow, only available via hotkey "), createElementVNode("section", {
1012
+ "aria-label": `${_ctx.containerAriaLabel} ${unref(hotkeyLabel)}`,
1013
+ tabIndex: -1,
1014
+ "aria-live": "polite",
1015
+ "aria-relevant": "additions text",
1016
+ "aria-atomic": "false"
1017
+ }, [(openBlock(true), createElementBlock(Fragment, null, renderList(possiblePositions.value, (pos, index) => {
1018
+ var _a;
1019
+ return openBlock(), createElementBlock("ol", mergeProps({
1020
+ key: pos,
1021
+ ref_for: true,
1022
+ ref_key: "listRef",
1023
+ ref: listRef,
1024
+ "data-sonner-toaster": "",
1025
+ "data-sonner-theme": actualTheme.value,
1026
+ class: props.class,
1027
+ dir: _ctx.dir === "auto" ? getDocumentDirection() : _ctx.dir,
1028
+ tabIndex: -1,
1029
+ "data-theme": _ctx.theme,
1030
+ "data-rich-colors": _ctx.richColors,
1031
+ "data-y-position": pos.split("-")[0],
1032
+ "data-x-position": pos.split("-")[1],
1033
+ "data-lifted": expanded.value && toasts.value.length > 1 && !_ctx.expand,
1034
+ style: {
1035
+ "--front-toast-height": `${((_a = heights.value[0]) == null ? void 0 : _a.height) || 0}px`,
1036
+ "--width": `${unref(TOAST_WIDTH)}px`,
1037
+ "--gap": `${_ctx.gap}px`,
1038
+ ..._ctx.style,
1039
+ ...unref(attrs).style,
1040
+ ...unref(assignOffset)(_ctx.offset, _ctx.mobileOffset)
1041
+ }
1042
+ }, _ctx.$attrs, {
1043
+ onBlur,
1044
+ onFocus,
1045
+ onMouseenter: handleMouseEnter,
1046
+ onMousemove: handleMouseEnter,
1047
+ onMouseleave: handleMouseLeave,
1048
+ onDragend: handleDragEnd,
1049
+ onPointerdown: onPointerDown,
1050
+ onPointerup: handlePointerUp
1051
+ }), [(openBlock(true), createElementBlock(Fragment, null, renderList(filteredToasts(pos, index), (toast$1, idx) => {
1052
+ var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
1053
+ return openBlock(), createBlock(Toast_default, {
1054
+ key: toast$1.id,
1055
+ heights: heights.value,
1056
+ icons: _ctx.icons,
1057
+ index: idx,
1058
+ toast: toast$1,
1059
+ defaultRichColors: _ctx.richColors,
1060
+ duration: ((_a2 = _ctx.toastOptions) == null ? void 0 : _a2.duration) ?? _ctx.duration,
1061
+ class: normalizeClass(((_b = _ctx.toastOptions) == null ? void 0 : _b.class) ?? ""),
1062
+ descriptionClass: (_c = _ctx.toastOptions) == null ? void 0 : _c.descriptionClass,
1063
+ invert: _ctx.invert,
1064
+ visibleToasts: _ctx.visibleToasts,
1065
+ closeButton: ((_d = _ctx.toastOptions) == null ? void 0 : _d.closeButton) ?? _ctx.closeButton,
1066
+ interacting: interacting.value,
1067
+ position: pos,
1068
+ style: normalizeStyle((_e = _ctx.toastOptions) == null ? void 0 : _e.style),
1069
+ unstyled: (_f = _ctx.toastOptions) == null ? void 0 : _f.unstyled,
1070
+ classes: (_g = _ctx.toastOptions) == null ? void 0 : _g.classes,
1071
+ cancelButtonStyle: (_h = _ctx.toastOptions) == null ? void 0 : _h.cancelButtonStyle,
1072
+ actionButtonStyle: (_i = _ctx.toastOptions) == null ? void 0 : _i.actionButtonStyle,
1073
+ "close-button-aria-label": (_j = _ctx.toastOptions) == null ? void 0 : _j.closeButtonAriaLabel,
1074
+ toasts: toastsByPosition.value[pos],
1075
+ expandByDefault: _ctx.expand,
1076
+ gap: _ctx.gap,
1077
+ expanded: expanded.value,
1078
+ swipeDirections: props.swipeDirections,
1079
+ "onUpdate:heights": updateHeights,
1080
+ "onUpdate:height": updateHeight,
1081
+ onRemoveToast: removeToast
1082
+ }, {
1083
+ "close-icon": withCtx(() => [renderSlot(_ctx.$slots, "close-icon", {}, () => [createVNode(CloseIcon_default)])]),
1084
+ "loading-icon": withCtx(() => [renderSlot(_ctx.$slots, "loading-icon", {}, () => [createVNode(Loader_default, { visible: toast$1.type === "loading" }, null, 8, ["visible"])])]),
1085
+ "success-icon": withCtx(() => [renderSlot(_ctx.$slots, "success-icon", {}, () => [createVNode(SuccessIcon_default)])]),
1086
+ "error-icon": withCtx(() => [renderSlot(_ctx.$slots, "error-icon", {}, () => [createVNode(ErrorIcon_default)])]),
1087
+ "warning-icon": withCtx(() => [renderSlot(_ctx.$slots, "warning-icon", {}, () => [createVNode(WarningIcon_default)])]),
1088
+ "info-icon": withCtx(() => [renderSlot(_ctx.$slots, "info-icon", {}, () => [createVNode(InfoIcon_default)])]),
1089
+ _: 2
1090
+ }, 1032, [
1091
+ "heights",
1092
+ "icons",
1093
+ "index",
1094
+ "toast",
1095
+ "defaultRichColors",
1096
+ "duration",
1097
+ "class",
1098
+ "descriptionClass",
1099
+ "invert",
1100
+ "visibleToasts",
1101
+ "closeButton",
1102
+ "interacting",
1103
+ "position",
1104
+ "style",
1105
+ "unstyled",
1106
+ "classes",
1107
+ "cancelButtonStyle",
1108
+ "actionButtonStyle",
1109
+ "close-button-aria-label",
1110
+ "toasts",
1111
+ "expandByDefault",
1112
+ "gap",
1113
+ "expanded",
1114
+ "swipeDirections"
1115
+ ]);
1116
+ }), 128))], 16, _hoisted_2);
1117
+ }), 128))], 8, _hoisted_1)], 2112);
1118
+ };
1119
+ }
1120
+ });
1121
+ var Toaster_default = Toaster_vue_vue_type_script_setup_true_lang_default;
1122
+ const _sfc_main = /* @__PURE__ */ defineComponent({
1123
+ __name: "sonner",
1124
+ props: {
1125
+ invert: { type: Boolean },
1126
+ theme: {},
1127
+ position: {},
1128
+ hotkey: {},
1129
+ richColors: { type: Boolean },
1130
+ expand: { type: Boolean },
1131
+ duration: {},
1132
+ gap: {},
1133
+ visibleToasts: {},
1134
+ closeButton: { type: Boolean },
1135
+ toastOptions: {},
1136
+ class: {},
1137
+ style: {},
1138
+ offset: {},
1139
+ mobileOffset: {},
1140
+ dir: {},
1141
+ swipeDirections: {},
1142
+ icons: {},
1143
+ containerAriaLabel: {}
1144
+ },
1145
+ setup(__props) {
1146
+ const props = __props;
1147
+ return (_ctx, _cache) => {
1148
+ return openBlock(), createBlock(unref(Toaster_default), normalizeProps(guardReactiveProps(props)), null, 16);
1149
+ };
1150
+ }
1151
+ });
1152
+ export {
1153
+ _sfc_main as _,
1154
+ toast as t
1155
+ };