### Svelte Forms SubArray Component Example

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Demonstrates the usage of the SubArray component in Svelte Forms for arrays with a predetermined length, showing how to define fields for each element and the resulting TypeScript interface.

```svelte
<Form name="profile">
  <Field path="fullname"> ... </Field>
  <SubArray path="aliases">
    Provide two aliases.
    <Field path="0"><label>First Alias</label> ... </Field>
    <Field path="1"><label>Second Alias</label> ... </Field>
  </SubArray>
</Form>
```

```typescript
interface Profile {
  fullname: string
  aliases: [string, string]
}
```

--------------------------------

### Conditional Field Example

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Demonstrates using the `conditional` prop on a `Field` component to hide the field and remove its data when a condition is met. This is an alternative to Svelte's `{#if}` blocks for form elements.

```javascript
// Example usage within a Svelte component:
// <Field path="altText" conditional={!hasImage} />
// When !hasImage is true, altText field is removed from DOM and its data is undefined.
```

--------------------------------

### Run Development Demo

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Command to run the development server and open the demo in a browser. This is useful for testing and development.

```bash
npm run dev -- --open
```

--------------------------------

### Form Component Usage

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

The Form component is the entry point for creating a new form. It requires validation and submission functions and is designed to work with GraphQL mutations but is flexible enough for other APIs. TypeScript types are provided for correct data formatting.

```svelte
<script>
  import Form from './Form.svelte';
  import type { SubmitResponse } from './types';

  async function validate() {
    // Validation logic here
    return true;
  }

  async function submit(data: any): Promise<SubmitResponse> {
    // Submission logic here
    return { data };
  }
</script>

<Form {validate} {submit}>
  <!-- Form fields go here -->
</Form>
```

--------------------------------

### Svelte Forms Above and Below Slot Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Explains the properties provided for the 'above' and 'below' slots in Svelte Forms, allowing custom content to be placed before and after the array elements. These props offer context about the array's path and data.

```svelte
* `path` - The full absolute path to the array in the payload.
* `value` - The full array data from the payload.
* `minned` - Same as for the default slot.
* `maxed` - Same as for the default slot.
* `minLength` - Same as for the default slot.
* `maxLength` - Same as for the default slot.
* `currentLength` - Same as for the default slot.
```

--------------------------------

### Field Component

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Introduces the 'Field' component, which serves as the fundamental building block for managing the state of individual input fields within a form.

```svelte
// This is the basic building block that represents the state of a single input field.
// It provides all the slot props you need to build an <input> inside it.
```

--------------------------------

### Svelte Forms Serialize/Deserialize Functions

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Provides utility functions for serializing and deserializing data for various input types in Svelte Forms. These functions help manage data types and handle empty values, ensuring consistent payload handling.

```javascript
// Date serialization/deserialization
serialize: dateSerialize,
deserialize: dateDeserialize,

// Datetime-local serialization/deserialization
serialize: datetimeSerialize,
deserialize: datetimeDeserialize,

// Nullable string handling
serialize: nullableSerialize,
deserialize: nullableDeserialize,

// Number handling
serialize: numberSerialize,
deserialize: numberDeserialize,

// Nullable number handling
deserialize: numberNullableDeserialize
```

--------------------------------

### SubForm Component Usage

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Demonstrates how to use the SubForm component to create nested objects within a Svelte Form. It shows the Svelte code and the resulting TypeScript interface for the JSON payload.

```svelte
<Form name="profile">
  <Field path="fullname"> ... </Field>
  <SubForm path="address">
    <Field path="city"> ... </Field>
    <Field path="state"> ... </Field>
    <Field path="zip"> ... </Field>
  </SubForm>
</Form>
```

```typescript
interface Profile {
  fullname: string
  address: {
    city: string
    state: string
    zip: string
  }
}
```

--------------------------------

### AddMore with Non-Objects

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Illustrates how to use the `AddMore` component to manage arrays of strings or nested arrays, rather than just objects. This involves using `<Field path="">` for single fields or nesting `AddMore` components.

```javascript
// For an array of strings:
// <Field path="myStringArray" />

// For an array of arrays:
// <AddMore path="myArrayOfArrays">
//   <AddMore path="" />
// </AddMore>
```

--------------------------------

### Message Structure

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Defines the expected structure for validation and submission messages. Each message object should have a `type`, `message`, and an optional `path`.

```javascript
[
  {
    type: 'error' | 'warning' | 'success' | 'system',
    message: string,
    path?: string
  }
]
```

--------------------------------

### Conditional AddMore with Wrapper

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Provides a pattern for conditionally rendering an `AddMore` component that is wrapped in a div. This prevents an empty div from appearing when the `AddMore` component is hidden due to a condition.

```javascript
// Example Svelte component structure:
// <SubForm path="conditionalWrapper" conditional={someCondition}>
//   <div class="bordered-wrapper">
//     <AddMore path="" />
//   </div>
// </SubForm>
```

--------------------------------

### Svelte Forms Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Defines the properties that can be passed to the Svelte Forms component to control its behavior, including submission functions, validation logic, event handlers, and styling.

