@effect-app/vue-components 4.0.0-beta.20 → 4.0.0-beta.201

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.20",
+  "version": "4.0.0-beta.201",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
-    "effect": "^4.0.0-beta.31",
-    "intl-messageformat": "^11.1.2",
+    "effect": "^4.0.0-beta.60",
+    "intl-messageformat": "^11.2.3",
     "mdi-js": "^1.0.1",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
-    "primevue": "^4.5.4",
-    "vue": "^3.5.29",
-    "vuetify": "^4.0.1"
+    "primevue": "^4.5.5",
+    "vue": "^3.5.33",
+    "vuetify": "^4.0.6"
   },
   "devDependencies": {
-    "@storybook/vue3": "^10.2.15",
-    "@storybook/vue3-vite": "^10.2.15",
-    "@types/node": "^25.3.3",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^14.2.1",
-    "dprint": "^0.52.0",
-    "jsdom": "^28.1.0",
+    "@storybook/vue3": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.10",
+    "@vueuse/core": "^14.3.0",
+    "jsdom": "^29.1.1",
     "rimraf": "^6.1.3",
-    "sass": "^1.97.3",
-    "storybook": "^10.2.15",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.6",
+    "storybook-vue3-router": "^7.0.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
     "vitepress": "^1.6.4",
-    "vitest": "^4.0.18",
-    "vue-router": "^5.0.3",
+    "vitest": "^4.1.5",
+    "vue-router": "^5.0.6",
     "vue-toastification": "^2.0.0-rc.5",
-    "vue-tsc": "^3.2.5",
-    "vuetify": "^4.0.1",
-    "@effect-app/eslint-shared-config": "0.5.7-beta.2"
+    "vue-tsc": "^3.2.7",
+    "vuetify": "^4.0.6",
+    "@effect-app/eslint-shared-config": "0.6.0-beta.23"
   },
   "files": [
     "src",
@@ -45,28 +45,32 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/vue-components.es.js"
     },
-    "./dist/vue-components.css": "./dist/vue-components.css"
+    "./dist/vue-components.css": "./dist/vue-components.css",
+    "./reset.css": {
+      "development": "./src/reset.css",
+      "default": "./dist/reset.css"
+    }
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.9.0",
+    "@opentelemetry/api": "^1.9.1",
     "@tanstack/vue-form": "^1.23.5",
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "4.0.0-beta.20",
-    "effect-app": "4.0.0-beta.20"
+    "@effect-app/vue": "4.0.0-beta.201",
+    "effect-app": "4.0.0-beta.201"
   },
   "scripts": {
     "check": "vue-tsc",
     "build": "pnpm build:run",
-    "build:run": "rimraf dist && vue-tsc && vite build",
+    "build:run": "rimraf dist && vue-tsc && vite build && cp src/reset.css dist/reset.css",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
-    "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src stories .storybook",
+    "lint": "oxlint --quiet --type-aware src stories && NODE_OPTIONS=--max-old-space-size=8192 ESLINT_TS=1 eslint --quiet src stories .storybook && pnpm exec dprint check --config ../../dprint.jsonc .",
     "ncu": "ncu",
     "clean": "rm -rf dist",
-    "lint-fix": "pnpm lint --fix",
+    "lint-fix": "oxlint --quiet --type-aware --fix src stories && NODE_OPTIONS=--max-old-space-size=8192 ESLINT_TS=1 eslint --quiet --fix src stories .storybook && pnpm exec dprint fmt --config ../../dprint.jsonc .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",

package/src/components/CommandButton.vue

@@ -1,9 +1,10 @@
 <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"
+import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed } from "vue"
 import type { VBtn } from "vuetify/components"
 
