@effect-app/vue-components 0.27.16 → 1.0.0-next.1

package/src/components/OmegaForm/{OmegaErrors.vue → OmegaErrorsInternal.vue}

@@ -76,20 +76,26 @@ import { mdiLink } from "@mdi/js"
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
-import { useOmegaErrors } from "./OmegaErrorsContext"
+import { type OmegaError } from "./OmegaFormStuff"
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VAlert"]
 
-const { errors, generalErrors, showErrors } = useOmegaErrors()
+const props = defineProps<
+  {
+    errors: readonly OmegaError[]
+    generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined
+    showErrors: boolean
+  }
+>()
 
 const { trans } = useIntl()
 
 const showedGeneralErrors = computed(() => {
-  if (!generalErrors.value) return []
+  if (!props.generalErrors) return []
 
-  return generalErrors
-    .value
+  return props
+    .generalErrors
     .filter((record): record is Record<string, StandardSchemaV1Issue[]> => Boolean(record))
     .flatMap((errorRecord) =>
       Object

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -17,9 +17,11 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>,
+  generic="
+  From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
-  Name extends DeepKeys<From>"
+  Name extends DeepKeys<From>
+"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { inject } from "vue"

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -2,7 +2,7 @@ import { type Effect, Option, pipe, type Record, S } from "effect-app"
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type DeepKeys, type FieldAsyncValidateOrFn, type FieldValidateOrFn, type FormApi, type FormAsyncValidateOrFn, type FormOptions, type FormState, type FormValidateOrFn, type StandardSchemaV1, type VueFormApi } from "@tanstack/vue-form"
 import { type RuntimeFiber } from "effect/Fiber"
-import { useIntl } from "../../utils"
+import { getTransformationFrom, useIntl } from "../../utils"
 import { type OmegaFieldInternalApi } from "./InputProps"
 import { type OmegaFormReturn } from "./useOmegaForm"
 
@@ -253,8 +253,8 @@ export const createMeta = <T = any>(
   { meta = {}, parent = "", property, propertySignatures }: CreateMeta,
   acc: Partial<MetaRecord<T>> = {}
 ): MetaRecord<T> | FieldMeta => {
-  // unwraps class..
-  // TODO: might want to recursively unwrap.
+  // unwraps class (Class are transformations)
+  // this calls createMeta recursively, so wrapped transformations are also unwrapped
   if (property && property._tag === "Transformation") {
     return createMeta<T>({
       parent,
@@ -284,9 +284,8 @@ export const createMeta = <T = any>(
           .filter(
             (t) => t._tag !== "UndefinedKeyword" && t !== S.Null.ast
           )
-          // unwrap classes..
-          // TODO: might want to recursively unwrap.
-          .map((_) => _._tag === "Transformation" ? _.from : _)
+          // unwraps class (Class are transformations)
+          .map(getTransformationFrom)
 
         const hasStructMembers = nonNullTypes.some(
           (t) => "propertySignatures" in t

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,6 +1,5 @@
 <template>
-  <component
-    :is="form.Field"
+  <form.Field
     :name="name"
     :validators="{
       onChange: schema,
@@ -22,15 +21,17 @@
         </template>
       </OmegaInternalInput>
     </template>
-  </component>
+  </form.Field>
 </template>
 
 <script
   setup
   lang="ts"
-  generic="// dprint ignore - somehow with 120 chars, this becomes a mess. should report it.
+  generic="
+  // dprint ignore - somehow with 120 chars, this becomes a mess. should report it.
   From extends Record<PropertyKey, any>,
-  To extends Record<PropertyKey, any>"
+  To extends Record<PropertyKey, any>
+"
 >
 import { computed, inject, type Ref } from "vue"
 import { useIntl } from "../../utils"

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -22,7 +22,6 @@
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
 import { computed, type ComputedRef, getCurrentInstance, nextTick, onMounted, ref, useId, watch, watchEffect } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
-import { useOmegaErrors } from "./OmegaErrorsContext"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
 
@@ -93,7 +92,7 @@ onMounted(() => {
     fieldApi.setValue(null as any)
   }
 })
-const { addError, removeError, showErrors, showErrorsOn } = useOmegaErrors()
+const { addError, removeError, showErrors, showErrorsOn } = (props.field.form as any).errorContext // todo; update types to include extended Omega Form props
 
 const realDirty = ref(false)
 

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -1,25 +1,10 @@
 <template>
   <form
     novalidate
-    @submit.prevent.stop="formToUse.handleSubmit()"
+    @submit.prevent.stop="form.handleSubmit()"
   >
-    <fieldset :disabled="formIsSubmitting">
-      <!-- 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 :disabled="formIsSubmitting || disabled">
+      <slot :subscribed-values="subscribedValues" />
     </fieldset>
   </form>
 </template>
@@ -27,258 +12,49 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>,
+  generic="
+  From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
   K extends keyof OmegaFormState<From, To> = keyof OmegaFormState<From, To>,
-    Props = DefaultInputProps<From>"
+  Props = DefaultInputProps<From>
+"
 >
 /**
  * Form component that wraps TanStack Form's useForm hook
  *
  * Usage:
- * <Form :default-values="..." :on-submit="..." :validators="..." ...etc>
- *   <template #default="{ form }">
- *     <!-- Children with access to form -->
- *     <component :is="form.Field" name="fieldName">
- *       <template #default="{ field }">
- *         <input
- *           :value="field.state.value"
- *           @input="e => field.handleChange(e.target.value)"
- *         />
- *       </template>
- *     </component>
- *   </template>
- * </Form>
- *
- * <Form :default-values="..." :on-submit="..." :validators="..." ...etc>
- *   <template #default="{ form }">
- *     <Input :form="form" name="foobar" />
- *   </template>
- * </Form>
- *
- * <Form :schema="schema" :subscribe="['values', 'isSubmitting']">
- *   <template #default="{ form, subscribedValues }">
- *     <Input :form="form" name="foobar" />
- *   </template>
- * </Form>
+ * <form.Form>
+ *   <form.Input name="foobar" />
+ *   <form.Errors />
+ * </form.Form>
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { type StandardSchemaV1Issue, useStore } from "@tanstack/vue-form"
-import { type Record, type S } from "effect-app"
-import { computed, getCurrentInstance, onBeforeMount, provide, watch } from "vue"
+import { useStore } from "@tanstack/vue-form"
 import { getOmegaStore } from "./getOmegaStore"
-import { provideOmegaErrors } from "./OmegaErrorsContext"
-import { type FilterItems, type FormProps, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff"
-import { type DefaultInputProps, type OmegaConfig, OmegaFormKey, type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
-
-type OnSubmit = NonNullable<FormProps<From, To>["onSubmit"]>
-type OnSubmitArg = Parameters<OnSubmit>[0]
-type OnSubmitEmit = (value: To, extra: Pick<OnSubmitArg, "formApi" | "meta">) => void
-type OnSubmitAwaitable = (value: To, extra: Pick<OnSubmitArg, "formApi" | "meta">) => ReturnType<OnSubmit>
-
-type OmegaWrapperProps =
-  & {
-    omegaConfig?: OmegaConfig<From>
-    subscribe?: K[]
-    showErrorsOn?: ShowErrorsOn
-  }
-  & Omit<FormProps<From, To>, "onSubmit">
-  & (
-    | {
-      form: OmegaFormReturn<From, To, Props>
-      schema?: undefined
-    }
-    | {
-      form?: undefined
-      schema: S.Schema<To, From, never>
-    }
-  )
-  & (
-    | {
-      isLoading: boolean
-      onSubmit: OnSubmitEmit
-    }
-    | {
-      isLoading?: undefined
-      onSubmit?: OnSubmitAwaitable
-    }
-  )
-
-const props = withDefaults(defineProps<OmegaWrapperProps>(), {
-  isLoading: undefined
-})
-
-const instance = getCurrentInstance()
-
-// we prefer to use the standard abstraction in Vue which separates props (going down) and event emits (going back up)
-// so if isLoading + @submit are provided, we wrap them into a Promise, so that TanStack Form can properly track the submitting state.
-// we use this approach because it means we can keep relying on the built-in beaviour of TanStack Form, and we dont have to re-implement/keep in sync/break any internals.
-const eventOnSubmit: OnSubmitAwaitable = (value, extra) =>
-  new Promise<void>((resolve) => {
-    instance!.emit("submit", value, extra)
-    // even if the emit would be immediately handled, prop changes are not published/received immediately.
-    // so we have to wait for the prop to change to true, and back to false again.
-    const handle = watch(() => props.isLoading, (v) => {
-      if (v) return
-      resolve()
-      handle.stop()
-    })
-  })
-
-// we need to keep onSubmit reactive or it can't pick up local state changes, inside forms
-// which is the whole point of having props
-const onSubmit_ = typeof props.isLoading !== "undefined"
-  ? computed(() => eventOnSubmit)
-  : typeof props.onSubmit !== "undefined"
-  ? computed(() => props.onSubmit)
-  : undefined
-
-const onSubmitHandler = onSubmit_?.value
-  ? ({ formApi, meta, value }: OnSubmitArg) => onSubmit_!.value!(value, { meta, formApi })
-  : undefined
-
-const localForm = props.form || !props.schema
-  ? undefined
-  : useOmegaForm<From, To>(
-    props.schema,
-    {
-      ...props,
-      onSubmit: onSubmitHandler
-    },
-    props.omegaConfig
-  )
-
-const formToUse = computed(() => props.form ?? localForm!)
-
-onBeforeMount(() => {
-  if (!props.form) return
-  const formOptionsKeys = Object.keys(props.form.options || {})
-
-  const excludedKeys: Set<keyof typeof props> = new Set([
-    "omegaConfig",
-    "subscribe",
-    "showErrorsOn",
-    "asyncAlways",
-    "form",
-    "schema",
-    "canSubmitWhenInvalid"
-  ])
-
-  const filteredProps = Object.fromEntries(
-    Object.entries(props).filter(
-      ([key, value]) => {
-        if (key === "isLoading") {
-          return false
-        }
-        return !excludedKeys.has(key as keyof typeof props)
-          && value !== undefined
-      }
-    )
-  ) as Record<string, unknown>
+import { type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"
+import { type DefaultInputProps, type OmegaFormReturn } from "./useOmegaForm"
 
-  const propsKeys = Object.keys(filteredProps)
-
-  const overlappingKeys = formOptionsKeys.filter(
-    (key) =>
-      propsKeys.includes(key)
-      && filteredProps[key] !== undefined
-  )
-
-  if (overlappingKeys.length > 0) {
-    console.warn(
-      `[OmegaWrapper] Overlapping keys found between form options and filtered props:\n${
-        overlappingKeys.join(
-          ", \n"
-        )
-      }.\nProps will overwrite existing form options. This might indicate a configuration issue.`
-    )
-  }
-
-  const mergedOptions = {
-    ...formToUse.value.options,
-    ...filteredProps
-  }
-  if (onSubmitHandler) mergedOptions.onSubmit = onSubmitHandler
+type OmegaWrapperProps = {
+  form: OmegaFormReturn<From, To, Props>
+  disabled?: boolean
+  subscribe?: K[]
+}
 
-  formToUse.value.options = Object.fromEntries(
-    // TODO
-    (Object.entries(mergedOptions) as any).filter(
-      ([_, value]: any) => value !== undefined
-    )
-  )
-})
+const props = defineProps<OmegaWrapperProps>()
 
 const formIsSubmitting = useStore(
-  formToUse.value.store,
+  props.form.store,
   (state) => state.isSubmitting
 )
 
 const subscribedValues = getOmegaStore(
-  formToUse.value as unknown as OmegaFormApi<From, To>,
+  props.form as unknown as OmegaFormApi<From, To>,
   props.subscribe
 )
 
-const formSubmissionAttempts = useStore(
-  formToUse.value.store,
-  (state) => state.submissionAttempts
-)
-
-const errors = computed(() => formToUse.value.useStore((state) => state.errors))
-
-watch(
-  () => [formToUse.value.filterItems, errors.value.value],
-  () => {
-    const filterItems: FilterItems | undefined = formToUse.value.filterItems
-    const currentErrors = errors.value.value
-    if (!filterItems) return {}
-    if (!currentErrors) return {}
-    const errorList = Object
-      .values(currentErrors)
-      .filter(
-        (fieldErrors): fieldErrors is Record<string, StandardSchemaV1Issue[]> => Boolean(fieldErrors)
-      )
-      .flatMap((fieldErrors) =>
-        Object
-          .values(fieldErrors)
-          .flat()
-          .map((issue: StandardSchemaV1Issue) => issue.message)
-      )
-
-    if (errorList.some((e) => e === 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.value, props.showErrorsOn)
-
 defineSlots<{
-  // Default slot (no props)
-  default(): void
-  // Named slot when form is created internally via schema
-  internalForm(props: {
-    form: OmegaFormReturn<From, To>
-    subscribedValues: typeof subscribedValues.value
-  }): void
-  // Named slot when form is passed via props (provides subscribedValues)
-  externalForm(props: { subscribedValues: typeof subscribedValues.value }): void
+  default(props: { subscribedValues: typeof subscribedValues.value }): void
 }>()
-
-provide(OmegaFormKey, formToUse.value)
 </script>
 
 <style scoped>

package/src/components/OmegaForm/index.ts

@@ -1,13 +1,7 @@
-import { default as OmegaArray } from "./OmegaArray.vue"
-import { default as OmegaAutoGen } from "./OmegaAutoGen.vue"
-import { default as OmegaErrors } from "./OmegaErrors.vue"
-import { default as OmegaFormInput } from "./OmegaFormInput.vue"
 import { default as OmegaInput } from "./OmegaInput.vue"
-import { default as OmegaForm } from "./OmegaWrapper.vue"
 
 export * as OmegaErrorsContext from "./OmegaErrorsContext"
 export * from "./OmegaFormStuff"
-export { default } from "./OmegaWrapper.vue"
 export { type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
 
-export { OmegaArray, OmegaAutoGen, OmegaErrors, OmegaForm, OmegaFormInput, OmegaInput }
+export { OmegaInput }