@effect-app/vue-components 4.0.0-beta.282 → 4.0.0-beta.284

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,8 +1,9 @@
 <template>
   <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field, state: inputProps.state }">
     <div :class="rootClass">
-      <OmegaInputVuetify
-        v-if="vuetified"
+      <component
+        :is="renderComponent"
+        v-if="renderComponent"
         v-bind="{ ...attrsWithoutClass, ...inputProps, class: props.inputClass }"
       >
         <template
@@ -14,7 +15,7 @@
             v-bind="labelProps"
           />
         </template>
-      </OmegaInputVuetify>
+      </component>
     </div>
   </slot>
 </template>
@@ -26,11 +27,11 @@
 >
 /* 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 Component, computed, type ComputedRef, getCurrentInstance, useAttrs, useId, useSlots } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { MetaRecord, NestedKeyOf } from "./meta/types"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
-import type { FieldValidators, TypeOverride } from "./types"
+import type { TypeOverride } from "./types"
 
 defineOptions({
   inheritAttrs: false
@@ -43,7 +44,6 @@ const props = withDefaults(
     meta: MetaRecord<From>[NestedKeyOf<From>]
     label: string
     type?: TypeOverride
-    validators?: FieldValidators<From>
     required?: boolean
     inputClass?: string | null
 
@@ -56,14 +56,16 @@ const props = withDefaults(
     ) => void
 
     // TODO: these should really be optional, depending on the input type (and the custom input type for custom inputs :s)
-    options?: { title: string; value: string }[]
+    options?: { title: string; value: unknown }[]
+
+    inputs?: Record<string, Component>
   }>(),
   {
     required: undefined,
     type: undefined,
     options: undefined,
-    validators: undefined,
-    inputClass: undefined
+    inputClass: undefined,
+    inputs: undefined
   }
 )
 
@@ -101,6 +103,11 @@ const fieldType = computed(() => {
   return props.meta?.type || "unknown"
 })
 
+const renderComponent = computed(() =>
+  props.inputs?.[fieldType.value]
+    ?? (vuetified ? OmegaInputVuetify : undefined)
+)
+
 props.register(computed(() => ({ name: props.field.name, label: props.label, id })))
 
 // Get errors from form-level fieldMeta instead of field-level state

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -3,20 +3,19 @@ import type { DeepKeys } from "@tanstack/vue-form"
 import { type Component, h } from "vue"
 import type { MergedInputProps } from "./InputProps"
 import OmegaInput from "./OmegaInput.vue"
-import { type DefaultTypeProps } from "./types"
+import type { OmegaConfig } from "./types"
 import { useOmegaForm } from "./useOmegaForm"
 
-export const createUseFormWithCustomInput = <
-  TypeProps = DefaultTypeProps
->(CustomInputComponent: Component) => {
+export const createUseFormWithCustomInput = (CustomInputComponent: Component) => {
   return <
     From extends Record<PropertyKey, any>,
-    To extends Record<PropertyKey, any>
+    To extends Record<PropertyKey, any>,
+    const Cfg extends OmegaConfig<To> = OmegaConfig<To>
   >(
-    ...args: Parameters<typeof useOmegaForm<From, To>>
+    schema: Parameters<typeof useOmegaForm<From, To>>[0],
+    tanstackFormOptions?: Parameters<typeof useOmegaForm<From, To>>[1],
+    omegaConfig?: Cfg
   ) => {
-    const [schema, tanstackFormOptions, omegaConfig] = args
-
     // Create a wrapper that extends OmegaInput and overrides its default slot
     const WrappedInput = {
       name: "WrappedInput",
@@ -36,7 +35,10 @@ export const createUseFormWithCustomInput = <
                   && key !== "form"
                 )
               )
-              return h(CustomInputComponent, { ...filteredAttrs, field, state, inputProps }, {
+              // A per-type registration (omegaConfig.inputs) wins over the
+              // universal CustomInputComponent; otherwise fall back to it.
+              const LeafComponent = omegaConfig?.inputs?.[inputProps.type] ?? CustomInputComponent
+              return h(LeafComponent, { ...filteredAttrs, field, state, inputProps }, {
                 // Pass through label slot if it exists
                 ...(slots.label && {
                   label: (labelProps: any) => slots.label(labelProps)
@@ -55,13 +57,12 @@ export const createUseFormWithCustomInput = <
       }
     }
 
-    const form = useOmegaForm<From, To, TypeProps>(
+    // Thread `Cfg` so `omegaConfig.inputs` keys are inferred into the `type`
+    // union (`<form.Input type="...">`), exactly like a bare `useOmegaForm`.
+    const form = useOmegaForm<From, To, Cfg>(
       schema,
       tanstackFormOptions,
-      {
-        ...omegaConfig,
-        input: WrappedInput
-      }
+      { ...omegaConfig, input: WrappedInput } as Cfg
     )
 
     return form

package/src/components/OmegaForm/index.ts

@@ -14,6 +14,7 @@ export { FormErrors, OmegaFormKey, useErrorLabel, useOmegaForm } from "./useOmeg
 export type { defaultValuesPriorityUnion, OF, OmegaConfig, OmegaFormReturn, Policies } from "./useOmegaForm"
 
 export { type ExtractTagValue, type ExtractUnionBranch, type InputProps, type MergedInputProps, type TaggedUnionOption, type TaggedUnionOptionsArray, type TaggedUnionProps } from "./InputProps"
+export type { VuetifyInputProps, VuetifyInputProps as OmegaRendererProps } from "./InputProps"
 export { default as OmegaInput } from "./OmegaInput.vue"
 export { default as OmegaVuetifyInput } from "./OmegaInternalInput.vue"
 export { default as OmegaTaggedUnion } from "./OmegaTaggedUnion.vue"

package/src/components/OmegaForm/types.ts

@@ -6,7 +6,7 @@ import type { UnionToTuples } from "effect-app/utils"
 import type { Fiber as EffectFiber } from "effect/Fiber"
 import type * as Order from "effect/Order"
 import type { Redacted } from "effect/Redacted"
-import type { AllowedComponentProps, ComponentCustomProps, ComputedRef, PublicProps, ShallowUnwrapRef, VNode, VNodeProps } from "vue"
+import type { AllowedComponentProps, Component, ComponentCustomProps, ComputedRef, PublicProps, ShallowUnwrapRef, VNode, VNodeProps } from "vue"
 import type { MergedInputProps, OmegaFieldInternalApi, TaggedUnionOptionsArray } from "./InputProps"
 import type { MetaRecord, NestedKeyOf } from "./meta/types"
 import type { defaultValuesPriorityUnion as PersistencyPriority, Policies as PersistencyPolicies } from "./persistency"
@@ -36,6 +36,11 @@ export type BaseProps<From, TName extends FieldPath<From>> = {
    */
   label?: string
   validators?: FieldValidators<From>
