Merge pull request #40 from x0k/fix-array-inputs-validation

Fix array inputs validation

Author: x0k

.changeset/eight-feet-sin.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": patch
+---
+
+Fix `array` based inputs validation

apps/docs/src/content/docs/api-reference/fields.mdx

@@ -53,10 +53,10 @@ interface FieldsAndProps<V extends SchemaValue> {
   };
   null: FieldCommonProps<V>;
   enum: FieldCommonProps<V> & {
-    multiple?: boolean;
+    multiple?: Schema;
   };
   file: FieldCommonProps<V> & {
-    multiple?: boolean;
+    multiple?: Schema;
   };
   hidden: FieldCommonProps<V>;
 }

packages/form/src/basic-theme/widgets/select-widget.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { indexMapper, multipleOptions, singleOption, type WidgetProps } from "@/form/index.js";
+  import {
+    indexMapper,
+    multipleOptions,
+    singleOption,
+    type WidgetProps,
+  } from "@/form/index.js";
 
   let {
     attributes,
@@ -8,23 +13,23 @@
     multiple,
     config,
   }: WidgetProps<"select"> = $props();
-  
-	const mapped = $derived(
-		(multiple ? multipleOptions : singleOption)({
-			mapper: () => indexMapper(options),
+
+  const mapped = $derived(
+    (multiple ? multipleOptions : singleOption)({
+      mapper: () => indexMapper(options),
       // @ts-expect-error
-			value: () => value,
-			update: (v) => (value = v),
-		})
-	);
+      value: () => value,
+      update: (v) => (value = v),
+    })
+  );
 </script>
 
 {#snippet children()}
   {#if !multiple && config.schema.default === undefined}
     <option value={-1}>{attributes.placeholder}</option>
   {/if}
   {#each options as option, index (option.id)}
-    <option value={index} disabled={option.disabled} >
+    <option value={index} disabled={option.disabled}>
       {option.label}
     </option>
   {/each}
@@ -39,11 +44,7 @@
     {@render children()}
   </select>
 {:else}
-  <select
-    bind:value={mapped.value}
-    style="flex-grow: 1"
-    {...attributes}
-  >
+  <select bind:value={mapped.value} style="flex-grow: 1" {...attributes}>
     {@render children()}
   </select>
 {/if}

packages/form/src/form/context/event-handlers.svelte.ts

@@ -7,7 +7,7 @@ import {
   ON_BLUR,
 } from "../validation.js";
 
-import type { FormContext } from './context.js';
+import type { FormContext } from "./context.js";
 
 export function makeEventHandlers(ctx: FormContext, validate: () => void) {
   let changed = $state(false);
@@ -22,7 +22,7 @@ export function makeEventHandlers(ctx: FormContext, validate: () => void) {
     touched = false;
   });
 
-  const makeHandler = (event: number, validate: () => void) => {
+  const makeHandler = (event: number) => {
     const m = ctx.inputsValidationMode;
     if (
       !(m & event) ||
@@ -34,9 +34,9 @@ export function makeEventHandlers(ctx: FormContext, validate: () => void) {
     }
     return validate;
   };
-  const onInput = $derived(makeHandler(ON_INPUT, validate));
-  const onChange = $derived(makeHandler(ON_CHANGE, validate));
-  const onBlur = $derived(makeHandler(ON_BLUR, validate));
+  const onInput = $derived(makeHandler(ON_INPUT));
+  const onChange = $derived(makeHandler(ON_CHANGE));
+  const onBlur = $derived(makeHandler(ON_BLUR));
 
   return {
     oninput() {

packages/form/src/form/fields/array/another-field-array-field.svelte

@@ -21,10 +21,7 @@
 </script>
 
 <Field
-  multiple
+  multiple={schemaItems}
   bind:value
-  config={{
-    ...config,
-    schema: schemaItems,
-  }}
+  config={config}
 />

packages/form/src/form/fields/enum-field.svelte

@@ -13,29 +13,33 @@
 
   import type { FieldProps } from "./model.js";
 
-  let {
-    config,
-    value = $bindable(),
-    multiple = false,
-  }: FieldProps<"enum"> = $props();
+  let { config, value = $bindable(), multiple }: FieldProps<"enum"> = $props();
 
   const ctx = getFormContext();
 
   const Template = $derived(getTemplate(ctx, "field", config));
   const Widget = $derived(getWidget(ctx, "select", config));
 
-  const handlers = makeEventHandlers(ctx, () =>
-    validateField(ctx, config, value)
-  );
+  const handlers = makeEventHandlers(ctx, () => validateField(ctx, config, value));
   const attributes = $derived(selectAttributes(ctx, config, handlers));
   const options = $derived(
-    createOptions2(config.schema, config.idSchema, config.uiOptions, (i) =>
-      makePseudoId(ctx, config.idSchema.$id, i)
+    createOptions2(
+      multiple ?? config.schema,
+      config.idSchema,
+      config.uiOptions,
+      (i) => makePseudoId(ctx, config.idSchema.$id, i)
     ) ?? []
   );
   const errors = $derived(getErrors(ctx, config.idSchema));
 </script>
 
 <Template showTitle {value} {config} {errors}>
-  <Widget {attributes} {config} {errors} bind:value {options} {multiple} />
+  <Widget
+    {attributes}
+    {config}
+    {errors}
+    bind:value
+    {options}
+    multiple={multiple !== undefined}
+  />
 </Template>

packages/form/src/form/fields/file-field.svelte

@@ -18,7 +18,7 @@
   let {
     config,
     value = $bindable(),
-    multiple = false,
+    multiple
   }: FieldProps<"file"> = $props();
 
   const ctx = getFormContext();
@@ -96,6 +96,6 @@
     {attributes}
     {errors}
     {config}
-    {multiple}
+    multiple={multiple !== undefined}
   />
 </Template>

packages/form/src/form/fields/model.ts

@@ -6,6 +6,7 @@ import type {
   ANY_OF_KEY,
   SchemaObjectValue,
   SchemaArrayValue,
+  Schema,
 } from "@/core/index.js";
 
 import type { Config } from "../config.js";
@@ -49,10 +50,10 @@ export interface FieldsAndProps<V extends SchemaValue> {
 
   null: FieldCommonProps<V>;
   enum: FieldCommonProps<V> & {
-    multiple?: boolean;
+    multiple?: Schema;
   };
   file: FieldCommonProps<V> & {
-    multiple?: boolean;
+    multiple?: Schema;
   };
   hidden: FieldCommonProps<V>;
 }