@samuel-charpentier/sform 0.0.2 → 0.0.4

package/dist/Sform/Sfield.svelte

@@ -18,6 +18,7 @@
 	import ToggleOptionsInput from './inputs/ToggleOptionsInput.svelte';
 	import MaskedInput from './inputs/MaskedInput.svelte';
 	import PasswordInput from './inputs/PasswordInput.svelte';
+	import HiddenInput from './inputs/HiddenInput.svelte';
 
 	/**
 	 * Sfield - Type-safe form field component.
@@ -41,6 +42,10 @@
 	// Register this field with the context on mount
 	$effect(() => {
 		context.registerField(name);
+		// Register for issue display tracking (all types except hidden display their issues)
+		if (props.type !== 'hidden') {
+			context.registerFieldWithIssueDisplay(name);
+		}
 	});
 
 	const classes: SfieldClasses = $derived(
@@ -112,7 +117,6 @@
 			'month',
 			'week',
 			'color',
-			'hidden',
 			'file'
 		].includes(props.type)
 	);
@@ -147,6 +151,8 @@
 		<ToggleOptionsInput {...passthroughProps()} {...internalProps} />
 	{:else if props.type === 'masked'}
 		<MaskedInput {...passthroughProps()} {...internalProps} />
+	{:else if props.type === 'hidden'}
+		<HiddenInput {...passthroughProps()} {...internalProps} />
 	{/if}
 
 	{#if props.hint}

package/dist/Sform/Sform.svelte

@@ -60,7 +60,8 @@
 		() => {
 			// Use setTimeout to ensure we're outside the current event loop
 			setTimeout(() => formElement?.requestSubmit(), 0);
-		}
+		},
+		() => form
 	);
 
 	// Apply preflight schema if provided

package/dist/Sform/context.svelte.d.ts

@@ -1,3 +1,12 @@
-import type { SformContext, ValidateOn } from './types.js';
-export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void, submitForm: () => void): SformContext;
+import type { RemoteFormIssue, SformContext, ValidateOn } from './types.js';
+interface FormLike {
+    pending?: number;
+    result?: unknown;
+    fields: {
+        allIssues?: () => RemoteFormIssue[] | undefined;
+        [key: string]: unknown;
+    };
+}
+export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void, submitForm: () => void, getForm: () => FormLike): SformContext;
 export declare function getSformContext(): SformContext;
+export {};

package/dist/Sform/context.svelte.js

@@ -1,10 +1,11 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 const SFORM_CONTEXT_KEY = Symbol('sform-context');
-export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm) {
+export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm, getForm) {
     const touched = new SvelteSet();
     const dirty = new SvelteSet();
     const registeredFields = new SvelteSet();
+    const fieldsWithIssueDisplay = new SvelteSet();
     let submitted = $state(false);
     const context = {
         get validateOn() {
@@ -51,12 +52,71 @@ export function createSformContext(getValidateOn, getFieldNames, triggerValidati
         registerField: (name) => {
             registeredFields.add(name);
         },
+        registerFieldWithIssueDisplay: (name) => {
+            fieldsWithIssueDisplay.add(name);
+        },
         resetFieldStates: () => {
             touched.clear();
             dirty.clear();
             submitted = false;
         },
-        submitForm
+        submitForm,
+        getFormState: () => {
+            const form = getForm();
+            const pending = (form.pending ?? 0) !== 0;
+            const hasResult = form.result !== undefined;
+            const issues = form.fields.allIssues?.() ?? [];
+            const hasIssues = issues.length > 0;
+            if (pending) {
+                return {
+                    state: 'pending',
+                    pending: true,
+                    success: false,
+                    hasIssues: false,
+                    result: undefined
+                };
+            }
+            if (hasResult) {
+                // If there's a result, it's success (issues come via invalid() which throws, no result)
+                return {
+                    state: 'success',
+                    pending: false,
+                    success: true,
+                    hasIssues: false,
+                    result: form.result
+                };
+            }
+            if (hasIssues) {
+                return {
+                    state: 'hasIssues',
+                    pending: false,
+                    success: false,
+                    hasIssues: true,
+                    result: undefined
+                };
+            }
+            return {
+                state: 'default',
+                pending: false,
+                success: false,
+                hasIssues: false,
+                result: undefined
+            };
+        },
+        getUnhandledIssues: () => {
+            const form = getForm();
+            const allIssues = form.fields.allIssues?.() ?? [];
+            // Filter out issues that are linked to fields with issue display
+            return allIssues.filter((issue) => {
+                // If issue has no path, it's a form-level issue (from invalid("message"))
+                if (!issue.path || issue.path.length === 0) {
+                    return true;
+                }
+                // Check if the first path segment is a field that displays issues
+                const fieldName = String(issue.path[0]);
+                return !fieldsWithIssueDisplay.has(fieldName);
+            });
+        }
     };
     setContext(SFORM_CONTEXT_KEY, context);
     return context;

package/dist/Sform/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Sform } from './Sform.svelte';
 export { default as Sfield } from './Sfield.svelte';
 export { default as Sbutton } from './inputs/ButtonInput.svelte';
+export { default as SIssues } from './SIssues.svelte';
+export { default as SResult } from './SResult.svelte';
 export { applyMask, unmask, MASK_PATTERNS, DEFAULT_TOKENS, type MaskOptions, type MaskResult, type MaskToken, type MaskPattern } from './utils/mask.js';
-export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonFormState, ButtonInputProps, InputAffixProps, RangeInputProps, ToggleInputProps, ToggleOption, ToggleOptionsInputProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldToggleOptionsProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './types.js';
+export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonFormState, ButtonInputProps, SIssuesProps, InputAffixProps, RangeInputProps, ToggleInputProps, ToggleOption, ToggleOptionsInputProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldToggleOptionsProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './types.js';

package/dist/Sform/index.js

@@ -3,5 +3,7 @@ export { default as Sform } from './Sform.svelte';
 export { default as Sfield } from './Sfield.svelte';
 // Standalone components (not routed through Sfield)
 export { default as Sbutton } from './inputs/ButtonInput.svelte';
+export { default as SIssues } from './SIssues.svelte';
+export { default as SResult } from './SResult.svelte';
 // Utilities
 export { applyMask, unmask, MASK_PATTERNS, DEFAULT_TOKENS } from './utils/mask.js';

package/dist/Sform/inputs/ButtonInput.svelte

@@ -1,20 +1,25 @@
-<script lang="ts">
+<script lang="ts" generics="T = unknown">
 	import type { Snippet } from 'svelte';
-	import type { ButtonFormState, RemoteFormIssue } from '../types.js';
+	import type { ButtonState, RemoteFormIssue } from '../types.js';
 	import { getSformContext } from '../context.svelte.js';
 
-	interface FormLike {
+	/**
+	 * Minimal form shape needed for type inference.
+	 * This allows the component to infer T from the form's result type.
+	 */
+	interface FormLike<Output> {
+		result?: Output;
 		pending?: number;
-		result?: unknown;
 		fields: {
 			allIssues?: () => RemoteFormIssue[] | undefined;
+			[key: string]: unknown;
 		};
 	}
 
 	interface Props {
-		/** The remote form - required for button state */
-		form: FormLike;
-		/** Button text (used if no snippets provided) */
+		/** The remote form - used to infer the result type T */
+		form: FormLike<T>;
+		/** Button text (used if no children snippet provided) */
 		label?: string;
 		/** Button type */
 		buttonType?: 'submit' | 'reset' | 'button';
@@ -22,55 +27,37 @@
 		class?: string;
 		/** Whether button is disabled */
 		disabled?: boolean;
+		/** Children snippet receives ButtonState<T> for custom rendering with typed result */
+		children?: Snippet<[ButtonState<T>]>;
 		/** Callback that runs before validation/submission (can be async) */
 		onsubmit?: () => void | Promise<void>;
-		/** Snippet for default state */
-		defaultState?: Snippet<[ButtonFormState]>;
-		/** Snippet for pending state */
-		pendingState?: Snippet<[ButtonFormState]>;
-		/** Snippet for success state */
-		successState?: Snippet<[ButtonFormState]>;
-		/** Snippet for error/issues state */
-		errorState?: Snippet<[ButtonFormState]>;
 	}
 
 	let {
-		form,
 		label = 'Submit',
 		buttonType = 'submit',
 		class: className,
 		disabled = false,
-		onsubmit,
-		defaultState,
-		pendingState,
-		successState,
-		errorState
+		children,
+		onsubmit
 	}: Props = $props();
 
