@effect-app/vue-components 0.14.0 → 0.14.2

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

@@ -9,15 +9,10 @@ declare const _default: <From extends Record<PropertyKey, any>, To extends Recor
     attrs: any;
     slots: {
         default?: (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>;
             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;
         }) => 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>;
-        }) => any;
     };
     emit: {};
 }>) => import("vue").VNode & {

package/dist/vue-components.es13.js

@@ -1,6 +1,6 @@
 import { defineComponent as w, computed as f, onBeforeMount as E, watch as j, createElementBlock as v, openBlock as b, withModifiers as F, createElementVNode as M, unref as c, renderSlot as p, createCommentVNode as k, Fragment as V } from "vue";
 import { useStore as g } from "@tanstack/vue-form";
-import { getOmegaStore as B } from "./vue-components.es23.js";
+import { getOmegaStore as B } from "./vue-components.es25.js";
 import { provideOmegaErrors as C } from "./vue-components.es8.js";
 import { useOmegaForm as I } from "./vue-components.es9.js";
 const $ = ["disabled"], N = /* @__PURE__ */ w({

package/dist/vue-components.es22.js

@@ -1,4 +1,4 @@
-import { isFunction as c } from "./vue-components.es25.js";
+import { isFunction as c } from "./vue-components.es23.js";
 const s = c, t = (o) => typeof o == "object" && o !== null, i = (o) => t(o) || s(o);
 export {
   s as isFunction,

package/dist/vue-components.es23.js

@@ -1,13 +1,4 @@
-import { useStore as u } from "@tanstack/vue-form";
-import { computed as f } from "vue";
-function c(o, t) {
-  return f(() => t ? u(o.store, (n) => {
-    const r = {};
-    for (const e of t)
-      r[e] = n[e];
-    return r;
-  }).value : {});
-}
+const o = (n) => typeof n == "function";
 export {
-  c as getOmegaStore
+  o as isFunction
 };

package/dist/vue-components.es25.js

@@ -1,4 +1,13 @@
-const o = (n) => typeof n == "function";
+import { useStore as u } from "@tanstack/vue-form";
+import { computed as f } from "vue";
+function c(o, t) {
+  return f(() => t ? u(o.store, (n) => {
+    const r = {};
+    for (const e of t)
+      r[e] = n[e];
+    return r;
+  }).value : {});
+}
 export {
-  o as isFunction
+  c as getOmegaStore
 };

package/dist/vue-components.es7.js

@@ -1,6 +1,6 @@
-import { defineComponent as c, onMounted as M, computed as v, provide as F, createBlock as u, openBlock as s, resolveDynamicComponent as p, withCtx as l, createElementBlock as $, renderSlot as i, Fragment as h, renderList as k, mergeProps as S, normalizeProps as _, guardReactiveProps as A } from "vue";
-import { createMeta as I } from "./vue-components.es10.js";
-const C = /* @__PURE__ */ c({
+import { defineComponent as y, computed as u, onMounted as c, provide as g, createElementBlock as M, openBlock as p, Fragment as v, renderList as _, createBlock as h, resolveDynamicComponent as k, withCtx as F, renderSlot as S, mergeProps as $ } from "vue";
+import { createMeta as A } from "./vue-components.es10.js";
+const C = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "OmegaArray",
   props: {
@@ -9,53 +9,46 @@ const C = /* @__PURE__ */ c({
     defaultItems: {},
     items: {}
   },
-  setup(f) {
-    const r = f, d = r.form.useStore((e) => e.values[r.name]);
-    M(() => {
-      r.defaultItems && !d.value && r.form.setFieldValue(r.name, r.defaultItems);
+  setup(l) {
+    const t = l, i = t.form.useStore((e) => e.values), m = u(() => t.name.split(".").reduce((e, a) => e[a], i.value));
+    c(async () => {
+      t.defaultItems && !m.value && t.form.setFieldValue(t.name, t.defaultItems);
     });
-    const y = v(() => {
-      const e = r.form.meta[r.name];
+    const f = u(() => {
+      const e = t.form.meta[t.name];
       if (e && e.type === "multiple") {
-        const o = e.rest.reduce((t, a) => a.type._tag === "TypeLiteral" ? {
-          ...t,
+        const a = e.rest.reduce((r, n) => n.type._tag === "TypeLiteral" ? {
+          ...r,
           propertySignatures: [
-            ...t.propertySignatures || [],
-            ...a.type.propertySignatures
+            ...r.propertySignatures || [],
+            ...n.type.propertySignatures
           ]
         } : {
-          ...t,
-          property: a.type
-        }, {}), n = I({ ...o, meta: e });
-        return (t) => {
-          if (t.endsWith("]")) return n;
-          const a = t.split("]."), m = a[a.length - 1];
-          return n[m];
+          ...r,
+          property: n.type
+        }, {}), s = A({ ...a, meta: e });
+        return (r) => {
+          if (r.endsWith("]")) return s;
+          const n = r.split("]."), d = n[n.length - 1];
+          return s[d];
         };
       }
-      return (o) => {
+      return (a) => {
       };
     });
-    return F("getMetaFromArray", y), (e, o) => (s(), u(p(e.form.Field), { name: e.name }, {
-      default: l(({ field: n }) => [
-        (s(!0), $(h, null, k(n.state.value, (g, t) => (s(), u(p(e.form.Field), {
-          key: `${e.name}[${Number(t)}]`,
-          name: `${e.name}[${Number(t)}]`
-        }, {
-          default: l(({ field: a, state: m }) => [
-            i(e.$slots, "default", S({ ref_for: !0 }, {
-              field: n,
-              subField: a,
-              subState: m,
-              index: Number(t)
-            }))
-          ]),
-          _: 2
-        }, 1032, ["name"]))), 128)),
-        i(e.$slots, "field", _(A({ field: n })))
+    return g("getMetaFromArray", f), (e, a) => (p(!0), M(v, null, _(m.value, (s, o) => (p(), h(k(e.form.Field), {
+      key: `${e.name}[${Number(o)}]`,
+      name: `${e.name}[${Number(o)}]`
+    }, {
+      default: F(({ field: r, state: n }) => [
+        S(e.$slots, "default", $({ ref_for: !0 }, {
+          subField: r,
+          subState: n,
+          index: Number(o)
+        }))
       ]),
-      _: 3
-    }, 8, ["name"]));
+      _: 2
+    }, 1032, ["name"]))), 128));
   }
 });
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",

package/src/components/OmegaForm/OmegaArray.vue

@@ -1,31 +1,32 @@
 <template>
-  <component :is="form.Field" :name="name">
-    <template #default="{ field }">
-      <component
-        :is="form.Field"
-        v-for="(_, i) of field.state.value"
-        :key="`${name}[${Number(i)}]`"
-        :name="
-          `${name}[${Number(i)}]` as DeepKeys<From>
-        "
-      >
-        <template #default="{ field: subField, state: subState }">
-          <slot
-            v-bind="{
-              field,
-              subField,
-              subState,
-              index: Number(i),
-            }"
-          />
-        </template>
-      </component>
-      <slot name="field" v-bind="{ field }" />
+  <component
+    :is="form.Field"
+    v-for="(_, i) of items"
+    :key="`${name}[${Number(i)}]`"
+    :name="
+      `${name}[${Number(i)}]` as DeepKeys<From>
+    "
+  >
+    <template #default="{ field: subField, state: subState }">
+      <slot
+        v-bind="{
+          subField,
+          subState,
+          index: Number(i),
+        }"
+      />
     </template>
   </component>
 </template>
 
-<script setup lang="ts" generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>">
+<script
+  setup
+  lang="ts"
+  generic="
+    From extends Record<PropertyKey, any>,
+    To extends Record<PropertyKey, any>
+  "
+>
 import { computed, onMounted, provide } from "vue"
 import {
   type CreateMeta,
@@ -33,7 +34,6 @@ import {
   createMeta,
 } from "./OmegaFormStuff"
 import { type DeepValue, type DeepKeys } from "@tanstack/vue-form"
-import { S } from "effect-app"
 
 const props = defineProps<
   Omit<
@@ -50,10 +50,18 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const storeItems = props.form.useStore(state => state.values[props.name])
+const store = props.form.useStore(state => state.values)
+const items = computed(() => {
+  return props.name.split(".").reduce((acc, curr) => {
+    if (curr === "items") {
+      return acc[curr]
+    }
+    return acc[curr] as typeof store.value
+  }, store.value)
+})
 
-onMounted(() => {
-  if (props.defaultItems && !storeItems.value) {
+onMounted(async () => {
+  if (props.defaultItems && !items.value) {
     props.form.setFieldValue(props.name, props.defaultItems)
   }
 })