@foormjs/vue 0.0.2

package/README.md

@@ -0,0 +1,33 @@
+# vue
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```

package/dist/index.d.ts

@@ -0,0 +1,150 @@
+export declare const OoField: <TFormData, TFormContext>(__VLS_props: any, __VLS_ctx?: {
+    attrs: any;
+    emit: any;
+    slots: {
+        default?(_: {
+            onBlur: any;
+            error: any;
+            model: any;
+            formData: any;
+            formContext: any;
+            label: any;
+            description: any;
+            hint: any;
+            placeholder: any;
+            classes: any;
+            styles: any;
+            optional: any;
+            disabled: any;
+            hidden: any;
+            type: any;
+            altAction: any;
+            component: any;
+            vName: any;
+            field: any;
+            options: any;
+            length: any;
+            required: boolean;
+            autocomplete: any;
+            attrs: any;
+        }): any;
+    };
+}, __VLS_expose?: (exposed: any) => void, __VLS_setup?: Promise<{
+    props: any;
+    expose(exposed: any): void;
+    attrs: any;
+    slots: {
+        default?(_: {
+            onBlur: any;
+            error: any;
+            model: any;
+            formData: any;
+            formContext: any;
+            label: any;
+            description: any;
+            hint: any;
+            placeholder: any;
+            classes: any;
+            styles: any;
+            optional: any;
+            disabled: any;
+            hidden: any;
+            type: any;
+            altAction: any;
+            component: any;
+            vName: any;
+            field: any;
+            options: any;
+            length: any;
+            required: boolean;
+            autocomplete: any;
+            attrs: any;
+        }): any;
+    };
+    emit: any;
+}>) => any;
+
+export declare const OoFoorm: <TFormData extends object, TFormContext extends object>(__VLS_props: any, __VLS_ctx?: {
+    attrs: any;
+    emit: any;
+    slots: Partial<Record<`field:${any}`, (_: any) => any>> & {
+        "form.header"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.before"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.after"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.submit"?(_: {
+            disabled: any;
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.footer"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+    };
+}, __VLS_expose?: (exposed: any) => void, __VLS_setup?: Promise<{
+    props: any;
+    expose(exposed: any): void;
+    attrs: any;
+    slots: Partial<Record<`field:${any}`, (_: any) => any>> & {
+        "form.header"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.before"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.after"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.submit"?(_: {
+            disabled: any;
+            clearErrors: any;
+            reset: any;
+        }): any;
+        "form.footer"?(_: {
+            clearErrors: any;
+            reset: any;
+        }): any;
+    };
+    emit: any;
+}>) => any;
+
+export declare interface TFoormComponentProps<T, TFormData, TFormContext> {
+    onBlur: Function;
+    error?: string;
+    model: {
+        value: T;
+    };
+    formData: TFormData;
+    formContext?: TFormContext;
+    label?: string;
+    description?: string;
+    hint?: string;
+    placeholder?: string;
+    class?: Record<string, boolean>;
+    style?: Record<string, string>;
+    optional: boolean;
+    required: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+    type: string;
+    altAction?: string;
+    name?: string;
+    field?: string;
+    options?: unknown[];
+    length?: number;
+    autocomplete?: string;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,378 @@
+import { defineComponent as q, mergeModels as I, useModel as L, inject as O, ref as k, computed as u, watch as R, onUnmounted as T, getCurrentInstance as N, renderSlot as D, unref as x, provide as W, openBlock as m, createElementBlock as C, withModifiers as G, nextTick as J, createBlock as B, withCtx as w, toDisplayString as b, createCommentVNode as j, Fragment as K, renderList as Q, normalizeProps as A, guardReactiveProps as M, resolveDynamicComponent as F, mergeProps as H, normalizeClass as X, createElementVNode as $, withDirectives as Y, vModelDynamic as Z } from "vue";
+function f(n, r) {
+  return U(n) ? n(r) : n;
+}
+function S(n, r) {
+  if (typeof n == "object" && n !== null) {
+    const o = {};
+    for (const [t, c] of Object.entries(n))
+      o[t] = f(c, r);
+    return o;
+  }
+  return U(n) ? n(r) : n;
+}
+function U(n) {
+  return typeof n == "function";
+}
+const ee = /* @__PURE__ */ q({
+  __name: "VuilessField",
+  props: /* @__PURE__ */ I({
+    rules: {}
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(n) {
+    const r = n, o = L(n, "modelValue"), t = O("vuiless"), c = k(), d = k(!1), v = k(!1), _ = u(() => {
+      var a;
+      if ((a = t == null ? void 0 : t.value) != null && a.firstValidation)
+        switch (t.value.firstValidation) {
+          case "on-change":
+            return t.value.firstSubmitHappened || d.value;
+          case "touched-on-blur":
+            return t.value.firstSubmitHappened || v.value && d.value;
+          case "on-blur":
+            return t.value.firstSubmitHappened || v.value;
+          case "on-submit":
+            return t.value.firstSubmitHappened;
+          case "none":
+            return !1;
+        }
+      return !1;
+    }), h = u(() => {
+      if (_.value || c.value)
+        return p();
+    });
+    R([o], () => {
+      c.value = void 0, d.value = !0;
+    }), T(() => {
+      var a;
+      (a = t == null ? void 0 : t.value) == null || a.unregister(N());
+    }), t != null && t.value && t.value.register(N(), {
+      validate: () => (c.value = p(), c.value || !0),
+      clearErrors: () => {
+        d.value = !1, v.value = !1, c.value = void 0;
+      },
+      reset: () => {
+        o.value = "";
+      }
+    });
+    function p() {
+      var a, e, y;
+      if ((a = r.rules) != null && a.length)
+        for (const g of r.rules) {
+          const s = g(
+            o.value,
+            (e = t == null ? void 0 : t.value) == null ? void 0 : e.formData,
+            (y = t == null ? void 0 : t.value) == null ? void 0 : y.formContext
+          );
+          if (s !== !0)
+            return s || "Wrong value";
+        }
+    }
+    function i() {
+      v.value = !0;
+    }
+    const l = {
+      v: u({
+        get: () => o.value,
+        set: (a) => o.value = a
+      })
+    };
+    return (a, e) => {
+      var y, g;
+      return D(a.$slots, "default", {
+        onBlur: i,
+        error: h.value,
+        formData: (y = x(t)) == null ? void 0 : y.formData,
+        formContext: (g = x(t)) == null ? void 0 : g.formContext,
+        model: l.v
+      });
+    };
+  }
+}), te = /* @__PURE__ */ q({
+  __name: "VuilessForm",
+  props: {
+    formData: {},
+    formContext: {},
+    firstValidation: { default: "on-change" }
+  },
+  emits: ["submit"],
+  setup(n, { emit: r }) {
+    const o = n, t = r, c = /* @__PURE__ */ new Map(), d = k(!1), v = u(() => ({
+      firstSubmitHappened: d.value,
+      firstValidation: o.firstValidation,
+      register: (i, l) => {
+        c.set(i, l);
+      },
+      unregister: (i) => c.delete(i),
+      formData: o.formData,
+      formContext: o.formContext
+    }));
+    W("vuiless", v);
+    function _() {
+      d.value = !1;
+      for (const { clearErrors: i } of c.values())
+        i();
+    }
+    async function h() {
+      for (const { reset: i } of c.values())
+        i();
+      await J(), _();
+    }
+    function p() {
+      d.value = !0;
+      let i = !1;
+      if (o.firstValidation !== "none")
+        for (const { validate: l } of c.values())
+          l() !== !0 && (i = !0);
+      i || t("submit", o.formData);
+    }
+    return (i, l) => (m(), C("form", {
+      onSubmit: G(p, ["prevent"])
+    }, [
+      D(i.$slots, "default", {
+        clearErrors: _,
+        reset: h
+      })
+    ], 32));
+  }
+}), oe = /* @__PURE__ */ q({
+  __name: "oo-field",
+  props: {
+    field: {},
+    altAction: {},
+    label: {},
+    description: {},
+    hint: {},
+    placeholder: {},
+    classes: {},
+    styles: {},
+    type: {},
+    component: {},
+    autocomplete: {},
+    name: {},
+    value: {},
+    options: {},
+    attrs: {},
+    optional: { type: Boolean },
+    disabled: { type: Boolean },
+    hidden: { type: Boolean },
+    length: {},
+    validators: {}
+  },
+  setup(n) {
+    const r = n, o = O(
+      "vuiless"
+    ), t = u(
+      () => ({
+        v: o.value.formData[r.field],
+        data: o == null ? void 0 : o.value.formData,
+        context: o == null ? void 0 : o.value.formContext,
+        entry: r
+      })
+    ), c = u(() => f(r.label, t.value)), d = u(() => f(r.description, t.value)), v = u(() => f(r.hint, t.value)), _ = u(() => f(r.placeholder, t.value)), h = u(() => f(r.optional, t.value)), p = u(() => f(r.disabled, t.value)), i = u(() => f(r.hidden, t.value)), l = u(() => f(r.options, t.value)), a = u(() => {
+      const s = S(r.classes, t.value);
+      return typeof s == "string" ? {
+        [s]: !0,
+        disabled: p.value,
+        // error: !validation.value.passed,
+        required: !h.value
+      } : {
+        ...s || {},
+        disabled: p.value,
+        // error: !validation.value.passed,
+        required: !h.value
+      };
+    }), e = u(
+      () => S(r.styles, t.value)
+    ), y = u(() => S(r.attrs, t.value)), g = u(() => {
+      var s;
+      return (s = r.validators) == null ? void 0 : s.map(
+        (E) => (V, P, z) => E({
+          v: V,
+          data: P,
+          context: z,
+          entry: r
+        })
+      );
+    });
+    return (s, E) => (m(), B(x(ee), {
+      modelValue: x(o).formData[r.field],
+      "onUpdate:modelValue": E[0] || (E[0] = (V) => x(o).formData[r.field] = V),
+      rules: g.value
+    }, {
+      default: w((V) => [
+        D(s.$slots, "default", {
+          onBlur: V.onBlur,
+          error: V.error,
+          model: V.model,
+          formData: x(o).formData,
+          formContext: x(o).formContext,
+          label: c.value,
+          description: d.value,
+          hint: v.value,
+          placeholder: _.value,
+          classes: {
+            ...a.value,
+            error: !!V.error
+          },
+          styles: e.value,
+          optional: h.value,
+          disabled: p.value,
+          hidden: i.value,
+          type: s.type,
+          altAction: s.altAction,
+          component: s.component,
+          vName: s.name,
+          field: s.field,
+          options: l.value,
+          length: s.length,
+          required: !h.value,
+          autocomplete: s.autocomplete,
+          attrs: y.value
+        })
+      ]),
+      _: 3
+    }, 8, ["modelValue", "rules"]));
+  }
+}), re = { key: 0 }, ae = { key: 1 }, ne = { key: 0 }, le = ["onUpdate:modelValue", "onBlur", "placeholder", "autocomplete", "name", "type"], se = { class: "oo-error-slot" }, ue = { key: 4 }, ie = { key: 5 }, ce = ["disabled"], me = /* @__PURE__ */ q({
+  __name: "oo-form",
+  props: {
+    form: {},
+    formData: {},
+    formContext: {},
+    firstValidation: {},
+    components: {},
+    types: {}
+  },
+  emits: ["submit"],
+  setup(n, { emit: r }) {
+    const o = n, t = u(() => o.form.executable()), c = u(
+      () => ({
+        v: void 0,
+        data: v.value,
+        context: o.formContext,
+        entry: o
+      })
+    ), d = k({}), v = u(() => o.formData || d.value), _ = u(
+      () => f(t.value.submit.disabled, c.value)
+    ), h = r;
+    return (p, i) => (m(), B(x(te), {
+      "first-validation": p.firstValidation,
+      onSubmit: i[0] || (i[0] = (l) => h("submit", l)),
+      "form-data": v.value,
+      "form-context": p.formContext
+    }, {
+      default: w((l) => [
+        D(p.$slots, "form.header", {
+          clearErrors: l.clearErrors,
+          reset: l.reset
+        }, () => [
+          t.value.title ? (m(), C("h2", re, b(t.value.title), 1)) : j("", !0)
+        ]),
+        D(p.$slots, "form.before", {
+          clearErrors: l.clearErrors,
+          reset: l.reset
+        }),
+        (m(!0), C(K, null, Q(t.value.entries, (a) => (m(), B(oe, A(M(a)), {
+          default: w((e) => [
+            D(p.$slots, `field:${e.type}`, A(M(e)), () => {
+              var y, g, s;
+              return [
+                a.component && ((y = o.components) != null && y[a.component]) ? (m(), B(F(o.components[a.component]), H({
+                  key: 0,
+                  "on-blur": e.onBlur,
+                  error: e.error,
+                  model: e.model,
+                  "form-data": e.formData,
+                  "form-context": e.formContext,
+                  label: e.label,
+                  description: e.description,
+                  hint: e.hint,
+                  placeholder: e.placeholder,
+                  class: e.classes,
+                  style: e.styles,
+                  optional: e.optional,
+                  required: !e.required,
+                  disabled: e.disabled,
+                  hidden: e.hidden,
+                  type: e.type,
+                  "alt-action": e.altAction,
+                  name: e.vName,
+                  field: e,
+                  options: e.options,
+                  length: e.length,
+                  autocomplete: e.autocomplete
+                }, e.attrs), null, 16, ["on-blur", "error", "model", "form-data", "form-context", "label", "description", "hint", "placeholder", "class", "style", "optional", "required", "disabled", "hidden", "type", "alt-action", "name", "field", "options", "length", "autocomplete"])) : a.component && !((g = o.components) != null && g[a.component]) ? (m(), C("div", ae, " [" + b(e.label) + '] Component "' + b(e.component) + '" not supplied ', 1)) : (s = o.types) != null && s[a.type] ? (m(), B(F(o.types[a.type]), H({
+                  key: 2,
+                  "on-blur": e.onBlur,
+                  error: e.error,
+                  model: e.model,
+                  "form-data": e.formData,
+                  "form-context": e.formContext,
+                  label: e.label,
+                  description: e.description,
+                  hint: e.hint,
+                  placeholder: e.placeholder,
+                  class: e.classes,
+                  style: e.styles,
+                  optional: e.optional,
+                  required: !e.required,
+                  disabled: e.disabled,
+                  hidden: e.hidden,
+                  type: e.type,
+                  "alt-action": e.altAction,
+                  name: e.vName,
+                  field: e,
+                  options: e.options,
+                  length: e.length,
+                  autocomplete: e.autocomplete
+                }, e.attrs), null, 16, ["on-blur", "error", "model", "form-data", "form-context", "label", "description", "hint", "placeholder", "class", "style", "optional", "required", "disabled", "hidden", "type", "alt-action", "name", "field", "options", "length", "autocomplete"])) : ["text", "password", "number"].includes(e.type) ? (m(), C("div", {
+                  key: 3,
+                  class: X(["oo-default-field", e.classes])
+                }, [
+                  $("label", null, b(e.label), 1),
+                  e.description ? (m(), C("span", ne, b(e.description), 1)) : j("", !0),
+                  Y($("input", {
+                    "onUpdate:modelValue": (E) => e.model.value = E,
+                    onBlur: e.onBlur,
+                    placeholder: e.placeholder,
+                    autocomplete: e.autocomplete,
+                    name: e.vName,
+                    type: e.type
+                  }, null, 40, le), [
+                    [Z, e.model.value]
+                  ]),
+                  $("div", se, b(e.error || e.hint), 1)
+                ], 2)) : e.type === "paragraph" ? (m(), C("p", ue, b(e.description), 1)) : (m(), C("div", ie, " [" + b(e.label) + '] Not supported field type "' + b(e.type) + '" ' + b(e.component), 1))
+              ];
+            })
+          ]),
+          _: 2
+        }, 1040))), 256)),
+        D(p.$slots, "form.after", {
+          clearErrors: l.clearErrors,
+          reset: l.reset
+        }),
+        D(p.$slots, "form.submit", {
+          disabled: _.value,
+          clearErrors: l.clearErrors,
+          reset: l.reset
+        }, () => [
+          $("button", { disabled: _.value }, b(t.value.submit.text), 9, ce)
+        ]),
+        D(p.$slots, "form.footer", {
+          clearErrors: l.clearErrors,
+          reset: l.reset
+        })
+      ]),
+      _: 3
+    }, 8, ["first-validation", "form-data", "form-context"]));
+  }
+});
+export {
+  oe as OoField,
+  me as OoFoorm
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(B,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(B=typeof globalThis<"u"?globalThis:B||self,e(B.index={},B.Vue))})(this,function(B,e){"use strict";function f(l,n){return S(l)?l(n):l}function C(l,n){if(typeof l=="object"&&l!==null){const r={};for(const[o,p]of Object.entries(l))r[o]=f(p,n);return r}return S(l)?l(n):l}function S(l){return typeof l=="function"}const V=e.defineComponent({__name:"VuilessField",props:e.mergeModels({rules:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(l){const n=l,r=e.useModel(l,"modelValue"),o=e.inject("vuiless"),p=e.ref(),d=e.ref(!1),u=e.ref(!1),h=e.computed(()=>{var a;if((a=o==null?void 0:o.value)!=null&&a.firstValidation)switch(o.value.firstValidation){case"on-change":return o.value.firstSubmitHappened||d.value;case"touched-on-blur":return o.value.firstSubmitHappened||u.value&&d.value;case"on-blur":return o.value.firstSubmitHappened||u.value;case"on-submit":return o.value.firstSubmitHappened;case"none":return!1}return!1}),y=e.computed(()=>{if(h.value||p.value)return m()});e.watch([r],()=>{p.value=void 0,d.value=!0}),e.onUnmounted(()=>{var a;(a=o==null?void 0:o.value)==null||a.unregister(e.getCurrentInstance())}),o!=null&&o.value&&o.value.register(e.getCurrentInstance(),{validate:()=>(p.value=m(),p.value||!0),clearErrors:()=>{d.value=!1,u.value=!1,p.value=void 0},reset:()=>{r.value=""}});function m(){var a,t,b;if((a=n.rules)!=null&&a.length)for(const g of n.rules){const c=g(r.value,(t=o==null?void 0:o.value)==null?void 0:t.formData,(b=o==null?void 0:o.value)==null?void 0:b.formContext);if(c!==!0)return c||"Wrong value"}}function i(){u.value=!0}const s={v:e.computed({get:()=>r.value,set:a=>r.value=a})};return(a,t)=>{var b,g;return e.renderSlot(a.$slots,"default",{onBlur:i,error:y.value,formData:(b=e.unref(o))==null?void 0:b.formData,formContext:(g=e.unref(o))==null?void 0:g.formContext,model:s.v})}}}),E=e.defineComponent({__name:"VuilessForm",props:{formData:{},formContext:{},firstValidation:{default:"on-change"}},emits:["submit"],setup(l,{emit:n}){const r=l,o=n,p=new Map,d=e.ref(!1),u=e.computed(()=>({firstSubmitHappened:d.value,firstValidation:r.firstValidation,register:(i,s)=>{p.set(i,s)},unregister:i=>p.delete(i),formData:r.formData,formContext:r.formContext}));e.provide("vuiless",u);function h(){d.value=!1;for(const{clearErrors:i}of p.values())i()}async function y(){for(const{reset:i}of p.values())i();await e.nextTick(),h()}function m(){d.value=!0;let i=!1;if(r.firstValidation!=="none")for(const{validate:s}of p.values())s()!==!0&&(i=!0);i||o("submit",r.formData)}return(i,s)=>(e.openBlock(),e.createElementBlock("form",{onSubmit:e.withModifiers(m,["prevent"])},[e.renderSlot(i.$slots,"default",{clearErrors:h,reset:y})],32))}}),_=e.defineComponent({__name:"oo-field",props:{field:{},altAction:{},label:{},description:{},hint:{},placeholder:{},classes:{},styles:{},type:{},component:{},autocomplete:{},name:{},value:{},options:{},attrs:{},optional:{type:Boolean},disabled:{type:Boolean},hidden:{type:Boolean},length:{},validators:{}},setup(l){const n=l,r=e.inject("vuiless"),o=e.computed(()=>({v:r.value.formData[n.field],data:r==null?void 0:r.value.formData,context:r==null?void 0:r.value.formContext,entry:n})),p=e.computed(()=>f(n.label,o.value)),d=e.computed(()=>f(n.description,o.value)),u=e.computed(()=>f(n.hint,o.value)),h=e.computed(()=>f(n.placeholder,o.value)),y=e.computed(()=>f(n.optional,o.value)),m=e.computed(()=>f(n.disabled,o.value)),i=e.computed(()=>f(n.hidden,o.value)),s=e.computed(()=>f(n.options,o.value)),a=e.computed(()=>{const c=C(n.classes,o.value);return typeof c=="string"?{[c]:!0,disabled:m.value,required:!y.value}:{...c||{},disabled:m.value,required:!y.value}}),t=e.computed(()=>C(n.styles,o.value)),b=e.computed(()=>C(n.attrs,o.value)),g=e.computed(()=>{var c;return(c=n.validators)==null?void 0:c.map(D=>(k,F,H)=>D({v:k,data:F,context:H,entry:n}))});return(c,D)=>(e.openBlock(),e.createBlock(e.unref(V),{modelValue:e.unref(r).formData[n.field],"onUpdate:modelValue":D[0]||(D[0]=k=>e.unref(r).formData[n.field]=k),rules:g.value},{default:e.withCtx(k=>[e.renderSlot(c.$slots,"default",{onBlur:k.onBlur,error:k.error,model:k.model,formData:e.unref(r).formData,formContext:e.unref(r).formContext,label:p.value,description:d.value,hint:u.value,placeholder:h.value,classes:{...a.value,error:!!k.error},styles:t.value,optional:y.value,disabled:m.value,hidden:i.value,type:c.type,altAction:c.altAction,component:c.component,vName:c.name,field:c.field,options:s.value,length:c.length,required:!y.value,autocomplete:c.autocomplete,attrs:b.value})]),_:3},8,["modelValue","rules"]))}}),x={key:0},N={key:1},$={key:0},q=["onUpdate:modelValue","onBlur","placeholder","autocomplete","name","type"],w={class:"oo-error-slot"},j={key:4},M={key:5},P=["disabled"],A=e.defineComponent({__name:"oo-form",props:{form:{},formData:{},formContext:{},firstValidation:{},components:{},types:{}},emits:["submit"],setup(l,{emit:n}){const r=l,o=e.computed(()=>r.form.executable()),p=e.computed(()=>({v:void 0,data:u.value,context:r.formContext,entry:r})),d=e.ref({}),u=e.computed(()=>r.formData||d.value),h=e.computed(()=>f(o.value.submit.disabled,p.value)),y=n;return(m,i)=>(e.openBlock(),e.createBlock(e.unref(E),{"first-validation":m.firstValidation,onSubmit:i[0]||(i[0]=s=>y("submit",s)),"form-data":u.value,"form-context":m.formContext},{default:e.withCtx(s=>[e.renderSlot(m.$slots,"form.header",{clearErrors:s.clearErrors,reset:s.reset},()=>[o.value.title?(e.openBlock(),e.createElementBlock("h2",x,e.toDisplayString(o.value.title),1)):e.createCommentVNode("",!0)]),e.renderSlot(m.$slots,"form.before",{clearErrors:s.clearErrors,reset:s.reset}),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value.entries,a=>(e.openBlock(),e.createBlock(_,e.normalizeProps(e.guardReactiveProps(a)),{default:e.withCtx(t=>[e.renderSlot(m.$slots,`field:${t.type}`,e.normalizeProps(e.guardReactiveProps(t)),()=>{var b,g,c;return[a.component&&((b=r.components)!=null&&b[a.component])?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.components[a.component]),e.mergeProps({key:0,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,length:t.length,autocomplete:t.autocomplete},t.attrs),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","length","autocomplete"])):a.component&&!((g=r.components)!=null&&g[a.component])?(e.openBlock(),e.createElementBlock("div",N," ["+e.toDisplayString(t.label)+'] Component "'+e.toDisplayString(t.component)+'" not supplied ',1)):(c=r.types)!=null&&c[a.type]?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.types[a.type]),e.mergeProps({key:2,"on-blur":t.onBlur,error:t.error,model:t.model,"form-data":t.formData,"form-context":t.formContext,label:t.label,description:t.description,hint:t.hint,placeholder:t.placeholder,class:t.classes,style:t.styles,optional:t.optional,required:!t.required,disabled:t.disabled,hidden:t.hidden,type:t.type,"alt-action":t.altAction,name:t.vName,field:t,options:t.options,length:t.length,autocomplete:t.autocomplete},t.attrs),null,16,["on-blur","error","model","form-data","form-context","label","description","hint","placeholder","class","style","optional","required","disabled","hidden","type","alt-action","name","field","options","length","autocomplete"])):["text","password","number"].includes(t.type)?(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["oo-default-field",t.classes])},[e.createElementVNode("label",null,e.toDisplayString(t.label),1),t.description?(e.openBlock(),e.createElementBlock("span",$,e.toDisplayString(t.description),1)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":D=>t.model.value=D,onBlur:t.onBlur,placeholder:t.placeholder,autocomplete:t.autocomplete,name:t.vName,type:t.type},null,40,q),[[e.vModelDynamic,t.model.value]]),e.createElementVNode("div",w,e.toDisplayString(t.error||t.hint),1)],2)):t.type==="paragraph"?(e.openBlock(),e.createElementBlock("p",j,e.toDisplayString(t.description),1)):(e.openBlock(),e.createElementBlock("div",M," ["+e.toDisplayString(t.label)+'] Not supported field type "'+e.toDisplayString(t.type)+'" '+e.toDisplayString(t.component),1))]})]),_:2},1040))),256)),e.renderSlot(m.$slots,"form.after",{clearErrors:s.clearErrors,reset:s.reset}),e.renderSlot(m.$slots,"form.submit",{disabled:h.value,clearErrors:s.clearErrors,reset:s.reset},()=>[e.createElementVNode("button",{disabled:h.value},e.toDisplayString(o.value.submit.text),9,P)]),e.renderSlot(m.$slots,"form.footer",{clearErrors:s.clearErrors,reset:s.reset})]),_:3},8,["first-validation","form-data","form-context"]))}});B.OoField=_,B.OoFoorm=A,Object.defineProperty(B,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.oo-default-field{display:flex;flex-direction:column;gap:4px}.oo-default-field.required label:after{content:" *";color:red}.oo-default-field.error input{outline:1px solid red}.oo-default-field .oo-error-slot{height:14px;line-height:12px;font-size:12px}.oo-default-field.error .oo-error-slot{color:red}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@foormjs/vue",
+  "version": "0.0.2",
+  "description": "@foormjs/vue",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "customBuild": true,
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles": "./dist/style.css",
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/foormjs/foormjs.git",
+    "directory": "packages/vue"
+  },
+  "keywords": [
+    "foorm",
+    "foormjs",
+    "foorm",
+    "foormjs",
+    "forms",
+    "validations"
+  ],
+  "author": "Artem Maltsev",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/foormjs/foormjs/issues"
+  },
+  "homepage": "https://github.com/foormjs/foormjs/tree/main/packages/vue#readme",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force"
+  },
+  "dependencies": {
+    "foorm": "0.0.2",
+    "vue": "^3.3.9",
+    "vuiless-forms": "^0.0.3"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.2",
+    "@types/node": "^20.11.28",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/tsconfig": "^0.5.1",
+    "npm-run-all2": "^6.1.2",
+    "typescript": "~5.4.0",
+    "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.8.1",
+    "vue-tsc": "^2.0.6"
+  }
+}