@functionalcms/svelte-components 4.10.24 → 4.10.27

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/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

@@ -47,7 +47,7 @@
 </script>
 
 <div class="w-100">
-	<label for={id}> {label} </label>
+	<label class="label" for={id}> {label} </label>
 	{#if isMultiple}
 		<select
 			{id}
@@ -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/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/dist/index.d.ts

@@ -33,6 +33,8 @@ export type { ChoiceInputOption } from './components/form/utils.js';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';
+export { default as Form } from './components/form/Form.svelte';
+export { type Field, serialize, mapEntiresToOptions } from './components/form/form.js';
 export { default as Markdown } from './components/content/Markdown.svelte';
 export { type BlogPost, listAllPosts, importPost } from './components/blog/blog.js';
 export { default as EasyTools } from './components/integrations/EasyTools.svelte';

package/dist/index.js

@@ -45,6 +45,8 @@ export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
 export { default as AntiBot } from './components/form/AntiBot.svelte';
 export { default as Dropzone } from './components/form/Dropzone.svelte';
 export { default as Select } from './components/form/Select.svelte';
+export { default as Form } from './components/form/Form.svelte';
+export { serialize, mapEntiresToOptions } from './components/form/form.js';
 /*
  * Content
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.10.24",
+	"version": "4.10.27",
 	"watch": {
 		"build": {
 			"patterns": [