@functionalcms/svelte-components 4.10.23 → 4.10.25

package/dist/components/form/Button.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
 	import type { Snippet } from 'svelte';
-	import type { EventHandler } from 'svelte/elements';
 
 	interface Props {
 		children: Snippet;

package/dist/components/form/ChoiceInput.svelte

@@ -36,7 +36,7 @@
 		size = '',
 		// Provides bind:checked capabilities that consumer can use
 		checked = $bindable([]),
-        ...restProps
+		...restProps
 	}: Partial<Props & HtmlParts> = $props();
 
 	let labelClasses = $derived(
@@ -96,29 +96,31 @@
 	};
 </script>
 
-<fieldset class={fieldsetClasses}>
-	<legend class={legendClasses}>{label}</legend>
-	{#each options as { value, label }, index}
-		<label
-			class={labelClasses}
-			class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
-		>
-			<input
-				class={inputClasses}
-				id="{id}-{name}-{index}"
-				{type}
-				{name}
-				{value}
-				disabled={isDisabled || disabledOptions.includes(value)}
-				checked={checkedOptions.includes(value)}
-				onchange={onChange}
-				{...restProps}
-			/>
-			<span class={labelSpanClasses} aria-hidden="true"></span>
-			<span class={labelCopyClasses}>{label}</span>
-		</label>
-	{/each}
-</fieldset>
+<div class="w-100">
+	<fieldset class={fieldsetClasses}>
+		<legend class={legendClasses}>{label}</legend>
+		{#each options as { value, label }, index}
+			<label
+				class={labelClasses}
+				class:disabled={isDisabled || disabledOptions.includes(value) || undefined}
+			>
+				<input
+					class={inputClasses}
+					id="{id}-{name}-{index}"
+					{type}
+					{name}
+					{value}
+					disabled={isDisabled || disabledOptions.includes(value)}
+					checked={checkedOptions.includes(value)}
+					onchange={onChange}
+					{...restProps}
+				/>
+				<span class={labelSpanClasses} aria-hidden="true"></span>
+				<span class={labelCopyClasses}>{label}</span>
+			</label>
+		{/each}
+	</fieldset>
+</div>
 
 <style>
 	/**

package/dist/components/form/Form.svelte

@@ -1,100 +1,48 @@
 <script lang="ts">
+    import { mapEntiresToOptions, type Field } from "./form.js";
 	import ChoiceInput from "./ChoiceInput.svelte";
-	import type { Field, Validation } from "./form.js";
 	import Input from "./Input.svelte";
 	import Select from "./Select.svelte";
 	import Switch from "./Switch.svelte";
 
+    interface Props {
+        action: string;
+        schema: Array<Field>;
+    }
 
-	interface Props {
-		schema: Validation;
-	}
-
-	let { schema }: Props = $props();
-
-	const fields = Object.keys(schema.shape).map((key) => ({
-		name: key,
-		type:
-			schema.shape[key].def.type == 'optional'
-				? schema.shape[key].def.innerType._def.type
-				: schema.shape[key].def.type,
-		subType: schema.shape[key].def.format,
-		meta: { ...schema.shape[key].meta() },
-		entries: schema.shape[key]._def.innerType
-			? schema.shape[key]._def.innerType._def.entries
-			: schema.shape[key]._def.entries,
-		field: schema.shape[key]
-	}));
-
-	function getFieldType(field: Field) {
-		if (field.type === 'number') {
-			return 'number';
-		}
-		if (field.meta.multiline) {
-			return 'textarea';
-		}
-		if (field.meta.secure) {
-			return 'password';
-		}
-		switch (field.subType) {
-			case 'email':
-				return 'email';
-			case 'url':
-				return 'url';
-			case 'tel':
-				return 'tel';
-			case 'password':
-				return 'password';
-			case 'email':
-				return 'email';
-		}
-		return 'string';
-	}
-
-	function mapEntiresToOptions(field: Field) {
-		if (field.entries) {
-			let result = Object.keys(field.entries).map((key) => ({
-				label: key,
-				value: field.entries[key]
-			}));
-			return result;
-		} else {
-			return [];
-		}
-	}
+    let { action, schema }: Props = $props();
 </script>
 
-<form method="POST">
-	<fieldset>
-		{#each fields as field}
-			<div>
-				{#if field.type === 'boolean'}
-					<Switch name={field.name} id={field.name} label={field.name} />
-				{:else if field.type === 'enum' && field.meta.type === 'select'}
-					<Select
-						name={field.name}
-						id={field.name}
-						label={field.name}
-						options={mapEntiresToOptions(field)}
-					/>
-				{:else if field.type === 'enum'}
-					<ChoiceInput
-						name={field.name}
-						id={field.name}
-						label={field.name}
-						type={field.meta.type}
-						options={mapEntiresToOptions(field)}
-					/>
-				{:else if field.type === 'string' || field.type === 'number'}
-					<Input
-						name={field.name}
-						id={field.name}
-						label={field.name}
-						type={getFieldType(field)}
-						required
-					/>
-				{/if}
-			</div>
-		{/each}
-	</fieldset>
+<form method="POST" {action}>
+    <fieldset>
+        {#each schema as field}
+            {#if field.type === "boolean"}
+                <Switch name={field.name} id={field.name} label={field.name} />
+            {:else if field.type === "enum" && field.meta.type === "select"}
+                <Select
+                    name={field.name}
+                    id={field.name}
+                    label={field.name}
+                    options={mapEntiresToOptions(field)}
+                    singleSelected="LOW"
+                />
+            {:else if field.type === "enum"}
+                <ChoiceInput
+                    name={field.name}
+                    id={field.name}
+                    label={field.name}
+                    type={field.meta.type}
+                    options={mapEntiresToOptions(field)}
+                />
+            {:else if field.type === "string" || field.type === "number"}
+                <Input
+                    name={field.name}
+                    id={field.name}
+                    label={field.name}
+                    type={field.meta.type}
+                    isRequired={field.isRequired}
+                />
+            {/if}
+        {/each}
+    </fieldset>
 </form>

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

@@ -1,6 +1,7 @@
-import type { Validation } from "./form.js";
+import { type Field } from "./form.js";
 interface Props {
-    schema: Validation;
+    action: string;
+    schema: Array<Field>;
 }
 declare const Form: import("svelte").Component<Props, {}, "">;
 type Form = ReturnType<typeof Form>;

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>
 
-<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}
+<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>
 
 <style>
 	.select,
@@ -160,4 +160,38 @@
 		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,22 +64,24 @@
 	};
 </script>
 
-<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 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>
 
 <style>
 	/**

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

@@ -1,11 +1,12 @@
 export interface Field {
     name: string;
     type: string;
-    subType?: string;
+    entries: Array<string>;
     meta: any;
-    entries?: any[];
-    field: any;
-}
-export interface Validation {
-    shape: any;
+    isRequired: boolean;
 }
+export declare function serialize(schema: any): Array<Field>;
+export declare function mapEntiresToOptions(field: Field): {
+    label: string;
+    value: string;
+}[];

package/dist/components/form/form.js

@@ -1 +1,22 @@
-export {};
+export 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,
+        };
+    });
+    return fields;
+}
+export function mapEntiresToOptions(field) {
+    return (field?.entries?.map((entry) => ({
+        label: entry,
+        value: entry,
+    })) ?? []);
+}

package/dist/components/menu/CollapsibleMenu.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-	import { HeaderNavigationItem, defaultCss } from './types.js';
-	import { afterNavigate } from '$app/navigation';
+	import { HeaderNavigationItem } from './types.js';
 	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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.10.23",
+	"version": "4.10.25",
 	"watch": {
 		"build": {
 			"patterns": [
@@ -70,7 +70,8 @@
 		"ioredis": "^5.6.1",
 		"marked": "^15.0.11",
 		"oauth4webapi": "^3.5.0",
-		"sveltekit-superforms": "^2.25.0"
+		"sveltekit-superforms": "^2.25.0",
+		"yup": "^1.6.1"
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.20.8",