+  /**
+   * Overrides the schema-derived `meta.required`.
+   * When omitted, requiredness is inferred from the schema.
+   */
+  required?: boolean
   // Use FlexibleArrayPath: if name contains [], just use TName; otherwise intersect with Leaves<From>
   name: TName
   /**
@@ -61,16 +66,33 @@ export type DefaultTypeProps = {
   }[]
 }
 
+/** Registered `omegaConfig.inputs` keys as valid `type` values; `never` when nothing is registered. */
+export type CustomTypeProps<TInputs> =
+  // `string extends keyof` collapses the wide `Record<string, Component>` fallback
+  // (no `inputs` registered) so `type` can't widen to any string.
+  string extends keyof TInputs ? never
+    : keyof TInputs extends never ? never
+    : {
+      type: keyof TInputs & string
+      options?: { title: string; value: unknown }[]
+    }
+
+/** `form.Input` `type`/`options`: built-ins plus types registered via `omegaConfig.inputs`. */
+export type TypePropsFor<TInputs> = DefaultTypeProps | CustomTypeProps<TInputs>
+
 export type OmegaInputPropsBase<
   From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
   Name extends DeepKeys<From>
-> = {
-  form: OF<From, To> & {
-    meta: MetaRecord<From>
-    i18nNamespace?: string
+> =
+  & {
+    form: OF<From, To> & {
+      meta: MetaRecord<From>
+      i18nNamespace?: string
+    }
   }
-} & BaseProps<From, Name>
+  & BaseProps<From, Name>
+  & DefaultTypeProps
 
 export type OmegaInputProps<
   From extends Record<PropertyKey, any>,
@@ -100,21 +122,33 @@ export type OmegaArrayProps<
     items?: "please use `defaultItems` instead"
   }
 
