feat(Form): add success prop so Form can remove stored values internally

Author: hobbitronics

components/custom/Form/Form.svelte

@@ -4,6 +4,7 @@ import { generateRandomID } from '../../../random'
 
 export let id = generateRandomID('form-')
 export let saveToLocalStorage = false
+export let success = false
 
 let form = {}
 
@@ -12,6 +13,12 @@ onMount(() => {
 })
 
 $: saveToLocalStorage && restoreFormValues(form)
+$: success && resetForm(form)
+
+const resetForm = (form) => {
+  form.reset()
+  sessionStorage.removeItem(id)
+}
 
 const getValuesFromForm = (form) => Object.fromEntries(new FormData(form))
 

index.d.ts

@@ -305,6 +305,7 @@ declare module '@silintl/ui-components' {
   interface FormProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
     id?: string
     saveToLocalStorage?: boolean
+    success?: boolean
   }
   export class Form extends SvelteComponentTyped<FormProps> {}
 

stories/Form.stories.svelte

@@ -8,10 +8,10 @@ const args = {
   class: '', //only works for global classes
   id: '',
   saveToLocalStorage: false,
+  success: false,
   'on:submit': function () {
-    sessionStorage.removeItem(this.id)
-    alert('submitted, reloading page')
-    location.reload()
+    alert('submitted successfully, form will now reset and remove any saved values')
+    this.success = true
   },
 }
 </script>
@@ -20,11 +20,11 @@ const args = {
 
 <Template let:args>
   <Form on:submit={args['on:submit']} {...args}>
-    <TextField label='first' name='first'/>
+    <TextField label="first" name="first" />
 
-    <TextArea label='second' name='second' rows={4}/>
+    <TextArea label="second" name="second" rows={4} />
 
-    <MoneyInput label='third' name='third' />
+    <MoneyInput label="third" name="third" />
 
     <Button raised>Submit</Button>
   </Form>