@samuel-charpentier/sform 0.0.1 → 0.0.2

package/README.md

@@ -23,7 +23,7 @@ A type-safe form library for **Svelte 5** with **SvelteKit remote functions**.
 ## Installation
 
 ```bash
-npm install
+npm install @samuel-charpentier/sform
 ```
 
 Enable remote functions in `svelte.config.js`:
@@ -64,7 +64,7 @@ export const login = form(loginSchema, async ({ username, _password }) => {
 
 ```svelte
 <script lang="ts">
-	import { Sform, Sfield, Sbutton } from '$lib';
+	import { Sform, Sfield, Sbutton } from '@samuel-charpentier/sform';
 	import { login } from './auth.remote.ts';
 </script>
 
@@ -123,11 +123,16 @@ Smart field component with type-safe props based on input type.
 <Sfield name="email" type="email" label="Email" placeholder="you@example.com" />
 <Sfield name="search" type="search" label="Search" />
 <Sfield name="phone" type="tel" label="Phone" />
-<Sfield name="website" type="url" label="Website" />
+<Sfield name="website" type="url" label="Website" prefix="https://" />
 ```
 
 Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime-local`, `time`, `month`, `week`, `color`, `file`, `hidden`
 
+| Prop     | Type                | Default     | Description          |
+| -------- | ------------------- | ----------- | -------------------- |
+| `prefix` | `string \| Snippet` | `undefined` | Content before input |
+| `suffix` | `string \| Snippet` | `undefined` | Content after input  |
+
 #### Password Input
 
 ```svelte
@@ -143,13 +148,20 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 
 ```svelte
 <Sfield name="age" type="number" label="Age" min={0} max={150} step={1} />
+<Sfield name="price" type="number" label="Price" prefix="$" suffix="USD" align="end" />
+<Sfield name="quantity" type="number" label="Qty" showControls={false} maxDecimals={0} />
 ```
 
-| Prop   | Type               | Default     | Description    |
-| ------ | ------------------ | ----------- | -------------- |
-| `min`  | `number \| string` | `undefined` | Minimum value  |
-| `max`  | `number \| string` | `undefined` | Maximum value  |
-| `step` | `number \| string` | `undefined` | Step increment |
+| Prop           | Type                | Default     | Description                            |
+| -------------- | ------------------- | ----------- | -------------------------------------- |
+| `min`          | `number \| string`  | `undefined` | Minimum value                          |
+| `max`          | `number \| string`  | `undefined` | Maximum value                          |
+| `step`         | `number \| string`  | `undefined` | Step increment                         |
+| `prefix`       | `string \| Snippet` | `undefined` | Content before input (e.g., "$")       |
+| `suffix`       | `string \| Snippet` | `undefined` | Content after input (e.g., "USD")      |
+| `showControls` | `boolean`           | `true`      | Show spinner controls                  |
+| `align`        | `'start' \| 'end'`  | `'start'`   | Text alignment                         |
+| `maxDecimals`  | `number`            | `undefined` | Max decimal places (0 = integers only) |
 
 #### Textarea
 
@@ -257,12 +269,14 @@ Supported text types: `text`, `email`, `tel`, `url`, `search`, `date`, `datetime
 <Sfield name="ssn" type="masked" label="SSN" mask="###-##-####" />
 ```
 
-| Prop                  | Type      | Default  | Description                      |
-| --------------------- | --------- | -------- | -------------------------------- |
-| `mask`                | `string`  | required | Mask pattern                     |
-| `maskPlaceholder`     | `string`  | `'_'`    | Placeholder character            |
-| `showMaskPlaceholder` | `boolean` | `false`  | Show full mask with placeholders |
-| `storeRaw`            | `boolean` | `true`   | Store unmasked value             |
+| Prop                  | Type                | Default     | Description                      |
+| --------------------- | ------------------- | ----------- | -------------------------------- |
+| `mask`                | `string`            | required    | Mask pattern                     |
+| `maskPlaceholder`     | `string`            | `'_'`       | Placeholder character            |
+| `showMaskPlaceholder` | `boolean`           | `false`     | Show full mask with placeholders |
+| `unmaskValue`         | `boolean`           | `true`      | Store unmasked value             |
+| `prefix`              | `string \| Snippet` | `undefined` | Content before input             |
+| `suffix`              | `string \| Snippet` | `undefined` | Content after input              |
 
 **Mask Tokens:**
 
@@ -295,16 +309,17 @@ Stateful submit button that reacts to form state.
 </Sbutton>
 ```
 
-| Prop           | Type                              | Default     | Description           |
-| -------------- | --------------------------------- | ----------- | --------------------- |
-| `label`        | `string`                          | `'Submit'`  | Button text           |
-| `buttonType`   | `'submit' \| 'reset' \| 'button'` | `'submit'`  | Button type           |
-| `class`        | `string`                          | `undefined` | CSS class             |
-| `disabled`     | `boolean`                         | `false`     | Disable button        |
-| `defaultState` | `Snippet`                         | `undefined` | Default state snippet |
-| `pendingState` | `Snippet`                         | `undefined` | Pending state snippet |
-| `successState` | `Snippet`                         | `undefined` | Success state snippet |
-| `errorState`   | `Snippet`                         | `undefined` | Error state snippet   |
+| Prop           | Type                              | Default     | Description                       |
+| -------------- | --------------------------------- | ----------- | --------------------------------- |
+| `label`        | `string`                          | `'Submit'`  | Button text                       |
+| `buttonType`   | `'submit' \| 'reset' \| 'button'` | `'submit'`  | Button type                       |
+| `class`        | `string`                          | `undefined` | CSS class                         |
+| `disabled`     | `boolean`                         | `false`     | Disable button                    |
+| `onsubmit`     | `() => void \| Promise<void>`     | `undefined` | Callback before validation/submit |
+| `defaultState` | `Snippet`                         | `undefined` | Default state snippet             |
+| `pendingState` | `Snippet`                         | `undefined` | Pending state snippet             |
+| `successState` | `Snippet`                         | `undefined` | Success state snippet             |
+| `errorState`   | `Snippet`                         | `undefined` | Error state snippet               |
 
 ## Styling
 
@@ -395,11 +410,3 @@ npm run package
 ## License
 
 MIT
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```

package/dist/Sform/Sfield.svelte

@@ -38,6 +38,11 @@
 	// Derive name from the field - all field types include name in their .as() output
 	const name = $derived(field.as('text').name);
 
+	// Register this field with the context on mount
+	$effect(() => {
+		context.registerField(name);
+	});
+
 	const classes: SfieldClasses = $derived(
 		typeof props.class === 'string' ? { wrapper: props.class } : (props.class ?? {})
 	);

package/dist/Sform/Sform.svelte

@@ -53,7 +53,15 @@
 		form.validate({ includeUntouched: true });
 	};
 
-	const context = createSformContext(() => validateOn, getFieldNames, triggerValidation);
+	const context = createSformContext(
+		() => validateOn,
+		getFieldNames,
+		triggerValidation,
+		() => {
+			// Use setTimeout to ensure we're outside the current event loop
+			setTimeout(() => formElement?.requestSubmit(), 0);
+		}
+	);
 
 	// Apply preflight schema if provided
 	const formWithSchema = $derived(schema ? form.preflight(schema) : form);
@@ -88,9 +96,12 @@
 		context.markSubmitted();
 		context.markAllFieldsDirty();
 	}
