@functionalcms/svelte-components 5.0.0-beta2 → 5.0.0

package/dist/components/layouts/DefaultLayout.svelte

@@ -1,110 +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 {
-		children: Snippet;
-		canonicalUrl: string;
-		logoUrl?: string;
-		companyName?: string;
-		renderCompanyName?: boolean;
-		menuItems?: Array<MenuOption>;
-		footerRender?: Snippet;
-		classes?: Styles;
-	}
-
-	let {
-		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 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?.()}
-	</main>
-	{@render footerRender?.()}
-
-</div>
+<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 {
+		children: Snippet;
+		canonicalUrl: string;
+		logoUrl?: string;
+		companyName?: string;
+		renderCompanyName?: boolean;
+		menuItems?: Array<MenuOption>;
+		footerRender?: Snippet;
+		classes?: Styles;
+	}
+
+	let {
+		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 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?.()}
+	</main>
+	{@render footerRender?.()}
+
+</div>

package/dist/components/layouts/FlexBox.svelte

@@ -1,73 +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>
+<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/MenuLayout.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	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 {
-		children: Snippet;
-		menuItems: Array<MenuSection | MenuItem>;
-	}
-
-	let {
-		children,
-		menuItems = []
-	}: Partial<TwoColumnLayoutProps> = $props();
-
-	let container: HTMLElement | undefined = undefined;
-	const helpers = uiHelpers();
-</script>
-<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}
-					<SidebarItem label={item.label} href={item.href}>
-						{#snippet icon()}
-							<Icon
-								icon={item.icon} />
-						{/snippet}
-					</SidebarItem>
-				{/if}
-			{/each}
-		</SidebarGroup>
-	</Sidebar>
-	<div class="content" style:flex="1">
-		{@render children?.()}
-	</div>
-</section>
-
-<style>
-</style>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	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 {
+		children: Snippet;
+		menuItems: Array<MenuSection | MenuItem>;
+	}
+
+	let {
+		children,
+		menuItems = []
+	}: Partial<TwoColumnLayoutProps> = $props();
+
+	let container: HTMLElement | undefined = undefined;
+	const helpers = uiHelpers();
+</script>
+<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}
+					<SidebarItem label={item.label} href={item.href}>
+						{#snippet icon()}
+							<Icon
+								icon={item.icon} />
+						{/snippet}
+					</SidebarItem>
+				{/if}
+			{/each}
+		</SidebarGroup>
+	</Sidebar>
+	<div class="content" style:flex="1">
+		{@render children?.()}
+	</div>
+</section>
+
+<style>
+</style>

package/dist/components/layouts/Meta.svelte

@@ -1,28 +1,28 @@
-<script lang="ts">
-	interface MetaProps {
-		title: string;
-		description: string;
-		keywords: string;
-		robots: string;
-		charset: string;
-		viewport: string;
-	}
-
-	let {
-		title = '',
-		description = '',
-		keywords = '',
-		robots = 'index, follow',
-		charset = 'UTF-8',
-		viewport = 'width=device-width, initial-scale=1.0'
-	}: Partial<MetaProps> = $props();
-</script>
-
-<svelte:head>
-	<title>{title}</title>
-	<meta name="description" content={description} />
-	<meta name="keywords" content={keywords} />
-	<meta name="robots" content={robots} />
-	<meta name="viewport" content={viewport} />
-	<meta {charset} />
-</svelte:head>
+<script lang="ts">
+	interface MetaProps {
+		title: string;
+		description: string;
+		keywords: string;
+		robots: string;
+		charset: string;
+		viewport: string;
+	}
+
+	let {
+		title = '',
+		description = '',
+		keywords = '',
+		robots = 'index, follow',
+		charset = 'UTF-8',
+		viewport = 'width=device-width, initial-scale=1.0'
+	}: Partial<MetaProps> = $props();
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<meta name="keywords" content={keywords} />
+	<meta name="robots" content={robots} />
+	<meta name="viewport" content={viewport} />
+	<meta {charset} />
+</svelte:head>

package/dist/components/layouts/StyleBox.svelte

@@ -1,17 +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>
+<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/Tracker.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-	let { domain }: { domain: string } = $props();
-</script>
-
-<svelte:head>
-	<script
-		defer
-		data-domain={domain}
-		src="https://plausible.io/js/script.file-downloads.outbound-links.js"
-	></script>
-	<script>
-		window.plausible =
-			window.plausible ||
-			function () {
-				(window.plausible.q = window.plausible.q || []).push(arguments);
-			};
-	</script>
-</svelte:head>
+<script lang="ts">
+	let { domain }: { domain: string } = $props();
+</script>
+
+<svelte:head>
+	<script
+		defer
+		data-domain={domain}
+		src="https://plausible.io/js/script.file-downloads.outbound-links.js"
+	></script>
+	<script>
+		window.plausible =
+			window.plausible ||
+			function () {
+				(window.plausible.q = window.plausible.q || []).push(arguments);
+			};
+	</script>
+</svelte:head>

package/dist/components/layouts/Well.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		children: Snippet;
-		width: number;
-		class: string;
-	}
-
-	let {
-		children,
-		width = 95,
-		class: css = '',
-	}: Partial<Props> = $props();
-
-</script>
-
-<div class="well w-[{width}%] m-auto p-1 {css}">
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		width: number;
+		class: string;
+	}
+
+	let {
+		children,
+		width = 95,
+		class: css = '',
+	}: Partial<Props> = $props();
+
+</script>
+
+<div class="well w-[{width}%] m-auto p-1 {css}">
+	{@render children?.()}
+</div>