@functionalcms/svelte-components 5.0.0 → 5.0.2

package/dist/components/head/Font.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		fonts: Array<{ name: string; values: string }>;
+	}
+
+	let { fonts = [] }: Partial<Props> = $props();
+
+	const fontQuery = $derived(() =>
+		fonts.map((font) => `family=${font.name}:${font.values}`).join('&')
+	);
+</script>
+
+<svelte:head>
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
+	<link
+		rel="stylesheet"
+		href={`https://fonts.googleapis.com/css2?${fontQuery}&display=swap`}
+	/>
+</svelte:head>

package/dist/components/head/Font.svelte.d.ts

@@ -0,0 +1,8 @@
+declare const Font: import("svelte").Component<Partial<{
+    fonts: Array<{
+        name: string;
+        values: string;
+    }>;
+}>, {}, "">;
+type Font = ReturnType<typeof Font>;
+export default Font;

package/dist/components/layouts/DefaultLayout.svelte

@@ -12,6 +12,7 @@
 	} from 'flowbite-svelte';
 	import { type MenuOption } from './menuItems.js';
 	import { ChevronDownOutline } from 'flowbite-svelte-icons';
+	import { afterNavigate } from "$app/navigation";
 
 	interface Styles {
 		logo?: string;
@@ -62,6 +63,10 @@
 	$effect(() => {
 		activeUrl = page.url.pathname;
 	});
+
+	afterNavigate(() => {
+		window.scrollTo({ top: 0, behavior: "instant" });
+	});
 </script>
 
 <svelte:head>
@@ -102,7 +107,7 @@
 			{/each}
 		</NavUl>
 	</Navbar>
-	<main>
+	<main class="min-h-screen">
 		{@render children?.()}
 	</main>
 	{@render footerRender?.()}

package/dist/components/layouts/MenuLayout.svelte

@@ -2,28 +2,31 @@
 	import type { Snippet } from 'svelte';
 	import type { MenuItem, MenuSection } from './menuItems.js';
 	import Icon from '../Icon.svelte';
-  	import { 
+	import { afterNavigate } from '$app/navigation';
+	import {
 		Sidebar,
-		SidebarDropdownItem, 
-		SidebarDropdownWrapper, 
-		SidebarGroup, 
-		SidebarItem, 
+		SidebarDropdownItem,
+		SidebarDropdownWrapper,
+		SidebarGroup,
+		SidebarItem,
 		SidebarButton,
-		uiHelpers } from "flowbite-svelte";
+		uiHelpers
+	} from 'flowbite-svelte';
 
 	interface TwoColumnLayoutProps {
 		children: Snippet;
 		menuItems: Array<MenuSection | MenuItem>;
 	}
 
-	let {
-		children,
-		menuItems = []
-	}: Partial<TwoColumnLayoutProps> = $props();
+	let { children, menuItems = [] }: Partial<TwoColumnLayoutProps> = $props();
 
 	let container: HTMLElement | undefined = undefined;
 	const helpers = uiHelpers();
+	afterNavigate(() => {
+		window.scrollTo({ top: 0, behavior: 'instant' });
+	});
 </script>
+
 <section class="flex flex-column md:flex-row" bind:this={container}>
 	<SidebarButton onclick={helpers.toggle} class="mb-2" />
 	<Sidebar
@@ -31,7 +34,8 @@
 		isOpen={helpers.isOpen}
 		closeSidebar={helpers.close}
 		position="fixed"
-		class="z-50 h-full">
+		class="z-50 h-full"
+	>
 		<SidebarGroup>
 			{#each menuItems as item}
 				{#if 'items' in item}
@@ -43,8 +47,7 @@
 				{:else}
 					<SidebarItem label={item.label} href={item.href}>
 						{#snippet icon()}
-							<Icon
-								icon={item.icon} />
+							<Icon icon={item.icon} />
 						{/snippet}
 					</SidebarItem>
 				{/if}

package/dist/components/layouts/Well.svelte

@@ -3,18 +3,15 @@
 
 	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}">
+<div class="well m-auto p-1 {css}">
 	{@render children?.()}
 </div>

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

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

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-export { default as Meta } from './components/layouts/Meta.svelte';
+export { default as Meta } from './components/head/Meta.svelte';
+export { default as Font } from './components/head/Font.svelte';
 export { default as Tracker } from './components/layouts/Tracker.svelte';
 export { default as DefaultLayout } from './components/layouts/DefaultLayout.svelte';
+export { default as MenuLayout } from './components/layouts/MenuLayout.svelte';
 export { default as Well } from './components/layouts/Well.svelte';
 export { default as FlexBox } from './components/layouts/FlexBox.svelte';
 export { default as StyleBox } from './components/layouts/StyleBox.svelte';
-export { default as MenuLayout } from './components/layouts/MenuLayout.svelte';
 export type { MenuItem, MenuSection } from './components/layouts/menuItems.js';
 export { Visibility } from './components/layouts/menuItems.js';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';

package/dist/index.js

@@ -1,13 +1,11 @@
-/*
- * Layout
- */
-export { default as Meta } from './components/layouts/Meta.svelte';
+export { default as Meta } from './components/head/Meta.svelte';
+export { default as Font } from './components/head/Font.svelte';
 export { default as Tracker } from './components/layouts/Tracker.svelte';
 export { default as DefaultLayout } from './components/layouts/DefaultLayout.svelte';
+export { default as MenuLayout } from './components/layouts/MenuLayout.svelte';
 export { default as Well } from './components/layouts/Well.svelte';
 export { default as FlexBox } from './components/layouts/FlexBox.svelte';
 export { default as StyleBox } from './components/layouts/StyleBox.svelte';
-export { default as MenuLayout } from './components/layouts/MenuLayout.svelte';
 export { Visibility } from './components/layouts/menuItems.js';
 export { default as ImageCompare } from './components/presentation/ImageCompare.svelte';
 /*
@@ -16,9 +14,6 @@ export { default as ImageCompare } from './components/presentation/ImageCompare.
 export { InputType, FieldType, SubmitResult, createInputField, createTextareaField, createFilePickerField, createCollectionField, createSelectField, createTimePickerField, createPhoneInputField, } from './components/form/form.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as SmartForm } from './components/form/SmartForm.svelte';
-/*
- * Integrations
- */
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';
 export { SolidIcons, OutlinedIcons } from './components/icons.js';
 export { default as Icon } from './components/Icon.svelte';

package/package.json

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