@skeletonlabs/skeleton-svelte 1.0.0-next.11 → 1.0.0-next.12
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/Combobox/Combobox.svelte +1 -1
- package/dist/components/Toast/ToastProvider.svelte +127 -0
- package/dist/components/Toast/ToastProvider.svelte.d.ts +3 -0
- package/dist/components/Toast/types.d.ts +87 -0
- package/dist/components/Toast/types.js +1 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.js +5 -2
- package/package.json +21 -21
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { setContext } from 'svelte';
|
|
3
|
+
import { flip } from 'svelte/animate';
|
|
4
|
+
import { fade } from 'svelte/transition';
|
|
5
|
+
import { useId } from '../../internal/use-id.js';
|
|
6
|
+
import type { PlacementStyles, Toast, ToastProviderProps } from './types.js';
|
|
7
|
+
|
|
8
|
+
let {
|
|
9
|
+
placement = 'bottom-end',
|
|
10
|
+
offset = '16px',
|
|
11
|
+
dismissLabel = '',
|
|
12
|
+
// Group
|
|
13
|
+
groupBase = 'fixed flex flex-col items-end',
|
|
14
|
+
groupZIndex = 'z-[888]',
|
|
15
|
+
groupGap = 'gap-4',
|
|
16
|
+
groupClasses = '',
|
|
17
|
+
// Toast
|
|
18
|
+
toastBase = 'card py-2 px-3 grid grid-cols-[1fr_auto] items-center',
|
|
19
|
+
toastPadding = 'py-2 px-3',
|
|
20
|
+
toastGap = 'gap-4',
|
|
21
|
+
toastShadow = 'shadow-xl',
|
|
22
|
+
toastClasses = '',
|
|
23
|
+
// Message
|
|
24
|
+
messageBase = 'grid grid-cols-1 max-w-xs type-scale-1',
|
|
25
|
+
messageTitle = 'font-bold',
|
|
26
|
+
messageDescription = '',
|
|
27
|
+
messageClasses = '',
|
|
28
|
+
// Dismiss Button
|
|
29
|
+
btnDismissBase = 'btn-icon btn-icon-sm type-scale-3',
|
|
30
|
+
btnDimissPreset = '',
|
|
31
|
+
btnDismissHover = 'hover:preset-tonal',
|
|
32
|
+
btnDismissClasses = '',
|
|
33
|
+
// State
|
|
34
|
+
stateInfo = 'preset-filled',
|
|
35
|
+
stateError = 'preset-filled-error-500',
|
|
36
|
+
stateSuccess = 'preset-filled-success-500',
|
|
37
|
+
// Snippets
|
|
38
|
+
children
|
|
39
|
+
}: ToastProviderProps = $props();
|
|
40
|
+
|
|
41
|
+
// Local
|
|
42
|
+
let defaults: Record<string, Toast> = {
|
|
43
|
+
info: { duration: 5000 },
|
|
44
|
+
error: { duration: 5000 },
|
|
45
|
+
success: { duration: 2000 }
|
|
46
|
+
};
|
|
47
|
+
let placementOptions: Record<string, PlacementStyles> = {
|
|
48
|
+
'top-start': { top: offset, left: offset, 'align-items': 'flex-start' },
|
|
49
|
+
'top-end': { top: offset, right: offset, 'align-items': 'flex-end' },
|
|
50
|
+
'bottom-start': { bottom: offset, left: offset, 'align-items': 'flex-start' },
|
|
51
|
+
'bottom-end': { bottom: offset, right: offset, 'align-items': 'flex-end' }
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// State
|
|
55
|
+
let toastQueue: Toast[] = $state([]);
|
|
56
|
+
|
|
57
|
+
// Context
|
|
58
|
+
setContext('toast', {
|
|
59
|
+
create: (toast: Toast) => {
|
|
60
|
+
// Set default settings
|
|
61
|
+
toast = {
|
|
62
|
+
...defaults[String(toast.type || 'info')],
|
|
63
|
+
...toast,
|
|
64
|
+
id: useId()
|
|
65
|
+
};
|
|
66
|
+
// Push to Queue
|
|
67
|
+
toastQueue.push(toast);
|
|
68
|
+
// Set duration timeout
|
|
69
|
+
setTimeout(() => {
|
|
70
|
+
dismiss(toast.id);
|
|
71
|
+
}, toast.duration);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
function formatStyleAttr(style: PlacementStyles) {
|
|
76
|
+
return Object.entries(style)
|
|
77
|
+
.map(([k, v]) => `${k}:${v}`)
|
|
78
|
+
.join(';');
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
function dismiss(id: string | undefined) {
|
|
82
|
+
if (!id) return;
|
|
83
|
+
toastQueue = toastQueue.filter((t) => t.id !== id);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
function getStateClasses(type?: string) {
|
|
87
|
+
// prettier-ignore
|
|
88
|
+
switch (type) {
|
|
89
|
+
case 'error': return stateError;
|
|
90
|
+
case 'success': return stateSuccess;
|
|
91
|
+
default: return stateInfo;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<!-- Toast Group -->
|
|
97
|
+
{#if toastQueue.length}
|
|
98
|
+
<div class="{groupBase} {groupZIndex} {groupGap} {groupClasses}" style={formatStyleAttr(placementOptions[placement])} data-part="root">
|
|
99
|
+
{#each toastQueue as toast, i (toast)}
|
|
100
|
+
{@const stateClasses = getStateClasses(toast.type)}
|
|
101
|
+
<!-- Toast -->
|
|
102
|
+
<div
|
|
103
|
+
data-index={i}
|
|
104
|
+
data-type={toast.type}
|
|
105
|
+
class="{toastBase} {toastPadding} {toastGap} {toastShadow} {toastClasses} {stateClasses}"
|
|
106
|
+
animate:flip={{ duration: 200 }}
|
|
107
|
+
transition:fade={{ duration: 200 }}
|
|
108
|
+
>
|
|
109
|
+
<!-- Message -->
|
|
110
|
+
<div class="{messageBase} {messageClasses}">
|
|
111
|
+
{#if toast.title}<div class={messageTitle}>{toast.title}</div>{/if}
|
|
112
|
+
<div class={messageDescription}>{toast.description}</div>
|
|
113
|
+
</div>
|
|
114
|
+
<!-- Dismiss -->
|
|
115
|
+
<button
|
|
116
|
+
type="button"
|
|
117
|
+
class="{btnDismissBase} {btnDimissPreset} {btnDismissHover} {btnDismissClasses}"
|
|
118
|
+
onclick={() => dismiss(toast.id)}
|
|
119
|
+
>
|
|
120
|
+
{#if dismissLabel}{dismissLabel}{:else}×{/if}
|
|
121
|
+
</button>
|
|
122
|
+
</div>
|
|
123
|
+
{/each}
|
|
124
|
+
</div>
|
|
125
|
+
{/if}
|
|
126
|
+
|
|
127
|
+
{@render children?.()}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
export interface PlacementStyles {
|
|
3
|
+
top?: string;
|
|
4
|
+
bottom?: string;
|
|
5
|
+
left?: string;
|
|
6
|
+
right?: string;
|
|
7
|
+
'align-items'?: string;
|
|
8
|
+
}
|
|
9
|
+
export interface Toast {
|
|
10
|
+
/** The unique toast ID. */
|
|
11
|
+
id?: string;
|
|
12
|
+
/** The unique toast title text. */
|
|
13
|
+
title?: string;
|
|
14
|
+
/** The unique toast description text. */
|
|
15
|
+
description?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Define the toast type.
|
|
18
|
+
* @default info
|
|
19
|
+
*/
|
|
20
|
+
type?: 'info' | 'error' | 'success';
|
|
21
|
+
/** The duration of the toast. Default varies by type. */
|
|
22
|
+
duration?: number;
|
|
23
|
+
}
|
|
24
|
+
/** Provides accesss to the Toast Context API. */
|
|
25
|
+
export interface ToastContext {
|
|
26
|
+
/** Used to create display a new Toast instance. */
|
|
27
|
+
create: (toast: Toast) => void;
|
|
28
|
+
}
|
|
29
|
+
export interface ToastProviderProps {
|
|
30
|
+
/**
|
|
31
|
+
* Offset from the viewport edge.
|
|
32
|
+
* @default bottom-end
|
|
33
|
+
*/
|
|
34
|
+
placement?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
|
|
35
|
+
/**
|
|
36
|
+
* Offset from the viewport edge.
|
|
37
|
+
* @default 16px
|
|
38
|
+
*/
|
|
39
|
+
offset?: string;
|
|
40
|
+
/**
|
|
41
|
+
* The dismiss button label text.
|
|
42
|
+
* @default ×
|
|
43
|
+
*/
|
|
44
|
+
dismissLabel?: string;
|
|
45
|
+
/** Provide base classes for the root element. */
|
|
46
|
+
groupBase?: string;
|
|
47
|
+
/** Provide z-index classes for the root element. */
|
|
48
|
+
groupZIndex?: string;
|
|
49
|
+
/** Provide gap classes for the root element. */
|
|
50
|
+
groupGap?: string;
|
|
51
|
+
/** Provide arbitrary classes for the root element. */
|
|
52
|
+
groupClasses?: string;
|
|
53
|
+
/** Provide base classes for the toast cards. */
|
|
54
|
+
toastBase?: string;
|
|
55
|
+
/** Provide padding classes for the toast cards. */
|
|
56
|
+
toastPadding?: string;
|
|
57
|
+
/** Provide gap classes for the toast cards. */
|
|
58
|
+
toastGap?: string;
|
|
59
|
+
/** Provide shadow classes for the toast cards. */
|
|
60
|
+
toastShadow?: string;
|
|
61
|
+
/** Provide arbitrary classes for the toast cards. */
|
|
62
|
+
toastClasses?: string;
|
|
63
|
+
/** Provide base classes for the message region. */
|
|
64
|
+
messageBase?: string;
|
|
65
|
+
/** Provide classes for the message title text. */
|
|
66
|
+
messageTitle?: string;
|
|
67
|
+
/** Provide classes for the message description text. */
|
|
68
|
+
messageDescription?: string;
|
|
69
|
+
/** Provide arbitrary classes for the message region. */
|
|
70
|
+
messageClasses?: string;
|
|
71
|
+
/** Provide base classes for the dismiss button. */
|
|
72
|
+
btnDismissBase?: string;
|
|
73
|
+
/** Provide preset classes for the dismiss button. */
|
|
74
|
+
btnDimissPreset?: string;
|
|
75
|
+
/** Provide hover classes for the dismiss button. */
|
|
76
|
+
btnDismissHover?: string;
|
|
77
|
+
/** Provide arbitrary classes for the dismiss button. */
|
|
78
|
+
btnDismissClasses?: string;
|
|
79
|
+
/** Provide base classes for info toasts. */
|
|
80
|
+
stateInfo?: string;
|
|
81
|
+
/** Provide base classes for error toasts. */
|
|
82
|
+
stateError?: string;
|
|
83
|
+
/** Provide base classes for success toasts. */
|
|
84
|
+
stateSuccess?: string;
|
|
85
|
+
/** The default child slot for the toast provider. */
|
|
86
|
+
children?: Snippet;
|
|
87
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -12,8 +12,10 @@ export { default as Switch } from './components/Switch/Switch.svelte';
|
|
|
12
12
|
export { default as Tabs } from './components/Tab/index.js';
|
|
13
13
|
export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
|
|
14
14
|
export { default as Rating } from './components/Rating/index.js';
|
|
15
|
+
export type { FileUploadApi } from './components/FileUpload/types.js';
|
|
16
|
+
export { default as ToastProvider } from './components/Toast/ToastProvider.svelte';
|
|
17
|
+
export type { ToastContext } from './components/Toast/types.js';
|
|
15
18
|
export { default as Combobox } from './components/Combobox/Combobox.svelte';
|
|
16
19
|
export { default as Popover } from './components/Popover/Popover.svelte';
|
|
17
20
|
export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
|
|
18
21
|
export { default as Modal } from './components/Modal/Modal.svelte';
|
|
19
|
-
export type { FileUploadApi } from './components/FileUpload/types.js';
|
package/dist/index.js
CHANGED
|
@@ -18,8 +18,11 @@ export { default as Switch } from './components/Switch/Switch.svelte';
|
|
|
18
18
|
export { default as Tabs } from './components/Tab/index.js';
|
|
19
19
|
export { default as TagsInput } from './components/TagsInput/TagsInput.svelte';
|
|
20
20
|
export { default as Rating } from './components/Rating/index.js';
|
|
21
|
-
// Temporary
|
|
22
|
-
//
|
|
21
|
+
// Temporary Features ---
|
|
22
|
+
// The following will be removed or replaced in the future.
|
|
23
|
+
// Toasts
|
|
24
|
+
export { default as ToastProvider } from './components/Toast/ToastProvider.svelte';
|
|
25
|
+
// Popvers
|
|
23
26
|
export { default as Combobox } from './components/Combobox/Combobox.svelte';
|
|
24
27
|
export { default as Popover } from './components/Popover/Popover.svelte';
|
|
25
28
|
export { default as Tooltip } from './components/Tooltip/Tooltip.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonlabs/skeleton-svelte",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.12",
|
|
4
4
|
"description": "The Svelte package for Skeleton.",
|
|
5
5
|
"author": "endigo9740 <chris@skeletonlabs.dev>",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -22,25 +22,25 @@
|
|
|
22
22
|
"./dist/**/*.d.cts"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@zag-js/accordion": "^0.
|
|
26
|
-
"@zag-js/avatar": "^0.
|
|
27
|
-
"@zag-js/combobox": "^0.
|
|
28
|
-
"@zag-js/dialog": "^0.
|
|
29
|
-
"@zag-js/file-upload": "^0.
|
|
30
|
-
"@zag-js/pagination": "^0.
|
|
31
|
-
"@zag-js/popover": "^0.
|
|
32
|
-
"@zag-js/progress": "^0.
|
|
33
|
-
"@zag-js/radio-group": "^0.
|
|
34
|
-
"@zag-js/rating-group": "^0.
|
|
35
|
-
"@zag-js/slider": "^0.
|
|
36
|
-
"@zag-js/svelte": "^0.
|
|
37
|
-
"@zag-js/switch": "^0.
|
|
38
|
-
"@zag-js/tabs": "^0.
|
|
39
|
-
"@zag-js/tags-input": "^0.
|
|
40
|
-
"@zag-js/tooltip": "^0.
|
|
25
|
+
"@zag-js/accordion": "^0.75.0",
|
|
26
|
+
"@zag-js/avatar": "^0.75.0",
|
|
27
|
+
"@zag-js/combobox": "^0.75.0",
|
|
28
|
+
"@zag-js/dialog": "^0.75.0",
|
|
29
|
+
"@zag-js/file-upload": "^0.75.0",
|
|
30
|
+
"@zag-js/pagination": "^0.75.0",
|
|
31
|
+
"@zag-js/popover": "^0.75.0",
|
|
32
|
+
"@zag-js/progress": "^0.75.0",
|
|
33
|
+
"@zag-js/radio-group": "^0.75.0",
|
|
34
|
+
"@zag-js/rating-group": "^0.75.0",
|
|
35
|
+
"@zag-js/slider": "^0.75.0",
|
|
36
|
+
"@zag-js/svelte": "^0.75.0",
|
|
37
|
+
"@zag-js/switch": "^0.75.0",
|
|
38
|
+
"@zag-js/tabs": "^0.75.0",
|
|
39
|
+
"@zag-js/tags-input": "^0.75.0",
|
|
40
|
+
"@zag-js/tooltip": "^0.75.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
|
-
"svelte": "^5.0.0
|
|
43
|
+
"svelte": "^5.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@playwright/test": "^1.45.3",
|
|
@@ -57,14 +57,14 @@
|
|
|
57
57
|
"postcss": "^8.4.39",
|
|
58
58
|
"postcss-load-config": "^5.1.0",
|
|
59
59
|
"publint": "^0.1.16",
|
|
60
|
-
"svelte": "5.0.
|
|
60
|
+
"svelte": "^5.0.5",
|
|
61
61
|
"svelte-check": "^3.8.4",
|
|
62
62
|
"tailwindcss": "^3.4.6",
|
|
63
63
|
"tslib": "^2.6.3",
|
|
64
|
-
"typescript": "^5.
|
|
64
|
+
"typescript": "^5.6.3",
|
|
65
65
|
"vite": "^5.3.4",
|
|
66
66
|
"vitest": "^1.6.0",
|
|
67
|
-
"@skeletonlabs/skeleton": "3.0.0-next.
|
|
67
|
+
"@skeletonlabs/skeleton": "3.0.0-next.6",
|
|
68
68
|
"vite-plugin-tw-plugin-watcher": "0.0.1-next.0"
|
|
69
69
|
},
|
|
70
70
|
"type": "module",
|