@samuel-charpentier/sform 0.0.12 → 1.1.0

package/dist/Sform/types.d.ts

@@ -18,6 +18,39 @@ export type { RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFor
  * - 'submit': Validate and show all issues only after submit
  */
 export type ValidateOn = 'blur' | 'change' | 'submit';
+/**
+ * Lifecycle event names emitted by Sform.
+ */
+export type SformLifecycleEvent = 'beforeSubmit' | 'afterSubmitTriggered' | 'afterSubmitResponse' | 'beforeValidate' | 'afterValidateCalled' | 'afterValidateSettled';
+/**
+ * Function signature for lifecycle hooks.
+ */
+export type SformLifecycleHook = () => void | Promise<void>;
+/**
+ * Lifecycle hooks that can be registered by Sform and Sfield components.
+ */
+export interface SformLifecycleHooks {
+    /** Runs before submit is triggered by Sbutton. */
+    beforeSubmit?: SformLifecycleHook;
+    /** Runs right after submit is triggered by Sbutton. */
+    afterSubmitTriggered?: SformLifecycleHook;
+    /** Runs after the submit cycle receives a response (pending -> idle). */
+    afterSubmitResponse?: SformLifecycleHook;
+    /** Runs immediately before form.validate() is called. */
+    beforeValidate?: SformLifecycleHook;
+    /** Runs immediately after form.validate() is called. */
+    afterValidateCalled?: SformLifecycleHook;
+    /** Runs when form.validate() settles (resolves or rejects). */
+    afterValidateSettled?: SformLifecycleHook;
+}
+/**
+ * Where a field's issues should be displayed.
+ * - auto: visible fields display their own issues; hidden fields leave issues to SIssues
+ * - field: this field displays its own issues
+ * - form: this field leaves issues to SIssues
+ * - none: this field marks issues as handled without rendering them
+ */
+export type IssueDisplay = 'auto' | 'field' | 'form' | 'none';
 /**
  * Field state tracking
  */
@@ -72,7 +105,6 @@ export interface SfieldTypeMap {
     toggle: boolean;
     select: string;
     radio: string;
-    'toggle-options': string;
     'checkbox-group': string[];
     file: File;
 }
@@ -86,7 +118,7 @@ export type AllowedSfieldType<T> = {
 /**
  * Supported input types for Sfield
  */
-export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'textarea' | 'select' | 'checkbox' | 'checkbox-group' | 'radio' | 'file' | 'hidden' | 'range' | 'toggle' | 'toggle-options' | 'masked';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'textarea' | 'select' | 'checkbox' | 'checkbox-group' | 'radio' | 'file' | 'hidden' | 'range' | 'toggle' | 'masked';
 /** Text-like input types */
 export type TextInputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'date' | 'datetime-local' | 'time' | 'month' | 'week' | 'color' | 'file';
 /** Numeric input types */
@@ -96,7 +128,7 @@ export type NumericInputType = 'number';
  */
 export interface SelectOption {
     value: string;
-    label: string;
+    label: string | Snippet<[SelectOption]>;
     disabled?: boolean;
 }
 /**
@@ -158,9 +190,11 @@ export interface SformContext {
     /** Form-level validateOn mode */
     validateOn: ValidateOn;
     /** Trigger validation (called on blur/input based on mode) */
-    triggerValidation: () => void;
+    triggerValidation: () => void | Promise<void>;
     /** Whether form has been submitted */
     submitted: boolean;
+    /** Whether the whole form is disabled */
+    disabled: boolean;
     /** Mark form as submitted */
     markSubmitted: () => void;
     /** Mark all fields as touched and dirty to show all issues */
@@ -173,6 +207,10 @@ export interface SformContext {
     registerFieldWithIssueDisplay: (name: string) => void;
     /** Programmatically submit the form */
     submitForm: () => void;
+    /** Register lifecycle hooks. Returns an unregister callback. */
+    registerLifecycleHooks: (hooks: SformLifecycleHooks) => () => void;
+    /** Run all hooks for a lifecycle event. */
+    runLifecycleHooks: (event: SformLifecycleEvent) => Promise<void>;
     /** Get the current form state (for buttons and state-aware components) */
     getFormState: <T = unknown>() => ButtonState<T>;
     /** Get issues that are not displayed by any Sfield component */
@@ -211,6 +249,14 @@ export interface SformProps<Input extends RemoteFormInput = RemoteFormInput, Out
     validateOn?: ValidateOn;
     /** Form element class */
     class?: string;
+    /** If true, only run preflight validation (no submission) */
+    preflightOnly?: boolean;
+    /** If true, reset touched/dirty/submitted state after successful submit response */
+    resetOnSuccess?: boolean;
+    /** Lifecycle hooks for submit/validate phases */
+    lifecycle?: SformLifecycleHooks;
+    /** If true, disables the entire form: no validation, no submission, all fields disabled */
+    disabled?: boolean;
     /** Children content */
     children: Snippet;
 }
@@ -221,7 +267,7 @@ export interface BaseSfieldProps {
     /** Field name - corresponds to form.fields[name] */
     name: string;
     /** Field label */
-    label?: string;
+    label?: string | Snippet;
     /** Placeholder text */
     placeholder?: string;
     /** Field-level validateOn override */
@@ -319,24 +365,14 @@ export interface RangeSfieldProps extends BaseSfieldProps {
 export interface ToggleSfieldProps extends BaseSfieldProps {
     type: 'toggle';
     /** Label when toggle is on */
-    onLabel?: string;
+    onLabel?: string | Snippet;
     /** Label when toggle is off */
-    offLabel?: string;
+    offLabel?: string | Snippet;
     /** Value when checked */
     checkedValue?: string;
     /** Value when unchecked */
     uncheckedValue?: string;
 }
-/**
- * Props for toggle-options input (button group)
- */
-export interface ToggleOptionsSfieldProps extends BaseSfieldProps {
-    type: 'toggle-options';
-    /** Options for toggle buttons */
-    options: ToggleOption[] | string[];
-    /** Allow multiple selections */
-    multiple?: boolean;
-}
 /**
  * Props for masked input
  */
@@ -354,7 +390,7 @@ export interface MaskedSfieldProps extends BaseSfieldProps {
 /**
  * Discriminated union of all Sfield prop types
  */
-export type SfieldProps = TextSfieldProps | PasswordSfieldProps | NumberSfieldProps | TextareaSfieldProps | SelectSfieldProps | CheckboxSfieldProps | CheckboxGroupSfieldProps | RadioSfieldProps | RangeSfieldProps | ToggleSfieldProps | ToggleOptionsSfieldProps | MaskedSfieldProps;
+export type SfieldProps = TextSfieldProps | PasswordSfieldProps | NumberSfieldProps | TextareaSfieldProps | SelectSfieldProps | CheckboxSfieldProps | CheckboxGroupSfieldProps | RadioSfieldProps | RangeSfieldProps | ToggleSfieldProps | MaskedSfieldProps;
 /**
  * Props that Sfield manages internally and should NOT be passed from parent.
  * These are set by Sfield itself based on context and internal state.
@@ -372,10 +408,14 @@ interface SfieldExtraProps<T extends RemoteFormFieldValue> {
     field: RemoteFormField<T>;
     /** Field-level validateOn override */
     validateOn?: ValidateOn;
+    /** Where this field's issues should be displayed */
+    issueDisplay?: IssueDisplay;
     /** CSS classes for sub-elements (wrapper, label, input, messages) */
     class?: SfieldClasses | string;
     /** Hint text displayed below the input, above validation messages */
     hint?: string | Snippet;
+    /** Lifecycle hooks registered while this field is mounted */
+    lifecycle?: SformLifecycleHooks;
 }
 /**
  * Helper type: Create Sfield props from component props
@@ -404,14 +444,12 @@ export type SfieldRadioProps = SfieldPropsFrom<RadioInputProps, string, 'radio'>
 export type SfieldRangeProps = SfieldPropsFrom<RangeInputProps, number, 'range'>;
 /** Props for toggle input */
 export type SfieldToggleProps = SfieldPropsFrom<ToggleInputProps, boolean, 'toggle'>;
-/** Props for toggle-options input */
-export type SfieldToggleOptionsProps = SfieldPropsFrom<ToggleOptionsInputProps, string, 'toggle-options'>;
 /** Props for masked input */
 export type SfieldMaskedProps = SfieldPropsFrom<MaskedInputProps, string, 'masked'>;
 /** Props for hidden input */
 export type SfieldHiddenProps = SfieldPropsFrom<HiddenInputProps, string, 'hidden'>;
 /** All possible Sfield props as a discriminated union */
-type AllSfieldProps = SfieldTextProps | SfieldPasswordProps | SfieldNumberProps | SfieldTextareaProps | SfieldSelectProps | SfieldCheckboxProps | SfieldCheckboxGroupProps | SfieldRadioProps | SfieldRangeProps | SfieldToggleProps | SfieldToggleOptionsProps | SfieldMaskedProps | SfieldHiddenProps;
+type AllSfieldProps = SfieldTextProps | SfieldPasswordProps | SfieldNumberProps | SfieldTextareaProps | SfieldSelectProps | SfieldCheckboxProps | SfieldCheckboxGroupProps | SfieldRadioProps | SfieldRangeProps | SfieldToggleProps | SfieldMaskedProps | SfieldHiddenProps;
 /**
  * Extract props that match a specific field value type.
  * This ensures type="number" is only valid for number fields, etc.
@@ -453,7 +491,7 @@ export interface BaseInputComponentProps {
     /** Field name */
     name: string;
     /** Field label */
-    label?: string;
+    label?: string | Snippet;
     /** Placeholder text */
     placeholder?: string;
     /** Input class */
@@ -575,6 +613,8 @@ export interface HiddenInputProps {
     name: string;
     /** The value for the hidden field - required for hidden inputs */
     value?: string;
+    /** Whether the hidden input is disabled */
+    disabled?: boolean;
 }
 /**
  * @deprecated Use ButtonState instead
@@ -608,8 +648,8 @@ export interface ButtonFormLike<T = unknown> {
 export interface ButtonInputProps<T = unknown> {
     /** The remote form - used to infer the result type T */
     form: ButtonFormLike<T>;
-    /** Button text (used if no children snippet provided) */
-    label?: string;
+    /** Button text (used if no children snippet provided). Can also be a snippet receiving ButtonState<T>. */
+    label?: string | Snippet<[ButtonState<T>]>;
     /** Button type */
     buttonType?: 'submit' | 'reset' | 'button';
     /** Button class */
@@ -658,31 +698,14 @@ export interface PasswordInputProps extends BaseInputComponentProps {
  */
 export interface ToggleInputProps extends BaseInputComponentProps {
     /** Label when toggle is on */
-    onLabel?: string;
+    onLabel?: string | Snippet;
     /** Label when toggle is off */
-    offLabel?: string;
+    offLabel?: string | Snippet;
     /** Value when checked */
     checkedValue?: string;
     /** Value when unchecked */
     uncheckedValue?: string;
 }
-/**
- * Toggle option for ToggleOptions component
- */
-export interface ToggleOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-/**
- * Props for toggle options (button group) component
- */
-export interface ToggleOptionsInputProps extends BaseInputComponentProps {
-    /** Options to display as toggle buttons */
-    options: ToggleOption[] | string[];
-    /** Allow multiple selections */
-    multiple?: boolean;
-}
 /**
  * Props for masked input component
  */
@@ -704,9 +727,10 @@ export interface MaskedInputProps extends BaseInputComponentProps, InputAffixPro
  * Props for Fieldset utils component
  */
 export type FieldsetProps = {
-    label?: string;
+    label?: string | Snippet;
     labelClass?: string;
     className?: string;
     disabled?: boolean;
     children: Snippet;
+    type: 'radio' | 'checkbox';
 };

package/dist/Sform/utils/Fieldset.svelte

@@ -2,10 +2,10 @@
 	import type { Snippet } from 'svelte';
 	import type { FieldsetProps } from '../types';
 
-	let { label, labelClass, className, disabled, children }: FieldsetProps = $props();
+	let { label, labelClass, className, disabled, children, type }: FieldsetProps = $props();
 </script>
 
-<fieldset class="sform-checkbox-group {className ?? ''}" {disabled}>
+<fieldset class="{`sform-${type}-group`} {className ?? ''}" {disabled}>
 	{#if label}
 		<legend class={labelClass}>{label}</legend>
 	{/if}
@@ -13,7 +13,12 @@
 </fieldset>
 
 <style>
-	.sform-checkbox-group legend {
+	:is(.sform-checkbox-group, .sform-radio-group) {
+		border: none;
+		padding: 0;
+		margin: 0;
+	}
+	:is(.sform-checkbox-group, .sform-radio-group) legend {
 		padding: 0.25rem 0.5rem;
 		margin: 0;
 		border: var(--sform-border-width) solid var(--sform-border);

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { Sform, Sfield, Sbutton, SIssues, SResult } from './Sform/index.js';
-export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonInputProps, InputAffixProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldToggleOptionsProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './Sform/index.js';
+export type { ValidateOn, FieldState, SfieldClasses, InputType, SelectOption, SformContext, SformProps, ButtonState, ButtonInputProps, InputAffixProps, SfieldTypeMap, AllowedSfieldType, TypedSfieldProps, SfieldBaseProps, TypedBaseSfieldProps, SfieldTextProps, SfieldPasswordProps, SfieldNumberProps, SfieldTextareaProps, SfieldSelectProps, SfieldCheckboxProps, SfieldCheckboxGroupProps, SfieldRadioProps, SfieldRangeProps, SfieldToggleProps, SfieldMaskedProps, RemoteForm, RemoteFormField, RemoteFormFields, RemoteFormFieldValue, RemoteFormInput, RemoteFormIssue } from './Sform/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.12",
+	"version": "1.1.0",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",

package/dist/Sform/inputs/ToggleOptionsInput.svelte

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import type { ToggleOptionsInputProps, ToggleOption } from '../types.js';
-
-	let {
-		field,
-		name,
-		label,
-		class: className,
-		labelClass,
-		disabled,
-		options,
-		multiple = false,
-		showIssues,
-		onblur,
-		oninput
-	}: ToggleOptionsInputProps = $props();
-
-	// Normalize options to ToggleOption format
-	const normalizedOptions: ToggleOption[] = $derived(
-		options.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
-	);
-
-	// Helper to get field attrs with controlled aria-invalid
-	function getFieldAttrs(optionValue: string) {
-		const inputType = multiple ? 'checkbox' : 'radio';
-		const attrs = field.as(inputType, optionValue);
-		return {
-			...attrs,
-			'aria-invalid': showIssues ? attrs['aria-invalid'] : undefined
-		};
-	}
-</script>
-
-{#if label}
-	<span id="{name}-label" class={labelClass}>{label}</span>
-{/if}
-<div
-	class="sform-toggle-options {className ?? ''}"
-	role={multiple ? 'group' : 'radiogroup'}
-	aria-labelledby={label ? `${name}-label` : undefined}
-	aria-label={!label ? name : undefined}
->
-	{#each normalizedOptions as option (option.value)}
-		{@const optionDisabled = disabled || option.disabled}
-		{@const fieldAttrs = getFieldAttrs(option.value)}
-		{@const inputId = `${name}-${option.value}`}
-		<label class="sform-toggle-option" class:disabled={optionDisabled} for={inputId}>
-			<input
-				{...fieldAttrs}
-				type={multiple ? 'checkbox' : 'radio'}
-				id={inputId}
-				disabled={optionDisabled}
-				{onblur}
-				{oninput}
-			/>
-			<span>{option.label}</span>
-		</label>
-	{/each}
-</div>
-
-<style>
-	.sform-toggle-options {
-		display: inline-flex;
-		border-radius: 0.375rem;
-		overflow: hidden;
-		border: 1px solid #ccc;
-	}
-
-	.sform-toggle-option {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0.5rem 1rem;
-		background: white;
-		cursor: pointer;
-		transition:
-			background-color 0.15s,
-			color 0.15s;
-	}
-
-	.sform-toggle-option:not(:last-child) {
-		border-right: 1px solid #ccc;
-	}
-
-	.sform-toggle-option:hover:not(.disabled) {
-		background-color: #f5f5f5;
-	}
-
-	/* Hide the actual input but keep it functional */
-	.sform-toggle-option input {
-		position: absolute;
-		opacity: 0;
-		width: 0;
-		height: 0;
-	}
-
-	/* Style when checked */
-	.sform-toggle-option:has(input:checked) {
-		background-color: #2196f3;
-		color: white;
-	}
-
-	.sform-toggle-option:has(input:checked):hover {
-		background-color: #1976d2;
-	}
-
-	.sform-toggle-option.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	/* Focus styles */
-	.sform-toggle-option:has(input:focus-visible) {
-		outline: 2px solid #2196f3;
-		outline-offset: -2px;
-		z-index: 1;
-	}
-</style>

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

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