m3-svelte 5.10.0 → 5.11.0
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/package/containers/NewSnackbar.svelte +113 -0
- package/package/containers/NewSnackbar.svelte.d.ts +7 -0
- package/package/containers/Snackbar.svelte +4 -0
- package/package/containers/Snackbar.svelte.d.ts +1 -0
- package/package/index.d.ts +1 -0
- package/package/index.js +1 -0
- package/package.json +8 -8
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
export const snackbar = (
|
|
3
|
+
message: string,
|
|
4
|
+
actions?: Record<string, () => void>,
|
|
5
|
+
closable?: boolean,
|
|
6
|
+
/*
|
|
7
|
+
undefined/unset -> 4s timeout
|
|
8
|
+
2000 -> 2s timeout
|
|
9
|
+
-1 -> no timeout
|
|
10
|
+
*/
|
|
11
|
+
timeout?: number,
|
|
12
|
+
) => {
|
|
13
|
+
_show(message, actions, closable, timeout);
|
|
14
|
+
};
|
|
15
|
+
let _show: typeof snackbar;
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import { fade } from "svelte/transition";
|
|
20
|
+
import iconX from "@ktibow/iconset-material-symbols/close";
|
|
21
|
+
import Icon from "../misc/Icon.svelte";
|
|
22
|
+
import SnackbarItem from "./SnackbarItem.svelte";
|
|
23
|
+
import Layer from "../misc/Layer.svelte";
|
|
24
|
+
|
|
25
|
+
let { closeTitle = "Close" }: { closeTitle?: string } = $props();
|
|
26
|
+
let shown:
|
|
27
|
+
| { message: string; actions: Record<string, () => void>; closable: boolean }
|
|
28
|
+
| undefined = $state();
|
|
29
|
+
let timeoutId: number;
|
|
30
|
+
_show = (message, actions = {}, closable = false, timeout = 4000) => {
|
|
31
|
+
shown = { message, actions, closable };
|
|
32
|
+
clearTimeout(timeoutId);
|
|
33
|
+
if (timeout && timeout > 0)
|
|
34
|
+
timeoutId = setTimeout(() => {
|
|
35
|
+
shown = undefined;
|
|
36
|
+
}, timeout);
|
|
37
|
+
};
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
{#if shown}
|
|
41
|
+
<div class="holder" out:fade={{ duration: 200 }}>
|
|
42
|
+
{#key shown}
|
|
43
|
+
<SnackbarItem>
|
|
44
|
+
<p class="m3-font-body-medium">{shown.message}</p>
|
|
45
|
+
{#each Object.entries(shown.actions) as [key, action]}
|
|
46
|
+
<button
|
|
47
|
+
type="button"
|
|
48
|
+
class="action m3-font-label-large"
|
|
49
|
+
onclick={() => {
|
|
50
|
+
shown = undefined;
|
|
51
|
+
action();
|
|
52
|
+
}}
|
|
53
|
+
>
|
|
54
|
+
{key}
|
|
55
|
+
</button>
|
|
56
|
+
{/each}
|
|
57
|
+
{#if shown.closable}
|
|
58
|
+
<button
|
|
59
|
+
type="button"
|
|
60
|
+
class="close"
|
|
61
|
+
title={closeTitle}
|
|
62
|
+
onclick={() => {
|
|
63
|
+
shown = undefined;
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
<Layer />
|
|
67
|
+
<Icon icon={iconX} />
|
|
68
|
+
</button>
|
|
69
|
+
{/if}
|
|
70
|
+
</SnackbarItem>
|
|
71
|
+
{/key}
|
|
72
|
+
</div>
|
|
73
|
+
{/if}
|
|
74
|
+
|
|
75
|
+
<style>
|
|
76
|
+
.holder {
|
|
77
|
+
position: fixed;
|
|
78
|
+
padding-bottom: 1rem;
|
|
79
|
+
bottom: var(--m3-util-bottom-offset);
|
|
80
|
+
left: 50%;
|
|
81
|
+
transform: translate(-50%, 0);
|
|
82
|
+
z-index: 3;
|
|
83
|
+
}
|
|
84
|
+
p {
|
|
85
|
+
margin-right: auto;
|
|
86
|
+
}
|
|
87
|
+
button {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-self: stretch;
|
|
90
|
+
align-items: center;
|
|
91
|
+
margin: 0;
|
|
92
|
+
padding: 0;
|
|
93
|
+
border: none;
|
|
94
|
+
|
|
95
|
+
background-color: transparent;
|
|
96
|
+
color: unset;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
position: relative;
|
|
99
|
+
}
|
|
100
|
+
button :global(svg) {
|
|
101
|
+
width: 1.5rem;
|
|
102
|
+
height: 1.5rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.action {
|
|
106
|
+
color: rgb(var(--m3-scheme-inverse-primary));
|
|
107
|
+
padding: 0 0.5rem;
|
|
108
|
+
}
|
|
109
|
+
.close {
|
|
110
|
+
padding: 0 0.75rem;
|
|
111
|
+
margin-right: -1rem;
|
|
112
|
+
}
|
|
113
|
+
</style>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const snackbar: (message: string, actions?: Record<string, () => void>, closable?: boolean, timeout?: number) => void;
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
closeTitle?: string;
|
|
4
|
+
};
|
|
5
|
+
declare const NewSnackbar: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type NewSnackbar = ReturnType<typeof NewSnackbar>;
|
|
7
|
+
export default NewSnackbar;
|
|
@@ -12,6 +12,7 @@ type $$ComponentProps = {
|
|
|
12
12
|
config?: SnackbarConfig;
|
|
13
13
|
closeButtonTitle?: string;
|
|
14
14
|
} & DivAttrs;
|
|
15
|
+
/** @deprecated use NewSnackbar instead */
|
|
15
16
|
declare const Snackbar: import("svelte").Component<$$ComponentProps, {
|
|
16
17
|
show: ({ message, actions, closable, timeout }: SnackbarIn) => void;
|
|
17
18
|
}, "">;
|
package/package/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export { default as MenuItem } from "./containers/MenuItem.svelte";
|
|
|
18
18
|
export { default as Snackbar } from "./containers/Snackbar.svelte";
|
|
19
19
|
export type { SnackbarIn } from "./containers/Snackbar.svelte";
|
|
20
20
|
export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
|
|
21
|
+
export { default as NewSnackbar, snackbar } from "./containers/NewSnackbar.svelte";
|
|
21
22
|
export { default as Checkbox } from "./forms/Checkbox.svelte";
|
|
22
23
|
export { default as Chip } from "./forms/Chip.svelte";
|
|
23
24
|
export { default as CircularProgress } from "./forms/CircularProgress.svelte";
|
package/package/index.js
CHANGED
|
@@ -17,6 +17,7 @@ export { default as Menu } from "./containers/Menu.svelte";
|
|
|
17
17
|
export { default as MenuItem } from "./containers/MenuItem.svelte";
|
|
18
18
|
export { default as Snackbar } from "./containers/Snackbar.svelte";
|
|
19
19
|
export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
|
|
20
|
+
export { default as NewSnackbar, snackbar } from "./containers/NewSnackbar.svelte";
|
|
20
21
|
export { default as Checkbox } from "./forms/Checkbox.svelte";
|
|
21
22
|
export { default as Chip } from "./forms/Chip.svelte";
|
|
22
23
|
export { default as CircularProgress } from "./forms/CircularProgress.svelte";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "m3-svelte",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.11.0",
|
|
4
4
|
"license": "Apache-2.0 OR GPL-3.0-only",
|
|
5
5
|
"repository": "KTibow/m3-svelte",
|
|
6
6
|
"author": {
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@iconify/types": "^2.0.0",
|
|
38
|
-
"@ktibow/iconset-material-symbols": "~0.0.
|
|
39
|
-
"@ktibow/material-color-utilities-nightly": "^0.3.
|
|
40
|
-
"svelte": "^5.
|
|
38
|
+
"@ktibow/iconset-material-symbols": "~0.0.1760591837",
|
|
39
|
+
"@ktibow/material-color-utilities-nightly": "^0.3.11760728781000",
|
|
40
|
+
"svelte": "^5.41.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@eslint/compat": "^1.4.0",
|
|
44
|
-
"@eslint/js": "^9.
|
|
44
|
+
"@eslint/js": "^9.38.0",
|
|
45
45
|
"@sveltejs/adapter-static": "^3.0.10",
|
|
46
|
-
"@sveltejs/kit": "^2.
|
|
46
|
+
"@sveltejs/kit": "^2.47.1",
|
|
47
47
|
"@sveltejs/package": "^2.5.4",
|
|
48
48
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
|
49
|
-
"eslint": "^9.
|
|
49
|
+
"eslint": "^9.38.0",
|
|
50
50
|
"eslint-config-prettier": "^10.1.8",
|
|
51
51
|
"eslint-plugin-svelte": "^3.12.4",
|
|
52
52
|
"fast-glob": "^3.3.3",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"svelte-highlight": "^7.8.4",
|
|
59
59
|
"typescript": "^5.9.3",
|
|
60
60
|
"typescript-eslint": "^8.46.1",
|
|
61
|
-
"vite": "^7.1.
|
|
61
|
+
"vite": "^7.1.10"
|
|
62
62
|
},
|
|
63
63
|
"keywords": [
|
|
64
64
|
"svelte",
|