@effect-app/vue-components 4.0.0-beta.31 → 4.0.0-beta.310

package/src/components/CommandButton.vue

@@ -1,9 +1,11 @@
 <script
   setup
   lang="ts"
-  generic="I = never"
+  generic="I = never, RA = unknown, RE = unknown"
 >
-import type { CommandBase } from "@effect-app/vue"
+import type { CommandBase, Progress } from "@effect-app/vue/makeClient"
+import * as Option from "effect-app/Option"
+import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed } from "vue"
 import type { VBtn } from "vuetify/components"
 
@@ -14,38 +16,89 @@ const props = defineProps<
   & (
     | {
       input: NoInfer<I>
-      command: CommandBase<I>
+      optionalInput?: undefined
+      command: CommandBase<I, any, RA, RE>
       empty?: boolean
     }
     | {
-      command: CommandBase
+      optionalInput: Option.Option<NoInfer<I>>
       input?: undefined
+      command: CommandBase<I, any, RA, RE>
+      empty?: boolean
+    }
+    | {
+      command: CommandBase<any, any, RA, RE>
+      input?: undefined
+      optionalInput?: undefined
       empty?: boolean
     }
   )
   & {
     disabled?: ButtonProps["disabled"]
     title?: string // why isn't it part of VBtnProps??
+    mapProgress?: (result: AsyncResult.AsyncResult<RA, RE>) => Progress | undefined
   }
   & ButtonProps
 >()
 
-const isDisabled = computed(() => props.command.blocked || props.disabled)
+const resolvedInput = computed<{ _tag: "ready"; value: I } | { _tag: "missing" } | { _tag: "void" }>(() => {
+  if ("optionalInput" in props && props.optionalInput !== undefined) {
+    return Option.isSome(props.optionalInput)
+      ? { _tag: "ready", value: props.optionalInput.value }
+      : { _tag: "missing" }
+  }
+  if ("input" in props && props.input !== undefined) {
+    return { _tag: "ready", value: props.input as I }
+  }
+  return { _tag: "void" }
+})
 
