@joyautomation/salt 0.1.3 → 0.1.5

package/dist/components/forms/Form.svelte

@@ -3,39 +3,94 @@
 	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',
+		resetButtonText = 'Reset',
+		showReset = true,
 		onsubmitstart,
 		onsubmitend
 	}: {
-		inputs: FormInputs
+		inputs?: FormInputs
+		groups?: FormGroup[]
 		action: string
 		buttonText?: string
+		resetButtonText?: string
+		showReset?: boolean
 		onsubmitstart?: () => void
 		onsubmitend?: () => void
 	} = $props()
 
-	let inputs = $state(propInputs)
+	let groups = $state(propGroups ?? [{ rows: propInputs ?? [] }])
 	let submitting = $state(false)
+	let defaultValues: Map<string, string> = $state(new Map())
 
 	$effect(() => {
-		inputs = propInputs
+		groups = propGroups ?? [{ rows: propInputs ?? [] }]
+	})
+
+	const allInputs = $derived(groups.flatMap((g) => g.rows))
+
+	// Capture defaults on first render
+	$effect(() => {
+		if (defaultValues.size === 0) {
+			const defaults = new Map<string, string>()
+			for (const row of allInputs) {
+				for (const input of row) {
+					defaults.set(input.id, input.value)
+				}
+			}
+			defaultValues = defaults
+		}
 	})
 
 	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)
 				})
 			})
 		)
 	)
+
+	const hasChanges = $derived(
+		allInputs.some((row) =>
+			row.some((input) => {
+				return defaultValues.get(input.id) !== input.value
+			})
+		)
+	)
+
+	function isChanged(inputId: string, value: string): boolean {
+		return defaultValues.has(inputId) && defaultValues.get(inputId) !== value
+	}
+
+	function reset() {
+		for (const row of allInputs) {
+			for (const input of row) {
+				const def = defaultValues.get(input.id)
+				if (def !== undefined) {
+					input.value = def
+				}
+			}
+		}
+	}
+
+	function updateDefaults() {
+		const defaults = new Map<string, string>()
+		for (const row of allInputs) {
+			for (const input of row) {
+				defaults.set(input.id, input.value)
+			}
+		}
+		defaultValues = defaults
+	}
 </script>
 
 <form
@@ -47,50 +102,118 @@
 		onsubmitstart?.()
 		return async ({ update }) => {
 			submitting = false
+			updateDefaults()
 			onsubmitend?.()
 			update({ reset: false })
 		}
 	}}
 >
