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

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -87,20 +87,54 @@
         />
       </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. Same reasoning for precision: Vuetify's default (0)
+         would silently block decimals, so it's forced to null and typing 1.5 into
+         an int field shows the schema error instead. -->
+    <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="null"
+      control-variant="stacked"
       v-bind="$attrs"
-      :model-value="state.value"
+      :model-value="state.value as any"
+      @beforeinput.capture="onNumberBeforeinput"
+      @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 +152,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"
@@ -239,7 +273,9 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { computed, watchEffect } from "vue"
+import { computed, useAttrs, watchEffect } from "vue"
+import { useLocale } from "vuetify"
+import { handleDecimalSeparatorBeforeinput } from "./decimalSeparatorInput"
 import type { VuetifyInputProps } from "./InputProps"
 import { getInputType } from "./inputs"
 import { typeOverrides } from "./types"
@@ -255,6 +291,26 @@ defineOptions({
   inheritAttrs: false
 })
 
+const attrs = useAttrs()
+// useLocale throws outside a Vuetify app (e.g. tests mounting with stubbed
+// vuetify components); numbers then fall back to the "." separator.
+const localeDecimalSeparator = (() => {
+  try {
+    return useLocale().decimalSeparator
+  } catch {
+    return undefined
+  }
+})()
+
+// Mirrors VNumberInput's own resolution: an explicit decimal-separator attr
+// wins, otherwise the locale decides.
+const decimalSeparator = computed(() => {
+  const explicit = (attrs["decimal-separator"] ?? attrs["decimalSeparator"]) as string | undefined
+  return explicit?.[0] || localeDecimalSeparator?.value || "."
+})
+
+const onNumberBeforeinput = (e: Event) => handleDecimalSeparatorBeforeinput(e as InputEvent, decimalSeparator.value)
+
 // 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))

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/decimalSeparatorInput.ts

@@ -0,0 +1,38 @@
+const escapeForRegex = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+
+/**
+ * VNumberInput only accepts the active decimal separator and silently drops
+ * the other one while typing. Attached in capture phase on the component
+ * root, this handler lets users type either "." or ",": the wrong character
+ * is translated to the active separator before Vuetify's own beforeinput
+ * filter can reject it.
+ *
+ * No validation beyond Vuetify's own single-separator typing rule: OmegaForm
+ * deliberately lets out-of-schema values through so schema errors show,
+ * instead of silently blocking input (same reasoning as min/max not being
+ * passed as props).
+ */
+export const handleDecimalSeparatorBeforeinput = (e: InputEvent, separator: string) => {
+  if (!e.data) return
+  // The active separator may be any single char (locale or explicit prop,
+  // e.g. "٫"); everything from [".", ","] that isn't it gets translated.
+  const wrongs = [".", ","].filter((c) => c !== separator)
+  if (!wrongs.some((c) => e.data!.includes(c))) return
+
+  const input = e.target as HTMLInputElement
+  e.preventDefault()
+  e.stopPropagation()
+
+  const data = wrongs.reduce((acc, c) => acc.replaceAll(c, separator), e.data)
+  const start = input.selectionStart ?? input.value.length
+  const end = input.selectionEnd ?? input.value.length
+  const next = input.value.slice(0, start) + data + input.value.slice(end)
+  // Mirrors Vuetify's own typing filter: at most one separator, "-" only at
+  // the start. A second separator would only produce an unparseable string.
+  if (!new RegExp(`^-?\\d*${escapeForRegex(separator)}?\\d*$`).test(next)) return
+
+  input.value = next
+  const cursor = start + data.length
+  input.setSelectionRange(cursor, cursor)
+  input.dispatchEvent(new Event("input", { bubbles: true }))
+}

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)

package/dist/vue-components35.es.js

@@ -1,8 +0,0 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);if(e.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){grid-template-rows:1fr;min-height:0;transition:all .2s;display:grid;overflow:hidden}.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;appearance:none;width:auto;box-shadow:none;min-width:auto;height:auto;padding:.5em .5em .5em 1em;display:block}`)),document.head.appendChild(e),window.customElements){let e=window.customElements.define;window.customElements.define=function(t,n){let r=n.prototype.connectedCallback;return n.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){let e=document.createElement(`style`);e.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){grid-template-rows:1fr;min-height:0;transition:all .2s;display:grid;overflow:hidden}.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;appearance:none;width:auto;box-shadow:none;min-width:auto;height:auto;padding:.5em .5em .5em 1em;display:block}`)),this.shadowRoot.appendChild(e)}},e.call(window.customElements,t,n)}}}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);if(e.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){grid-template-rows:1fr;min-height:0;transition:all .2s;display:grid;overflow:hidden}.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;appearance:none;width:auto;box-shadow:none;min-width:auto;height:auto;padding:.5em .5em .5em 1em;display:block}`)),document.head.appendChild(e),window.customElements){let e=window.customElements.define;window.customElements.define=function(t,n){let r=n.prototype.connectedCallback;return n.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){let e=document.createElement(`style`);e.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){grid-template-rows:1fr;min-height:0;transition:all .2s;display:grid;overflow:hidden}.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;appearance:none;width:auto;box-shadow:none;min-width:auto;height:auto;padding:.5em .5em .5em 1em;display:block}`)),this.shadowRoot.appendChild(e)}},e.call(window.customElements,t,n)}}}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-import e from "./vue-components33.es.js";
-
-//#region src/components/OmegaForm/OmegaInputVuetify.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/vue-components47.es.js

@@ -1,9 +0,0 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);if(e.appendChild(document.createTextNode(`fieldset[data-v-13a7a1b6]{display:contents}fieldset[disabled][data-v-13a7a1b6]>*{pointer-events:none}`)),document.head.appendChild(e),window.customElements){let e=window.customElements.define;window.customElements.define=function(t,n){let r=n.prototype.connectedCallback;return n.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){let e=document.createElement(`style`);e.appendChild(document.createTextNode(`fieldset[data-v-13a7a1b6]{display:contents}fieldset[disabled][data-v-13a7a1b6]>*{pointer-events:none}`)),this.shadowRoot.appendChild(e)}},e.call(window.customElements,t,n)}}}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);if(e.appendChild(document.createTextNode(`fieldset[data-v-13a7a1b6]{display:contents}fieldset[disabled][data-v-13a7a1b6]>*{pointer-events:none}`)),document.head.appendChild(e),window.customElements){let e=window.customElements.define;window.customElements.define=function(t,n){let r=n.prototype.connectedCallback;return n.prototype.connectedCallback=function(){if(r&&r.call(this),this.shadowRoot){let e=document.createElement(`style`);e.appendChild(document.createTextNode(`fieldset[data-v-13a7a1b6]{display:contents}fieldset[disabled][data-v-13a7a1b6]>*{pointer-events:none}`)),this.shadowRoot.appendChild(e)}},e.call(window.customElements,t,n)}}}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
-import e from "./vue-components30.es.js";
-import t from "./vue-components45.es.js";
-
-//#region src/components/OmegaForm/OmegaWrapper.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-13a7a1b6"]]);
-//#endregion
-export { n as default };