@effect-app/vue-components 0.15.23 → 0.15.25

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -61,15 +61,13 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="
-        (e: any) => {
-          if (e || e === 0) {
-              inputProps.field.handleChange(Number(e) as any)
-          } else {
-            inputProps.field.handleChange(undefined as any)
-          }
+      @update:model-value="(e: any) => {
+        if (e || e === 0) {
+          inputProps.field.handleChange(Number(e) as any)
+        } else {
+          inputProps.field.handleChange(undefined as any)
         }
-      "
+      }"
     />
     <v-select
       v-if="inputProps.type === 'select' || inputProps.type === 'multiple'"
@@ -90,10 +88,8 @@
     />
 
     <v-autocomplete
-      v-if="
-        inputProps.type === 'autocomplete' ||
-        inputProps.type === 'autocompletemultiple'
-      "
+      v-if="inputProps.type === 'autocomplete'
+      || inputProps.type === 'autocompletemultiple'"
       :id="inputProps.id"
       :clearable="inputProps.type === 'autocomplete'"
       :multiple="inputProps.type === 'autocompletemultiple'"
@@ -112,8 +108,15 @@
   </div>
 </template>
 
-<script setup lang="ts" generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>">
-import { DeepKeys } from "@tanstack/vue-form";
+<script
+  setup
+  lang="ts"
+  generic="
+  From extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
+>
+import { type DeepKeys } from "@tanstack/vue-form"
 import type { InputProps } from "./InputProps"
 
 defineProps<{
@@ -127,7 +130,7 @@ defineEmits<{
 }>()
 
 defineOptions({
-  inheritAttrs: false,
+  inheritAttrs: false
 })
 </script>
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,6 +1,9 @@
 <template>
   <slot v-bind="inputProps">
-    <div :class="$attrs.class" @focusout="setRealDirty">
+    <div
+      :class="$attrs.class"
+      @focusout="setRealDirty"
+    >
       <OmegaInputVuetify
         v-if="vuetified"
         :input-props="inputProps"
@@ -11,31 +14,23 @@
   </slot>
 </template>
 
-<script setup lang="ts" generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>">
-import { DeepKeys, useStore } from "@tanstack/vue-form"
-import {
-  useId,
-  computed,
-  watch,
-  onMounted,
-  ref,
-  watchEffect,
-  type ComputedRef,
-  getCurrentInstance,
-  nextTick,
-} from "vue"
-import type {
-  FieldValidators,
-  MetaRecord,
-  NestedKeyOf,
-  TypeOverride,
-} from "./OmegaFormStuff"
+<script
+  setup
+  lang="ts"
+  generic="
+  From extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
+>
+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 { OmegaFieldInternalApi, InputProps } from "./InputProps"
+import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
 
 defineOptions({
-  inheritAttrs: false,
+  inheritAttrs: false
 })
 
 const props = defineProps<{
@@ -54,7 +49,7 @@ const id = useId()
 
 const fieldApi = props.field
 
-const fieldState = useStore(fieldApi.store, state => state)
+const fieldState = useStore(fieldApi.store, (state) => state)
 
 const fieldType = computed(() => {
   if (props.type) return props.type
@@ -68,7 +63,7 @@ const fieldType = computed(() => {
 const fieldValue = computed(() => fieldState.value.value)
 const errors = computed(() =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fieldState.value.meta.errors.map((e: any) => e?.message).filter(Boolean),
+  fieldState.value.meta.errors.map((e: any) => e?.message).filter(Boolean)
 )
 
 const isFalsyButNotZero = (value: unknown): boolean => {
@@ -76,25 +71,27 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 }
 
 // we remove value and errors when the field is empty and not required
-//watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
+// watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
 watch(
   () => !!fieldValue.value,
   () => {
     if (isFalsyButNotZero(fieldValue.value) && props.meta?.type !== "boolean") {
       nextTick(() => {
         fieldApi.setValue(
-          props.meta?.nullableOrUndefined === "undefined" ? undefined : null as any,
+          props.meta?.nullableOrUndefined === "undefined"
+            ? undefined
+            : null as any
         )
       })
     }
-  },
+  }
 )
 
 onMounted(() => {
   if (
-    !fieldValue.value &&
-    !props.meta?.required &&
-    props.meta?.nullableOrUndefined === "null"
+    !fieldValue.value
+    && !props.meta?.required
+    && props.meta?.nullableOrUndefined === "null"
   ) {
     fieldApi.setValue(null as any)
   }
@@ -131,16 +128,19 @@ watch(
     if (fieldState.value.meta.errors.length) {
       addError({
         inputId: id,
-        errors: fieldState.value.meta.errors
+        errors: fieldState
+          .value
+          .meta
+          .errors
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           .map((e: any) => e.message)
           .filter(Boolean),
-        label: props.label,
+        label: props.label
       })
     } else {
       removeError(id)
     }
-  },
+  }
 )
 
 const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
@@ -158,6 +158,6 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
   setRealDirty,
   type: fieldType.value,
   label: `${props.label}${props.meta?.required ? " *" : ""}`,
-  options: props.options,
+  options: props.options
 }))
 </script>

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -1,9 +1,15 @@
 <template>
-  <form novalidate @submit.prevent.stop="formToUse.handleSubmit()">
+  <form
+    novalidate
+    @submit.prevent.stop="formToUse.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
+          name="externalForm"
+          :subscribed-values="subscribedValues"
+        />
         <slot />
         <!-- default slot -->
       </template>
@@ -22,10 +28,11 @@
   setup
   lang="ts"
   generic="
-    From extends Record<PropertyKey, any>,
-    To extends Record<PropertyKey, any>,
-    K extends keyof OmegaFormState<From, To> = keyof OmegaFormState<From, To>
-  "
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+  K extends keyof OmegaFormState<From, To> =
+    keyof OmegaFormState<From, To>
+"
 >
 /**
  * Form component that wraps TanStack Form's useForm hook
@@ -58,40 +65,31 @@
  * </Form>
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useStore, type StandardSchemaV1Issue } from "@tanstack/vue-form"
+import { type StandardSchemaV1Issue, useStore } from "@tanstack/vue-form"
 import { type S } from "effect-app"
-import {
-  type FormProps,
-  type FilterItems,
-  type OmegaFormApi,
-  type OmegaFormState,
-  type ShowErrorsOn,
-} from "./OmegaFormStuff"
+import { computed, onBeforeMount, watch } from "vue"
 import { getOmegaStore } from "./getOmegaStore"
 import { provideOmegaErrors } from "./OmegaErrorsContext"
-import {
-  type OmegaConfig,
-  type OmegaFormReturn,
-  useOmegaForm,
-} from "./useOmegaForm"
-import { computed, watch, onBeforeMount } from "vue"
+import { type FilterItems, type FormProps, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff"
+import { type OmegaConfig, type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
 
 const props = defineProps<
-  {
+  & {
     omegaConfig?: OmegaConfig<From>
     subscribe?: K[]
     showErrorsOn?: ShowErrorsOn
-  } & FormProps<From, To> &
-    (
-      | {
-          form: OmegaFormReturn<From, To>
-          schema?: undefined
-        }
-      | {
-          form?: undefined
-          schema: S.Schema<To, From, never>
-        }
-    )
+  }
+  & FormProps<From, To>
+  & (
+    | {
+      form: OmegaFormReturn<From, To>
+      schema?: undefined
+    }
+    | {
+      form?: undefined
+      schema: S.Schema<To, From, never>
+    }
+  )
 >()
 
 const localForm = computed(() => {
@@ -113,61 +111,63 @@ onBeforeMount(() => {
     "showErrorsOn",
     "asyncAlways",
     "form",
-    "schema",
+    "schema"
   ])
 
   const filteredProps = Object.fromEntries(
     Object.entries(props).filter(
       ([key, value]) =>
-        !excludedKeys.has(key as keyof typeof props) && value !== undefined,
-    ),
+        !excludedKeys.has(key as keyof typeof props) && value !== undefined
+    )
   ) as Partial<typeof props>
 
   const propsKeys = Object.keys(filteredProps)
 
   const overlappingKeys = formOptionsKeys.filter(
-    key =>
-      propsKeys.includes(key) &&
-      filteredProps[key as keyof typeof props] !== undefined,
+    (key) =>
+      propsKeys.includes(key)
+      && filteredProps[key as keyof typeof props] !== 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.`,
+      `[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,
+    ...filteredProps
   }
 
   formToUse.value.options = Object.fromEntries(
     // TODO
     (Object.entries(mergedOptions) as any).filter(
-      ([_, value]: any) => value !== undefined,
-    ),
+      ([_, value]: any) => value !== undefined
+    )
   )
 })
 
 const formIsSubmitting = useStore(
   formToUse.value.store,
-  state => state.isSubmitting,
+  (state) => state.isSubmitting
 )
 
 const subscribedValues = getOmegaStore(
   formToUse.value as unknown as OmegaFormApi<From, To>,
-  props.subscribe,
+  props.subscribe
 )
 
 const formSubmissionAttempts = useStore(
   formToUse.value.store,
-  state => state.submissionAttempts,
+  (state) => state.submissionAttempts
 )
 
-const errors = computed(() => formToUse.value.useStore(state => state.errors))
+const errors = computed(() => formToUse.value.useStore((state) => state.errors))
 
 watch(
   () => [formToUse.value.filterItems, errors.value.value],
@@ -176,18 +176,20 @@ watch(
     const currentErrors = errors.value.value
     if (!filterItems) return {}
     if (!currentErrors) return {}
-    const errorList = Object.values(currentErrors)
+    const errorList = Object
+      .values(currentErrors)
       .filter(
         (fieldErrors): fieldErrors is Record<string, StandardSchemaV1Issue[]> =>
-          Boolean(fieldErrors),
+          Boolean(fieldErrors)
       )
-      .flatMap(fieldErrors =>
-        Object.values(fieldErrors)
+      .flatMap((fieldErrors) =>
+        Object
+          .values(fieldErrors)
           .flat()
-          .map((issue: StandardSchemaV1Issue) => issue.message),
+          .map((issue: StandardSchemaV1Issue) => issue.message)
       )
 
-    if (errorList.some(e => e === filterItems.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)
@@ -196,15 +198,15 @@ watch(
             ...m,
             errorMap: {
               onSubmit: [
-                { path: [item as string], message: filterItems.message },
-              ],
-            },
+                { path: [item as string], message: filterItems.message }
+              ]
+            }
           })
         }
       })
     }
     return {}
-  },
+  }
 )
 
 provideOmegaErrors(formSubmissionAttempts, errors.value, props.showErrorsOn)

package/src/components/OmegaForm/getOmegaStore.ts

@@ -1,24 +1,23 @@
 import { useStore } from "@tanstack/vue-form"
-import { type Ref, computed } from "vue"
-import type { OmegaFormState, OmegaFormApi } from "./OmegaFormStuff"
+import { computed, type Ref } from "vue"
+import type { OmegaFormApi, OmegaFormState } from "./OmegaFormStuff"
 
 export function getOmegaStore<
   To,
   From,
-  K extends keyof OmegaFormState<To, From> = keyof OmegaFormState<To, From>,
+  K extends keyof OmegaFormState<To, From> = keyof OmegaFormState<To, From>
 >(
   form: OmegaFormApi<To, From>,
-  subscribe?: K[],
+  subscribe?: K[]
 ): Ref<
-  K[] extends undefined[]
-    ? Record<string, never>
+  K[] extends undefined[] ? Record<string, never>
     : Pick<OmegaFormState<To, From>, K>
 > {
   return computed(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     if (!subscribe) return {} as any
 
-    const state = useStore(form.store, state => {
+    const state = useStore(form.store, (state) => {
       const result = {} as Pick<OmegaFormState<To, From>, K>
       for (const key of subscribe) {
         result[key] = state[key]

package/src/components/OmegaForm/index.ts

@@ -1,13 +1,13 @@
-import { default as OmegaForm } from "./OmegaWrapper.vue"
-import { default as OmegaInput } from "./OmegaInput.vue"
-import { default as OmegaFormInput } from "./OmegaFormInput.vue"
-import { default as OmegaErrors } from "./OmegaErrors.vue"
-import { default as OmegaAutoGen } from "./OmegaAutoGen.vue"
 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 { useOmegaForm, type OmegaFormReturn } from "./useOmegaForm"
 export { default } from "./OmegaWrapper.vue"
+export { type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
 
-export { OmegaForm, OmegaInput, OmegaFormInput, OmegaErrors, OmegaAutoGen, OmegaArray }
+export { OmegaArray, OmegaAutoGen, OmegaErrors, OmegaForm, OmegaFormInput, OmegaInput }