-const handleClick = () => {
-  // Block execution if button is disabled
-  if (isDisabled.value) {
-    return
+const isDisabled = computed(() =>
+  props.command.blocked
+  || props.disabled
+  || resolvedInput.value._tag === "missing"
+)
+
+const resolvedProgress = computed(() => {
+  if (props.mapProgress) {
+    const result = props.command.result
+    return result !== undefined ? props.mapProgress(result) : undefined
   }
+  return props.command.progress
+})
 
-  const input = ("input" in props && props.input
-    ? props.input
-    : undefined) as unknown as I
-  ;(props.command.handle as any)(input)
+const progressText = computed(() => {
+  const p = resolvedProgress.value
+  if (p === undefined) return undefined
+  return typeof p === "string" ? p : p.text
+})
+
+const progressPercentage = computed(() => {
+  const p = resolvedProgress.value
+  return typeof p === "object" && p !== null ? p.percentage : undefined
+})
+
+const handleClick = () => {
+  if (isDisabled.value) return
+  const ri = resolvedInput.value
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handle = props.command.handle as any
+  if (ri._tag === "ready") handle(ri.value)
+  else if (ri._tag === "void") handle(undefined)
+  // _tag === "missing" can't reach here — guarded by isDisabled
 }
 </script>
 <script lang="ts">
-/** Command Button is an easy way to connect commands and have it execute on click, while keeping track of disabled/loading states automatically */
+/**
+ * CommandButton connects a command to a button and tracks disabled / loading state.
+ *
+ * Input variants:
+ * - `input`: pass a validated value; button enabled when command + disabled allow it.
+ * - `optionalInput`: pass an `Option<I>`. `Some` → enabled, click fires with the value.
+ *   `None` → disabled. Use this when the input is gated by a `computed` instead of
+ *   a `v-if` on the button itself.
+ * - neither: command takes no input.
+ */
 export default {
   name: "CommandButton"
 }
@@ -55,27 +108,54 @@ export default {
     v-if="command.allowed && !empty"
     v-bind="$attrs"
     :loading="command.waiting"
+    :disabled="isDisabled"
     :aria-disabled="isDisabled"
     :title="title ?? command.action"
     :class="{ 'v-btn--disabled': isDisabled }"
     @click="handleClick"
   >
+    <template
+      v-if="progressText !== undefined"
+      #loader
+    >
+      <v-progress-circular
+        :indeterminate="progressPercentage === undefined"
+        :model-value="progressPercentage"
+        size="20"
+        width="2"
+      />
+      <span class="ml-2">{{ progressText }}</span>
+    </template>
     <slot
       :loading="command.waiting"
       :disabled="isDisabled"
       :label="command.label"
       :title="title ?? command.action"
     >
-      <span>{{ command.label }}</span>
+      {{ command.label }}
     </slot>
   </v-btn>
   <v-btn
     v-else-if="command.allowed"
     v-bind="$attrs"
     :loading="command.waiting"
+    :disabled="isDisabled"
     :aria-disabled="isDisabled"
     :title="title ?? command.action"
     :class="{ 'v-btn--disabled': isDisabled }"
     @click="handleClick"
-  />
+  >
+    <template
+      v-if="progressText !== undefined"
+      #loader
+    >
+      <v-progress-circular
+        :indeterminate="progressPercentage === undefined"
+        :model-value="progressPercentage"
+        size="20"
+        width="2"
+      />
+      <span class="ml-2">{{ progressText }}</span>
+    </template>
+  </v-btn>
 </template>

package/src/components/Dialog.vue

@@ -12,7 +12,6 @@
       />
     </template>
     <!-- pass down slots -->
-    <!-- @vue-skip -->
     <template
       v-for="(_, name) in otherSlots"
       #[name]="slotData"

package/src/components/FixedNuxtErrorBoundary.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { CauseException } from "effect-app/client"
+import * as Cause from "effect/Cause"
+import { onErrorCaptured, shallowRef } from "vue"
+import { useRouter } from "vue-router"
+
+// withDefaults, NOT `props.enabled ?? true`: Vue's boolean casting resolves an
+// ABSENT boolean prop to `false`, so the `??` fallback would never fire and an
+// omitted `enabled` (the frontend case) would silently disable the boundary.
+const props = withDefaults(
+  defineProps<{
+    captureException: (err: Error, hint?: { extra?: Record<string, unknown> }) => void
+    toastError: (message: string) => void
+    debug: boolean
+    /** register the boundary only when true (backend passes import.meta.client; frontend omits → true) */
+    enabled?: boolean
+    /** defer handling until app ready (backend: onNuxtReady while hydrating; frontend: omit → run now) */
+    scheduleAfterReady?: (fn: () => void) => void
+    /** extra side-effect after emit, before error.value is set (backend: nuxtApp vue:error hook) */
+    onHandled?: (err: Error, instance: unknown, info: string) => void
+  }>(),
+  { enabled: true }
+)
+
+defineOptions({ name: "NuxtErrorBoundary", inheritAttrs: false })
+
+const emit = defineEmits<{ error: [error: Error] }>()
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  error(props: { error: Error; clearError: () => void }): any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default(): any
+}>()
+
+const error = shallowRef<Error | null>(null)
+function clearError() {
+  error.value = null
+}
+
+// lol in production these are different...
+const supportedErrors = ["https://vuejs.org/error-reference/#runtime-0", 0, "0", "setup function"]
+
+function handleError(...args: Parameters<Parameters<typeof onErrorCaptured<Error>>[0]>) {
+  const [err, instance, info] = args
+  const fiberFailure = err instanceof CauseException ? err : null
+  // PRO: log that we hit the error boundary
+  console.warn(
+    "NuxtErrorBoundary caught error in " + info + ": " + (fiberFailure ? "CauseException" : "classic error"),
+    fiberFailure ? Cause.pretty(fiberFailure.originalCause) : err,
+    instance
+  )
+
+  // PRO: we don't handle native event handlers the same way we handle setup errors,
+  // because these errors should only get reported, not take over the page.
+  if (!supportedErrors.includes(info)) {
+    props.captureException(err, { extra: { info, instance } })
+    if (props.debug) {
+      props.toastError("An unexpected error has occurred: " + err.toString())
+    }
+    return
+  }
+
+  // PRO: don't render interruptions..
+  // e.g when we run useSuspenseQuery, and we navigate away before a query is finished, we get a CancelledError
+  // if we however render it here instead of the default slot, we will show the cancellation error of the previous page, instead of rendering the new page
+  //
+  // NOTE the engine-side contract that makes this blanket silence safe: `useSuspenseQuery(New)`
+  // converts an interrupt that settles while the component is STILL MOUNTED (a query-side interrupt,
+  // e.g. a server RPC interrupt Exit — the thing that used to blank the page) into a typed
+  // `SuspenseInterruptedError` (@effect-app/vue makeClient), whose cause is NOT interrupt-only and
+  // therefore falls through to the error slot below. What remains interrupt-only here is genuinely
+  // "navigated away / unmounted" — silencing it is correct and avoids rendering the previous page's
+  // cancellation over the new page.
+  if (fiberFailure && Cause.hasInterruptsOnly(fiberFailure.originalCause)) {
+    return
+  }
+
+  emit("error", err)
+  props.onHandled?.(err, instance, info)
+  error.value = err
+}
+
+if (props.enabled) {
+  onErrorCaptured((err, instance, info) => {
+    if (props.scheduleAfterReady) props.scheduleAfterReady(() => handleError(err, instance, info))
+    else handleError(err, instance, info)
+    return false
+  })
+}
+
+// PRO: fix error not clearing after route change: https://github.com/nuxt/nuxt/issues/15781#issuecomment-2320928163
+const router = useRouter()
+router.afterEach(() => {
+  clearError()
+})
+
+defineExpose({ error, clearError })
+</script>
+
+<template>
+  <slot
+    v-if="error"
+    v-bind="{ error, clearError }"
+    name="error"
+  />
+
+  <slot
+    v-else
+    name="default"
+  />
+</template>

package/src/components/OmegaForm/InputProps.ts

@@ -43,7 +43,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     inputClass: string | undefined | null
   }
   field: OmegaFieldInternalApi<From, TName>
-  /** be sure to use this state and not `field.state` as it is not reactive */
+  /** reactive field state, sourced from `field.state` (the Field slot's own `state` prop is a stale snapshot since @tanstack/vue-form 1.32) */
   state: OmegaFieldInternalApi<From, TName>["state"]
 }
 

