feat(vue): OmegaForm number fields on Vuetify 4 v-number-input

.changeset/omegaform-between-localization.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": patch
+---
+
+Localize `S.isBetween` validation failures: the violated side now maps to the `validation.number.min` / `validation.number.max` messages instead of falling back to the English default formatter. Also fixes the inverted `isExclusive` flag on the min/max messages for `isGreaterThan[OrEqualTo]` / `isLessThan[OrEqualTo]` (inclusive checks now say "at least/at most", strict ones "greater/less than").

.changeset/omegaform-vnumber-input.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": minor
+---
+
+OmegaForm number fields now render Vuetify 4's `v-number-input` instead of `v-text-field type="number"` (`range` keeps its `v-slider`). Precision is schema-driven (`S.Int` → 0, plain numbers → free decimals), controls default to the stacked variant, and any `VNumberInput` prop (`precision`, `step`, `control-variant`, `decimal-separator`, ...) can be overridden per field via attrs. Schema `min`/`max` are exposed to assistive tech as spinbutton ARIA bounds but are deliberately not passed as component props, so out-of-range values keep reaching schema validation and show its localized error instead of being silently clamped.

.nvmrc

@@ -1 +1 @@
-v22.12
+v22.23

packages/vue-components/src/components/OmegaForm/InputProps.ts

@@ -36,6 +36,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     maxLength?: number | false
     max?: number | false
     min?: number | false
+    refinement?: "int"
     errorMessages: string[]
     error: boolean
     label: string

packages/vue-components/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -87,20 +87,51 @@
         />
       </template>
     </v-textarea>
-    <component
-      :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
-      v-if="inputProps.type === 'number' || inputProps.type === 'range'"
+    <!-- min/max are deliberately NOT passed as VNumberInput props: the component
+         silently withholds out-of-range values from the model (so schema errors
+         would never show) and clamps on blur. Validation stays schema-driven; the
+         bounds are exposed to AT via the spinbutton ARIA attrs, which fall through
+         to the native input. -->
+    <v-number-input
+      v-if="inputProps.type === 'number'"
       :id="inputProps.id"
       :required="inputProps.required"
-      :min="inputProps.min"
-      :max="inputProps.max"
-      :type="inputProps.type"
+      role="spinbutton"
+      :aria-valuemin="typeof inputProps.min === 'number' ? inputProps.min : undefined"
+      :aria-valuemax="typeof inputProps.max === 'number' ? inputProps.max : undefined"
+      :aria-valuenow="typeof state.value === 'number' ? state.value : undefined"
       :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
+      :precision="inputProps.refinement === 'int' ? 0 : null"
+      control-variant="stacked"
       v-bind="$attrs"
-      :model-value="state.value"
+      :model-value="state.value as any"
+      @update:model-value="(v: number | null) => field.handleChange((v ?? undefined) as any)"
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-number-input>
+    <v-slider
+      v-if="inputProps.type === 'range'"
+      :id="inputProps.id"
+      :required="inputProps.required"
+      :min="typeof inputProps.min === 'number' ? inputProps.min : undefined"
+      :max="typeof inputProps.max === 'number' ? inputProps.max : undefined"
+      :name="field.name"
+      :label="inputProps.label"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      v-bind="$attrs"
+      :model-value="state.value as any"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
           field.handleChange(Number(e) as any)
@@ -118,7 +149,7 @@
           v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
         />
       </template>
-    </component>
+    </v-slider>
     <template v-if="inputProps.type === 'radio'">
       <v-radio-group
         :id="inputProps.id"

packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue

@@ -191,6 +191,7 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
       ? (props.meta?.minimum
         ?? (typeof props.meta?.exclusiveMinimum === "number" ? props.meta.exclusiveMinimum + 1 : undefined))
       : undefined,
+    refinement: props.meta?.type === "number" ? props.meta?.refinement : undefined,
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,

packages/vue-components/src/components/OmegaForm/validation/localized.ts

@@ -13,6 +13,7 @@ type FilterMeta =
   | { readonly _tag: "isGreaterThan"; readonly exclusiveMinimum: number }
   | { readonly _tag: "isLessThanOrEqualTo"; readonly maximum: number }
   | { readonly _tag: "isLessThan"; readonly exclusiveMaximum: number }
+  | { readonly _tag: "isBetween"; readonly minimum: number; readonly maximum: number }
   | { readonly _tag?: undefined }
 
 /** Map filter annotations (representation since beta.107, legacy meta before) to FilterMeta. */
@@ -85,20 +86,30 @@ export const makeStandardSchemaV1Hooks = (
         const actual = input !== undefined ? String(input) : "NaN"
         return trans("validation.integer.expected", { actualValue: actual })
       }
