@functionalcms/svelte-components 4.2.24 → 4.3.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/dist/components/form/Button.svelte +2 -2
- package/dist/components/menu/HamburgerMenu.svelte +0 -1
- package/dist/components/presentation/EmptyState.svelte +67 -0
- package/dist/components/presentation/EmptyState.svelte.d.ts +10 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
aria-label={ariaLabel}
|
|
92
92
|
tabindex={tabIndex}
|
|
93
93
|
onclick={click}
|
|
94
|
-
onkeydown={
|
|
94
|
+
onkeydown={keydown}
|
|
95
95
|
{...restProps}
|
|
96
96
|
>
|
|
97
97
|
{@render children?.()}
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
tabindex={tabIndex}
|
|
109
109
|
disabled={isDisabled}
|
|
110
110
|
onclick={click}
|
|
111
|
-
onkeydown={
|
|
111
|
+
onkeydown={keydown}
|
|
112
112
|
{...restProps}
|
|
113
113
|
>
|
|
114
114
|
{@render children?.()}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { cn } from '../../utils.ts';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
header: Snippet;
|
|
7
|
+
footer: Snippet;
|
|
8
|
+
children: Snippet;
|
|
9
|
+
isRounded: boolean;
|
|
10
|
+
isBordered: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let {
|
|
14
|
+
header,
|
|
15
|
+
footer,
|
|
16
|
+
children,
|
|
17
|
+
isRounded = false,
|
|
18
|
+
isBordered = false
|
|
19
|
+
}: Partial<Props> = $props();
|
|
20
|
+
|
|
21
|
+
const emptyClasses: string = cn(
|
|
22
|
+
'empty',
|
|
23
|
+
isRounded ? 'empty-rounded' : '',
|
|
24
|
+
isBordered ? 'empty-bordered' : ''
|
|
25
|
+
);
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
<div class={emptyClasses}>
|
|
29
|
+
{#if header}
|
|
30
|
+
{@render header()}
|
|
31
|
+
{/if}
|
|
32
|
+
{@render children?.()}
|
|
33
|
+
<div class="empty-actions">
|
|
34
|
+
{#if footer}
|
|
35
|
+
{@render footer()}
|
|
36
|
+
{/if}
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<style>
|
|
41
|
+
.empty-base,
|
|
42
|
+
.empty {
|
|
43
|
+
display: flex;
|
|
44
|
+
flex-flow: column wrap;
|
|
45
|
+
align-items: center;
|
|
46
|
+
text-align: center;
|
|
47
|
+
width: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.empty {
|
|
51
|
+
padding: calc(2 * var(--agnostic-side-padding));
|
|
52
|
+
background: var(--agnostic-gray-extra-light);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.empty-bordered {
|
|
56
|
+
background: transparent;
|
|
57
|
+
border: 1px solid var(--agnostic-gray-light);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.empty-rounded {
|
|
61
|
+
border-radius: var(--agnostic-radius);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.empty-actions {
|
|
65
|
+
margin-block-start: var(--spacing-24);
|
|
66
|
+
}
|
|
67
|
+
</style>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
declare const EmptyState: import("svelte").Component<Partial<{
|
|
3
|
+
header: Snippet;
|
|
4
|
+
footer: Snippet;
|
|
5
|
+
children: Snippet;
|
|
6
|
+
isRounded: boolean;
|
|
7
|
+
isBordered: boolean;
|
|
8
|
+
}>, {}, "">;
|
|
9
|
+
type EmptyState = ReturnType<typeof EmptyState>;
|
|
10
|
+
export default EmptyState;
|
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export type { CarouselItem } from './components/presentation/Carousel.js';
|
|
|
16
16
|
export { default as Carousel } from './components/presentation/Carousel.svelte';
|
|
17
17
|
export { default as Drawer } from './components/presentation/Drawer.svelte';
|
|
18
18
|
export { default as Disclose } from './components/presentation/Disclose.svelte';
|
|
19
|
+
export { default as EmptyState } from './components/presentation/EmptyState.svelte';
|
|
19
20
|
export { default as ListMenu } from './components/menu/ListMenu.svelte';
|
|
20
21
|
export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
|
|
21
22
|
export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
|
package/dist/index.js
CHANGED
|
@@ -23,6 +23,7 @@ export { default as Gallery } from './components/presentation/Gallery.svelte';
|
|
|
23
23
|
export { default as Carousel } from './components/presentation/Carousel.svelte';
|
|
24
24
|
export { default as Drawer } from './components/presentation/Drawer.svelte';
|
|
25
25
|
export { default as Disclose } from './components/presentation/Disclose.svelte';
|
|
26
|
+
export { default as EmptyState } from './components/presentation/EmptyState.svelte';
|
|
26
27
|
/*
|
|
27
28
|
* Menu
|
|
28
29
|
*/
|