@effect-app/vue-components 0.3.2 → 0.4.1

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -1,7 +1,19 @@
 <template>
-  <form novalidate @submit.prevent.stop="form.handleSubmit()">
+  <form novalidate @submit.prevent.stop="formToUse.handleSubmit()">
     <fieldset :disabled="formIsSubmitting">
-      <slot :form="form" :subscribed-values="subscribedValues" />
+      <!-- Render externalForm + default slots if props.form is provided -->
+      <template v-if="props.form">
+        <slot name="externalForm" :subscribed-values="subscribedValues" />
+        <slot />
+        <!-- default slot -->
+      </template>
+      <!-- Render internalForm slot if form was created locally -->
+      <slot
+        v-else-if="localForm"
+        name="internalForm"
+        :form="localForm"
+        :subscribed-values="subscribedValues"
+      />
     </fieldset>
   </form>
 </template>
@@ -62,7 +74,7 @@ import {
   type OmegaFormReturn,
   useOmegaForm,
 } from "./useOmegaForm"
-import { watch } from "vue"
+import { computed, watch, defineSlots } from "vue"
 
 const props = defineProps<
   {
@@ -81,32 +93,40 @@ const props = defineProps<
   )
 >()
 
-const form =
-  props.form ?? useOmegaForm<From, To>(props.schema, props, props.omegaConfig)
+const localForm = computed(() => {
+  if (props.form || !props.schema) {
+    return undefined
+  }
+  return useOmegaForm<From, To>(props.schema, props, props.omegaConfig)
+})
 
-const formIsSubmitting = useStore(form.store, state => state.isSubmitting)
+const formToUse = computed(() => props.form ?? localForm.value!)
 
-defineExpose(form)
+const formIsSubmitting = useStore(
+  formToUse.value.store,
+  state => state.isSubmitting,
+)
 
 const subscribedValues = getOmegaStore(
-  form as OmegaFormApi<To, From>,
+  formToUse.value as OmegaFormApi<To, From>,
   props.subscribe,
 )
 
 const formSubmissionAttempts = useStore(
-  form.store,
+  formToUse.value.store,
   state => state.submissionAttempts,
 )
 
