@functionalcms/svelte-components 5.3.1 → 5.3.3

package/dist/components/form/SmartForm.svelte

@@ -29,7 +29,7 @@
 
 	interface Props {
 		action: string;
-		css?: string;
+		class?: string;
 		successMessage?: string;
 		fields?: Array<Field>;
 		onMessageSubmitted?: (result: SubmitResult) => void;
@@ -39,7 +39,7 @@
 	let {
 		action,
 		fields = [],
-		css = '',
+		class: css = '',
 		successMessage,
 		onMessageSubmitted,
 		buttons = [
@@ -58,7 +58,6 @@
 
 	const handleSubmit = async (event: Event) => {
 		event.preventDefault();
-		console.log('Submitting form to:', action);
 		loading = true;
 		try {
 			if (!isSendingMessage) {
@@ -180,6 +179,7 @@
 {/snippet}
 
 {#snippet renderPhoneInput(field: PhoneInputField)}
+	<Label class={field.labelClass}>{field.label}</Label>
 	<PhoneInput
 		id={field.id}
 		name={field.id}
@@ -187,7 +187,6 @@
 		readonly={field.readonly}
 		disabled={field.disabled}
 		class={field.class}
-		size={field.size}
 		placeholder={field.placeholder}
 	/>
 {/snippet}

package/dist/components/form/SmartForm.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type Field, SubmitResult, type ButtonConfig } from './form.js';
 interface Props {
     action: string;
-    css?: string;
+    class?: string;
     successMessage?: string;
     fields?: Array<Field>;
     onMessageSubmitted?: (result: SubmitResult) => void;

package/dist/components/layouts/DefaultLayout.svelte

@@ -54,9 +54,10 @@
 		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: ''
+		footerLinks: '',
+		main: 'min-h-screen'
 	};
-	const mergedClasses = $derived(() => ({ ...defaultClasses, ...classes }));
+	const mergedClasses = $derived({ ...defaultClasses, ...classes });
 
 	let activeUrl = $state(page.url.pathname);
 
@@ -74,40 +75,40 @@
 </svelte:head>
 
 <div class="w-full relative" id="defaultLayout">
-	<Navbar class={mergedClasses().navigation}>
+	<Navbar class={mergedClasses.navigation}>
 		<NavBrand href="/" class="logo">
-			<img src={logoUrl} class={mergedClasses().logo} alt={companyName} />
+			<img src={logoUrl} class={mergedClasses.logo} alt={companyName} />
 			{#if renderCompanyName}
-				<span class={mergedClasses().companyName}>{companyName}</span>
+				<span class={mergedClasses.companyName}>{companyName}</span>
 			{/if}
 		</NavBrand>
 		<NavHamburger />
 		<NavUl
 			{activeUrl}
-			classes={{ active: mergedClasses().activeClass, nonActive: mergedClasses().nonActiveClass }}
+			classes={{ active: mergedClasses.activeClass, nonActive: mergedClasses.nonActiveClass }}
 		>
 			{#each menuItems as item}
 				{#if item?.items}
-					<NavLi class={mergedClasses().menuItem}>
+					<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}
+							<DropdownItem class={mergedClasses.menuItem} href={subItem.href}
 								>{subItem.label}</DropdownItem
 							>
 						{/each}
 					</Dropdown>
 				{:else}
-					<NavLi class={mergedClasses().menuItem}>
+					<NavLi class={mergedClasses.menuItem}>
 						<a href={item.href}>{item.label}</a>
 					</NavLi>
 				{/if}
 			{/each}
 		</NavUl>
 	</Navbar>
-	<main class="min-h-screen">
+	<main class={mergedClasses.main}>
 		{@render children?.()}
 	</main>
 	{@render footerRender?.()}

package/dist/server-side/auth/machine_authentication.js

@@ -1,8 +1,6 @@
-import { deleteCookie, loadCookie, saveCookie } from "../cookies";
 import { userAuthenticationProvider } from "./userAuthenticationProvider";
 import { encrypt } from "../crypto";
 const accessTokenCookie = "functionalcms_access_token";
-const idTokenCookie = "functionalcms_id_token";
 const refreshTokenCookie = "functionalcms_refresh_token";
 export const machineAuthenticationHandle = (secret, serverUrl, clientId, clientSecret) => {
     const provider = userAuthenticationProvider(serverUrl, clientId);
@@ -39,7 +37,6 @@ const login = async (serverUrl, clientId, clientSecret) => {
     const tokens = await tokenRes.json();
     return {
         access_token: tokens.access_token,
-        id_token: tokens.id_token,
         refresh_token: tokens.refresh_token,
     };
 };

package/dist/server-side/auth/user_authentication.js

@@ -1,5 +1,6 @@
 import { deleteCookie, loadCookie, saveCookie } from "../cookies";
 import { userAuthenticationProvider } from "./userAuthenticationProvider";
+import { parse } from "svelte/compiler";
 const pkceCookieName = "functionalcms_pkce";
 const stateCookieName = "functionalcms_state";
 const accessTokenCookie = "functionalcms_access_token";
@@ -34,6 +35,16 @@ function handleLogout(event) {
     event.locals.user = null;
     event.locals.session = {};
 }
+function parseJwt(token) {
+    const base64 = token.split('.')[1]
+        .replace(/-/g, '+')
+        .replace(/_/g, '/');
+    const json = decodeURIComponent(atob(base64)
+        .split('')
+        .map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join(''));
+    return JSON.parse(json);
+}
 async function handleLogin(event, provider, secret) {
     const callbackUrl = new URL(`${event.url.origin}/auth/callback`);
     const response = await provider.handleLogin(callbackUrl);
@@ -49,7 +60,8 @@ async function handleCallback(event, secret, provider) {
     const response = await provider.handleCallback(expectedState, codeVerifier, event.url);
     const headers = new Headers();
     headers.set('Location', event.url.origin);
-    await saveCookie(headers, secret, accessTokenCookie, response.access_token);
+    const accessToken = parseJwt(response.access_token);
+    await saveCookie(headers, secret, accessTokenCookie, response.access_token, accessToken.exp - Math.floor(Date.now() / 1000));
     if (response.id_token) {
         await saveCookie(headers, secret, idTokenCookie, response.id_token);
     }

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

@@ -1,3 +1,3 @@
-export declare const saveCookie: (headers: Headers, secret: string, name: string, value: string) => Promise<void>;
+export declare const saveCookie: (headers: Headers, secret: string, name: string, value: string, maxage?: number) => Promise<void>;
 export declare const loadCookie: (cookies: any, secret: string, name: string) => Promise<string>;
 export declare const deleteCookie: (cookies: any, headers: Headers, cookieName: string) => void;

package/dist/server-side/cookies.js

@@ -1,7 +1,7 @@
 import { decrypt, encrypt } from "./crypto";
-export const saveCookie = async (headers, secret, name, value) => {
+export const saveCookie = async (headers, secret, name, value, maxage = 3600) => {
     const encryptedValue = await encrypt(secret, value);
-    headers.append('Set-Cookie', `${name}=${encryptedValue}; HttpOnly; SameSite=None; Secure; Max-Age=3600; Path=/`);
+    headers.append('Set-Cookie', `${name}=${encryptedValue}; HttpOnly; SameSite=None; Secure; Max-Age=${maxage}; Path=/`);
 };
 export const loadCookie = async (cookies, secret, name) => {
     const encryptedValue = cookies.get(name);

package/package.json

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

package/dist/components/layouts copy/DefaultLayout.svelte

@@ -1,115 +0,0 @@
-<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';
-	import { afterNavigate } from "$app/navigation";
-
-	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;
-	});
-
-	afterNavigate(() => {
-		window.scrollTo({ top: 0, behavior: "instant" });
-	});
-</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 class="min-h-screen">
-		{@render children?.()}
-	</main>
-	{@render footerRender?.()}
-
-</div>

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

@@ -1,21 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type MenuOption } from './menuItems.js';
-declare const DefaultLayout: import("svelte").Component<Partial<{
-    children: Snippet;
-    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 copy/MenuLayout.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { MenuItem, MenuSection } from './menuItems.js';
-	import Icon from '../Icon.svelte';
-	import { afterNavigate } from '$app/navigation';
-	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();
-	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
-		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 copy/MenuLayout.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { MenuItem, MenuSection } from './menuItems.js';
-declare const MenuLayout: import("svelte").Component<Partial<{
-    children: Snippet;
-    menuItems: Array<MenuSection | MenuItem>;
-}>, {}, "">;
-type MenuLayout = ReturnType<typeof MenuLayout>;
-export default MenuLayout;

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

@@ -1,29 +0,0 @@
-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;

package/dist/components/layouts copy/menuItems.js

@@ -1,28 +0,0 @@
-export var Visibility;
-(function (Visibility) {
-    Visibility[Visibility["Always"] = 0] = "Always";
-    Visibility[Visibility["Authenticated"] = 1] = "Authenticated";
-    Visibility[Visibility["NotAuthenticated"] = 2] = "NotAuthenticated";
-})(Visibility || (Visibility = {}));
-export function selectVisible(pages, visibility) {
-    return pages.filter((page) => page?.visibility === Visibility.Always ||
-        page?.visibility === visibility);
-}
-export function isSelected(includeSubpagesForSelect, page, item) {
-    if (page?.url?.pathname === '/') {
-        return page?.url?.pathname === item.href;
-    }
-    return includeSubpagesForSelect
-        ? (page?.url.pathname.startsWith(item.href ?? '-') && item.href !== '/')
-        : page?.url.pathname === item.href;
-}
-export const defaultCss = {
-    buttonCss: [],
-    container: [],
-    link: []
-};
-export function isAuthenticated(page) {
-    const isAuthenticated = page?.data?.session != null;
-    const visibility = isAuthenticated ? Visibility.Authenticated : Visibility.NotAuthenticated;
-    return visibility;
-}