@functionalcms/svelte-components 4.10.28 → 4.10.29

package/dist/components/form/ChoiceInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cn } from '../../utils.js';
-	import { Orientation } from '../Styling.ts';
+	import { Orientation } from '../Styling.js';
 	import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 
 	interface Props {

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

@@ -1,4 +1,4 @@
-import { Orientation } from '../Styling.ts';
+import { Orientation } from '../Styling.js';
 import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
 declare const ChoiceInput: import("svelte").Component<Partial<{
     isSkinned: boolean;

package/dist/components/form/Form.svelte

@@ -1,48 +1,82 @@
 <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 { 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.ts';
+	import { addTransactionSupport } from 'ioredis/built/transaction.js';
+	import Button from './Button.svelte';
 
-    interface Props {
-        action: string;
-        schema: Array<Field>;
-    }
+	interface FormButton{
+		label: string;
+		type: "submit" | "reset" | "button";
+		click?: () => void;
+	}
 
-    let { action, schema }: Props = $props();
+	interface Props {
+		actions: Array<FormButton>;
+		schema: Array<Field>;
+		buttonPosition: Placement;
+		buttonsContainer: string;
+	}
+
+	let {
+		actions = [],
+		schema,
+		buttonsContainer = '',
+		buttonPosition = Placement.Bottom
+	}: Partial<Props> = $props();
 </script>
 
+{#snippet buttons()}
+	<div class={buttonsContainer}>
+		{#each actions as action}
+			<Button type={action.type} click={action.click}>{action.label}</Button>
+		{/each}
+	</div>
+{/snippet}
+
 <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>
+	<fieldset>
+		{#if buttonPosition === Placement.Top}
+			{@render buttons()}
+		{/if}
+
+		<div>
+			{#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}
+		</div>
+		
+		{#if buttonPosition !== Placement.Top}
+			{@render buttons()}
+		{/if}
+	</fieldset>
 </form>

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

@@ -1,8 +1,14 @@
-import { type Field } from "./form.js";
-interface Props {
-    action: string;
+import { type Field } from './form.js';
+import { Placement } from '../Styling.ts';
+declare const Form: import("svelte").Component<Partial<{
+    actions: Array<{
+        label: string;
+        type: "submit" | "reset" | "button";
+        click?: () => void;
+    }>;
     schema: Array<Field>;
-}
-declare const Form: import("svelte").Component<Props, {}, "">;
+    buttonPosition: Placement;
+    buttonsContainer: string;
+}>, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/package.json

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