@functionalcms/svelte-components 4.16.0 → 4.19.0

package/dist/components/form/Form.svelte

@@ -1,105 +1,53 @@
 <script lang="ts">
-	import { mapEntiresToOptions, type Field } from './form.js';
-	import ChoiceInput from './ChoiceInput.svelte';
-	import Input from './Input.svelte';
-	import Select from './Select.svelte';
-	import Switch from './Switch.svelte';
-	import { Placement } from '../Styling.js';
-	import Button from './Button.svelte';
-	import { superForm } from 'sveltekit-superforms';
-	import { translator } from '../../translations/translator.js';
-
-	interface FormButton {
-		label: string;
-		type: 'submit' | 'reset' | 'button';
-		click?: () => void;
-	}
+	import ChoiceInput from "./ChoiceInput.svelte";
+	import type { Field } from "./form.js";
+	import Input from "./Input.svelte";
+	import Select from "./Select.svelte";
+	import Switch from "./Switch.svelte";
 
 	interface Props {
-		buttons: Array<FormButton>;
-		action: string;
-		schema: Array<Field>;
-		superform: any;
-		buttonPosition: Placement;
-		buttonsContainer: string;
-		translate: (key: string) => string;
+        action: string;
+        css?: string;
+        successMessage?: string;
+        submitButonText?: string;
+        fields?: Array<Field>;
 	}
 
-	let {
-		buttons = [],
-		schema = [],
-		superform = {},
-		action = '',
-		buttonsContainer = '',
-		buttonPosition = Placement.Bottom,
-		translate = translator({})
-	}: Partial<Props> = $props();
-
-	const { form, errors, enhance } = superForm(superform);
+    let {
+        action,
+        fields = [],
+        css = "",
+        submitButonText = "Submit",
+        successMessage = "Your message has been delivered",
+    }: Props = $props();
+
+    let form: any;
+
+    const showMessage = $state(false);
+
+    const submitContactForm = async (event: Event) => {
+        event.preventDefault();
+        const formData = new FormData(form);
+        const response = await fetch("/contact", {
+            method: "POST",
+            body: formData,
+        });
+        console.log("Form submitted", response);
+    };
 </script>
 
