@effect-app/vue-components 0.27.16 → 1.0.0-next.1

package/src/components/OmegaForm/useOmegaForm.ts

@@ -2,14 +2,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import * as api from "@opentelemetry/api"
-import { type DeepKeys, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, useForm } from "@tanstack/vue-form"
+import { type DeepKeys, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, StandardSchemaV1Issue, useForm, useStore } from "@tanstack/vue-form"
 import { Effect, Fiber, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
-import { computed, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, provide } from "vue"
+import { Component, computed, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, watch } from "vue"
+import { getOmegaStore } from "./getOmegaStore"
 import { type InputProps } from "./InputProps"
-import OmegaFormInput from "./OmegaFormInput.vue"
-import { type FieldValidators, type FilterItems, type FormProps, generateMetaFromSchema, type MetaRecord, type NestedKeyOf, type OmegaFormApi, type TypeOverride } from "./OmegaFormStuff"
+import OmegaArray from "./OmegaArray.vue"
+import OmegaAutoGen from "./OmegaAutoGen.vue"
+import { buildOmegaErrors } from "./OmegaErrorsContext"
+import OmegaErrorsInternal from "./OmegaErrorsInternal.vue"
+import { type FieldValidators, type FilterItems, type FormProps, generateMetaFromSchema, type MetaRecord, type NestedKeyOf, type OmegaFormApi, OmegaFormState, ShowErrorsOn, type TypeOverride } from "./OmegaFormStuff"
+import OmegaInput from "./OmegaInput.vue"
+import OmegaForm from "./OmegaWrapper.vue"
 
 type keysRule<T> =
   | {
@@ -21,8 +27,63 @@ type keysRule<T> =
     banKeys?: NestedKeyOf<T>[]
   }
 
+const fHoc = (form: OF<any, any>) => {
+  return function FormHoc<P>(
+    WrappedComponent: Component<P>
+  ): ConcreteComponent<P> {
+    //     return defineComponent({
+    //       setup() {
+    //         return {
+    //           child: WrappedComponent,
+    //           form
+    //         }
+    //       },
+    //       template: `<component :is="child" v-bind="$attrs" :form="form" v-on="$listeners">
+    //       <template v-for="(_, name) in $slots" #[name]="scope">
+    //   <slot :name v-bind="scope ?? {}" />
+    // </template>
+    //     </component>`
+    //     })
+
+    return {
+      render() {
+        return h(WrappedComponent, {
+          form,
+          on: this.$listeners,
+          attrs: this.$attrs
+        } as any, this.$slots)
+      }
+    }
+  }
+}
+
+const eHoc = (errorProps: ReturnType<typeof buildOmegaErrors>) => {
+  return function FormHoc<P>(
+    WrappedComponent: Component<P>
+  ): ConcreteComponent<P> {
+    return {
+      setup() {
+        return {
+          ...errorProps
+        }
+      },
+      render({ errors, generalErrors, showErrors }: any) {
+        return h(WrappedComponent, {
+          errors,
+          generalErrors,
+          showErrors,
+          on: this.$listeners,
+          attrs: this.$attrs,
+          scopedSlots: this.$scopedSlots
+        } as any)
+      }
+    }
+  }
+}
+
 export type OmegaConfig<T> = {
   i18nNamespace?: string
+  showErrorsOn?: ShowErrorsOn
 
   persistency?: {
     /** Order of importance:
@@ -102,6 +163,125 @@ export interface OmegaFormReturn<
   ) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>
   }
+  Errors: (
+    __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<ReturnType<typeof OmegaErrorsInternal["props"]>, "errors" | "generalErrors" | "showErrors">
+          & Partial<{}>
+        >
+        & import("vue").PublicProps
+      expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
+      attrs: any
+      slots: {}
+      emit: {}
+    }>
+  ) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>
+  }
+  Array: (
+    __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<ReturnType<typeof OmegaArray<From, To>>["props"], "form">
+          & Partial<{}>
+        >
+        & import("vue").PublicProps
+      expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
+      attrs: any
+      slots: {
+        // todo
+        default(props: { subField: any; subState: any; index: number; field: any }): void
+        preArray(props: { field: any; state: any }): void
+        postArray(props: { field: any; state: any }): void
+        field(props: { field: any }): void
+      }
+
+      emit: {}
+    }>
+  ) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>
+  }
+
+  AutoGen: (
+    __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<ReturnType<typeof OmegaAutoGen<From, To>>["props"], "form">
+          & Partial<{}>
+        >
+        & import("vue").PublicProps
+      expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
+      attrs: any
+      slots: {}
+      emit: {}
+    }>
+  ) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>
+  }
+
+  Form: <K extends keyof OmegaFormState<To, From>, Props = DefaultInputProps<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
+          >
+          & ReturnType<typeof OmegaForm<From, To, K, Props>>["props"]
+          & Partial<{}>
+        >
+        & import("vue").PublicProps
+      expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
+      attrs: any
+      slots: {
+        default(props: { subscribedValues: ReturnType<typeof getOmegaStore<To, From, K>>["value"] }): void
+      }
+      emit: {}
+    }>
+  ) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>
+  }
 }
 
 export const useOmegaForm = <
@@ -366,10 +546,62 @@ export const useOmegaForm = <
     //   )
   })
 
-  provide(OmegaFormKey, formWithExtras)
+  const formSubmissionAttempts = useStore(
+    formWithExtras.store,
+    (state) => state.submissionAttempts
+  )
+
+  const errors = formWithExtras.useStore((state) => state.errors)
+
+  watch(
+    () => [formWithExtras.filterItems, errors.value],
+    () => {
+      const filterItems: FilterItems | undefined = formWithExtras.filterItems
+      const currentErrors = errors.value
+      if (!filterItems) return {}
+      if (!currentErrors) return {}
+      const errorList = Object
+        .values(currentErrors)
+        .filter(
+          (fieldErrors): fieldErrors is Record<string, StandardSchemaV1Issue[]> => Boolean(fieldErrors)
+        )
+        .flatMap((fieldErrors) =>
+          Object
+            .values(fieldErrors)
+            .flat()
+            .map((issue: StandardSchemaV1Issue) => issue.message)
+        )
+
+      if (errorList.some((e) => e === filterItems.message)) {
+        // TODO: Investigate if filterItems.items should be typed based on DeepKeys<To>.
+        filterItems.items.forEach((item: keyof From) => {
+          const m = formWithExtras.getFieldMeta(item as any)
+          if (m) {
+            formWithExtras.setFieldMeta(item as any, {
+              ...m,
+              errorMap: {
+                onSubmit: [
+                  { path: [item as string], message: filterItems.message }
+                ]
+              }
+            })
+          }
+        })
+      }
+      return {}
+    }
+  )
+
+  //  provide(OmegaFormKey, formWithExtras)
+  const errorContext = buildOmegaErrors(formSubmissionAttempts, errors, omegaConfig?.showErrorsOn)
 
   return Object.assign(formWithExtras, {
-    Input: omegaConfig?.input ? omegaConfig.input(formWithExtras) : OmegaFormInput as any,
-    Field: form.Field
+    errorContext,
+    Form: fHoc(formWithExtras)(OmegaForm as any) as any,
+    Input: omegaConfig?.input ? omegaConfig.input(formWithExtras) : fHoc(formWithExtras)(OmegaInput) as any,
+    Field: form.Field,
+    Errors: eHoc(errorContext)(OmegaErrorsInternal) as any,
+    Array: fHoc(formWithExtras)(OmegaArray) as any,
+    AutoGen: fHoc(formWithExtras)(OmegaAutoGen as any) as any
   })
 }

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 import { type makeIntl } from "@effect-app/vue"
+import { type S } from "effect-app"
 import { inject, type InjectionKey, provide } from "vue"
 
 export const useIntlKey = Symbol() as InjectionKey<
@@ -14,3 +15,18 @@ export const useIntl = () => {
 export const provideIntl = (
   intl: ReturnType<typeof makeIntl>["useIntl"]
 ) => provide(useIntlKey, intl)
+
+/**
+ * Recursively extracts the source AST from a transformation chain.
+ * If the provided AST is a transformation, it follows the chain to find the original source AST.
+ *
+ * @param ast - The AST node to extract the transformation source from
+ * @returns The source AST at the end of the transformation chain
+ */
+export function getTransformationFrom(ast: S.AST.AST) {
+  if (ast._tag === "Transformation") {
+    return getTransformationFrom(ast.from)
+  } else {
+    return ast
+  }
+}

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

@@ -1,15 +0,0 @@
-declare var __VLS_6: {
-    errors: readonly import("./OmegaFormStuff").OmegaError[];
-    showedGeneralErrors: string[];
-};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/vue-components.es22.js

@@ -1,12 +0,0 @@
-import { Exit as c, Runtime as s } from "effect";
-import { dual as n, isFunction as m } from "./vue-components.es28.js";
-const i = Symbol.for("clone-trait"), u = n(2, (e, t) => i in e ? e[i](t) : Object.setPrototypeOf(t, Object.getPrototypeOf(e)));
-n(2, (e, t) => u(e, { ...e, ...m(t) ? t(e) : t }));
-const b = (e) => new Promise((t, r) => e.addObserver((o) => {
-  c.isSuccess(o) ? t(o.value) : r(s.makeFiberFailure(o.cause));
-}));
-export {
-  u as clone,
-  i as cloneTrait,
-  b as runtimeFiberAsPromise
-};

package/dist/vue-components.es25.js

@@ -1,5 +0,0 @@
-import { ContextAPI as t } from "./vue-components.es40.js";
-var o = t.getInstance();
-export {
-  o as context
-};

package/dist/vue-components.es41.js

@@ -1,28 +0,0 @@
-import { registerGlobal as a, getGlobal as p, unregisterGlobal as s } from "./vue-components.es45.js";
-import { ProxyTracerProvider as i } from "./vue-components.es34.js";
-import { wrapSpanContext as c, isSpanContextValid as h } from "./vue-components.es37.js";
-import { deleteSpan as g, getSpan as S, getActiveSpan as x, getSpanContext as d, setSpan as f, setSpanContext as l } from "./vue-components.es46.js";
-import { DiagAPI as o } from "./vue-components.es42.js";
-var n = "trace", y = (
-  /** @class */
-  (function() {
-    function t() {
-      this._proxyTracerProvider = new i(), this.wrapSpanContext = c, this.isSpanContextValid = h, this.deleteSpan = g, this.getSpan = S, this.getActiveSpan = x, this.getSpanContext = d, this.setSpan = f, this.setSpanContext = l;
-    }
-    return t.getInstance = function() {
-      return this._instance || (this._instance = new t()), this._instance;
-    }, t.prototype.setGlobalTracerProvider = function(r) {
-      var e = a(n, this._proxyTracerProvider, o.instance());
-      return e && this._proxyTracerProvider.setDelegate(r), e;
-    }, t.prototype.getTracerProvider = function() {
-      return p(n) || this._proxyTracerProvider;
-    }, t.prototype.getTracer = function(r, e) {
-      return this.getTracerProvider().getTracer(r, e);
-    }, t.prototype.disable = function() {
-      s(n, o.instance()), this._proxyTracerProvider = new i();
-    }, t;
-  })()
-);
-export {
-  y as TraceAPI
-};

package/dist/vue-components.es52.js

@@ -1,4 +0,0 @@
-var o = typeof globalThis == "object" ? globalThis : typeof self == "object" ? self : typeof window == "object" ? window : typeof global == "object" ? global : {};
-export {
-  o as _globalThis
-};

package/dist/vue-components.es53.js

@@ -1,6 +0,0 @@
-(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 o from "./vue-components.es48.js";
-
-export {
-  o as default
-};