+
+	let formElement: HTMLFormElement | undefined = $state();
 </script>
 
 <form
+	bind:this={formElement}
 	{...formProps as unknown as HTMLFormAttributes}
 	class={className}
 	novalidate

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

@@ -1,3 +1,3 @@
 import type { SformContext, ValidateOn } from './types.js';
-export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void): SformContext;
+export declare function createSformContext(getValidateOn: () => ValidateOn, getFieldNames: () => string[], triggerValidation: () => void, submitForm: () => void): SformContext;
 export declare function getSformContext(): SformContext;

package/dist/Sform/context.svelte.js

@@ -1,9 +1,10 @@
 import { getContext, setContext } from 'svelte';
 import { SvelteSet } from 'svelte/reactivity';
 const SFORM_CONTEXT_KEY = Symbol('sform-context');
-export function createSformContext(getValidateOn, getFieldNames, triggerValidation) {
+export function createSformContext(getValidateOn, getFieldNames, triggerValidation, submitForm) {
     const touched = new SvelteSet();
     const dirty = new SvelteSet();
+    const registeredFields = new SvelteSet();
     let submitted = $state(false);
     const context = {
         get validateOn() {
@@ -40,18 +41,22 @@ export function createSformContext(getValidateOn, getFieldNames, triggerValidati
             submitted = true;
         },
         markAllFieldsDirty: () => {
-            // Get all field names from the form and mark them as touched and dirty
-            const fieldNames = getFieldNames();
+            // Use registered fields from Sfield components
+            const fieldNames = [...registeredFields];
             for (const name of fieldNames) {
                 touched.add(name);
                 dirty.add(name);
             }
         },
+        registerField: (name) => {
+            registeredFields.add(name);
+        },
         resetFieldStates: () => {
             touched.clear();
             dirty.clear();
             submitted = false;
-        }
+        },
+        submitForm
     };
     setContext(SFORM_CONTEXT_KEY, context);
     return context;

package/dist/Sform/inputs/ButtonInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { ButtonFormState, RemoteFormIssue } from '../types.js';
+	import { getSformContext } from '../context.svelte.js';
 
 	interface FormLike {
 		pending?: number;
@@ -21,6 +22,8 @@
 		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 */
@@ -37,12 +40,16 @@
 		buttonType = 'submit',
 		class: className,
 		disabled = false,
+		onsubmit,
 		defaultState,
 		pendingState,
 		successState,
 		errorState
 	}: Props = $props();
 
+	// Get Sform context to trigger validation display
+	const sformContext = getSformContext();
+
 	const formState: ButtonFormState = $derived.by(() => {
 		const pending = (form.pending ?? 0) !== 0;
 		const hasResult = form.result !== undefined;
@@ -58,9 +65,23 @@
 	});
 
 	const isDisabled = $derived(disabled || formState.pending);
+
+	async function handleClick(event: MouseEvent) {
+		if (buttonType !== 'submit' || !onsubmit) return;
+
+		event.preventDefault();
+		await onsubmit();
+
+		// Mark form as submitted and all fields dirty so issues display when server responds
+		sformContext.markSubmitted();
+		sformContext.markAllFieldsDirty();
+
+		// Submit the form via context
+		sformContext.submitForm();
+	}
 </script>
 
-<button type={buttonType} class={className} disabled={isDisabled}>
+<button type={buttonType} class={className} disabled={isDisabled} onclick={handleClick}>
 	{#if formState.pending && pendingState}
 		{@render pendingState(formState)}
 	{:else if formState.success && successState}

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

@@ -18,6 +18,8 @@ interface Props {
     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 */

package/dist/Sform/types.d.ts

@@ -130,6 +130,10 @@ export interface SformContext {
     markAllFieldsDirty: () => void;
     /** Reset all field states (touched, dirty, submitted) */
     resetFieldStates: () => void;
+    /** Register a field name (called by Sfield on mount) */
+    registerField: (name: string) => void;
+    /** Programmatically submit the form */
+    submitForm: () => void;
 }
 /**
  * Enhance callback options - typed based on form Input type.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@samuel-charpentier/sform",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "A Svelte 5 form library for SvelteKit remote forms",
 	"keywords": [
 		"svelte",
@@ -56,6 +56,7 @@
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"@types/node": "^22",
 		"@vitest/browser-playwright": "^4.0.15",
+		"@vitest/coverage-v8": "4.0.16",
 		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.13.1",