@joyautomation/salt 0.1.4 → 0.1.5

package/dist/components/forms/Form.svelte

@@ -11,6 +11,8 @@
 		groups: propGroups,
 		action,
 		buttonText = 'Submit',
+		resetButtonText = 'Reset',
+		showReset = true,
 		onsubmitstart,
 		onsubmitend
 	}: {
@@ -18,12 +20,15 @@
 		groups?: FormGroup[]
 		action: string
 		buttonText?: string
+		resetButtonText?: string
+		showReset?: boolean
 		onsubmitstart?: () => void
 		onsubmitend?: () => void
 	} = $props()
 
 	let groups = $state(propGroups ?? [{ rows: propInputs ?? [] }])
 	let submitting = $state(false)
+	let defaultValues: Map<string, string> = $state(new Map())
 
 	$effect(() => {
 		groups = propGroups ?? [{ rows: propInputs ?? [] }]
@@ -31,6 +36,19 @@
 
 	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(
 		allInputs.every((row) =>
 			row.every((input) => {
@@ -40,6 +58,39 @@
 			})
 		)
 	)
+
+	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
@@ -51,6 +102,7 @@
 		onsubmitstart?.()
 		return async ({ update }) => {
 			submitting = false
+			updateDefaults()
 			onsubmitend?.()
 			update({ reset: false })
 		}
@@ -71,11 +123,22 @@
 									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} />
+								<Switch
+									{...input}
+									bind:value={input.value}
+									inputs={allInputs}
+									changed={isChanged(input.id, input.value)}
+								/>
 							{:else}
-								<Input {...input} bind:value={input.value} inputs={allInputs} />
+								<Input
+									{...input}
+									bind:value={input.value}
+									inputs={allInputs}
+									changed={isChanged(input.id, input.value)}
+								/>
 							{/if}
 						</div>
 					{/each}
@@ -83,17 +146,24 @@
 			{/each}
 		</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 {
@@ -125,6 +195,25 @@
   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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     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/package.json

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