@functionalcms/svelte-components 4.36.10 → 5.0.0-beta1

package/dist/components/integrations/EasyTools.svelte

@@ -12,7 +12,7 @@
         const handle = `ec_tenant_${userId}`;
 		window.addEventListener('message', (e) => {
 			!!e.data.frameHeight &&
-				e.data.pricingUuid ===  handle&&
+			 	e.data.pricingUuid ===  handle &&
 				(document.getElementById(handle).style.height = e.data.frameHeight);
 		});
 	}

package/dist/components/layouts/DefaultLayout.svelte

@@ -1,59 +1,110 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import type { Snippet } from 'svelte';
+	import {
+		Navbar,
+		NavBrand,
+		NavHamburger,
+		NavUl,
+		NavLi,
+		Dropdown,
+		DropdownItem,
+	} from 'flowbite-svelte';
+	import { type MenuOption } from './menuItems.js';
+	import { ChevronDownOutline } from 'flowbite-svelte-icons';
+
+	interface Styles {
+		logo?: string;
+		companyName?: string;
+		navigation?: string;
+		menuItem?: string;
+		activeClass?: string;
+		nonActiveClass?: string;
+	}
 
 	interface Props {
-		headerIsSticky?: boolean;
-		canonicalUrl?: string;
-		header?: Snippet;
-		footer?: Snippet;
-		stickyFooter?: Snippet;
 		children: Snippet;
+		canonicalUrl: string;
+		logoUrl?: string;
+		companyName?: string;
+		renderCompanyName?: boolean;
+		menuItems?: Array<MenuOption>;
+		footerRender?: Snippet;
+		classes?: Styles;
 	}
 
 	let {
-		children, 
-		header,
-		footer,
-		stickyFooter,
-		headerIsSticky = false,
-		canonicalUrl = ''
-	}: Props = $props();
-
-	let headerCss = $derived(headerIsSticky ? 'sticky' : '');
+		children,
+		canonicalUrl,
+		logoUrl = undefined,
+		companyName = '',
+		renderCompanyName = true,
+		menuItems = [],
+		footerRender = undefined,
+		classes = {},
+	}: Partial<Props> = $props();
+
+	const defaultClasses = {
+		logo: 'me-3 h-6 sm:h-9',
+		companyName: 'self-center whitespace-nowrap text-xl font-semibold dark:text-white',
+		navigation: '',
+		menuItem: '',
+		activeClass: 'text-blue-700 dark:text-white',
+		nonActiveClass: 'text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
+		footer:
+			'absolute start-0 bottom-0 z-20 w-full border-t border-gray-200 bg-white p-4 shadow-sm md:flex md:items-center md:justify-between md:p-6 dark:border-gray-600 dark:bg-gray-800',
+		footerLinks: ''
+	};
+	const mergedClasses = $derived(() => ({ ...defaultClasses, ...classes }));
+
+	let activeUrl = $state(page.url.pathname);
+
+	$effect(() => {
+		activeUrl = page.url.pathname;
+	});
 </script>
 
 <svelte:head>
 	<link rel="canonical" href="{canonicalUrl}{page.url.pathname}" />
 </svelte:head>
 
