@functionalcms/svelte-components 4.31.0 → 4.35.0

package/dist/components/icons.d.ts

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

package/dist/components/icons.js

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

package/dist/components/layouts/MenuLayout.svelte

@@ -0,0 +1,228 @@
+<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";
+
+	interface TwoColumnLayoutProps {
+		rightRender: Snippet;
+		containerCss: string;
+		spitPercentage: number;
+		isResizable: boolean;
+		isCollapsible: boolean;
+		collapsedWidthPx: number;
+		minWidthPercent: number;
+		maxWidthPercent: number;
+		menuItems: MenuSection[];
+		buttonCss: string;
+	}
+
+	let {
+		rightRender,
+		containerCss = "",
+		spitPercentage = 15,
+		isResizable = true,
+		isCollapsible = true,
+		collapsedWidthPx = 60,
+		minWidthPercent = 10,
+		maxWidthPercent = 80,
+		menuItems = [],
+		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");
+
+	$effect(() => {
+		if (container) {
+			const containerWidth = container.getBoundingClientRect().width;
+			leftWidthPx = containerWidth * (spitPercentage / 100);
+		}
+	});
+
+	const toggleCollapse = () => {
+		isCollapsed = !isCollapsed;
+	};
+
+	let startX = 0;
+
+	const handleMouseDown = (event: MouseEvent) => {
+		isDragging = true;
+		startX = event.clientX;
+		event.preventDefault();
+	};
+
+	const handleMouseMove = (event: MouseEvent) => {
+		if (!isDragging) {
+			return;
+		}
+
+		const deltaX = event.clientX - startX;
+		const containerWidth = container?.getBoundingClientRect().width || 1;
+		const newWidth = leftWidthPx + deltaX;
+		const minWidthPx = containerWidth * (minWidthPercent / 100);
+		const maxWidthPx = containerWidth * (maxWidthPercent / 100);
+
+		if (newWidth >= minWidthPx && newWidth <= maxWidthPx) {
+			leftWidthPx = newWidth;
+			startX = event.clientX;
+		}
+	};
+
+	const handleMouseUp = () => {
+		isDragging = false;
+	};
+
+	$effect(() => {
+		if (isDragging) {
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+
+			return () => {
+				document.removeEventListener("mousemove", handleMouseMove);
+				document.removeEventListener("mouseup", handleMouseUp);
+			};
+		}
+	});
+</script>
+
+<section class="layout {containerCss}" bind:this={container}>
+	<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"}
+				>
+					{#if isCollapsed}
+						<Icon
+							icon={getIcon(IconsSet.arrow_menu_close)}
+							width="48"
+							height="48"
+						/>
+					{:else}
+						<Icon
+							icon={getIcon(IconsSet.arrow_menu_open)}
+							width="48"
+							height="48"
+						/>
+					{/if}
+				</button>
+			</div>
+		{/if}
+		<section>
+			{#each menuItems as section}
+				<Accordion title={section.title}>
+					<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>
+			{/each}
+		</section>
+	</div>
+
+	{#if isResizable && !isCollapsed}
+		<div
+			class="isResizable"
+			onmousedown={handleMouseDown}
+			role="separator"
+			aria-label="Resizer"
+		></div>
+	{/if}
+
+	<div class="content" style:flex="1">
+		{@render rightRender?.()}
+	</div>
+</section>
+
+<style>
+	.container {
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.left {
+		transition: width 0.3s ease;
+		position: relative;
+		overflow-x: hidden;
+	}
+	.right {
+	}
+	.isResizable {
+		width: 4px;
+		background-color: #e0e0e0;
+		cursor: col-resize;
+		transition: background-color 0.2s;
+		flex-shrink: 0;
+	}
+	.isResizable:hover {
+		background-color: #0078d4;
+	}
+	.toggle-button-container {
+		position: sticky;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		padding: 0 8px;
+		background-color: transparent;
+		z-index: 100;
+	}
+	.toggle-button {
+		background-color: transparent;
+		border: none;
+		width: 32px;
+		height: 32px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		border-radius: 2px;
+		color: #323130;
+		transition: background-color 0.1s;
+		padding: 0;
+	}
+	.toggle-button:hover {
+		background-color: rgba(0, 0, 0, 0.05);
+	}
+	.toggle-button:active {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+	.menu-section {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.button {
+		width: 100%;
+		height: 2em;
+		text-decoration: none;
+	}
+	.button:hover {
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { MenuSection } from "./menuLayout.js";
+declare const MenuLayout: import("svelte").Component<Partial<{
+    rightRender: Snippet;
+    containerCss: string;
+    spitPercentage: number;
+    isResizable: boolean;
+    isCollapsible: boolean;
+    collapsedWidthPx: number;
+    minWidthPercent: number;
+    maxWidthPercent: number;
+    menuItems: MenuSection[];
+    buttonCss: string;
+}>, {}, "">;
+type MenuLayout = ReturnType<typeof MenuLayout>;
+export default MenuLayout;

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -1,174 +1,44 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import { cn } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	interface Css {}
 
 	interface TwoColumnLayoutProps {
 		leftRender: Snippet;
 		rightRender: Snippet;
 		containerCss: string;
-		spitPercentage: number;
-		isResizable: boolean;
-		isCollapsible: boolean;
-		collapsedWidthPx: number;
-		minWidthPercent: number;
-		maxWidthPercent: number;
+		leftCss: string;
+		rightCss: string;
+		isFullWidth: boolean;
+		isFullHeight: boolean;
 	}
 
 	let {
 		leftRender,
 		rightRender,
-		containerCss = "",
-		spitPercentage = 30,
-		isResizable = true,
-		isCollapsible = true,
-		collapsedWidthPx = 60,
-		minWidthPercent = 10,
-		maxWidthPercent = 80,
-	}: Partial<TwoColumnLayoutProps> = $props();
-
-	let container: HTMLElement | undefined = undefined;
-	let leftWidthPx = $state(0);
-	let isCollapsed = $state(false);
-	let isDragging = $state(false);
-	
-	$effect(() => {
-		if (container) {
-			const containerWidth = container.getBoundingClientRect().width;
-			leftWidthPx = containerWidth * (spitPercentage / 100);
-		}
-	});
-
-	const toggleCollapse = () => {
-		isCollapsed = !isCollapsed;
-	};
-
-	let startX = 0;
-	
-	const handleMouseDown = (event: MouseEvent) => {
-		isDragging = true;
-		startX = event.clientX;
-		event.preventDefault();
-	};
-
-	const handleMouseMove = (event: MouseEvent) => {
-		if (!isDragging) return;
-		
-		const deltaX = event.clientX - startX;
-		const containerWidth = container?.getBoundingClientRect().width || 1;
-		const newWidth = leftWidthPx + deltaX;
-		const minWidthPx = containerWidth * (minWidthPercent / 100);
-		const maxWidthPx = containerWidth * (maxWidthPercent / 100);
-
-		if (newWidth >= minWidthPx && newWidth <= maxWidthPx) {
-			leftWidthPx = newWidth;
-			startX = event.clientX;
-		}
-	};
-
-	const handleMouseUp = () => {
-		isDragging = false;
-	};
-
-	$effect(() => {
-		if (isDragging) {
-			document.addEventListener('mousemove', handleMouseMove);
-			document.addEventListener('mouseup', handleMouseUp);
-			
-			return () => {
-				document.removeEventListener('mousemove', handleMouseMove);
-				document.removeEventListener('mouseup', handleMouseUp);
-			};
-		}
-	});
+		isFullWidth = true,
+		isFullHeight = true,
+		containerCss = '',
+		leftCss = 'w50p',
+		rightCss = 'w50p'
+	}: TwoColumnLayoutProps = $props();
+
+	let containerCssEx = cn(
+		'flex flex-row-dynamic',
+		isFullWidth ? 'fw' : '',
+		isFullHeight ? 'fh' : '',
+		containerCss,
+	);
 </script>
 
-<section class="container {containerCss}" bind:this={container}>
-	<div class="left" 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"}>
-					<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-						{#if isCollapsed}
-							<path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-						{:else}
-							<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-						{/if}
-					</svg>
-				</button>
-			</div>
-		{/if}
-		{@render leftRender?.(isCollapsed)}
+<section class={containerCssEx}>
+	<div class="left {leftCss}">
+		{@render leftRender()}
 	</div>
-
-	{#if isResizable && !isCollapsed}
-		<div
-			class="isResizable"
-			onmousedown={handleMouseDown}
-			role="separator"
-			aria-label="Resizer"
-		></div>
-	{/if}
-
-	<div class="right" style:flex="1">
-		{@render rightRender?.()}
+	<div class="right {rightCss}">
+		{@render rightRender()}
 	</div>
 </section>
 
-<style>
-	.container {
-		display: flex;
-		flex-direction: row;
-		width: 100%;
-		height: 100%;
-		position: relative;
-	}
-	.left {
-		transition: width 0.3s ease;
-		position: relative;
-		overflow-x: hidden;
-	}
-	.right {
-	}
-	.isResizable {
-		width: 4px;
-		background-color: #e0e0e0;
-		cursor: col-resize;
-		transition: background-color 0.2s;
-		flex-shrink: 0;
-	}
-	.isResizable:hover {
-		background-color: #0078d4;
-	}
-	.toggle-button-container {
-		position: sticky;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 48px;
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		padding: 0 8px;
-		background-color: transparent;
-		z-index: 100;
-	}
-	.toggle-button {
-		background-color: transparent;
-		border: none;
-		width: 32px;
-		height: 32px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		border-radius: 2px;
-		color: #323130;
-		transition: background-color 0.1s;
-		padding: 0;
-	}
-	.toggle-button:hover {
-		background-color: rgba(0, 0, 0, 0.05);
-	}
-	.toggle-button:active {
-		background-color: rgba(0, 0, 0, 0.1);
-	}
-</style>
+<style></style>

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

@@ -1,14 +1,13 @@
-import type { Snippet } from "svelte";
-declare const TwoColumnsLayout: import("svelte").Component<Partial<{
+import type { Snippet } from 'svelte';
+interface TwoColumnLayoutProps {
     leftRender: Snippet;
     rightRender: Snippet;
     containerCss: string;
-    spitPercentage: number;
-    isResizable: boolean;
-    isCollapsible: boolean;
-    collapsedWidthPx: number;
-    minWidthPercent: number;
-    maxWidthPercent: number;
-}>, {}, "">;
+    leftCss: string;
+    rightCss: string;
+    isFullWidth: boolean;
+    isFullHeight: boolean;
+}
+declare const TwoColumnsLayout: import("svelte").Component<TwoColumnLayoutProps, {}, "">;
 type TwoColumnsLayout = ReturnType<typeof TwoColumnsLayout>;
 export default TwoColumnsLayout;

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

@@ -0,0 +1,12 @@
+export type MenuIcon = string;
+export type MenuItem = {
+    icon: MenuIcon;
+    title: string;
+    href: string;
+};
+export type MenuSection = {
+    title: string;
+    icon: MenuIcon;
+    showTitle: boolean;
+    items: MenuItem[];
+};

package/dist/components/layouts/menuLayout.js

@@ -0,0 +1 @@
+export {};

package/dist/components/presentation/Accordion.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    interface AccordionProps {
+        children: Snippet;
+        isOpenByDefault: boolean;
+        animationDurationMs: number;
+        title: string;
+    }
+
+    let {
+        children,
+        title = "",
+        isOpenByDefault = true,
+        animationDurationMs = 300,
+    }: Partial<AccordionProps> = $props();
+
+    let isOpen = $state(isOpenByDefault);
+    let contentElement: HTMLDivElement;
+
+    const toggleAccordion = () => {
+        isOpen = !isOpen;
+    };
+</script>
+
+<article>
+    <header onclick={toggleAccordion} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && toggleAccordion()}>
+        {title}
+        <span class="toggle-icon">{isOpen ? '−' : '+'}</span>
+    </header>
+    <div 
+        bind:this={contentElement}
+        class="content"
+        class:folded={!isOpen}
+        style={`max-height: ${isOpen ? contentElement?.scrollHeight + 'px' : '0'}; transition: max-height 500ms ease-in-out, opacity 500ms ease-in-out;`}>
+    {@render children?.()}
+    </div>
+</article>
+
+<style>
+    header {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .toggle-icon {
+        font-weight: bold;
+        font-size: 1.2em;
+        transition: transform 500ms ease-in-out;
+    }
+
+    .content {
+        overflow: hidden;
+        opacity: 1;
+    }
+
+    .folded {
+        opacity: 0;
+        max-height: 0 !important;
+    }
+</style>

package/dist/components/presentation/Accordion.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+declare const Accordion: import("svelte").Component<Partial<{
+    children: Snippet;
+    isOpenByDefault: boolean;
+    animationDurationMs: number;
+    title: string;
+}>, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export { default as Banner } from './components/layouts/Banner.svelte';
 export { default as SimpleFooter } from './components/layouts/SimpleFooter.svelte';
 export { default as Tabs } from './components/layouts/Tabs.svelte';
 export type { Tab, TabSizes, NavigationDirection } from './components/layouts/tabs.js';
+export { default as MenuLayout } from './components/layouts/MenuLayout.svelte';
+export type { MenuItem, MenuSection, MenuIcon } from './components/layouts/menuLayout.js';
 export { Justify, AlignItmes, Placement, Orientation, Position, Sizes, ComponentSize } from './components/Styling.js';
 export { default as Link } from './components/presentation/Link.svelte';
 export { default as Logo } from './components/presentation/Logo.svelte';
@@ -19,6 +21,7 @@ export { default as Disclose } from './components/presentation/Disclose.svelte';
 export { default as EmptyState } from './components/presentation/EmptyState.svelte';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as Dialog } from './components/presentation/Dialog.svelte';
+export { default as Icon } from "@iconify/svelte";
 export { default as ListMenu } from './components/menu/ListMenu.svelte';
 export { default as DynamicMenu } from './components/menu/DynamicMenu.svelte';
 export { default as HamburgerMenu } from './components/menu/HamburgerMenu.svelte';
@@ -47,3 +50,7 @@ export { default as Spinner } from './components/indicators/Spinner.svelte';
  **/
 export { default as DynamicButton } from './components/dynamic/DynamicButton.svelte';
 export { executeRest } from './components/dynamic/DynamicButton.js';
+/**
+ * Icons
+ **/
+export { getIcon, MaterialSet, IconsSet } from './components/MaterialIconSet.js';

package/dist/index.js

@@ -9,6 +9,7 @@ export { default as Well } from './components/layouts/Well.svelte';
 export { default as Banner } from './components/layouts/Banner.svelte';
 export { default as SimpleFooter } from './components/layouts/SimpleFooter.svelte';
 export { default as Tabs } from './components/layouts/Tabs.svelte';
+export { default as MenuLayout } from './components/layouts/MenuLayout.svelte';
 /*
  * Styling
  */
@@ -26,6 +27,7 @@ export { default as Disclose } from './components/presentation/Disclose.svelte';
 export { default as EmptyState } from './components/presentation/EmptyState.svelte';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 export { default as Dialog } from './components/presentation/Dialog.svelte';
+export { default as Icon } from "@iconify/svelte";
 /*
  * Menu
  */
@@ -69,3 +71,7 @@ export { default as Spinner } from './components/indicators/Spinner.svelte';
  **/
 export { default as DynamicButton } from './components/dynamic/DynamicButton.svelte';
 export { executeRest } from './components/dynamic/DynamicButton.js';
+/**
+ * Icons
+ **/
+export { getIcon, MaterialSet, IconsSet } from './components/MaterialIconSet.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.31.0",
+	"version": "4.35.0",
 	"license": "MIT",
 	"watch": {
 		"build": {
@@ -47,7 +47,10 @@
 		"@eslint/compat": "^1.2.9",
 		"@eslint/js": "^9.26.0",
 		"@functionalcms/services": "^0.12.0",
+		"@iconify/json": "^2.2.429",
+		"@iconify/svelte": "^5.2.1",
 		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.20.8",
 		"@sveltejs/package": "^2.3.11",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"autoprefixer": "^10.4.21",
@@ -63,8 +66,8 @@
 		"svelte-check": "^4.1.7",
 		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.31.1",
-		"vite": "^6.3.4",
-		"@sveltejs/kit": "^2.20.8"
+		"unplugin-icons": "^23.0.1",
+		"vite": "^6.3.4"
 	},
 	"dependencies": {
 		"embla-carousel-svelte": "^8.6.0",