@functionalcms/svelte-components 5.3.1 → 5.3.2

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 = [

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "5.3.1",
+	"version": "5.3.2",
 	"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;
-}