-const errors = form.useStore(state => state.errors)
+const errors = computed(() => formToUse.value.useStore(state => state.errors))
 
 watch(
-  () => [form.filterItems, errors.value],
+  () => [formToUse.value.filterItems, errors.value.value],
   () => {
-    const filterItems: FilterItems | undefined = form.filterItems
+    const filterItems: FilterItems | undefined = formToUse.value.filterItems
+    const currentErrors = errors.value.value
     if (!filterItems) return {}
-    if (!errors.value) return {}
-    const errorList = Object.values(errors.value)
+    if (!currentErrors) return {}
+    const errorList = Object.values(currentErrors)
       .filter(
         (fieldErrors): fieldErrors is Record<string, StandardSchemaV1Issue[]> =>
           Boolean(fieldErrors),
@@ -116,22 +136,40 @@ watch(
           .flat()
           .map((issue: StandardSchemaV1Issue) => issue.message),
       )
+
     if (errorList.some(e => e === filterItems.message)) {
-      filterItems.items.forEach((item: any) => {
-        const m: any = form.getFieldMeta(item)
-        form.setFieldMeta(item, {
-          ...m,
-          errorMap: {
-            onSubmit: [{ path: [item], message: filterItems.message }],
-          },
-        })
+      // TODO: Investigate if filterItems.items should be typed based on DeepKeys<To>.
+      filterItems.items.forEach((item: keyof From) => {
+        const m = formToUse.value.getFieldMeta(item as any)
+        if (m) {
+          formToUse.value.setFieldMeta(item as any, {
+            ...m,
+            errorMap: {
+              onSubmit: [
+                { path: [item as string], message: filterItems.message },
+              ],
+            },
+          })
+        }
       })
     }
     return {}
   },
 )
 
-provideOmegaErrors(formSubmissionAttempts, errors, props.showErrorsOn)
+provideOmegaErrors(formSubmissionAttempts, errors.value, props.showErrorsOn)
+
+defineSlots<{
+  // Default slot (no props)
+  default(): void
+  // Named slot when form is created internally via schema
+  internalForm(props: {
+    form: OmegaFormReturn<To, From>
+    subscribedValues: typeof subscribedValues.value
+  }): void
+  // Named slot when form is passed via props (provides subscribedValues)
+  externalForm(props: { subscribedValues: typeof subscribedValues.value }): void
+}>()
 </script>
 
 <style scoped>

package/src/components/OmegaForm/index.ts

@@ -10,9 +10,9 @@ export { default } from "./OmegaWrapper.vue"
 
 export { OmegaForm, OmegaInput, OmegaErrors }
 
-const OmegaFormCE = defineCustomElement(OmegaForm)
-const OmegaInputCE = defineCustomElement(OmegaInput)
-const OmegaErrorsCE = defineCustomElement(OmegaErrors)
+const OmegaFormCE = defineCustomElement(OmegaForm as any)
+const OmegaInputCE = defineCustomElement(OmegaInput as any)
+const OmegaErrorsCE = defineCustomElement(OmegaErrors as any)
 
 export { OmegaFormCE, OmegaInputCE, OmegaErrorsCE }
 

package/src/components/OmegaForm/useOmegaForm.ts

@@ -13,9 +13,20 @@ import {
   type FormProps,
   type MetaRecord,
   type OmegaFormApi,
+  type OmegaInputProps,
 } from "./OmegaFormStuff"
-import { computed, onBeforeUnmount, onMounted, onUnmounted } from "vue"
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  defineComponent,
+  h,
+  type DefineComponent,
+  type Component,
+} from "vue"
 import { isObject } from "effect/Predicate"
+import OmegaInput from "./OmegaInput.vue"
 
 type keysRule<T> =
   | {
@@ -39,11 +50,14 @@ export type OmegaConfig<T> = {
   } & keysRule<T>
 }
 
-export interface OmegaFormReturn<To, From> extends OmegaFormApi<To, From> {
+interface OF<To, From> extends OmegaFormApi<To, From> {
   meta: MetaRecord<To>
   filterItems?: FilterItems
   clear: () => void
 }
+export interface OmegaFormReturn<To, From> extends OF<To, From> {
+  Input: DefineComponent<Omit<OmegaInputProps<From, To>, "form">, {}, {}>
+}
 
 export const useOmegaForm = <
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -265,7 +279,39 @@ export const useOmegaForm = <
     window.removeEventListener("blur", saveDataInUrl)
   })
 
-  const exposed = Object.assign(form, { meta, filterItems, clear })
+  const formWithExtras: OF<To, From> = Object.assign(form, {
+    meta,
+    filterItems,
+    clear,
+  })
+
+  return Object.assign(formWithExtras, {
+    Input: defineComponent({
+      name: "FormInput",
+      inheritAttrs: true,
+      setup(_, { attrs, slots }) {
+        const name = attrs.name as NestedKeyOf<To>
+        const label = attrs.label as string
+        if (!name || !label) {
+          throw new Error("OmegaForm.Input requires name and label props")
+        }
 
-  return exposed
+        return () =>
+          h(
+            OmegaInput as Component,
+            {
+              ...attrs,
+              name,
+              label,
+              form: formWithExtras,
+            },
+            slots,
+          )
+      },
+    }) as any as DefineComponent<
+      Omit<OmegaInputProps<From, To>, "form">,
+      {},
+      {}
+    >,
+  })
 }

package/src/stories/OmegaForm/ComplexForm.vue

@@ -1,36 +1,42 @@
 <template>
