@youcan/celeste 0.6.30 → 0.6.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/celeste.css +293 -74
- package/dist/cjs/alert.js +2 -2
- package/dist/cjs/chunks/index.js +229 -2
- package/dist/cjs/chunks/index2.js +1457 -0
- package/dist/cjs/chunks/index3.js +16457 -0
- package/dist/cjs/chunks/sonner.js +1153 -0
- package/dist/cjs/config.js +136 -0
- package/dist/cjs/extra-settings.js +155 -0
- package/dist/cjs/index.js +9 -0
- package/dist/cjs/label.js +2 -2
- package/dist/cjs/link-bubble.js +228 -0
- package/dist/cjs/link-button.js +2 -2
- package/dist/cjs/rich-editor.js +4996 -0
- package/dist/cjs/select-icon.js +2 -2
- package/dist/cjs/sonner-alert.js +41 -0
- package/dist/cjs/sonner.js +3 -0
- package/dist/cjs/text-input-affix.js +2 -2
- package/dist/cjs/types.js +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/rich-editor/config.d.ts +33 -0
- package/dist/components/rich-editor/extra-settings.d.ts +6 -0
- package/dist/components/rich-editor/index.d.ts +2 -0
- package/dist/components/rich-editor/link-bubble.d.ts +11 -0
- package/dist/components/rich-editor/rich-editor.d.ts +55 -0
- package/dist/components/rich-editor/types.d.ts +19 -0
- package/dist/components/sonner/index.d.ts +4 -0
- package/dist/components/sonner/sonner-alert.d.ts +13 -0
- package/dist/components/sonner/sonner.d.ts +5 -0
- package/dist/es/alert.js +2 -2
- package/dist/es/checkbox-label.js +1 -1
- package/dist/es/chunks/index.js +277 -50
- package/dist/es/chunks/index2.js +1457 -0
- package/dist/es/chunks/index3.js +16458 -0
- package/dist/es/chunks/sonner.js +1154 -0
- package/dist/es/combobox-group.js +1 -1
- package/dist/es/combobox-input.js +1 -1
- package/dist/es/combobox-item.js +1 -1
- package/dist/es/combobox-list.js +1 -1
- package/dist/es/combobox-root.js +1 -1
- package/dist/es/combobox-separator.js +1 -1
- package/dist/es/combobox-trigger.js +1 -1
- package/dist/es/command-group.js +1 -1
- package/dist/es/command-input.js +1 -1
- package/dist/es/command-item.js +1 -1
- package/dist/es/command-list.js +1 -1
- package/dist/es/command-root.js +1 -1
- package/dist/es/command-separator.js +1 -1
- package/dist/es/config.js +136 -0
- package/dist/es/dropdown-menu-group.js +1 -1
- package/dist/es/dropdown-menu-item.js +1 -1
- package/dist/es/dropdown-menu-label.js +1 -1
- package/dist/es/dropdown-menu-separator.js +1 -1
- package/dist/es/dropdown-menu-trigger.js +1 -1
- package/dist/es/dropdown-menu.js +1 -1
- package/dist/es/dropdown.js +1 -1
- package/dist/es/extra-settings.js +156 -0
- package/dist/es/index.js +27 -18
- package/dist/es/label.js +3 -3
- package/dist/es/link-bubble.js +229 -0
- package/dist/es/link-button.js +2 -2
- package/dist/es/modal-content.js +1 -1
- package/dist/es/modal-header.js +1 -1
- package/dist/es/popover-content.js +1 -1
- package/dist/es/popover-trigger.js +1 -1
- package/dist/es/rich-editor.js +4997 -0
- package/dist/es/scroll-bar.js +1 -1
- package/dist/es/segmented-control-item.js +1 -1
- package/dist/es/segmented-control.js +1 -1
- package/dist/es/select-content.js +1 -1
- package/dist/es/select-icon.js +2 -2
- package/dist/es/select-item.js +1 -1
- package/dist/es/select-trigger.js +1 -1
- package/dist/es/select-value.js +1 -1
- package/dist/es/sonner-alert.js +42 -0
- package/dist/es/sonner.js +4 -0
- package/dist/es/tab-menu-content.js +1 -1
- package/dist/es/tab-menu-item.js +1 -1
- package/dist/es/tab-menu-list.js +1 -1
- package/dist/es/tab-menu.js +1 -1
- package/dist/es/text-input-affix.js +2 -2
- package/dist/es/tooltip.js +1 -1
- package/dist/es/types.js +1 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/sonner.d.ts +19 -0
- package/package.json +15 -4
- package/src/components/index.ts +2 -0
- package/src/components/rich-editor/config.ts +150 -0
- package/src/components/rich-editor/extra-settings.vue +151 -0
- package/src/components/rich-editor/index.ts +2 -0
- package/src/components/rich-editor/link-bubble.vue +288 -0
- package/src/components/rich-editor/rich-editor.vue +428 -0
- package/src/components/rich-editor/stories/rich-editor.stories.ts +87 -0
- package/src/components/rich-editor/types.ts +21 -0
- package/src/components/sonner/index.ts +5 -0
- package/src/components/sonner/sonner-alert.vue +54 -0
- package/src/components/sonner/sonner.vue +13 -0
- package/src/components/sonner/stories/sonner.stories.ts +194 -0
- package/src/utils/index.ts +3 -0
- package/src/utils/sonner.ts +72 -0
|
@@ -0,0 +1,1154 @@
|
|
|
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
|
+
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
|
+
};
|