@effect-app/vue-components 0.13.5 → 0.14.1

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

@@ -2,21 +2,17 @@ import { type OmegaInputProps } from "./OmegaFormStuff";
 import { type DeepValue, type DeepKeys } from "@tanstack/vue-form";
 declare const _default: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(__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> & (Omit<OmegaInputProps<From, To>, "type" | "label" | "items" | "options" | "validators"> & {
-        items?: DeepValue<To, DeepKeys<To>>;
+        defaultItems?: DeepValue<To, DeepKeys<To>>;
+        items?: "please use `defaultItems` instead";
     }) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     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/types/components/OmegaForm/OmegaFormStuff.d.ts

@@ -1,4 +1,4 @@
-import { S, type Effect } from "effect-app";
+import { S, type Record, type Effect } from "effect-app";
 import { type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, type FormApi, type VueFormApi, type FormOptions, type DeepKeys, type FieldValidateOrFn, type FieldAsyncValidateOrFn, type FormState } from "@tanstack/vue-form";
 import { OmegaFormReturn } from "./useOmegaForm";
 import { OmegaFieldInternalApi } from "./InputProps";

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

@@ -1,5 +1,5 @@
 import { DeepKeys } from "@tanstack/vue-form";
-import { S } from "effect-app";
+import { type Record, S } from "effect-app";
 import { type NestedKeyOf, type FilterItems, type FormProps, type MetaRecord, type OmegaFormApi, TypeOverride, FieldValidators } from "./OmegaFormStuff";
 import { type InjectionKey } from "vue";
 import { InputProps } from "./InputProps";

package/dist/vue-components.es7.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.13.5",
+  "version": "0.14.1",
   "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.12",
-    "effect-app": "3.1.0"
+    "@effect-app/vue": "2.51.11",
+    "effect-app": "3.0.10"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaArray.vue

@@ -1,31 +1,31 @@
 <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 }" />
+  <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>
+  </form.Field>
 </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,
@@ -39,7 +39,9 @@ const props = defineProps<
     OmegaInputProps<From, To>,
     "validators" | "options" | "label" | "type" | "items"
   > & {
-    items?: DeepValue<To, DeepKeys<To>>
+    defaultItems?: DeepValue<To, DeepKeys<To>>
+    // deprecated items, caused bugs in state update, use defaultItems instead. It's not a simple Never, because Volar explodes
+    items?: "please use `defaultItems` instead"
   }
 >()
 
@@ -47,9 +49,19 @@ defineOptions({
   inheritAttrs: false,
 })
 
-onMounted(() => {
-  if (props.items) {
-    props.form.setFieldValue(props.name as any, props.items)
+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(async () => {
+  if (props.defaultItems && !items.value) {
+    props.form.setFieldValue(props.name, props.defaultItems)
   }
 })