-	{#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 || []}
+									changed={isChanged(input.id, input.value)}
+								/>
+							{:else if input.type === 'checkbox'}
+								<Switch
+									{...input}
+									bind:value={input.value}
+									inputs={allInputs}
+									changed={isChanged(input.id, input.value)}
+								/>
+							{:else}
+								<Input
+									{...input}
+									bind:value={input.value}
+									inputs={allInputs}
+									changed={isChanged(input.id, input.value)}
+								/>
+							{/if}
+						</div>
+					{/each}
 				</div>
 			{/each}
-		</div>
+		</fieldset>
 	{/each}
-	<button class="button--primary" disabled={!valid || submitting}>
-		{#if submitting}
-			<div class="form__spinner-container" transition:slide>
-				<span class="form__spinner"></span>
-			</div>
-		{:else}
-			<div transition:slide>
-				{buttonText}
-			</div>
+	<div class="form__actions">
+		<button class="button--primary" disabled={!valid || submitting}>
+			{#if submitting}
+				<div class="form__spinner-container" transition:slide>
+					<span class="form__spinner"></span>
+				</div>
+			{:else}
+				<div transition:slide>
+					{buttonText}
+				</div>
+			{/if}
+		</button>
+		{#if showReset && hasChanges}
+			<button type="button" class="button--secondary form__reset" onclick={reset} transition:slide>
+				{resetButtonText}
+			</button>
 		{/if}
-	</button>
+	</div>
 </form>
 
 <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;
 }
 
+.form__actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 2);
+}
+
+.form__reset {
+  background: transparent;
+  border: 1px solid var(--theme-neutral-400);
+  color: var(--theme-text);
+  padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
+  border-radius: var(--rounded-sm);
+  cursor: pointer;
+  font-size: var(--text-sm);
+}
+.form__reset:hover {
+  background: var(--theme-neutral-200);
+}
+
 .form__spinner-container {
   display: flex;
   justify-content: center;

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

@@ -1,8 +1,11 @@
-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;
+    resetButtonText?: string;
+    showReset?: boolean;
     onsubmitstart?: () => void;
     onsubmitend?: () => void;
 };

package/dist/components/forms/Input.svelte

@@ -12,8 +12,14 @@
 		validations,
 		inputs,
 		touched = false,
+		changed = false,
 		onblur = () => {}
-	}: InputProps & { inputs?: FormInputs; touched?: boolean; onblur?: () => void } = $props()
+	}: InputProps & {
+		inputs?: FormInputs
+		touched?: boolean
+		changed?: boolean
+		onblur?: () => void
+	} = $props()
 	const validationResult = $derived(
 		validations.find(([validation]) => {
 			return validation(value, inputs ?? [])
@@ -21,7 +27,11 @@
 	)
 </script>
 
-<div class="input" class:input--invalid={touched && validationResult != null}>
+<div
+	class="input"
+	class:input--invalid={touched && validationResult != null}
+	class:input--changed={changed}
+>
 	{#if label != null}
 		<label for={id}>{label}</label>
 	{/if}
@@ -72,6 +82,10 @@
   font-family: inherit;
 }
 
+.input--changed > input, .input--changed > textarea {
+  border-left: solid 3px var(--theme-primary);
+}
+
 .input--invalid > input, .input--invalid > textarea {
   border: solid 1px var(--theme-error-400, var(--red-400));
 }</style>

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

@@ -2,6 +2,7 @@ import type { FormInputs, InputProps } from './types.js';
 type $$ComponentProps = InputProps & {
     inputs?: FormInputs;
     touched?: boolean;
+    changed?: boolean;
     onblur?: () => void;
 };
 declare const Input: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/forms/Select.svelte

@@ -9,8 +9,13 @@
 		value = $bindable(''),
 		validations,
 		inputs,
-		options
-	}: InputProps & { inputs?: FormInputs; options: { value: string; label: string }[] } = $props()
+		options,
+		changed = false
+	}: InputProps & {
+		inputs?: FormInputs
+		options: { value: string; label: string }[]
+		changed?: boolean
+	} = $props()
 	const validationResult = $derived(
 		validations.find(([validation]) => {
 			return validation(value, inputs ?? [])
@@ -18,7 +23,11 @@
 	)
 </script>
 
-<div class="select-field" class:select-field--invalid={validationResult != null}>
+<div
+	class="select-field"
+	class:select-field--invalid={validationResult != null}
+	class:select-field--changed={changed}
+>
 	{#if label != null}
 		<label for={id}>{label}</label>
 	{/if}
@@ -64,6 +73,10 @@
   border-color: var(--theme-primary);
 }
 
+.select-field--changed > select {
+  border-left: solid 3px var(--theme-primary);
+}
+
 .select-field--invalid > select {
   border: solid 1px var(--theme-error-400, var(--red-400));
 }</style>

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

@@ -5,6 +5,7 @@ type $$ComponentProps = InputProps & {
         value: string;
         label: string;
     }[];
+    changed?: boolean;
 };
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/components/forms/Switch.svelte

@@ -6,9 +6,8 @@
 		name,
 		label,
 		value = $bindable('false'),
-		validations,
-		inputs
-	}: InputProps & { inputs?: FormInputs } = $props()
+		changed = false
+	}: InputProps & { inputs?: FormInputs; changed?: boolean } = $props()
 
 	const checked = $derived(value === 'true')
 
@@ -24,7 +23,7 @@
 	}
 </script>
 
-<div class="switch-field">
+<div class="switch-field" class:switch-field--changed={changed}>
 	{#if label != null}
 		<label for={id}>{label}</label>
 	{/if}
@@ -57,6 +56,11 @@
   text-transform: capitalize;
 }
 
+.switch-field--changed {
+  padding-left: calc(var(--spacing-unit) * 1.5);
+  border-left: solid 3px var(--theme-primary);
+}
+
 .switch {
   position: relative;
   display: inline-block;

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

@@ -1,6 +1,7 @@
 import type { FormInputs, InputProps } from './types.js';
 type $$ComponentProps = InputProps & {
     inputs?: FormInputs;
+    changed?: boolean;
 };
 declare const Switch: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;

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.5",
   "scripts": {
     "generate:icons": "node scripts/generate-icons.js",
     "dev": "vite dev",