+      // isExclusive semantics in the message catalog: true = strict bound
+      // ("greater/less than"), false = inclusive bound ("at least/at most").
       case "isGreaterThanOrEqualTo":
         return trans(
           meta.minimum === 0 ? "validation.number.positive" : "validation.number.min",
-          { minimum: meta.minimum, isExclusive: true }
+          { minimum: meta.minimum, isExclusive: false }
         )
       case "isGreaterThan":
         return trans(
           meta.exclusiveMinimum === 0 ? "validation.number.positive" : "validation.number.min",
-          { minimum: meta.exclusiveMinimum, isExclusive: false }
+          { minimum: meta.exclusiveMinimum, isExclusive: true }
         )
       case "isLessThanOrEqualTo":
-        return trans("validation.number.max", { maximum: meta.maximum, isExclusive: true })
+        return trans("validation.number.max", { maximum: meta.maximum, isExclusive: false })
       case "isLessThan":
-        return trans("validation.number.max", { maximum: meta.exclusiveMaximum, isExclusive: false })
+        return trans("validation.number.max", { maximum: meta.exclusiveMaximum, isExclusive: true })
+      case "isBetween": {
+        // Inclusive on both ends; report the side the value actually violated.
+        const input = reportedInput(issue)
+        const below = typeof input === "number" && input < meta.minimum
+        return below
+          ? trans("validation.number.min", { minimum: meta.minimum, isExclusive: false })
+          : trans("validation.number.max", { maximum: meta.maximum, isExclusive: false })
+      }
       default:
         // Fall back to the default check hook so custom S.makeFilter messages
         // (which surface as InvalidValue.annotations.message on issue.issue)

packages/vue-components/stories/OmegaForm.stories.ts

@@ -26,6 +26,7 @@ import MetaFormComponent from "./OmegaForm/Meta.vue"
 import NullComponent from "./OmegaForm/Null.vue"
 import NullableComponent from "./OmegaForm/Nullable.vue"
 import NullableNestedStructComponent from "./OmegaForm/NullableNestedStruct.vue"
+import NumberInputComponent from "./OmegaForm/NumberInput.vue"
 import OmitConstructorDefaultsComponent from "./OmegaForm/OmitConstructorDefaults.vue"
 import OptionalKeyComponent from "./OmegaForm/OptionalKey.vue"
 import PersistencyFormComponent from "./OmegaForm/PersistencyForm.vue"
@@ -156,6 +157,13 @@ export const NullableNestedStruct: Story = {
   })
 }
 
+export const NumberInput: Story = {
+  render: () => ({
+    components: { NumberInputComponent },
+    template: "<NumberInputComponent />"
+  })
+}
+
 export const CreateUseFormWIthCustomInput: Story = {
   render: () => ({
     components: { CreateUseFormWithCustomInputComponent },

packages/vue-components/stories/OmegaForm/NumberInput.vue

@@ -0,0 +1,66 @@
+<template>
+  <form.Form :subscribe="['values']">
+    <template #default="{ subscribedValues: { values } }">
+      <pre>{{ values }}</pre>
+
+      <!-- S.Int with min/max from the schema: precision 0 is automatic (no decimal
+           separator); out-of-range values (e.g. 21) show the schema validation error,
+           the bounds are exposed to assistive tech via aria-valuemin/valuemax -->
+      <form.Input
+        name="quantity"
+        label="Quantity (1-20)"
+      />
+
+      <!-- S.Number: free decimals (precision null is automatic), clearing sets undefined -->
+      <form.Input
+        name="price"
+        label="Price (optional, decimals)"
+      />
+
+      <!-- extra VNumberInput props pass through attrs and win over OmegaForm's
+           defaults: OmegaForm renders stacked controls, here overridden back to
+           Vuetify's "default" split buttons, with a custom step -->
+      <form.Input
+        name="steps"
+        label="Steps of 5, default controls"
+        :step="5"
+        control-variant="default"
+      />
+
+      <!-- decimal separator follows the Vuetify locale (this Storybook is "en", so "." elsewhere);
+           it can be forced per field, here comma: typing "." is rejected, "," starts the decimals -->
+      <form.Input
+        name="commaPrice"
+        label="Comma price (decimal-separator ,)"
+        decimal-separator=","
+      />
+
+      <v-btn type="submit">
+        submit
+      </v-btn>
+      <form.Errors />
+    </template>
+  </form.Form>
+</template>
+
+<script setup lang="ts">
+import * as S from "effect-app/Schema"
+import { useOmegaForm } from "../../src/components/OmegaForm"
+
+const form = useOmegaForm(
+  S.Struct({
+    quantity: S.Int.pipe(S.check(S.isBetween({ minimum: 1, maximum: 20 }))),
+    price: S.optionalKey(S.Number),
+    steps: S.optionalKey(S.Int),
+    commaPrice: S.optionalKey(S.Number)
+  }),
+  {
+    defaultValues: {
+      price: 12.34
+    },
+    onSubmit: async ({ value }) => {
+      console.log("Form submitted:", value)
+    }
+  }
+)
+</script>