@joyautomation/salt 0.1.2 → 0.1.4

package/dist/components/forms/Form.svelte

@@ -2,35 +2,40 @@
 	import { enhance } from '$app/forms'
 	import Input from './Input.svelte'
 	import Select from './Select.svelte'
-	import type { FormInputs } from './types.js'
+	import Switch from './Switch.svelte'
+	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)
 				})
 			})
 		)
@@ -51,18 +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}
-						<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}
@@ -80,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/Switch.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import type { FormInputs, InputProps } from './types.js'
+
+	let {
+		id,
+		name,
+		label,
+		value = $bindable('false'),
+		validations,
+		inputs
+	}: InputProps & { inputs?: FormInputs } = $props()
+
+	const checked = $derived(value === 'true')
+
+	function toggle() {
+		value = value === 'true' ? 'false' : 'true'
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault()
+			toggle()
+		}
+	}
+</script>
+
+<div class="switch-field">
+	{#if label != null}
+		<label for={id}>{label}</label>
+	{/if}
+	<button
+		type="button"
+		{id}
+		class="switch"
+		class:switch--active={checked}
+		onclick={toggle}
+		onkeydown={handleKeydown}
+		role="switch"
+		aria-checked={checked}
+		aria-label={label ?? name}
+	>
+		<span class="switch__slider"></span>
+	</button>
+	<input {name} type="hidden" value={checked} />
+</div>
+
+<style>.switch-field {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 2);
+}
+.switch-field > label {
+  color: var(--theme-text);
+  font-family: var(--theme-font-basic, inherit);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm-lh);
+  text-transform: capitalize;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.switch__slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--theme-neutral-400);
+  border-radius: 12px;
+  transition: background-color 0.2s ease;
+}
+.switch__slider::before {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.switch--active .switch__slider {
+  background-color: var(--theme-primary);
+}
+.switch--active .switch__slider::before {
+  transform: translateX(16px);
+}
+
+.switch:focus-visible .switch__slider {
+  outline: 2px solid var(--theme-primary);
+  outline-offset: 2px;
+}</style>

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

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

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

@@ -1,5 +1,6 @@
 export { default as Form } from './Form.svelte';
 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/index.js

@@ -1,4 +1,5 @@
 export { default as Form } from './Form.svelte';
 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';

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