@functionalcms/svelte-components 4.2.25 → 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.
|
@@ -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
|
*/
|