@effect-app/vue-components 0.3.0 → 0.3.1

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

@@ -9,7 +9,11 @@ type keysRule<T> = {
 };
 export type OmegaConfig<T> = {
     persistency?: {
-        method?: "session" | "local" | "none";
+        /** Order of importance:
+         * - "querystring": Highest priority when persisting
+         * - "local" and then "session": Lower priority storage options
+         */
+        policies?: ("local" | "session" | "querystring")[];
         overrideDefaultValues?: boolean;
         id?: string;
     } & keysRule<T>;

package/dist/vue-components.es11.js

@@ -1,6 +1,6 @@
 import { defineComponent as d, watch as b, createElementBlock as g, openBlock as S, withModifiers as v, unref as n, createElementVNode as h, renderSlot as O } from "vue";
 import { useStore as i } from "@tanstack/vue-form";
-import { getOmegaStore as M } from "./vue-components.es17.js";
+import { getOmegaStore as M } from "./vue-components.es16.js";
 import { provideOmegaErrors as y } from "./vue-components.es4.js";
 import { useOmegaForm as E } from "./vue-components.es5.js";
 const w = ["disabled"], A = /* @__PURE__ */ d({

package/dist/vue-components.es15.js

@@ -1,6 +1,95 @@
-const o = (n) => () => n, t = /* @__PURE__ */ o(void 0), c = t;
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as B, getCurrentInstance as L, useId as P, computed as n, watch as x, onMounted as _, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
+import { useStore as G } from "@tanstack/vue-form";
+import { useOmegaErrors as H } from "./vue-components.es4.js";
+import J from "./vue-components.es18.js";
+
+const Z = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "OmegaInternalInput",
+  props: {
+    field: {},
+    meta: {},
+    label: {},
+    options: {},
+    type: {},
+    validators: {}
+  },
+  setup(q) {
+    const e = q, o = L(), C = o == null ? void 0 : o.appContext.components.VTextField, u = P(), s = e.field, a = G(s.store, (t) => t), f = n(() => {
+      var t, r;
+      return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
+    }), l = n(() => a.value.value), d = n(
+      () => (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
+      )
+    );
+    x(
+      () => [!!l.value],
+      () => {
+        var t, r;
+        d.value.length && !l.value && !((t = e.meta) != null && t.required) && s.setValue(
+          ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
+        );
+      }
+    ), _(() => {
+      var t, r;
+      !l.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && s.setValue(null);
+    });
+    const { addError: I, removeError: O, showErrors: $, showErrorsOn: k } = H(), i = S(!1);
+    A(() => {
+      ($.value || k === "onChange") && (i.value = !0);
+    });
+    const m = () => {
+      i.value = !0;
+    };
+    _(() => {
+      l.value && m();
+    });
+    const v = n(() => !i.value && f.value !== "select" ? [] : d.value);
+    x(
+      () => a.value.meta.errors,
+      () => {
+        a.value.meta.errors.length ? I({
+          inputId: u,
+          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
+          label: e.label
+        }) : O(u);
+      }
+    );
+    const p = n(() => {
+      var t, r, c, g, y, h, b, E, V, w;
+      return {
+        id: u,
+        required: (t = e.meta) == null ? void 0 : t.required,
+        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
+        maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
+        max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
+        min: ((E = e.meta) == null ? void 0 : E.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
+        name: e.field.name,
+        modelValue: e.field.state.value,
+        errorMessages: v.value,
+        error: !!v.value.length,
+        field: e.field,
+        setRealDirty: m,
+        type: f.value,
+        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
+        options: e.options
+      };
+    });
+    return (t, r) => D(t.$slots, "default", F(M(p.value)), () => [
+      N("div", { onFocusout: m }, [
+        U(C) ? (z(), R(J, j({
+          key: 0,
+          "input-props": p.value
+        }, t.$attrs, {
+          "vuetify-value": p.value.field.state.value
+        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
+      ], 32)
+    ]);
+  }
+});
 export {
-  t as constUndefined,
-  c as constVoid,
-  o as constant
+  Z as default
 };

package/dist/vue-components.es16.js

@@ -1,95 +1,13 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as B, getCurrentInstance as L, useId as P, computed as n, watch as x, onMounted as _, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
-import { useStore as G } from "@tanstack/vue-form";
-import { useOmegaErrors as H } from "./vue-components.es4.js";
-import J from "./vue-components.es19.js";
-
-const Z = /* @__PURE__ */ B({
-  inheritAttrs: !1,
-  __name: "OmegaInternalInput",
-  props: {
-    field: {},
-    meta: {},
-    label: {},
-    options: {},
-    type: {},
-    validators: {}
-  },
-  setup(q) {
-    const e = q, o = L(), C = o == null ? void 0 : o.appContext.components.VTextField, u = P(), s = e.field, a = G(s.store, (t) => t), f = n(() => {
-      var t, r;
-      return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
-    }), l = n(() => a.value.value), d = n(
-      () => (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
-      )
-    );
-    x(
-      () => [!!l.value],
-      () => {
-        var t, r;
-        d.value.length && !l.value && !((t = e.meta) != null && t.required) && s.setValue(
-          ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
-        );
-      }
-    ), _(() => {
-      var t, r;
-      !l.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && s.setValue(null);
-    });
-    const { addError: I, removeError: O, showErrors: $, showErrorsOn: k } = H(), i = S(!1);
-    A(() => {
-      ($.value || k === "onChange") && (i.value = !0);
-    });
-    const m = () => {
-      i.value = !0;
-    };
-    _(() => {
-      l.value && m();
-    });
-    const v = n(() => !i.value && f.value !== "select" ? [] : d.value);
-    x(
-      () => a.value.meta.errors,
-      () => {
-        a.value.meta.errors.length ? I({
-          inputId: u,
-          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
-          label: e.label
-        }) : O(u);
-      }
-    );
-    const p = n(() => {
-      var t, r, c, g, y, h, b, E, V, w;
-      return {
-        id: u,
-        required: (t = e.meta) == null ? void 0 : t.required,
-        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
-        maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
-        max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
-        min: ((E = e.meta) == null ? void 0 : E.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
-        name: e.field.name,
-        modelValue: e.field.state.value,
-        errorMessages: v.value,
-        error: !!v.value.length,
-        field: e.field,
-        setRealDirty: m,
-        type: f.value,
-        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
-        options: e.options
-      };
-    });
-    return (t, r) => D(t.$slots, "default", F(M(p.value)), () => [
-      N("div", { onFocusout: m }, [
-        U(C) ? (z(), R(J, j({
-          key: 0,
-          "input-props": p.value
-        }, t.$attrs, {
-          "vuetify-value": p.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
-      ], 32)
-    ]);
-  }
-});
+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 {
-  Z as default
+  c as getOmegaStore
 };

package/dist/vue-components.es17.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 : {});
-}
+import f from "./vue-components.es15.js";
 export {
-  c as getOmegaStore
+  f as default
 };

package/dist/vue-components.es18.js

@@ -1,4 +1,117 @@
-import f from "./vue-components.es16.js";
+import { defineComponent as P, resolveComponent as u, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, mergeProps as s } from "vue";
+const b = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "OmegaInputVuetify",
+  props: {
+    inputProps: {},
+    vuetifyValue: {}
+  },
+  emits: ["focus", "blur"],
+  setup(y) {
+    return (e, r) => {
+      const a = u("v-checkbox"), i = u("v-text-field"), t = u("v-textarea"), m = u("v-select"), d = u("v-autocomplete");
+      return o(), g("div", {
+        class: "omega-input",
+        onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
+        onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
+      }, [
+        e.inputProps.type === "boolean" ? (o(), n(a, s({
+          key: 0,
+          id: e.inputProps.id,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error,
+          ripple: ""
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
+        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(i, s({
+          key: 1,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          "min-length": e.inputProps.minLength,
+          "max-length": e.inputProps.maxLength,
+          type: e.inputProps.type,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "text" ? (o(), n(t, s({
+          key: 2,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          "min-length": e.inputProps.minLength,
+          "max-length": e.inputProps.maxLength,
+          type: e.inputProps.type,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "number" ? (o(), n(i, s({
+          key: 3,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          min: e.inputProps.min,
+          max: e.inputProps.max,
+          type: e.inputProps.type,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          "onUpdate:modelValue": r[1] || (r[1] = (p) => {
+            e.inputProps.field.handleChange(Number(p));
+          })
+        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, s({
+          key: 4,
+          id: e.inputProps.id,
+          clearable: e.inputProps.type === "select",
+          required: e.inputProps.required,
+          multiple: e.inputProps.type === "multiple",
+          chips: e.inputProps.type === "multiple",
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          items: e.inputProps.options,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, s({
+          key: 5,
+          id: e.inputProps.id,
+          clearable: e.inputProps.type === "autocomplete",
+          multiple: e.inputProps.type === "autocompletemultiple",
+          required: e.inputProps.required,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          items: e.inputProps.options,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error,
+          chips: e.inputProps.type === "autocompletemultiple"
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
+      ], 32);
+    };
+  }
+});
 export {
-  f as default
+  b as default
 };

package/dist/{vue-components.es21.js → vue-components.es20.js}

@@ -1,5 +1,5 @@
 (function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import o from "./vue-components.es19.js";
+import o from "./vue-components.es18.js";
 
 export {
   o as default

package/dist/vue-components.es5.js

@@ -1,91 +1,110 @@
-import { useForm as E } from "@tanstack/vue-form";
-import { S as j, Match as n } from "effect-app";
-import { generateMetaFromSchema as A } from "./vue-components.es6.js";
-import { computed as b, onUnmounted as I, onMounted as K, onBeforeUnmount as M } from "vue";
-import { constVoid as x } from "./vue-components.es15.js";
-const m = (i, e, u) => {
-  if (!i) throw new Error("Schema is required");
-  const a = j.standardSchemaV1(i), { filterItems: f, meta: y } = A(i), o = b(() => {
-    var d;
-    if ((d = u == null ? void 0 : u.persistency) != null && d.id)
-      return u.persistency.id;
-    const l = window.location.pathname, r = Object.keys(y);
-    return `${l}-${r.join("-")}`;
-  }), w = b(() => {
+import { useForm as p } from "@tanstack/vue-form";
+import { S as E } from "effect-app";
+import { generateMetaFromSchema as P } from "./vue-components.es6.js";
+import { computed as y, onUnmounted as I, onMounted as N, onBeforeUnmount as R } from "vue";
+const K = (a, t, u) => {
+  if (!a) throw new Error("Schema is required");
+  const b = E.standardSchemaV1(a), { filterItems: f, meta: c } = P(a), i = y(() => {
     var r;
-    if (e != null && e.defaultValues && !((r = u == null ? void 0 : u.persistency) != null && r.overrideDefaultValues))
-      return e.defaultValues;
-    const l = u == null ? void 0 : u.persistency;
-    return n.value(l).pipe(
-      n.when(
-        { method: (d) => ["local", "session"].includes(d) },
-        (d) => {
-          const c = d.method === "local" ? localStorage : sessionStorage;
-          if (c)
-            try {
-              const s = JSON.parse(
-                c.getItem(o.value) || "{}"
-              );
-              return c.removeItem(o.value), s;
-            } catch (s) {
-              return console.error(s), {};
-            }
-          return {};
+    if ((r = u == null ? void 0 : u.persistency) != null && r.id)
+      return u.persistency.id;
+    const e = window.location.pathname, l = Object.keys(c);
+    return `${e}-${l.join("-")}`;
+  }), L = () => {
+    const e = new URLSearchParams(window.location.search);
+    e.delete(i.value);
+    const l = new URL(window.location.href);
+    l.search = e.toString(), window.history.replaceState({}, "", l.toString());
+  }, U = y(() => {
+    var l;
+    if (t != null && t.defaultValues && !((l = u == null ? void 0 : u.persistency) != null && l.overrideDefaultValues))
+      return t == null ? void 0 : t.defaultValues;
+    const e = u == null ? void 0 : u.persistency;
+    if (!(e != null && e.policies) || e.policies.length === 0) return {};
+    if (e.policies.includes("querystring"))
+      try {
+        const s = new URLSearchParams(window.location.search).get(i.value);
+        if (L(), s)
+          return JSON.parse(s);
+      } catch (r) {
+        console.error(r);
+      }
+    if (e.policies.includes("local") || e.policies.includes("session")) {
+      const r = e.policies.includes("local") ? localStorage : sessionStorage;
+      if (r)
+        try {
+          const s = JSON.parse(
+            r.getItem(i.value) || "{}"
+          );
+          return r.removeItem(i.value), s;
+        } catch (s) {
+          console.error(s);
         }
-      ),
-      n.orElse(() => ({}))
-    );
-  }), h = E({
-    ...e,
+    }
+    return {};
+  }), n = p({
+    ...t,
     validators: {
-      onSubmit: a,
-      ...(e == null ? void 0 : e.validators) || {}
+      onSubmit: b,
+      ...(t == null ? void 0 : t.validators) || {}
     },
-    onSubmit: e != null && e.onSubmit ? ({ formApi: l, meta: r, value: d }) => {
-      var t;
-      return (t = e.onSubmit) == null ? void 0 : t.call(e, {
-        formApi: l,
-        meta: r,
-        value: d
+    onSubmit: t != null && t.onSubmit ? ({ formApi: e, meta: l, value: r }) => {
+      var s;
+      return (s = t.onSubmit) == null ? void 0 : s.call(t, {
+        formApi: e,
+        meta: l,
+        value: r
       });
     } : void 0,
-    defaultValues: w.value
-  }), V = Object.assign(h, { meta: y, filterItems: f, clear: () => {
-    Object.keys(y).forEach((l) => {
-      h.setFieldValue(l, void 0);
+    defaultValues: U.value
+  }), V = () => {
+    Object.keys(c).forEach((e) => {
+      n.setFieldValue(e, void 0);
     });
-  } }), v = () => {
-    const l = u == null ? void 0 : u.persistency;
-    n.value(l).pipe(
-      n.when(
-        { method: (r) => ["local", "session"].includes(r) },
-        (r) => {
-          const t = r.method === "local" ? localStorage : sessionStorage;
-          if (t)
-            return Array.isArray(r.keys) && Object.keys(y).filter(
-              (s) => {
-                var S;
-                return !((S = r.keys) != null && S.includes(s));
-              }
-            ).forEach((s) => {
-              h.setFieldValue(s, void 0);
-            }), Array.isArray(r.banKeys) && r.banKeys.forEach((c) => {
-              h.setFieldValue(c, void 0);
-            }), t.setItem(
-              o.value,
-              JSON.stringify(h.store.state.values)
-            );
-        }
-      ),
-      n.orElse(x)
-    );
+  }, S = (e) => e.reduce(
+    (l, r) => {
+      const s = r.split(".");
+      return s.reduce((d, o, j) => (j === s.length - 1 ? d[o] = n.getFieldValue(r) : d[o] = d[o] || {}, d[o]), l);
+    },
+    {}
+  ), h = (e) => {
+    if (e) {
+      if (Array.isArray(e.keys))
+        return S(e.keys);
+      if (Array.isArray(e.banKeys)) {
+        const l = Object.keys(c).filter(
+          (r) => {
+            var s;
+            return (s = e.banKeys) == null ? void 0 : s.includes(r);
+          }
+        );
+        return S(l);
+      }
+      return n.store.state.values;
+    }
+  }, w = () => {
+    const e = u == null ? void 0 : u.persistency;
+    if (!(!(e != null && e.policies) || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
+      const l = e.policies.includes("local") ? localStorage : sessionStorage;
+      if (!l) return;
+      const r = h(e);
+      return l.setItem(i.value, JSON.stringify(r));
+    }
+  }, v = () => {
+    const e = u == null ? void 0 : u.persistency;
+    if (!(!(e != null && e.policies) || e.policies.length === 0) && e.policies.includes("querystring")) {
+      const l = h(e), r = new URLSearchParams(window.location.search);
+      r.set(i.value, JSON.stringify(l));
+      const s = new URL(window.location.href);
+      s.search = r.toString(), window.history.replaceState({}, "", s.toString());
+    }
   };
-  return I(v), K(() => {
-    window.addEventListener("beforeunload", v);
-  }), M(() => {
-    window.removeEventListener("beforeunload", v);
-  }), V;
+  return I(w), N(() => {
+    window.addEventListener("beforeunload", w), window.addEventListener("blur", v);
+  }), R(() => {
+    window.removeEventListener("beforeunload", w), window.removeEventListener("blur", v);
+  }), Object.assign(n, { meta: c, filterItems: f, clear: V });
 };
 export {
-  m as useOmegaForm
+  K as useOmegaForm
 };

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.es15.js";
 const S = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "OmegaInput",

package/package.json

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

package/src/components/OmegaForm/useOmegaForm.ts

@@ -5,7 +5,7 @@ import {
   type FormAsyncValidateOrFn,
   type StandardSchemaV1,
 } from "@tanstack/vue-form"
-import { Match, S } from "effect-app"
+import { S } from "effect-app"
 import {
   generateMetaFromSchema,
   type NestedKeyOf,
@@ -15,7 +15,6 @@ import {
   type OmegaFormApi,
 } from "./OmegaFormStuff"
 import { computed, onBeforeUnmount, onMounted, onUnmounted } from "vue"
-import { constVoid } from "effect/Function"
 
 type keysRule<T> =
   | {
@@ -29,7 +28,11 @@ type keysRule<T> =
 
 export type OmegaConfig<T> = {
   persistency?: {
-    method?: "session" | "local" | "none"
+    /** Order of importance:
+     * - "querystring": Highest priority when persisting
+     * - "local" and then "session": Lower priority storage options
+     */
+    policies?: ("local" | "session" | "querystring")[]
     overrideDefaultValues?: boolean
     id?: string
   } & keysRule<T>
@@ -65,36 +68,56 @@ export const useOmegaForm = <
     return `${path}-${keys.join("-")}`
   })
 
+  const clearUrlParams = () => {
+    const params = new URLSearchParams(window.location.search)
+    params.delete(persistencyKey.value)
+    const url = new URL(window.location.href)
+    url.search = params.toString()
+    window.history.replaceState({}, "", url.toString())
+  }
+
   const defaultValues = computed(() => {
     if (
       tanstackFormOptions?.defaultValues &&
       !omegaConfig?.persistency?.overrideDefaultValues
-    )
-      return tanstackFormOptions.defaultValues
+    ) {
+      return tanstackFormOptions?.defaultValues
+    }
     const persistency = omegaConfig?.persistency
-    return Match.value(persistency).pipe(
-      Match.when(
-        { method: method => ["local", "session"].includes(method) },
-        persistency => {
-          const method = persistency.method
-          const storage = method === "local" ? localStorage : sessionStorage
-          if (storage) {
-            try {
-              const value = JSON.parse(
-                storage.getItem(persistencyKey.value) || "{}",
-              )
-              storage.removeItem(persistencyKey.value)
-              return value
-            } catch (error) {
-              console.error(error)
-              return {}
-            }
-          }
-          return {}
-        },
-      ),
-      Match.orElse(() => ({})),
-    )
+    if (!persistency?.policies || persistency.policies.length === 0) return {}
+    if (persistency.policies.includes("querystring")) {
+      try {
+        const params = new URLSearchParams(window.location.search)
+        const value = params.get(persistencyKey.value)
+        clearUrlParams()
+        if (value) {
+          return JSON.parse(value)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    if (
+      persistency.policies.includes("local") ||
+      persistency.policies.includes("session")
+    ) {
+      const storage = persistency.policies.includes("local")
+        ? localStorage
+        : sessionStorage
+      if (storage) {
+        try {
+          const value = JSON.parse(
+            storage.getItem(persistencyKey.value) || "{}",
+          )
+          storage.removeItem(persistencyKey.value)
+          return value
+        } catch (error) {
+          console.error(error)
+        }
+      }
+    }
+    return {}
   })
 
   const form = useForm<
@@ -131,55 +154,81 @@ export const useOmegaForm = <
     })
   }
 
-  const exposed = Object.assign(form, { meta, filterItems, clear })
+  const createNestedObjectFromPaths = (paths: string[]) =>
+    paths.reduce(
+      (result, path) => {
+        const parts = path.split(".")
+        return parts.reduce((acc, part, i) => {
+          if (i === parts.length - 1) {
+            acc[part] = form.getFieldValue(path as any)
+          } else {
+            acc[part] = acc[part] || {}
+          }
+          return acc[part]
+        }, result)
+      },
+      {} as Record<string, any>,
+    )
+
+  const persistFilter = (persistency: OmegaConfig<From>["persistency"]) => {
+    if (!persistency) return
+    if (Array.isArray(persistency.keys)) {
+      return createNestedObjectFromPaths(persistency.keys)
+    }
+    if (Array.isArray(persistency.banKeys)) {
+      const subs = Object.keys(meta).filter(metakey =>
+        persistency.banKeys?.includes(metakey as any),
+      )
+      return createNestedObjectFromPaths(subs)
+    }
+    return form.store.state.values
+  }
 
-  // This is fragile as fuck. It's an experiment, it's only used because
-  // it's not a core feature of our products, so even if the this is not consistent
-  // it's not a big deal. So not take this code as a good example of how to do things.
-  // This is done only because this function is called before the component is destroyed,
-  // so the state would be lost anyway. So in this case we can play with the state, without
-  // worrying about the side effects.
   const persistData = () => {
     const persistency = omegaConfig?.persistency
-    Match.value(persistency).pipe(
-      Match.when(
-        { method: method => ["local", "session"].includes(method) },
-        persistency => {
-          const method = persistency.method
-          const storage = method === "local" ? localStorage : sessionStorage
-          if (storage) {
-            if (Array.isArray(persistency.keys)) {
-              const subs = Object.keys(meta).filter(
-                metakey => !persistency.keys?.includes(metakey as any),
-              )
-              subs.forEach(key => {
-                form.setFieldValue(key as any, undefined)
-              })
-            }
-            if (Array.isArray(persistency.banKeys)) {
-              persistency.banKeys.forEach(key => {
-                form.setFieldValue(key as any, undefined)
-              })
-            }
-            return storage.setItem(
-              persistencyKey.value,
-              JSON.stringify(form.store.state.values),
-            )
-          }
-        },
-      ),
-      Match.orElse(constVoid),
-    )
+    if (!persistency?.policies || persistency.policies.length === 0) {
+      return
+    }
+    if (
+      persistency.policies.includes("local") ||
+      persistency.policies.includes("session")
+    ) {
+      const storage = persistency.policies.includes("local")
+        ? localStorage
+        : sessionStorage
+      if (!storage) return
+      const values = persistFilter(persistency)
+      return storage.setItem(persistencyKey.value, JSON.stringify(values))
+    }
+  }
+
+  const saveDataInUrl = () => {
+    const persistency = omegaConfig?.persistency
+    if (!persistency?.policies || persistency.policies.length === 0) {
+      return
+    }
+    if (persistency.policies.includes("querystring")) {
+      const values = persistFilter(persistency)
+      const searchParams = new URLSearchParams(window.location.search)
+      searchParams.set(persistencyKey.value, JSON.stringify(values))
+      const url = new URL(window.location.href)
+      url.search = searchParams.toString()
+      window.history.replaceState({}, "", url.toString())
+    }
   }
 
   onUnmounted(persistData)
 
   onMounted(() => {
     window.addEventListener("beforeunload", persistData)
+    window.addEventListener("blur", saveDataInUrl)
   })
   onBeforeUnmount(() => {
     window.removeEventListener("beforeunload", persistData)
+    window.removeEventListener("blur", saveDataInUrl)
   })
 
+  const exposed = Object.assign(form, { meta, filterItems, clear })
+
   return exposed
 }

package/src/stories/OmegaForm/ComplexForm.vue

@@ -73,7 +73,7 @@ const form = useOmegaForm(
   },
   {
     persistency: {
-      method: "local",
+      policies: ["local"],
       overrideDefaultValues: true,
     },
   },

package/src/stories/OmegaForm/PersistencyForm.vue

@@ -44,7 +44,7 @@ const addForm = useOmegaForm(
   {},
   {
     persistency: {
-      method: "session",
+      policies: ["session", "querystring"],
       keys: ["first", "third.fourth"],
     },
   },
@@ -55,11 +55,4 @@ const values = addForm.useStore(({ values }) => values)
 watch(values, ({ first, second }) => {
   sum.value = first + second
 })
-
-// TODO: Implement this when we have a way to persist the form values
-// {
-//   persist: "session",
-//   persistKeys: ["riskCategoryPeriod"],
-//   persistBanKeys: ["riskCategory"],
-// }
 </script>

package/dist/vue-components.es19.js

@@ -1,117 +0,0 @@
-import { defineComponent as P, resolveComponent as u, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, mergeProps as s } from "vue";
-const b = /* @__PURE__ */ P({
-  inheritAttrs: !1,
-  __name: "OmegaInputVuetify",
-  props: {
-    inputProps: {},
-    vuetifyValue: {}
-  },
-  emits: ["focus", "blur"],
-  setup(y) {
-    return (e, r) => {
-      const a = u("v-checkbox"), i = u("v-text-field"), t = u("v-textarea"), m = u("v-select"), d = u("v-autocomplete");
-      return o(), g("div", {
-        class: "omega-input",
-        onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
-        onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
-      }, [
-        e.inputProps.type === "boolean" ? (o(), n(a, s({
-          key: 0,
-          id: e.inputProps.id,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
-          ripple: ""
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
-        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(i, s({
-          key: 1,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          "min-length": e.inputProps.minLength,
-          "max-length": e.inputProps.maxLength,
-          type: e.inputProps.type,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "text" ? (o(), n(t, s({
-          key: 2,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          "min-length": e.inputProps.minLength,
-          "max-length": e.inputProps.maxLength,
-          type: e.inputProps.type,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "number" ? (o(), n(i, s({
-          key: 3,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          min: e.inputProps.min,
-          max: e.inputProps.max,
-          type: e.inputProps.type,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": r[1] || (r[1] = (p) => {
-            e.inputProps.field.handleChange(Number(p));
-          })
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, s({
-          key: 4,
-          id: e.inputProps.id,
-          clearable: e.inputProps.type === "select",
-          required: e.inputProps.required,
-          multiple: e.inputProps.type === "multiple",
-          chips: e.inputProps.type === "multiple",
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          items: e.inputProps.options,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, s({
-          key: 5,
-          id: e.inputProps.id,
-          clearable: e.inputProps.type === "autocomplete",
-          multiple: e.inputProps.type === "autocompletemultiple",
-          required: e.inputProps.required,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          items: e.inputProps.options,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
-          chips: e.inputProps.type === "autocompletemultiple"
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
-      ], 32);
-    };
-  }
-});
-export {
-  b as default
-};