@joyautomation/salt 0.1.3 → 0.1.4

package/dist/components/forms/Form.svelte

@@ -3,35 +3,39 @@
 	import Input from './Input.svelte'
 	import Select from './Select.svelte'
 	import Switch from './Switch.svelte'
-	import type { FormInputs } from './types.js'
+	import type { FormGroup, FormInputs } from './types.js'
 	import { slide } from 'svelte/transition'
 
 	const {
 		inputs: propInputs,
+		groups: propGroups,
 		action,
 		buttonText = 'Submit',
 		onsubmitstart,
 		onsubmitend
 	}: {
-		inputs: FormInputs
+		inputs?: FormInputs
+		groups?: FormGroup[]
 		action: string
 		buttonText?: string
 		onsubmitstart?: () => void
 		onsubmitend?: () => void
 	} = $props()
 
-	let inputs = $state(propInputs)
+	let groups = $state(propGroups ?? [{ rows: propInputs ?? [] }])
 	let submitting = $state(false)
 
 	$effect(() => {
-		inputs = propInputs
+		groups = propGroups ?? [{ rows: propInputs ?? [] }]
 	})
 
+	const allInputs = $derived(groups.flatMap((g) => g.rows))
+
 	const valid = $derived(
-		inputs.every((row) =>
+		allInputs.every((row) =>
 			row.every((input) => {
 				return input.validations.every(([validation]) => {
-					return !validation(input.value, inputs)
+					return !validation(input.value, allInputs)
 				})
 			})
 		)
@@ -52,20 +56,32 @@
 		}
 	}}
 >
-	{#each inputs as row}
-		<div class="form__row">
-			{#each row as input}
-				<div>
-					{#if input.type === 'select'}
-						<Select {...input} bind:value={input.value} {inputs} options={input.options || []} />
-					{:else if input.type === 'checkbox'}
-						<Switch {...input} bind:value={input.value} {inputs} />
-					{:else}
-						<Input {...input} bind:value={input.value} {inputs} />
-					{/if}
+	{#each groups as group}
+		<fieldset class="form__group">
+			{#if group.heading}
+				<legend class="form__group-heading">{group.heading}</legend>
+			{/if}
+			{#each group.rows as row}
+				<div class="form__row">
+					{#each row as input}
+						<div>
+							{#if input.type === 'select'}
+								<Select
+									{...input}
+									bind:value={input.value}
+									inputs={allInputs}
+									options={input.options || []}
+								/>
+							{:else if input.type === 'checkbox'}
+								<Switch {...input} bind:value={input.value} inputs={allInputs} />
+							{:else}
+								<Input {...input} bind:value={input.value} inputs={allInputs} />
+							{/if}
+						</div>
+					{/each}
 				</div>
 			{/each}
-		</div>
+		</fieldset>
 	{/each}
 	<button class="button--primary" disabled={!valid || submitting}>
 		{#if submitting}
@@ -83,11 +99,29 @@
 <style>.form {
   display: flex;
   flex-direction: column;
+  gap: calc(var(--spacing-unit) * 4);
+}
+
+.form__group {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 1);
+}
+
+.form__group-heading {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--theme-text);
+  padding: 0;
 }
-.form > .form__row {
+
+.form__row {
   display: flex;
 }
-.form > .form__row > * {
+.form__row > * {
   flex-grow: 1;
 }
 

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

@@ -1,6 +1,7 @@
-import type { FormInputs } from './types.js';
+import type { FormGroup, FormInputs } from './types.js';
 type $$ComponentProps = {
-    inputs: FormInputs;
+    inputs?: FormInputs;
+    groups?: FormGroup[];
     action: string;
     buttonText?: string;
     onsubmitstart?: () => void;

package/dist/components/forms/index.d.ts

@@ -3,4 +3,4 @@ export { default as Input } from './Input.svelte';
 export { default as Select } from './Select.svelte';
 export { default as Switch } from './Switch.svelte';
 export { default as SearchableSelect } from './SearchableSelect.svelte';
-export type { InputProps, FormInputs, FormInputsPartial } from './types.js';
+export type { InputProps, FormInputs, FormInputsPartial, FormGroup } from './types.js';

package/dist/components/forms/types.d.ts

@@ -13,3 +13,7 @@ export type InputProps = {
 };
 export type FormInputs = InputProps[][];
 export type FormInputsPartial = (Pick<InputProps, 'name'> & Partial<InputProps>)[][];
+export type FormGroup = {
+    heading?: string;
+    rows: InputProps[][];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joyautomation/salt",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "scripts": {
     "generate:icons": "node scripts/generate-icons.js",
     "dev": "vite dev",