@effect-app/vue-components 2.0.0 → 2.1.0

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -0,0 +1,73 @@
+<script
+  setup
+  lang="ts"
+  generic="
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
+>
+import { type DeepKeys, type DeepValue } from "@tanstack/vue-form"
+import { onMounted } from "vue"
+import { type TaggedUnionOption, type TaggedUnionOptionsArray } from "./InputProps"
+import { type Leaves } from "./OmegaFormStuff"
+import OmegaTaggedUnionInternal from "./OmegaTaggedUnionInternal.vue"
+import { type useOmegaForm } from "./useOmegaForm"
+
+const props = defineProps<{
+  name: Name
+  form: ReturnType<typeof useOmegaForm<From, To>>
+  type?: "select" | "radio"
+  options: TaggedUnionOptionsArray<From, Name>
+  label?: string
+}>()
+
+// Initialize the union field on mount
+onMounted(() => {
+  const currentValue = props.form.getFieldValue(props.name)
+  const meta = props.form.meta[props.name as keyof typeof props.form.meta]
+
+  if (currentValue === undefined) {
+    if (meta?.nullableOrUndefined === "null" || !meta?.required) {
+      // Initialize to null for nullable/optional unions
+      props.form.setFieldValue(props.name, null as DeepValue<From, Name>)
+    } else {
+      // For required unions, initialize with first non-null option
+      const firstOption = props.options.find((opt) => opt.value !== null)
+      if (firstOption && firstOption.value) {
+        props.form.setFieldValue(props.name, {
+          _tag: firstOption.value
+        } as DeepValue<From, Name>)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <form.Input
+    :name="`${name}._tag` as Leaves<From, ''>"
+    :label="label"
+    :type="type ?? 'select'"
+    :options="options as unknown as TaggedUnionOption<From, Name>[]"
+  />
+  <form.Field :name="name">
+    <template #default="{ field, state }">
+      <slot v-if="state.value" />
+      <OmegaTaggedUnionInternal
+        :field="field as any"
+        :state="state.value"
+      >
+        <template
+          v-for="(_, slotname) in $slots"
+          #[slotname]="slotProps"
+        >
+          <slot
+            :name="slotname"
+            v-bind="slotProps"
+          />
+        </template>
+      </OmegaTaggedUnionInternal>
+    </template>
+  </form.Field>
+</template>

package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -0,0 +1,38 @@
+<template>
+  <slot
+    v-if="state?._tag"
+    :name="state?._tag"
+    v-bind="{ field, state }"
+  />
+</template>
+
+<script
+  setup
+  lang="ts"
+  generic="
+  From extends Record<PropertyKey, any>,
+  To extends Record<PropertyKey, any>,
+  Name extends DeepKeys<From>
+"
+>
+import { type DeepKeys, type DeepValue } from "@tanstack/vue-form"
+import { watch } from "vue"
+import { type OmegaFieldInternalApi } from "./InputProps"
+
+const props = defineProps<{
+  state: DeepValue<From, Name>
+  field: OmegaFieldInternalApi<From, Name>
+}>()
+
+// Watch for _tag changes
+watch(() => props.state?._tag, (newTag, oldTag) => {
+  if (newTag === null) {
+    props.field.setValue(null as DeepValue<From, Name>)
+  }
+  if (newTag !== oldTag) {
+    setTimeout(() => {
+      props.field.validate("change")
+    }, 0)
+  }
+})
+</script>

package/src/components/OmegaForm/index.ts

@@ -1,9 +1,11 @@
 export * from "./OmegaFormStuff"
 export { type OmegaConfig, type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
 
-export { type InputProps, type MergedInputProps } from "./InputProps"
+export { type ExtractTagValue, type ExtractUnionBranch, type InputProps, type MergedInputProps, type TaggedUnionOption, type TaggedUnionOptionsArray, type TaggedUnionProps } from "./InputProps"
 export { default as OmegaInput } from "./OmegaInput.vue"
 export { default as OmegaVuetifyInput } from "./OmegaInternalInput.vue"
+export { default as OmegaTaggedUnion } from "./OmegaTaggedUnion.vue"
+export { default as OmegaTaggedUnionInternal } from "./OmegaTaggedUnionInternal.vue"
 
 export { useOnClose, usePreventClose } from "./blockDialog"
 

package/src/components/OmegaForm/useOmegaForm.ts

@@ -13,6 +13,7 @@ import OmegaAutoGen from "./OmegaAutoGen.vue"
 import OmegaErrorsInternal from "./OmegaErrorsInternal.vue"
 import { BaseProps, DefaultTypeProps, type FormProps, generateMetaFromSchema, type MetaRecord, type NestedKeyOf, OmegaArrayProps, OmegaAutoGenMeta, OmegaError, type OmegaFormApi, OmegaFormState } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
+import OmegaTaggedUnion from "./OmegaTaggedUnion.vue"
 import OmegaForm from "./OmegaWrapper.vue"
 
 type keysRule<T> =
@@ -75,20 +76,61 @@ const eHoc = (errorProps: {
         const { fieldMap, form } = errorProps
         const generalErrors = form.useStore((state) => state.errors)
         const fieldMeta = form.useStore((state) => state.fieldMeta)
-        const errors = computed(() =>
-          Array.filterMap(
+        const errorMap = form.useStore((state) => state.errorMap)
+
+        const errors = computed(() => {
+          // Collect errors from fieldMeta (field-level errors for registered fields)
+          const fieldErrors = Array.filterMap(
             Object
               .entries(fieldMeta.value),
-            ([key, m]): Option.Option<OmegaError> =>
-              ((m as any).errors ?? []).length && fieldMap.value.get(key)?.id
-                ? Option.some({
-                  label: fieldMap.value.get(key)!.label,
-                  inputId: fieldMap.value.get(key)!.id,
-                  errors: ((m as any).errors ?? []).map((e: any) => e.message).filter(Boolean)
-                })
-                : Option.none()
+            ([key, m]): Option.Option<OmegaError> => {
+              const fieldErrors = (m as any).errors ?? []
+              if (!fieldErrors.length) return Option.none()
+
+              const fieldInfo = fieldMap.value.get(key)
+              // Only show errors for fields that are currently mounted (registered in fieldMap)
+              if (!fieldInfo) return Option.none()
+
+              return Option.some({
+                label: fieldInfo.label,
+                inputId: fieldInfo.id,
+                // Only show the first error
+                errors: [fieldErrors[0]?.message].filter(Boolean)
+              })
+            }
           )
-        )
+
+          // Collect errors from errorMap.onSubmit ONLY for fields that are NOT registered
+          // (registered fields already have their errors in fieldMeta)
+          const submitErrors: OmegaError[] = []
+          if (errorMap.value.onSubmit) {
+            for (const [_, issues] of Object.entries(errorMap.value.onSubmit)) {
+              if (Array.isArray(issues) && issues.length) {
+                for (const issue of issues) {
+                  const issAny: any = issue
+                  if (issAny?.path && Array.isArray(issAny.path) && issAny.path.length) {
+                    // Use the path from the issue to identify the field
+                    const fieldPath = issAny.path.join(".")
+                    // Only add errors for fields that are NOT registered (not in fieldMap)
+                    // Registered fields will already have their errors from fieldMeta
+                    if (!fieldMap.value.has(fieldPath)) {
+                      submitErrors.push({
+                        label: fieldPath,
+                        inputId: fieldPath,
+                        errors: [issAny.message].filter(Boolean)
+                      })
+                      // Only show first error per field, so break after adding
+                      break
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          // Combine both error sources (no need to check for duplicates since they're mutually exclusive)
+          return [...fieldErrors, ...submitErrors]
+        })
 
         return {
           generalErrors,
@@ -121,6 +163,16 @@ export type OmegaConfig<T> = {
 
   ignorePreventCloseEvents?: boolean
 
+  /**
+   * Prevents browser window/tab exit when form has unsaved changes.
+   * Shows native browser "Leave site?" dialog.
+   *
+   * @remarks
+   * - Opt-in only: Must explicitly enable
+   * - Independent from data persistence feature
+   */
+  preventWindowExit?: "prevent" | "prevent-and-reset" | "nope"
+
   input?: any
 }
 
@@ -219,6 +271,90 @@ export interface OmegaFormReturn<
   ) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>
   }
+  TaggedUnion: <Name extends DeepKeys<From>>(
+    __VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"],
+    __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>,
+    __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"],
+    __VLS_setup?: Promise<{
+      props:
+        & __VLS_PrettifyLocal<
+          & Pick<
+            & Partial<{}>
+            & Omit<
+              {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps,
+              never
+            >,
+            never
+          >
+          & {
+            name: Name
+            type?: "select" | "radio"
+            options: import("./InputProps").TaggedUnionOptionsArray<From, Name>
+            label?: string
+          }
+          & {}
+        >
+        & import("vue").PublicProps
+      expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
+      attrs: any
+      slots: Record<
+        string,
+        (props: {
+          field: import("@tanstack/vue-form").FieldApi<
+            From,
+            Name,
+            DeepValue<From, Name>,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any
+          >
+          state: import("@tanstack/vue-form").FieldState<
+            From,
+            Name,
+            DeepValue<From, Name>,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any,
+            any
+          >
+        }) => any
+      >
+      emit: {}
+    }>
+  ) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>
+  }
   Array: (
     __VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"],
     __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>,
@@ -829,17 +965,47 @@ export const useOmegaForm = <
     }
   }
 
+  const preventWindowExit = (e: BeforeUnloadEvent) => {
+    if (form.store.state.isDirty) {
+      e.preventDefault()
+    }
+  }
+
   onUnmounted(persistData)
 
   onMounted(() => {
     window.addEventListener("beforeunload", persistData)
     window.addEventListener("blur", saveDataInUrl)
+    if (omegaConfig?.preventWindowExit && omegaConfig.preventWindowExit !== "nope") {
+      window.addEventListener("beforeunload", preventWindowExit)
+    }
   })
   onBeforeUnmount(() => {
     window.removeEventListener("beforeunload", persistData)
     window.removeEventListener("blur", saveDataInUrl)
+    if (omegaConfig?.preventWindowExit && omegaConfig.preventWindowExit !== "nope") {
+      window.removeEventListener("beforeunload", preventWindowExit)
+    }
   })
 
+  // Watch for successful form submissions and auto-reset if prevent-and-reset is enabled
+  // We put it as a side effect, so we don't overwhelm submit handler and we can support
+  // effects submission more freely
+  if (omegaConfig?.preventWindowExit === "prevent-and-reset") {
+    const isSubmitting = form.useStore((state) => state.isSubmitting)
+    const submissionAttempts = form.useStore((state) => state.submissionAttempts)
+    const canSubmit = form.useStore((state) => state.canSubmit)
+    const values = form.useStore((state) => state.values)
+
+    watch([isSubmitting, submissionAttempts], ([currentlySubmitting, attempts], [wasSubmitting]) => {
+      // Detect successful submission: was submitting, now not submitting, and submission count increased
+      if (wasSubmitting && !currentlySubmitting && attempts > 0 && canSubmit.value) {
+        // Reset with current values to mark them as the new baseline
+        form.reset(values.value)
+      }
+    })
+  }
+
   const handleSubmitEffect_ = (meta?: Record<string, any>) =>
     Effect.currentSpan.pipe(
       Effect.option,
@@ -891,6 +1057,7 @@ export const useOmegaForm = <
     errorContext,
     Form: fHoc(formWithExtras)(OmegaForm as any) as any,
     Input: fHoc(formWithExtras)(omegaConfig?.input ?? OmegaInput) as any,
+    TaggedUnion: fHoc(formWithExtras)(OmegaTaggedUnion) as any,
     Field: form.Field,
     Errors: eHoc(errorContext)(OmegaErrorsInternal) as any,
     Array: fHoc(formWithExtras)(OmegaArray) as any,

package/dist/vue-components.es36.js

@@ -1,6 +0,0 @@
-(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import o from "./vue-components.es26.js";
-
-export {
-  o as default
-};

package/dist/vue-components.es39.js

@@ -1,23 +0,0 @@
-import { NoopTracer as o } from "./vue-components.es40.js";
-var s = new o(), c = (
-  /** @class */
-  (function() {
-    function r(t, e, n, a) {
-      this._provider = t, this.name = e, this.version = n, this.options = a;
-    }
-    return r.prototype.startSpan = function(t, e, n) {
-      return this._getTracer().startSpan(t, e, n);
-    }, r.prototype.startActiveSpan = function(t, e, n, a) {
-      var i = this._getTracer();
-      return Reflect.apply(i.startActiveSpan, i, arguments);
-    }, r.prototype._getTracer = function() {
-      if (this._delegate)
-        return this._delegate;
-      var t = this._provider.getDelegateTracer(this.name, this.version, this.options);
-      return t ? (this._delegate = t, this._delegate) : s;
-    }, r;
-  })()
-);
-export {
-  c as ProxyTracer
-};