@volverjs/form-vue 0.0.1

package/dist/index.es.js

@@ -0,0 +1,473 @@
+import { defineComponent as w, computed as h, onMounted as q, inject as S, toRefs as G, watch as V, provide as $, readonly as A, resolveComponent as b, defineAsyncComponent as Z, h as O, ref as x, isProxy as Y, toRaw as H, withModifiers as Q } from "vue";
+import { watchThrottled as X } from "@vueuse/core";
+import { ZodDefault as P, ZodObject as T } from "zod";
+function E(e) {
+  return Array.isArray(e);
+}
+function F(e) {
+  return typeof e < "u";
+}
+function N(e) {
+  return e === null;
+}
+function L(e) {
+  return typeof e == "object";
+}
+function D(e) {
+  return typeof e == "string";
+}
+function M(e) {
+  return typeof e > "u";
+}
+const ee = /^[0-9]+$/, re = ["__proto__", "prototype", "constructor"];
+function _(e, r, t) {
+  const a = F(t) ? t : void 0;
+  if (!L(e) || !D(r))
+    return a;
+  const n = W(r);
+  if (n.length !== 0) {
+    for (const o of n) {
+      if (o === "*")
+        continue;
+      const i = function(s) {
+        return s.map((f) => M(f) || N(f) ? f : E(f) ? i(f) : f[o]);
+      };
+      if (E(e) && !ee.test(o) ? e = i(e) : e = e[o], M(e) || N(e))
+        break;
+    }
+    return M(e) ? a : e;
+  }
+}
+function U(e, r, t) {
+  if (!L(e) || !D(r))
+    return;
+  const a = W(r);
+  if (a.length === 0)
+    return;
+  const n = a.length;
+  for (let o = 0; o < n; o++) {
+    const i = a[o];
+    if (o === n - 1) {
+      e[i] = t;
+      return;
+    }
+    if (i === "*" && E(e)) {
+      const s = a.slice(o + 1).join(".");
+      for (const f of e)
+        U(f, s, t);
+      return;
+    }
+    M(e[i]) && (e[i] = {}), e = e[i];
+  }
+}
+function W(e) {
+  const r = e.split(/[.]|(?:\[(\d|\*)\])/).filter((t) => !!t);
+  return r.some((t) => re.indexOf(t) !== -1) ? [] : r;
+}
+var l = /* @__PURE__ */ ((e) => (e.text = "text", e.number = "number", e.email = "email", e.password = "password", e.tel = "tel", e.url = "url", e.search = "search", e.date = "date", e.time = "time", e.datetimeLocal = "datetimeLocal", e.month = "month", e.week = "week", e.color = "color", e.select = "select", e.checkbox = "checkbox", e.radio = "radio", e.textarea = "textarea", e.radioGroup = "radioGroup", e.checkboxGroup = "checkboxGroup", e.combobox = "combobox", e.custom = "custom", e))(l || {});
+const te = (e, r, t, a = {}) => w({
+  name: "FieldComponent",
+  props: {
+    type: {
+      type: String,
+      validator: (n) => Object.values(l).includes(n),
+      default: l.custom
+    },
+    is: {
+      type: [Object, String],
+      default: void 0
+    },
+    name: {
+      type: [String, Number, Boolean, Symbol],
+      required: !0
+    },
+    props: {
+      type: [Object, Function],
+      default: () => ({})
+    },
+    showValid: {
+      type: Boolean,
+      default: !1
+    },
+    defaultValue: {
+      type: [String, Number, Boolean, Array, Object],
+      default: void 0
+    }
+  },
+  emits: ["invalid", "valid", "update:formData", "update:modelValue"],
+  expose: ["invalid", "invalidLabel", "errors"],
+  setup(n, { slots: o, emit: i }) {
+    const s = h({
+      get() {
+        if (u != null && u.modelValue)
+          return _(
+            Object(u.modelValue.value),
+            String(n.name)
+          );
+      },
+      set(c) {
+        u != null && u.modelValue && (U(
+          Object(u.modelValue.value),
+          String(n.name),
+          c
+        ), i("update:modelValue", {
+          newValue: s.value,
+          formData: u == null ? void 0 : u.modelValue
+        }));
+      }
+    });
+    q(() => {
+      s.value === void 0 && n.defaultValue !== void 0 && (s.value = n.defaultValue);
+    });
+    const f = S(r, void 0);
+    f && f.fields.value.add(n.name);
+    const u = S(e), { props: d, name: m } = G(n), v = h(() => {
+      if (u != null && u.errors.value)
+        return _(u.errors.value, String(n.name));
+    }), y = h(() => {
+      var c;
+      return (c = v.value) == null ? void 0 : c._errors;
+    }), p = h(() => v.value !== void 0);
+    V(p, () => {
+      p.value ? (i("invalid", y.value), f && f.errors.value.set(n.name, {
+        _errors: y.value
+      })) : (i("valid", s.value), f && f.errors.value.delete(
+        n.name
+      ));
+    }), V(
+      () => u == null ? void 0 : u.modelValue,
+      () => {
+        i("update:formData", u == null ? void 0 : u.modelValue);
+      },
+      { deep: !0 }
+    );
+    const k = (c) => {
+      s.value = c;
+    }, I = h(() => typeof d.value == "function" ? d.value(u == null ? void 0 : u.modelValue) : d.value), R = h(() => ({
+      ...I.value,
+      name: I.value.name ?? n.name,
+      invalid: p.value,
+      valid: n.showValid ? Boolean(!p.value && s.value) : void 0,
+      type: ((c) => {
+        if ([
+          l.text,
+          l.number,
+          l.email,
+          l.password,
+          l.tel,
+          l.url,
+          l.search,
+          l.date,
+          l.time,
+          l.datetimeLocal,
+          l.month,
+          l.week,
+          l.color
+        ].includes(c))
+          return c;
+      })(n.type),
+      invalidLabel: y.value,
+      modelValue: s.value,
+      errors: n.is ? v.value : void 0,
+      "onUpdate:modelValue": k
+    }));
+    return $(t, {
+      name: A(m),
+      errors: A(v)
+    }), { component: h(() => {
+      if (n.type === l.custom)
+        return {
+          render() {
+            var c;
+            return ((c = o.default) == null ? void 0 : c.call(o, {
+              modelValue: s.value,
+              onUpdate: k,
+              invalid: p.value,
+              invalidLabel: y.value,
+              formData: u == null ? void 0 : u.modelValue.value,
+              formErrors: u == null ? void 0 : u.errors.value,
+              errors: v.value
+            })) ?? o.defalut;
+          }
+        };
+      if (!a.lazyLoad) {
+        let c;
+        switch (n.type) {
+          case l.select:
+            c = b("VvSelect");
+            break;
+          case l.checkbox:
+            c = b("VvCheckbox");
+            break;
+          case l.radio:
+            c = b("VvRadio");
+            break;
+          case l.textarea:
+            c = b("VvTextarea");
+            break;
+          case l.radioGroup:
+            c = b("VvRadioGroup");
+            break;
+          case l.checkboxGroup:
+            c = b("VvCheckboxGroup");
+            break;
+          case l.combobox:
+            c = b("VvCombobox");
+            break;
+          default:
+            c = b("VvInputText");
+        }
+        if (typeof c != "string")
+          return c;
+        console.warn(
+          `[form-vue warn]: ${c} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`
+        );
+      }
+      return Z(async () => {
+        switch (a.sideEffects && await Promise.resolve(a.sideEffects(n.type)), n.type) {
+          case l.textarea:
+            return import("@volverjs/ui-vue/vv-textarea");
+          case l.radio:
+            return import("@volverjs/ui-vue/vv-radio");
+          case l.radioGroup:
+            return import("@volverjs/ui-vue/vv-radio-group");
+          case l.checkbox:
+            return import("@volverjs/ui-vue/vv-checkbox");
+          case l.checkboxGroup:
+            return import("@volverjs/ui-vue/vv-checkbox-group");
+          case l.combobox:
+            return import("@volverjs/ui-vue/vv-combobox");
+        }
+        return import("@volverjs/ui-vue/vv-input-text");
+      });
+    }), hasProps: R, invalid: p };
+  },
+  render() {
+    return this.is ? O(this.is, this.hasProps, this.$slots) : this.type === l.custom ? O(this.component, null, this.$slots) : O(this.component, this.hasProps, this.$slots);
+  }
+});
+var ne = function(r) {
+  return ae(r) && !oe(r);
+};
+function ae(e) {
+  return !!e && typeof e == "object";
+}
+function oe(e) {
+  var r = Object.prototype.toString.call(e);
+  return r === "[object RegExp]" || r === "[object Date]" || ie(e);
+}
+var ue = typeof Symbol == "function" && Symbol.for, le = ue ? Symbol.for("react.element") : 60103;
+function ie(e) {
+  return e.$$typeof === le;
+}
+function se(e) {
+  return Array.isArray(e) ? [] : {};
+}
+function j(e, r) {
+  return r.clone !== !1 && r.isMergeableObject(e) ? g(se(e), e, r) : e;
+}
+function ce(e, r, t) {
+  return e.concat(r).map(function(a) {
+    return j(a, t);
+  });
+}
+function fe(e, r) {
+  if (!r.customMerge)
+    return g;
+  var t = r.customMerge(e);
+  return typeof t == "function" ? t : g;
+}
+function de(e) {
+  return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(e).filter(function(r) {
+    return Object.propertyIsEnumerable.call(e, r);
+  }) : [];
+}
+function C(e) {
+  return Object.keys(e).concat(de(e));
+}
+function B(e, r) {
+  try {
+    return r in e;
+  } catch {
+    return !1;
+  }
+}
+function me(e, r) {
+  return B(e, r) && !(Object.hasOwnProperty.call(e, r) && Object.propertyIsEnumerable.call(e, r));
+}
+function ve(e, r, t) {
+  var a = {};
+  return t.isMergeableObject(e) && C(e).forEach(function(n) {
+    a[n] = j(e[n], t);
+  }), C(r).forEach(function(n) {
+    me(e, n) || (B(e, n) && t.isMergeableObject(r[n]) ? a[n] = fe(n, t)(e[n], r[n], t) : a[n] = j(r[n], t));
+  }), a;
+}
+function g(e, r, t) {
+  t = t || {}, t.arrayMerge = t.arrayMerge || ce, t.isMergeableObject = t.isMergeableObject || ne, t.cloneUnlessOtherwiseSpecified = j;
+  var a = Array.isArray(r), n = Array.isArray(e), o = a === n;
+  return o ? a ? t.arrayMerge(e, r, t) : ve(e, r, t) : j(r, t);
+}
+g.all = function(r, t) {
+  if (!Array.isArray(r))
+    throw new Error("first argument should be an array");
+  return r.reduce(function(a, n) {
+    return g(a, n, t);
+  }, {});
+};
+var be = g, he = be;
+const J = (e, r = {}) => he(
+  Object.fromEntries(
+    Object.entries(e.shape).map(([t, a]) => a instanceof P ? [t, a._def.defaultValue()] : a instanceof T ? [t, J(a)] : [t, void 0])
+  ),
+  r
+), ye = (e, r, t) => w({
+  name: "FormComponent",
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: ["invalid", "valid", "submit", "update:modelValue"],
+  expose: ["submit", "errors", "status"],
+  setup(a, { emit: n }) {
+    const o = x(
+      J(e, a.modelValue)
+    );
+    V(
+      () => a.modelValue,
+      (d) => {
+        if (d) {
+          const m = Y(d) ? H(d) : d;
+          o.value = typeof (m == null ? void 0 : m.clone) == "function" ? m.clone() : JSON.parse(JSON.stringify(m));
+        }
+      },
+      { deep: !0 }
+    ), X(
+      o,
+      (d) => {
+        i.value && f(), (!d || !a.modelValue || JSON.stringify(d) !== JSON.stringify(a.modelValue)) && n("update:modelValue", d);
+      },
+      { deep: !0, throttle: (t == null ? void 0 : t.updateThrottle) ?? 500 }
+    );
+    const i = x(), s = x(), f = (d = o.value) => {
+      const m = e.safeParse(d);
+      return m.success ? (i.value = void 0, s.value = "valid", o.value = m.data, n("valid", m.data), !0) : (i.value = m.error.format(), s.value = "invalid", n("invalid", i.value), !1);
+    }, u = () => f() ? (n("submit", o.value), !0) : !1;
+    return $(r, {
+      modelValue: o,
+      submit: u,
+      errors: A(i)
+    }), { submit: u };
+  },
+  render() {
+    return O(
+      "form",
+      {
+        onSubmit: Q(this.submit, ["prevent"])
+      },
+      this.$slots
+    );
+  }
+}), pe = (e, r) => w({
+  name: "WrapperComponent",
+  props: {
+    name: {
+      type: String,
+      required: !0
+    },
+    tag: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["invalid", "valid"],
+  expose: ["fields", "invalid"],
+  setup(t, { emit: a }) {
+    const n = S(e), o = S(r, void 0), i = x(/* @__PURE__ */ new Set()), s = x(/* @__PURE__ */ new Map()), { name: f } = G(t);
+    $(r, {
+      name: A(f),
+      errors: s,
+      fields: i
+    }), V(
+      i,
+      (d) => {
+        o != null && o.fields && d.forEach((m) => {
+          o == null || o.fields.value.add(m);
+        });
+      },
+      { deep: !0 }
+    ), V(
+      () => new Map(s.value),
+      (d, m) => {
+        o != null && o.errors && (Array.from(m.keys()).forEach((v) => {
+          o.errors.value.delete(v);
+        }), Array.from(d.keys()).forEach((v) => {
+          const y = d.get(v);
+          y && o.errors.value.set(v, y);
+        }));
+      },
+      { deep: !0 }
+    );
+    const u = h(() => n != null && n.errors.value ? s.value.size > 0 : !1);
+    return V(u, () => {
+      u.value ? a("invalid") : a("valid");
+    }), { formProvided: n, invalid: u, fields: i, errors: s };
+  },
+  render() {
+    var t, a, n, o, i, s, f, u;
+    return this.tag ? O(
+      this.tag,
+      null,
+      ((o = (n = this.$slots).default) == null ? void 0 : o.call(n, {
+        invalid: this.invalid,
+        formData: (t = this.formProvided) == null ? void 0 : t.modelValue,
+        errors: (a = this.formProvided) == null ? void 0 : a.errors,
+        fieldsErrors: this.errors
+      })) ?? this.$slots.defalut
+    ) : ((u = (f = this.$slots).default) == null ? void 0 : u.call(f, {
+      invalid: this.invalid,
+      formData: (i = this.formProvided) == null ? void 0 : i.modelValue,
+      errors: (s = this.formProvided) == null ? void 0 : s.errors,
+      fieldsErrors: this.errors
+    })) ?? this.$slots.defalut;
+  }
+}), K = (e, r = {}) => {
+  const t = Symbol(), a = Symbol(), n = Symbol(), o = ye(e, t, r), i = pe(
+    t,
+    a
+  ), s = te(
+    t,
+    a,
+    n,
+    r
+  );
+  return {
+    VvForm: o,
+    VvFormWrapper: i,
+    VvFormField: s,
+    formInjectionKey: t,
+    formWrapperInjectionKey: a,
+    formFieldInjectionKey: n
+  };
+}, z = Symbol(), Se = (e) => {
+  let r = {};
+  return e.schema && (r = K(e.schema, e)), {
+    ...r,
+    install(t, { global: a = !1 } = {}) {
+      t.provide(z, e), a && (t.config.globalProperties.$vvForm = e, r != null && r.VvForm && t.component("VvForm", r.VvForm), r != null && r.VvFormWrapper && t.component("VvFormWrapper", r.VvFormWrapper), r != null && r.VvFormField && t.component("VvFormField", r.VvFormField));
+    }
+  };
+}, je = (e, r = {}) => {
+  const t = { ...S(z, {}), ...r };
+  return K(e, t);
+};
+export {
+  l as FormFieldType,
+  Se as createForm,
+  J as defaultObjectBySchema,
+  K as formFactory,
+  z as pluginInjectionKey,
+  je as useForm
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(b,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],n):(b=typeof globalThis<"u"?globalThis:b||self,n(b["@volverjs/form-vue"]={},b.Vue,b.VueUseCore,b.zod))})(this,function(b,n,D,M){"use strict";function S(e){return Array.isArray(e)}function U(e){return typeof e<"u"}function A(e){return e===null}function E(e){return typeof e=="object"}function C(e){return typeof e=="string"}function O(e){return typeof e>"u"}const W=/^[0-9]+$/,B=["__proto__","prototype","constructor"];function $(e,r,t){const o=U(t)?t:void 0;if(!E(e)||!C(r))return o;const a=I(r);if(a.length!==0){for(const l of a){if(l==="*")continue;const c=function(u){return u.map(d=>O(d)||A(d)?d:S(d)?c(d):d[l])};if(S(e)&&!W.test(l)?e=c(e):e=e[l],O(e)||A(e))break}return O(e)?o:e}}function k(e,r,t){if(!E(e)||!C(r))return;const o=I(r);if(o.length===0)return;const a=o.length;for(let l=0;l<a;l++){const c=o[l];if(l===a-1){e[c]=t;return}if(c==="*"&&S(e)){const u=o.slice(l+1).join(".");for(const d of e)k(d,u,t);return}O(e[c])&&(e[c]={}),e=e[c]}}function I(e){const r=e.split(/[.]|(?:\[(\d|\*)\])/).filter(t=>!!t);return r.some(t=>B.indexOf(t)!==-1)?[]:r}var s=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.tel="tel",e.url="url",e.search="search",e.date="date",e.time="time",e.datetimeLocal="datetimeLocal",e.month="month",e.week="week",e.color="color",e.select="select",e.checkbox="checkbox",e.radio="radio",e.textarea="textarea",e.radioGroup="radioGroup",e.checkboxGroup="checkboxGroup",e.combobox="combobox",e.custom="custom",e))(s||{});const q=(e,r,t,o={})=>n.defineComponent({name:"FieldComponent",props:{type:{type:String,validator:a=>Object.values(s).includes(a),default:s.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0}},emits:["invalid","valid","update:formData","update:modelValue"],expose:["invalid","invalidLabel","errors"],setup(a,{slots:l,emit:c}){const u=n.computed({get(){if(i!=null&&i.modelValue)return $(Object(i.modelValue.value),String(a.name))},set(f){i!=null&&i.modelValue&&(k(Object(i.modelValue.value),String(a.name),f),c("update:modelValue",{newValue:u.value,formData:i==null?void 0:i.modelValue}))}});n.onMounted(()=>{u.value===void 0&&a.defaultValue!==void 0&&(u.value=a.defaultValue)});const d=n.inject(r,void 0);d&&d.fields.value.add(a.name);const i=n.inject(e),{props:m,name:h}=n.toRefs(a),p=n.computed(()=>{if(i!=null&&i.errors.value)return $(i.errors.value,String(a.name))}),v=n.computed(()=>{var f;return(f=p.value)==null?void 0:f._errors}),V=n.computed(()=>p.value!==void 0);n.watch(V,()=>{V.value?(c("invalid",v.value),d&&d.errors.value.set(a.name,{_errors:v.value})):(c("valid",u.value),d&&d.errors.value.delete(a.name))}),n.watch(()=>i==null?void 0:i.modelValue,()=>{c("update:formData",i==null?void 0:i.modelValue)},{deep:!0});const G=f=>{u.value=f},L=n.computed(()=>typeof m.value=="function"?m.value(i==null?void 0:i.modelValue):m.value),le=n.computed(()=>({...L.value,name:L.value.name??a.name,invalid:V.value,valid:a.showValid?Boolean(!V.value&&u.value):void 0,type:(f=>{if([s.text,s.number,s.email,s.password,s.tel,s.url,s.search,s.date,s.time,s.datetimeLocal,s.month,s.week,s.color].includes(f))return f})(a.type),invalidLabel:v.value,modelValue:u.value,errors:a.is?p.value:void 0,"onUpdate:modelValue":G}));return n.provide(t,{name:n.readonly(h),errors:n.readonly(p)}),{component:n.computed(()=>{if(a.type===s.custom)return{render(){var f;return((f=l.default)==null?void 0:f.call(l,{modelValue:u.value,onUpdate:G,invalid:V.value,invalidLabel:v.value,formData:i==null?void 0:i.modelValue.value,formErrors:i==null?void 0:i.errors.value,errors:p.value}))??l.defalut}};if(!o.lazyLoad){let f;switch(a.type){case s.select:f=n.resolveComponent("VvSelect");break;case s.checkbox:f=n.resolveComponent("VvCheckbox");break;case s.radio:f=n.resolveComponent("VvRadio");break;case s.textarea:f=n.resolveComponent("VvTextarea");break;case s.radioGroup:f=n.resolveComponent("VvRadioGroup");break;case s.checkboxGroup:f=n.resolveComponent("VvCheckboxGroup");break;case s.combobox:f=n.resolveComponent("VvCombobox");break;default:f=n.resolveComponent("VvInputText")}if(typeof f!="string")return f;console.warn(`[form-vue warn]: ${f} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return n.defineAsyncComponent(async()=>{switch(o.sideEffects&&await Promise.resolve(o.sideEffects(a.type)),a.type){case s.textarea:return import("@volverjs/ui-vue/vv-textarea");case s.radio:return import("@volverjs/ui-vue/vv-radio");case s.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case s.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case s.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case s.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:le,invalid:V}},render(){return this.is?n.h(this.is,this.hasProps,this.$slots):this.type===s.custom?n.h(this.component,null,this.$slots):n.h(this.component,this.hasProps,this.$slots)}});var z=function(r){return K(r)&&!J(r)};function K(e){return!!e&&typeof e=="object"}function J(e){var r=Object.prototype.toString.call(e);return r==="[object RegExp]"||r==="[object Date]"||Y(e)}var R=typeof Symbol=="function"&&Symbol.for,Z=R?Symbol.for("react.element"):60103;function Y(e){return e.$$typeof===Z}function H(e){return Array.isArray(e)?[]:{}}function g(e,r){return r.clone!==!1&&r.isMergeableObject(e)?y(H(e),e,r):e}function Q(e,r,t){return e.concat(r).map(function(o){return g(o,t)})}function X(e,r){if(!r.customMerge)return y;var t=r.customMerge(e);return typeof t=="function"?t:y}function P(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(r){return Object.propertyIsEnumerable.call(e,r)}):[]}function N(e){return Object.keys(e).concat(P(e))}function _(e,r){try{return r in e}catch{return!1}}function F(e,r){return _(e,r)&&!(Object.hasOwnProperty.call(e,r)&&Object.propertyIsEnumerable.call(e,r))}function T(e,r,t){var o={};return t.isMergeableObject(e)&&N(e).forEach(function(a){o[a]=g(e[a],t)}),N(r).forEach(function(a){F(e,a)||(_(e,a)&&t.isMergeableObject(r[a])?o[a]=X(a,t)(e[a],r[a],t):o[a]=g(r[a],t))}),o}function y(e,r,t){t=t||{},t.arrayMerge=t.arrayMerge||Q,t.isMergeableObject=t.isMergeableObject||z,t.cloneUnlessOtherwiseSpecified=g;var o=Array.isArray(r),a=Array.isArray(e),l=o===a;return l?o?t.arrayMerge(e,r,t):T(e,r,t):g(r,t)}y.all=function(r,t){if(!Array.isArray(r))throw new Error("first argument should be an array");return r.reduce(function(o,a){return y(o,a,t)},{})};var ee=y,re=ee;const j=(e,r={})=>re(Object.fromEntries(Object.entries(e.shape).map(([t,o])=>o instanceof M.ZodDefault?[t,o._def.defaultValue()]:o instanceof M.ZodObject?[t,j(o)]:[t,void 0])),r),te=(e,r,t)=>n.defineComponent({name:"FormComponent",props:{modelValue:{type:Object,default:()=>({})}},emits:["invalid","valid","submit","update:modelValue"],expose:["submit","errors","status"],setup(o,{emit:a}){const l=n.ref(j(e,o.modelValue));n.watch(()=>o.modelValue,m=>{if(m){const h=n.isProxy(m)?n.toRaw(m):m;l.value=typeof(h==null?void 0:h.clone)=="function"?h.clone():JSON.parse(JSON.stringify(h))}},{deep:!0}),D.watchThrottled(l,m=>{c.value&&d(),(!m||!o.modelValue||JSON.stringify(m)!==JSON.stringify(o.modelValue))&&a("update:modelValue",m)},{deep:!0,throttle:(t==null?void 0:t.updateThrottle)??500});const c=n.ref(),u=n.ref(),d=(m=l.value)=>{const h=e.safeParse(m);return h.success?(c.value=void 0,u.value="valid",l.value=h.data,a("valid",h.data),!0):(c.value=h.error.format(),u.value="invalid",a("invalid",c.value),!1)},i=()=>d()?(a("submit",l.value),!0):!1;return n.provide(r,{modelValue:l,submit:i,errors:n.readonly(c)}),{submit:i}},render(){return n.h("form",{onSubmit:n.withModifiers(this.submit,["prevent"])},this.$slots)}}),ne=(e,r)=>n.defineComponent({name:"WrapperComponent",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["fields","invalid"],setup(t,{emit:o}){const a=n.inject(e),l=n.inject(r,void 0),c=n.ref(new Set),u=n.ref(new Map),{name:d}=n.toRefs(t);n.provide(r,{name:n.readonly(d),errors:u,fields:c}),n.watch(c,m=>{l!=null&&l.fields&&m.forEach(h=>{l==null||l.fields.value.add(h)})},{deep:!0}),n.watch(()=>new Map(u.value),(m,h)=>{l!=null&&l.errors&&(Array.from(h.keys()).forEach(p=>{l.errors.value.delete(p)}),Array.from(m.keys()).forEach(p=>{const v=m.get(p);v&&l.errors.value.set(p,v)}))},{deep:!0});const i=n.computed(()=>a!=null&&a.errors.value?u.value.size>0:!1);return n.watch(i,()=>{i.value?o("invalid"):o("valid")}),{formProvided:a,invalid:i,fields:c,errors:u}},render(){var t,o,a,l,c,u,d,i;return this.tag?n.h(this.tag,null,((l=(a=this.$slots).default)==null?void 0:l.call(a,{invalid:this.invalid,formData:(t=this.formProvided)==null?void 0:t.modelValue,errors:(o=this.formProvided)==null?void 0:o.errors,fieldsErrors:this.errors}))??this.$slots.defalut):((i=(d=this.$slots).default)==null?void 0:i.call(d,{invalid:this.invalid,formData:(c=this.formProvided)==null?void 0:c.modelValue,errors:(u=this.formProvided)==null?void 0:u.errors,fieldsErrors:this.errors}))??this.$slots.defalut}}),x=(e,r={})=>{const t=Symbol(),o=Symbol(),a=Symbol(),l=te(e,t,r),c=ne(t,o),u=q(t,o,a,r);return{VvForm:l,VvFormWrapper:c,VvFormField:u,formInjectionKey:t,formWrapperInjectionKey:o,formFieldInjectionKey:a}},w=Symbol(),ae=e=>{let r={};return e.schema&&(r=x(e.schema,e)),{...r,install(t,{global:o=!1}={}){t.provide(w,e),o&&(t.config.globalProperties.$vvForm=e,r!=null&&r.VvForm&&t.component("VvForm",r.VvForm),r!=null&&r.VvFormWrapper&&t.component("VvFormWrapper",r.VvFormWrapper),r!=null&&r.VvFormField&&t.component("VvFormField",r.VvFormField))}}},oe=(e,r={})=>{const t={...n.inject(w,{}),...r};return x(e,t)};b.FormFieldType=s,b.createForm=ae,b.defaultObjectBySchema=j,b.formFactory=x,b.pluginInjectionKey=w,b.useForm=oe,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import type { Ref } from 'vue'
+import type { ZodFormattedError } from 'zod'
+import type { FormFieldType } from './enums'
+
+export type FormComposableOptions = {
+	lazyLoad?: boolean
+	updateThrottle?: number
+	sideEffects?: (type: `${FormFieldType}`) => Promise | void
+}
+
+export type FormPluginOptions = {
+	schema?: ZodSchema
+} & FormComposableOptions
+
+export type InjectedFormData<Type = Recrod<string | number, unknown>> = {
+	modelValue: Ref<Type>
+	errors: Ref<ZodFormattedError<Type>>
+	submit: () => boolean
+}
+
+export type InjectedFormWrapperData = {
+	name: Ref<string>
+	fields: Ref<Set<string>>
+	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+}
+
+export type InjectedFormFieldData = {
+	name: Ref<string>
+	errors: Ref<Map<string, Record<string, { _errors: string[] }>>>
+}

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { type z } from 'zod';
+export declare const defaultObjectBySchema: <Schema extends z.AnyZodObject>(schema: Schema, original?: Partial<z.TypeOf<Schema>>) => Partial<z.TypeOf<Schema>>;

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@volverjs/form-vue",
+  "description": "Vue 3 Forms with @volverjs/ui-vue",
+  "author": "24/Consulting",
+  "license": "MIT",
+  "keywords": [
+    "form",
+    "form-field",
+    "form-wrapper",
+    "vue3",
+    "zod",
+    "validation"
+  ],
+  "homepage": "https://github.com/volverjs/form-vue",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/volverjs/form-vue"
+  },
+  "bugs": {
+    "url": "https://github.com/volverjs/form-vue/issues"
+  },
+  "version": "0.0.1",
+  "engines": {
+    "node": ">= 16.x"
+  },
+  "packageManager": "pnpm@7.8.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "node",
+    "*.d.ts"
+  ],
+  "dependencies": {
+    "@iconify/tools": "^2.2.6",
+    "@iconify/vue": "^4.1.0",
+    "@volverjs/ui-vue": "0.0.5-beta.1",
+    "@vueuse/core": "^9.13.0",
+    "deepmerge": "^4.3.0",
+    "ts-dot-prop": "^2.1.2",
+    "vue": "^3.2.47",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@testing-library/vue": "^6.6.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/compiler-sfc": "^3.2.47",
+    "@vue/runtime-core": "^3.2.47",
+    "@vue/test-utils": "^2.3.1",
+    "copy": "^0.3.2",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "happy-dom": "^8.9.0",
+    "prettier": "^2.8.4",
+    "sass": "^1.58.3",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-externalize-deps": "^0.5.0",
+    "vitest": "^0.29.2",
+    "vue-tsc": "^1.2.0"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "default": "./dist/index.umd.cjs"
+    },
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*"
+  },
+  "scripts": {
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "type-check": "tsc --noEmit",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly && copy src/**/types.d.ts dist",
+    "test": "vitest",
+    "credits": "npx @opengovsg/credits-generator"
+  }
+}