m3-svelte 5.9.1 → 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/buttons/Button.svelte +11 -39
- package/package/containers/Card.svelte +6 -4
- 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/nav/NavCMLXItem.svelte +20 -15
- package/package/nav/NavCMLXItem.svelte.d.ts +1 -1
- package/package.json +9 -9
|
@@ -14,54 +14,27 @@
|
|
|
14
14
|
children: Snippet;
|
|
15
15
|
} & ActionProps;
|
|
16
16
|
|
|
17
|
-
let
|
|
18
|
-
</script>
|
|
19
|
-
|
|
20
|
-
{#if "for" in props}
|
|
21
|
-
{@const {
|
|
17
|
+
let {
|
|
22
18
|
variant = "filled",
|
|
23
|
-
for: forItem,
|
|
24
19
|
square = false,
|
|
25
20
|
iconType = "none",
|
|
26
21
|
children,
|
|
27
|
-
...
|
|
28
|
-
} = props
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{...extra}
|
|
34
|
-
>
|
|
22
|
+
...props
|
|
23
|
+
}: Props = $props();
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#if "for" in props}
|
|
27
|
+
<label class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
|
|
35
28
|
<Layer />
|
|
36
29
|
{@render children()}
|
|
37
30
|
</label>
|
|
38
31
|
{:else if "href" in props}
|
|
39
|
-
{
|
|
40
|
-
variant = "filled",
|
|
41
|
-
href,
|
|
42
|
-
square = false,
|
|
43
|
-
iconType = "none",
|
|
44
|
-
children,
|
|
45
|
-
...extra
|
|
46
|
-
} = props}
|
|
47
|
-
<a
|
|
48
|
-
{href}
|
|
49
|
-
class="m3-container m3-font-label-large {variant} icon-{iconType}"
|
|
50
|
-
class:square
|
|
51
|
-
{...extra}
|
|
52
|
-
>
|
|
32
|
+
<a class="m3-container m3-font-label-large {variant} icon-{iconType}" class:square {...props}>
|
|
53
33
|
<Layer />
|
|
54
34
|
{@render children()}
|
|
55
35
|
</a>
|
|
56
36
|
{:else if "summary" in props}
|
|
57
|
-
{@const {
|
|
58
|
-
variant = "filled",
|
|
59
|
-
square = false,
|
|
60
|
-
iconType = "none",
|
|
61
|
-
children,
|
|
62
|
-
summary: _,
|
|
63
|
-
...extra
|
|
64
|
-
} = props}
|
|
37
|
+
{@const { summary: _, ...extra } = props}
|
|
65
38
|
<summary
|
|
66
39
|
class="m3-container m3-font-label-large {variant} icon-{iconType}"
|
|
67
40
|
class:square
|
|
@@ -71,12 +44,11 @@
|
|
|
71
44
|
{@render children()}
|
|
72
45
|
</summary>
|
|
73
46
|
{:else}
|
|
74
|
-
{@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
|
|
75
47
|
<button
|
|
76
|
-
type={"onclick" in
|
|
48
|
+
type={"onclick" in props ? "button" : "submit"}
|
|
77
49
|
class="m3-container m3-font-label-large {variant} icon-{iconType}"
|
|
78
50
|
class:square
|
|
79
|
-
{...
|
|
51
|
+
{...props}
|
|
80
52
|
>
|
|
81
53
|
<Layer />
|
|
82
54
|
{@render children()}
|
|
@@ -5,20 +5,22 @@
|
|
|
5
5
|
|
|
6
6
|
type ActionProps = ButtonAttrs | DivAttrs;
|
|
7
7
|
|
|
8
|
-
let
|
|
8
|
+
let {
|
|
9
|
+
variant,
|
|
10
|
+
children,
|
|
11
|
+
...extra
|
|
12
|
+
}: {
|
|
9
13
|
variant: "elevated" | "filled" | "outlined";
|
|
10
14
|
children: Snippet;
|
|
11
15
|
} & ActionProps = $props();
|
|
12
16
|
</script>
|
|
13
17
|
|
|
14
|
-
{#if "onclick" in
|
|
15
|
-
{@const { variant, children, ...extra } = props}
|
|
18
|
+
{#if "onclick" in extra}
|
|
16
19
|
<button type="button" class="m3-container {variant}" {...extra}>
|
|
17
20
|
<Layer />
|
|
18
21
|
{@render children()}
|
|
19
22
|
</button>
|
|
20
23
|
{:else}
|
|
21
|
-
{@const { variant, children, ...extra } = props}
|
|
22
24
|
<div class="m3-container {variant}" {...extra}>
|
|
23
25
|
{@render children()}
|
|
24
26
|
</div>
|
|
@@ -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";
|
|
@@ -5,9 +5,15 @@
|
|
|
5
5
|
import Layer from "../misc/Layer.svelte";
|
|
6
6
|
|
|
7
7
|
type ActionProps =
|
|
8
|
-
| ({ click
|
|
8
|
+
| ({ click?: () => void } & HTMLButtonAttributes) // deprecated: drop in favour of `onclick`
|
|
9
9
|
| ({ href: string } & HTMLAnchorAttributes);
|
|
10
|
-
let
|
|
10
|
+
let {
|
|
11
|
+
variant,
|
|
12
|
+
icon,
|
|
13
|
+
text,
|
|
14
|
+
selected,
|
|
15
|
+
...props
|
|
16
|
+
}: {
|
|
11
17
|
variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
|
|
12
18
|
icon: IconifyIcon;
|
|
13
19
|
text: string;
|
|
@@ -15,15 +21,8 @@
|
|
|
15
21
|
} & ActionProps = $props();
|
|
16
22
|
</script>
|
|
17
23
|
|
|
18
|
-
{#if "
|
|
19
|
-
|
|
20
|
-
<button
|
|
21
|
-
type="button"
|
|
22
|
-
onclick={click}
|
|
23
|
-
class="m3-container m3-font-label-medium {variant}"
|
|
24
|
-
disabled={selected}
|
|
25
|
-
{...extra}
|
|
26
|
-
>
|
|
24
|
+
{#if "href" in props}
|
|
25
|
+
<a class="m3-container m3-font-label-medium {variant}" {...props}>
|
|
27
26
|
<div class="content" class:selected>
|
|
28
27
|
<Layer />
|
|
29
28
|
<div class="icon">
|
|
@@ -31,10 +30,16 @@
|
|
|
31
30
|
</div>
|
|
32
31
|
{text}
|
|
33
32
|
</div>
|
|
34
|
-
</
|
|
33
|
+
</a>
|
|
35
34
|
{:else}
|
|
36
|
-
{@const {
|
|
37
|
-
<
|
|
35
|
+
{@const { click, ...extra } = props}
|
|
36
|
+
<button
|
|
37
|
+
type="button"
|
|
38
|
+
onclick={click}
|
|
39
|
+
class="m3-container m3-font-label-medium {variant}"
|
|
40
|
+
disabled={selected}
|
|
41
|
+
{...extra}
|
|
42
|
+
>
|
|
38
43
|
<div class="content" class:selected>
|
|
39
44
|
<Layer />
|
|
40
45
|
<div class="icon">
|
|
@@ -42,7 +47,7 @@
|
|
|
42
47
|
</div>
|
|
43
48
|
{text}
|
|
44
49
|
</div>
|
|
45
|
-
</
|
|
50
|
+
</button>
|
|
46
51
|
{/if}
|
|
47
52
|
|
|
48
53
|
<style>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { IconifyIcon } from "@iconify/types";
|
|
2
2
|
import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
|
|
3
3
|
type ActionProps = ({
|
|
4
|
-
click
|
|
4
|
+
click?: () => void;
|
|
5
5
|
} & HTMLButtonAttributes) | ({
|
|
6
6
|
href: string;
|
|
7
7
|
} & HTMLAnchorAttributes);
|
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",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"svelte-check": "^4.3.3",
|
|
58
58
|
"svelte-highlight": "^7.8.4",
|
|
59
59
|
"typescript": "^5.9.3",
|
|
60
|
-
"typescript-eslint": "^8.46.
|
|
61
|
-
"vite": "^7.1.
|
|
60
|
+
"typescript-eslint": "^8.46.1",
|
|
61
|
+
"vite": "^7.1.10"
|
|
62
62
|
},
|
|
63
63
|
"keywords": [
|
|
64
64
|
"svelte",
|