-<div id="defaultLayout">
-	{#if header}
-		<header class={headerCss}>
-			{@render header()}
-		</header>
-	{/if}
+<div class="w-full relative" id="defaultLayout">
+	<Navbar class={mergedClasses().navigation}>
+		<NavBrand href="/" class="logo">
+			<img src={logoUrl} class={mergedClasses().logo} alt={companyName} />
+			{#if renderCompanyName}
+				<span class={mergedClasses().companyName}>{companyName}</span>
+			{/if}
+		</NavBrand>
+		<NavHamburger />
+		<NavUl
+			{activeUrl}
+			classes={{ active: mergedClasses().activeClass, nonActive: mergedClasses().nonActiveClass }}
+		>
+			{#each menuItems as item}
+				{#if item?.items}
+					<NavLi class={mergedClasses().menuItem}>
+						<a href={item.href}>{item.label}</a>
+						<ChevronDownOutline class="text-primary-800 ms-2 inline h-6 w-6 dark:text-white" />
+					</NavLi>
+					<Dropdown simple class="w-44">
+						{#each item.items as subItem}
+							<DropdownItem class={mergedClasses().menuItem} href={subItem.href}
+								>{subItem.label}</DropdownItem
+							>
+						{/each}
+					</Dropdown>
+				{:else}
+					<NavLi class={mergedClasses().menuItem}>
+						<a href={item.href}>{item.label}</a>
+					</NavLi>
+				{/if}
+			{/each}
+		</NavUl>
+	</Navbar>
 	<main>
-		{@render children()}
+		{@render children?.()}
 	</main>
-	{#if footer}
-		<footer>
-			{@render footer()}
-		</footer>
-	{/if}
-	<div id="drawer-root"></div>
-</div>
+	{@render footerRender?.()}
 
-{#if stickyFooter}
-	<footer class="sticky">
-		{@render stickyFooter()}
-	</footer>
-{/if}
-
-<style>
-	footer.sticky {
-		flex-shrink: 0;
-		background-color: var(--light-modelight);
-		flex-shrink: 0;
-	}
-</style>
+</div>

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

@@ -1,12 +1,21 @@
 import type { Snippet } from 'svelte';
-interface Props {
-    headerIsSticky?: boolean;
-    canonicalUrl?: string;
-    header?: Snippet;
-    footer?: Snippet;
-    stickyFooter?: Snippet;
+import { type MenuOption } from './menuItems.js';
+declare const DefaultLayout: import("svelte").Component<Partial<{
     children: Snippet;
-}
-declare const DefaultLayout: import("svelte").Component<Props, {}, "">;
+    canonicalUrl: string;
+    logoUrl?: string;
+    companyName?: string;
+    renderCompanyName?: boolean;
+    menuItems?: Array<MenuOption>;
+    footerRender?: Snippet;
+    classes?: {
+        logo?: string;
+        companyName?: string;
+        navigation?: string;
+        menuItem?: string;
+        activeClass?: string;
+        nonActiveClass?: string;
+    };
+}>, {}, "">;
 type DefaultLayout = ReturnType<typeof DefaultLayout>;
 export default DefaultLayout;

package/dist/components/layouts/FlexBox.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		width?: string;
+		height?: string;
+		direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+		justify?:
+			| 'start'
+			| 'end'
+			| 'end-safe'
+			| 'center'
+			| 'center-safe'
+			| 'between'
+			| 'around'
+			| 'evenly'
+			| 'stretch'
+			| 'baseline'
+			| 'normal';
+		align?:
+			| 'start'
+			| 'end'
+			| 'end-safe'
+			| 'center'
+			| 'center-safe'
+			| 'baseline'
+			| 'baseline-last'
+			| 'stretch';
+		wrap: 'wrap' | 'nowrap' | 'wrap-reverse';
+		grow?: string;
+		shrink?: string;
+		gap?: string;
+		margin?: string;
+		padding?: string;
+	}
+
+	let {
+		children,
+		width = 'auto',
+		height = 'auto',
+		direction = 'row',
+		justify = 'start',
+		align = 'stretch',
+		gap = '0',
+		wrap = 'nowrap',
+		grow = undefined,
+		shrink = undefined,
+		margin = undefined,
+		padding = undefined,
+	}: Partial<Props> = $props();
+
+	const cssClass = $derived(
+		[
+			`box`,
+			`flex flex-${direction}`,
+			`justify-${justify}`,
+			`items-${align}`,
+			`gap-${gap}`,
+			`flex-${wrap}`,
+			`w-${width}`,
+			`h-${height}`,
+			grow ? `flex-grow-${grow}` : '',
+			shrink ? `flex-shrink-${shrink}` : '',
+			margin ? `m-${margin}` : '',
+			padding ? `p-${padding}` : '',
+		].join(' ')
+	);
+</script>
+
+<div class={cssClass}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+declare const FlexBox: import("svelte").Component<Partial<{
+    children: Snippet;
+    width?: string;
+    height?: string;
+    direction: "row" | "column" | "row-reverse" | "column-reverse";
+    justify?: "start" | "end" | "end-safe" | "center" | "center-safe" | "between" | "around" | "evenly" | "stretch" | "baseline" | "normal";
+    align?: "start" | "end" | "end-safe" | "center" | "center-safe" | "baseline" | "baseline-last" | "stretch";
+    wrap: "wrap" | "nowrap" | "wrap-reverse";
+    grow?: string;
+    shrink?: string;
+    gap?: string;
+    margin?: string;
+    padding?: string;
+}>, {}, "">;
+type FlexBox = ReturnType<typeof FlexBox>;
+export default FlexBox;

package/dist/components/layouts/MenuLayout.svelte

@@ -1,222 +1,60 @@
 <script lang="ts">
 	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';
+	import type { MenuItem, MenuSection } from './menuItems.js';
+	import Icon from '../Icon.svelte';
+  	import { 
+		Sidebar,
+		SidebarDropdownItem, 
+		SidebarDropdownWrapper, 
+		SidebarGroup, 
+		SidebarItem, 
+		SidebarButton,
+		uiHelpers } from "flowbite-svelte";
 
 	interface TwoColumnLayoutProps {
-		rightRender: Snippet;
-		containerCss: string;
-		spitPercentage: number;
-		isResizable: boolean;
-		isCollapsible: boolean;
-		collapsedWidthPx: number;
-		minWidthPercent: number;
-		maxWidthPercent: number;
+		children: Snippet;
 		menuItems: Array<MenuSection | MenuItem>;
-		buttonCss: string;
 	}
 
 	let {
-		rightRender,
-		containerCss = '',
-		spitPercentage = 15,
-		isResizable = true,
-		isCollapsible = true,
-		collapsedWidthPx = 60,
-		minWidthPercent = 10,
-		maxWidthPercent = 80,
-		menuItems = [],
-		buttonCss = ''
+		children,
+		menuItems = []
 	}: 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);
-			};
-		}
-	});
+	const helpers = uiHelpers();
 </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}
