Animated array

Demo

form.svelte

<script lang="ts">
  import { overrideByRecord } from "@sjsf/form/lib/resolver";
  import type { Schema } from "@sjsf/form";

  import MyForm from "@/components/my-form.svelte";
  import { theme } from "@/components/form-defaults";

  import AnimatedArray from "./animated-array.svelte";

  const schema = {
    type: "array",
    title: "Array",
    minItems: 4,
    default: ["carp", "trout", "bream"],
    items: {
      type: "string",
      default: "default",
    },
  } satisfies Schema;
</script>

<MyForm
  {schema}
  theme={overrideByRecord(theme, {
    arrayField: AnimatedArray,
  })}
/>

animated-array.svelte

<script lang="ts">
  import { flip } from "svelte/animate";
  import { fade } from "svelte/transition";

  import { isSchemaArrayValue } from "@sjsf/form/core";
  import {
    getComponent,
    getFormContext,
    type ComponentProps,
    Text,
  } from "@sjsf/form";
  import {
    createArrayContext,
    setArrayContext,
  } from "@sjsf/form/fields/array/context.svelte";

  let { value = $bindable(), config }: ComponentProps["arrayField"] = $props();

  const ctx = getFormContext();
  const arrayCtx = createArrayContext(
    ctx,
    () => config,
    () => value,
    (v) => (value = v)
  );
  setArrayContext(arrayCtx);

  const ArrayItem = $derived(getComponent(ctx, "arrayItemField", config));
  const Template = $derived(getComponent(ctx, "arrayTemplate", config));
  const Button = $derived(getComponent(ctx, "button", config));
</script>

{#snippet addButton()}
  <Button
    errors={arrayCtx.errors}
    {config}
    disabled={false}
    type="array-item-add"
    onclick={arrayCtx.pushItem}
  >
    <Text {config} id="add-array-item" />
  </Button>
{/snippet}
<Template
  type="template"
  errors={arrayCtx.errors}
  {config}
  {value}
  addButton={arrayCtx.canAdd() ? addButton : undefined}
>
  {#if isSchemaArrayValue(value)}
    {#each value as item, index (arrayCtx.key(index))}
      <div animate:flip transition:fade>
        <ArrayItem
          type="field"
          {index}
          config={arrayCtx.itemConfig(config, item, index)}
          bind:value={value[index]}
        />
      </div>
    {/each}
  {/if}
</Template>