package/src/components/OmegaForm/OmegaArray.vue

@@ -3,24 +3,23 @@
     :is="form.Field"
     :name="name"
   >
-    <template #default="{ field, state }">
+    <!-- `field.state` is reactive; the Field slot's `state` prop is a stale snapshot since @tanstack/vue-form 1.32 -->
+    <template #default="{ field }">
       <slot
         name="pre-array"
-        v-bind="{ field, state }"
+        v-bind="{ field, state: field.state }"
       />
       <component
         :is="form.Field"
         v-for="(_, i) of items"
         :key="`${name}[${Number(i)}]`"
-        :name="// eslint-disable-next-line
-          `${name}[${Number(i)}]` as DeepKeys<From>
-        "
+        :name="`${name}[${Number(i)}]` as DeepKeys<From>"
       >
-        <template #default="{ field: subField, state: subState }">
+        <template #default="{ field: subField }">
           <slot
             v-bind="{
               subField,
-              subState,
+              subState: subField.state,
               index: Number(i),
               field
             }"
@@ -29,7 +28,7 @@
       </component>
       <slot
         name="post-array"
-        v-bind="{ field, state }"
+        v-bind="{ field, state: field.state }"
       />
       <!-- TODO: legacy slot, remove this slot -->
       <slot
@@ -46,7 +45,7 @@
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, onMounted, provide } from "vue"
-import { type OmegaArrayProps } from "./OmegaFormStuff"
+import { type OmegaArrayProps } from "./types"
 
 const props = defineProps<OmegaArrayProps<From, To, Name>>()
 

