form provider

packages/web/src/forms/FormProvider.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import FormProviderCore from './FormProviderCore.svelte';
+
+  export let initivalValues = {};
+
+  const values = writable(initivalValues);
+</script>
+
+<FormProviderCore {values}>
+  <slot />
+</FormProviderCore>

packages/web/src/forms/FormProviderCore.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+  import { getContext, setContext } from 'svelte';
+  const contextKey = 'formProviderContextKey';
+
+  export function getFormContext(): any {
+    return getContext(contextKey);
+  }
+</script>
+
+<script lang="ts">
+  import keycodes from '../utility/keycodes';
+
+  export let values;
+
+  const context = {
+    values,
+    submitActionRef: { current: null },
+  };
+
+  setContext(contextKey, context);
+
+  function handleEnter(e) {
+    if (e.keyCode == keycodes.enter && context.submitActionRef.current) {
+      e.preventDefault();
+      context.submitActionRef.current(values);
+    }
+  }
+</script>
+
+<slot />
+
+<svelte:window on:keydown={handleEnter} />

packages/web/src/forms/FormSubmit.svelte

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