-	// Get Sform context to trigger validation display
+	// Get Sform context for form state and actions
 	const sformContext = getSformContext();
 
-	const formState: ButtonFormState = $derived.by(() => {
-		const pending = (form.pending ?? 0) !== 0;
-		const hasResult = form.result !== undefined;
-		const issues = form.fields.allIssues?.() ?? [];
-		const hasIssues = issues.length > 0;
-
-		return {
-			pending,
-			success: hasResult && !hasIssues && !pending,
-			hasIssues,
-			result: form.result
-		};
-	});
+	// Get form state from context with the generic type
+	const formState = $derived.by(sformContext.getFormState<T>);
 
 	const isDisabled = $derived(disabled || formState.pending);
 
 	async function handleClick(event: MouseEvent) {
-		if (buttonType !== 'submit' || !onsubmit) return;
+		if (buttonType !== 'submit') return;
 
 		event.preventDefault();
-		await onsubmit();
+
+		if (onsubmit) {
+			await onsubmit();
+		}
 
 		// Mark form as submitted and all fields dirty so issues display when server responds
 		sformContext.markSubmitted();
@@ -82,14 +69,8 @@
 </script>
 
 <button type={buttonType} class={className} disabled={isDisabled} onclick={handleClick}>
-	{#if formState.pending && pendingState}
-		{@render pendingState(formState)}
-	{:else if formState.success && successState}
-		{@render successState(formState)}
-	{:else if formState.hasIssues && errorState}
-		{@render errorState(formState)}
-	{:else if defaultState}
-		{@render defaultState(formState)}
+	{#if children}
+		{@render children(formState)}
 	{:else}
 		{label}
 	{/if}

package/dist/Sform/inputs/ButtonInput.svelte.d.ts

@@ -1,34 +1,48 @@
 import type { Snippet } from 'svelte';
-import type { ButtonFormState, RemoteFormIssue } from '../types.js';
-interface FormLike {
-    pending?: number;
-    result?: unknown;
-    fields: {
-        allIssues?: () => RemoteFormIssue[] | undefined;
+import type { ButtonState, RemoteFormIssue } from '../types.js';
+declare function $$render<T = unknown>(): {
+    props: {
+        /** The remote form - used to infer the result type T */
+        form: {
+            result?: T | undefined;
+            pending?: number;
+            fields: {
+                allIssues?: () => RemoteFormIssue[] | undefined;
+                [key: string]: unknown;
+            };
+        };
+        /** Button text (used if no children snippet provided) */
+        label?: string;
+        /** Button type */
+        buttonType?: "submit" | "reset" | "button";
+        /** Button class */
+        class?: string;
+        /** Whether button is disabled */
+        disabled?: boolean;
+        /** Children snippet receives ButtonState<T> for custom rendering with typed result */
+        children?: Snippet<[ButtonState<T>]>;
+        /** Callback that runs before validation/submission (can be async) */
+        onsubmit?: () => void | Promise<void>;
     };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
 }
-interface Props {
-    /** The remote form - required for button state */
-    form: FormLike;
-    /** Button text (used if no snippets provided) */
-    label?: string;
-    /** Button type */
-    buttonType?: 'submit' | 'reset' | 'button';
-    /** Button class */
-    class?: string;
-    /** Whether button is disabled */
-    disabled?: boolean;
-    /** Callback that runs before validation/submission (can be async) */
-    onsubmit?: () => void | Promise<void>;
-    /** Snippet for default state */
-    defaultState?: Snippet<[ButtonFormState]>;
-    /** Snippet for pending state */
-    pendingState?: Snippet<[ButtonFormState]>;
-    /** Snippet for success state */
-    successState?: Snippet<[ButtonFormState]>;
-    /** Snippet for error/issues state */
-    errorState?: Snippet<[ButtonFormState]>;
+interface $$IsomorphicComponent {
+    new <T = unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const ButtonInput: import("svelte").Component<Props, {}, "">;
-type ButtonInput = ReturnType<typeof ButtonInput>;
+declare const ButtonInput: $$IsomorphicComponent;
+type ButtonInput<T = unknown> = InstanceType<typeof ButtonInput<T>>;
 export default ButtonInput;

package/dist/Sform/inputs/CheckboxGroupInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { CheckboxGroupInputProps, SelectOption } from '../types.js';
+	import Fieldset from '../utils/Fieldset.svelte';
 
 	let {
 		field,
@@ -29,10 +30,7 @@
 	}
 </script>
 
-<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
-	{#if label}
-		<legend class={labelClass}>{label}</legend>
-	{/if}
+<Fieldset {label} {labelClass} {className} {disabled}>
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
@@ -48,20 +46,9 @@
 			<span class="sform-checkbox-label">{option.label}</span>
 		</label>
 	{/each}
-</fieldset>
+</Fieldset>
 
 <style>
-	.sform-checkbox-group {
-		border: none;
-		padding: 0;
-		margin: 0;
-	}
-
-	.sform-checkbox-group legend {
-		padding: 0;
-		margin-bottom: 0.5rem;
-	}
-
 	.sform-checkbox-option {
 		display: flex;
 		align-items: center;

package/dist/Sform/inputs/HiddenInput.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HiddenInputProps } from '../types.js';
+
+	let { field, name, value }: HiddenInputProps = $props();
+
+	// Hidden fields require the value to be passed to field.as('hidden', value)
+	const fieldAttrs = $derived(field.as('hidden', value ?? ''));
+</script>
+
+<input {...fieldAttrs} type="hidden" id={name} />

package/dist/Sform/inputs/HiddenInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HiddenInputProps } from '../types.js';
+declare const HiddenInput: import("svelte").Component<HiddenInputProps, {}, "">;
+type HiddenInput = ReturnType<typeof HiddenInput>;
+export default HiddenInput;

package/dist/Sform/inputs/RadioInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { RadioInputProps, SelectOption } from '../types.js';
+	import Fieldset from '../utils/Fieldset.svelte';
 
 	let {
 		field,
@@ -29,10 +30,7 @@
 	}
 </script>
 
-<fieldset class="sform-radio-group {className ?? ''}" {disabled}>
-	{#if label}
-		<legend class={labelClass}>{label}</legend>
-	{/if}
+<Fieldset {label} {labelClass} {className} {disabled}>
 	{#each normalizedOptions as option}
 		{@const fieldAttrs = getFieldAttrs(option.value)}
 		{@const uniqueId = `${name}-${option.value}`}
@@ -48,7 +46,7 @@
 			<span class="sform-radio-label">{option.label}</span>
 		</label>
 	{/each}
-</fieldset>
+</Fieldset>
 
 <style>
 	.sform-radio-group {

package/dist/Sform/inputs/TextInput.svelte

@@ -28,34 +28,30 @@
 	let inputElement: HTMLInputElement | undefined = $state();
 </script>
 
-{#if type !== 'hidden'}
-	{#if label}
-		<label class={labelClass} for={name}>{label}</label>
-	{/if}
-	<div class="sform-input-wrapper {wrapperClass ?? ''}">
-		{#if prefix}
-			<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">
-				{#if typeof prefix === 'function'}{@render prefix()}{:else}{prefix}{/if}
-			</div>
-		{/if}
-		<input
-			bind:this={inputElement}
-			{...fieldAttrs}
-			id={name}
-			class={className}
-			{placeholder}
-			{disabled}
-			{readonly}
-			{autocomplete}
-			{onblur}
-			{oninput}
-		/>
-		{#if suffix}
-			<div class="sform-suffix" onclick={() => inputElement?.focus()} role="presentation">
-				{#if typeof suffix === 'function'}{@render suffix()}{:else}{suffix}{/if}
-			</div>
-		{/if}
-	</div>
-{:else}
-	<input {...fieldAttrs} type="hidden" id={name} />
+{#if label}
+	<label class={labelClass} for={name}>{label}</label>
 {/if}
+<div class="sform-input-wrapper {wrapperClass ?? ''}">
+	{#if prefix}
+		<div class="sform-prefix" onclick={() => inputElement?.focus()} role="presentation">
+			{#if typeof prefix === 'function'}{@render prefix()}{:else}{prefix}{/if}
+		</div>
+	{/if}
+	<input
+		bind:this={inputElement}
+		{...fieldAttrs}
+		id={name}
+		class={className}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{autocomplete}
+		{onblur}
+		{oninput}
+	/>
+	{#if suffix}
+		<div class="sform-suffix" onclick={() => inputElement?.focus()} role="presentation">
+			{#if typeof suffix === 'function'}{@render suffix()}{:else}{suffix}{/if}
+		</div>
+	{/if}
+</div>

package/dist/Sform/sform.css

@@ -600,6 +600,7 @@ select.sform-input {
 .sform-result-success {
 	color: #065f46;
 	background: var(--sform-success-bg);
+	margin-block-start: 1rem;
 }
 
 .sform-result-error {
@@ -612,6 +613,19 @@ select.sform-input {
 	background: var(--sform-warning-bg);
 }
 
+/* ===========================================
+   Issues List
+   =========================================== */
+
+.sform-issues-message {
+	font-weight: bold;
+	margin-bottom: 0.25rem;
+}
+.sform-issues-list {
+	margin: 0;
+	padding-inline-start: 1.25rem;
+}
+
 /* ===========================================
    Utilities
    =========================================== */