@effect-app/vue-components 4.0.0-beta.314 → 4.0.0-beta.315

package/dist/types/components/OmegaForm/InputProps.d.ts

@@ -9,6 +9,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;

package/dist/types/components/OmegaForm/OmegaInputVuetify.vue.d.ts

@@ -57,6 +57,12 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
             id: string;
             label: string;
         }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
     };
     emit: {
         (e: "focus", event: Event): void;

package/dist/types/components/OmegaForm/OmegaInternalInput.vue.d.ts

@@ -37,6 +37,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
             maxLength?: number | false;
             max?: number | false;
             min?: number | false;
+            refinement?: "int";
             errorMessages: string[];
             error: boolean;
             label: string;

package/dist/vue-components21.es.js

@@ -31,20 +31,30 @@ var t = (e) => {
 			}
 			case "isGreaterThanOrEqualTo": return r(a.minimum === 0 ? "validation.number.positive" : "validation.number.min", {
 				minimum: a.minimum,
-				isExclusive: !0
+				isExclusive: !1
 			});
 			case "isGreaterThan": return r(a.exclusiveMinimum === 0 ? "validation.number.positive" : "validation.number.min", {
 				minimum: a.exclusiveMinimum,
-				isExclusive: !1
+				isExclusive: !0
 			});
 			case "isLessThanOrEqualTo": return r("validation.number.max", {
 				maximum: a.maximum,
-				isExclusive: !0
+				isExclusive: !1
 			});
 			case "isLessThan": return r("validation.number.max", {
 				maximum: a.exclusiveMaximum,
-				isExclusive: !1
+				isExclusive: !0
 			});
+			case "isBetween": {
+				let e = n(i);
+				return typeof e == "number" && e < a.minimum ? r("validation.number.min", {
+					minimum: a.minimum,
+					isExclusive: !1
+				}) : r("validation.number.max", {
+					maximum: a.maximum,
+					isExclusive: !1
+				});
+			}
 			default: return e.SchemaIssue.defaultCheckHook(i);
 		}
 	}

package/dist/vue-components33.es.js