package/src/components/OmegaForm/OmegaAutoGen.vue

@@ -20,9 +20,10 @@
   Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { Order } from "effect-app"
+import * as Order from "effect/Order"
 import { computed } from "vue"
-import { type FieldMeta, type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./OmegaFormStuff"
+import { type FieldMeta } from "./meta/types"
+import { type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./types"
 
 type NewMeta = OmegaAutoGenMeta<From, To, Name>
 

package/src/components/OmegaForm/OmegaErrorsInternal.vue

@@ -102,7 +102,7 @@
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
-import { type OmegaError } from "./OmegaFormStuff"
+import { type OmegaError } from "./types"
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VAlert"]

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -17,8 +17,8 @@
 import { type DeepKeys } from "@tanstack/vue-form"
 import { inject } from "vue"
 import type { MergedInputProps } from "./InputProps"
-import type { BaseProps, DefaultTypeProps, OmegaInputProps } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
+import type { BaseProps, DefaultTypeProps, OmegaInputProps } from "./types"
 import { OmegaFormKey } from "./useOmegaForm"
 
 const form = inject(OmegaFormKey) as unknown as OmegaInputProps<

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,19 +1,21 @@
 <template>
   <component
     :is="form.Field"
-    :key="fieldKey"
     :name="name"
-    :validators="{
-      onChange: schema,
-      ...validators
-    }"
+    :validators="validators"
   >
-    <template #default="{ field, state }">
+    <!--
+      Read `state` from `field.state`, not the Field slot's `state` prop.
+      Since @tanstack/vue-form 1.32 the slot `state` is a one-time snapshot
+      taken when the field mounts and never updates, whereas `field.state`
+      is a reactive getter backed by the field store.
+    -->
+    <template #default="{ field }">
       <OmegaInternalInput
         v-if="meta"
-        v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
-        :field="field"
-        :state="state"
+        v-bind="{ ...$attrs, ...internalInputProps, inputClass: computedClass }"
+        :field="field as any"
+        :state="field.state"
         :register="form.registerField"
         :label="label ?? errori18n(propsName)"
         :meta="meta"
@@ -40,14 +42,24 @@
   lang="ts"
   generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
+/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form Field generic interop and slot prop typing */
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, inject, type Ref, useAttrs } from "vue"
-import { useIntl } from "../../utils"
-import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff"
+import { useErrorLabel } from "./errors"
+import { type FieldMeta } from "./meta/types"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
-import { useErrorLabel } from "./useOmegaForm"
+import { type OmegaInputPropsBase } from "./types"
 
-const props = defineProps<OmegaInputPropsBase<From, To, Name>>()
+const props = withDefaults(defineProps<OmegaInputPropsBase<From, To, Name>>(), {
+  required: undefined
+})
+const internalInputProps = computed(() => ({
+  label: props.label,
+  required: props.required,
+  type: props.type,
+  options: props.options,
+  inputs: props.form.inputs
+}))
 
 // downgrade to *as* DeepKeys<From> to avoid useless and possible infinite recursion in TS
 const propsName = computed(() => props.name as DeepKeys<From>)
@@ -57,13 +69,10 @@ defineSlots<{
   default?: (props: any) => any
 }>()
 
-defineOptions({
-  inheritAttrs: false
-})
+defineOptions({ inheritAttrs: false })
 
 const attrs = useAttrs()
 