-  <OmegaForm :form="form">
-    <template #default="{ form }">
-      <OmegaInput label="aString" :form="form" name="aString" />
-      <OmegaInput label="aStringMin2" :form="form" name="aStringMin2" />
-      <OmegaInput label="aStringMin2Max4" :form="form" name="aStringMin2Max4" />
-      <OmegaInput
-        label="aStringMin2Max3Nullable"
-        :form="form"
-        name="aStringMin2Max3Nullable"
-      />
-      <OmegaInput label="aNumber" :form="form" name="aNumber" />
-      <OmegaInput label="aNumberMin2" :form="form" name="aNumberMin2" />
-      <OmegaInput label="aNumberMin2Max" :form="form" name="aNumberMin2Max" />
-      <OmegaInput
-        label="aNumberMin2Max4Nullable"
-        :form="form"
-        name="aNumberMin2Max4Nullable"
-      />
-      <OmegaInput
-        label="aSelect"
-        :form="form"
-        name="aSelect"
-        :options="[
-          { title: 'a', value: 'a' },
-          { title: 'b', value: 'b' },
-          { title: 'c', value: 'c' },
-        ]"
-      />
-      <button>Submit</button>
-      <button type="reset" @click.prevent="form.clear()">Clear</button>
-      <button type="button" @click="form.reset()">Reset</button>
-    </template>
+  <OmegaForm :form="exampleForm">
+    <OmegaInput label="aString" :form="exampleForm" name="aString" />
+    <OmegaInput label="aStringMin2" :form="exampleForm" name="aStringMin2" />
+    <OmegaInput
+      label="aStringMin2Max4"
+      :form="exampleForm"
+      name="aStringMin2Max4"
+    />
+    <OmegaInput
+      label="aStringMin2Max3Nullable"
+      :form="exampleForm"
+      name="aStringMin2Max3Nullable"
+    />
+    <OmegaInput label="aNumber" :form="exampleForm" name="aNumber" />
+    <OmegaInput label="aNumberMin2" :form="exampleForm" name="aNumberMin2" />
+    <OmegaInput
+      label="aNumberMin2Max"
+      :form="exampleForm"
+      name="aNumberMin2Max"
+    />
+    <OmegaInput
+      label="aNumberMin2Max4Nullable"
+      :form="exampleForm"
+      name="aNumberMin2Max4Nullable"
+    />
+    <OmegaInput
+      label="aSelect"
+      :form="exampleForm"
+      name="aSelect"
+      :options="[
+        { title: 'a', value: 'a' },
+        { title: 'b', value: 'b' },
+        { title: 'c', value: 'c' },
+      ]"
+    />
+    <button>Submit</button>
+    <button type="reset" @click.prevent="exampleForm.clear()">Clear</button>
+    <button type="button" @click="exampleForm.reset()">Reset</button>
   </OmegaForm>
 </template>
 