@@ -16,13 +16,13 @@ var b = /*@__PURE__*/ c({
 		return v(() => {
 			x.value && console.warn(`[OmegaForm] Unhandled input type "${b.inputProps.type}", falling back to a text input.`);
 		}), (t, r) => {
-			let v = h("v-text-field"), b = h("v-textarea"), S = h("v-radio"), C = h("v-radio-group"), w = h("v-select"), T = h("v-autocomplete");
+			let v = h("v-text-field"), b = h("v-textarea"), S = h("v-number-input"), C = h("v-slider"), w = h("v-radio"), T = h("v-radio-group"), E = h("v-select"), D = h("v-autocomplete");
 			return f(), o("div", {
 				class: "omega-input",
-				onFocusout: r[8] ||= (e) => {
+				onFocusout: r[9] ||= (e) => {
 					t.$emit("blur", e), c.field.handleBlur();
 				},
-				onFocusin: r[9] ||= (e) => t.$emit("focus", e)
+				onFocusin: r[10] ||= (e) => t.$emit("focus", e)
 			}, [
 				c.inputProps.type === "boolean" || c.inputProps.type === "switch" ? (f(), i(g(c.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), u({
 					key: 0,
@@ -117,20 +117,57 @@ var b = /*@__PURE__*/ c({
 					"error",
 					"model-value"
 				])) : a("", !0),
-				c.inputProps.type === "number" || c.inputProps.type === "range" ? (f(), i(g(c.inputProps.type === "range" ? "v-slider" : "v-text-field"), u({
+				c.inputProps.type === "number" ? (f(), i(S, u({
 					key: 3,
 					id: c.inputProps.id,
 					required: c.inputProps.required,
-					min: c.inputProps.min,
-					max: c.inputProps.max,
-					type: c.inputProps.type,
+					role: "spinbutton",
+					"aria-valuemin": typeof c.inputProps.min == "number" ? c.inputProps.min : void 0,
+					"aria-valuemax": typeof c.inputProps.max == "number" ? c.inputProps.max : void 0,
+					"aria-valuenow": typeof c.state.value == "number" ? c.state.value : void 0,
+					name: c.field.name,
+					label: c.inputProps.label,
+					"error-messages": c.inputProps.errorMessages,
+					error: c.inputProps.error,
+					precision: c.inputProps.refinement === "int" ? 0 : null,
+					"control-variant": "stacked"
+				}, t.$attrs, {
+					"model-value": c.state.value,
+					"onUpdate:modelValue": r[3] ||= (e) => c.field.handleChange(e ?? void 0)
+				}), s({ _: 2 }, [t.$slots.label ? {
+					name: "label",
+					fn: y(() => [m(t.$slots, "label", d(l({
+						required: c.inputProps.required,
+						id: c.inputProps.id,
+						label: c.inputProps.label
+					})))]),
+					key: "0"
+				} : void 0]), 1040, [
+					"id",
+					"required",
+					"aria-valuemin",
+					"aria-valuemax",
+					"aria-valuenow",
+					"name",
+					"label",
+					"error-messages",
+					"error",
+					"precision",
+					"model-value"
+				])) : a("", !0),
+				c.inputProps.type === "range" ? (f(), i(C, u({
+					key: 4,
+					id: c.inputProps.id,
+					required: c.inputProps.required,
+					min: typeof c.inputProps.min == "number" ? c.inputProps.min : void 0,
+					max: typeof c.inputProps.max == "number" ? c.inputProps.max : void 0,
 					name: c.field.name,
 					label: c.inputProps.label,
 					"error-messages": c.inputProps.errorMessages,
 					error: c.inputProps.error
 				}, t.$attrs, {
 					"model-value": c.state.value,
-					"onUpdate:modelValue": r[3] ||= (e) => {
+					"onUpdate:modelValue": r[4] ||= (e) => {
 						e || e === 0 ? c.field.handleChange(Number(e)) : c.field.handleChange(void 0);
 					}
 				}), s({ _: 2 }, [t.$slots.label ? {
@@ -146,15 +183,14 @@ var b = /*@__PURE__*/ c({
 					"required",
 					"min",
 					"max",
-					"type",
 					"name",
 					"label",
 					"error-messages",
 					"error",
 					"model-value"
 				])) : a("", !0),
-				c.inputProps.type === "radio" ? (f(), i(C, u({
-					key: 4,
+				c.inputProps.type === "radio" ? (f(), i(T, u({
+					key: 5,
 					id: c.inputProps.id,
 					name: c.field.name,
 					label: c.inputProps.label,
@@ -162,9 +198,9 @@ var b = /*@__PURE__*/ c({
 					error: c.inputProps.error
 				}, t.$attrs, {
 					"model-value": c.state.value,
-					"onUpdate:modelValue": r[4] ||= (e) => c.field.handleChange(e)
+					"onUpdate:modelValue": r[5] ||= (e) => c.field.handleChange(e)
 				}), s({
-					default: y(() => [(f(!0), o(n, null, p(c.inputProps.options, (e) => (f(), i(S, {
+					default: y(() => [(f(!0), o(n, null, p(c.inputProps.options, (e) => (f(), i(w, {
 						key: e.value,
 						label: e.title,
 						value: e.value
@@ -186,8 +222,8 @@ var b = /*@__PURE__*/ c({
 					"error",
 					"model-value"
 				])) : a("", !0),
-				c.inputProps.type === "select" || c.inputProps.type === "multiple" ? (f(), i(w, u({
-					key: 5,
+				c.inputProps.type === "select" || c.inputProps.type === "multiple" ? (f(), i(E, u({
+					key: 6,
 					id: c.inputProps.id,
 					clearable: c.inputProps.type === "select",
 					required: c.inputProps.required,
@@ -200,7 +236,7 @@ var b = /*@__PURE__*/ c({
 					error: c.inputProps.error
 				}, t.$attrs, {
 					"model-value": c.state.value,
-					onClear: r[5] ||= (e) => c.field.handleChange(void 0),
+					onClear: r[6] ||= (e) => c.field.handleChange(void 0),
 					"onUpdate:modelValue": c.field.handleChange
 				}), s({ _: 2 }, [t.$slots.label ? {
 					name: "label",
@@ -224,8 +260,8 @@ var b = /*@__PURE__*/ c({
 					"model-value",
 					"onUpdate:modelValue"
 				])) : a("", !0),
-				c.inputProps.type === "autocomplete" || c.inputProps.type === "autocompletemultiple" ? (f(), i(T, u({
-					key: 6,
+				c.inputProps.type === "autocomplete" || c.inputProps.type === "autocompletemultiple" ? (f(), i(D, u({
+					key: 7,
 					id: c.inputProps.id,
 					clearable: c.inputProps.type === "autocomplete",
 					multiple: c.inputProps.type === "autocompletemultiple",
@@ -238,7 +274,7 @@ var b = /*@__PURE__*/ c({
 					chips: c.inputProps.type === "autocompletemultiple"
 				}, t.$attrs, {
 					"model-value": c.state.value,
-					onClear: r[6] ||= (e) => c.field.handleChange(void 0),
+					onClear: r[7] ||= (e) => c.field.handleChange(void 0),
 					"onUpdate:modelValue": c.field.handleChange
 				}), s({ _: 2 }, [t.$slots.label ? {
 					name: "label",
@@ -263,7 +299,7 @@ var b = /*@__PURE__*/ c({
 					"onUpdate:modelValue"
 				])) : a("", !0),
 				x.value ? (f(), i(v, u({
-					key: 7,
+					key: 8,
 					id: c.inputProps.id,
 					required: c.inputProps.required,
 					type: _(e)(c.inputProps.type),
@@ -273,7 +309,7 @@ var b = /*@__PURE__*/ c({
 					error: c.inputProps.error
 				}, t.$attrs, {
 					"model-value": c.state.value,
-					"onUpdate:modelValue": r[7] ||= (e) => c.field.handleChange(e)
+					"onUpdate:modelValue": r[8] ||= (e) => c.field.handleChange(e)
 				}), s({ _: 2 }, [t.$slots.label ? {
 					name: "label",
 					fn: y(() => [m(t.$slots, "label", d(l({

package/dist/vue-components36.es.js

@@ -44,6 +44,7 @@ var b = /*@__PURE__*/ o({
 				maxLength: b.meta?.type === "string" && b.meta?.maxLength,
 				max: b.meta?.type === "number" ? b.meta?.maximum ?? (typeof b.meta?.exclusiveMaximum == "number" ? b.meta.exclusiveMaximum - 1 : void 0) : void 0,
 				min: b.meta?.type === "number" ? b.meta?.minimum ?? (typeof b.meta?.exclusiveMinimum == "number" ? b.meta.exclusiveMinimum + 1 : void 0) : void 0,
+				refinement: b.meta?.type === "number" ? b.meta?.refinement : void 0,
 				errorMessages: N.value,
 				error: !!N.value.length,
 				type: A.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.314",
+  "version": "4.0.0-beta.315",
   "repository": {
     "type": "git",
     "url": "https://github.com/effect-app/libs.git",
@@ -62,8 +62,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "4.0.0-beta.314",
-    "effect-app": "4.0.0-beta.314"
+    "@effect-app/vue": "4.0.0-beta.315",
+    "effect-app": "4.0.0-beta.315"
   },
   "scripts": {
     "check": "vue-tsc",

package/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

package/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"

package/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,

package/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)