-export type TypeOverride =
-  | "string"
-  | "text"
-  | "number"
-  | "select"
-  | "multiple"
-  | "boolean"
-  | "radio"
-  | "autocomplete"
-  | "autocompletemultiple"
-  | "switch"
-  | "range"
-  | "password"
-  | "email"
-  | "date"
+// Single source of truth for the built-in input types: the runtime array drives
+// both the `TypeOverride` union and the renderer's "is this type handled?" check,
+// so the two cannot drift apart.
+export const typeOverrides = [
+  "string",
+  "text",
+  "number",
+  "select",
+  "multiple",
+  "boolean",
+  "radio",
+  "autocomplete",
+  "autocompletemultiple",
+  "switch",
+  "range",
+  "password",
+  "email",
+  "date",
+  // native HTML input types that `getInputType` already maps 1:1
+  "tel",
+  "url",
+  "color",
+  "time",
+  "search"
+] as const
+
+export type TypeOverride = typeof typeOverrides[number]
 
 export interface OmegaError {
   label: string
@@ -280,6 +314,13 @@ export type OmegaConfig<T> = {
 
   input?: any
 
+  /**
+   * Register a custom input component per `type` (new types or overrides). Each
+   * key becomes a valid `<form.Input type="...">` value; components receive the
+   * `OmegaRendererProps` contract (`{ inputProps, field, state }`).
+   */
+  inputs?: Record<string, Component>
+
   /**
    * Default values order is: Tanstack default values passed as second parameter to useOmegaForm, then persistency
    * default values from querystring or local/session storage, then defaults from schema
@@ -294,6 +335,7 @@ export type OmegaConfig<T> = {
 export interface OF<From, To> extends OmegaFormApi<From, To> {
   meta: MetaRecord<From>
   unionMeta: Record<string, MetaRecord<From>>
+  inputs?: Record<string, Component>
   clear: () => void
   /**
    * Backfills the untouched children of any materialised nullable struct with

package/src/components/OmegaForm/useOmegaForm.ts

@@ -18,7 +18,7 @@ import OmegaTaggedUnion from "./OmegaTaggedUnion.vue"
 import OmegaForm from "./OmegaWrapper.vue"
 import { usePersistency } from "./persistency"
 import { makeSubmitHandlers, wrapOnSubmit } from "./submit"
-import type { DefaultTypeProps, FormProps, OF, OmegaConfig, OmegaFormApi, OmegaFormReturn } from "./types"
+import type { FormProps, OF, OmegaConfig, OmegaFormApi, OmegaFormReturn, TypePropsFor } from "./types"
 import { annotateLiteralUnionMessages, toLocalizedStandardSchemaV1 } from "./validation/localized"
 
 import { makeRunPromise } from "@effect-app/vue/runtime"
@@ -37,12 +37,12 @@ export const useOmegaForm = <
   From extends Record<PropertyKey, any>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   To extends Record<PropertyKey, any>,
-  TypeProps = DefaultTypeProps
+  const Cfg extends OmegaConfig<To> = OmegaConfig<To>
 >(
   schema: S.Codec<To, From>,
   tanstackFormOptions?: NoInfer<FormProps<From, To>>,
-  omegaConfig?: OmegaConfig<To>
-): OmegaFormReturn<From, To, TypeProps> => {
+  omegaConfig?: Cfg
+): OmegaFormReturn<From, To, TypePropsFor<Cfg extends { inputs?: infer I } ? I : {}>> => {
   if (!schema) throw new Error("Schema is required")
   const { trans } = useIntl()
   const formCompatibleSchema = toFormSchema(schema)
@@ -61,7 +61,7 @@ export const useOmegaForm = <
   const normalizeFormValue = (value: unknown) => fillNestedDefaults(formAst, value)
 
   const baseStandardSchema = toLocalizedStandardSchemaV1(
-    localizedSchema as any,
+    localizedSchema,
     trans
   )
   const standardSchema: typeof baseStandardSchema = {
@@ -110,7 +110,7 @@ export const useOmegaForm = <
     validationLogic: revalidateLogic(),
     validators: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      onDynamic: standardSchema as any,
+      onDynamic: standardSchema,
       ...tanstackFormOptions?.validators
     },
     onSubmit: wrapOnSubmit<From, To>(tanstackFormOptions?.onSubmit, decode, runPromise),
@@ -170,6 +170,7 @@ export const useOmegaForm = <
   const formWithExtras: OF<From, To> = Object.assign(form, {
     i18nNamespace: omegaConfig?.i18nNamespace,
     ignorePreventCloseEvents: omegaConfig?.ignorePreventCloseEvents,
+    inputs: omegaConfig?.inputs,
     meta,
     unionMeta,
     clear,

package/dist/vue-components32.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-components30.es.js";
-
-//#region src/components/OmegaForm/OmegaInputVuetify.vue
-var t = e;
-//#endregion
-export { t as default };

package/dist/vue-components44.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-components28.es.js";
-import t from "./vue-components42.es.js";
-
-//#region src/components/OmegaForm/OmegaWrapper.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-13a7a1b6"]]);
-//#endregion
-export { n as default };