@effect-app/vue-components 0.3.3 → 0.4.1

package/dist/vue-components.es5.js

@@ -1,125 +1,152 @@
-import { useForm as E } from "@tanstack/vue-form";
-import { S as I } from "effect-app";
+import { useForm as P } from "@tanstack/vue-form";
+import { S as A } from "effect-app";
 import { generateMetaFromSchema as N } from "./vue-components.es6.js";
-import { computed as a, onUnmounted as R, onMounted as A, onBeforeUnmount as D } from "vue";
-import { isObject as J } from "./vue-components.es15.js";
-const z = (h, u, i) => {
-  if (!h) throw new Error("Schema is required");
-  const b = I.standardSchemaV1(h), { filterItems: V, meta: t } = N(h), c = a(() => {
+import { computed as b, onUnmounted as R, onMounted as p, onBeforeUnmount as q, defineComponent as D, h as J } from "vue";
+import { isObject as K } from "./vue-components.es15.js";
+import M from "./vue-components.es8.js";
+const G = (w, s, i) => {
+  if (!w) throw new Error("Schema is required");
+  const V = A.standardSchemaV1(w), { filterItems: L, meta: t } = N(w), d = b(() => {
     var l;
     if ((l = i == null ? void 0 : i.persistency) != null && l.id)
       return i.persistency.id;
     const e = window.location.pathname, r = Object.keys(t);
     return `${e}-${r.join("-")}`;
-  }), L = () => {
+  }), U = () => {
     const e = new URLSearchParams(window.location.search);
-    e.delete(c.value);
+    e.delete(d.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
   };
-  function f(e, r) {
+  function h(e, r) {
     for (const l in r)
-      r[l] && J(r[l]) ? (e[l] || (e[l] = {}), f(e[l], r[l])) : e[l] = r[l];
+      r[l] && K(r[l]) ? (e[l] || (e[l] = {}), h(e[l], r[l])) : e[l] = r[l];
     return e;
   }
-  const U = a(() => {
+  const j = b(() => {
     var l;
-    if (u != null && u.defaultValues && !((l = i == null ? void 0 : i.persistency) != null && l.overrideDefaultValues))
-      return u == null ? void 0 : u.defaultValues;
+    if (s != null && s.defaultValues && !((l = i == null ? void 0 : i.persistency) != null && l.overrideDefaultValues))
+      return s == null ? void 0 : s.defaultValues;
     let e;
     const r = i == null ? void 0 : i.persistency;
     if (!(r != null && r.policies) || r.policies.length === 0) return {};
     if (r.policies.includes("querystring"))
       try {
-        const d = new URLSearchParams(window.location.search).get(c.value);
-        L(), d && (e = JSON.parse(d));
-      } catch (s) {
-        console.error(s);
+        const n = new URLSearchParams(window.location.search).get(d.value);
+        U(), n && (e = JSON.parse(n));
+      } catch (u) {
+        console.error(u);
       }
     if (
       // query string has higher priority than local/session storage
       !e && (r.policies.includes("local") || r.policies.includes("session"))
     ) {
-      const s = r.policies.includes("local") ? localStorage : sessionStorage;
-      if (s)
+      const u = r.policies.includes("local") ? localStorage : sessionStorage;
+      if (u)
         try {
-          const d = JSON.parse(
-            s.getItem(c.value) || "{}"
+          const n = JSON.parse(
+            u.getItem(d.value) || "{}"
           );
-          s.removeItem(c.value), e = d;
-        } catch (d) {
-          console.error(d);
+          u.removeItem(d.value), e = n;
+        } catch (n) {
+          console.error(n);
         }
     }
-    if (e ?? (e = {}), (u == null ? void 0 : u.defaultValues) == null)
+    if (e ?? (e = {}), (s == null ? void 0 : s.defaultValues) == null)
       return e;
     {
-      const s = u == null ? void 0 : u.defaultValues;
-      return f(s, e);
+      const u = s == null ? void 0 : s.defaultValues;
+      return h(u, e);
     }
-  }), n = E({
-    ...u,
+  }), c = P({
+    ...s,
     validators: {
-      onSubmit: b,
-      ...(u == null ? void 0 : u.validators) || {}
+      onSubmit: V,
+      ...(s == null ? void 0 : s.validators) || {}
     },
-    onSubmit: u != null && u.onSubmit ? ({ formApi: e, meta: r, value: l }) => {
-      var s;
-      return (s = u.onSubmit) == null ? void 0 : s.call(u, {
+    onSubmit: s != null && s.onSubmit ? ({ formApi: e, meta: r, value: l }) => {
+      var u;
+      return (u = s.onSubmit) == null ? void 0 : u.call(s, {
         formApi: e,
         meta: r,
         value: l
       });
     } : void 0,
-    defaultValues: U.value
-  }), j = () => {
+    defaultValues: j.value
+  }), E = () => {
     Object.keys(t).forEach((e) => {
-      n.setFieldValue(e, void 0);
+      c.setFieldValue(e, void 0);
     });
-  }, o = (e) => e.reduce(
+  }, a = (e) => e.reduce(
     (r, l) => {
-      const s = l.split(".");
-      return s.reduce((d, w, P) => (P === s.length - 1 ? d[w] = n.getFieldValue(l) : d[w] = d[w] ?? {}, d[w]), r), r;
+      const u = l.split(".");
+      return u.reduce((n, o, I) => (I === u.length - 1 ? n[o] = c.getFieldValue(l) : n[o] = n[o] ?? {}, n[o]), r), r;
     },
     {}
-  ), v = (e) => {
+  ), S = (e) => {
     if (e) {
       if (Array.isArray(e.keys))
-        return o(e.keys);
+        return a(e.keys);
       if (Array.isArray(e.banKeys)) {
         const r = Object.keys(t).filter(
           (l) => {
-            var s;
-            return (s = e.banKeys) == null ? void 0 : s.includes(l);
+            var u;
+            return (u = e.banKeys) == null ? void 0 : u.includes(l);
           }
         );
-        return o(r);
+        return a(r);
       }
-      return n.store.state.values;
+      return c.store.state.values;
     }
-  }, S = () => {
+  }, f = () => {
     const e = i == null ? void 0 : i.persistency;
     if (!(!(e != null && e.policies) || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
       const r = e.policies.includes("local") ? localStorage : sessionStorage;
       if (!r) return;
-      const l = v(e);
-      return r.setItem(c.value, JSON.stringify(l));
+      const l = S(e);
+      return r.setItem(d.value, JSON.stringify(l));
     }
-  }, y = () => {
+  }, v = () => {
     const e = i == null ? void 0 : i.persistency;
     if (!(!(e != null && e.policies) || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = v(e), l = new URLSearchParams(window.location.search);
-      l.set(c.value, JSON.stringify(r));
-      const s = new URL(window.location.href);
-      s.search = l.toString(), window.history.replaceState({}, "", s.toString());
+      const r = S(e), l = new URLSearchParams(window.location.search);
+      l.set(d.value, JSON.stringify(r));
+      const u = new URL(window.location.href);
+      u.search = l.toString(), window.history.replaceState({}, "", u.toString());
     }
   };
-  return R(S), A(() => {
-    window.addEventListener("beforeunload", S), window.addEventListener("blur", y);
-  }), D(() => {
-    window.removeEventListener("beforeunload", S), window.removeEventListener("blur", y);
-  }), Object.assign(n, { meta: t, filterItems: V, clear: j });
+  R(f), p(() => {
+    window.addEventListener("beforeunload", f), window.addEventListener("blur", v);
+  }), q(() => {
+    window.removeEventListener("beforeunload", f), window.removeEventListener("blur", v);
+  });
+  const y = Object.assign(c, {
+    meta: t,
+    filterItems: L,
+    clear: E
+  });
+  return Object.assign(y, {
+    Input: D({
+      name: "FormInput",
+      inheritAttrs: !0,
+      setup(e, { attrs: r, slots: l }) {
+        const u = r.name, n = r.label;
+        if (!u || !n)
+          throw new Error("OmegaForm.Input requires name and label props");
+        return () => J(
+          M,
+          {
+            ...r,
+            name: u,
+            label: n,
+            form: y
+          },
+          l
+        );
+      }
+    })
+  });
 };
 export {
-  z as useOmegaForm
+  G as useOmegaForm
 };

package/dist/vue-components.es7.js

@@ -1,7 +1,7 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-fd152523]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-fd152523]{display:contents}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-6833e150]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const o=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(o&&o.call(this),this.shadowRoot){const d=document.createElement("style");d.appendChild(document.createTextNode("fieldset[data-v-6833e150]{display:contents}")),this.shadowRoot.appendChild(d)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es11.js";
 import m from "./vue-components.es12.js";
-const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-fd152523"]]);
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-6833e150"]]);
 export {
   a as default
 };

package/dist/vue-components.es8.js

@@ -1,6 +1,6 @@
 import { defineComponent as i, computed as t, createBlock as p, openBlock as d, resolveDynamicComponent as u, withCtx as r, createVNode as f, mergeProps as c, renderSlot as v, normalizeProps as h, guardReactiveProps as g } from "vue";
 import { generateInputStandardSchemaFromFieldMeta as y } from "./vue-components.es6.js";
-import b from "./vue-components.es16.js";
+import b from "./vue-components.es17.js";
 const S = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "OmegaInput",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",
@@ -50,6 +50,8 @@
     "./dist/vue-components.css": "./dist/vue-components.css"
   },
   "dependencies": {
+    "highlight.js": "^11.11.1",
+    "vue3-highlightjs": "^1.0.5",
     "@effect-app/vue": "2.40.1",
     "effect-app": "2.39.1"
   },

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -18,6 +18,17 @@ import { useIntl } from "../../utils"
 
 export type ShowErrorsOn = "onChange" | "onBlur" | "onSubmit"
 
+export type OmegaInputProps<From, To> = {
+  form: FormType<From, To> & {
+    meta: MetaRecord<To>
+  }
+  name: NestedKeyOf<To>
+  validators?: FieldValidators<From>
+  label: string
+  options?: { title: string; value: string }[]
+  type?: TypeOverride
+}
+
 export type TypeOverride =
   | "string"
   | "text"

package/src/components/OmegaForm/OmegaInput.vue

@@ -28,25 +28,12 @@
 import { computed } from "vue"
 import {
   generateInputStandardSchemaFromFieldMeta,
-  type FieldValidators,
-  type FormType,
-  type MetaRecord,
-  type NestedKeyOf,
-  type TypeOverride,
+  type OmegaInputProps,
 } from "./OmegaFormStuff"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
 import type { OmegaFieldInternalApi } from "./InputProps"
 
-const props = defineProps<{
-  form: FormType<From, To> & {
-    meta: MetaRecord<To>
-  }
-  name: NestedKeyOf<To>
-  validators?: FieldValidators<From>
-  label: string
-  options?: { title: string; value: string }[]
-  type?: TypeOverride
-}>()
+const props = defineProps<OmegaInputProps<From, To>>()
 
 defineOptions({
   inheritAttrs: false,

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -1,7 +1,19 @@
 <template>
-  <form novalidate @submit.prevent.stop="form.handleSubmit()">
+  <form novalidate @submit.prevent.stop="formToUse.handleSubmit()">
     <fieldset :disabled="formIsSubmitting">
-      <slot :form="form" :subscribed-values="subscribedValues" />
+      <!-- Render externalForm + default slots if props.form is provided -->
+      <template v-if="props.form">
+        <slot name="externalForm" :subscribed-values="subscribedValues" />
+        <slot />
+        <!-- default slot -->
+      </template>
+      <!-- Render internalForm slot if form was created locally -->
+      <slot
+        v-else-if="localForm"
+        name="internalForm"
+        :form="localForm"
+        :subscribed-values="subscribedValues"
+      />
     </fieldset>
   </form>
 </template>
@@ -62,7 +74,7 @@ import {
   type OmegaFormReturn,
   useOmegaForm,
 } from "./useOmegaForm"
-import { watch } from "vue"
+import { computed, watch, defineSlots } from "vue"
 
 const props = defineProps<
   {
@@ -81,32 +93,40 @@ const props = defineProps<
   )
 >()
 
-const form =
-  props.form ?? useOmegaForm<From, To>(props.schema, props, props.omegaConfig)
+const localForm = computed(() => {
+  if (props.form || !props.schema) {
+    return undefined
+  }
+  return useOmegaForm<From, To>(props.schema, props, props.omegaConfig)
+})
 
-const formIsSubmitting = useStore(form.store, state => state.isSubmitting)
+const formToUse = computed(() => props.form ?? localForm.value!)
 
-defineExpose(form)
+const formIsSubmitting = useStore(
+  formToUse.value.store,
+  state => state.isSubmitting,
+)
 
 const subscribedValues = getOmegaStore(
-  form as OmegaFormApi<To, From>,
+  formToUse.value as OmegaFormApi<To, From>,
   props.subscribe,
 )
 
 const formSubmissionAttempts = useStore(
-  form.store,
+  formToUse.value.store,
   state => state.submissionAttempts,
 )
 
-const errors = form.useStore(state => state.errors)
+const errors = computed(() => formToUse.value.useStore(state => state.errors))
 
 watch(
-  () => [form.filterItems, errors.value],
+  () => [formToUse.value.filterItems, errors.value.value],
   () => {
-    const filterItems: FilterItems | undefined = form.filterItems
+    const filterItems: FilterItems | undefined = formToUse.value.filterItems
+    const currentErrors = errors.value.value
     if (!filterItems) return {}
-    if (!errors.value) return {}
-    const errorList = Object.values(errors.value)
+    if (!currentErrors) return {}
+    const errorList = Object.values(currentErrors)
       .filter(
         (fieldErrors): fieldErrors is Record<string, StandardSchemaV1Issue[]> =>
           Boolean(fieldErrors),
@@ -116,22 +136,40 @@ watch(
           .flat()
           .map((issue: StandardSchemaV1Issue) => issue.message),
       )
+
     if (errorList.some(e => e === filterItems.message)) {
-      filterItems.items.forEach((item: any) => {
-        const m: any = form.getFieldMeta(item)
-        form.setFieldMeta(item, {
-          ...m,
-          errorMap: {
-            onSubmit: [{ path: [item], message: filterItems.message }],
-          },
-        })
+      // TODO: Investigate if filterItems.items should be typed based on DeepKeys<To>.
+      filterItems.items.forEach((item: keyof From) => {
+        const m = formToUse.value.getFieldMeta(item as any)
+        if (m) {
+          formToUse.value.setFieldMeta(item as any, {
+            ...m,
+            errorMap: {
+              onSubmit: [
+                { path: [item as string], message: filterItems.message },
+              ],
+            },
+          })
+        }
       })
     }
     return {}
   },
 )
 
-provideOmegaErrors(formSubmissionAttempts, errors, props.showErrorsOn)
+provideOmegaErrors(formSubmissionAttempts, errors.value, props.showErrorsOn)
+
+defineSlots<{
+  // Default slot (no props)
+  default(): void
+  // Named slot when form is created internally via schema
+  internalForm(props: {
+    form: OmegaFormReturn<To, From>
+    subscribedValues: typeof subscribedValues.value
+  }): void
+  // Named slot when form is passed via props (provides subscribedValues)
+  externalForm(props: { subscribedValues: typeof subscribedValues.value }): void
+}>()
 </script>
 
 <style scoped>

package/src/components/OmegaForm/index.ts

@@ -10,9 +10,9 @@ export { default } from "./OmegaWrapper.vue"
 
 export { OmegaForm, OmegaInput, OmegaErrors }
 
-const OmegaFormCE = defineCustomElement(OmegaForm)
-const OmegaInputCE = defineCustomElement(OmegaInput)
-const OmegaErrorsCE = defineCustomElement(OmegaErrors)
+const OmegaFormCE = defineCustomElement(OmegaForm as any)
+const OmegaInputCE = defineCustomElement(OmegaInput as any)
+const OmegaErrorsCE = defineCustomElement(OmegaErrors as any)
 
 export { OmegaFormCE, OmegaInputCE, OmegaErrorsCE }
 

package/src/components/OmegaForm/useOmegaForm.ts

@@ -13,9 +13,20 @@ import {
   type FormProps,
   type MetaRecord,
   type OmegaFormApi,
+  type OmegaInputProps,
 } from "./OmegaFormStuff"
-import { computed, onBeforeUnmount, onMounted, onUnmounted } from "vue"
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  defineComponent,
+  h,
+  type DefineComponent,
+  type Component,
+} from "vue"
 import { isObject } from "effect/Predicate"
+import OmegaInput from "./OmegaInput.vue"
 
 type keysRule<T> =
   | {
@@ -39,11 +50,14 @@ export type OmegaConfig<T> = {
   } & keysRule<T>
 }
 
-export interface OmegaFormReturn<To, From> extends OmegaFormApi<To, From> {
+interface OF<To, From> extends OmegaFormApi<To, From> {
   meta: MetaRecord<To>
   filterItems?: FilterItems
   clear: () => void
 }
+export interface OmegaFormReturn<To, From> extends OF<To, From> {
+  Input: DefineComponent<Omit<OmegaInputProps<From, To>, "form">, {}, {}>
+}
 
 export const useOmegaForm = <
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -265,7 +279,39 @@ export const useOmegaForm = <
     window.removeEventListener("blur", saveDataInUrl)
   })
 
-  const exposed = Object.assign(form, { meta, filterItems, clear })
+  const formWithExtras: OF<To, From> = Object.assign(form, {
+    meta,
+    filterItems,
+    clear,
+  })
+
+  return Object.assign(formWithExtras, {
+    Input: defineComponent({
+      name: "FormInput",
+      inheritAttrs: true,
+      setup(_, { attrs, slots }) {
+        const name = attrs.name as NestedKeyOf<To>
+        const label = attrs.label as string
+        if (!name || !label) {
+          throw new Error("OmegaForm.Input requires name and label props")
+        }
 
-  return exposed
+        return () =>
+          h(
+            OmegaInput as Component,
+            {
+              ...attrs,
+              name,
+              label,
+              form: formWithExtras,
+            },
+            slots,
+          )
+      },
+    }) as any as DefineComponent<
+      Omit<OmegaInputProps<From, To>, "form">,
+      {},
+      {}
+    >,
+  })
 }

package/src/stories/OmegaForm/ComplexForm.vue

@@ -1,36 +1,42 @@
 <template>
-  <OmegaForm :form="form">
-    <template #default="{ form }">
-      <OmegaInput label="aString" :form="form" name="aString" />
-      <OmegaInput label="aStringMin2" :form="form" name="aStringMin2" />
-      <OmegaInput label="aStringMin2Max4" :form="form" name="aStringMin2Max4" />
-      <OmegaInput
-        label="aStringMin2Max3Nullable"
-        :form="form"
-        name="aStringMin2Max3Nullable"
-      />
-      <OmegaInput label="aNumber" :form="form" name="aNumber" />
-      <OmegaInput label="aNumberMin2" :form="form" name="aNumberMin2" />
-      <OmegaInput label="aNumberMin2Max" :form="form" name="aNumberMin2Max" />
-      <OmegaInput
-        label="aNumberMin2Max4Nullable"
-        :form="form"
-        name="aNumberMin2Max4Nullable"
-      />
-      <OmegaInput
-        label="aSelect"
-        :form="form"
-        name="aSelect"
-        :options="[
-          { title: 'a', value: 'a' },
-          { title: 'b', value: 'b' },
-          { title: 'c', value: 'c' },
-        ]"
-      />
-      <button>Submit</button>
-      <button type="reset" @click.prevent="form.clear()">Clear</button>
-      <button type="button" @click="form.reset()">Reset</button>
-    </template>
+  <OmegaForm :form="exampleForm">
+    <OmegaInput label="aString" :form="exampleForm" name="aString" />
+    <OmegaInput label="aStringMin2" :form="exampleForm" name="aStringMin2" />
+    <OmegaInput
+      label="aStringMin2Max4"
+      :form="exampleForm"
+      name="aStringMin2Max4"
+    />
+    <OmegaInput
+      label="aStringMin2Max3Nullable"
+      :form="exampleForm"
+      name="aStringMin2Max3Nullable"
+    />
+    <OmegaInput label="aNumber" :form="exampleForm" name="aNumber" />
+    <OmegaInput label="aNumberMin2" :form="exampleForm" name="aNumberMin2" />
+    <OmegaInput
+      label="aNumberMin2Max"
+      :form="exampleForm"
+      name="aNumberMin2Max"
+    />
+    <OmegaInput
+      label="aNumberMin2Max4Nullable"
+      :form="exampleForm"
+      name="aNumberMin2Max4Nullable"
+    />
+    <OmegaInput
+      label="aSelect"
+      :form="exampleForm"
+      name="aSelect"
+      :options="[
+        { title: 'a', value: 'a' },
+        { title: 'b', value: 'b' },
+        { title: 'c', value: 'c' },
+      ]"
+    />
+    <button>Submit</button>
+    <button type="reset" @click.prevent="exampleForm.clear()">Clear</button>
+    <button type="button" @click="exampleForm.reset()">Reset</button>
   </OmegaForm>
 </template>
 
@@ -38,7 +44,7 @@
 import { S } from "effect-app"
 import { OmegaForm, OmegaInput, useOmegaForm } from "../../components/OmegaForm"
 
-const form = useOmegaForm(
+const exampleForm = useOmegaForm(
   S.Struct({
     aString: S.String,
     aStringMin2: S.String.pipe(S.minLength(2)),

package/src/stories/OmegaForm/EmailForm.vue

@@ -4,7 +4,7 @@
     :on-submit="onSubmit"
     :default-values="defaultValues"
   >
-    <template #default="{ form }">
+    <template #internalForm="{ form }">
       <OmegaInput label="email" name="email" :form="form" />
       <OmegaInput label="confirm" name="confirm" :form="form" />
       <button>submit</button>

package/src/stories/OmegaForm/Meta.vue

@@ -19,7 +19,7 @@
       })
     "
   >
-    <template #default="{ form }">
+    <template #internalForm="{ form }">
       <ul>
         <li v-for="key in Object.keys(form.meta)" :key="key">
           {{ key }}: {{ (form.meta as any)[key] }}