-			<span>{item.title}</span>
-		{/if}
-	</a>
-{/snippet}
-
-<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}
-				{#if section?.items}
-					<Accordion title={section.title} css="section">
-						<div class="menu-section">
-							{#each section.items as item}
-								{@render itemRender(item)}
-							{/each}
-						</div>
-					</Accordion>
+<section class="flex flex-column md:flex-row" bind:this={container}>
+	<SidebarButton onclick={helpers.toggle} class="mb-2" />
+	<Sidebar
+		backdrop={false}
+		isOpen={helpers.isOpen}
+		closeSidebar={helpers.close}
+		position="fixed"
+		class="z-50 h-full">
+		<SidebarGroup>
+			{#each menuItems as item}
+				{#if 'items' in item}
+					<SidebarDropdownWrapper label={item.label}>
+						{#each item.items as subItem}
+							<SidebarDropdownItem label={subItem.label} href={subItem.href} />
+						{/each}
+					</SidebarDropdownWrapper>
 				{:else}
-					{@render itemRender(section)}
+					<SidebarItem label={item.label} href={item.href}>
+						{#snippet icon()}
+							<Icon
+								icon={item.icon} />
+						{/snippet}
+					</SidebarItem>
 				{/if}
 			{/each}
-		</section>
-	</div>
-
-	{#if isResizable && !isCollapsed}
-		<div
-			class="isResizable"
-			onmousedown={handleMouseDown}
-			role="separator"
-			aria-label="Resizer"
-		></div>
-	{/if}
-
+		</SidebarGroup>
+	</Sidebar>
 	<div class="content" style:flex="1">
-		{@render rightRender?.()}
+		{@render children?.()}
 	</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

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

package/dist/components/layouts/StyleBox.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class: string;
+	}
+
+	let {
+		children,  
+		class: css = '',
+	}: Partial<Props> = $props();
+</script>
+
+<div class={css}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+declare const StyleBox: import("svelte").Component<Partial<{
+    children: Snippet;
+    class: string;
+}>, {}, "">;
+type StyleBox = ReturnType<typeof StyleBox>;
+export default StyleBox;

package/dist/components/layouts/Well.svelte

@@ -1,46 +1,20 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { cn } from '../../utils.js';
-	import { AlignItmes, Justify, Orientation } from '../Styling.js';
 
 	interface Props {
-		css?: string;
-		orientation?: Orientation;
-		justify?: Justify;
-		alignItems?: AlignItmes;
 		children: Snippet;
+		width: number;
+		class: string;
 	}
+
 	let {
 		children,
-		css = '',
-		orientation = Orientation.Column,
-		justify = Justify.Start,
-		alignItems = AlignItmes.Start
-	}: Props = $props();
+		width = 95,
+		class: css = '',
+	}: Partial<Props> = $props();
 
-	let klasses = cn(
-		'flex',
-		`${orientation}`,
-		`${justify}`,
-		`${alignItems}`,
-		css ? css : ''
-	);
 </script>
 
-<div class={klasses}>
-	{@render children()}
+<div class="well w-[{width}%] m-auto p-1 {css}">
+	{@render children?.()}
 </div>
-
-<style>
-	div {
-		width: var(--mobile-content-width, 95%);
-		margin: var(--mobile-content-margin, var(--fluid-8));
-	}
-
-	@media (min-width: 960px) {
-		div {
-			width: var(--content-width, 95%);
-			margin: var(--content-margin, var(--fluid-8));
-		}
-	}
-</style>

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

@@ -1,12 +1,8 @@
 import type { Snippet } from 'svelte';
-import { AlignItmes, Justify, Orientation } from '../Styling.js';
-interface Props {
-    css?: string;
-    orientation?: Orientation;
-    justify?: Justify;
-    alignItems?: AlignItmes;
+declare const Well: import("svelte").Component<Partial<{
     children: Snippet;
-}
-declare const Well: import("svelte").Component<Props, {}, "">;
+    width: number;
+    class: string;
+}>, {}, "">;
 type Well = ReturnType<typeof Well>;
 export default Well;

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

@@ -0,0 +1,29 @@
+import type { Page } from "@sveltejs/kit";
+export declare enum Visibility {
+    Always = 0,
+    Authenticated = 1,
+    NotAuthenticated = 2
+}
+export type MenuItem = {
+    label: string;
+    href?: string;
+    icon?: string;
+    visibility?: Visibility;
+};
+export type MenuSection = {
+    label: string;
+    items: MenuItem[];
+    href?: string;
+    icon?: string;
+    visibility?: Visibility;
+};
+export type MenuDivider = {};
+export type MenuOption = MenuItem | MenuSection;
+export declare function selectVisible(pages: Array<MenuItem>, visibility: Visibility): MenuItem[];
+export declare function isSelected(includeSubpagesForSelect: boolean, page: any, item: MenuItem): any;
+export declare const defaultCss: {
+    buttonCss: never[];
+    container: never[];
+    link: never[];
+};
+export declare function isAuthenticated(page: Page): Visibility.Authenticated | Visibility.NotAuthenticated;