helithre-vue/index-C2iHSUpI.js

Helithre allows you to create pages and forms in Vue using JSON configuration

import { defineComponent as d, ref as O, createElementBlock as u, openBlock as i, Fragment as f, createElementVNode as m, withDirectives as b, unref as p, toDisplayString as v, vModelDynamic as F, vModelText as q, renderList as y, defineAsyncComponent as I, h as B, withModifiers as D, renderSlot as T, createBlock as M, withCtx as $, resolveDynamicComponent as C, computed as x, createVNode as P, createTextVNode as V } from "vue";
const h = (t) => {
  if (t === void 0)
    throw new Error("The value was undefined");
  if (t === null)
    throw new Error("The value was null");
  return t;
};
class S {
  //name of the wrapper
  name;
  //item that need to be loaded
  loadMap;
  constructor(e) {
    this.loadMap = /* @__PURE__ */ new Map(), this.name = h(e);
  }
  get getLoadMap() {
    return this.loadMap;
  }
  get getLoadArray() {
    return Array.from(
      this.loadMap,
      ([n, r]) => ({
        id: n,
        ...r
      })
    );
  }
  get getName() {
    return this.name;
  }
}
const E = {
  form: "form",
  page: "page"
};
class R {
  save;
  edit;
  delete;
  name;
  constructor(e, n, r, s) {
    if (this.save = /* @__PURE__ */ new Map(), this.edit = /* @__PURE__ */ new Map(), this.delete = /* @__PURE__ */ new Map(), this.name = "Default_wrapper", e.size > 0 && (this.save = e), n.size > 0 && (this.edit = n), r.size > 0 && (this.delete = r), typeof s != "string")
      throw new Error("The given wrapper name was not a string");
    if (s.trim().length <= 0)
      throw new Error(
        "The given wrapper name was not at least 1 char in lenght"
      );
    this.name = s.trim();
  }
  get getObjToEmit() {
    return {
      name: this.name,
      type: E.form,
      results: {
        save: this.save,
        edit: this.edit,
        delete: this.delete
      }
    };
  }
}
class A extends S {
  errorMessageOpenIssue = "The id of the response is null or undefined, open an issue on https://github.com/LorenzoCirelli/helithre-vue/issues";
  //item that need to be send to server for persistant save
  saveMap;
  editMap;
  deleteMap;
  //load response from server
  responsesMap;
  constructor(e, n, r) {
    super(r), this.parseChildrens(e), this.responsesMap = /* @__PURE__ */ new Map(), n != null && n != null && n.forEach((s) => {
      this.setResponsesMap = s;
    }), this.saveMap = /* @__PURE__ */ new Map(), this.editMap = /* @__PURE__ */ new Map(), this.deleteMap = /* @__PURE__ */ new Map();
  }
  getComponent() {
    return "form";
  }
  get getResponsesMap() {
    return this.responsesMap;
  }
  //set of save, edit and delete
  set setSaveMap(e) {
    if (e.id == null || e.id == null)
      throw new Error(this.errorMessageOpenIssue);
    this.saveMap.set(e.id, e.value);
  }
  set setEditMap(e) {
    if (e.id == null || e.id == null)
      throw new Error(this.errorMessageOpenIssue);
    this.editMap.set(e.id, e.value);
  }
  set setDeleteMap(e) {
    if (e.id == null || e.id == null)
      throw new Error(this.errorMessageOpenIssue);
    this.deleteMap.set(e.id, e.value);
  }
  //get of save, edit and delete
  get getSaveMap() {
    return this.saveMap;
  }
  get getEditMap() {
    return this.editMap;
  }
  get getDeleteMap() {
    return this.deleteMap;
  }
  responseForId(e) {
    return this.responsesMap.get(e);
  }
  autoSetItem(e, n) {
    const r = this.responseForId(e);
    return r == null ? n.length > 0 ? (this.setSaveMap = { id: e, value: n }, !0) : !1 : r != null && r != n && n != "" ? (this.setEditMap = { id: e, value: n }, !0) : r != null && r != n && n == "" ? (this.setDeleteMap = { id: e, value: n }, !0) : !1;
  }
  set setResponsesMap(e) {
    e.value.length > 0 ? this.responsesMap.set(e.id, e.value) : this.responsesMap.delete(e.id);
  }
  clearSaved() {
    this.saveMap = /* @__PURE__ */ new Map();
  }
  createResultToEmit() {
    return new R(
      this.getSaveMap,
      this.getEditMap,
      this.deleteMap,
      this.name
    ).getObjToEmit;
  }
  set setLoadMap(e) {
    this.loadMap.set(e.id, e.value);
  }
  parseChildrens(e) {
    e.forEach((n) => {
      this.setLoadMap = {
        id: n.id,
        value: {
          text: n.text,
          type: n.type,
          choices: n?.choices?.length != null ? n.choices : null
        }
      };
    });
  }
}
class J extends S {
  constructor(e, n) {
    super(n), this.parseChildrens(e);
  }
  getComponent() {
    return "page";
  }
  set setLoadMap(e) {
    this.loadMap.set(e.id, e.value);
  }
  parseChildrens(e) {
    e.forEach((n) => {
      if (n.type != null && n.text != null) {
        const r = {
          id: n.id,
          value: {
            text: n?.text,
            type: n?.type,
            elements: n?.elements,
            src: n?.src
          }
        };
        this.setLoadMap = r;
      } else
        throw new Error("Type or text was passed as null for the page");
    });
  }
}
const c = {
  text: "text",
  number: "number",
  date: "date",
  color: "color",
  datetimeLocal: "datetime-local",
  email: "email",
  file: "file",
  hidden: "hidden",
  image: "image",
  month: "month",
  password: "password",
  range: "range",
  reset: "reset",
  search: "search",
  tel: "tel",
  time: "time",
  url: "url",
  week: "week",
  select: "select",
  checkbox: "checkbox"
};
class z {
  text;
  id;
  constructor(e, n) {
    this.text = e, this.id = n;
  }
}
class L extends z {
  type;
  constructor(e, n, r) {
    super(String(h(e)), String(h(n))), this.type = this.checkIfTypeIsValid(String(h(r)));
  }
  checkIfTypeIsValid(e) {
    if (e in c)
      return e;
    throw new Error(
      `Type for input was not in the accepted list, ${e} received`
    );
  }
}
class N extends L {
  choices;
  constructor(e, n, r, s) {
    if (super(e, n, r), s === null)
      throw new Error("No choices set for multiple option input");
    this.choices = h(s);
  }
  get getchoices() {
    return this.choices;
  }
}
const U = ["for"], H = ["type", "id"], W = ["name"], G = /* @__PURE__ */ d({
  __name: "CheckBoxInput",
  props: {
    conf: {
      type: Object,
      required: !0,
      default: () => ({
        text: void 0,
        id: void 0
      })
    },
    response: {
      type: String,
      required: !1,
      default: ""
    }
  },
  setup(t) {
    const e = t, n = new L(e.conf?.text, e.conf?.id, e.conf?.type), r = O(!1);
    return e.response == "true" && (r.value = !0), (s, o) => (i(), u(f, null, [
      m("label", {
        for: p(n).id
      }, v(p(n).text), 9, U),
      b(m("input", {
        type: p(n).type,
        "onUpdate:modelValue": o[0] || (o[0] = (a) => r.value = a),
        id: p(n).id
      }, null, 8, H), [
        [F, r.value]
      ]),
      b(m("input", {
        type: "hidden",
        name: p(n).id,
        "onUpdate:modelValue": o[1] || (o[1] = (a) => r.value = a)
      }, null, 8, W), [
        [q, r.value]
      ])
    ], 64));
  }
}), K = ["for"], Q = ["name", "id"], X = ["value", "selected"], Y = /* @__PURE__ */ d({
  __name: "SelectInput",
  props: {
    conf: {
      type: Object,
      required: !0,
      default: () => ({
        text: void 0,
        id: void 0
      })
    },
    response: {
      type: String,
      required: !1,
      default: ""
    }
  },
  setup(t) {
    const e = t, n = new N(e.conf?.text, e.conf?.id, e.conf?.type, e.conf?.choices);
    return (r, s) => (i(), u(f, null, [
      m("label", {
        for: p(n).id
      }, v(p(n).text), 9, K),
      m("select", {
        name: p(n).id,
        id: p(n).id
      }, [
        (i(!0), u(f, null, y(p(n).getchoices, (o, a) => (i(), u("option", {
          value: o.questionAnswerId,
          key: a,
          selected: t.response == o.questionAnswerId
        }, v(o.text), 9, X))), 128))
      ], 8, Q)
    ], 64));
  }
}), Z = I(() => import("./BasicInput-B3tN11__.js")), _ = {
  name: "BasicInput",
  props: {
    conf: {
      type: Object,
      required: !0,
      default: () => ({
        text: void 0,
        id: void 0
      })
    },
    response: {
      type: String,
      required: !1,
      default: ""
    }
  }
};
function l(t) {
  return d({
    name: _.name,
    props: _.props,
    setup(e) {
      return () => B(Z, {
        response: e.response,
        conf: { ...e.conf, type: h(t) }
      });
    }
  });
}
const ee = l(c.text), te = l(c.number), ne = l(c.date), re = l(c.color), se = l(
  c.datetimeLocal
), oe = l(c.email);
l(c.file);
const ie = l(c.hidden), ae = l(c.image), ce = l(c.month), le = l(c.password);
l(c.range);
const ue = l(c.reset), pe = l(c.search), de = l(c.tel), he = l(c.time), me = l(c.url), fe = l(c.week), we = /* @__PURE__ */ new Map([
  ["text", ee],
  ["number", te],
  ["date", ne],
  ["color", re],
  ["datetimeLocal", se],
  ["email", oe],
  ["hidden", ie],
  ["image", ae],
  ["month", ce],
  ["password", le],
  ["reset", ue],
  ["search", pe],
  ["tel", de],
  ["time", he],
  ["url", me],
  ["week", fe],
  ["select", Y],
  ["checkbox", G]
]), ge = ["id"], ve = /* @__PURE__ */ d({
  __name: "FormElement",
  props: {
    name: { type: String, required: !1, default: "" }
  },
  emits: ["formChange"],
  setup(t, { emit: e }) {
    const n = e;
    function r(s) {
      const o = s.target;
      if (o == null)
        throw new Error("The passed value of the form was null");
      const a = new FormData(o);
      n("formChange", a);
    }
    return (s, o) => (i(), u("form", {
      onSubmit: D(r, ["prevent"]),
      class: "helithreForm",
      id: t.name
    }, [
      T(s.$slots, "default"),
      o[0] || (o[0] = m("input", { type: "submit" }, null, -1))
    ], 40, ge));
  }
}), Me = /* @__PURE__ */ d({
  __name: "HelithreForm",
  props: {
    wrapper: {}
  },
  emits: ["submitEvent"],
  setup(t, { emit: e }) {
    const n = e, r = (o) => {
      if (o == null)
        throw new Error("Undefined type for component type is not accepted");
      const a = we.get(h(o));
      if (a == null)
        throw new Error("The required component cannot be render, because is not in the map");
      return a;
    }, s = (o) => {
      t.wrapper?.clearSaved(), o.forEach((a, w) => {
        const g = { id: w, value: String(a) };
        t.wrapper?.autoSetItem(g.id, g.value) && (t.wrapper.setResponsesMap = { id: g.id, value: g.value });
      });
      try {
        n("submitEvent", h(t.wrapper?.createResultToEmit()));
      } catch (a) {
        console.error(`Error genereting event action, open an issue on https://github.com/LorenzoCirelli/helithre-vue/issues. ${a}`);
      }
    };
    return (o, a) => (i(), M(ve, {
      onFormChange: s,
      name: o.wrapper.getName
    }, {
      default: $(() => [
        (i(!0), u(f, null, y(o.wrapper?.getLoadArray, (w, g) => (i(), u("div", { key: g }, [
          (i(), M(C(r(w.type)), {
            conf: w,
            response: o.wrapper?.responseForId(w.id)
          }, null, 8, ["conf", "response"]))
        ]))), 128))
      ]),
      _: 1
    }, 8, ["name"]));
  }
}), ye = ["id"], k = /* @__PURE__ */ d({
  __name: "TextElement",
  props: {
    conf: {
      type: Object
    }
  },
  setup(t) {
    return (e, n) => (i(), u("p", {
      id: t.conf?.id,
      class: "helithrePageText"
    }, v(t.conf?.text), 9, ye));
  }
}), Ee = { class: "helithrePageList" }, xe = ["id"], be = /* @__PURE__ */ d({
  __name: "ListElement",
  props: {
    conf: {
      type: Object,
      required: !0
    }
  },
  setup(t) {
    const e = x(() => {
      if ((t.conf.text.length == 0 || t.conf.text == null || t.conf.text == null) && (t.conf.text = ""), t.conf.id != null)
        return { id: t.conf?.id, text: t.conf?.text };
      throw new Error("Id cannot be null");
    });
    return (n, r) => (i(), u(f, null, [
      P(k, { conf: e.value }, null, 8, ["conf"]),
      m("ul", Ee, [
        (i(!0), u(f, null, y(t.conf?.elements, (s) => (i(), u("li", {
          key: s.id,
          id: t.conf?.id
        }, v(s.value), 9, xe))), 128))
      ])
    ], 64));
  }
}), _e = ["src", "alt", "title", "id"], Ie = /* @__PURE__ */ d({
  __name: "ImageElement",
  props: {
    conf: {
      type: Object
    }
  },
  setup(t) {
    const e = x(() => {
      if (t.conf?.src == null || t.conf?.src == null || t.conf?.src.length == 0)
        throw new Error("Impossible to load image from an non well defined url");
      return t.conf?.src;
    });
    return (n, r) => (i(), u("img", {
      src: e.value,
      alt: t.conf?.text,
      title: t.conf?.text,
      id: t.conf?.id,
      class: "helithrePageImage"
    }, null, 8, _e));
  }
}), Te = ["id"], $e = ["src"], Ce = /* @__PURE__ */ d({
  __name: "VideoElement",
  props: {
    conf: {
      type: Object
    }
  },
  setup(t) {
    const e = x(() => {
      if (t.conf?.src == null || t.conf?.src == null || t.conf?.src?.length == 0)
        throw new Error("The defined video url is not well formed");
      return t.conf?.src;
    });
    return (n, r) => (i(), u("video", {
      controls: "",
      id: t.conf?.id,
      class: "helithrePageVideo"
    }, [
      m("source", {
        src: e.value,
        type: "video/mp4"
      }, null, 8, $e),
      r[0] || (r[0] = V(" Error: HTML video element is not supported by your browser, please try to update! "))
    ], 8, Te));
  }
}), Se = ["href", "id"], Le = /* @__PURE__ */ d({
  __name: "LinkElement",
  props: {
    conf: {
      type: Object
    }
  },
  setup(t) {
    return (e, n) => (i(), u("a", {
      href: t.conf?.src,
      id: t.conf?.id,
      class: "helithrePageLink"
    }, v(t.conf?.text), 9, Se));
  }
});
I(() => Promise.resolve().then(() => qe));
const ke = /* @__PURE__ */ new Map([
  ["text", k],
  ["list", be],
  ["image", Ie],
  ["video", Ce],
  ["link", Le]
]), je = (t, e) => {
  const n = t.__vccOpts || t;
  for (const [r, s] of e)
    n[r] = s;
  return n;
}, Oe = {};
function Fe(t, e) {
  return T(t.$slots, "default");
}
const j = /* @__PURE__ */ je(Oe, [["render", Fe]]), qe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: j
}, Symbol.toStringTag, { value: "Module" })), Be = /* @__PURE__ */ d({
  __name: "HelithrePage",
  props: {
    wrapper: {}
  },
  emits: ["submitEvent"],
  setup(t, { emit: e }) {
    const n = (r) => {
      if (r == null)
        throw new Error("Undefined type for component type is not accepted");
      const s = ke.get(h(r));
      if (s == null)
        throw new Error("The required component cannot be render, because is not in the map");
      return s;
    };
    return (r, s) => (i(), M(j, null, {
      default: $(() => [
        (i(!0), u(f, null, y(r.wrapper?.getLoadArray, (o, a) => (i(), u("span", { key: a }, [
          (i(), M(C(n(o.type)), { conf: o }, null, 8, ["conf"]))
        ]))), 128))
      ]),
      _: 1
    }));
  }
}), Pe = /* @__PURE__ */ d({
  __name: "HelithreLoad",
  props: {
    helithreJson: {}
  },
  emits: ["helitreEvent"],
  setup(t, { emit: e }) {
    const n = e;
    let r;
    const s = t.helithreJson.wrapper?.trim();
    if (s === E.form)
      r = new A(t.helithreJson.childrens, t.helithreJson.responses, t.helithreJson.name);
    else if (s === E.page)
      r = new J(t.helithreJson.childrens, t.helithreJson.name);
    else
      throw new Error("Invalid wrapper type");
    function o(a) {
      n("helitreEvent", a);
    }
    return (a, w) => p(r).getComponent() === "form" ? (i(), M(Me, {
      key: 0,
      wrapper: p(r),
      onSubmitEvent: o
    }, null, 8, ["wrapper"])) : (i(), M(Be, {
      key: 1,
      wrapper: p(r)
    }, null, 8, ["wrapper"]));
  }
});
export {
  L as B,
  Pe as _
};