-{#snippet renderButtons()}
-	<div class={buttonsContainer}>
-		{#each buttons as action}
-			<Button type={action.type} click={action.click}>
-				{action.label}
-			</Button>
-		{/each}
-	</div>
-{/snippet}
-
-<form method="POST" {action} use:enhance>
+<form method="POST" action={action} class={css}>
 	<fieldset>
-		{#if buttonPosition === Placement.Top}
-			{@render renderButtons()}
-		{/if}
-
-		<div>
-			{#each schema as field}
-				{#if field.type === 'boolean'}
-					<Switch
-						name={field.name}
-						id={field.name}
-						label={translate(field.name)}
-						isChecked={$form[field.name]}
-					/>
-				{:else if field.type === 'enum' && field.meta.type === 'select'}
-					<Select
-						name={field.name}
-						id={field.name}
-						label={translate(field.name)}
-						options={mapEntiresToOptions(field, translate)}
-						singleSelected={$form[field.name]}
-						defaultOptionLabel={translate('selectOption')}
-					/>
-				{:else if field.type === 'enum'}
-					<ChoiceInput
-						name={field.name}
-						id={field.name}
-						label={translate(field.name)}
-						type={field.meta.type}
-						options={mapEntiresToOptions(field, translate)}
-						checkedOptions={[field.default]}
-						isFieldset={true}
-					/>
-				{:else if field.type === 'string' || field.type === 'number'}
-					<Input
-						name={field.name}
-						id={field.name}
-						label={translate(field.name)}
-						type={field.meta.type}
-						isRequired={field.isRequired}
-						value={$form[field.name]}
-					/>
-				{/if}
-				{#if $errors[field.name]}
-					<span class="error">{$errors[field.name]}</span>
-				{/if}
-			{/each}
-		</div>
-
-		{#if buttonPosition !== Placement.Top}
-			{@render renderButtons()}
-		{/if}
+		{#each fields as field}
+			<div>
+				<Input
+					name={field.name}
+					id={field.name}
+					label={field.name}
+					type={field.subType}
+					isRequired={field.isRequired}
+				/>
+			</div>
+		{/each}
 	</fieldset>
 </form>

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

@@ -1,17 +1,11 @@
-import { type Field } from './form.js';
-import { Placement } from '../Styling.js';
-declare const Form: import("svelte").Component<Partial<{
-    buttons: Array<{
-        label: string;
-        type: "submit" | "reset" | "button";
-        click?: () => void;
-    }>;
+import type { Field } from "./form.js";
+interface Props {
     action: string;
-    schema: Array<Field>;
-    superform: any;
-    buttonPosition: Placement;
-    buttonsContainer: string;
-    translate: (key: string) => string;
-}>, {}, "">;
+    css?: string;
+    successMessage?: string;
+    submitButonText?: string;
+    fields?: Array<Field>;
+}
+declare const Form: import("svelte").Component<Props, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/dist/components/form/Input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	import type { LabelSize, Type } from './utils.ts';
+	import type { LabelSize, InputType } from './form.ts';
 
 	interface Props{
 		label: string;
@@ -29,7 +29,7 @@
 
 		placeholder: string;
 		
-		type: Type;
+		type: InputType;
 
 		maxLength: number | undefined;
 		minLength: number | undefined;
@@ -60,7 +60,7 @@
 		isUnderlined = false,
 		labelSize = '',
 		type = 'text',
-		value = $bindable(''),
+		value = '',
 		placeholder= '',
 		...restProps
 	}: Partial<Props> = $props();

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { LabelSize, Type } from './utils.ts';
+import type { LabelSize, InputType } from './form.ts';
 declare const Input: import("svelte").Component<Partial<{
     label: string;
     labelSize: LabelSize;
@@ -19,12 +19,12 @@ declare const Input: import("svelte").Component<Partial<{
     isRequired: boolean | undefined;
     css: string;
     placeholder: string;
-    type: Type;
+    type: InputType;
     maxLength: number | undefined;
     minLength: number | undefined;
     value: string | any;
     addonLeft: Snippet;
     addonRight: Snippet;
-}>, {}, "value">;
+}>, {}, "">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/form/Select.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from '../../utils.js';
+	import { cn } from "../../utils.js";
 
 	interface Props {
 		id: string;
@@ -32,7 +32,7 @@
 		css = '',
 		singleSelected = $bindable(''),
 		multiSelected = $bindable([]), // multiSelected can be used for two-way bindings
-		selected = () => {}
+		selected = () => {},
 	}: Partial<Props> = $props();
 
 	const changeHandler = () => {
@@ -42,45 +42,45 @@
 
 	let disable = isDisabled;
 	let classes = $derived(
-		cn(isSkinned ? 'select' : 'select-base', size ? `select-${size}` : '', css ? `${css}` : '')
-	);
+		cn(
+			isSkinned ? 'select' : 'select-base',
+			size ? `select-${size}` : '',
+			css ? `${css}` : ''));
 </script>
 
-<div class="w-100">
-	<label class="label" for={id}> {label} </label>
-	{#if isMultiple}
-		<select
-			{id}
-			class={classes}
-			{name}
-			disabled={disable}
-			multiple
-			size={multipleSize}
-			bind:value={multiSelected}
-			onchange={changeHandler}
-		>
-			{#each options as { value, label }}
-				<option {value}>{label}</option>
-			{/each}
-		</select>
-	{:else}
-		<select
-			{id}
-			class={classes}
-			{name}
-			disabled={disable}
-			bind:value={singleSelected}
-			onchange={changeHandler}
-		>
-			<option value="" disabled selected>
-				{defaultOptionLabel}
-			</option>
-			{#each options as { value, label }}
-				<option {value}>{label}</option>
-			{/each}
-		</select>
-	{/if}
-</div>
+<label class="screenreader-only" for={id}> {label} </label>
+{#if isMultiple}
+	<select
+		id={id}
+		class={classes}
+		{name}
+		disabled={disable}
+		multiple
+		size={multipleSize}
+		bind:value={multiSelected}
+		onchange={changeHandler}
+	>
+		{#each options as { value, label }}
+			<option {value}>{label}</option>
+		{/each}
+	</select>
+{:else}
+	<select
+		id={id}
+		class={classes}
+		{name}
+		disabled={disable}
+		bind:value={singleSelected}
+		onchange={changeHandler}
+	>
+		<option value="" disabled selected>
+			{defaultOptionLabel}
+		</option>
+		{#each options as { value, label }}
+			<option {value}>{label}</option>
+		{/each}
+	</select>
+{/if}
 
 <style>
 	.select,
@@ -160,38 +160,4 @@
 		padding-left: var(--fluid-16);
 		font-size: var(--fluid-18);
 	}
-	.field-help,
-	.field-help-large,
-	.field-help-small,
-	.field-error,
-	.field-error-large,
-	.field-error-small,
-	.label-skin,
-	.label,
-	.input-addon-container,
-	.input-small,
-	.input-large,
-	.input-skin,
-	.input-underlined,
-	.input-underlined-bg,
-	.input {
-		color: var(--font-color, var(--dark));
-		font-family: var(--font-family-body);
-		font-weight: var(--font-weight, 300);
-		font-size: var(--font-size, 1rem);
-		line-height: var(--line-height, var(--fluid-20, 1.25rem));
-		width: 100%;
-		max-width: 100%;
-	}
-	.label {
-		display: inline-block;
-
-		/* Provided --input-vertical-pad isn't overriden we'll get 20px
-      label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
-		margin-block-start: 0;
-		margin-inline-start: 0;
-		margin-inline-end: 0;
-		margin-block-end: var(--input-label-pad, 0.375rem);
-		vertical-align: initial;
-	}
 </style>

package/dist/components/form/Switch.svelte

@@ -15,7 +15,7 @@
 	}
 	let {
 		id = '',
-		name = '',
+		name= '',
 		label = '',
 		css = '',
 		labelPosition = 'left',
@@ -64,24 +64,22 @@
 	};
 </script>
 
-<div class="w-100">
-	<label class={switchContainer} for={id}>
-		{#if labelPosition === 'left'}<span class="switch-label">{label}</span>{/if}
-		<input
-			type="checkbox"
-			class="switch-input"
-			{id}
-			{name}
-			bind:checked={isChecked}
-			disabled={isDisabled}
-			onclick={handleClick}
-			onkeypress={handleKeypress}
-			role="switch"
-		/>
-		<span class={switchSpan()} aria-hidden="true"></span>
-		{#if labelPosition === 'right'}<span class="switch-label">{label}</span>{/if}
-	</label>
-</div>
+<label class={switchContainer} for={id}>
+	{#if labelPosition === 'left'}<span class="switch-label">{label}</span>{/if}
+	<input
+		type="checkbox"
+		class="switch-input"
+		{id}
+		{name}
+		bind:checked={isChecked}
+		disabled={isDisabled}
+		onclick={handleClick}
+		onkeypress={handleKeypress}
+		role="switch"
+	/>
+	<span class={switchSpan()} aria-hidden="true"></span>
+	{#if labelPosition === 'right'}<span class="switch-label">{label}</span>{/if}
+</label>
 
 <style>
 	/**

package/dist/components/form/dropzone.d.ts

@@ -0,0 +1,49 @@
+export declare const displaySize: (bytes: number) => string;
+export declare const BYTE = 1;
+export declare const KILOBYTE = 1024;
+export declare const MEGABYTE: number;
+export declare const GIGABYTE: number;
+export declare const ACCEPT_IMAGE = "image/*";
+export declare const ACCEPT_VIDEO = "video/*";
+export declare const ACCEPT_AUDIO = "audio/*";
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type FileRejectedReason = 'Maximum file size exceeded' | 'File type not allowed' | 'Maximum files uploaded';
+export interface FileDropZoneProps extends Omit<HTMLInputAttributes, 'multiple'> {
+    /** Called with the uploaded files when the user drops or clicks and selects their files.
+     *
+     * @param files
+     */
+    onUpload: (files: File[]) => Promise<void>;
+    /** The maximum amount files allowed to be uploaded */
+    maxFiles?: number;
+    fileCount?: number;
+    /** The maximum size of a file in bytes */
+    maxFileSize?: number;
+    children?: Snippet<[]>;
+    css: string;
+    /** Called when a file does not meet the upload criteria (size, or type) */
+    onFileRejected?: (opts: {
+        reason: FileRejectedReason;
+        file: File;
+    }) => void;
+    /** Takes a comma separated list of one or more file types.
+     *
+     *  [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+     *
+     * ### Usage
+     * ```svelte
+     * <FileDropZone
+     * 		accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+     * />
+     * ```
+     *
+     * ### Common Values
+     * ```svelte
+     * <FileDropZone accept="audio/*"/>
+     * <FileDropZone accept="image/*"/>
+     * <FileDropZone accept="video/*"/>
+     * ```
+     */
+    accept?: string;
+}

package/dist/components/form/dropzone.js

@@ -0,0 +1,18 @@
+export const displaySize = (bytes) => {
+    if (bytes < KILOBYTE)
+        return `${bytes.toFixed(0)} B`;
+    if (bytes < MEGABYTE)
+        return `${(bytes / KILOBYTE).toFixed(0)} KB`;
+    if (bytes < GIGABYTE)
+        return `${(bytes / MEGABYTE).toFixed(0)} MB`;
+    return `${(bytes / GIGABYTE).toFixed(0)} GB`;
+};
+// Utilities for working with file sizes
+export const BYTE = 1;
+export const KILOBYTE = 1024;
+export const MEGABYTE = 1024 * KILOBYTE;
+export const GIGABYTE = 1024 * MEGABYTE;
+// utilities for limiting accepted files
+export const ACCEPT_IMAGE = 'image/*';
+export const ACCEPT_VIDEO = 'video/*';
+export const ACCEPT_AUDIO = 'audio/*';

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

@@ -1,14 +1,12 @@
+export type FieldType = "input" | "textarea" | "radio" | "checkbox";
+export type InputType = 'text' | 'email' | 'search' | 'password' | 'tel' | 'number' | 'url' | 'month' | 'time' | 'week' | 'date' | 'datetime-local' | 'color';
+export type LabelSize = 'small' | 'large' | '';
 export interface Field {
     name: string;
-    type: string;
-    entries: Array<string>;
+    label?: string;
+    type: FieldType;
+    subType?: InputType;
     meta: any;
-    isRequired: boolean;
+    entries?: any[];
+    field: any;
 }
-export declare function serialize(schema: any): Promise<Field[]>;
-export declare function createForm(schema: any): Promise<import("sveltekit-superforms").SuperValidated<{}, any, {}>>;
-export declare function readForm(formRequest: any, schema: any): Promise<import("sveltekit-superforms").SuperValidated<{}, any, {}>>;
-export declare function mapEntiresToOptions(field: Field, translate: (value: string) => string): {
-    label: string;
-    value: string;
-}[];

package/dist/components/form/form.js

@@ -1,33 +1 @@
-import { superValidate } from 'sveltekit-superforms';
-import { yup } from 'sveltekit-superforms/adapters';
-export async function serialize(schema) {
-    const keys = schema._nodes.reverse();
-    const fields = keys.map((key) => {
-        const field = schema.fields[key];
-        const hasEntries = field._whitelist.size > 0;
-        const isOptional = field.spec.optional ?? true;
-        return {
-            name: key,
-            type: hasEntries ? "enum" : field.type,
-            entries: hasEntries ? [...field._whitelist] : [],
-            meta: field.spec.meta ?? {},
-            isRequired: !isOptional,
-            default: field?.spec?.default,
-        };
-    });
-    return fields;
-}
-export async function createForm(schema) {
-    const form = await superValidate(yup(schema), {});
-    return form;
-}
-export async function readForm(formRequest, schema) {
-    const form = await superValidate(formRequest, yup(schema));
-    return form;
-}
-export function mapEntiresToOptions(field, translate) {
-    return (field?.entries?.map((entry) => ({
-        label: translate(entry),
-        value: entry,
-    })) ?? []);
-}
+export {};

package/dist/components/layouts/Tabs.svelte

@@ -20,7 +20,7 @@
 
 	let dynamicComponentRefs = $state([]); //https://svelte.dev/tutorial/component-this
 	let tabButtonRefs: Array<HTMLButtonElement> = $state([]);
-	let activePanel: Tab = $state(tabs[0]);
+	let activePanel = $state(null);
 
 	const baseStyles = () => `tabs ${isVerticalOrientation ? 'tabs-vertical' : ''}`;
 
@@ -168,8 +168,8 @@
 			{:else} -->
 			<button
 				bind:this={tabButtonRefs[i]}
-				onclick={() => selectTab(i)}
-				onkeydown={(e) => handleKeyDown(e, i)}
+				on:click={() => selectTab(i)}
+				on:keydown={(e) => handleKeyDown(e, i)}
 				disabled={tab.isDisabled}
 				class={tabButtonClasses(tab)}
 				role="tab"

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -22,7 +22,7 @@
 		containerCss = '',
 		leftCss = 'w50p',
 		rightCss = 'w50p'
-	}: Partial<TwoColumnLayoutProps> = $props();
+	}: TwoColumnLayoutProps = $props();
 
 	let containerCssEx = cn(
 		'flex flex-row-dynamic',

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-declare const TwoColumnsLayout: import("svelte").Component<Partial<{
+interface TwoColumnLayoutProps {
     leftRender: Snippet;
     rightRender: Snippet;
     containerCss: string;
@@ -7,6 +7,7 @@ declare const TwoColumnsLayout: import("svelte").Component<Partial<{
     rightCss: string;
     isFullWidth: boolean;
     isFullHeight: boolean;
-}>, {}, "">;
+}
+declare const TwoColumnsLayout: import("svelte").Component<TwoColumnLayoutProps, {}, "">;
 type TwoColumnsLayout = ReturnType<typeof TwoColumnsLayout>;
 export default TwoColumnsLayout;

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-	import { HeaderNavigationItem } from './types.js';
+	import { HeaderNavigationItem, defaultCss } from './types.js';
+	import { afterNavigate } from '$app/navigation';
 	import { cn } from '../../utils.js';
 	import { Placement } from '../Styling.js';
 	import Button from '../form/Button.svelte';
+	import Drawer from '../presentation/Drawer.svelte';
+	import ListMenu from './ListMenu.svelte';
 	import type { Snippet } from 'svelte';
 
 	interface Css {

package/dist/components/presentation/Carousel.svelte

@@ -24,12 +24,14 @@
 		perPage = 1,
 		slideGaps = '20px;',
 		disableDrag = false,
-		css = {slide: "", container: ""}
+		css = {slide: "", container: ""},
+		loop = false
 	}: Props = $props();
 
 	let options: EmblaOptionsType = {
-		loop: false,
+		loop: loop,
 	};
+	
 	if(disableDrag) {
 		options.watchDrag = false;
 	}

package/dist/index-server.d.ts

@@ -1,7 +1,6 @@
 export { authenticationHandle } from './auth/authenticationHandle.js';
 export { default as authorizationHandle } from './auth/authorizationHandle.js';
 export { default as errorHandler } from './auth/errorHandle.js';
-export { default as getRedirection } from './server-side/redirection.ts';
 export { redisSessionProvider } from './auth/redisSessionProvider.js';
 export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.js';
 export { userAuthenticationProvider } from './auth/userAuthenticationProvider.js';
@@ -9,3 +8,4 @@ export { getBlobService, getCommunicationService, getDataService, getTemplateSer
 export type { RedirectResponse } from './auth/RedirectResponse.js';
 export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.js';
 export { isHuman } from './components/form/AntiBot.js';
+export { default as getRedirectPipeline } from './server-side/getRedirectPipeline.js';

package/dist/index-server.js

@@ -1,10 +1,10 @@
 export { authenticationHandle } from './auth/authenticationHandle.js';
 export { default as authorizationHandle } from './auth/authorizationHandle.js';
 export { default as errorHandler } from './auth/errorHandle.js';
-export { default as getRedirection } from './server-side/redirection.ts';
 export { redisSessionProvider } from './auth/redisSessionProvider.js';
 export { machineAuthenticationProvider } from './auth/machineAuthenticationProvider.js';
 export { userAuthenticationProvider } from './auth/userAuthenticationProvider.js';
 export { getBlobService, getCommunicationService, getDataService, getTemplateService, getWebsiteService, getAIService, getAuthService, } from './server-side/getServices.js';
 export { createMachineTokenApprovedLocals } from './auth/getMachineAccessToken.js';
 export { isHuman } from './components/form/AntiBot.js';
+export { default as getRedirectPipeline } from './server-side/getRedirectPipeline.js';