@functionalcms/svelte-components 4.35.4 → 4.36.0

package/dist/components/layouts/MenuLayout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
-	import type { MenuSection } from "./menuLayout.js";
-	import Accordion from "../presentation/Accordion.svelte";
-	import Icon from "@iconify/svelte";
-	import { IconsSet, getIcon } from "../MaterialIconSet.js";
+	import type { Snippet } from 'svelte';
+	import type { MenuItem, MenuSection } from './menuLayout.js';
+	import Accordion from '../presentation/Accordion.svelte';
+	import Icon from '@iconify/svelte';
+	import { IconsSet, getIcon } from '../MaterialIconSet.js';
 
 	interface TwoColumnLayoutProps {
 		rightRender: Snippet;
@@ -14,13 +14,13 @@
 		collapsedWidthPx: number;
 		minWidthPercent: number;
 		maxWidthPercent: number;
-		menuItems: MenuSection[];
+		menuItems: Array<MenuSection | MenuItem>;
 		buttonCss: string;
 	}
 
 	let {
 		rightRender,
-		containerCss = "",
+		containerCss = '',
 		spitPercentage = 15,
 		isResizable = true,
 		isCollapsible = true,
@@ -28,14 +28,14 @@
 		minWidthPercent = 10,
 		maxWidthPercent = 80,
 		menuItems = [],
-		buttonCss = "",
+		buttonCss = ''
 	}: Partial<TwoColumnLayoutProps> = $props();
 
 	let container: HTMLElement | undefined = undefined;
 	let leftWidthPx = $state(0);
 	let isCollapsed = $state(false);
 	let isDragging = $state(false);