```svelte
/**
 * @prop submit: Function - Your function that will be run when the user submits. It should contact the server and return a promise with a SubmitResponse in it.
 * @prop validate: Function - Your function that will be run when the user changes any form data. It is recommended that it contact the server but it can also be locally implemented. Should return an array of messages.
 * @prop success: Function (optional) - Your function that will be run when the form submission returns success.
 * @prop class: string (optional) - CSS class to add to the form element.
 * @prop autocomplete: string (optional) - Value to pass to the form element's `autocomplete` attribute.
 * @prop name: string (optional) - Value to pass to the form element's `name` attribute.
 * @prop store: FormStore (optional, bindable) - The `FormStore` object that manages all the state.
 * @prop preload: object (optional) - If the user is editing an existing object, use this prop to pass in the existing object.
 * @prop autoSave: boolean (optional) - Shift the form into autosave mode.
 */
```

--------------------------------

### AddMore Component Usage

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Illustrates the use of the AddMore component to manage arrays within a Svelte Form. It includes the Svelte code and the corresponding TypeScript interface for an array of objects.

```svelte
<Form name="profile">
  <Field path="fullname"> ... </Field>
  <AddMore path="addresses">
    <Field path="city"> ... </Field>
    <Field path="state"> ... </Field>
    <Field path="zip"> ... </Field>
  </SubForm>
</Form>
```

```typescript
interface Profile {
  fullname: string
  addresses: {
    city: string
    state: string
    zip: string
  }[]
}
```

--------------------------------

### Svelte Forms Default Slot Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Describes the properties available in the default slot for array elements in Svelte Forms. These props provide information about the element's path, value, index, and array state, along with functions for manipulation.

```svelte
* `path` - The full absolute path to the object in the payload. This is the path for each of the array elements, so it will end in a number.
* `value` - The part of the JSON payload that pertains to this array item. This will NOT have any serialization applied so be careful not to feed it directly to an input element. The input element should be wrapped in a `Field` providing it with a serialized value. It's unlikely you will need this often.
* `index` - The index of the current array element being rendered.
* `minned` - `true` if the current array length is equal to the minLength.
* `maxed` - `true` if the current array length is greater than or equal to the maxLength.
* `minLength` - Repeated from the prop
* `maxLength` - Repeated from the prop; presumably you already know this, but it might be cleaner to have it repeated here if you are trying to show the user something about how much they have left.
* `currentLength` - In case you are reporting to the user how much they have left.
* `onDelete` - A function to delete the current element. If you are making a button to remove array elements, you can pass this to its `on:click`. It will not work if it would violate `minLength`
* `onMoveUp` - A function to move the current element earlier in the array. If you are making a button to move array elements, you can pass this to its `on:click`.
* `onMoveDown` - A function to move the current element later in the array. If you are making a button to move array elements, you can pass this to its `on:click`.
* `onAdd` - (rarely needed) A function to add a new element to the array. Normally you'd do this in the `addbutton` slot, but if you want to trigger it automatically based on something that happens inside one of the subforms, you can use this.
```

--------------------------------

### AddMore Component Messages

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

The AddMore component now receives messages based on its path, providing them as a slot prop and a bindable prop. These messages are removed from the Form's messages. Wrappers need to be updated to display these messages.

```svelte
<script>
  import AddMore from './AddMore.svelte';
  import Form from './Form.svelte';

  let messages = {};
</script>

<Form>
  <AddMore path="items" let:messages={addMoreMessages}>
    <!-- Display messages from AddMore -->
    {#if addMoreMessages.maxSize}
      <p>{addMoreMessages.maxSize}</p>
    {/if}
  </AddMore>
</Form>
```

--------------------------------

### Svelte Forms Add Button Slot Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Details the properties available for customizing the add button in Svelte Forms. These props include functions to add or remove elements and state indicators for array length constraints.

```svelte
* `onClick` - A function to push a new element on the end of the array. Pass it to the "Add More" button's `on:click`.
* `onDelete` - Pops the last item off the end of the array.
* `minned` - Same as for the default slot.
* `maxed` - Same as for the default slot.
* `minLength` - Same as for the default slot.
* `maxLength` - Same as for the default slot.
* `currentLength` - Same as for the default slot.
```

--------------------------------

### Svelte Forms Default Slot Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Describes the properties available within the default slot of the Svelte Forms component, providing access to the form's current state, messages, and submission status.

```svelte
/**
 * @prop data: any - The current data being managed by the form.
 * @prop messages: Array<Message> - Array of global messages to show the user at the bottom of the form.
 * @prop allMessages: Array<Message> - Array of all the messages returned by the last validation/submission.
 * @prop saved: boolean - `true` if the JSON payload has not changed since the last successful submission.
 * @prop validating: boolean - `true` if the JSON payload is currently being validated.
 * @prop submitting: boolean - `true` if the form is currently being submitted.
 * @prop valid: boolean - `true` if the last validation/submission did not return any `error` or `system` messages.
 * @prop invalid: boolean - `true` if the last validation/submission returned at least one `error` or `system` message.
 * @prop showingInlineErrors: boolean - `true` if there are any fields with visible errors.
 */
```

--------------------------------

### Field Component Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

