numberProxy and intProxy now works with the empty option.

Fixes #232.

Author: ciscoheat

CHANGELOG.md

@@ -10,7 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - When multiple forms exists with the same id, the warning is now displayed on `superForm` instantiation, not just when new form data is received.
-- Fixed client-side validation for `Date` schema fields.
+- Fixed client-side validation for `Date` schema fields. ([#232](https://github.com/ciscoheat/sveltekit-superforms/issues/232))
+- `numberProxy` and `intProxy` now works with the `empty` option. ([#232](https://github.com/ciscoheat/sveltekit-superforms/issues/232))
 
 ## [1.3.0] - 2023-07-14
 

src/lib/client/proxies.ts

@@ -133,12 +133,17 @@ function _stringProxy<
   options: DefaultOptions
 ): Writable<string> {
   function toValue(val: unknown) {
-    if (typeof val !== 'string')
-      throw new SuperFormError('stringProxy received a non-string value.');
-
     if (!val && options.empty !== undefined)
       return options.empty === 'null' ? null : undefined;
 
+    if (typeof val === 'number') {
+      val = val.toString();
+    }
+
+    if (typeof val !== 'string') {
+      throw new SuperFormError('stringProxy received a non-string value.');
+    }
+
     if (type == 'string') return val;
     else if (type == 'boolean') return !!val;
     else if (type == 'date') return new Date(val);

src/routes/tests/datetime-local/+page.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { dateProxy, superForm, superValidateSync } from '$lib/client';
+  import {
+    dateProxy,
+    intProxy,
+    superForm,
+    superValidateSync
+  } from '$lib/client';
   import SuperDebug from '$lib/client/SuperDebug.svelte';
   import { schema } from './schema';
 
@@ -24,11 +29,19 @@
     format: 'datetime-local',
     empty: 'undefined'
   });
+
+  const num = intProxy(form, 'number', {
+    empty: 'undefined'
+  });
 </script>
 
-<SuperDebug data={{ $form, $errors, $tainted }} />
+<SuperDebug data={{ $form, $tainted }} />
 
 <form method="POST" use:enhance>
+  <label>
+    Number: <input name="number" type="number" bind:value={$num} />
+    {#if $errors.number}<span class="invalid">{$errors.number}</span>{/if}
+  </label>
   <label>
     Name: <input name="date" type="datetime-local" bind:value={$date} />
     {#if $errors.date}<span class="invalid">{$errors.date}</span>{/if}

src/routes/tests/datetime-local/schema.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod';
 
 export const schema = z.object({
+  number: z.number().optional(),
   date: z
     .date()
     .min(new Date('2021-01-01'))