@macrulez/vue-form-schema 0.1.7 → 0.2.0

package/dist/ui-primevue.js

@@ -0,0 +1,651 @@
+import { defineComponent as F, computed as k, openBlock as o, createElementBlock as f, createTextVNode as T, toDisplayString as $, createCommentVNode as V, renderSlot as I, normalizeProps as O, guardReactiveProps as Q, Fragment as C, renderList as S, createBlock as x, unref as y, withCtx as P, ref as N, onMounted as W, onUnmounted as X, createVNode as B, mergeProps as q, createElementVNode as g, withModifiers as Z, normalizeClass as _, resolveDynamicComponent as E, resolveComponent as ee } from "vue";
+import w from "primevue/button";
+import { b as le, d as M, u as te } from "./MaskEngine-BEXwX4BK.js";
+import { g as L } from "./ValidationEngine-BC4U1ef1.js";
+import oe from "primevue/inputtext";
+import re from "primevue/message";
+import ae from "primevue/inputnumber";
+import ne from "primevue/textarea";
+import de from "primevue/select";
+import ie from "primevue/checkbox";
+import ue from "primevue/radiobutton";
+import se from "primevue/datepicker";
+import { _ as me } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const fe = { class: "mb-4 flex flex-col gap-1.5" }, ce = ["for"], ve = {
+  key: 0,
+  class: "ml-0.5 text-red-500",
+  "aria-hidden": "true"
+}, be = ["id"], R = /* @__PURE__ */ F({
+  __name: "BaseField",
+  props: {
+    field: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  setup(e) {
+    const i = e, t = k(() => {
+      var s;
+      return !!(i.touched && ((s = i.error) != null && s.length));
+    }), c = k(() => `${i.field.name}-error`), r = k(() => ({
+      invalid: t.value,
+      "aria-required": i.field.required ? "true" : void 0,
+      "aria-invalid": t.value ? "true" : "false",
+      "aria-describedby": t.value ? c.value : void 0
+    }));
+    return (s, u) => (o(), f("div", fe, [
+      e.field.label ? (o(), f("label", {
+        key: 0,
+        for: e.field.name,
+        class: "text-sm font-medium"
+      }, [
+        T($(e.field.label) + " ", 1),
+        e.field.required ? (o(), f("span", ve, "*")) : V("", !0)
+      ], 8, ce)) : V("", !0),
+      I(s.$slots, "default", O(Q(r.value))),
+      t.value ? (o(), f("div", {
+        key: 1,
+        id: c.value,
+        role: "alert",
+        "aria-live": "polite",
+        class: "flex flex-col gap-1"
+      }, [
+        (o(!0), f(C, null, S(e.error, (d, m) => (o(), x(y(re), {
+          key: m,
+          severity: "error",
+          size: "small",
+          variant: "simple"
+        }, {
+          default: P(() => [
+            T($(d), 1)
+          ]),
+          _: 2
+        }, 1024))), 128))
+      ], 8, be)) : V("", !0)
+    ]));
+  }
+}), U = /* @__PURE__ */ F({
+  __name: "TextField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = e, c = i, r = N(null);
+    let s = null;
+    return W(() => {
+      var d;
+      const u = (d = r.value) == null ? void 0 : d.$el;
+      u && t.field.mask && (s = le(u, t.field.mask));
+    }), X(() => s == null ? void 0 : s()), (u, d) => (o(), x(R, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((m) => [
+        B(y(oe), q({
+          id: e.field.name,
+          ref_key: "inputRef",
+          ref: r,
+          type: e.field.type === "email" ? "email" : "text",
+          name: e.field.name,
+          "model-value": e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required,
+          fluid: ""
+        }, m, {
+          "onUpdate:modelValue": d[0] || (d[0] = (v) => c("update:modelValue", v ?? "")),
+          onBlur: d[1] || (d[1] = (v) => c("blur"))
+        }), null, 16, ["id", "type", "name", "model-value", "placeholder", "disabled", "required"])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), K = /* @__PURE__ */ F({
+  __name: "NumberField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = i;
+    return (c, r) => (o(), x(R, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((s) => [
+        B(y(ae), q({
+          "input-id": e.field.name,
+          name: e.field.name,
+          "model-value": e.modelValue,
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          fluid: ""
+        }, s, {
+          "onUpdate:modelValue": r[0] || (r[0] = (u) => t("update:modelValue", u)),
+          onBlur: r[1] || (r[1] = (u) => t("blur"))
+        }), null, 16, ["input-id", "name", "model-value", "placeholder", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), Y = /* @__PURE__ */ F({
+  __name: "TextareaField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = i;
+    return (c, r) => (o(), x(R, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((s) => [
+        B(y(ne), q({
+          id: e.field.name,
+          name: e.field.name,
+          "model-value": e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          required: e.field.required,
+          rows: "3",
+          fluid: ""
+        }, s, {
+          "onUpdate:modelValue": r[0] || (r[0] = (u) => t("update:modelValue", u)),
+          onBlur: r[1] || (r[1] = (u) => t("blur"))
+        }), null, 16, ["id", "name", "model-value", "placeholder", "disabled", "required"])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), j = /* @__PURE__ */ F({
+  __name: "SelectField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = e, c = i, r = k(() => Array.isArray(t.field.options) ? t.field.options : []);
+    return (s, u) => (o(), x(R, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((d) => [
+        B(y(de), q({
+          "input-id": e.field.name,
+          name: e.field.name,
+          "model-value": e.modelValue,
+          options: r.value,
+          "option-label": "label",
+          "option-value": "value",
+          placeholder: e.field.placeholder ?? "Select an option",
+          disabled: e.field.disabled === !0 || e.field.optionsLoading,
+          loading: e.field.optionsLoading,
+          fluid: ""
+        }, d, {
+          "onUpdate:modelValue": u[0] || (u[0] = (m) => c("update:modelValue", m)),
+          onBlur: u[1] || (u[1] = (m) => c("blur"))
+        }), null, 16, ["input-id", "name", "model-value", "options", "placeholder", "disabled", "loading"])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), pe = { class: "flex cursor-pointer items-center gap-2.5" }, he = {
+  key: 0,
+  class: "text-sm"
+}, G = /* @__PURE__ */ F({
+  __name: "CheckboxField",
+  props: {
+    field: {},
+    modelValue: { type: [Boolean, null] },
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = i;
+    return (c, r) => (o(), x(R, {
+      field: { ...e.field, label: void 0 },
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((s) => [
+        g("label", pe, [
+          B(y(ie), q({
+            "input-id": e.field.name,
+            name: e.field.name,
+            "model-value": !!e.modelValue,
+            binary: "",
+            disabled: e.field.disabled === !0
+          }, s, {
+            "onUpdate:modelValue": r[0] || (r[0] = (u) => t("update:modelValue", u)),
+            onBlur: r[1] || (r[1] = (u) => t("blur"))
+          }), null, 16, ["input-id", "name", "model-value", "disabled"]),
+          e.field.label ? (o(), f("span", he, $(e.field.label), 1)) : V("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ye = ["aria-required", "aria-invalid", "aria-describedby"], Ve = {
+  key: 0,
+  class: "text-sm font-medium"
+}, $e = {
+  key: 0,
+  class: "ml-0.5 text-red-500",
+  "aria-hidden": "true"
+}, xe = { class: "flex flex-col gap-2" }, ge = { class: "text-sm" }, ke = ["id"], H = /* @__PURE__ */ F({
+  __name: "RadioField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = e, c = i, r = k(() => {
+      var d;
+      return !!(t.touched && ((d = t.error) != null && d.length));
+    }), s = k(() => `${t.field.name}-error`), u = k(() => Array.isArray(t.field.options) ? t.field.options : []);
+    return (d, m) => (o(), f("fieldset", {
+      class: "mb-4 flex flex-col gap-2",
+      "aria-required": e.field.required ? "true" : void 0,
+      "aria-invalid": r.value ? "true" : "false",
+      "aria-describedby": r.value ? s.value : void 0
+    }, [
+      e.field.label ? (o(), f("legend", Ve, [
+        T($(e.field.label) + " ", 1),
+        e.field.required ? (o(), f("span", $e, "*")) : V("", !0)
+      ])) : V("", !0),
+      g("div", xe, [
+        (o(!0), f(C, null, S(u.value, (v) => (o(), f("label", {
+          key: String(v.value),
+          class: "flex cursor-pointer items-center gap-2.5"
+        }, [
+          B(y(ue), {
+            name: e.field.name,
+            value: v.value,
+            "model-value": e.modelValue,
+            disabled: e.field.disabled === !0,
+            "onUpdate:modelValue": m[0] || (m[0] = (h) => c("update:modelValue", h)),
+            onBlur: m[1] || (m[1] = (h) => c("blur"))
+          }, null, 8, ["name", "value", "model-value", "disabled"]),
+          g("span", ge, $(v.label), 1)
+        ]))), 128))
+      ]),
+      r.value ? (o(), f("div", {
+        key: 1,
+        id: s.value,
+        role: "alert",
+        "aria-live": "polite"
+      }, [
+        (o(!0), f(C, null, S(e.error, (v, h) => (o(), f("p", {
+          key: h,
+          class: "text-sm font-medium text-red-500"
+        }, $(v), 1))), 128))
+      ], 8, ke)) : V("", !0)
+    ], 8, ye));
+  }
+}), J = /* @__PURE__ */ F({
+  __name: "DateField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = e, c = i;
+    function r(d) {
+      if (!d) return null;
+      const [m, v, h] = d.split("-").map(Number);
+      return !m || !v || !h ? null : new Date(m, v - 1, h);
+    }
+    function s(d) {
+      if (!(d instanceof Date)) return "";
+      const m = d.getFullYear(), v = String(d.getMonth() + 1).padStart(2, "0"), h = String(d.getDate()).padStart(2, "0");
+      return `${m}-${v}-${h}`;
+    }
+    const u = k(() => r(t.modelValue));
+    return (d, m) => (o(), x(R, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((v) => [
+        B(y(se), q({
+          "input-id": e.field.name,
+          name: e.field.name,
+          "model-value": u.value,
+          "date-format": "yy-mm-dd",
+          "show-icon": "",
+          "icon-display": "input",
+          disabled: e.field.disabled === !0,
+          fluid: ""
+        }, v, {
+          "onUpdate:modelValue": m[0] || (m[0] = (h) => c("update:modelValue", s(h))),
+          onBlur: m[1] || (m[1] = (h) => c("blur"))
+        }), null, 16, ["input-id", "name", "model-value", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), Fe = ["id", "name", "accept", "multiple", "disabled", "required"], Be = { class: "vfs-pv-dropzone__hint" }, Ce = {
+  key: 0,
+  class: "vfs-pv-dropzone__accept"
+}, Pe = {
+  key: 0,
+  class: "vfs-pv-filelist"
+}, De = { class: "vfs-pv-filelist__name" }, Se = { class: "vfs-pv-filelist__size" }, qe = ["aria-label", "onClick"], Re = /* @__PURE__ */ F({
+  __name: "FileField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: i }) {
+    const t = e, c = i, r = N(!1), s = N(null), u = k(() => t.modelValue ? Array.isArray(t.modelValue) ? t.modelValue : [t.modelValue] : []), d = k(() => t.field.multiple ?? !1);
+    function m(a) {
+      if (!a || a.length === 0) {
+        c("update:modelValue", null);
+        return;
+      }
+      c("update:modelValue", d.value ? Array.from(a) : a[0]);
+    }
+    function v(a) {
+      m(a.target.files), c("blur");
+    }
+    function h(a) {
+      var l;
+      r.value = !1, a.preventDefault(), m(((l = a.dataTransfer) == null ? void 0 : l.files) ?? null), c("blur");
+    }
+    function z(a) {
+      const l = u.value.filter((b, p) => p !== a);
+      l.length === 0 ? (c("update:modelValue", null), s.value && (s.value.value = "")) : c("update:modelValue", d.value ? l : l[0]);
+    }
+    function A(a) {
+      return a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${(a / 1024).toFixed(1)} KB` : `${(a / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return (a, l) => (o(), x(R, {
+      field: e.field,
+      error: e.error,
+      touched: e.touched
+    }, {
+      default: P((b) => {
+        var p;
+        return [
+          g("div", {
+            class: _(["vfs-pv-dropzone", {
+              "vfs-pv-dropzone--dragging": r.value,
+              "vfs-pv-dropzone--error": e.touched && ((p = e.error) == null ? void 0 : p.length)
+            }]),
+            onDragover: l[0] || (l[0] = Z((n) => r.value = !0, ["prevent"])),
+            onDragleave: l[1] || (l[1] = (n) => r.value = !1),
+            onDrop: h
+          }, [
+            g("input", q({
+              id: e.field.name,
+              ref_key: "inputRef",
+              ref: s,
+              type: "file",
+              name: e.field.name,
+              accept: e.field.accept,
+              multiple: d.value,
+              disabled: e.field.disabled === !0,
+              required: e.field.required
+            }, b, {
+              class: "vfs-pv-dropzone__input",
+              onChange: v
+            }), null, 16, Fe),
+            g("div", Be, [
+              g("p", null, $(r.value ? "Drop files here" : "Click to upload or drag & drop"), 1),
+              e.field.accept ? (o(), f("p", Ce, $(e.field.accept), 1)) : V("", !0)
+            ])
+          ], 34),
+          u.value.length ? (o(), f("ul", Pe, [
+            (o(!0), f(C, null, S(u.value, (n, D) => (o(), f("li", {
+              key: `${n.name}-${D}`,
+              class: "vfs-pv-filelist__item"
+            }, [
+              g("span", De, $(n.name), 1),
+              g("span", Se, $(A(n.size)), 1),
+              g("button", {
+                type: "button",
+                "aria-label": `Remove ${n.name}`,
+                class: "vfs-pv-filelist__remove",
+                onClick: (Ee) => z(D)
+              }, " × ", 8, qe)
+            ]))), 128))
+          ])) : V("", !0)
+        ];
+      }),
+      _: 1
+    }, 8, ["field", "error", "touched"]));
+  }
+}), ze = /* @__PURE__ */ me(Re, [["__scopeId", "data-v-1fed53d8"]]), Ae = { class: "mb-4" }, Ue = {
+  key: 0,
+  class: "mb-2 text-sm font-medium"
+}, Te = { class: "flex-1" }, Ie = /* @__PURE__ */ F({
+  __name: "ArrayField",
+  props: {
+    field: {},
+    form: {},
+    components: {}
+  },
+  setup(e) {
+    const i = e, t = M(), c = {
+      text: U,
+      email: U,
+      number: K,
+      textarea: Y,
+      select: j,
+      checkbox: G,
+      radio: H,
+      date: J
+    };
+    function r(a) {
+      var l;
+      return a.component ? a.component : ((l = i.components) == null ? void 0 : l[a.type]) ?? t[a.type] ?? c[a.type] ?? null;
+    }
+    const { rows: s, append: u, remove: d } = te(i.form, i.field.name);
+    function m(a) {
+      return L(i.form.values.value, a.name);
+    }
+    function v(a, l) {
+      i.form.setField(a.name, l);
+    }
+    function h(a) {
+      var b;
+      const l = i.form;
+      (b = l.touchField) == null || b.call(l, a.name);
+    }
+    function z(a) {
+      return i.form.errors.value[a.name] ?? [];
+    }
+    function A(a) {
+      return i.form.touched.value[a.name] ?? !1;
+    }
+    return (a, l) => (o(), f("div", Ae, [
+      e.field.label ? (o(), f("div", Ue, $(e.field.label), 1)) : V("", !0),
+      (o(!0), f(C, null, S(y(s), (b) => (o(), f("div", {
+        key: b.key,
+        style: { border: "1px solid var(--p-surface-200, #e2e8f0)" },
+        class: "mb-2 flex items-start gap-2 rounded-md p-3"
+      }, [
+        g("div", Te, [
+          (o(!0), f(C, null, S(b.fields, (p) => (o(), f(C, {
+            key: p.name
+          }, [
+            r(p) ? (o(), x(E(r(p)), {
+              key: 0,
+              field: p,
+              "model-value": m(p),
+              error: z(p),
+              touched: A(p),
+              "onUpdate:modelValue": (n) => v(p, n),
+              onBlur: (n) => h(p)
+            }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : V("", !0)
+          ], 64))), 128))
+        ]),
+        B(y(w), {
+          type: "button",
+          label: "Remove",
+          severity: "danger",
+          text: "",
+          size: "small",
+          class: "mt-6",
+          onClick: (p) => y(d)(b.index)
+        }, null, 8, ["onClick"])
+      ]))), 128)),
+      B(y(w), {
+        type: "button",
+        label: "+ Add row",
+        severity: "secondary",
+        text: "",
+        size: "small",
+        onClick: l[0] || (l[0] = (b) => y(u)())
+      })
+    ]));
+  }
+}), Ne = {
+  key: 1,
+  style: { border: "1px solid var(--p-surface-200, #e2e8f0)" },
+  class: "mb-4 rounded-md p-4"
+}, we = {
+  key: 0,
+  class: "px-1 text-sm font-medium"
+}, _e = /* @__PURE__ */ F({
+  __name: "PrimeVueFormRenderer",
+  props: {
+    form: {},
+    components: {},
+    submitLabel: {},
+    fields: {}
+  },
+  emits: ["submit"],
+  setup(e, { emit: i }) {
+    const t = e, c = M(), r = i, s = {
+      text: U,
+      email: U,
+      number: K,
+      textarea: Y,
+      select: j,
+      checkbox: G,
+      radio: H,
+      date: J,
+      file: ze
+    };
+    function u(l) {
+      var b;
+      return l.component ? l.component : ((b = t.components) == null ? void 0 : b[l.type]) ?? c[l.type] ?? s[l.type] ?? null;
+    }
+    function d(l) {
+      return L(t.form.values.value, l.name);
+    }
+    function m(l, b) {
+      t.form.setField(l.name, b);
+    }
+    function v(l) {
+      var p;
+      const b = t.form;
+      (p = b.touchField) == null || p.call(b, l.name);
+    }
+    function h(l) {
+      return t.form.errors.value[l.name] ?? [];
+    }
+    function z(l) {
+      return t.form.touched.value[l.name] ?? !1;
+    }
+    const A = k(
+      () => (t.fields ?? t.form.fields.value).filter((l) => l.visible !== !1)
+    );
+    async function a(l) {
+      l.preventDefault(), await t.form.submit(), r("submit");
+    }
+    return (l, b) => {
+      const p = ee("PrimeVueFormRenderer", !0);
+      return o(), f("form", {
+        novalidate: "",
+        onSubmit: a
+      }, [
+        (o(!0), f(C, null, S(A.value, (n) => (o(), f(C, {
+          key: n.name
+        }, [
+          l.$slots[`field-${n.name}`] ? I(l.$slots, `field-${n.name}`, {
+            key: 0,
+            field: n,
+            value: d(n),
+            error: h(n),
+            touched: z(n),
+            setValue: (D) => m(n, D),
+            touch: () => v(n)
+          }) : n.type === "group" ? (o(), f("fieldset", Ne, [
+            n.label ? (o(), f("legend", we, $(n.label), 1)) : V("", !0),
+            n.fields ? (o(), x(p, {
+              key: 1,
+              form: e.form,
+              fields: n.fields,
+              components: e.components
+            }, null, 8, ["form", "fields", "components"])) : V("", !0)
+          ])) : n.type === "array" ? (o(), x(Ie, {
+            key: 2,
+            field: n,
+            form: e.form,
+            components: e.components
+          }, null, 8, ["field", "form", "components"])) : u(n) ? (o(), x(E(u(n)), {
+            key: 3,
+            field: n,
+            "model-value": d(n),
+            error: h(n),
+            touched: z(n),
+            "onUpdate:modelValue": (D) => m(n, D),
+            onBlur: (D) => v(n)
+          }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : V("", !0)
+        ], 64))), 128)),
+        I(l.$slots, "submit", {
+          isSubmitting: e.form.isSubmitting.value,
+          isValid: e.form.isValid.value
+        }, () => [
+          B(y(w), {
+            type: "submit",
+            label: e.submitLabel ?? "Submit",
+            disabled: e.form.isSubmitting.value,
+            class: "mt-2"
+          }, null, 8, ["label", "disabled"])
+        ])
+      ], 32);
+    };
+  }
+});
+export {
+  _e as PrimeVueFormRenderer,
+  Ie as PvArrayField,
+  G as PvCheckboxField,
+  J as PvDateField,
+  ze as PvFileField,
+  K as PvNumberField,
+  H as PvRadioField,
+  j as PvSelectField,
+  U as PvTextField,
+  Y as PvTextareaField
+};