finalSerialize and finalDeserialize are now bindable props on the Field component, simplifying their usage compared to extracting them from slot props.

```svelte
<script>
  import Field from './Field.svelte';

  function customSerialize(value) {
    // Custom serialization logic
    return value;
  }

  function customDeserialize(value) {
    // Custom deserialization logic
    return value;
  }
</script>

<Field name="myField" bind:finalSerialize={customSerialize} bind:finalDeserialize={customDeserialize} />
```

--------------------------------

### Svelte Forms Field Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Defines the properties available for a Field component in svelte-forms. These props control data binding, serialization, validation, and conditional display.

```svelte
Props:
* `path`: The path to this input's data in the JSON payload. Relative paths are supported within nested components.
* `defaultValue`: Optional initial value for an empty form payload. Overridden by `preload`.
* `serialize`: Optional function to convert payload data to slot content type (e.g., Date to string).
* `deserialize`: Optional function to convert slot content type to payload data type (e.g., string to number).
* `number`, `notNull`, `date`, `datetime`, `json`: Convenience booleans for common serialization/deserialization scenarios. `notNull` affects string and number types.
* `conditional`: Optional prop for conditional rendering logic.
```

--------------------------------

### Svelte Forms Default Slot Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Details the properties provided to the default slot of a Field component in svelte-forms. These allow interaction with the form's state and validation.

```svelte
Default Slot Props:
* `path`: The full absolute path to this field in the JSON payload.
* `value`: The current value to be passed into the input. If omitted, the input is uncontrolled.
* `messages`: An array of validation messages from the server for this input.
* `valid`: Boolean indicating if the field has passed validation.
* `invalid`: Boolean indicating if the field has failed validation.
* `setVal`: Function to update the form state. Can accept a value or a function to update based on the current value.
* `onChange`: A convenient alternative to `setVal` for input `on:change` events. Handles deserialization automatically.
* `onBlur`: Function to be passed to `on:blur` to mark the field as dirty and display errors.
```

--------------------------------

### Svelte Forms Submit and Validate Function Requirements

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Defines the expected structure and behavior for `submit` and `validate` functions in Svelte Forms. `submit` should handle its own validations and return a `SubmitResponse`, while `validate` should return `Feedback[]`. Neither should trigger client-side side effects directly.

```typescript
interface SubmitResponse {
  success: boolean;
  messages: Feedback[];
  data?: any;
}

interface Feedback {
  path: string;
  message: string;
  type: 'error' | 'warning' | 'info';
}

// Example submit function signature
async function submit(data: any): Promise<SubmitResponse> { /* ... */ }

// Example validate function signature
async function validate(data: any): Promise<Feedback[]> { /* ... */ }
```

--------------------------------

### Svelte Forms Events

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Details the events emitted by the Svelte Forms component to communicate form status and outcomes, such as successful submissions or validation failures.

```svelte
// Fires after the user submits the form and the submission is successful.
// on:saved

// Fires after a successful save that was automatically triggered instead of requested by the user. Only happens in `autoSave` mode.
// on:autosaved

// Fires after an unsuccessful user-requested submission. It does not fire after an unsuccessful background-validation.
// on:validationfail
```

--------------------------------

### FormStore.setField() Behavior

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

FormStore.setField() now dirties the field by default, making its behavior consistent with the setVal slot prop. This change simplifies integration for components that wrap the Field component.

```typescript
// Previous behavior:
// FormStore.setField(fieldName, value) might not dirty the field.

// New behavior (v2.0):
// FormStore.setField(fieldName, value) now dirties the field by default.
```

--------------------------------

### Svelte Forms SubArray Component Props

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

Lists the properties for the SubArray component in Svelte Forms. The primary prop is 'path', which specifies the location of the array in the payload, with an optional 'conditional' prop for DOM manipulation.

```svelte
* `path` - The path to the array in the payload JSON. If inside another `SubArray`, `SubForm`, or `AddMore`, this path must be relative to that.
* `conditional` - (optional) see "Conditional vs Remove from DOM" below
```

--------------------------------

### Submit Function Return Value

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

The submit function in Form can now return a SubmitResponse without the 'data' property. Previously, it was expected to return the data passed as a parameter. This change accommodates scenarios where data manipulation after submission is not needed.

```typescript
import type { SubmitResponse } from './types';

async function submit(data: any): Promise<SubmitResponse> {
  // If data manipulation is not needed after submission:
  return {}; // Or return undefined;

  // If data manipulation is needed:
  // return { data: manipulatedData };
}
```

--------------------------------

### FormStore.submit() Event Changes

Source: https://github.com/txstate-etc/svelte-forms/blob/main/README.md

In version 2.0, FormStore.submit() now triggers 'saved', 'autosaved', and 'validationfail' events. Previously, these were handled by the form's submit handler, causing potential conflicts with downstream libraries. Adjustments may be needed if downstream libraries also fire 'saved' events.

```typescript
// Previous behavior:
// FormStore.submit() did not directly fire these events.

// New behavior (v2.0):
// FormStore.submit().then(() => {
//   // 'saved', 'autosaved', 'validationfail' events are now fired here.
// });
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.