@functionalcms/svelte-components 5.18.1 → 5.20.0

package/dist/components/content/EmptyState.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { SolidIcons } from '../icons';
+	import { default as Icon } from '../Icon.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		items: Array<any>;
+		icon: string;
+		label: string;
+        children: Snippet;
+	}
+
+	let { items = [], icon = SolidIcons.Folder, label = '', children }: Partial<Props> = $props();
+</script>
+
+{#if items.length === 0}
+    <div class="flex min-h-64 flex-col items-center justify-center gap-2 text-gray-400">
+        <Icon {icon} class="h-12 w-12" />
+        <p>{label}</p>
+    </div>
+{:else}
+    {@render children?.()}
+{/if}

package/dist/components/content/EmptyState.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EmptyStateProps = typeof __propDef.props;
+export type EmptyStateEvents = typeof __propDef.events;
+export type EmptyStateSlots = typeof __propDef.slots;
+export default class EmptyState extends SvelteComponentTyped<EmptyStateProps, EmptyStateEvents, EmptyStateSlots> {
+}
+export {};

package/dist/components/layouts/MenuLayout.svelte

@@ -71,9 +71,13 @@
 			{#each menuItems as item}
 				{#if !isCollapsed}
 					{#if 'items' in item}
-						<SidebarDropdownWrapper label={item.label}>
+						<SidebarDropdownWrapper label={item.label} isOpen={item.isOpen}>
 							{#each item.items as subItem}
-								<SidebarDropdownItem label={subItem.label} href={subItem.href} />
+								<SidebarItem label={subItem.label} href={subItem.href}>
+									{#snippet icon()}
+										<Icon icon={subItem.icon} />
+									{/snippet}
+								</SidebarItem>
 							{/each}
 						</SidebarDropdownWrapper>
 					{:else}
@@ -89,6 +93,15 @@
 							<Icon icon={item.icon} />
 						{/snippet}
 					</SidebarItem>
+					{#if item.items && item.isOpen}
+						{#each item.items as subItem}
+							<SidebarItem label="" href={subItem.href}>
+								{#snippet icon()}
+									<Icon icon={subItem.icon} />
+								{/snippet}
+							</SidebarItem>
+						{/each}
+					{/if}
 				{/if}
 			{/each}
 		</SidebarGroup>

package/dist/components/layouts/menuItems.d.ts

@@ -16,6 +16,7 @@ export type MenuSection = {
     href?: string;
     icon?: string;
     visibility?: Visibility;
+    isOpen?: boolean;
 };
 export type MenuDivider = {};
 export type MenuOption = MenuItem | MenuSection;

package/dist/index.d.ts

@@ -24,3 +24,4 @@ export { type BlogPost } from './components/blog/Post.js';
 export { type getTags } from './components/blog/blogService.js';
 export { getPosts } from './components/blog/blogService.js';
 export { Tree } from '@keenmate/svelte-treeview';
+export { default as EmptyState } from './components/content/EmptyState.svelte';

package/dist/index.js

@@ -23,3 +23,4 @@ export {} from './components/blog/Post.js';
 export {} from './components/blog/blogService.js';
 export { getPosts } from './components/blog/blogService.js';
 export { Tree } from '@keenmate/svelte-treeview';
+export { default as EmptyState } from './components/content/EmptyState.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.18.1",
+	"version": "5.20.0",
 	"license": "MIT",
 	"watch": {
 		"build": {