@macrulez/vue-form-schema 0.1.9 → 0.2.0

package/dist/ui-naive.js

@@ -0,0 +1,667 @@
+import { defineComponent as B, ref as A, computed as $, onMounted as X, onUnmounted as Y, openBlock as r, createBlock as V, unref as b, createSlots as C, withCtx as p, createVNode as N, createElementBlock as f, Fragment as g, renderList as x, toDisplayString as k, createTextVNode as E, createElementVNode as w, withModifiers as Z, normalizeClass as _, createCommentVNode as z, resolveDynamicComponent as I, resolveComponent as ee, renderSlot as M } from "vue";
+import { NFormItem as q, NInput as L, NInputNumber as le, NSelect as te, NCheckbox as ae, NRadioGroup as re, NSpace as oe, NRadio as ne, NDatePicker as ue, NCard as P, NFlex as de, NButton as T } from "naive-ui";
+import { b as ie, d as j, u as se } from "./MaskEngine-BEXwX4BK.js";
+import { g as G } from "./ValidationEngine-BC4U1ef1.js";
+import { _ as me } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const U = /* @__PURE__ */ B({
+  __name: "TextField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = A(null);
+    let i = null;
+    const n = $(() => {
+      var a;
+      return !!(t.touched && ((a = t.error) != null && a.length));
+    });
+    return X(() => {
+      var u;
+      const a = (u = o.value) == null ? void 0 : u.inputElRef;
+      a && t.field.mask && (i = ie(a, t.field.mask));
+    }), Y(() => i == null ? void 0 : i()), (a, u) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": n.value ? "error" : void 0,
+      "show-feedback": n.value
+    }, C({
+      default: p(() => [
+        N(b(L), {
+          ref_key: "inputRef",
+          ref: o,
+          type: "text",
+          "input-props": { id: e.field.name, name: e.field.name },
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          status: n.value ? "error" : void 0,
+          "onUpdate:value": u[0] || (u[0] = (c) => s("update:modelValue", c)),
+          onBlur: u[1] || (u[1] = (c) => s("blur"))
+        }, null, 8, ["input-props", "value", "placeholder", "disabled", "status"])
+      ]),
+      _: 2
+    }, [
+      n.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (c, F) => (r(), f("div", { key: F }, k(c), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), K = /* @__PURE__ */ B({
+  __name: "NumberField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = $(() => {
+      var i;
+      return !!(t.touched && ((i = t.error) != null && i.length));
+    });
+    return (i, n) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": o.value ? "error" : void 0,
+      "show-feedback": o.value
+    }, C({
+      default: p(() => [
+        N(b(le), {
+          style: { width: "100%" },
+          "input-props": { id: e.field.name, name: e.field.name },
+          value: e.modelValue,
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          status: o.value ? "error" : void 0,
+          "onUpdate:value": n[0] || (n[0] = (a) => s("update:modelValue", a)),
+          onBlur: n[1] || (n[1] = (a) => s("blur"))
+        }, null, 8, ["input-props", "value", "placeholder", "disabled", "status"])
+      ]),
+      _: 2
+    }, [
+      o.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (a, u) => (r(), f("div", { key: u }, k(a), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), H = /* @__PURE__ */ B({
+  __name: "TextareaField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = $(() => {
+      var i;
+      return !!(t.touched && ((i = t.error) != null && i.length));
+    });
+    return (i, n) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": o.value ? "error" : void 0,
+      "show-feedback": o.value
+    }, C({
+      default: p(() => [
+        N(b(L), {
+          type: "textarea",
+          "input-props": { id: e.field.name, name: e.field.name },
+          value: e.modelValue ?? "",
+          placeholder: e.field.placeholder,
+          disabled: e.field.disabled === !0,
+          status: o.value ? "error" : void 0,
+          autosize: { minRows: 3 },
+          "onUpdate:value": n[0] || (n[0] = (a) => s("update:modelValue", a)),
+          onBlur: n[1] || (n[1] = (a) => s("blur"))
+        }, null, 8, ["input-props", "value", "placeholder", "disabled", "status"])
+      ]),
+      _: 2
+    }, [
+      o.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (a, u) => (r(), f("div", { key: u }, k(a), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), J = /* @__PURE__ */ B({
+  __name: "SelectField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = $(() => {
+      var a;
+      return !!(t.touched && ((a = t.error) != null && a.length));
+    }), i = $(
+      () => Array.isArray(t.field.options) ? t.field.options : []
+    ), n = $(() => t.modelValue);
+    return (a, u) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": o.value ? "error" : void 0,
+      "show-feedback": o.value
+    }, C({
+      default: p(() => [
+        N(b(te), {
+          "input-props": { id: e.field.name, name: e.field.name },
+          value: n.value,
+          options: i.value,
+          placeholder: e.field.placeholder ?? "Select an option",
+          disabled: e.field.disabled === !0 || e.field.optionsLoading,
+          loading: e.field.optionsLoading,
+          status: o.value ? "error" : void 0,
+          "onUpdate:value": u[0] || (u[0] = (c) => s("update:modelValue", c)),
+          onBlur: u[1] || (u[1] = (c) => s("blur"))
+        }, null, 8, ["input-props", "value", "options", "placeholder", "disabled", "loading", "status"])
+      ]),
+      _: 2
+    }, [
+      o.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (c, F) => (r(), f("div", { key: F }, k(c), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), O = /* @__PURE__ */ B({
+  __name: "CheckboxField",
+  props: {
+    field: {},
+    modelValue: { type: [Boolean, null] },
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = v;
+    return (s, o) => {
+      var i, n;
+      return r(), V(b(q), {
+        "show-label": !1,
+        "show-feedback": e.touched && !!((i = e.error) != null && i.length)
+      }, C({
+        default: p(() => [
+          N(b(ae), {
+            checked: !!e.modelValue,
+            disabled: e.field.disabled === !0,
+            "onUpdate:checked": o[0] || (o[0] = (a) => t("update:modelValue", a)),
+            onBlur: o[1] || (o[1] = (a) => t("blur"))
+          }, {
+            default: p(() => [
+              E(k(e.field.label), 1)
+            ]),
+            _: 1
+          }, 8, ["checked", "disabled"])
+        ]),
+        _: 2
+      }, [
+        e.touched && ((n = e.error) != null && n.length) ? {
+          name: "feedback",
+          fn: p(() => [
+            (r(!0), f(g, null, x(e.error, (a, u) => (r(), f("div", { key: u }, k(a), 1))), 128))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["show-feedback"]);
+    };
+  }
+}), Q = /* @__PURE__ */ B({
+  __name: "RadioField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = $(() => {
+      var a;
+      return !!(t.touched && ((a = t.error) != null && a.length));
+    }), i = $(
+      () => (Array.isArray(t.field.options) ? t.field.options : []).map((a) => ({
+        label: a.label,
+        value: a.value
+      }))
+    ), n = $(() => t.modelValue);
+    return (a, u) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": o.value ? "error" : void 0,
+      "show-feedback": o.value
+    }, C({
+      default: p(() => [
+        N(b(re), {
+          name: e.field.name,
+          value: n.value,
+          disabled: e.field.disabled === !0,
+          "onUpdate:value": u[0] || (u[0] = (c) => s("update:modelValue", c)),
+          onBlur: u[1] || (u[1] = (c) => s("blur"))
+        }, {
+          default: p(() => [
+            N(b(oe), { vertical: "" }, {
+              default: p(() => [
+                (r(!0), f(g, null, x(i.value, (c) => (r(), V(b(ne), {
+                  key: String(c.value),
+                  value: c.value
+                }, {
+                  default: p(() => [
+                    E(k(c.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["name", "value", "disabled"])
+      ]),
+      _: 2
+    }, [
+      o.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (c, F) => (r(), f("div", { key: F }, k(c), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), W = /* @__PURE__ */ B({
+  __name: "DateField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = $(() => {
+      var i;
+      return !!(t.touched && ((i = t.error) != null && i.length));
+    });
+    return (i, n) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": o.value ? "error" : void 0,
+      "show-feedback": o.value
+    }, C({
+      default: p(() => [
+        N(b(ue), {
+          type: "date",
+          "value-format": "yyyy-MM-dd",
+          style: { width: "100%" },
+          "formatted-value": e.modelValue,
+          disabled: e.field.disabled === !0,
+          status: o.value ? "error" : void 0,
+          "onUpdate:formattedValue": n[0] || (n[0] = (a) => s("update:modelValue", a ?? "")),
+          onBlur: n[1] || (n[1] = (a) => s("blur"))
+        }, null, 8, ["formatted-value", "disabled", "status"])
+      ]),
+      _: 2
+    }, [
+      o.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (a, u) => (r(), f("div", { key: u }, k(a), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), fe = { style: { width: "100%" } }, ve = ["id", "name", "accept", "multiple", "disabled"], ce = { class: "vfs-naive-dropzone__hint" }, be = {
+  key: 0,
+  class: "vfs-naive-dropzone__accept"
+}, pe = {
+  key: 0,
+  class: "vfs-naive-filelist"
+}, ye = { class: "vfs-naive-filelist__name" }, he = { class: "vfs-naive-filelist__size" }, ke = ["aria-label", "onClick"], Ve = /* @__PURE__ */ B({
+  __name: "FileField",
+  props: {
+    field: {},
+    modelValue: {},
+    error: {},
+    touched: { type: Boolean }
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(e, { emit: v }) {
+    const t = e, s = v, o = A(!1), i = A(null), n = $(() => {
+      var l;
+      return !!(t.touched && ((l = t.error) != null && l.length));
+    }), a = $(() => t.modelValue ? Array.isArray(t.modelValue) ? t.modelValue : [t.modelValue] : []), u = $(() => t.field.multiple ?? !1);
+    function c(l) {
+      if (!l || l.length === 0) {
+        s("update:modelValue", null);
+        return;
+      }
+      s("update:modelValue", u.value ? Array.from(l) : l[0]);
+    }
+    function F(l) {
+      c(l.target.files), s("blur");
+    }
+    function R(l) {
+      var m;
+      o.value = !1, l.preventDefault(), c(((m = l.dataTransfer) == null ? void 0 : m.files) ?? null), s("blur");
+    }
+    function S(l) {
+      const m = a.value.filter((y, d) => d !== l);
+      m.length === 0 ? (s("update:modelValue", null), i.value && (i.value.value = "")) : s("update:modelValue", u.value ? m : m[0]);
+    }
+    function h(l) {
+      return l < 1024 ? `${l} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(1)} KB` : `${(l / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    return (l, m) => (r(), V(b(q), {
+      label: e.field.label,
+      required: e.field.required,
+      "validation-status": n.value ? "error" : void 0,
+      "show-feedback": n.value
+    }, C({
+      default: p(() => [
+        w("div", fe, [
+          w("div", {
+            class: _(["vfs-naive-dropzone", {
+              "vfs-naive-dropzone--dragging": o.value,
+              "vfs-naive-dropzone--error": n.value
+            }]),
+            onDragover: m[0] || (m[0] = Z((y) => o.value = !0, ["prevent"])),
+            onDragleave: m[1] || (m[1] = (y) => o.value = !1),
+            onDrop: R
+          }, [
+            w("input", {
+              id: e.field.name,
+              ref_key: "inputRef",
+              ref: i,
+              type: "file",
+              name: e.field.name,
+              accept: e.field.accept,
+              multiple: u.value,
+              disabled: e.field.disabled === !0,
+              class: "vfs-naive-dropzone__input",
+              onChange: F
+            }, null, 40, ve),
+            w("div", ce, [
+              w("p", null, k(o.value ? "Drop files here" : "Click to upload or drag & drop"), 1),
+              e.field.accept ? (r(), f("p", be, k(e.field.accept), 1)) : z("", !0)
+            ])
+          ], 34),
+          a.value.length ? (r(), f("ul", pe, [
+            (r(!0), f(g, null, x(a.value, (y, d) => (r(), f("li", {
+              key: `${y.name}-${d}`,
+              class: "vfs-naive-filelist__item"
+            }, [
+              w("span", ye, k(y.name), 1),
+              w("span", he, k(h(y.size)), 1),
+              w("button", {
+                type: "button",
+                "aria-label": `Remove ${y.name}`,
+                class: "vfs-naive-filelist__remove",
+                onClick: (D) => S(d)
+              }, " × ", 8, ke)
+            ]))), 128))
+          ])) : z("", !0)
+        ])
+      ]),
+      _: 2
+    }, [
+      n.value ? {
+        name: "feedback",
+        fn: p(() => [
+          (r(!0), f(g, null, x(e.error, (y, d) => (r(), f("div", { key: d }, k(y), 1))), 128))
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["label", "required", "validation-status", "show-feedback"]));
+  }
+}), ge = /* @__PURE__ */ me(Ve, [["__scopeId", "data-v-781d7342"]]), $e = { style: { "margin-bottom": "1rem" } }, xe = {
+  key: 0,
+  style: { "margin-bottom": "0.5rem", "font-weight": "500", "font-size": "0.875rem" }
+}, Fe = { style: { flex: "1" } }, Ne = /* @__PURE__ */ B({
+  __name: "ArrayField",
+  props: {
+    field: {},
+    form: {},
+    components: {}
+  },
+  setup(e) {
+    const v = e, t = j(), s = {
+      text: U,
+      email: U,
+      number: K,
+      textarea: H,
+      select: J,
+      checkbox: O,
+      radio: Q,
+      date: W
+    };
+    function o(h) {
+      var l;
+      return h.component ? h.component : ((l = v.components) == null ? void 0 : l[h.type]) ?? t[h.type] ?? s[h.type] ?? null;
+    }
+    const { rows: i, append: n, remove: a } = se(v.form, v.field.name);
+    function u(h) {
+      return G(v.form.values.value, h.name);
+    }
+    function c(h, l) {
+      v.form.setField(h.name, l);
+    }
+    function F(h) {
+      var m;
+      const l = v.form;
+      (m = l.touchField) == null || m.call(l, h.name);
+    }
+    function R(h) {
+      return v.form.errors.value[h.name] ?? [];
+    }
+    function S(h) {
+      return v.form.touched.value[h.name] ?? !1;
+    }
+    return (h, l) => (r(), f("div", $e, [
+      e.field.label ? (r(), f("div", xe, k(e.field.label), 1)) : z("", !0),
+      (r(!0), f(g, null, x(b(i), (m) => (r(), V(b(P), {
+        key: m.key,
+        size: "small",
+        style: { "margin-bottom": "0.5rem" }
+      }, {
+        default: p(() => [
+          N(b(de), {
+            align: "flex-start",
+            justify: "space-between"
+          }, {
+            default: p(() => [
+              w("div", Fe, [
+                (r(!0), f(g, null, x(m.fields, (y) => (r(), f(g, {
+                  key: y.name
+                }, [
+                  o(y) ? (r(), V(I(o(y)), {
+                    key: 0,
+                    field: y,
+                    "model-value": u(y),
+                    error: R(y),
+                    touched: S(y),
+                    "onUpdate:modelValue": (d) => c(y, d),
+                    onBlur: (d) => F(y)
+                  }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : z("", !0)
+                ], 64))), 128))
+              ]),
+              N(b(T), {
+                text: "",
+                type: "error",
+                size: "small",
+                onClick: (y) => b(a)(m.index)
+              }, {
+                default: p(() => [...l[1] || (l[1] = [
+                  E("Remove", -1)
+                ])]),
+                _: 1
+              }, 8, ["onClick"])
+            ]),
+            _: 2
+          }, 1024)
+        ]),
+        _: 2
+      }, 1024))), 128)),
+      N(b(T), {
+        dashed: "",
+        size: "small",
+        onClick: l[0] || (l[0] = (m) => b(n)())
+      }, {
+        default: p(() => [...l[2] || (l[2] = [
+          E("+ Add row", -1)
+        ])]),
+        _: 1
+      })
+    ]));
+  }
+}), ze = /* @__PURE__ */ B({
+  __name: "NaiveFormRenderer",
+  props: {
+    form: {},
+    components: {},
+    submitLabel: {},
+    fields: {}
+  },
+  emits: ["submit"],
+  setup(e, { emit: v }) {
+    const t = e, s = j(), o = v, i = {
+      text: U,
+      email: U,
+      number: K,
+      textarea: H,
+      select: J,
+      checkbox: O,
+      radio: Q,
+      date: W,
+      file: ge
+    };
+    function n(l) {
+      var m;
+      return l.component ? l.component : ((m = t.components) == null ? void 0 : m[l.type]) ?? s[l.type] ?? i[l.type] ?? null;
+    }
+    function a(l) {
+      return G(t.form.values.value, l.name);
+    }
+    function u(l, m) {
+      t.form.setField(l.name, m);
+    }
+    function c(l) {
+      var y;
+      const m = t.form;
+      (y = m.touchField) == null || y.call(m, l.name);
+    }
+    function F(l) {
+      return t.form.errors.value[l.name] ?? [];
+    }
+    function R(l) {
+      return t.form.touched.value[l.name] ?? !1;
+    }
+    const S = $(
+      () => (t.fields ?? t.form.fields.value).filter((l) => l.visible !== !1)
+    );
+    async function h(l) {
+      l.preventDefault(), await t.form.submit(), o("submit");
+    }
+    return (l, m) => {
+      const y = ee("NaiveFormRenderer", !0);
+      return r(), f("form", {
+        novalidate: "",
+        onSubmit: h
+      }, [
+        (r(!0), f(g, null, x(S.value, (d) => (r(), f(g, {
+          key: d.name
+        }, [
+          l.$slots[`field-${d.name}`] ? M(l.$slots, `field-${d.name}`, {
+            key: 0,
+            field: d,
+            value: a(d),
+            error: F(d),
+            touched: R(d),
+            setValue: (D) => u(d, D),
+            touch: () => c(d)
+          }) : d.type === "group" ? (r(), V(b(P), {
+            key: 1,
+            title: d.label,
+            size: "small",
+            style: { "margin-bottom": "1rem" }
+          }, {
+            default: p(() => [
+              d.fields ? (r(), V(y, {
+                key: 0,
+                form: e.form,
+                fields: d.fields,
+                components: e.components
+              }, null, 8, ["form", "fields", "components"])) : z("", !0)
+            ]),
+            _: 2
+          }, 1032, ["title"])) : d.type === "array" ? (r(), V(Ne, {
+            key: 2,
+            field: d,
+            form: e.form,
+            components: e.components
+          }, null, 8, ["field", "form", "components"])) : n(d) ? (r(), V(I(n(d)), {
+            key: 3,
+            field: d,
+            "model-value": a(d),
+            error: F(d),
+            touched: R(d),
+            "onUpdate:modelValue": (D) => u(d, D),
+            onBlur: (D) => c(d)
+          }, null, 40, ["field", "model-value", "error", "touched", "onUpdate:modelValue", "onBlur"])) : z("", !0)
+        ], 64))), 128)),
+        M(l.$slots, "submit", {
+          isSubmitting: e.form.isSubmitting.value,
+          isValid: e.form.isValid.value
+        }, () => [
+          N(b(T), {
+            "attr-type": "submit",
+            type: "primary",
+            disabled: e.form.isSubmitting.value,
+            style: { "margin-top": "0.5rem" }
+          }, {
+            default: p(() => [
+              E(k(e.submitLabel ?? "Submit"), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])
+      ], 32);
+    };
+  }
+});
+export {
+  ze as NaiveFormRenderer,
+  Ne as NuArrayField,
+  O as NuCheckboxField,
+  W as NuDateField,
+  ge as NuFileField,
+  K as NuNumberField,
+  Q as NuRadioField,
+  J as NuSelectField,
+  U as NuTextField,
+  H as NuTextareaField
+};