-// Compute the class to use based on inputClass prop
 const computedClass = computed(() => {
   if (props.inputClass === null) return undefined
   if (props.inputClass !== undefined) return props.inputClass
@@ -82,28 +91,5 @@ const meta = computed(() => {
   return props.form.meta[propsName.value]
 })
 
-// Key to force Field re-mount when meta type changes (for TaggedUnion support)
-const fieldKey = computed(() => {
-  const m = meta.value
-  if (!m) return propsName.value
-  // Include type and key constraints in the key so Field re-mounts when validation rules change
-  // Cast to any since not all FieldMeta variants have these properties
-  const fm = m as any
-  return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
-    fm.maximum ?? ""
-  }`
-})
-
-// Call useIntl during setup to avoid issues when computed re-evaluates
-const { trans } = useIntl()
-
-const schema = computed(() => {
-  if (!meta.value) {
-    console.log(props.name, Object.keys(props.form.meta), props.form.meta)
-    throw new Error("Meta is undefined")
-  }
-  return generateInputStandardSchemaFromFieldMeta(meta.value, trans)
-})
-
 const errori18n = useErrorLabel(props.form)
 </script>

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="omega-input"
-    @focusout="$emit('blur', $event)"
+    @focusout="(e) => {
+      $emit('blur', e)
+      field.handleBlur()
+    }"
     @focusin="$emit('focus', $event)"
   >
     <component
@@ -31,7 +34,12 @@
       v-if="inputProps.type === 'email'
       || inputProps.type === 'string'
       || inputProps.type === 'password'
-      || inputProps.type === 'date'"
+      || inputProps.type === 'date'
+      || inputProps.type === 'tel'
+      || inputProps.type === 'url'
+      || inputProps.type === 'color'
+      || inputProps.type === 'time'
+      || inputProps.type === 'search'"
       :id="inputProps.id"
       :required="inputProps.required"
       :min-length="inputProps.minLength"
@@ -43,7 +51,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="state.value"
-      @update:model-value="field.handleChange"
+      @update:model-value="(v: any) => field.handleChange(v)"
     >
       <template
         v-if="$slots.label"
@@ -67,7 +75,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="state.value"
-      @update:model-value="field.handleChange"
+      @update:model-value="(v: any) => field.handleChange(v)"
     >
       <template
         v-if="$slots.label"
@@ -120,7 +128,7 @@
         :error="inputProps.error"
         v-bind="$attrs"
         :model-value="state.value"
-        @update:model-value="field.handleChange"
+        @update:model-value="(v: any) => field.handleChange(v)"
       >
         <template
           v-if="$slots.label"
@@ -133,7 +141,7 @@
         </template>
         <v-radio
           v-for="option in inputProps.options"
-          :key="option.value"
+          :key="option.value as PropertyKey"
           :label="option.title"
           :value="option.value"
         />
@@ -195,6 +203,33 @@
         />
       </template>
     </v-autocomplete>
+
+    <!-- Fallback for any type not handled by a dedicated branch above (e.g. an
+         unrecognized schema type resolved to "unknown", or a custom `type` with
+         no renderer). Renders an editable text input instead of nothing. -->
+    <v-text-field
+      v-if="isUnhandledType"
+      :id="inputProps.id"
+      :required="inputProps.required"
+      :type="getInputType(inputProps.type)"
+      :name="field.name"
+      :label="inputProps.label"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      v-bind="$attrs"
+      :model-value="state.value"
+      @update:model-value="(v: any) => field.handleChange(v)"
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-text-field>
   </div>
 </template>
 
@@ -204,10 +239,12 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { getInputType } from "../OmegaForm/OmegaFormStuff"
+import { computed, watchEffect } from "vue"
 import type { VuetifyInputProps } from "./InputProps"
+import { getInputType } from "./inputs"
+import { typeOverrides } from "./types"
 
-defineProps<VuetifyInputProps<From, Name>>()
+const props = defineProps<VuetifyInputProps<From, Name>>()
 
 defineEmits<{
   (e: "focus", event: Event): void
@@ -217,6 +254,19 @@ defineEmits<{
 defineOptions({
   inheritAttrs: false
 })
+
+// True when no dedicated branch handles `inputProps.type` (it's outside the
+// built-in `typeOverrides`): the fallback text input renders and we warn.
+const isUnhandledType = computed(() => !(typeOverrides as readonly string[]).includes(props.inputProps.type))
+
+watchEffect(() => {
+  if (isUnhandledType.value) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[OmegaForm] Unhandled input type "${props.inputProps.type}", falling back to a text input.`
+    )
+  }
+})
 </script>
 
 <style>