svelora 3.0.15 → 3.0.16
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/components/ConfirmDialog/ConfirmDialog.svelte +167 -0
- package/dist/components/ConfirmDialog/ConfirmDialog.svelte.d.ts +10 -0
- package/dist/components/ConfirmDialog/confirm.d.ts +9 -0
- package/dist/components/ConfirmDialog/confirm.js +24 -0
- package/dist/components/ConfirmDialog/confirm.types.d.ts +22 -0
- package/dist/components/ConfirmDialog/confirm.types.js +1 -0
- package/dist/components/ConfirmDialog/index.d.ts +4 -0
- package/dist/components/ConfirmDialog/index.js +2 -0
- package/dist/components/SortableList/SortableList.svelte +54 -0
- package/dist/components/SortableList/SortableList.svelte.d.ts +26 -0
- package/dist/components/SortableList/index.d.ts +2 -0
- package/dist/components/SortableList/index.js +1 -0
- package/dist/components/SortableList/sortable-list.types.d.ts +17 -0
- package/dist/components/SortableList/sortable-list.types.js +1 -0
- package/dist/components/Toast/Toaster.svelte +194 -137
- package/dist/components/Toast/index.d.ts +2 -0
- package/dist/components/Toast/index.js +1 -0
- package/dist/components/Toast/internal/AnimatedIcon.svelte +446 -0
- package/dist/components/Toast/internal/AnimatedIcon.svelte.d.ts +15 -0
- package/dist/components/Toast/internal/animated-icon.types.d.ts +1 -0
- package/dist/components/Toast/internal/animated-icon.types.js +1 -0
- package/dist/components/Toast/internal/french-toast/LICENSE.md +21 -0
- package/dist/components/Toast/internal/french-toast/components/CheckmarkIcon.svelte +64 -0
- package/dist/components/Toast/internal/french-toast/components/CheckmarkIcon.svelte.d.ts +8 -0
- package/dist/components/Toast/internal/french-toast/components/ErrorIcon.svelte +74 -0
- package/dist/components/Toast/internal/french-toast/components/ErrorIcon.svelte.d.ts +8 -0
- package/dist/components/Toast/internal/french-toast/components/LoaderIcon.svelte +28 -0
- package/dist/components/Toast/internal/french-toast/components/LoaderIcon.svelte.d.ts +8 -0
- package/dist/components/Toast/internal/french-toast/components/ToastBar.svelte +169 -0
- package/dist/components/Toast/internal/french-toast/components/ToastBar.svelte.d.ts +20 -0
- package/dist/components/Toast/internal/french-toast/components/ToastIcon.svelte +81 -0
- package/dist/components/Toast/internal/french-toast/components/ToastIcon.svelte.d.ts +7 -0
- package/dist/components/Toast/internal/french-toast/components/ToastMessage.svelte +13 -0
- package/dist/components/Toast/internal/french-toast/components/ToastMessage.svelte.d.ts +8 -0
- package/dist/components/Toast/internal/french-toast/components/ToastWrapper.svelte +57 -0
- package/dist/components/Toast/internal/french-toast/components/ToastWrapper.svelte.d.ts +12 -0
- package/dist/components/Toast/internal/french-toast/components/Toaster.svelte +73 -0
- package/dist/components/Toast/internal/french-toast/components/Toaster.svelte.d.ts +23 -0
- package/dist/components/Toast/internal/french-toast/core/store.svelte.d.ts +15 -0
- package/dist/components/Toast/internal/french-toast/core/store.svelte.js +92 -0
- package/dist/components/Toast/internal/french-toast/core/toast.d.ts +21 -0
- package/dist/components/Toast/internal/french-toast/core/toast.js +67 -0
- package/dist/components/Toast/internal/french-toast/core/types.d.ts +58 -0
- package/dist/components/Toast/internal/french-toast/core/types.js +4 -0
- package/dist/components/Toast/internal/french-toast/core/use-toaster.svelte.d.ts +16 -0
- package/dist/components/Toast/internal/french-toast/core/use-toaster.svelte.js +71 -0
- package/dist/components/Toast/internal/french-toast/core/utils.d.ts +6 -0
- package/dist/components/Toast/internal/french-toast/core/utils.js +25 -0
- package/dist/components/Toast/internal/french-toast/toast-context.d.ts +18 -0
- package/dist/components/Toast/internal/french-toast/toast-context.js +10 -0
- package/dist/components/Toast/internal/notify.d.ts +31 -0
- package/dist/components/Toast/internal/notify.js +100 -0
- package/dist/components/Toast/internal/toast-icons/ToastError.svelte +8 -0
- package/dist/components/Toast/internal/toast-icons/ToastError.svelte.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/ToastInfo.svelte +8 -0
- package/dist/components/Toast/internal/toast-icons/ToastInfo.svelte.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/ToastLoading.svelte +8 -0
- package/dist/components/Toast/internal/toast-icons/ToastLoading.svelte.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/ToastProcessing.svelte +8 -0
- package/dist/components/Toast/internal/toast-icons/ToastProcessing.svelte.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/ToastSuccess.svelte +8 -0
- package/dist/components/Toast/internal/toast-icons/ToastSuccess.svelte.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/ToastWarning.svelte +8 -0
- package/dist/components/Toast/internal/toast-icons/ToastWarning.svelte.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/index.d.ts +6 -0
- package/dist/components/Toast/internal/toast-icons/index.js +6 -0
- package/dist/components/Toast/internal/toast-icons/toast-icon.types.d.ts +4 -0
- package/dist/components/Toast/internal/toast-icons/toast-icon.types.js +1 -0
- package/dist/components/Toast/toast.d.ts +31 -16
- package/dist/components/Toast/toast.js +45 -20
- package/dist/components/Toast/toast.types.d.ts +20 -7
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/internal/DragDropProviderScope.svelte +29 -0
- package/dist/hooks/internal/DragDropProviderScope.svelte.d.ts +7 -0
- package/dist/hooks/internal/SortableProvider.svelte +30 -0
- package/dist/hooks/internal/SortableProvider.svelte.d.ts +7 -0
- package/dist/hooks/internal/drag-drop-context.d.ts +12 -0
- package/dist/hooks/internal/drag-drop-context.js +1 -0
- package/dist/hooks/internal/sortable-context.d.ts +12 -0
- package/dist/hooks/internal/sortable-context.js +1 -0
- package/dist/hooks/useDragDrop/index.d.ts +1 -0
- package/dist/hooks/useDragDrop/index.js +1 -0
- package/dist/hooks/useDragDrop/useDragDrop.svelte.d.ts +40 -0
- package/dist/hooks/useDragDrop/useDragDrop.svelte.js +128 -0
- package/dist/hooks/useSortable/index.d.ts +2 -0
- package/dist/hooks/useSortable/index.js +2 -0
- package/dist/hooks/useSortable/sortable-utils.d.ts +1 -0
- package/dist/hooks/useSortable/sortable-utils.js +13 -0
- package/dist/hooks/useSortable/useSortable.svelte.d.ts +52 -0
- package/dist/hooks/useSortable/useSortable.svelte.js +120 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/mcp/svelora-docs.data.json +13 -5
- package/package.json +5 -3
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import type { Component } from 'svelte';
|
|
2
|
+
import type { MouseEventHandler } from 'svelte/elements';
|
|
3
|
+
export type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom' | 'warning' | 'info';
|
|
4
|
+
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
|
5
|
+
export type Renderable<T extends Record<string, unknown> = Record<string, unknown>> = Component<T> | string | null;
|
|
6
|
+
export interface IconTheme {
|
|
7
|
+
primary: string;
|
|
8
|
+
secondary: string;
|
|
9
|
+
}
|
|
10
|
+
export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;
|
|
11
|
+
export type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>;
|
|
12
|
+
export declare const resolveValue: <TValue, TArg>(valOrFunction: ValueOrFunction<TValue, TArg>, arg: TArg) => TValue;
|
|
13
|
+
export interface ToastAction {
|
|
14
|
+
label: string;
|
|
15
|
+
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
16
|
+
}
|
|
17
|
+
export interface Toast<T extends Record<string, unknown> = Record<string, unknown>> {
|
|
18
|
+
type: ToastType;
|
|
19
|
+
id: string;
|
|
20
|
+
message: Renderable<T>;
|
|
21
|
+
description?: Renderable;
|
|
22
|
+
icon?: Renderable;
|
|
23
|
+
duration?: number;
|
|
24
|
+
pauseDuration: number;
|
|
25
|
+
position?: ToastPosition;
|
|
26
|
+
props?: Omit<T, 'toast'>;
|
|
27
|
+
ariaProps: {
|
|
28
|
+
role: 'status' | 'alert';
|
|
29
|
+
'aria-live': 'assertive' | 'off' | 'polite';
|
|
30
|
+
};
|
|
31
|
+
style?: string;
|
|
32
|
+
className?: string;
|
|
33
|
+
descriptionClass?: string;
|
|
34
|
+
iconTheme?: IconTheme;
|
|
35
|
+
action?: ToastAction;
|
|
36
|
+
cancel?: ToastAction;
|
|
37
|
+
closeButton?: boolean;
|
|
38
|
+
createdAt: number;
|
|
39
|
+
visible: boolean;
|
|
40
|
+
height?: number;
|
|
41
|
+
}
|
|
42
|
+
export type DOMToast<T extends Record<string, unknown> = Record<string, unknown>> = Toast<T> & {
|
|
43
|
+
offset: number;
|
|
44
|
+
};
|
|
45
|
+
export type ToastOptions<T extends Record<string, unknown> = Record<string, unknown>> = Partial<Pick<Toast<T>, 'id' | 'icon' | 'description' | 'duration' | 'ariaProps' | 'className' | 'descriptionClass' | 'style' | 'position' | 'iconTheme' | 'props' | 'action' | 'cancel' | 'closeButton'>>;
|
|
46
|
+
export type DefaultToastOptions = ToastOptions & {
|
|
47
|
+
[key in ToastType]?: ToastOptions;
|
|
48
|
+
};
|
|
49
|
+
export interface ToasterProps {
|
|
50
|
+
position?: ToastPosition;
|
|
51
|
+
toastOptions?: DefaultToastOptions;
|
|
52
|
+
reverseOrder?: boolean;
|
|
53
|
+
gutter?: number;
|
|
54
|
+
containerStyle?: string;
|
|
55
|
+
containerClassName?: string;
|
|
56
|
+
closeButton?: boolean;
|
|
57
|
+
theme?: 'light' | 'dark' | 'system';
|
|
58
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
// Vendored from svelte-french-toast (MIT License)
|
|
2
|
+
// https://github.com/kbrgl/svelte-french-toast
|
|
3
|
+
const isFunction = (valOrFunction) => typeof valOrFunction === 'function';
|
|
4
|
+
export const resolveValue = (valOrFunction, arg) => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { DefaultToastOptions, Toast, ToastPosition } from './types.js';
|
|
2
|
+
declare function calculateOffset(toastItem: Toast, list: Toast[], opts?: {
|
|
3
|
+
reverseOrder?: boolean;
|
|
4
|
+
gutter?: number;
|
|
5
|
+
defaultPosition?: ToastPosition;
|
|
6
|
+
}): number;
|
|
7
|
+
export declare function useToaster(getToastOptions?: () => DefaultToastOptions): {
|
|
8
|
+
readonly mergedToasts: Toast<Record<string, unknown>>[];
|
|
9
|
+
handlers: {
|
|
10
|
+
startPause(): void;
|
|
11
|
+
endPause(): void;
|
|
12
|
+
updateHeight: (toastId: string, height: number) => void;
|
|
13
|
+
calculateOffset: typeof calculateOffset;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
// Vendored from svelte-french-toast (MIT License)
|
|
2
|
+
// https://github.com/kbrgl/svelte-french-toast
|
|
3
|
+
import toast from './toast.js';
|
|
4
|
+
import { endPause as _endPause, mergeToastOptions, startPause as _startPause, toastStore, update } from './store.svelte.js';
|
|
5
|
+
function calculateOffset(toastItem, list, opts) {
|
|
6
|
+
const { reverseOrder, gutter = 8, defaultPosition } = opts || {};
|
|
7
|
+
const relevantToasts = list.filter((t) => (t.position || defaultPosition) === (toastItem.position || defaultPosition) && t.height);
|
|
8
|
+
const toastIndex = relevantToasts.findIndex((t) => t.id === toastItem.id);
|
|
9
|
+
const toastsBefore = relevantToasts.filter((item, i) => i < toastIndex && item.visible).length;
|
|
10
|
+
const offset = relevantToasts
|
|
11
|
+
.filter((t) => t.visible)
|
|
12
|
+
.slice(...(reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]))
|
|
13
|
+
.reduce((acc, t) => acc + (t.height || 0) + gutter, 0);
|
|
14
|
+
return offset;
|
|
15
|
+
}
|
|
16
|
+
const handlers = {
|
|
17
|
+
startPause() {
|
|
18
|
+
_startPause(Date.now());
|
|
19
|
+
},
|
|
20
|
+
endPause() {
|
|
21
|
+
_endPause(Date.now());
|
|
22
|
+
},
|
|
23
|
+
updateHeight: (toastId, height) => {
|
|
24
|
+
update({ id: toastId, height }, false);
|
|
25
|
+
},
|
|
26
|
+
calculateOffset
|
|
27
|
+
};
|
|
28
|
+
export function useToaster(getToastOptions = () => ({})) {
|
|
29
|
+
const timeouts = new Map();
|
|
30
|
+
const mergedToasts = $derived(mergeToastOptions(toastStore.toasts, getToastOptions()));
|
|
31
|
+
$effect(() => {
|
|
32
|
+
if (toastStore.pausedAt) {
|
|
33
|
+
for (const [, timeoutId] of timeouts) {
|
|
34
|
+
clearTimeout(timeoutId);
|
|
35
|
+
}
|
|
36
|
+
timeouts.clear();
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const now = Date.now();
|
|
40
|
+
for (const t of mergedToasts) {
|
|
41
|
+
if (timeouts.has(t.id)) {
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
44
|
+
if (t.duration === Number.POSITIVE_INFINITY) {
|
|
45
|
+
continue;
|
|
46
|
+
}
|
|
47
|
+
const durationLeft = (t.duration || 0) + t.pauseDuration - (now - t.createdAt);
|
|
48
|
+
if (durationLeft < 0) {
|
|
49
|
+
if (t.visible) {
|
|
50
|
+
toast.dismiss(t.id);
|
|
51
|
+
}
|
|
52
|
+
continue;
|
|
53
|
+
}
|
|
54
|
+
timeouts.set(t.id, setTimeout(() => toast.dismiss(t.id), durationLeft));
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
$effect(() => {
|
|
58
|
+
return () => {
|
|
59
|
+
for (const [, timeoutId] of timeouts) {
|
|
60
|
+
clearTimeout(timeoutId);
|
|
61
|
+
}
|
|
62
|
+
timeouts.clear();
|
|
63
|
+
};
|
|
64
|
+
});
|
|
65
|
+
return {
|
|
66
|
+
get mergedToasts() {
|
|
67
|
+
return mergedToasts;
|
|
68
|
+
},
|
|
69
|
+
handlers
|
|
70
|
+
};
|
|
71
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// Vendored from svelte-french-toast (MIT License)
|
|
2
|
+
// https://github.com/kbrgl/svelte-french-toast
|
|
3
|
+
export const genId = (() => {
|
|
4
|
+
let count = 0;
|
|
5
|
+
return () => {
|
|
6
|
+
count += 1;
|
|
7
|
+
return count.toString();
|
|
8
|
+
};
|
|
9
|
+
})();
|
|
10
|
+
export const prefersReducedMotion = (() => {
|
|
11
|
+
let shouldReduceMotion;
|
|
12
|
+
return () => {
|
|
13
|
+
if (shouldReduceMotion === undefined && typeof window !== 'undefined') {
|
|
14
|
+
const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');
|
|
15
|
+
shouldReduceMotion = !mediaQuery || mediaQuery.matches;
|
|
16
|
+
}
|
|
17
|
+
return shouldReduceMotion;
|
|
18
|
+
};
|
|
19
|
+
})();
|
|
20
|
+
export function parsePosition(position) {
|
|
21
|
+
const [y = 'bottom', x = 'right'] = position.split('-');
|
|
22
|
+
const xPosition = x === 'center' ? 'center' : x === 'left' || x === 'start' ? 'left' : 'right';
|
|
23
|
+
const yPosition = y === 'top' ? 'top' : 'bottom';
|
|
24
|
+
return { xPosition, yPosition };
|
|
25
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
export type ToastIconSnippets = {
|
|
3
|
+
successIcon?: Snippet;
|
|
4
|
+
errorIcon?: Snippet;
|
|
5
|
+
warningIcon?: Snippet;
|
|
6
|
+
infoIcon?: Snippet;
|
|
7
|
+
loadingIcon?: Snippet;
|
|
8
|
+
closeIcon?: Snippet;
|
|
9
|
+
};
|
|
10
|
+
export type ToastIconTone = 'standard' | 'on-color';
|
|
11
|
+
export type ToastToasterContext = ToastIconSnippets & {
|
|
12
|
+
closeButton?: boolean;
|
|
13
|
+
closeButtonAriaLabel?: string;
|
|
14
|
+
/** Use high-contrast icons on solid semantic backgrounds. */
|
|
15
|
+
iconTone?: ToastIconTone;
|
|
16
|
+
};
|
|
17
|
+
export declare function setToastToasterContext(getter: () => ToastToasterContext): void;
|
|
18
|
+
export declare function getToastToasterContext(): ToastToasterContext;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Svelora extensions for vendored svelte-french-toast
|
|
2
|
+
import { getContext, setContext } from 'svelte';
|
|
3
|
+
const TOAST_TOASTER_CONTEXT = Symbol('svelora-toast-toaster');
|
|
4
|
+
export function setToastToasterContext(getter) {
|
|
5
|
+
setContext(TOAST_TOASTER_CONTEXT, getter);
|
|
6
|
+
}
|
|
7
|
+
export function getToastToasterContext() {
|
|
8
|
+
const getter = getContext(TOAST_TOASTER_CONTEXT);
|
|
9
|
+
return getter?.() ?? {};
|
|
10
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { ToastOptions as SveloraToastOptions } from '../toast.js';
|
|
2
|
+
export interface NotifyOptions extends SveloraToastOptions {
|
|
3
|
+
/** Inline style map (merged into `style`). */
|
|
4
|
+
styles?: Record<string, string>;
|
|
5
|
+
/** Class map (merged into `class`). */
|
|
6
|
+
classes?: Record<string, string>;
|
|
7
|
+
}
|
|
8
|
+
export interface NotifyPromiseOptions<T = unknown> extends NotifyOptions {
|
|
9
|
+
loading: string;
|
|
10
|
+
success: string | ((data: T) => string);
|
|
11
|
+
error: string | ((error: unknown) => string);
|
|
12
|
+
/** Treat API responses with `success: false` as errors. */
|
|
13
|
+
checkSuccess?: (data: T) => boolean;
|
|
14
|
+
loadingOptions?: NotifyOptions;
|
|
15
|
+
successOptions?: NotifyOptions;
|
|
16
|
+
errorOptions?: NotifyOptions;
|
|
17
|
+
/** Minimum time to show the loading toast (ms). Default 800. */
|
|
18
|
+
minDuration?: number;
|
|
19
|
+
}
|
|
20
|
+
export declare const notify: {
|
|
21
|
+
success(message: string, options?: NotifyOptions): string;
|
|
22
|
+
error(message: string | unknown, options?: NotifyOptions): string;
|
|
23
|
+
info(message: string, options?: NotifyOptions): string;
|
|
24
|
+
warning(message: string, options?: NotifyOptions): string;
|
|
25
|
+
loading(message: string, options?: NotifyOptions): string;
|
|
26
|
+
processing(message: string, options?: NotifyOptions): string;
|
|
27
|
+
default(message: string, options?: NotifyOptions): string;
|
|
28
|
+
promise<T>(promise: Promise<T>, options: NotifyPromiseOptions<T>): Promise<T>;
|
|
29
|
+
dismiss(id?: string | number): void;
|
|
30
|
+
};
|
|
31
|
+
export type NotifyUtility = typeof notify;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { toast } from '../toast.js';
|
|
2
|
+
import { ToastError, ToastInfo, ToastLoading, ToastSuccess, ToastWarning } from './toast-icons/index.js';
|
|
3
|
+
function getErrorMessage(err) {
|
|
4
|
+
if (typeof err === 'string')
|
|
5
|
+
return err;
|
|
6
|
+
if (err instanceof Error)
|
|
7
|
+
return err.message;
|
|
8
|
+
if (err && typeof err === 'object') {
|
|
9
|
+
const obj = err;
|
|
10
|
+
if (typeof obj.message === 'string')
|
|
11
|
+
return obj.message;
|
|
12
|
+
if (typeof obj.error === 'string')
|
|
13
|
+
return obj.error;
|
|
14
|
+
return JSON.stringify(err);
|
|
15
|
+
}
|
|
16
|
+
return 'An unknown error occurred';
|
|
17
|
+
}
|
|
18
|
+
function mapNotifyOptions(options) {
|
|
19
|
+
if (!options)
|
|
20
|
+
return options;
|
|
21
|
+
const { styles, classes, ...rest } = options;
|
|
22
|
+
const resolved = { ...rest };
|
|
23
|
+
if (styles && Object.keys(styles).length > 0) {
|
|
24
|
+
const inline = Object.entries(styles)
|
|
25
|
+
.map(([key, value]) => `${key}: ${value}`)
|
|
26
|
+
.join('; ');
|
|
27
|
+
resolved.style = [resolved.style, inline].filter(Boolean).join('; ');
|
|
28
|
+
}
|
|
29
|
+
if (classes && Object.keys(classes).length > 0) {
|
|
30
|
+
const classNames = Object.values(classes).join(' ');
|
|
31
|
+
resolved.class = [resolved.class, classNames].filter(Boolean).join(' ');
|
|
32
|
+
}
|
|
33
|
+
return resolved;
|
|
34
|
+
}
|
|
35
|
+
function withIcon(icon, options) {
|
|
36
|
+
const resolved = mapNotifyOptions(options);
|
|
37
|
+
if (!resolved)
|
|
38
|
+
return { icon };
|
|
39
|
+
if (resolved.icon !== undefined)
|
|
40
|
+
return resolved;
|
|
41
|
+
return { ...resolved, icon };
|
|
42
|
+
}
|
|
43
|
+
export const notify = {
|
|
44
|
+
success(message, options) {
|
|
45
|
+
return toast.success(message, withIcon(ToastSuccess, options));
|
|
46
|
+
},
|
|
47
|
+
error(message, options) {
|
|
48
|
+
return toast.error(getErrorMessage(message), withIcon(ToastError, options));
|
|
49
|
+
},
|
|
50
|
+
info(message, options) {
|
|
51
|
+
return toast.info(message, withIcon(ToastInfo, options));
|
|
52
|
+
},
|
|
53
|
+
warning(message, options) {
|
|
54
|
+
return toast.warning(message, withIcon(ToastWarning, options));
|
|
55
|
+
},
|
|
56
|
+
loading(message, options) {
|
|
57
|
+
return toast.loading(message, withIcon(ToastLoading, {
|
|
58
|
+
duration: Number.POSITIVE_INFINITY,
|
|
59
|
+
...options
|
|
60
|
+
}));
|
|
61
|
+
},
|
|
62
|
+
processing(message, options) {
|
|
63
|
+
return toast.processing(message, options);
|
|
64
|
+
},
|
|
65
|
+
default(message, options) {
|
|
66
|
+
return toast(message, mapNotifyOptions(options));
|
|
67
|
+
},
|
|
68
|
+
promise(promise, options) {
|
|
69
|
+
const { loading, success, error, checkSuccess, loadingOptions, successOptions, errorOptions, minDuration = 800, ...rest } = options;
|
|
70
|
+
const toastId = notify.loading(loading, {
|
|
71
|
+
...rest,
|
|
72
|
+
...loadingOptions
|
|
73
|
+
});
|
|
74
|
+
const minDelay = new Promise((resolve) => setTimeout(resolve, minDuration));
|
|
75
|
+
Promise.all([Promise.resolve(promise), minDelay])
|
|
76
|
+
.then(([data]) => {
|
|
77
|
+
if (checkSuccess && !checkSuccess(data)) {
|
|
78
|
+
throw data;
|
|
79
|
+
}
|
|
80
|
+
const message = typeof success === 'function' ? success(data) : success;
|
|
81
|
+
notify.success(message, {
|
|
82
|
+
id: toastId,
|
|
83
|
+
...rest,
|
|
84
|
+
...successOptions
|
|
85
|
+
});
|
|
86
|
+
})
|
|
87
|
+
.catch((err) => {
|
|
88
|
+
const message = typeof error === 'function' ? error(err) : getErrorMessage(err);
|
|
89
|
+
notify.error(message, {
|
|
90
|
+
id: toastId,
|
|
91
|
+
...rest,
|
|
92
|
+
...errorOptions
|
|
93
|
+
});
|
|
94
|
+
});
|
|
95
|
+
return promise;
|
|
96
|
+
},
|
|
97
|
+
dismiss(id) {
|
|
98
|
+
toast.dismiss(id !== undefined ? String(id) : undefined);
|
|
99
|
+
}
|
|
100
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import AnimatedIcon from "../AnimatedIcon.svelte";
|
|
2
|
+
import { getToastToasterContext } from "../french-toast/toast-context.js";
|
|
3
|
+
let { tone } = $props();
|
|
4
|
+
const toasterContext = getToastToasterContext();
|
|
5
|
+
const resolvedTone = $derived(tone ?? toasterContext.iconTone ?? "standard");
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<AnimatedIcon type="error" size={24} tone={resolvedTone} forceMotion idle={false} />
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import AnimatedIcon from "../AnimatedIcon.svelte";
|
|
2
|
+
import { getToastToasterContext } from "../french-toast/toast-context.js";
|
|
3
|
+
let { tone } = $props();
|
|
4
|
+
const toasterContext = getToastToasterContext();
|
|
5
|
+
const resolvedTone = $derived(tone ?? toasterContext.iconTone ?? "standard");
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<AnimatedIcon type="info" size={24} tone={resolvedTone} forceMotion idle={false} />
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import AnimatedIcon from "../AnimatedIcon.svelte";
|
|
2
|
+
import { getToastToasterContext } from "../french-toast/toast-context.js";
|
|
3
|
+
let { tone } = $props();
|
|
4
|
+
const toasterContext = getToastToasterContext();
|
|
5
|
+
const resolvedTone = $derived(tone ?? toasterContext.iconTone ?? "standard");
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<AnimatedIcon type="loading" size={24} tone={resolvedTone} forceMotion idle={false} />
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import AnimatedIcon from "../AnimatedIcon.svelte";
|
|
2
|
+
import { getToastToasterContext } from "../french-toast/toast-context.js";
|
|
3
|
+
let { tone } = $props();
|
|
4
|
+
const toasterContext = getToastToasterContext();
|
|
5
|
+
const resolvedTone = $derived(tone ?? toasterContext.iconTone ?? "standard");
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<AnimatedIcon type="processing" size={24} tone={resolvedTone} forceMotion idle={false} />
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import AnimatedIcon from "../AnimatedIcon.svelte";
|
|
2
|
+
import { getToastToasterContext } from "../french-toast/toast-context.js";
|
|
3
|
+
let { tone } = $props();
|
|
4
|
+
const toasterContext = getToastToasterContext();
|
|
5
|
+
const resolvedTone = $derived(tone ?? toasterContext.iconTone ?? "standard");
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<AnimatedIcon type="success" size={24} tone={resolvedTone} forceMotion idle={false} />
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import AnimatedIcon from "../AnimatedIcon.svelte";
|
|
2
|
+
import { getToastToasterContext } from "../french-toast/toast-context.js";
|
|
3
|
+
let { tone } = $props();
|
|
4
|
+
const toasterContext = getToastToasterContext();
|
|
5
|
+
const resolvedTone = $derived(tone ?? toasterContext.iconTone ?? "standard");
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<AnimatedIcon type="warning" size={24} tone={resolvedTone} forceMotion idle={false} />
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as ToastSuccess } from './ToastSuccess.svelte';
|
|
2
|
+
export { default as ToastError } from './ToastError.svelte';
|
|
3
|
+
export { default as ToastWarning } from './ToastWarning.svelte';
|
|
4
|
+
export { default as ToastInfo } from './ToastInfo.svelte';
|
|
5
|
+
export { default as ToastLoading } from './ToastLoading.svelte';
|
|
6
|
+
export { default as ToastProcessing } from './ToastProcessing.svelte';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as ToastSuccess } from './ToastSuccess.svelte';
|
|
2
|
+
export { default as ToastError } from './ToastError.svelte';
|
|
3
|
+
export { default as ToastWarning } from './ToastWarning.svelte';
|
|
4
|
+
export { default as ToastInfo } from './ToastInfo.svelte';
|
|
5
|
+
export { default as ToastLoading } from './ToastLoading.svelte';
|
|
6
|
+
export { default as ToastProcessing } from './ToastProcessing.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,38 +1,53 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Component } from 'svelte';
|
|
2
|
+
import type { ToastOptions, ValueOrFunction } from './internal/french-toast/core/types.js';
|
|
2
3
|
import type { AvatarProps } from '../Avatar/avatar.types.js';
|
|
3
4
|
import type { ToastColor } from './toast.variants.js';
|
|
4
5
|
type ToastAvatarOptions = Pick<AvatarProps, 'src' | 'alt' | 'text' | 'icon' | 'size'>;
|
|
5
|
-
type SveloraToastOptions = Omit<
|
|
6
|
+
type SveloraToastOptions = Omit<ToastOptions, 'icon' | 'className'> & {
|
|
6
7
|
/**
|
|
7
8
|
* Semantic color for the toast.
|
|
8
|
-
* Works with all Toaster variants (outline, soft, subtle, solid, accent).
|
|
9
9
|
* @example toast('Message', { color: 'primary' })
|
|
10
10
|
*/
|
|
11
11
|
color?: ToastColor;
|
|
12
12
|
/**
|
|
13
13
|
* Iconify icon name to display in the toast.
|
|
14
|
-
* Replaces the default type icon (success checkmark, error X, etc.)
|
|
15
14
|
* @example toast('Launched!', { icon: 'lucide:rocket' })
|
|
16
15
|
*/
|
|
17
|
-
icon?: string |
|
|
16
|
+
icon?: string | ToastOptions['icon'];
|
|
18
17
|
/**
|
|
19
18
|
* Avatar to display in the icon slot.
|
|
20
|
-
* Pass an object with Avatar props (src, alt, text, icon, size).
|
|
21
19
|
* @example toast('John commented', { avatar: { src: '/avatar.jpg', alt: 'John' } })
|
|
22
20
|
*/
|
|
23
21
|
avatar?: ToastAvatarOptions;
|
|
22
|
+
/**
|
|
23
|
+
* When false, toast stays until programmatically dismissed or updated.
|
|
24
|
+
* Also sets `duration: Infinity` and hides the close button.
|
|
25
|
+
*/
|
|
26
|
+
dismissible?: boolean;
|
|
27
|
+
/** Alias for className. */
|
|
28
|
+
class?: string;
|
|
29
|
+
};
|
|
30
|
+
type SveloraPromiseOptions = SveloraToastOptions & {
|
|
31
|
+
loading?: SveloraToastOptions;
|
|
32
|
+
success?: SveloraToastOptions;
|
|
33
|
+
error?: SveloraToastOptions;
|
|
24
34
|
};
|
|
25
|
-
declare function toastFn(message: string, data?: SveloraToastOptions): string
|
|
35
|
+
declare function toastFn(message: string, data?: SveloraToastOptions): string;
|
|
26
36
|
declare namespace toastFn {
|
|
27
|
-
var success: (message: string, data?: SveloraToastOptions) => string
|
|
28
|
-
var error: (message: string, data?: SveloraToastOptions) => string
|
|
29
|
-
var warning: (message: string, data?: SveloraToastOptions) => string
|
|
30
|
-
var info: (message: string, data?: SveloraToastOptions) => string
|
|
31
|
-
var loading: (message: string, data?: SveloraToastOptions) => string
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
37
|
+
var success: (message: string, data?: SveloraToastOptions) => string;
|
|
38
|
+
var error: (message: string, data?: SveloraToastOptions) => string;
|
|
39
|
+
var warning: (message: string, data?: SveloraToastOptions) => string;
|
|
40
|
+
var info: (message: string, data?: SveloraToastOptions) => string;
|
|
41
|
+
var loading: (message: string, data?: SveloraToastOptions) => string;
|
|
42
|
+
var processing: (message: string, data?: SveloraToastOptions) => string;
|
|
43
|
+
var promise: <T>(promise: Promise<T>, msgs: {
|
|
44
|
+
loading: string;
|
|
45
|
+
success: ValueOrFunction<string, T>;
|
|
46
|
+
error: ValueOrFunction<string, unknown>;
|
|
47
|
+
}, opts?: SveloraPromiseOptions) => Promise<T>;
|
|
48
|
+
var dismiss: (toastId?: string) => void;
|
|
49
|
+
var custom: <T extends Record<string, unknown> = Record<string, unknown>>(message: string | Component<T, {}, string> | null, options?: ToastOptions<T>) => string;
|
|
50
|
+
var message: <T extends Record<string, unknown> = Record<string, unknown>>(message: string | Component<T, {}, string> | null, options?: ToastOptions<T>) => string;
|
|
36
51
|
}
|
|
37
52
|
export type { SveloraToastOptions as ToastOptions };
|
|
38
53
|
export { toastFn as toast };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { mount, unmount } from 'svelte';
|
|
2
|
-
import
|
|
2
|
+
import internalToast from './internal/french-toast/core/toast.js';
|
|
3
|
+
import ToastProcessing from './internal/toast-icons/ToastProcessing.svelte';
|
|
3
4
|
import Avatar from '../Avatar/Avatar.svelte';
|
|
4
5
|
import Icon from '../Icon/Icon.svelte';
|
|
5
6
|
function createIconComponent(name) {
|
|
6
|
-
function
|
|
7
|
+
function SveloraIcon(anchor) {
|
|
7
8
|
if (!anchor.parentNode)
|
|
8
9
|
return { destroy() { } };
|
|
9
10
|
const instance = mount(Icon, {
|
|
@@ -17,10 +18,10 @@ function createIconComponent(name) {
|
|
|
17
18
|
}
|
|
18
19
|
};
|
|
19
20
|
}
|
|
20
|
-
return
|
|
21
|
+
return SveloraIcon;
|
|
21
22
|
}
|
|
22
23
|
function createAvatarComponent(props) {
|
|
23
|
-
function
|
|
24
|
+
function SveloraAvatar(anchor) {
|
|
24
25
|
if (!anchor.parentNode)
|
|
25
26
|
return { destroy() { } };
|
|
26
27
|
const instance = mount(Avatar, {
|
|
@@ -34,19 +35,24 @@ function createAvatarComponent(props) {
|
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
37
|
}
|
|
37
|
-
return
|
|
38
|
+
return SveloraAvatar;
|
|
38
39
|
}
|
|
39
40
|
function resolveOptions(data) {
|
|
40
41
|
if (!data)
|
|
41
42
|
return data;
|
|
42
|
-
const { color, icon, avatar, ...rest } = data;
|
|
43
|
+
const { color, icon, avatar, class: className, dismissible, ...rest } = data;
|
|
43
44
|
const resolved = { ...rest };
|
|
44
|
-
|
|
45
|
+
if (dismissible === false) {
|
|
46
|
+
resolved.duration = Number.POSITIVE_INFINITY;
|
|
47
|
+
resolved.closeButton = false;
|
|
48
|
+
}
|
|
49
|
+
if (className) {
|
|
50
|
+
resolved.className = className;
|
|
51
|
+
}
|
|
45
52
|
if (color) {
|
|
46
|
-
const existing = resolved.
|
|
47
|
-
resolved.
|
|
53
|
+
const existing = resolved.className ?? '';
|
|
54
|
+
resolved.className = `${existing} ps-color-${color}`.trim();
|
|
48
55
|
}
|
|
49
|
-
// Avatar takes priority over icon
|
|
50
56
|
if (avatar) {
|
|
51
57
|
resolved.icon = createAvatarComponent(avatar);
|
|
52
58
|
}
|
|
@@ -58,16 +64,35 @@ function resolveOptions(data) {
|
|
|
58
64
|
}
|
|
59
65
|
return resolved;
|
|
60
66
|
}
|
|
67
|
+
function resolveDefaultOptions(opts) {
|
|
68
|
+
if (!opts)
|
|
69
|
+
return opts;
|
|
70
|
+
const { loading, success, error, ...rest } = opts;
|
|
71
|
+
return {
|
|
72
|
+
...resolveOptions(rest),
|
|
73
|
+
loading: resolveOptions(loading),
|
|
74
|
+
success: resolveOptions(success),
|
|
75
|
+
error: resolveOptions(error)
|
|
76
|
+
};
|
|
77
|
+
}
|
|
61
78
|
function toastFn(message, data) {
|
|
62
|
-
return
|
|
79
|
+
return internalToast(message, resolveOptions(data));
|
|
63
80
|
}
|
|
64
|
-
toastFn.success = (message, data) =>
|
|
65
|
-
toastFn.error = (message, data) =>
|
|
66
|
-
toastFn.warning = (message, data) =>
|
|
67
|
-
toastFn.info = (message, data) =>
|
|
68
|
-
toastFn.loading = (message, data) =>
|
|
69
|
-
toastFn.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
81
|
+
toastFn.success = (message, data) => internalToast.success(message, resolveOptions(data));
|
|
82
|
+
toastFn.error = (message, data) => internalToast.error(message, resolveOptions(data));
|
|
83
|
+
toastFn.warning = (message, data) => internalToast.warning(message, resolveOptions(data));
|
|
84
|
+
toastFn.info = (message, data) => internalToast.info(message, resolveOptions(data));
|
|
85
|
+
toastFn.loading = (message, data) => internalToast.loading(message, resolveOptions(data));
|
|
86
|
+
toastFn.processing = (message, data) => {
|
|
87
|
+
const resolved = resolveOptions({
|
|
88
|
+
duration: Number.POSITIVE_INFINITY,
|
|
89
|
+
...data,
|
|
90
|
+
icon: data?.icon ?? ToastProcessing
|
|
91
|
+
});
|
|
92
|
+
return internalToast.loading(message, resolved);
|
|
93
|
+
};
|
|
94
|
+
toastFn.promise = (promise, msgs, opts) => internalToast.promise(promise, msgs, resolveDefaultOptions(opts));
|
|
95
|
+
toastFn.dismiss = internalToast.dismiss;
|
|
96
|
+
toastFn.custom = internalToast.custom;
|
|
97
|
+
toastFn.message = internalToast.message;
|
|
73
98
|
export { toastFn as toast };
|