@effect-app/vue-components 2.2.0 → 2.3.0

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

@@ -2,7 +2,7 @@ import { type DeepKeys } from "@tanstack/vue-form";
 import type { MergedInputProps } from "./InputProps";
 import type { BaseProps, DefaultTypeProps } from "./OmegaFormStuff";
 declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<BaseProps<From, Name> & DefaultTypeProps> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<BaseProps<From> & DefaultTypeProps> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {

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

@@ -3,15 +3,18 @@ import { type DeepKeys, type DeepValue, type FieldAsyncValidateOrFn, type FieldV
 import { type RuntimeFiber } from "effect/Fiber";
 import { type OmegaFieldInternalApi } from "./InputProps";
 import { type OF, type OmegaFormReturn } from "./useOmegaForm";
-export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {} : {
+export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[${number}]`> & {} : {
     [K in keyof T]: T[K] extends string | boolean | number | null | undefined | symbol | bigint ? `${Path extends "" ? "" : `${Path}.`}${K & string}` : Leaves<T[K], `${Path extends "" ? "" : `${Path}.`}${K & string}`> & {};
 }[keyof T];
-export type FlexibleArrayPath<T extends string> = T extends `${string}[${string}]${string}` ? T : never;
-export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
-    /** Will fallback to i18n when not specified */
+export type BaseProps<From> = {
+    /**
+     * Will fallback to i18n when not specified.
+     * Can also be provided via #label slot for custom HTML labels.
+     * When using the slot, it receives bindings: { required, id, label }
+     */
     label?: string;
     validators?: FieldValidators<From>;
-    name: FlexibleArrayPath<TName> extends never ? Leaves<From> : TName;
+    name: Leaves<From>;
     /**
      * Optional class to apply to the input element.
      * - If a string is provided, it will be used instead of the general class
@@ -36,13 +39,13 @@ export type OmegaInputPropsBase<From extends Record<PropertyKey, any>, To extend
         meta: MetaRecord<From>;
         i18nNamespace?: string;
     };
-} & BaseProps<From, NestedKeyOf<From>>;
+} & BaseProps<From>;
 export type OmegaInputProps<From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, TypeProps = DefaultTypeProps> = {
     form: OmegaFormReturn<From, To, TypeProps> & {
         meta: MetaRecord<From>;
         i18nNamespace?: string;
     };
-} & BaseProps<From, NestedKeyOf<From>>;
+} & BaseProps<From>;
 export type OmegaArrayProps<From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>> = Omit<OmegaInputProps<From, To>, "validators" | "options" | "label" | "type" | "items" | "name"> & {
     name: DeepKeys<From>;
     defaultItems?: DeepValue<From, DeepKeys<From>>;

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

@@ -4,21 +4,12 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends R
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        default?: (props: {
-            field: import("./InputProps").OmegaFieldInternalApi<From, any>;
-            state: import("@tanstack/vue-form").FieldState<From, any, import("@tanstack/vue-form").DeepValue<From, any>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, any>, unknown> | import("@tanstack/vue-form").FieldValidateFn<From, any>, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, any>, unknown> | import("@tanstack/vue-form").FieldValidateAsyncFn<From, any>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>>, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, any, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
-            id: string;
+        label?: (props: {
             required?: boolean;
-            minLength?: number | false;
-            maxLength?: number | false;
-            max?: number | false;
-            min?: number | false;
-            errorMessages: string[];
-            error: boolean;
+            id: string;
             label: string;
-            type: string;
-            inputClass: string | undefined | null;
         }) => any;
+        default?: (props: any) => any;
     };
     emit: {};
 }>) => import("vue").VNode & {

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

@@ -7,7 +7,49 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
     }> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
+    };
     emit: {
         (e: "focus", event: Event): void;
         (e: "blur", event: Event): void;

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

@@ -40,6 +40,12 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
             type: string;
             inputClass: string | undefined | null;
         }) => any;
+    } & {
+        label?: (props: {
+            required: boolean | undefined;
+            id: string;
+            label: string;
+        }) => any;
     };
     emit: {};
 }>) => import("vue").VNode & {

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

@@ -78,11 +78,16 @@ type __VLS_PrettifyLocal<T> = {
 } & {};
 export interface OmegaFormReturn<From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, TypeProps = DefaultTypeProps> extends OF<From, To> {
     Input: <Name extends DeepKeys<From>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-        props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BaseProps<From, Name> & TypeProps & Partial<{}>> & import("vue").PublicProps;
+        props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & BaseProps<From> & TypeProps & Partial<{}>> & import("vue").PublicProps;
         expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
         attrs: any;
         slots: {
-            default(props: MergedInputProps<From, Name>): void;
+            default?(props: MergedInputProps<From, Name>): void;
+            label?: (props: {
+                required: boolean;
+                id: string;
+                label: string;
+            }) => void;
         };
         emit: {};
     }>) => import("vue").VNode & {

package/dist/vue-components.es13.js

@@ -1,29 +1,38 @@
-import { h as o } from "vue";
-import l from "./vue-components.es6.js";
+import { h as a } from "vue";
+import b from "./vue-components.es6.js";
 import { useOmegaForm as O } from "./vue-components.es10.js";
-const g = (n) => (...m) => {
-  const [p, s, a] = m;
+const j = (m) => (...p) => {
+  const [l, c, f] = p;
   return O(
-    p,
-    s,
+    l,
+    c,
     {
-      ...a,
+      ...f,
       input: {
         name: "WrappedInput",
         inheritAttrs: !1,
-        setup(c, { attrs: t }) {
-          return () => o(l, {
-            ...c,
-            ...t
+        setup(i, { attrs: n, slots: e }) {
+          return () => a(b, {
+            ...i,
+            ...n
           }, {
             // Override the default slot that OmegaInternalInput provides
-            default: ({ field: f, state: i, ...r }) => {
-              const u = Object.fromEntries(
-                Object.entries(t).filter(
-                  ([e]) => !Object.prototype.hasOwnProperty.call(r, e) && e !== "form"
+            default: ({ field: r, state: u, ...o }) => {
+              const s = Object.fromEntries(
+                Object.entries(n).filter(
+                  ([t]) => !Object.prototype.hasOwnProperty.call(o, t) && t !== "form"
                 )
               );
-              return o(n, { ...u, field: f, state: i, inputProps: r });
+              return a(m, { ...s, field: r, state: u, inputProps: o }, {
+                // Pass through label slot if it exists
+                ...e.label && {
+                  label: (t) => e.label(t)
+                }
+              });
+            },
+            // Pass through label slot to OmegaInput
+            ...e.label && {
+              label: (r) => e.label(r)
             }
           });
         }
@@ -32,5 +41,5 @@ const g = (n) => (...m) => {
   );
 };
 export {
-  g as createUseFormWithCustomInput
+  j as createUseFormWithCustomInput
 };

package/dist/vue-components.es38.js

@@ -1,6 +1,6 @@
-import { defineComponent as b, resolveComponent as o, createElementBlock as m, openBlock as n, createBlock as a, createCommentVNode as i, resolveDynamicComponent as d, mergeProps as u, unref as f, withCtx as h, Fragment as c, renderList as C } from "vue";
-import { getInputType as q } from "./vue-components.es12.js";
-const U = /* @__PURE__ */ b({
+import { defineComponent as k, resolveComponent as b, createElementBlock as v, openBlock as a, createBlock as n, createCommentVNode as u, resolveDynamicComponent as g, mergeProps as o, createSlots as d, withCtx as r, renderSlot as m, normalizeProps as s, guardReactiveProps as P, unref as C, Fragment as V, renderList as U } from "vue";
+import { getInputType as c } from "./vue-components.es12.js";
+const w = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "OmegaInputVuetify",
   props: {
@@ -10,14 +10,14 @@ const U = /* @__PURE__ */ b({
   },
   emits: ["focus", "blur"],
   setup(e) {
-    return (r, l) => {
-      const s = o("v-text-field"), P = o("v-textarea"), g = o("v-radio"), v = o("v-radio-group"), p = o("v-select"), y = o("v-autocomplete");
-      return n(), m("div", {
+    return (l, i) => {
+      const y = b("v-text-field"), p = b("v-textarea"), f = b("v-radio"), h = b("v-radio-group"), q = b("v-select"), $ = b("v-autocomplete");
+      return a(), v("div", {
         class: "omega-input",
-        onFocusout: l[4] || (l[4] = (t) => r.$emit("blur", t)),
-        onFocusin: l[5] || (l[5] = (t) => r.$emit("focus", t))
+        onFocusout: i[4] || (i[4] = (t) => l.$emit("blur", t)),
+        onFocusin: i[5] || (i[5] = (t) => l.$emit("focus", t))
       }, [
-        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (n(), a(d(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), u({
+        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (a(), n(g(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), o({
           key: 0,
           id: e.inputProps.id,
           name: e.field.name,
@@ -25,26 +25,42 @@ const U = /* @__PURE__ */ b({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error,
           ripple: ""
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          onChange: l[0] || (l[0] = (t) => e.field.handleChange(t.target.checked))
-        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : i("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" ? (n(), a(s, u({
+          onChange: i[0] || (i[0] = (t) => e.field.handleChange(t.target.checked))
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" ? (a(), n(y, o({
           key: 1,
           id: e.inputProps.id,
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
           "max-length": e.inputProps.maxLength,
-          type: f(q)(e.inputProps.type),
+          type: C(c)(e.inputProps.type),
           name: e.field.name,
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "text" ? (n(), a(P, u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "text" ? (a(), n(p, o({
           key: 2,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -54,11 +70,19 @@ const U = /* @__PURE__ */ b({
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "number" || e.inputProps.type === "range" ? (n(), a(d(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "number" || e.inputProps.type === "range" ? (a(), n(g(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), o({
           key: 3,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -69,33 +93,49 @@ const U = /* @__PURE__ */ b({
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          "onUpdate:modelValue": l[1] || (l[1] = (t) => {
+          "onUpdate:modelValue": i[1] || (i[1] = (t) => {
             t || t === 0 ? e.field.handleChange(Number(t)) : e.field.handleChange(void 0);
           })
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : i("", !0),
-        e.inputProps.type === "radio" ? (n(), a(v, u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
+        e.inputProps.type === "radio" ? (a(), n(h, o({
           key: 4,
           id: e.inputProps.id,
           name: e.field.name,
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
-        }), {
-          default: h(() => [
-            (n(!0), m(c, null, C(e.inputProps.options, (t) => (n(), a(g, {
+        }), d({
+          default: r(() => [
+            (a(!0), v(V, null, U(e.inputProps.options, (t) => (a(), n(f, {
               key: t.value,
               label: t.title,
               value: t.value
             }, null, 8, ["label", "value"]))), 128))
           ]),
-          _: 1
-        }, 16, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (n(), a(p, u({
+          _: 2
+        }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (a(), n(q, o({
           key: 5,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "select",
@@ -107,12 +147,20 @@ const U = /* @__PURE__ */ b({
           items: e.inputProps.options,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          onClear: l[2] || (l[2] = (t) => e.field.handleChange(void 0)),
+          onClear: i[2] || (i[2] = (t) => e.field.handleChange(void 0)),
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (n(), a(y, u({
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (a(), n($, o({
           key: 6,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "autocomplete",
@@ -124,15 +172,23 @@ const U = /* @__PURE__ */ b({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error,
           chips: e.inputProps.type === "autocompletemultiple"
-        }, r.$attrs, {
+        }, l.$attrs, {
           "model-value": e.state.value,
-          onClear: l[3] || (l[3] = (t) => e.field.handleChange(void 0)),
+          onClear: i[3] || (i[3] = (t) => e.field.handleChange(void 0)),
           "onUpdate:modelValue": e.field.handleChange
-        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : i("", !0)
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : u("", !0)
       ], 32);
     };
   }
 });
 export {
-  U as default
+  w as default
 };

package/dist/vue-components.es6.js

@@ -1,8 +1,8 @@
-import { defineComponent as b, computed as s, useAttrs as F, inject as k, createBlock as c, openBlock as f, resolveDynamicComponent as y, withCtx as d, createCommentVNode as A, mergeProps as N, renderSlot as w, normalizeProps as I, guardReactiveProps as P } from "vue";
-import { useIntl as S } from "./vue-components.es3.js";
-import { generateInputStandardSchemaFromFieldMeta as j } from "./vue-components.es12.js";
-import z from "./vue-components.es7.js";
-const R = /* @__PURE__ */ b({
+import { defineComponent as F, computed as n, useAttrs as A, inject as N, createBlock as d, openBlock as p, resolveDynamicComponent as S, withCtx as i, createCommentVNode as w, mergeProps as I, createSlots as P, renderSlot as v, normalizeProps as g, guardReactiveProps as C } from "vue";
+import { useIntl as j } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as z } from "./vue-components.es12.js";
+import B from "./vue-components.es7.js";
+const U = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaInput",
   props: {
@@ -12,43 +12,51 @@ const R = /* @__PURE__ */ b({
     name: {},
     inputClass: {}
   },
-  setup(a) {
-    const e = a, r = s(() => e.name), p = F(), v = s(() => {
+  setup(t) {
+    const e = t, r = n(() => e.name), $ = A(), b = n(() => {
       if (e.inputClass !== null)
-        return e.inputClass !== void 0 ? e.inputClass : p.class;
-    }), l = k(
+        return e.inputClass !== void 0 ? e.inputClass : $.class;
+    }), s = N(
       "getMetaFromArray",
       null
-    ), n = s(() => l?.value && l.value(e.name) ? l.value(r.value) : e.form.meta[r.value]), g = s(() => {
-      if (!n.value)
+    ), l = n(() => s?.value && s.value(e.name) ? s.value(r.value) : e.form.meta[r.value]), h = n(() => {
+      if (!l.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return j(n.value);
-    }), { formatMessage: o } = S(), m = (t) => t.replace(/([A-Z])/g, " $1").replace(/^./, (u) => u.toUpperCase()).trim(), i = () => o ? o({ id: `general.fields.${r.value}`, defaultMessage: m(e.name) }) : m(e.name), C = () => e.form.i18nNamespace ? o({ id: `${e.form.i18nNamespace}.fields.${r.value}`, defaultMessage: i() }) : i();
-    return (t, u) => (f(), c(y(a.form.Field), {
-      name: a.name,
+      return z(l.value);
+    }), { formatMessage: o } = j(), u = (a) => a.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase()).trim(), f = () => o ? o({ id: `general.fields.${r.value}`, defaultMessage: u(e.name) }) : u(e.name), M = () => e.form.i18nNamespace ? o({ id: `${e.form.i18nNamespace}.fields.${r.value}`, defaultMessage: f() }) : f();
+    return (a, c) => (p(), d(S(t.form.Field), {
+      name: t.name,
       validators: {
-        onChange: g.value,
-        ...a.validators
+        onChange: h.value,
+        ...t.validators
       }
     }, {
-      default: d(({ field: h, state: $ }) => [
-        n.value ? (f(), c(z, N({ key: 0 }, { ...t.$attrs, ...t.$props, inputClass: v.value }, {
-          field: h,
-          state: $,
-          register: a.form.registerField,
-          label: a.label ?? C(),
-          meta: n.value
-        }), {
-          default: d((M) => [
-            w(t.$slots, "default", I(P(M)))
+      default: i(({ field: k, state: y }) => [
+        l.value ? (p(), d(B, I({ key: 0 }, { ...a.$attrs, ...a.$props, inputClass: b.value }, {
+          field: k,
+          state: y,
+          register: t.form.registerField,
+          label: t.label ?? M(),
+          meta: l.value
+        }), P({
+          default: i((m) => [
+            v(a.$slots, "default", g(C(m)))
           ]),
-          _: 3
-        }, 16, ["field", "state", "register", "label", "meta"])) : A("", !0)
+          _: 2
+        }, [
+          a.$slots.label ? {
+            name: "label",
+            fn: i((m) => [
+              v(a.$slots, "label", g(C(m)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["field", "state", "register", "label", "meta"])) : w("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));
   }
 });
 export {
-  R as default
+  U as default
 };

package/dist/vue-components.es7.js

@@ -1,9 +1,9 @@
 (function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.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){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.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;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.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){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.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;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as _, computed as n, getCurrentInstance as x, useAttrs as P, useId as N, renderSlot as q, normalizeProps as i, guardReactiveProps as B, createElementVNode as $, normalizeClass as k, createBlock as I, createCommentVNode as L, unref as M, openBlock as S, mergeProps as w } from "vue";
-import { useStore as A } from "@tanstack/vue-form";
-import F from "./vue-components.es38.js";
+import { defineComponent as N, computed as n, getCurrentInstance as S, useAttrs as k, useSlots as q, useId as B, renderSlot as m, normalizeProps as s, guardReactiveProps as d, createElementVNode as w, normalizeClass as I, createBlock as L, createCommentVNode as M, unref as A, openBlock as F, mergeProps as O, createSlots as R, withCtx as V } from "vue";
+import { useStore as z } from "@tanstack/vue-form";
+import T from "./vue-components.es38.js";
 
-const Z = /* @__PURE__ */ _({
+const H = /* @__PURE__ */ N({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -18,55 +18,64 @@ const Z = /* @__PURE__ */ _({
     register: {},
     options: { default: void 0 }
   },
-  setup(u) {
-    const e = u, s = n(() => e.required ?? e?.meta?.required), m = x()?.appContext.components.VTextField, d = P(), p = n(() => {
-      const { class: t, ...r } = d;
-      return r;
-    }), l = N(), f = e.field, c = A(f.store, (t) => t), g = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
-    e.register(n(() => ({ name: e.field.name, label: e.label, id: l })));
-    const h = n(() => c.value.meta.errors ?? []), o = n(
+  setup(p) {
+    const e = p, l = n(() => e.required ?? e?.meta?.required), f = S()?.appContext.components.VTextField, c = k(), g = q(), h = n(() => {
+      const { class: t, ...a } = c;
+      return a;
+    }), o = B(), v = e.field, y = z(v.store, (t) => t), b = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
+    e.register(n(() => ({ name: e.field.name, label: e.label, id: o })));
+    const C = n(() => y.value.meta.errors ?? []), i = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        h.value.map((t) => t?.message).filter(Boolean)
+        C.value.map((t) => t?.message).filter(Boolean)
       )
-    ), v = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), y = (t) => {
-      v(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
+    ), _ = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), x = (t) => {
+      _(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
         e.meta.nullableOrUndefined === "undefined" ? void 0 : null
-      ) : e.field.handleChange(t), e.field.setMeta((r) => ({ ...r, errorMap: { ...r.errorMap, onSubmit: void 0 } }));
-    }, C = (t) => {
-      const r = {
-        get(V, b, z) {
-          return b === "handleChange" ? y : Reflect.get(...arguments);
+      ) : e.field.handleChange(t), e.field.setMeta((a) => ({ ...a, errorMap: { ...a.errorMap, onSubmit: void 0 } }));
+    }, P = (t) => {
+      const a = {
+        get(E, $, W) {
+          return $ === "handleChange" ? x : Reflect.get(...arguments);
         }
       };
-      return new Proxy(t, r);
-    }, a = n(() => ({
+      return new Proxy(t, a);
+    }, r = n(() => ({
       inputProps: {
-        id: l,
-        required: s.value,
+        id: o,
+        required: l.value,
         minLength: e.meta?.type === "string" && e.meta?.minLength,
         maxLength: e.meta?.type === "string" && e.meta?.maxLength,
         max: e.meta?.type === "number" && e.meta?.maximum,
         min: e.meta?.type === "number" && e.meta?.minimum,
-        errorMessages: o.value,
-        error: !!o.value.length,
-        type: g.value,
-        label: `${e.label}${s.value ? " *" : ""}`,
+        errorMessages: i.value,
+        error: !!i.value.length,
+        type: b.value,
+        // Only add asterisk if label slot is not provided (slot has full control)
+        label: g.label ? e.label : `${e.label}${l.value ? " *" : ""}`,
         options: e.options,
         inputClass: e.inputClass
       },
       state: e.state,
-      field: C(e.field)
+      field: P(e.field)
     }));
-    return (t, r) => q(t.$slots, "default", i(B({ ...a.value.inputProps, field: a.value.field, state: a.value.state })), () => [
-      $("div", {
-        class: k(t.$attrs.class)
+    return (t, a) => m(t.$slots, "default", s(d({ ...r.value.inputProps, field: r.value.field, state: r.value.state })), () => [
+      w("div", {
+        class: I(t.$attrs.class)
       }, [
-        M(m) ? (S(), I(F, i(w({ key: 0 }, { ...p.value, ...a.value, class: e.inputClass })), null, 16)) : L("", !0)
+        A(f) ? (F(), L(T, s(O({ key: 0 }, { ...h.value, ...r.value, class: e.inputClass })), R({ _: 2 }, [
+          t.$slots.label ? {
+            name: "label",
+            fn: V((u) => [
+              m(t.$slots, "label", s(d(u)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040)) : M("", !0)
       ], 2)
     ]);
   }
 });
 export {
-  Z as default
+  H as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -53,8 +53,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.92.1",
-    "effect-app": "3.12.0"
+    "effect-app": "3.12.0",
+    "@effect-app/vue": "2.92.1"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -35,7 +35,7 @@ if (!form) {
 }
 
 defineProps<
-  BaseProps<From, Name> & DefaultTypeProps
+  BaseProps<From> & DefaultTypeProps
 >()
 
 defineSlots<{

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -7,24 +7,24 @@ import { getTransformationFrom, useIntl } from "../../utils"
 import { type OmegaFieldInternalApi } from "./InputProps"
 import { type OF, type OmegaFormReturn } from "./useOmegaForm"
 
-export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {}
+export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U>
+  ? Leaves<U, `${Path}[${number}]`> & {}
   : {
     [K in keyof T]: T[K] extends string | boolean | number | null | undefined | symbol | bigint
       ? `${Path extends "" ? "" : `${Path}.`}${K & string}`
       : Leaves<T[K], `${Path extends "" ? "" : `${Path}.`}${K & string}`> & {}
   }[keyof T]
 
-// Helper type to make array indices flexible - accepts both [number] and numeric literals [0], [1], etc.
-// Simplified: if there's a [] in the path, just use TName to avoid excessive type complexity
-export type FlexibleArrayPath<T extends string> = T extends `${string}[${string}]${string}` ? T
-  : never
-
-export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
-  /** Will fallback to i18n when not specified */
+export type BaseProps<From> = {
+  /**
+   * Will fallback to i18n when not specified.
+   * Can also be provided via #label slot for custom HTML labels.
+   * When using the slot, it receives bindings: { required, id, label }
+   */
   label?: string
   validators?: FieldValidators<From>
   // Use FlexibleArrayPath: if name contains [], just use TName; otherwise intersect with Leaves<From>
-  name: FlexibleArrayPath<TName> extends never ? Leaves<From> : TName
+  name: Leaves<From>
   /**
    * Optional class to apply to the input element.
    * - If a string is provided, it will be used instead of the general class
@@ -56,7 +56,7 @@ export type OmegaInputPropsBase<
     meta: MetaRecord<From>
     i18nNamespace?: string
   }
-} & BaseProps<From, NestedKeyOf<From>>
+} & BaseProps<From>
 
 export type OmegaInputProps<
   From extends Record<PropertyKey, any>,
@@ -67,7 +67,7 @@ export type OmegaInputProps<
     meta: MetaRecord<From>
     i18nNamespace?: string
   }
-} & BaseProps<From, NestedKeyOf<From>>
+} & BaseProps<From>
 
 export type OmegaArrayProps<
   From extends Record<PropertyKey, any>,

package/src/components/OmegaForm/OmegaInput.vue

@@ -17,6 +17,15 @@
         :label="label ?? i18n()"
         :meta="meta"
       >
+        <template
+          v-if="$slots.label"
+          #label="labelProps"
+        >
+          <slot
+            name="label"
+            v-bind="labelProps"
+          />
+        </template>
         <template #default="inputProps">
           <slot v-bind="inputProps" />
         </template>
@@ -42,8 +51,13 @@ import OmegaInternalInput from "./OmegaInternalInput.vue"
 
 const props = defineProps<OmegaInputPropsBase<From, To>>()
 
-// downgrade to DeepKeys<From> to avoid useless and possible infinite recursion in TS
-const propsName: Ref<DeepKeys<From>> = computed(() => props.name)
+// downgrade to *as* DeepKeys<From> to avoid useless and possible infinite recursion in TS
+const propsName = computed(() => props.name as DeepKeys<From>)
+
+defineSlots<{
+  label?: (props: { required?: boolean; id: string; label: string }) => any
+  default?: (props: any) => any
+}>()
 
 defineOptions({
   inheritAttrs: false
@@ -64,7 +78,7 @@ const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
 )
 
 const meta = computed(() => {
-  if (getMetaFromArray?.value && getMetaFromArray.value(props.name)) {
+  if (getMetaFromArray?.value && getMetaFromArray.value(props.name as DeepKeys<From>)) {
     return getMetaFromArray.value(propsName.value)
   }
   return props.form.meta[propsName.value]

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -16,7 +16,17 @@
       v-bind="$attrs"
       :model-value="state.value"
       @change="(e: any) => field.handleChange(e.target.checked)"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </component>
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
       :id="inputProps.id"
@@ -31,7 +41,17 @@
       v-bind="$attrs"
       :model-value="state.value"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-text-field>
     <v-textarea
       v-if="inputProps.type === 'text'"
       :id="inputProps.id"
@@ -45,7 +65,17 @@
       v-bind="$attrs"
       :model-value="state.value"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-textarea>
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
       v-if="inputProps.type === 'number' || inputProps.type === 'range'"
@@ -67,7 +97,17 @@
           field.handleChange(undefined as any)
         }
       }"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </component>
     <template v-if="inputProps.type === 'radio'">
       <v-radio-group
         :id="inputProps.id"
@@ -79,6 +119,15 @@
         :model-value="state.value"
         @update:model-value="field.handleChange"
       >
+        <template
+          v-if="$slots.label"
+          #label
+        >
+          <slot
+            name="label"
+            v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+          />
+        </template>
         <v-radio
           v-for="option in inputProps.options"
           :key="option.value"
@@ -103,7 +152,17 @@
       :model-value="state.value"
       @clear="field.handleChange(undefined as any)"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-select>
 
     <v-autocomplete
       v-if="inputProps.type === 'autocomplete'
@@ -122,7 +181,17 @@
       :model-value="state.value"
       @clear="field.handleChange(undefined as any)"
       @update:model-value="field.handleChange"
-    />
+    >
+      <template
+        v-if="$slots.label"
+        #label
+      >
+        <slot
+          name="label"
+          v-bind="{ required: inputProps.required, id: inputProps.id, label: inputProps.label }"
+        />
+      </template>
+    </v-autocomplete>
   </div>
 </template>
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -4,7 +4,17 @@
       <OmegaInputVuetify
         v-if="vuetified"
         v-bind="{ ...attrsWithoutClass, ...inputProps, class: props.inputClass }"
-      />
+      >
+        <template
+          v-if="$slots.label"
+          #label="labelProps"
+        >
+          <slot
+            name="label"
+            v-bind="labelProps"
+          />
+        </template>
+      </OmegaInputVuetify>
     </div>
   </slot>
 </template>
@@ -15,7 +25,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, useAttrs, useId } from "vue"
+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 OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -60,6 +70,7 @@ const isRequired = computed(() => props.required ?? props?.meta?.required)
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VTextField"]
 const attrs = useAttrs()
+const slots = useSlots()
 
 // Create attrs without the class property to avoid duplication
 const attrsWithoutClass = computed(() => {
@@ -148,7 +159,8 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,
-    label: `${props.label}${isRequired.value ? " *" : ""}`,
+    // Only add asterisk if label slot is not provided (slot has full control)
+    label: slots.label ? props.label : `${props.label}${isRequired.value ? " *" : ""}`,
     options: props.options,
     inputClass: props.inputClass
   },

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -20,7 +20,7 @@ export const createUseFormWithCustomInput = <
     const WrappedInput = {
       name: "WrappedInput",
       inheritAttrs: false,
-      setup(props: any, { attrs }: any) {
+      setup(props: any, { attrs, slots }: any) {
         return () =>
           h(OmegaInput, {
             ...props,
@@ -35,8 +35,17 @@ export const createUseFormWithCustomInput = <
                   && key !== "form"
                 )
               )
-              return h(CustomInputComponent, { ...filteredAttrs, field, state, inputProps })
-            }
+              return h(CustomInputComponent, { ...filteredAttrs, field, state, inputProps }, {
+                // Pass through label slot if it exists
+                ...(slots.label && {
+                  label: (labelProps: any) => slots.label(labelProps)
+                })
+              })
+            },
+            // Pass through label slot to OmegaInput
+            ...(slots.label && {
+              label: (labelProps: any) => slots.label(labelProps)
+            })
           })
       }
     }

package/src/components/OmegaForm/useOmegaForm.ts

@@ -228,7 +228,7 @@ export interface OmegaFormReturn<
             >,
             never
           >
-          & BaseProps<From, Name>
+          & BaseProps<From>
           & TypeProps
           & Partial<{}>
         >
@@ -236,7 +236,8 @@ export interface OmegaFormReturn<
       expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
       attrs: any
       slots: {
-        default(props: MergedInputProps<From, Name>): void
+        default?(props: MergedInputProps<From, Name>): void
+        label?: (props: { required: boolean; id: string; label: string }) => void
       }
       emit: {}
     }>