@effect-app/vue-components 4.0.0-beta.319 → 4.0.0-beta.320

package/dist/vue-components22.es.js

@@ -1,7 +1,7 @@
 import { useIntl as e } from "./vue-components6.es.js";
 import { computed as t, h as n, onUnmounted as r, ref as i, watch as a } from "vue";
 //#region src/components/OmegaForm/errors.ts
-var o = (t) => {
+var o = (e) => e.replace(/\[(\d+)\]/g, ".$1"), s = (t) => {
 	let { formatMessage: n } = e(), r = (e) => e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()).trim(), i = (e) => n ? n({
 		id: `general.fields.${e}`,
 		defaultMessage: r(e)
@@ -10,30 +10,30 @@ var o = (t) => {
 		id: `${t.i18nNamespace}.fields.${e}`,
 		defaultMessage: i(e)
 	}) : i(e);
-}, s = (e) => function(r) {
+}, c = (e) => function(r) {
 	return {
 		setup() {
-			let { fieldMap: n, form: r } = e, i = r.useStore((e) => e.errors), a = r.useStore((e) => e.fieldMeta), s = r.useStore((e) => e.errorMap), c = o(r);
+			let { fieldMap: n, form: r } = e, i = r.useStore((e) => e.errors), a = r.useStore((e) => e.fieldMeta), c = r.useStore((e) => e.errorMap), l = s(r);
 			return {
 				generalErrors: i,
 				errors: t(() => {
 					let e = Object.entries(a.value).reduce((e, [t, r]) => {
 						let i = r?.errors ?? [];
 						if (!i.length) return e;
-						let a = n.value.get(t);
+						let a = n.value.get(o(t));
 						return a && e.push({
 							label: a.label,
 							inputId: a.id,
 							errors: [i[0]?.message].filter(Boolean)
 						}), e;
-					}, []), t = [], r = [s.value.onDynamic, s.value.onSubmit].filter(Boolean), i = /* @__PURE__ */ new Set();
+					}, []), t = [], r = [c.value.onDynamic, c.value.onSubmit].filter(Boolean), i = /* @__PURE__ */ new Set();
 					for (let e of r) for (let [r, a] of Object.entries(e)) if (Array.isArray(a) && a.length) for (let e of a) {
 						let r = e;
 						if (r?.path && Array.isArray(r.path) && r.path.length) {
 							let e = r.path.join(".");
 							if (!n.value.has(e) && !i.has(e)) {
 								i.add(e), t.push({
-									label: c(e),
+									label: l(e),
 									inputId: e,
 									errors: [r.message].filter(Boolean)
 								});
@@ -53,21 +53,22 @@ var o = (t) => {
 			}, this.$slots);
 		}
 	};
-}, c = () => {
+}, l = () => {
 	let e = i(/* @__PURE__ */ new Map());
 	return {
 		fieldMap: e,
 		registerField: (t) => {
 			a(t, (t) => {
-				e.value.set(t.name, {
+				e.value.set(o(t.name), {
 					label: t.label,
 					id: t.id
 				});
 			}, { immediate: !0 }), r(() => {
-				e.value.get(t.value.name)?.id === t.value.id && e.value.delete(t.value.name);
+				let n = o(t.value.name);
+				e.value.get(n)?.id === t.value.id && e.value.delete(n);
 			});
 		}
 	};
 };
 //#endregion
-export { s as eHoc, c as makeFieldMap, o as useErrorLabel };
+export { c as eHoc, l as makeFieldMap, s as useErrorLabel };

package/dist/vue-components24.es.js

@@ -1,6 +1,6 @@
-import { Fragment as e, computed as t, createBlock as n, createElementBlock as r, defineComponent as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, onMounted as c, openBlock as l, provide as u, renderList as d, renderSlot as f, resolveDynamicComponent as p, withCtx as m } from "vue";
+import { Fragment as e, computed as t, createBlock as n, createElementBlock as r, defineComponent as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, onMounted as c, openBlock as l, renderList as u, renderSlot as d, resolveDynamicComponent as f, withCtx as p } from "vue";
 //#region src/components/OmegaForm/OmegaArray.vue?vue&type=script&setup=true&lang.ts
-var h = /*@__PURE__*/ i({
+var m = /*@__PURE__*/ i({
 	inheritAttrs: !1,
 	__name: "OmegaArray",
 	props: {
@@ -12,30 +12,27 @@ var h = /*@__PURE__*/ i({
 		items: {}
 	},
 	setup(i) {
-		let h = i, g = h.form.useStore((e) => e.values), _ = t(() => {
-			let e = h.name.replace(/\[/g, ".").replace(/\]/g, "");
+		let m = i, h = m.form.useStore((e) => e.values), g = t(() => {
+			let e = m.name.replace(/\[/g, ".").replace(/\]/g, "");
 			try {
-				return e.split(".").reduce((e, t) => e && e[t], g.value);
+				return e.split(".").reduce((e, t) => e && e[t], h.value);
 			} catch (e) {
 				return console.error(e), [];
 			}
 		});
 		return c(async () => {
-			h.defaultItems && !_.value && h.form.setFieldValue(h.name, h.defaultItems);
-		}), u("getMetaFromArray", t(() => (e) => {
-			let t = e.replace(/\[\d+\]/g, "");
-			return h.form.meta[t];
-		})), (t, c) => (l(), n(p(i.form.Field), { name: i.name }, {
-			default: m(({ field: c }) => [
-				f(t.$slots, "pre-array", s(a({
+			m.defaultItems && !g.value && m.form.setFieldValue(m.name, m.defaultItems);
+		}), (t, c) => (l(), n(f(i.form.Field), { name: i.name }, {
+			default: p(({ field: c }) => [
+				d(t.$slots, "pre-array", s(a({
 					field: c,
 					state: c.state
 				}))),
-				(l(!0), r(e, null, d(_.value, (e, r) => (l(), n(p(i.form.Field), {
+				(l(!0), r(e, null, u(g.value, (e, r) => (l(), n(f(i.form.Field), {
 					key: `${i.name}[${Number(r)}]`,
 					name: `${i.name}[${Number(r)}]`
 				}, {
-					default: m(({ field: e }) => [f(t.$slots, "default", o({ ref_for: !0 }, {
+					default: p(({ field: e }) => [d(t.$slots, "default", o({ ref_for: !0 }, {
 						subField: e,
 						subState: e.state,
 						index: Number(r),
@@ -43,15 +40,15 @@ var h = /*@__PURE__*/ i({
 					}))]),
 					_: 2
 				}, 1032, ["name"]))), 128)),
-				f(t.$slots, "post-array", s(a({
+				d(t.$slots, "post-array", s(a({
 					field: c,
 					state: c.state
 				}))),
-				f(t.$slots, "field", s(a({ field: c })))
+				d(t.$slots, "field", s(a({ field: c })))
 			]),
 			_: 3
 		}, 8, ["name"]));
 	}
 });
 //#endregion
-export { h as default };
+export { m as default };

package/dist/vue-components39.es.js

@@ -27,7 +27,7 @@ var _ = /*@__PURE__*/ o({
 			inputs: _.form.inputs
 		})), y = n(() => _.name), b = h(), x = n(() => {
 			if (_.inputClass !== null) return _.inputClass === void 0 ? b.class : _.inputClass;
-		}), S = c("getMetaFromArray", null), C = n(() => S?.value && S.value(_.name) ? S.value(y.value) : _.form.meta[y.value]), w = e(_.form);
+		}), S = c("getMetaFromArray", null), C = n(() => S?.value?.(y.value) || (_.form.meta[y.value] ?? _.form.meta[y.value.replace(/\[\d+\]/g, "")])), w = e(_.form);
 		return (e, n) => (d(), r(p(o.form.Field), {
 			name: o.name,
 			validators: o.validators

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.319",
+  "version": "4.0.0-beta.320",
   "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.319",
-    "effect-app": "4.0.0-beta.319"
+    "@effect-app/vue": "4.0.0-beta.320",
+    "effect-app": "4.0.0-beta.320"
   },
   "scripts": {
     "check": "vue-tsc",

package/src/components/OmegaForm/OmegaArray.vue

@@ -44,7 +44,7 @@
   generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { computed, onMounted, provide } from "vue"
+import { computed, onMounted } from "vue"
 import { type OmegaArrayProps } from "./types"
 
 const props = defineProps<OmegaArrayProps<From, To, Name>>()
@@ -73,17 +73,4 @@ onMounted(async () => {
     props.form.setFieldValue(props.name, props.defaultItems)
   }
 })
-
-const getMetaFromArray = computed(() => {
-  const getMeta = (path: string) => {
-    // Transform path like 'a[0].b[11].c' into 'a.b.c'
-    const simplifiedPath = path.replace(/\[\d+\]/g, "")
-
-    return props.form.meta[simplifiedPath as keyof typeof props.form.meta]
-  }
-
-  return getMeta
-})
-
-provide("getMetaFromArray", getMetaFromArray)
 </script>

package/src/components/OmegaForm/OmegaInput.vue

@@ -85,10 +85,10 @@ const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
 )
 
 const meta = computed(() => {
-  if (getMetaFromArray?.value && getMetaFromArray.value(props.name as DeepKeys<From>)) {
-    return getMetaFromArray.value(propsName.value)
-  }
+  const fromArray = getMetaFromArray?.value?.(propsName.value)
+  if (fromArray) return fromArray
   return props.form.meta[propsName.value]
+    ?? props.form.meta[propsName.value.replace(/\[\d+\]/g, "") as DeepKeys<From>]
 })
 
 const errori18n = useErrorLabel(props.form)

package/src/components/OmegaForm/errors.ts

@@ -5,6 +5,8 @@ import { useIntl } from "../../utils"
 import type { OmegaError } from "./types"
 import type { OF } from "./useOmegaForm"
 
+const normalizePath = (path: string) => path.replace(/\[(\d+)\]/g, ".$1")
+
 export const useErrorLabel = (form: OF<any, any>) => {
   const { formatMessage } = useIntl()
   const humanize = (str: string) => {
@@ -49,7 +51,7 @@ export const eHoc = (errorProps: {
               return acc
             }
 
-            const fieldInfo = fieldMap.value.get(key)
+            const fieldInfo = fieldMap.value.get(normalizePath(key))
             if (!fieldInfo) {
               return acc
             }
@@ -120,15 +122,16 @@ export const makeFieldMap = () => {
   const fieldMap = ref(new Map<string, { label: string; id: string }>())
   const registerField = (field: ComputedRef<{ name: string; label: string; id: string }>) => {
     watch(field, (f) => {
-      fieldMap.value.set(f.name, { label: f.label, id: f.id })
+      fieldMap.value.set(normalizePath(f.name), { label: f.label, id: f.id })
     }, { immediate: true })
     onUnmounted(() => {
       // Only delete if we still own this entry (id matches)
       // This prevents old components from deleting entries registered by new components
       // during re-mount transitions (e.g., when :key changes)
-      const currentEntry = fieldMap.value.get(field.value.name)
+      const path = normalizePath(field.value.name)
+      const currentEntry = fieldMap.value.get(path)
       if (currentEntry?.id === field.value.id) {
-        fieldMap.value.delete(field.value.name)
+        fieldMap.value.delete(path)
       }
     })
   }