forms

packages/web/src/forms/CheckboxField.svelte

@@ -0,0 +1 @@
+<input type="checkbox" {...$$restProps} />

packages/web/src/forms/FormButton.svelte

@@ -1,5 +1,15 @@
 <script>
   import FormStyledButton from '../widgets/FormStyledButton.svelte';
+  import { getFormContext } from './FormProviderCore.svelte';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  const { values } = getFormContext();
+
+  function handleClick() {
+    dispatch('click', $values);
+  }
 </script>
 
-<FormStyledButton type="button" on:click {...$$props} />
+<FormStyledButton type="button" on:click={handleClick} {...$$props} />

packages/web/src/forms/FormCheckboxField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import FromCheckboxFieldRaw from './FromTextFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="checkbox" {label} {...templateProps}>
+  <FromCheckboxFieldRaw {name} {...$$restProps} />
+</svelte:component>

packages/web/src/forms/FormProvider.svelte

@@ -2,11 +2,12 @@
   import { writable } from 'svelte/store';
   import FormProviderCore from './FormProviderCore.svelte';
 
-  export let initivalValues = {};
+  export let initialValues = {};
+  export let template;
 
-  const values = writable(initivalValues);
+  const values = writable(initialValues);
 </script>
 
-<FormProviderCore {values}>
+<FormProviderCore {values} {template}>
   <slot />
 </FormProviderCore>

packages/web/src/forms/FormProviderCore.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" context="module">
   import { getContext, setContext } from 'svelte';
+
   const contextKey = 'formProviderContextKey';
 
   export function getFormContext(): any {
@@ -11,9 +12,16 @@
   import keycodes from '../utility/keycodes';
 
   export let values;
+  export let template;
+
+  const setFieldValue = (name, value) => {
+    values.update(x => ({ ...x, [name]: value }));
+  };
 
   const context = {
     values,
+    template,
+    setFieldValue,
     submitActionRef: { current: null },
   };
 

packages/web/src/forms/FormSelectField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import FromSelectFieldRaw from './FromSelectFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="select" {label} {...templateProps}>
+  <FromSelectFieldRaw {name} {...$$restProps} />
+</svelte:component>

packages/web/src/forms/FormSubmit.svelte

@@ -6,10 +6,15 @@
   const dispatch = createEventDispatcher();
 
   const { submitActionRef } = getFormContext();
-  
+  const { values } = getFormContext();
+
+  function handleClick() {
+    dispatch('click', $values);
+  }
+
   submitActionRef.current = () => {
-    dispatch('click');
+    handleClick();
   };
 </script>
 
-<FormStyledButton type="submit" on:click {...$$props} />
+<FormStyledButton type="submit" on:click={handleClick} {...$$props} />

packages/web/src/forms/FormTextField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import FromTextFieldRaw from './FromTextFieldRaw.svelte';
+
+  export let label;
+  export let name;
+  export let templateProps = {};
+
+  const { template } = getFormContext();
+</script>
+
+<svelte:component this={template} type="text" {label} {...templateProps}>
+  <FromTextFieldRaw {name} {...$$restProps} />
+</svelte:component>

packages/web/src/forms/FromCheckboxFieldRaw.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+
+  export let name;
+
+  const { values, setFieldValue } = getFormContext();
+</script>
+
+<TextField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['checked'])} />

packages/web/src/forms/FromSelectFieldRaw.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import SelectField from './SelectField.svelte';
+
+  export let name;
+
+  const { values, setFieldValue } = getFormContext();
+</script>
+
+<SelectField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['value'])} />

packages/web/src/forms/FromTextFieldRaw.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { getFormContext } from './FormProviderCore.svelte';
+  import TextField from './TextField.svelte';
+
+  export let name;
+
+  const { values, setFieldValue } = getFormContext();
+</script>
+
+<TextField {...$$restProps} value={$values[name]} on:change={e => setFieldValue(name, e.target['value'])} />

packages/web/src/forms/SelectField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let options = [];
+  export let value;
+
+  $: console.log('FIELD', $$props.value);
+</script>
+
+<select {...$$restProps} on:change>
+  {#each options as x (x.value)}
+    <option value={x.value} selected={value == x.value}>
+      {x.label}
+    </option>
+  {/each}
+</select>

packages/web/src/forms/TextField.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let value;
+</script>
+
+<input type="text" {...$$restProps} bind:value on:change />