@@ -38,7 +44,7 @@
 import { S } from "effect-app"
 import { OmegaForm, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
 
-const form = useOmegaForm(
+const exampleForm = useOmegaForm(
   S.Struct({
     aString: S.String,
     aStringMin2: S.String.pipe(S.minLength(2)),

package/src/stories/OmegaForm/EmailForm.vue

@@ -4,7 +4,7 @@
     :on-submit="onSubmit"
     :default-values="defaultValues"
   >
-    <template #default="{ form }">
+    <template #internalForm="{ form }">
       <OmegaInput label="email" name="email" :form="form" />
       <OmegaInput label="confirm" name="confirm" :form="form" />
       <button>submit</button>

package/src/stories/OmegaForm/Meta.vue

@@ -0,0 +1,47 @@
+<template>
+  <OmegaForm
+    :schema="
+      S.Struct({
+        a: S.NullOr(S.String),
+        b: S.UndefinedOr(S.Number),
+        c: S.NullishOr(S.Number),
+        d: S.String,
+        e: S.Number,
+        f: S.Number,
+        struct: S.Struct({
+          a: S.NullOr(S.String),
+          b: S.UndefinedOr(S.Number),
+          c: S.NullishOr(S.Number),
+          d: S.String,
+          e: S.Number,
+          f: S.Number,
+        }),
+      })
+    "
+  >
+    <template #internalForm="{ form }">
+      <ul>
+        <li v-for="key in Object.keys(form.meta)" :key="key">
+          {{ key }}: {{ (form.meta as any)[key] }}
+        </li>
+      </ul>
+      <OmegaInput label="a" :form="form" name="a" />
+      <OmegaInput label="b" :form="form" name="b" />
+      <OmegaInput label="c" :form="form" name="c" />
+      <OmegaInput label="d" :form="form" name="d" />
+      <OmegaInput label="e" :form="form" name="e" />
+      <OmegaInput label="f" :form="form" name="f" />
+      <OmegaInput label="struct.a" :form="form" name="struct.a" />
+      <OmegaInput label="struct.b" :form="form" name="struct.b" />
+      <OmegaInput label="struct.c" :form="form" name="struct.c" />
+      <OmegaInput label="struct.d" :form="form" name="struct.d" />
+      <OmegaInput label="struct.e" :form="form" name="struct.e" />
+      <OmegaInput label="struct.f" :form="form" name="struct.f" />
+    </template>
+  </OmegaForm>
+</template>
+
+<script setup lang="ts">
+import { OmegaForm, OmegaInput } from "../../components/OmegaForm"
+import { S } from "effect-app"
+</script>

package/src/stories/OmegaForm/OneHundredWaysToWriteAForm.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="container">
+  <h1>One hundred ways to write a form</h1>
+  <p>
+    OmegaForm is a powerful and flexible form library that wraps
+    <a href="https://tanstack.com/form/latest" target="_blank">TanStack Form</a>
+    and uses
+    <a href="https://effect.website/docs/schema/introduction/" target="_blank">
+      Effect Schema
+    </a>
+    as the schema definition. All of this allows you to create forms in a
+    declarative way. 
+    We also use
+    <a href="https://vuetifyjs.com/" target="_blank">Vuetify</a> as peer dependency
+    for the UI components, but you can use any other UI library you want or custom inputs.
+    Here are some examples of how to write forms using
+    different approaches
+  </p>
+  <p>for our example, we will use the following dependencies</p>
+  <pre v-highlightjs><code class="javascript">{{ `import { S } from "effect-app"
+import { OmegaForm, OmegaInput, useOmegaForm } from "@effect-app/vue-components"` }}</code></pre>
+
+  <h2>Simplest way</h2>
+  <p>Now, let's write a form using the following schema:</p>
+  <pre v-highlightjs><code class="typescript">{{ `const schema = S.Struct({
+  name: S.String,
+  age: S.Number,
+})` }}</code></pre>
+
+  <p>Now, let's write in the template the form using the following schema:</p>
+  <pre
+    v-highlightjs
+  ><code class="vue">{{ `<OmegaForm :schema="schema" :on-submit="console.log">
+  <template #internalForm="{ form }">
+    <OmegaInput label="name" :form="form" name="name" />
+    <OmegaInput label="age" :form="form" name="age" />
+  </template>
+</OmegaForm>` }}</code></pre>
+
+  <OmegaForm :schema="schema" :on-submit="console.log">
+    <template #internalForm="{ form }">
+      <OmegaInput label="name" :form="form" name="name" />
+      <OmegaInput label="age" :form="form" name="age" />
+    </template>
+  </OmegaForm>
+
+  <p>
+    <code>OmegaInput</code>
+    is a component that will render a form input based on the schema. It's
+    alread embedded inside the
+    <code>OmegaForm</code>
+    component, so you don't need to import it separately or pass form as a prop:
+  </p>
+  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :schema="schema">
+  <template #internalForm="{ form }">
+    <component :is="form.Input" label="name" name="name" />
+    <component :is="form.Input" label="age" name="age" />
+  </template>
+</OmegaForm>` }}</code></pre>
+  <p>you can also register to the values via the `subscribe` prop</p>
+  <pre
+    v-highlightjs
+  ><code class="vue">{{ `<OmegaForm :schema="schema" :subscribe="['values']">
+    <template #internalForm="{ form, subscribedValues: { values } }">
+      <component :is="form.Input" label="name" name="name" />
+      <component :is="form.Input" label="age" name="age" />
+      <pre>\{\{ values \}\}</pre>
+    </template>
+  </OmegaForm>` }}</code></pre>
+
+  <OmegaForm :schema="schema" :subscribe="['values']">
+    <template #internalForm="{ form, subscribedValues: { values } }">
+      <component :is="form.Input" label="name" name="name" />
+      <component :is="form.Input" label="age" name="age" />
+      <pre>{{ values }}</pre>
+    </template>
+  </OmegaForm>
+
+  <h2>Using the useOmegaForm hook</h2>
+  <p>
+    The useOmegaForm hook is a hook that returns the form instance and the
+    values. It's a good way to create a form in a functional way.
+  </p>
+  <pre
+    v-highlightjs
+  ><code class="typescript">{{ `const form = useOmegaForm(schema)` }}</code></pre>
+  <p>
+    Now, you can use the form instance to create the form in the template.
+  </p>
+  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :form="form">
+    <form.Input" label="name" name="name" />
+    <form.Input" label="age" name="age" />
+</OmegaForm>` }}</code></pre>
+
+  <p>you can still register to the values via the `subscribe` prop</p>
+  <pre
+    v-highlightjs
+  ><code class="vue">{{ `<OmegaForm :form="form" :subscribe="['values']">
+    <template #externalForm="{ subscribedValues: { values } }">
+      <form.Input" label="name" name="name" />
+      <form.Input" label="age" name="age" />
+      <pre>\{\{ values \}\}</pre>
+    </template>
+  </OmegaForm>` }}</code></pre>
+  <p>
+    <strong>Note:</strong> the template name is <code>externalForm</code>
+    because the form is not inside the component, it's outside. And you don't
+    have access to the form instance inside the template variables anymore.
+  </p>
+
+  <h3>Using custom inputs</h3>
+  <p>
+    You can use custom inputs by passing an OmegaInput a child component.
+  </p>
+  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :form="form">
+  <form.Input label="name" name="name">
+    <template #default="{ field, label }">
+      <label :for="name">\{\{ label \}\}</label>
+      <input
+        :id="name"
+        v-model="field.state.value"
+        :name="name"
+        style="border: 1px solid red"
+        @change="(e) => field.handleChange(e.target.value)"
+      />
+    </template>
+  </form.Input>
+</OmegaForm>` }}</code></pre>
+  <OmegaForm :form="form">
+    <form.Input label="name" name="name">
+      <template #default="{ field, label, name }">
+        <label :for="name">{{ label }}</label>
+        <input
+          :id="name"
+          v-model="field.state.value"
+          :name="name"
+          style="border: 1px solid red"
+          @change="(e: any) => field.handleChange(e.target.value)"
+        />
+      </template>
+    </form.Input>
+  </OmegaForm>
+  <h3>Known issues</h3>
+  <p>
+    You can't write something like this:
+  </p>
+  <pre v-highlightjs><code class="vue">{{ `<OmegaForm :schema="schema">
+  <template #internalForm="{ form }">
+    <form.Input label="name" name="name" />
+    <form.Input label="age" name="age" />
+  </template>
+</OmegaForm>` }}</code></pre>
+  <p>
+    because When Vue's template compiler encounters <code>form.Input</code>, it try to resolve or analyze the form object and its Input property earlier in the rendering pipeline. Since form.Input is provided by the parent OmegaForm through the slot, this direct usage inside the slot might create a tighter, more immediate dependency loop that the compiler/renderer detects or falls into, leading to the stack overflow.
+  </p>
+</div>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { OmegaForm, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
+
+const schema = S.Struct({
+  name: S.String,
+  age: S.Number,
+})
+const form = useOmegaForm(schema)
+</script>
+
+<style scoped>
+p,
+pre {
+  margin-bottom: 1rem;
+}
+form {
+  margin-bottom: 2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+h1, h2, h3 {
+  text-wrap: balance;
+}
+</style>

package/src/stories/OmegaForm/PersistencyForm.vue

@@ -4,17 +4,17 @@
     :subscribe="['errors', 'values']"
     show-errors-on="onChange"
   >
-    <template #default="{ form, subscribedValues: { errors, values } }">
+    <template #externalForm="{ subscribedValues: { errors, values: vvv } }">
       <div>Errors: {{ errors }}</div>
-      <div>Values: {{ values }}</div>
-      <OmegaInput label="first" :form="form" name="first" />
+      <div>Values: {{ vvv }}</div>
+      <OmegaInput label="first" :form="addForm" name="first" />
       <div>+</div>
-      <OmegaInput label="second" :form="form" name="second" />
+      <OmegaInput label="second" :form="addForm" name="second" />
       <br />
       <hr />
       <br />
-      <OmegaInput label="third.fourth" :form="form" name="third.fourth" />
-      <OmegaInput label="third.fifth" :form="form" name="third.fifth" />
+      <OmegaInput label="third.fourth" :form="addForm" name="third.fourth" />
+      <OmegaInput label="third.fifth" :form="addForm" name="third.fifth" />
     </template>
   </OmegaForm>
 

package/src/stories/OmegaForm/SimpleForm.vue

@@ -1,6 +1,6 @@
 <template>
   <OmegaForm :schema="schema" :on-submit="onSubmit" :subscribe="['values']">
-    <template #default="{ form, subscribedValues: { values } }">
+    <template #internalForm="{ form, subscribedValues: { values } }">
       <div>values: {{ values }}</div>
       <OmegaInput label="asder2" name="asder2" :form="form">
         <template #default="inputProps">

package/src/stories/OmegaForm/SimpleFormVuetifyDefault.vue

@@ -1,6 +1,6 @@
 <template>
   <OmegaForm :schema="schema" :subscribe="['values']">
-    <template #default="{ form, subscribedValues: { values } }">
+    <template #internalForm="{ form, subscribedValues: { values } }">
       <OmegaInput label="aString" :form="form" name="aString" />
       <pre>{{ values }}</pre>
     </template>

package/src/stories/OmegaForm/SumExample.vue

@@ -1,10 +1,8 @@
 <template>
   <OmegaForm :form="addForm">
-    <template #default="{ form }">
-      <OmegaInput label="first" :form="form" name="first" />
-      <div>+</div>
-      <OmegaInput label="second" :form="form" name="second" />
-    </template>
+    <OmegaInput label="first" :form="addForm" name="first" />
+    <div>+</div>
+    <OmegaInput label="second" :form="addForm" name="second" />
   </OmegaForm>
 
   <!-- Technically you can do this only with a subscribe but only inside OmegaForm Context -->