-	let iconStyleWidth = $derived(isCollapsed ? "2.25rem" : "1.5rem");
+	let iconStyleWidth = $derived(isCollapsed ? '2.25rem' : '1.5rem');
 
 	$effect(() => {
 		if (container) {
@@ -79,64 +79,58 @@
 
 	$effect(() => {
 		if (isDragging) {
-			document.addEventListener("mousemove", handleMouseMove);
-			document.addEventListener("mouseup", handleMouseUp);
+			document.addEventListener('mousemove', handleMouseMove);
+			document.addEventListener('mouseup', handleMouseUp);
 
 			return () => {
-				document.removeEventListener("mousemove", handleMouseMove);
-				document.removeEventListener("mouseup", handleMouseUp);
+				document.removeEventListener('mousemove', handleMouseMove);
+				document.removeEventListener('mouseup', handleMouseUp);
 			};
 		}
 	});
 </script>
 
+{#snippet itemRender(item: { icon: any; title: any; href: any })}
+	<a href={item.href} class="{buttonCss} button">
+		{#if item.icon}
+			<Icon icon={item.icon} width={iconStyleWidth} />
+		{/if}
+		{#if !isCollapsed}
+			{item.title}
+		{/if}
+	</a>
+{/snippet}
+
 <section class="layout {containerCss}" bind:this={container}>
-	<div
-		class="menu"
-		style:width={isCollapsed ? `${collapsedWidthPx}px` : `${leftWidthPx}px`}
-	>
+	<div class="menu" style:width={isCollapsed ? `${collapsedWidthPx}px` : `${leftWidthPx}px`}>
 		{#if isCollapsible}
 			<div class="toggle-button-container">
 				<button
 					class="toggle-button"
 					onclick={toggleCollapse}
-					aria-label={isCollapsed ? "Expand" : "Collapse"}
+					aria-label={isCollapsed ? 'Expand' : 'Collapse'}
 				>
 					{#if isCollapsed}
-						<Icon
-							icon={getIcon(IconsSet.arrow_menu_close)}
-							width="48"
-							height="48"
-						/>
+						<Icon icon={getIcon(IconsSet.arrow_menu_close)} width="48" height="48" />
 					{:else}
-						<Icon
-							icon={getIcon(IconsSet.arrow_menu_open)}
-							width="48"
-							height="48"
-						/>
+						<Icon icon={getIcon(IconsSet.arrow_menu_open)} width="48" height="48" />
 					{/if}
 				</button>
 			</div>
 		{/if}
 		<section>
 			{#each menuItems as section}
-				<Accordion title={section.title} css="section">
-					<div class="menu-section">
-						{#each section.items as item}
-							<a href={item.href} class="{buttonCss} button">
-								{#if item.icon}
-									<Icon
-										icon={item.icon}
-										width={iconStyleWidth}
-									/>
-								{/if}
-								{#if !isCollapsed}
-									{item.title}
-								{/if}
-							</a>
-						{/each}
-					</div>
-				</Accordion>
+				{#if section?.items}
+					<Accordion title={section.title} css="section">
+						<div class="menu-section">
+							{#each section.items as item}
+								{@render itemRender(item)}
+							{/each}
+						</div>
+					</Accordion>
+				{:else}
+					{@render itemRender(section)}
+				{/if}
 			{/each}
 		</section>
 	</div>

package/dist/components/layouts/MenuLayout.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-import type { MenuSection } from "./menuLayout.js";
+import type { Snippet } from 'svelte';
+import type { MenuItem, MenuSection } from './menuLayout.js';
 declare const MenuLayout: import("svelte").Component<Partial<{
     rightRender: Snippet;
     containerCss: string;
@@ -9,7 +9,7 @@ declare const MenuLayout: import("svelte").Component<Partial<{
     collapsedWidthPx: number;
     minWidthPercent: number;
     maxWidthPercent: number;
-    menuItems: MenuSection[];
+    menuItems: Array<MenuSection | MenuItem>;
     buttonCss: string;
 }>, {}, "">;
 type MenuLayout = ReturnType<typeof MenuLayout>;

package/dist/server-side/getServices.d.ts

@@ -1,4 +1,4 @@
-import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService } from "@functionalcms/services";
+import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService, FilesService } from "@functionalcms/services";
 import type { Locals } from "./types.js";
 export declare const getDataService: (locals: Locals, endpoint?: string | undefined) => DataService;
 export declare const getCommunicationService: (locals: Locals, endpoint?: string | undefined) => CommunicationService;
@@ -7,3 +7,4 @@ export declare const getTemplateService: (locals: Locals, endpoint?: string | un
 export declare const getBlobService: (locals: Locals, endpoint?: string | undefined) => BlobService;
 export declare const getAIService: (locals: Locals, endpoint?: string | undefined) => AiService;
 export declare const getAuthService: (locals: Locals, endpoint?: string | undefined) => AuthService;
+export declare const getFileService: (locals: Locals, endpoint?: string | undefined) => FilesService;

package/dist/server-side/getServices.js

@@ -1,5 +1,5 @@
 import { DOMAIN, ENDPOINT } from "$env/static/private";
-import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService, } from "@functionalcms/services";
+import { CommunicationService, DataService, TemplateService, WebsitesService, BlobService, AiService, AuthService, FilesService, } from "@functionalcms/services";
 const getAccessToken = (locals) => {
     return locals.token.access_token;
 };
@@ -45,3 +45,9 @@ export const getAuthService = (locals, endpoint = undefined) => {
     const service = new AuthService(accessToken, serviceEndopint);
     return service;
 };
+export const getFileService = (locals, endpoint = undefined) => {
+    const accessToken = getAccessToken(locals);
+    const serviceEndopint = endpoint ?? ENDPOINT;
+    const service = new FilesService(accessToken, serviceEndopint);
+    return service;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.35.4",
+	"version": "4.36.0",
 	"license": "MIT",
 	"watch": {
 		"build": {
@@ -46,7 +46,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.9",
 		"@eslint/js": "^9.26.0",
-		"@functionalcms/services": "^0.12.0",
+		"@functionalcms/services": "latest",
 		"@iconify/json": "^2.2.429",
 		"@iconify/svelte": "^5.2.1",
 		"@sveltejs/adapter-auto": "^4.0.0",

package/dist/components/icons.d.ts

@@ -1,2 +0,0 @@
-export declare enum Icons {
-}

package/dist/components/icons.js

@@ -1,3 +0,0 @@
-export var Icons;
-(function (Icons) {
-})(Icons || (Icons = {}));