@@ -14,11 +15,11 @@ const props = defineProps<
   & (
     | {
       input: NoInfer<I>
-      command: CommandBase<I>
+      command: CommandBase<I, any, RA, RE>
       empty?: boolean
     }
     | {
-      command: CommandBase
+      command: CommandBase<any, any, RA, RE>
       input?: undefined
       empty?: boolean
     }
@@ -26,12 +27,32 @@ const props = defineProps<
   & {
     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 resolvedProgress = computed(() => {
+  if (props.mapProgress) {
+    const result = props.command.result
+    return result !== undefined ? props.mapProgress(result) : undefined
+  }
+  return props.command.progress
+})
+
+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 = () => {
   // Block execution if button is disabled
   if (isDisabled.value) {
@@ -41,7 +62,9 @@ const handleClick = () => {
   const input = ("input" in props && props.input
     ? props.input
     : undefined) as unknown as I
-  ;(props.command.handle as any)(input)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- command.handle has a generic signature mismatched by erased input type
+  const handle = props.command.handle as any
+  handle(input)
 }
 </script>
 <script lang="ts">
@@ -60,13 +83,25 @@ export default {
     :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
@@ -77,5 +112,18 @@ export default {
     :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/OmegaForm/OmegaArray.vue

@@ -12,9 +12,7 @@
         :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 }">
           <slot
@@ -46,7 +44,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

@@ -22,7 +22,8 @@
 import { type DeepKeys } from "@tanstack/vue-form"
 import { Order } from "effect-app"
 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,18 +1,14 @@
 <template>
   <component
     :is="form.Field"
-    :key="fieldKey"
     :name="name"
-    :validators="{
-      onChange: schema,
-      ...validators
-    }"
+    :validators="validators"
   >
     <template #default="{ field, state }">
       <OmegaInternalInput
         v-if="meta"
         v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
-        :field="field"
+        :field="field as any"
         :state="state"
         :register="form.registerField"
         :label="label ?? errori18n(propsName)"
@@ -40,12 +36,13 @@
   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>>()
 
@@ -57,13 +54,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 +76,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
@@ -204,8 +207,8 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { getInputType } from "../OmegaForm/OmegaFormStuff"
 import type { VuetifyInputProps } from "./InputProps"
+import { getInputType } from "./inputs"
 
 defineProps<VuetifyInputProps<From, Name>>()
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -24,11 +24,13 @@
   lang="ts"
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
+/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form / Vue attrs interop */
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
 import { computed, type ComputedRef, getCurrentInstance, useAttrs, useId, useSlots } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
-import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
+import type { MetaRecord, NestedKeyOf } from "./meta/types"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
+import type { FieldValidators, TypeOverride } from "./types"
 
 defineOptions({
   inheritAttrs: false
@@ -84,7 +86,8 @@ const id = useId()
 
 const fieldApi = props.field
 
-const fieldState = useStore(fieldApi.store, (state) => state)
+// Subscribed for side-effect: keeps component reactive to fieldApi.store changes
+const _fieldState = useStore(fieldApi.store, (state) => state)
 
 // Get errors from form-level fieldMeta (persists across Field re-mounts)
 const formFieldMeta = useStore(fieldApi.form.store, (state) => state.fieldMeta)
@@ -128,6 +131,13 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           : null as any
       )
+    } else if (props.meta?.isOptionalKey) {
+      // `S.optionalKey` expects the key to be ABSENT from the submitted
+      // object, not present-with-undefined. Remove it from form state
+      // rather than setting it to `undefined`. Note: this is distinct
+      // from `required: false`, which may also just mean "empty string
+      // is valid" for unconstrained `S.String` fields.
+      props.field.form.deleteField(props.field.name)
     } else {
       // Keep the actual value (e.g., empty string for S.String fields)
       props.field.handleChange(value)
@@ -135,10 +145,6 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
   } else {
     props.field.handleChange(value)
   }
-
-  // whenever we change the field, regardless if we set it to null, we should reset onSubmit.
-  // not sure why this is not the case in tanstack form.
-  props.field.setMeta((m) => ({ ...m, errorMap: { ...m.errorMap, onSubmit: undefined } }))
 }
 
 // Note: Default value normalization (converting empty strings to null/undefined for nullable fields)
@@ -165,11 +171,13 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     minLength: props.meta?.type === "string" && props.meta?.minLength,
     maxLength: props.meta?.type === "string" && props.meta?.maxLength,
     max: (props.meta?.type === "number")
-      && (props.meta?.maximum
-        ?? (typeof props.meta?.exclusiveMaximum === "number" && props.meta.exclusiveMaximum - 1)),
+      ? (props.meta?.maximum
+        ?? (typeof props.meta?.exclusiveMaximum === "number" ? props.meta.exclusiveMaximum - 1 : undefined))
+      : undefined,
     min: (props.meta?.type === "number")
-      && (props.meta?.minimum
-        ?? (typeof props.meta?.exclusiveMinimum === "number" && props.meta.exclusiveMinimum + 1)),
+      ? (props.meta?.minimum
+        ?? (typeof props.meta?.exclusiveMinimum === "number" ? props.meta.exclusiveMinimum + 1 : undefined))
+      : undefined,
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -8,8 +8,8 @@
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, provide, ref, watch } from "vue"
 import { type TaggedUnionOption } from "./InputProps"
-import { type FieldPath } from "./OmegaFormStuff"
 import OmegaTaggedUnionInternal from "./OmegaTaggedUnionInternal.vue"
+import { type FieldPath } from "./types"
 import { type useOmegaForm } from "./useOmegaForm"
 
 const props = defineProps<{
@@ -30,6 +30,7 @@ watch(
   () => {
     const path = tagPath.value
     // Navigate to the nested value
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- traversing arbitrary nested values
     return path.split(".").reduce((acc: any, key) => acc?.[key], formValues.value) as string | null
   },
   (newTag) => {

package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -34,7 +34,7 @@ watch(() => props.state, (newTag, oldTag) => {
   if (newTag !== oldTag) {
     props.form.reset(values.value)
     setTimeout(() => {
-      props.field.validate("change")
+      void props.field.validate("change")
     }, 0)
   }
 }, { immediate: true })

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -30,7 +30,7 @@
 import { useStore } from "@tanstack/vue-form"
 import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
-import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"
+import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./types"
 import { type OmegaFormReturn } from "./useOmegaForm"
 
 type OmegaWrapperProps = {

package/src/components/OmegaForm/blockDialog.ts

@@ -1,5 +1,6 @@
 import mitt from "mitt"
 import { inject, type InjectionKey, provide, type Ref } from "vue"
+import { useIntl } from "../../utils"
 import { onMountedWithCleanup } from "./onMountedWithCleanup"
 
 export type DialogClosing = { prevent?: boolean | Promise<boolean> }
@@ -19,11 +20,19 @@ export const usePreventClose = (mkIsDirty: () => Ref<boolean>) => {
   if (!bus) {
     return
   }
+  const { formatMessage, trans } = useIntl()
   const isDirty = mkIsDirty()
+  const defaultMessage = "There are unsaved changes. Are you sure you want to close?"
   onMountedWithCleanup(() => {
     const onDialogClosing = (evt: DialogClosing) => {
       if (isDirty.value) {
-        if (!confirm("Es sind ungespeicherte Änderungen vorhanden. Wirklich schließen?")) {
+        // Mirror the guard pattern in errors.ts: a custom `useIntl` mock may
+        // only provide `trans`, so fall back through trans → defaultMessage.
+        const message = formatMessage
+          ? formatMessage({ id: "form.unsaved_changes_confirm", defaultMessage })
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- key may not be registered in the locale catalog
+          : trans?.("form.unsaved_changes_confirm" as any) ?? defaultMessage
+        if (!confirm(message)) {
           evt.prevent = true
         }
       }
@@ -46,11 +55,14 @@ export const useOnClose = (close: () => void) => {
     bus.emit("dialog-closing", evt)
     if (evt.prevent) {
       if (typeof evt.prevent === "object" && "then" in evt.prevent) {
-        evt.prevent.then((r) => {
-          if (r !== false) {
-            close()
-          }
-        })
+        evt
+          .prevent
+          .then((r) => {
+            if (r) {
+              close()
+            }
+          })
+          .catch(console.error)
       }
     } else {
       close()

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -1,8 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form / Vue render-fn slot interop */
 import type { DeepKeys } from "@tanstack/vue-form"
 import { type Component, h } from "vue"
 import type { MergedInputProps } from "./InputProps"
-import { type DefaultTypeProps } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
+import { type DefaultTypeProps } from "./types"
 import { useOmegaForm } from "./useOmegaForm"
 
 export const createUseFormWithCustomInput = <