@effect-app/vue-components 0.15.3 → 0.15.5

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

@@ -8,12 +8,22 @@ declare const _default: <From extends Record<PropertyKey, any>, To extends Recor
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
+        'pre-array'?: (props: {
+            field: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
+            state: import("@tanstack/vue-form").FieldState<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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>;
+        }) => any;
+    } & {
         default?: (props: {
             subField: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
             subState: import("@tanstack/vue-form").FieldState<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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>;
             index: number;
             field: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
         }) => any;
+    } & {
+        'post-array'?: (props: {
+            field: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
+            state: import("@tanstack/vue-form").FieldState<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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>;
+        }) => any;
     } & {
         field?: (props: {
             field: import("@tanstack/vue-form").FieldApi<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, DeepKeys<From>, DeepValue<From, DeepKeys<From>>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, 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").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;

package/dist/vue-components.es7.js

@@ -1,5 +1,5 @@
-import { defineComponent as h, computed as s, onMounted as y, provide as F, createBlock as l, openBlock as o, resolveDynamicComponent as u, withCtx as d, createElementBlock as P, renderSlot as i, Fragment as $, renderList as M, mergeProps as k, normalizeProps as A, guardReactiveProps as b } from "vue";
-const C = /* @__PURE__ */ h({
+import { defineComponent as F, computed as d, onMounted as M, provide as P, createBlock as f, openBlock as m, resolveDynamicComponent as i, withCtx as c, renderSlot as o, createElementBlock as k, normalizeProps as s, guardReactiveProps as l, Fragment as A, renderList as b, mergeProps as B } from "vue";
+const N = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaArray",
   props: {
@@ -8,37 +8,46 @@ const C = /* @__PURE__ */ h({
     defaultItems: {},
     items: {}
   },
-  setup(f) {
-    const r = f, p = r.form.useStore((e) => e.values), m = s(() => r.name.replace(/\[/g, ".").replace(/\]/g, "").split(".").reduce((a, t) => a[t], p.value));
-    y(async () => {
-      r.defaultItems && !m.value && r.form.setFieldValue(r.name, r.defaultItems);
+  setup(g) {
+    const t = g, y = t.form.useStore((e) => e.values), u = d(() => {
+      const e = t.name.replace(/\[/g, ".").replace(/\]/g, "");
+      try {
+        return e.split(".").reduce((a, r) => a[r], y.value);
+      } catch {
+        return [];
+      }
     });
-    const c = s(() => (a) => {
-      const t = a.replace(/\[\d+\]/g, "");
-      return r.form.meta[t];
+    M(async () => {
+      t.defaultItems && !u.value && t.form.setFieldValue(t.name, t.defaultItems);
     });
-    return F("getMetaFromArray", c), (e, a) => (o(), l(u(e.form.Field), { name: e.name }, {
-      default: d(({ field: t }) => [
-        (o(!0), P($, null, M(m.value, (z, n) => (o(), l(u(e.form.Field), {
+    const $ = d(() => (a) => {
+      const r = a.replace(/\[\d+\]/g, "");
+      return t.form.meta[r];
+    });
+    return P("getMetaFromArray", $), (e, a) => (m(), f(i(e.form.Field), { name: e.name }, {
+      default: c(({ field: r, state: p }) => [
+        o(e.$slots, "pre-array", s(l({ field: r, state: p }))),
+        (m(!0), k(A, null, b(u.value, (C, n) => (m(), f(i(e.form.Field), {
           key: `${e.name}[${Number(n)}]`,
           name: `${e.name}[${Number(n)}]`
         }, {
-          default: d(({ field: g, state: v }) => [
-            i(e.$slots, "default", k({ ref_for: !0 }, {
-              subField: g,
-              subState: v,
+          default: c(({ field: v, state: h }) => [
+            o(e.$slots, "default", B({ ref_for: !0 }, {
+              subField: v,
+              subState: h,
               index: Number(n),
-              field: t
+              field: r
             }))
           ]),
           _: 2
         }, 1032, ["name"]))), 128)),
-        i(e.$slots, "field", A(b({ field: t })))
+        o(e.$slots, "post-array", s(l({ field: r, state: p }))),
+        o(e.$slots, "field", s(l({ field: r })))
       ]),
       _: 3
     }, 8, ["name"]));
   }
 });
 export {
-  C as default
+  N as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",
@@ -50,8 +50,8 @@
   "dependencies": {
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.51.14",
-    "effect-app": "3.2.0"
+    "effect-app": "3.2.0",
+    "@effect-app/vue": "2.51.14"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaArray.vue

@@ -1,6 +1,7 @@
 <template>
   <component :is="form.Field" :name="name">
-    <template #default="{ field }">
+    <template #default="{ field, state }">
+      <slot name="pre-array" v-bind="{ field, state }" />
       <component
         :is="form.Field"
         v-for="(_, i) of items"
@@ -20,6 +21,8 @@
           />
         </template>
       </component>
+      <slot name="post-array" v-bind="{ field, state }" />
+      <!-- TODO: legacy slot, remove this slot -->
       <slot name="field" v-bind="{ field }" />
     </template>
   </component>
@@ -54,9 +57,13 @@ defineOptions({
 const store = props.form.useStore(state => state.values)
 const items = computed(() => {
   const normalizedPath = props.name.replace(/\[/g, ".").replace(/\]/g, "")
-  return normalizedPath.split(".").reduce((acc, curr) => {
-    return acc[curr] as typeof store.value
-  }, store.value)
+  try {
+    return normalizedPath.split(".").reduce((acc, curr) => {
+      return acc[curr] as typeof store.value
+    }, store.value)
+  } catch (e) {
+    return []
+  }
 })
 
 onMounted(async () => {