@ozdao/prometheus-framework 0.1.16 → 0.1.18

package/dist/Gallery-9305f294.mjs

@@ -0,0 +1,357 @@
+import ee, { reactive as te, ref as f, watchEffect as le, openBlock as u, createElementBlock as m, createVNode as y, unref as $, withCtx as P, Fragment as Q, renderList as W, createElementVNode as s, computed as ae, onMounted as oe, createCommentVNode as j, Transition as J, createTextVNode as Y, toDisplayString as D, withDirectives as ne, vShow as se, pushScopeId as ie, popScopeId as re } from "vue";
+import { a as Z } from "./index-a661083c.mjs";
+import { V as ce } from "./vue-draggable-next.esm-bundler-ff6e3f52.mjs";
+import { _ as de } from "./UploadImageMultiple-cb6c7188.mjs";
+import { useRoute as ue } from "vue-router";
+import { _ as me } from "./_plugin-vue_export-helper-dad06003.mjs";
+var F = {};
+(function(o) {
+  Object.defineProperties(o, { __esModule: { value: !0 }, [Symbol.toStringTag]: { value: "Module" } });
+  var e = ee;
+  const c = { class: "flex-nowrap flex-v-center flex pd-medium bg-white" }, i = { key: 0, class: "t-left mn-r-small w-33" }, r = { class: "w-100" }, V = ["value", "placeholder"], w = e.defineComponent({ __name: "Field", props: { label: { default: "Label" }, placeholder: { default: "Enter something here" }, field: { default: null }, validation: { type: Boolean, default: !1 } }, emits: ["update:modelValue"], setup(t, { emit: a }) {
+    const l = t, d = e.ref(l.field);
+    return (p, b) => (e.openBlock(), e.createElementBlock("div", c, [t.label ? (e.openBlock(), e.createElementBlock("div", i, [e.createElementVNode("label", null, e.toDisplayString(t.label), 1)])) : e.createCommentVNode("", !0), e.createElementVNode("div", r, [e.createElementVNode("input", { onInput: b[0] || (b[0] = (z) => {
+      var g;
+      return d.value = a("update:modelValue", (g = z.target) == null ? void 0 : g.value);
+    }), type: "text", class: "w-100", value: t.field, placeholder: t.placeholder }, null, 40, V)])]));
+  } }), v = { class: "input-wrapper" }, C = { class: "t-transp p-small" }, x = { key: 0, class: "flex-nojustify flex-v-center flex-nowrap flex w-100" }, S = { key: 1, class: "w-100" }, N = ["onClick"], n = { __name: "Select", props: ["obj", "label", "prop", "value", "options", "content", "textarea", "placeholder", "size"], setup(t) {
+    const a = t, l = e.ref(null), d = e.ref(!1);
+    e.ref("Please select an item");
+    let p = e.computed(() => {
+      if (a.prop[a.content]) {
+        var g = a.options.indexOf(a.prop[a.content]), k = a.options.map((h) => h);
+        return g != -1 && k.splice(g, 1), k;
+      } else
+        return a.options;
+    });
+    a.prop[a.content] && (l.value = a.prop[a.content]);
+    function b() {
+      d.value = !d.value;
+    }
+    function z(g, k, h) {
+      var H = h;
+      l.value = H, d.value = !d.value, g[k] = H;
+    }
+    return (g, k) => (e.openBlock(), e.createElementBlock("div", v, [e.createElementVNode("span", C, e.toDisplayString(t.label), 1), e.createElementVNode("li", { onClick: k[0] || (k[0] = e.withModifiers((h) => b(), ["stop"])), class: e.normalizeClass([{ "input-small": t.size === "small" }, "pd-small flex-center flex-nowrap flex bg-grey input-select input"]) }, [l.value ? (e.openBlock(), e.createElementBlock("span", x, [e.createElementVNode("span", null, e.toDisplayString(l.value.name ? l.value.name : l.value), 1)])) : (e.openBlock(), e.createElementBlock("span", S, e.toDisplayString(t.placeholder ? t.placeholder : "Please select"), 1))], 2), d.value ? (e.openBlock(), e.createElementBlock("ul", { key: 0, class: e.normalizeClass([{ "dropdown-small": t.size === "small" }, "bg-grey dropdown-menu"]) }, [(e.openBlock(!0), e.createElementBlock(e.Fragment, null, e.renderList(e.unref(p), (h) => (e.openBlock(), e.createElementBlock("li", { class: e.normalizeClass([{ "input-small": t.size === "small" }, "pd-small bg-grey input-select input"]) }, [h ? (e.openBlock(), e.createElementBlock("span", { key: 0, onClick: (H) => z(t.prop, t.content, h), class: "flex-nojustify flex-v-center flex-nowrap flex w-100" }, [e.createElementVNode("span", null, e.toDisplayString(h.name ? h.name : h), 1)], 8, N)) : e.createCommentVNode("", !0)], 2))), 256))], 2)) : e.createCommentVNode("", !0)]));
+  } }, B = ["disabled"], I = { key: 0 }, R = { key: 0, class: "loading" }, E = e.createElementVNode("span", null, [e.createElementVNode("svg", { class: "i-default", width: "135", height: "140", viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "#fff" }, [e.createElementVNode("rect", { y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.5s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.5s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.25s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.25s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "60", width: "15", height: "140", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.25s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.25s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })]), e.createElementVNode("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6" }, [e.createElementVNode("animate", { attributeName: "height", begin: "0.5s", dur: "1s", values: "120;110;100;90;80;70;60;50;40;140;120", calcMode: "linear", repeatCount: "indefinite" }), e.createTextVNode(), e.createElementVNode("animate", { attributeName: "y", begin: "0.5s", dur: "1s", values: "10;15;20;25;30;35;40;45;50;0;10", calcMode: "linear", repeatCount: "indefinite" })])])], -1), T = [E], A = { key: 0, class: "h4 loading" }, O = e.createElementVNode("span", { class: "t-white" }, "✔", -1), q = [O], X = { key: 0, class: "error" }, L = e.defineComponent({ __name: "Button", props: { submit: { type: Function, default: async () => {
+    console.log("Button click.");
+  } }, callback: { type: Function, default: async () => {
+    console.log("Button callback.");
+  } }, validation: { type: Boolean, default: !1 } }, setup(t) {
+    const a = t, l = e.ref(null), d = e.ref(null), p = e.ref(!1), b = e.ref(!1);
+    async function z() {
+      l.value.style["pointer-events"] = "none", d.value = null, p.value = !0;
+      try {
+        await a.submit(), l.value.classList.add("bg-light-blue"), l.value.classList.remove("bg-blue"), p.value = !1, b.value = !0, setTimeout(() => a.callback(), 750);
+      } catch {
+        l.value.classList.add("bg-light-red"), l.value.classList.remove("bg-blue"), d.value = "❌", setTimeout(() => {
+          l.value.classList.add("bg-blue"), l.value.classList.remove("bg-light-red"), l.value.style.pointerEvents = "auto", p.value = !1, b.value = !1, d.value = null;
+        }, 1e3);
+      }
+    }
+    return (g, k) => (e.openBlock(), e.createElementBlock("button", { onClick: z, disabled: t.validation, ref_key: "button", ref: l, class: "w-100 t-white bg-blue button" }, [e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [!p.value && !d.value && !b.value ? (e.openBlock(), e.createElementBlock("span", I, [e.renderSlot(g.$slots, "default")])) : e.createCommentVNode("", !0)]), _: 3 }), e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [p.value && !d.value ? (e.openBlock(), e.createElementBlock("div", R, T)) : e.createCommentVNode("", !0)]), _: 1 }), e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [b.value ? (e.openBlock(), e.createElementBlock("div", A, q)) : e.createCommentVNode("", !0)]), _: 1 }), e.createVNode(e.Transition, { mode: "out-in", name: "fadeIn" }, { default: e.withCtx(() => [d.value ? (e.openBlock(), e.createElementBlock("div", X, [e.createElementVNode("span", null, e.toDisplayString(d.value), 1)])) : e.createCommentVNode("", !0)]), _: 1 })], 8, B));
+  } });
+  var U = { install: (t) => {
+    t.component("Field", w), t.component("Button", L), t.component("Select", n);
+  } };
+  o.Button = L, o.Field = w, o.Select = n, o.default = U;
+})(F);
+const pe = process.env.API_URL, K = Z.create({ baseURL: pe, withCredentials: !0 }), _ = te({
+  gallery: []
+}), M = {
+  async fetchGallery(o, e) {
+    const c = [];
+    o && c.push(`page=${o}`), e && c.push(`limit=${e}`);
+    const i = `/api/gallery${c.length ? `?${c.join("&")}` : ""}`;
+    try {
+      const r = await K.get(i);
+      if (console.log(r), r && r.data)
+        return _.gallery = [..._.gallery, ...r.data], r.data;
+    } catch (r) {
+      throw console.error("Error fetching gallery:", r), r;
+    }
+  },
+  async createPhoto(o) {
+    try {
+      const e = await K.post("/api/gallery/create", o);
+      console.log(e.data), _.gallery = [...e.data, ..._.gallery];
+    } catch (e) {
+      console.error(e);
+    }
+  },
+  async updatePhoto(o) {
+    try {
+      const e = {
+        ...o,
+        categories: typeof o.categories == "string" ? o.categories.split(",").map((r) => r.trim()) : o.categories
+      }, c = await Z.post("/api/gallery/update", e), i = _.gallery.findIndex((r) => r._id === o._id);
+      i !== -1 && (_.gallery[i] = c.data);
+    } catch (e) {
+      console.error(e);
+    }
+  },
+  async deletePhoto(o) {
+    try {
+      const e = await K.post(`/api/gallery/delete/${o}`), c = _.gallery.findIndex((i) => i._id === o);
+      c !== -1 && _.gallery.splice(c, 1);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+};
+const ve = { class: "pos-relative" }, ge = ["src"], he = ["onClick"], fe = {
+  __name: "EditImages",
+  props: {
+    images: Array
+  },
+  emits: ["update"],
+  setup(o, { emit: e }) {
+    const c = o, i = f([...c.images]);
+    le(() => {
+      i.value = [...c.images];
+    });
+    const r = () => {
+      e("update:images", i.value);
+    }, V = (v) => {
+      i.value = [...i.value, ...v], r();
+    }, w = (v) => {
+      i.value.splice(v, 1), r();
+    };
+    return (v, C) => (u(), m("div", null, [
+      y(de, {
+        "onUpdate:images": V,
+        uploadPath: "photos",
+        class: "mn-semi pd-small w-100 button bg-black t-white"
+      }),
+      y($(ce), {
+        class: "gap-small flex dragArea list-group w-full",
+        modelValue: i.value,
+        "onUpdate:modelValue": C[0] || (C[0] = (x) => i.value = x),
+        onChange: r
+      }, {
+        default: P(() => [
+          (u(!0), m(Q, null, W(i.value, (x, S) => (u(), m("div", ve, [
+            s("img", {
+              class: "i-extra radius-small o-hidden mn-thin",
+              src: (v.FILE_SERVER_URL || "") + x
+            }, null, 8, ge),
+            s("a", {
+              onClick: (N) => w(S),
+              class: "pos-absolute t-center radius-extra i-medium bg-red pos-t-0 pos-r-0"
+            }, "X", 8, he)
+          ]))), 256))
+        ]),
+        _: 1
+      }, 8, ["modelValue"])
+    ]));
+  }
+};
+const G = (o) => (ie("data-v-a2b32b3f"), o = o(), re(), o), _e = { class: "pos-relative w-100" }, be = { class: "w-100 o-hidden" }, ye = { class: "pd-medium flex-nowrap flex pd-t-thin pd-b-thin o-scroll" }, ke = ["data-id"], we = ["src", "onClick"], xe = {
+  key: 1,
+  class: "pd-small radius-small bg-white"
+}, Ne = ["src", "onClick"], Ee = { class: "t-black p-small mn-small" }, Ve = /* @__PURE__ */ G(() => /* @__PURE__ */ s("span", { class: "uppercase t-transp" }, "Size", -1)), Ce = /* @__PURE__ */ G(() => /* @__PURE__ */ s("br", null, null, -1)), Be = { class: "pd-2px radius-big d-inline-block bg-grey" }, Se = { class: "t-black p-small mn-small uppe" }, Ie = /* @__PURE__ */ G(() => /* @__PURE__ */ s("span", { class: "uppercase t-transp" }, "Categories", -1)), ze = /* @__PURE__ */ G(() => /* @__PURE__ */ s("br", null, null, -1)), Me = { class: "pd-2px radius-big d-inline-block bg-grey t-semi" }, $e = { class: "flex-nowrap flex" }, Pe = ["onClick"], Te = { class: "modal pd-thin" }, Le = { class: "modal-content radius-big" }, Ue = { class: "" }, je = ["src"], De = {
+  key: 0,
+  class: "flex-v-center flex m modal pd-big"
+}, Fe = { class: "modal-content radius-small pd-medium bg-white" }, Ge = ["src"], Re = ["src"], Ae = {
+  __name: "Gallery",
+  setup(o) {
+    ue();
+    const e = f(!0), c = f(null);
+    let i = 1;
+    const r = 10;
+    let V = f(null), w = f(!1);
+    const v = f([]), C = (t) => {
+      v.value = t;
+    }, x = ae(() => U.value === "all" ? _.gallery : _.gallery.filter((t) => t.categories.includes(U.value))), S = async () => {
+      w.value = !0, await M.fetchGallery(i, r), w.value = !1;
+    }, N = f(null), n = f({
+      categories: "",
+      size: "",
+      image: !1
+    }), B = f(null), I = (t) => {
+      console.log(e.value), e.value ? R(t) : (N.value = "modal", n.value.image = t, T());
+    }, R = (t) => {
+      N.value = "edit-modal", n.value = t || {
+        categories: "",
+        size: "",
+        image: null
+      }, T();
+    }, E = () => {
+      n.value = {
+        categories: "",
+        size: "",
+        image: !1
+      }, B.value = null, A();
+    }, T = () => {
+      document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden";
+    }, A = () => {
+      document.body.style.overflow = "", document.documentElement.style.overflow = "";
+    }, O = [
+      { name: "Small", value: "" },
+      { name: "Regular", value: "grid-item--width1 grid-item--height1" },
+      { name: "Medium", value: "grid-item--width2 grid-item--height2" },
+      { name: "Big", value: "grid-item--width3 grid-item--height3" }
+    ], q = async (t) => {
+      await M.deletePhoto(t);
+    }, X = async () => {
+      await M.updatePhoto(n.value), E();
+    }, L = async (t) => {
+      if (v.length < 1 || !n.value.categories || !n.value.size) {
+        console.error("All fields are required.");
+        return;
+      }
+      await M.createPhoto({
+        images: v.value,
+        size: n.value.size,
+        categories: typeof n.value.categories == "string" ? n.value.categories.split(",").map((a) => a.trim()) : n.value.categories
+      }), E();
+    };
+    let U = f("all");
+    return oe(async () => {
+      await M.fetchGallery(i, r), typeof window < "u" && new IntersectionObserver((a) => {
+        a.some((l) => l.isIntersecting) && (i += 1, S());
+      }).observe(V.value);
+    }), (t, a) => (u(), m("div", _e, [
+      s("div", be, [
+        s("div", ye, [
+          e.value ? (u(), m("button", {
+            key: 0,
+            onClick: a[0] || (a[0] = (l) => I(null)),
+            class: "mn-r-small t-white t-black bg-second button-small button"
+          }, "Add photos +")) : j("", !0)
+        ])
+      ]),
+      s("div", {
+        ref_key: "grid",
+        ref: c,
+        class: "pd-medium cols-4 gap-thin"
+      }, [
+        (u(!0), m(Q, null, W($(x), (l, d) => (u(), m("div", {
+          key: l.id,
+          "data-id": l.id
+        }, [
+          y(J, {
+            name: "scaleIn",
+            mode: "in-out"
+          }, {
+            default: P(() => [
+              !e.value && c.value ? (u(), m("img", {
+                key: 0,
+                src: "https://thecommunephuket.com/photos/" + l.cover,
+                class: "w-100 h-100 o-hidden radius-medium object-fit-cover",
+                onClick: (p) => I(l.image)
+              }, null, 8, we)) : (u(), m("div", xe, [
+                Y(D(l._id) + " ", 1),
+                s("img", {
+                  src: "https://thecommunephuket.com/photos/" + l.cover,
+                  class: "w-100 radius-small mn-small h-10r object-fit-cover",
+                  onClick: (p) => I(l)
+                }, null, 8, Ne),
+                s("p", Ee, [
+                  Ve,
+                  Ce,
+                  s("span", Be, D(l.size.name), 1)
+                ]),
+                s("p", Se, [
+                  Ie,
+                  ze,
+                  (u(!0), m(Q, null, W(l.categories, (p) => (u(), m("span", Me, D(p), 1))), 256))
+                ]),
+                s("div", $e, [
+                  s("button", {
+                    class: "button-small w-100 button",
+                    onClick: (p) => q(l._id)
+                  }, "Delete", 8, Pe)
+                ])
+              ]))
+            ]),
+            _: 2
+          }, 1024)
+        ], 8, ke))), 128)),
+        s("div", {
+          ref_key: "sentinel",
+          ref: V,
+          class: "sentinel"
+        }, null, 512),
+        y(J, { name: "modal" }, {
+          default: P(() => [
+            ne(s("div", Te, [
+              s("div", Le, [
+                s("div", Ue, [
+                  s("span", {
+                    class: "close",
+                    onClick: E
+                  }, "×"),
+                  s("img", {
+                    src: "https://thecommunephuket.com/photos/" + n.value.image
+                  }, null, 8, je)
+                ])
+              ])
+            ], 512), [
+              [se, n.value.image !== !1 && N.value === "modal"]
+            ])
+          ]),
+          _: 1
+        }),
+        y(J, { name: "modal" }, {
+          default: P(() => [
+            n.value.image !== !1 && N.value === "edit-modal" ? (u(), m("div", De, [
+              s("div", Fe, [
+                s("span", {
+                  class: "close",
+                  onClick: E
+                }, "×"),
+                typeof B.value == "string" ? (u(), m("img", {
+                  key: 0,
+                  src: B.value,
+                  class: "radius-small w-100 mn-small h-20r object-fit-cover"
+                }, null, 8, Ge)) : j("", !0),
+                typeof B.value == "object" && n.value.image !== null ? (u(), m("img", {
+                  key: 1,
+                  class: "radius-small w-100 mn-small h-20r object-fit-cover",
+                  src: "/photos/" + n.value.cover
+                }, null, 8, Re)) : j("", !0),
+                y($(F.Select), {
+                  options: O,
+                  label: "Size",
+                  select: n.value.size,
+                  "onUpdate:select": a[1] || (a[1] = (l) => n.value.size = l),
+                  placeholder: "Select Size",
+                  class: "bg-grey pd-thin radius-small mn-thin t-black"
+                }, null, 8, ["select"]),
+                y($(F.Field), {
+                  field: n.value.categories,
+                  "onUpdate:field": a[2] || (a[2] = (l) => n.value.categories = l),
+                  type: "text",
+                  label: "Categories",
+                  placeholder: "Enter categories for image (comma separated)",
+                  class: "bg-grey pd-thin radius-small mn-medium t-black"
+                }, null, 8, ["field"]),
+                y(fe, {
+                  images: v.value,
+                  "onUpdate:images": C,
+                  uploadPath: "photos",
+                  class: "mn-semi"
+                }, null, 8, ["images"]),
+                y($(F.Button), {
+                  submit: n.value._id ? X : L,
+                  callback: E,
+                  class: "mn-thin"
+                }, {
+                  default: P(() => [
+                    Y(D(n.value._id ? "Update" : "Create"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["submit"])
+              ])
+            ])) : j("", !0)
+          ]),
+          _: 1
+        })
+      ], 512)
+    ]));
+  }
+}, Qe = /* @__PURE__ */ me(Ae, [["__scopeId", "data-v-a2b32b3f"]]);
+export {
+  Qe as default
+};

package/dist/Gallery-dd29c7f6.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),q=require("./index-2059e444.js"),R=require("./vue-draggable-next.esm-bundler-21a209c6.js"),G=require("./UploadImageMultiple-c9a7b54f.js"),A=require("vue-router"),O=require("./_plugin-vue_export-helper-f246444f.js");var z={};(function(n){Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=t;const i={class:"flex-nowrap flex-v-center flex pd-medium bg-white"},r={key:0,class:"t-left mn-r-small w-33"},c={class:"w-100"},N=["value","placeholder"],b=e.defineComponent({__name:"Field",props:{label:{default:"Label"},placeholder:{default:"Enter something here"},field:{default:null},validation:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:o}){const a=l,d=e.ref(a.field);return(u,f)=>(e.openBlock(),e.createElementBlock("div",i,[l.label?(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("label",null,e.toDisplayString(l.label),1)])):e.createCommentVNode("",!0),e.createElementVNode("div",c,[e.createElementVNode("input",{onInput:f[0]||(f[0]=B=>{var p;return d.value=o("update:modelValue",(p=B.target)==null?void 0:p.value)}),type:"text",class:"w-100",value:l.field,placeholder:l.placeholder},null,40,N)])]))}}),m={class:"input-wrapper"},E={class:"t-transp p-small"},_={key:0,class:"flex-nojustify flex-v-center flex-nowrap flex w-100"},w={key:1,class:"w-100"},y=["onClick"],s={__name:"Select",props:["obj","label","prop","value","options","content","textarea","placeholder","size"],setup(l){const o=l,a=e.ref(null),d=e.ref(!1);e.ref("Please select an item");let u=e.computed(()=>{if(o.prop[o.content]){var p=o.options.indexOf(o.prop[o.content]),h=o.options.map(g=>g);return p!=-1&&h.splice(p,1),h}else return o.options});o.prop[o.content]&&(a.value=o.prop[o.content]);function f(){d.value=!d.value}function B(p,h,g){var j=g;a.value=j,d.value=!d.value,p[h]=j}return(p,h)=>(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("span",E,e.toDisplayString(l.label),1),e.createElementVNode("li",{onClick:h[0]||(h[0]=e.withModifiers(g=>f(),["stop"])),class:e.normalizeClass([{"input-small":l.size==="small"},"pd-small flex-center flex-nowrap flex bg-grey input-select input"])},[a.value?(e.openBlock(),e.createElementBlock("span",_,[e.createElementVNode("span",null,e.toDisplayString(a.value.name?a.value.name:a.value),1)])):(e.openBlock(),e.createElementBlock("span",w,e.toDisplayString(l.placeholder?l.placeholder:"Please select"),1))],2),d.value?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"dropdown-small":l.size==="small"},"bg-grey dropdown-menu"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),g=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass([{"input-small":l.size==="small"},"pd-small bg-grey input-select input"])},[g?(e.openBlock(),e.createElementBlock("span",{key:0,onClick:j=>B(l.prop,l.content,g),class:"flex-nojustify flex-v-center flex-nowrap flex w-100"},[e.createElementVNode("span",null,e.toDisplayString(g.name?g.name:g),1)],8,y)):e.createCommentVNode("",!0)],2))),256))],2)):e.createCommentVNode("",!0)]))}},V=["disabled"],x={key:0},T={key:0,class:"loading"},k=e.createElementVNode("span",null,[e.createElementVNode("svg",{class:"i-default",width:"135",height:"140",viewBox:"0 0 135 140",xmlns:"http://www.w3.org/2000/svg",fill:"#fff"},[e.createElementVNode("rect",{y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"30",y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"60",width:"15",height:"140",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"90",y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"120",y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})])])],-1),S=[k],P={key:0,class:"h4 loading"},L=e.createElementVNode("span",{class:"t-white"},"✔",-1),D=[L],U={key:0,class:"error"},I=e.defineComponent({__name:"Button",props:{submit:{type:Function,default:async()=>{console.log("Button click.")}},callback:{type:Function,default:async()=>{console.log("Button callback.")}},validation:{type:Boolean,default:!1}},setup(l){const o=l,a=e.ref(null),d=e.ref(null),u=e.ref(!1),f=e.ref(!1);async function B(){a.value.style["pointer-events"]="none",d.value=null,u.value=!0;try{await o.submit(),a.value.classList.add("bg-light-blue"),a.value.classList.remove("bg-blue"),u.value=!1,f.value=!0,setTimeout(()=>o.callback(),750)}catch{a.value.classList.add("bg-light-red"),a.value.classList.remove("bg-blue"),d.value="❌",setTimeout(()=>{a.value.classList.add("bg-blue"),a.value.classList.remove("bg-light-red"),a.value.style.pointerEvents="auto",u.value=!1,f.value=!1,d.value=null},1e3)}}return(p,h)=>(e.openBlock(),e.createElementBlock("button",{onClick:B,disabled:l.validation,ref_key:"button",ref:a,class:"w-100 t-white bg-blue button"},[e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[!u.value&&!d.value&&!f.value?(e.openBlock(),e.createElementBlock("span",x,[e.renderSlot(p.$slots,"default")])):e.createCommentVNode("",!0)]),_:3}),e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[u.value&&!d.value?(e.openBlock(),e.createElementBlock("div",T,S)):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("div",P,D)):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[d.value?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("span",null,e.toDisplayString(d.value),1)])):e.createCommentVNode("",!0)]),_:1})],8,V))}});var M={install:l=>{l.component("Field",b),l.component("Button",I),l.component("Select",s)}};n.Button=I,n.Field=b,n.Select=s,n.default=M})(z);const H=process.env.API_URL,F=q.axios.create({baseURL:H,withCredentials:!0}),v=t.reactive({gallery:[]}),C={async fetchGallery(n,e){const i=[];n&&i.push(`page=${n}`),e&&i.push(`limit=${e}`);const r=`/api/gallery${i.length?`?${i.join("&")}`:""}`;try{const c=await F.get(r);if(console.log(c),c&&c.data)return v.gallery=[...v.gallery,...c.data],c.data}catch(c){throw console.error("Error fetching gallery:",c),c}},async createPhoto(n){try{const e=await F.post("/api/gallery/create",n);console.log(e.data),v.gallery=[...e.data,...v.gallery]}catch(e){console.error(e)}},async updatePhoto(n){try{const e={...n,categories:typeof n.categories=="string"?n.categories.split(",").map(c=>c.trim()):n.categories},i=await q.axios.post("/api/gallery/update",e),r=v.gallery.findIndex(c=>c._id===n._id);r!==-1&&(v.gallery[r]=i.data)}catch(e){console.error(e)}},async deletePhoto(n){try{const e=await F.post(`/api/gallery/delete/${n}`),i=v.gallery.findIndex(r=>r._id===n);i!==-1&&v.gallery.splice(i,1)}catch(e){console.error(e)}}};const X={class:"pos-relative"},J=["src"],K=["onClick"],Q={__name:"EditImages",props:{images:Array},emits:["update"],setup(n,{emit:e}){const i=n,r=t.ref([...i.images]);t.watchEffect(()=>{r.value=[...i.images]});const c=()=>{e("update:images",r.value)},N=m=>{r.value=[...r.value,...m],c()},b=m=>{r.value.splice(m,1),c()};return(m,E)=>(t.openBlock(),t.createElementBlock("div",null,[t.createVNode(G._sfc_main,{"onUpdate:images":N,uploadPath:"photos",class:"mn-semi pd-small w-100 button bg-black t-white"}),t.createVNode(t.unref(R.VueDraggableNext),{class:"gap-small flex dragArea list-group w-full",modelValue:r.value,"onUpdate:modelValue":E[0]||(E[0]=_=>r.value=_),onChange:c},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.value,(_,w)=>(t.openBlock(),t.createElementBlock("div",X,[t.createElementVNode("img",{class:"i-extra radius-small o-hidden mn-thin",src:(m.FILE_SERVER_URL||"")+_},null,8,J),t.createElementVNode("a",{onClick:y=>b(w),class:"pos-absolute t-center radius-extra i-medium bg-red pos-t-0 pos-r-0"},"X",8,K)]))),256))]),_:1},8,["modelValue"])]))}};const $=n=>(t.pushScopeId("data-v-a2b32b3f"),n=n(),t.popScopeId(),n),W={class:"pos-relative w-100"},Y={class:"w-100 o-hidden"},Z={class:"pd-medium flex-nowrap flex pd-t-thin pd-b-thin o-scroll"},ee=["data-id"],te=["src","onClick"],le={key:1,class:"pd-small radius-small bg-white"},ae=["src","onClick"],oe={class:"t-black p-small mn-small"},ne=$(()=>t.createElementVNode("span",{class:"uppercase t-transp"},"Size",-1)),se=$(()=>t.createElementVNode("br",null,null,-1)),re={class:"pd-2px radius-big d-inline-block bg-grey"},ce={class:"t-black p-small mn-small uppe"},ie=$(()=>t.createElementVNode("span",{class:"uppercase t-transp"},"Categories",-1)),de=$(()=>t.createElementVNode("br",null,null,-1)),ue={class:"pd-2px radius-big d-inline-block bg-grey t-semi"},me={class:"flex-nowrap flex"},pe=["onClick"],ge={class:"modal pd-thin"},ve={class:"modal-content radius-big"},fe={class:""},he=["src"],be={key:0,class:"flex-v-center flex m modal pd-big"},_e={class:"modal-content radius-small pd-medium bg-white"},ye=["src"],ke=["src"],Ne={__name:"Gallery",setup(n){A.useRoute();const e=t.ref(!0),i=t.ref(null);let r=1;const c=10;let N=t.ref(null),b=t.ref(!1);const m=t.ref([]),E=l=>{m.value=l},_=t.computed(()=>M.value==="all"?v.gallery:v.gallery.filter(l=>l.categories.includes(M.value))),w=async()=>{b.value=!0,await C.fetchGallery(r,c),b.value=!1},y=t.ref(null),s=t.ref({categories:"",size:"",image:!1}),V=t.ref(null),x=l=>{console.log(e.value),e.value?T(l):(y.value="modal",s.value.image=l,S())},T=l=>{y.value="edit-modal",s.value=l||{categories:"",size:"",image:null},S()},k=()=>{s.value={categories:"",size:"",image:!1},V.value=null,P()},S=()=>{document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"},P=()=>{document.body.style.overflow="",document.documentElement.style.overflow=""},L=[{name:"Small",value:""},{name:"Regular",value:"grid-item--width1 grid-item--height1"},{name:"Medium",value:"grid-item--width2 grid-item--height2"},{name:"Big",value:"grid-item--width3 grid-item--height3"}],D=async l=>{await C.deletePhoto(l)},U=async()=>{await C.updatePhoto(s.value),k()},I=async l=>{if(m.length<1||!s.value.categories||!s.value.size){console.error("All fields are required.");return}await C.createPhoto({images:m.value,size:s.value.size,categories:typeof s.value.categories=="string"?s.value.categories.split(",").map(o=>o.trim()):s.value.categories}),k()};let M=t.ref("all");return t.onMounted(async()=>{await C.fetchGallery(r,c),typeof window<"u"&&new IntersectionObserver(o=>{o.some(a=>a.isIntersecting)&&(r+=1,w())}).observe(N.value)}),(l,o)=>(t.openBlock(),t.createElementBlock("div",W,[t.createElementVNode("div",Y,[t.createElementVNode("div",Z,[e.value?(t.openBlock(),t.createElementBlock("button",{key:0,onClick:o[0]||(o[0]=a=>x(null)),class:"mn-r-small t-white t-black bg-second button-small button"},"Add photos +")):t.createCommentVNode("",!0)])]),t.createElementVNode("div",{ref_key:"grid",ref:i,class:"pd-medium cols-4 gap-thin"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(_),(a,d)=>(t.openBlock(),t.createElementBlock("div",{key:a.id,"data-id":a.id},[t.createVNode(t.Transition,{name:"scaleIn",mode:"in-out"},{default:t.withCtx(()=>[!e.value&&i.value?(t.openBlock(),t.createElementBlock("img",{key:0,src:"https://thecommunephuket.com/photos/"+a.cover,class:"w-100 h-100 o-hidden radius-medium object-fit-cover",onClick:u=>x(a.image)},null,8,te)):(t.openBlock(),t.createElementBlock("div",le,[t.createTextVNode(t.toDisplayString(a._id)+" ",1),t.createElementVNode("img",{src:"https://thecommunephuket.com/photos/"+a.cover,class:"w-100 radius-small mn-small h-10r object-fit-cover",onClick:u=>x(a)},null,8,ae),t.createElementVNode("p",oe,[ne,se,t.createElementVNode("span",re,t.toDisplayString(a.size.name),1)]),t.createElementVNode("p",ce,[ie,de,(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.categories,u=>(t.openBlock(),t.createElementBlock("span",ue,t.toDisplayString(u),1))),256))]),t.createElementVNode("div",me,[t.createElementVNode("button",{class:"button-small w-100 button",onClick:u=>D(a._id)},"Delete",8,pe)])]))]),_:2},1024)],8,ee))),128)),t.createElementVNode("div",{ref_key:"sentinel",ref:N,class:"sentinel"},null,512),t.createVNode(t.Transition,{name:"modal"},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",ge,[t.createElementVNode("div",ve,[t.createElementVNode("div",fe,[t.createElementVNode("span",{class:"close",onClick:k},"×"),t.createElementVNode("img",{src:"https://thecommunephuket.com/photos/"+s.value.image},null,8,he)])])],512),[[t.vShow,s.value.image!==!1&&y.value==="modal"]])]),_:1}),t.createVNode(t.Transition,{name:"modal"},{default:t.withCtx(()=>[s.value.image!==!1&&y.value==="edit-modal"?(t.openBlock(),t.createElementBlock("div",be,[t.createElementVNode("div",_e,[t.createElementVNode("span",{class:"close",onClick:k},"×"),typeof V.value=="string"?(t.openBlock(),t.createElementBlock("img",{key:0,src:V.value,class:"radius-small w-100 mn-small h-20r object-fit-cover"},null,8,ye)):t.createCommentVNode("",!0),typeof V.value=="object"&&s.value.image!==null?(t.openBlock(),t.createElementBlock("img",{key:1,class:"radius-small w-100 mn-small h-20r object-fit-cover",src:"/photos/"+s.value.cover},null,8,ke)):t.createCommentVNode("",!0),t.createVNode(t.unref(z.Select),{options:L,label:"Size",select:s.value.size,"onUpdate:select":o[1]||(o[1]=a=>s.value.size=a),placeholder:"Select Size",class:"bg-grey pd-thin radius-small mn-thin t-black"},null,8,["select"]),t.createVNode(t.unref(z.Field),{field:s.value.categories,"onUpdate:field":o[2]||(o[2]=a=>s.value.categories=a),type:"text",label:"Categories",placeholder:"Enter categories for image (comma separated)",class:"bg-grey pd-thin radius-small mn-medium t-black"},null,8,["field"]),t.createVNode(Q,{images:m.value,"onUpdate:images":E,uploadPath:"photos",class:"mn-semi"},null,8,["images"]),t.createVNode(t.unref(z.Button),{submit:s.value._id?U:I,callback:k,class:"mn-thin"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(s.value._id?"Update":"Create"),1)]),_:1},8,["submit"])])])):t.createCommentVNode("",!0)]),_:1})],512)]))}},Ee=O._export_sfc(Ne,[["__scopeId","data-v-a2b32b3f"]]);exports.default=Ee;

package/dist/Gallery-dea27e94.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),q=require("./index-b41aac19.js"),R=require("./vue-draggable-next.esm-bundler-21a209c6.js"),G=require("./UploadImageMultiple-eddaac87.js"),A=require("vue-router"),O=require("./_plugin-vue_export-helper-f246444f.js");var z={};(function(n){Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=t;const i={class:"flex-nowrap flex-v-center flex pd-medium bg-white"},r={key:0,class:"t-left mn-r-small w-33"},c={class:"w-100"},N=["value","placeholder"],b=e.defineComponent({__name:"Field",props:{label:{default:"Label"},placeholder:{default:"Enter something here"},field:{default:null},validation:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(l,{emit:o}){const a=l,d=e.ref(a.field);return(u,f)=>(e.openBlock(),e.createElementBlock("div",i,[l.label?(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("label",null,e.toDisplayString(l.label),1)])):e.createCommentVNode("",!0),e.createElementVNode("div",c,[e.createElementVNode("input",{onInput:f[0]||(f[0]=B=>{var p;return d.value=o("update:modelValue",(p=B.target)==null?void 0:p.value)}),type:"text",class:"w-100",value:l.field,placeholder:l.placeholder},null,40,N)])]))}}),m={class:"input-wrapper"},E={class:"t-transp p-small"},_={key:0,class:"flex-nojustify flex-v-center flex-nowrap flex w-100"},w={key:1,class:"w-100"},y=["onClick"],s={__name:"Select",props:["obj","label","prop","value","options","content","textarea","placeholder","size"],setup(l){const o=l,a=e.ref(null),d=e.ref(!1);e.ref("Please select an item");let u=e.computed(()=>{if(o.prop[o.content]){var p=o.options.indexOf(o.prop[o.content]),h=o.options.map(g=>g);return p!=-1&&h.splice(p,1),h}else return o.options});o.prop[o.content]&&(a.value=o.prop[o.content]);function f(){d.value=!d.value}function B(p,h,g){var j=g;a.value=j,d.value=!d.value,p[h]=j}return(p,h)=>(e.openBlock(),e.createElementBlock("div",m,[e.createElementVNode("span",E,e.toDisplayString(l.label),1),e.createElementVNode("li",{onClick:h[0]||(h[0]=e.withModifiers(g=>f(),["stop"])),class:e.normalizeClass([{"input-small":l.size==="small"},"pd-small flex-center flex-nowrap flex bg-grey input-select input"])},[a.value?(e.openBlock(),e.createElementBlock("span",_,[e.createElementVNode("span",null,e.toDisplayString(a.value.name?a.value.name:a.value),1)])):(e.openBlock(),e.createElementBlock("span",w,e.toDisplayString(l.placeholder?l.placeholder:"Please select"),1))],2),d.value?(e.openBlock(),e.createElementBlock("ul",{key:0,class:e.normalizeClass([{"dropdown-small":l.size==="small"},"bg-grey dropdown-menu"])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(u),g=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass([{"input-small":l.size==="small"},"pd-small bg-grey input-select input"])},[g?(e.openBlock(),e.createElementBlock("span",{key:0,onClick:j=>B(l.prop,l.content,g),class:"flex-nojustify flex-v-center flex-nowrap flex w-100"},[e.createElementVNode("span",null,e.toDisplayString(g.name?g.name:g),1)],8,y)):e.createCommentVNode("",!0)],2))),256))],2)):e.createCommentVNode("",!0)]))}},V=["disabled"],x={key:0},T={key:0,class:"loading"},k=e.createElementVNode("span",null,[e.createElementVNode("svg",{class:"i-default",width:"135",height:"140",viewBox:"0 0 135 140",xmlns:"http://www.w3.org/2000/svg",fill:"#fff"},[e.createElementVNode("rect",{y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"30",y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"60",width:"15",height:"140",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"90",y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.25s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.25s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})]),e.createElementVNode("rect",{x:"120",y:"10",width:"15",height:"120",rx:"6"},[e.createElementVNode("animate",{attributeName:"height",begin:"0.5s",dur:"1s",values:"120;110;100;90;80;70;60;50;40;140;120",calcMode:"linear",repeatCount:"indefinite"}),e.createTextVNode(),e.createElementVNode("animate",{attributeName:"y",begin:"0.5s",dur:"1s",values:"10;15;20;25;30;35;40;45;50;0;10",calcMode:"linear",repeatCount:"indefinite"})])])],-1),S=[k],P={key:0,class:"h4 loading"},L=e.createElementVNode("span",{class:"t-white"},"✔",-1),D=[L],U={key:0,class:"error"},I=e.defineComponent({__name:"Button",props:{submit:{type:Function,default:async()=>{console.log("Button click.")}},callback:{type:Function,default:async()=>{console.log("Button callback.")}},validation:{type:Boolean,default:!1}},setup(l){const o=l,a=e.ref(null),d=e.ref(null),u=e.ref(!1),f=e.ref(!1);async function B(){a.value.style["pointer-events"]="none",d.value=null,u.value=!0;try{await o.submit(),a.value.classList.add("bg-light-blue"),a.value.classList.remove("bg-blue"),u.value=!1,f.value=!0,setTimeout(()=>o.callback(),750)}catch{a.value.classList.add("bg-light-red"),a.value.classList.remove("bg-blue"),d.value="❌",setTimeout(()=>{a.value.classList.add("bg-blue"),a.value.classList.remove("bg-light-red"),a.value.style.pointerEvents="auto",u.value=!1,f.value=!1,d.value=null},1e3)}}return(p,h)=>(e.openBlock(),e.createElementBlock("button",{onClick:B,disabled:l.validation,ref_key:"button",ref:a,class:"w-100 t-white bg-blue button"},[e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[!u.value&&!d.value&&!f.value?(e.openBlock(),e.createElementBlock("span",x,[e.renderSlot(p.$slots,"default")])):e.createCommentVNode("",!0)]),_:3}),e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[u.value&&!d.value?(e.openBlock(),e.createElementBlock("div",T,S)):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[f.value?(e.openBlock(),e.createElementBlock("div",P,D)):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{mode:"out-in",name:"fadeIn"},{default:e.withCtx(()=>[d.value?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("span",null,e.toDisplayString(d.value),1)])):e.createCommentVNode("",!0)]),_:1})],8,V))}});var M={install:l=>{l.component("Field",b),l.component("Button",I),l.component("Select",s)}};n.Button=I,n.Field=b,n.Select=s,n.default=M})(z);const H=process.env.API_URL,F=q.axios.create({baseURL:H,withCredentials:!0}),v=t.reactive({gallery:[]}),C={async fetchGallery(n,e){const i=[];n&&i.push(`page=${n}`),e&&i.push(`limit=${e}`);const r=`/api/gallery${i.length?`?${i.join("&")}`:""}`;try{const c=await F.get(r);if(console.log(c),c&&c.data)return v.gallery=[...v.gallery,...c.data],c.data}catch(c){throw console.error("Error fetching gallery:",c),c}},async createPhoto(n){try{const e=await F.post("/api/gallery/create",n);console.log(e.data),v.gallery=[...e.data,...v.gallery]}catch(e){console.error(e)}},async updatePhoto(n){try{const e={...n,categories:typeof n.categories=="string"?n.categories.split(",").map(c=>c.trim()):n.categories},i=await q.axios.post("/api/gallery/update",e),r=v.gallery.findIndex(c=>c._id===n._id);r!==-1&&(v.gallery[r]=i.data)}catch(e){console.error(e)}},async deletePhoto(n){try{const e=await F.post(`/api/gallery/delete/${n}`),i=v.gallery.findIndex(r=>r._id===n);i!==-1&&v.gallery.splice(i,1)}catch(e){console.error(e)}}};const X={class:"pos-relative"},J=["src"],K=["onClick"],Q={__name:"EditImages",props:{images:Array},emits:["update"],setup(n,{emit:e}){const i=n,r=t.ref([...i.images]);t.watchEffect(()=>{r.value=[...i.images]});const c=()=>{e("update:images",r.value)},N=m=>{r.value=[...r.value,...m],c()},b=m=>{r.value.splice(m,1),c()};return(m,E)=>(t.openBlock(),t.createElementBlock("div",null,[t.createVNode(G._sfc_main,{"onUpdate:images":N,uploadPath:"photos",class:"mn-semi pd-small w-100 button bg-black t-white"}),t.createVNode(t.unref(R.VueDraggableNext),{class:"gap-small flex dragArea list-group w-full",modelValue:r.value,"onUpdate:modelValue":E[0]||(E[0]=_=>r.value=_),onChange:c},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(r.value,(_,w)=>(t.openBlock(),t.createElementBlock("div",X,[t.createElementVNode("img",{class:"i-extra radius-small o-hidden mn-thin",src:(m.FILE_SERVER_URL||"")+_},null,8,J),t.createElementVNode("a",{onClick:y=>b(w),class:"pos-absolute t-center radius-extra i-medium bg-red pos-t-0 pos-r-0"},"X",8,K)]))),256))]),_:1},8,["modelValue"])]))}};const $=n=>(t.pushScopeId("data-v-a2b32b3f"),n=n(),t.popScopeId(),n),W={class:"pos-relative w-100"},Y={class:"w-100 o-hidden"},Z={class:"pd-medium flex-nowrap flex pd-t-thin pd-b-thin o-scroll"},ee=["data-id"],te=["src","onClick"],le={key:1,class:"pd-small radius-small bg-white"},ae=["src","onClick"],oe={class:"t-black p-small mn-small"},ne=$(()=>t.createElementVNode("span",{class:"uppercase t-transp"},"Size",-1)),se=$(()=>t.createElementVNode("br",null,null,-1)),re={class:"pd-2px radius-big d-inline-block bg-grey"},ce={class:"t-black p-small mn-small uppe"},ie=$(()=>t.createElementVNode("span",{class:"uppercase t-transp"},"Categories",-1)),de=$(()=>t.createElementVNode("br",null,null,-1)),ue={class:"pd-2px radius-big d-inline-block bg-grey t-semi"},me={class:"flex-nowrap flex"},pe=["onClick"],ge={class:"modal pd-thin"},ve={class:"modal-content radius-big"},fe={class:""},he=["src"],be={key:0,class:"flex-v-center flex m modal pd-big"},_e={class:"modal-content radius-small pd-medium bg-white"},ye=["src"],ke=["src"],Ne={__name:"Gallery",setup(n){A.useRoute();const e=t.ref(!0),i=t.ref(null);let r=1;const c=10;let N=t.ref(null),b=t.ref(!1);const m=t.ref([]),E=l=>{m.value=l},_=t.computed(()=>M.value==="all"?v.gallery:v.gallery.filter(l=>l.categories.includes(M.value))),w=async()=>{b.value=!0,await C.fetchGallery(r,c),b.value=!1},y=t.ref(null),s=t.ref({categories:"",size:"",image:!1}),V=t.ref(null),x=l=>{console.log(e.value),e.value?T(l):(y.value="modal",s.value.image=l,S())},T=l=>{y.value="edit-modal",s.value=l||{categories:"",size:"",image:null},S()},k=()=>{s.value={categories:"",size:"",image:!1},V.value=null,P()},S=()=>{document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"},P=()=>{document.body.style.overflow="",document.documentElement.style.overflow=""},L=[{name:"Small",value:""},{name:"Regular",value:"grid-item--width1 grid-item--height1"},{name:"Medium",value:"grid-item--width2 grid-item--height2"},{name:"Big",value:"grid-item--width3 grid-item--height3"}],D=async l=>{await C.deletePhoto(l)},U=async()=>{await C.updatePhoto(s.value),k()},I=async l=>{if(m.length<1||!s.value.categories||!s.value.size){console.error("All fields are required.");return}await C.createPhoto({images:m.value,size:s.value.size,categories:typeof s.value.categories=="string"?s.value.categories.split(",").map(o=>o.trim()):s.value.categories}),k()};let M=t.ref("all");return t.onMounted(async()=>{await C.fetchGallery(r,c),typeof window<"u"&&new IntersectionObserver(o=>{o.some(a=>a.isIntersecting)&&(r+=1,w())}).observe(N.value)}),(l,o)=>(t.openBlock(),t.createElementBlock("div",W,[t.createElementVNode("div",Y,[t.createElementVNode("div",Z,[e.value?(t.openBlock(),t.createElementBlock("button",{key:0,onClick:o[0]||(o[0]=a=>x(null)),class:"mn-r-small t-white t-black bg-second button-small button"},"Add photos +")):t.createCommentVNode("",!0)])]),t.createElementVNode("div",{ref_key:"grid",ref:i,class:"pd-medium cols-4 gap-thin"},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(_),(a,d)=>(t.openBlock(),t.createElementBlock("div",{key:a.id,"data-id":a.id},[t.createVNode(t.Transition,{name:"scaleIn",mode:"in-out"},{default:t.withCtx(()=>[!e.value&&i.value?(t.openBlock(),t.createElementBlock("img",{key:0,src:"https://thecommunephuket.com/photos/"+a.cover,class:"w-100 h-100 o-hidden radius-medium object-fit-cover",onClick:u=>x(a.image)},null,8,te)):(t.openBlock(),t.createElementBlock("div",le,[t.createTextVNode(t.toDisplayString(a._id)+" ",1),t.createElementVNode("img",{src:"https://thecommunephuket.com/photos/"+a.cover,class:"w-100 radius-small mn-small h-10r object-fit-cover",onClick:u=>x(a)},null,8,ae),t.createElementVNode("p",oe,[ne,se,t.createElementVNode("span",re,t.toDisplayString(a.size.name),1)]),t.createElementVNode("p",ce,[ie,de,(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.categories,u=>(t.openBlock(),t.createElementBlock("span",ue,t.toDisplayString(u),1))),256))]),t.createElementVNode("div",me,[t.createElementVNode("button",{class:"button-small w-100 button",onClick:u=>D(a._id)},"Delete",8,pe)])]))]),_:2},1024)],8,ee))),128)),t.createElementVNode("div",{ref_key:"sentinel",ref:N,class:"sentinel"},null,512),t.createVNode(t.Transition,{name:"modal"},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",ge,[t.createElementVNode("div",ve,[t.createElementVNode("div",fe,[t.createElementVNode("span",{class:"close",onClick:k},"×"),t.createElementVNode("img",{src:"https://thecommunephuket.com/photos/"+s.value.image},null,8,he)])])],512),[[t.vShow,s.value.image!==!1&&y.value==="modal"]])]),_:1}),t.createVNode(t.Transition,{name:"modal"},{default:t.withCtx(()=>[s.value.image!==!1&&y.value==="edit-modal"?(t.openBlock(),t.createElementBlock("div",be,[t.createElementVNode("div",_e,[t.createElementVNode("span",{class:"close",onClick:k},"×"),typeof V.value=="string"?(t.openBlock(),t.createElementBlock("img",{key:0,src:V.value,class:"radius-small w-100 mn-small h-20r object-fit-cover"},null,8,ye)):t.createCommentVNode("",!0),typeof V.value=="object"&&s.value.image!==null?(t.openBlock(),t.createElementBlock("img",{key:1,class:"radius-small w-100 mn-small h-20r object-fit-cover",src:"/photos/"+s.value.cover},null,8,ke)):t.createCommentVNode("",!0),t.createVNode(t.unref(z.Select),{options:L,label:"Size",select:s.value.size,"onUpdate:select":o[1]||(o[1]=a=>s.value.size=a),placeholder:"Select Size",class:"bg-grey pd-thin radius-small mn-thin t-black"},null,8,["select"]),t.createVNode(t.unref(z.Field),{field:s.value.categories,"onUpdate:field":o[2]||(o[2]=a=>s.value.categories=a),type:"text",label:"Categories",placeholder:"Enter categories for image (comma separated)",class:"bg-grey pd-thin radius-small mn-medium t-black"},null,8,["field"]),t.createVNode(Q,{images:m.value,"onUpdate:images":E,uploadPath:"photos",class:"mn-semi"},null,8,["images"]),t.createVNode(t.unref(z.Button),{submit:s.value._id?U:I,callback:k,class:"mn-thin"},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(s.value._id?"Update":"Create"),1)]),_:1},8,["submit"])])])):t.createCommentVNode("",!0)]),_:1})],512)]))}},Ee=O._export_sfc(Ne,[["__scopeId","data-v-a2b32b3f"]]);exports.default=Ee;

package/dist/Image-22e17cef.js

@@ -0,0 +1,9 @@
+"use strict";const e=require("vue"),B=require("./index-b41aac19.js"),$=require("./vue-draggable-next.esm-bundler-21a209c6.js"),C=require("./Chips-3dac276c.js");const _=["placeholder"],y={__name:"Textarea",props:["prop","value","content","placeholder","index","setFocus"],emits:["deleteBlock","updateBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);e.ref(0);function d(a){let l=a.target.value.split(/\n+/);if(l.length>1){n.prop[n.content]=l[0],e.nextTick(()=>{c()});let u=l.slice(1).map(f=>({__name:"Textarea",content:f}));r("addBlock","Textarea","",n.index,{blocks:u,ref:t})}else a.target.value.trim()===""&&a.target.value.includes(`
+
+`)&&(console.log("We are adding new block:"+n.index+newBlocks+t),r("addBlock","Textarea","",n.index,{blocks:newBlocks,ref:t})),c()}function i(a){(a.keyCode===8||a.keyCode===46)&&n.prop[n.content].trim()===""&&r("deleteBlock",n.prop)}function s(){e.nextTick(()=>{t.value.focus(),r("updateBlock",n.prop,{setFocus:!1})})}function c(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),e.onMounted(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),(a,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":l[0]||(l[0]=u=>o.prop[o.content]=u),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:l[1]||(l[1]=u=>r("focus",t.value)),onKeyup:i,ref_key:"textarea",ref:t,class:"text-area mn-thin"},`    
+    `,40,_),[[e.vModelText,o.prop[o.content]]])]))}};const V=["placeholder"],N={__name:"H2",props:["obj","label","prop","value","content","textarea","placeholder","index","ref","setFocus"],emits:["deleteBlock","updateBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);e.ref(0);function d(a){let l=a.target.value.split(/\n+/);if(l.length>1){n.prop[n.content]=l[0],e.nextTick(()=>{c()});let u=l.slice(1).map(f=>({type:"Textarea",content:f}));r("addBlock","Textarea","",n.index,{blocks:u,ref:t})}else a.target.value.trim()===""&&a.target.value.includes(`
+
+`)&&(console.log("We are adding new block:"+n.index+newBlocks+t),r("addBlock","Textarea","",n.index,{blocks:newBlocks,ref:t})),c()}function i(a){(a.keyCode===8||a.keyCode===46)&&n.prop[n.content].trim()===""&&r("deleteBlock",n.prop)}function s(){e.nextTick(()=>{t.value.focus(),r("updateBlock",n.prop,{setFocus:!1})})}function c(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),e.onMounted(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),e.watch(()=>n.prop[n.content],a=>{}),(a,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":l[0]||(l[0]=u=>o.prop[o.content]=u),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:l[1]||(l[1]=u=>r("focus",t.value)),onKeyup:i,ref_key:"textarea",ref:t,class:"h3 text-area mn-thin"},`    
+    `,40,V),[[e.vModelText,o.prop[o.content]]])]))}},T=["placeholder"],U={__name:"Caption",props:["obj","label","prop","value","content","textarea","placeholder","index","ref"],emits:["deleteBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);function d(s){const c=/^\s*[-*]\s+(.*)/;let l=s.target.value.split(/\n+/).map(u=>{const f=c.exec(u);return f?f[1]:null}).filter(u=>u!==null);l.length>0?(n.prop[n.content]=l,i()):s.target.value.trim()===""&&(n.prop[n.content]=[],i())}function i(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{i()}),e.onMounted(()=>{i()}),e.watch(()=>n.prop[n.content],s=>{(!s||s.length===0)&&r("deleteBlock",n.prop)}),(s,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":c[0]||(c[0]=a=>o.prop[o.content]=a),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:c[1]||(c[1]=a=>r("focus",t.value)),ref_key:"textarea",ref:t,class:"br-l br-solid br-main pd-l-small text-area mn-small"},`    
+  `,40,T),[[e.vModelText,o.prop[o.content]]])]))}},D=["placeholder"],F={__name:"Bullets",props:["obj","label","prop","value","content","textarea","placeholder","index","ref"],emits:["deleteBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);function d(s){const c=/^\s*[-*]\s+(.*)/;let l=s.target.value.split(/\n+/).map(u=>{const f=c.exec(u);return f?f[1]:null}).filter(u=>u!==null);l.length>0?(n.prop[n.content]=l,i()):s.target.value.trim()===""&&(n.prop[n.content]=[],i())}function i(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{i()}),e.onMounted(()=>{i()}),e.watch(()=>n.prop[n.content],s=>{(!s||s.length===0)&&r("deleteBlock",n.prop)}),(s,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createTextVNode(e.toDisplayString(o.prop[o.content])+" ",1),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":c[0]||(c[0]=a=>o.prop[o.content]=a),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:c[1]||(c[1]=a=>r("focus",t.value)),ref_key:"textarea",ref:t,class:"text-area mn-small"},`    
+  `,40,D),[[e.vModelText,o.prop[o.content]]])]))}},I=["src"],M={key:1,class:"t-transp pd-extra"},L={__name:"ImageUpload",props:["label","value","prop"],emits:["input","updateBlock"],setup(o,{emit:r}){const n=o,t=e.ref(null),d=e.ref(null);function i(){d.value.click()}async function s(a){let l=a.target.files[0];console.log(l);let u=new FormData,f="unsorted";u.append("file",l),console.log(u.has("file"));try{let h=await B.axios.create({baseURL:process.env.API_URL,withCredentials:!0}).post(`/api/upload/file?folderName=${encodeURIComponent(f)}`,u,{headers:{"Content-Type":"multipart/form-data"}});t.value=h.data.filepath,console.log(t.value),r("input",t.value),r("updateBlock",n.prop,{content:t.value})}catch(g){console.error(g)}}function c(a){a.preventDefault(),s({target:{files:a.dataTransfer.files}})}return(a,l)=>(e.openBlock(),e.createElementBlock("div",{onClick:i,onDrop:c,onDragover:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),class:"w-100 radius-big bg-white image-upload-area flex-v-center flex-h-center flex t-black mn-small"},[o.prop.content?(e.openBlock(),e.createElementBlock("img",{key:0,src:(a.FILE_SERVER_URL||"")+o.prop.content,alt:"Uploaded image",class:"w-100 h-30r object-fit-contain"},null,8,I)):(e.openBlock(),e.createElementBlock("span",M,"Click or drag-and-drop your image")),e.createElementVNode("input",{type:"file",ref_key:"fileInput",ref:d,onChange:s,style:{display:"none"}},null,544)],32))}},R=["onMouseover"],S={key:0,class:"z-index-5 radius-thin mn-small relative left-0 mt-2 w-max bg-white shadow-lg rounded"},A=["onClick"],H=["onClick"],z=["onClick"],j={__name:"Constructor",props:["content"],emits:["update"],setup(o,{emit:r}){const n=o;let t=e.ref(null);e.ref(null),t.value={content:n.content};const d={Textarea:y,H2:N,Bullets:F,Caption:U,ImageUpload:L};function i(h="Textarea",k="",p,m){console.log("We are adding new block (functuin HandleAddBlock):"+h+k+p+m);let v={order:t.value.content.length+1,type:h,style:"",class:"",content:k,blocks:[],setFocus:!0};if(m&&m.blocks&&Array.isArray(m.blocks)){let x=m.blocks.map(E=>({...v,content:E.content})),b=[(m.index||p)+1,0].concat(x);t.value.content.splice.apply(t.value.content,b);const w=x[x.length-1];console.log("New block is"+w)}else p!==void 0?(t.value.content.splice(p+1,0,v),console.log("Latest block is"+v)):(console.log("Another block is"+v),t.value.content.push(v));a.value=null,r("update",t.value.content)}function s(h,k){const p=t.value.content.findIndex(m=>m===h);p!==-1&&(t.value.content[p]={...t.value.content[p],...k}),r("update",t.value.content)}function c(h){let k=t.value.content.findIndex(p=>p===h);k!==-1&&t.value.content.splice(k,1),t.value.content[k-1].setFocus=!0,r("update",t.value.content)}const a=e.ref(null),l=e.ref(!1),u=e.ref(!1);function f(){l.value=!0}function g(){l.value=!1}return e.watchEffect(()=>{t.value&&t.value.content.length===0&&i("Textarea",""),r("update",t.value.content)}),(h,k)=>(e.openBlock(),e.createElementBlock("section",null,[e.unref(t).content?(e.openBlock(),e.createBlock(e.unref($.VueDraggableNext),{key:0,class:"w-full",list:e.unref(t).content,onStart:f,onEnd:g},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).content,(p,m)=>(e.openBlock(),e.createElementBlock("div",{key:m,class:"pos-relative"},[e.createElementVNode("div",{onMouseover:v=>(a.value=m,u.value=!1),class:"pos-relative w-full h-full"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(d[p.type]),{index:m,component:p,prop:p,class:e.normalizeClass(p.class),setFocus:p.setFocus,content:"content",onDeleteBlock:c,onAddBlock:i,onUpdateBlock:s},null,40,["index","component","prop","class","setFocus"]))],40,R),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[a.value===m?(e.openBlock(),e.createElementBlock("div",{key:0,class:"pos-absolute pos-r-100 pos-t-0 z-index-4 i-semi",onMousedown:k[1]||(k[1]=e.withModifiers(v=>l.value=!0,["prevent"]))},[e.createElementVNode("button",{onClick:k[0]||(k[0]=v=>u.value=!u.value),class:"mn-small w-100 i-semi bg-white radius-thin"},e.toDisplayString(p.content?"...":"+"),1),u.value?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("button",{onClick:v=>c(p),class:"block w-max text-left px-4 py-2 hover:bg-gray-200"},"Удалить",8,A),e.createElementVNode("button",{onClick:v=>i("ImageUpload","",m),class:"block w-max text-left px-4 py-2 hover:bg-gray-200"},"Добавить изображение",8,H),e.createElementVNode("button",{onClick:v=>i("H2","",m),class:"block w-max text-left px-4 py-2 hover:bg-gray-200"},"Добавить заголовок",8,z)])):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0)]),_:2},1024)]))),128))]),_:1},8,["list"])):e.createCommentVNode("",!0)]))}},q={class:"mn-small"},K=e.createElementVNode("p",{class:"t-semi uppercase"},"Please log in to leave a comment.",-1),P=[K],W={key:1,class:"mn-small"},G=["onSubmit"],J=e.createElementVNode("button",{type:"submit",class:"mn-l-auto bg-main button"},"Send",-1),O={class:"pd-t-zero"},Q={class:"p-big"},X={__name:"Comments",props:["target","owner","type"],setup(o){const r=o,n=B.axios.create({baseURL:process.env.API_URL}),t=e.ref([]),d=e.ref(""),i=async()=>{const{data:c}=await n.get(`/comments/read?type=${r.type}&target=${r.target}`);t.value=c},s=async()=>{if(d.value)try{const c=await n.post("/comments/create",{target:r.target,user:r.owner,type:r.type,content:d.value});c.data.owner=r.owner,t.value.push(c.data),d.value=""}catch(c){console.error(c)}};return i(),(c,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",null,[e.createElementVNode("h3",q,e.toDisplayString(t.value.length)+" comments",1),o.owner?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,onClick:a[0]||(a[0]=l=>c.$router.push({name:"Sign In"})),class:"cursor-pointer mn-small section bg-black t-white flex-center flex radius-big"},P)),o.owner?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("form",{onSubmit:e.withModifiers(s,["prevent"]),class:"bg-grey radius-big pd-medium"},[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":a[1]||(a[1]=l=>d.value=l),placeholder:"Enter your comment",class:"pd-small p-big w-100 radius-small mn-r-small"},null,512),[[e.vModelText,d.value]]),J],40,G)])):e.createCommentVNode("",!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,l=>(e.openBlock(),e.createElementBlock("div",{key:l._id,class:"comment mn-small radius-big pd-medium bg-grey"},[e.createVNode(C._sfc_main,{class:"mn-medium",owner:{target:l.user},creator:{target:l.user},date:l.createdAt},null,8,["owner","creator","date"]),e.createElementVNode("div",O,[e.createElementVNode("p",Q,e.toDisplayString(l.content),1)])]))),128))]))}},Y={class:"w-100 bg-white radius-big image-upload-area flex-v-center flex-h-center flex t-black mn-small"},Z=["src"],ee={__name:"Image",props:["label","value","prop"],setup(o){return e.ref(null),(r,n)=>(e.openBlock(),e.createElementBlock("div",Y,[o.prop.content?(e.openBlock(),e.createElementBlock("img",{key:0,src:(r.FILE_SERVER_URL||"")+o.prop.content,alt:"Uploaded image",class:"w-100 h-30r object-fit-contain"},null,8,Z)):e.createCommentVNode("",!0)]))}};exports._sfc_main=y;exports._sfc_main$1=j;exports._sfc_main$2=X;exports._sfc_main$3=ee;

package/dist/Image-a2c2ab9c.js

@@ -0,0 +1,9 @@
+"use strict";const e=require("vue"),B=require("./index-2059e444.js"),$=require("./vue-draggable-next.esm-bundler-21a209c6.js"),C=require("./Chips-3dac276c.js");const _=["placeholder"],y={__name:"Textarea",props:["prop","value","content","placeholder","index","setFocus"],emits:["deleteBlock","updateBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);e.ref(0);function d(a){let l=a.target.value.split(/\n+/);if(l.length>1){n.prop[n.content]=l[0],e.nextTick(()=>{c()});let u=l.slice(1).map(f=>({__name:"Textarea",content:f}));r("addBlock","Textarea","",n.index,{blocks:u,ref:t})}else a.target.value.trim()===""&&a.target.value.includes(`
+
+`)&&(console.log("We are adding new block:"+n.index+newBlocks+t),r("addBlock","Textarea","",n.index,{blocks:newBlocks,ref:t})),c()}function i(a){(a.keyCode===8||a.keyCode===46)&&n.prop[n.content].trim()===""&&r("deleteBlock",n.prop)}function s(){e.nextTick(()=>{t.value.focus(),r("updateBlock",n.prop,{setFocus:!1})})}function c(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),e.onMounted(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),(a,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":l[0]||(l[0]=u=>o.prop[o.content]=u),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:l[1]||(l[1]=u=>r("focus",t.value)),onKeyup:i,ref_key:"textarea",ref:t,class:"text-area mn-thin"},`    
+    `,40,_),[[e.vModelText,o.prop[o.content]]])]))}};const V=["placeholder"],N={__name:"H2",props:["obj","label","prop","value","content","textarea","placeholder","index","ref","setFocus"],emits:["deleteBlock","updateBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);e.ref(0);function d(a){let l=a.target.value.split(/\n+/);if(l.length>1){n.prop[n.content]=l[0],e.nextTick(()=>{c()});let u=l.slice(1).map(f=>({type:"Textarea",content:f}));r("addBlock","Textarea","",n.index,{blocks:u,ref:t})}else a.target.value.trim()===""&&a.target.value.includes(`
+
+`)&&(console.log("We are adding new block:"+n.index+newBlocks+t),r("addBlock","Textarea","",n.index,{blocks:newBlocks,ref:t})),c()}function i(a){(a.keyCode===8||a.keyCode===46)&&n.prop[n.content].trim()===""&&r("deleteBlock",n.prop)}function s(){e.nextTick(()=>{t.value.focus(),r("updateBlock",n.prop,{setFocus:!1})})}function c(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),e.onMounted(()=>{n.setFocus&&e.nextTick(()=>{s()}),c()}),e.watch(()=>n.prop[n.content],a=>{}),(a,l)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":l[0]||(l[0]=u=>o.prop[o.content]=u),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:l[1]||(l[1]=u=>r("focus",t.value)),onKeyup:i,ref_key:"textarea",ref:t,class:"h3 text-area mn-thin"},`    
+    `,40,V),[[e.vModelText,o.prop[o.content]]])]))}},T=["placeholder"],U={__name:"Caption",props:["obj","label","prop","value","content","textarea","placeholder","index","ref"],emits:["deleteBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);function d(s){const c=/^\s*[-*]\s+(.*)/;let l=s.target.value.split(/\n+/).map(u=>{const f=c.exec(u);return f?f[1]:null}).filter(u=>u!==null);l.length>0?(n.prop[n.content]=l,i()):s.target.value.trim()===""&&(n.prop[n.content]=[],i())}function i(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{i()}),e.onMounted(()=>{i()}),e.watch(()=>n.prop[n.content],s=>{(!s||s.length===0)&&r("deleteBlock",n.prop)}),(s,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":c[0]||(c[0]=a=>o.prop[o.content]=a),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:c[1]||(c[1]=a=>r("focus",t.value)),ref_key:"textarea",ref:t,class:"br-l br-solid br-main pd-l-small text-area mn-small"},`    
+  `,40,T),[[e.vModelText,o.prop[o.content]]])]))}},D=["placeholder"],F={__name:"Bullets",props:["obj","label","prop","value","content","textarea","placeholder","index","ref"],emits:["deleteBlock","addBlock","focus"],setup(o,{emit:r}){const n=o;e.ref(n);const t=e.ref(null);function d(s){const c=/^\s*[-*]\s+(.*)/;let l=s.target.value.split(/\n+/).map(u=>{const f=c.exec(u);return f?f[1]:null}).filter(u=>u!==null);l.length>0?(n.prop[n.content]=l,i()):s.target.value.trim()===""&&(n.prop[n.content]=[],i())}function i(){t.value.style.height="1rem",t.value.style.height=t.value.scrollHeight+"px"}return e.onUpdated(()=>{i()}),e.onMounted(()=>{i()}),e.watch(()=>n.prop[n.content],s=>{(!s||s.length===0)&&r("deleteBlock",n.prop)}),(s,c)=>(e.openBlock(),e.createElementBlock("div",null,[e.createTextVNode(e.toDisplayString(o.prop[o.content])+" ",1),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":c[0]||(c[0]=a=>o.prop[o.content]=a),placeholder:o.placeholder?o.placeholder:"Enter text",onInput:d,onFocus:c[1]||(c[1]=a=>r("focus",t.value)),ref_key:"textarea",ref:t,class:"text-area mn-small"},`    
+  `,40,D),[[e.vModelText,o.prop[o.content]]])]))}},I=["src"],M={key:1,class:"t-transp pd-extra"},L={__name:"ImageUpload",props:["label","value","prop"],emits:["input","updateBlock"],setup(o,{emit:r}){const n=o,t=e.ref(null),d=e.ref(null);function i(){d.value.click()}async function s(a){let l=a.target.files[0];console.log(l);let u=new FormData,f="unsorted";u.append("file",l),console.log(u.has("file"));try{let h=await B.axios.create({baseURL:process.env.API_URL,withCredentials:!0}).post(`/api/upload/file?folderName=${encodeURIComponent(f)}`,u,{headers:{"Content-Type":"multipart/form-data"}});t.value=h.data.filepath,console.log(t.value),r("input",t.value),r("updateBlock",n.prop,{content:t.value})}catch(g){console.error(g)}}function c(a){a.preventDefault(),s({target:{files:a.dataTransfer.files}})}return(a,l)=>(e.openBlock(),e.createElementBlock("div",{onClick:i,onDrop:c,onDragover:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),class:"w-100 radius-big bg-white image-upload-area flex-v-center flex-h-center flex t-black mn-small"},[o.prop.content?(e.openBlock(),e.createElementBlock("img",{key:0,src:(a.FILE_SERVER_URL||"")+o.prop.content,alt:"Uploaded image",class:"w-100 h-30r object-fit-contain"},null,8,I)):(e.openBlock(),e.createElementBlock("span",M,"Click or drag-and-drop your image")),e.createElementVNode("input",{type:"file",ref_key:"fileInput",ref:d,onChange:s,style:{display:"none"}},null,544)],32))}},R=["onMouseover"],S={key:0,class:"z-index-5 radius-thin mn-small relative left-0 mt-2 w-max bg-white shadow-lg rounded"},A=["onClick"],H=["onClick"],z=["onClick"],j={__name:"Constructor",props:["content"],emits:["update"],setup(o,{emit:r}){const n=o;let t=e.ref(null);e.ref(null),t.value={content:n.content};const d={Textarea:y,H2:N,Bullets:F,Caption:U,ImageUpload:L};function i(h="Textarea",k="",p,m){console.log("We are adding new block (functuin HandleAddBlock):"+h+k+p+m);let v={order:t.value.content.length+1,type:h,style:"",class:"",content:k,blocks:[],setFocus:!0};if(m&&m.blocks&&Array.isArray(m.blocks)){let x=m.blocks.map(E=>({...v,content:E.content})),b=[(m.index||p)+1,0].concat(x);t.value.content.splice.apply(t.value.content,b);const w=x[x.length-1];console.log("New block is"+w)}else p!==void 0?(t.value.content.splice(p+1,0,v),console.log("Latest block is"+v)):(console.log("Another block is"+v),t.value.content.push(v));a.value=null,r("update",t.value.content)}function s(h,k){const p=t.value.content.findIndex(m=>m===h);p!==-1&&(t.value.content[p]={...t.value.content[p],...k}),r("update",t.value.content)}function c(h){let k=t.value.content.findIndex(p=>p===h);k!==-1&&t.value.content.splice(k,1),t.value.content[k-1].setFocus=!0,r("update",t.value.content)}const a=e.ref(null),l=e.ref(!1),u=e.ref(!1);function f(){l.value=!0}function g(){l.value=!1}return e.watchEffect(()=>{t.value&&t.value.content.length===0&&i("Textarea",""),r("update",t.value.content)}),(h,k)=>(e.openBlock(),e.createElementBlock("section",null,[e.unref(t).content?(e.openBlock(),e.createBlock(e.unref($.VueDraggableNext),{key:0,class:"w-full",list:e.unref(t).content,onStart:f,onEnd:g},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(t).content,(p,m)=>(e.openBlock(),e.createElementBlock("div",{key:m,class:"pos-relative"},[e.createElementVNode("div",{onMouseover:v=>(a.value=m,u.value=!1),class:"pos-relative w-full h-full"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(d[p.type]),{index:m,component:p,prop:p,class:e.normalizeClass(p.class),setFocus:p.setFocus,content:"content",onDeleteBlock:c,onAddBlock:i,onUpdateBlock:s},null,40,["index","component","prop","class","setFocus"]))],40,R),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[a.value===m?(e.openBlock(),e.createElementBlock("div",{key:0,class:"pos-absolute pos-r-100 pos-t-0 z-index-4 i-semi",onMousedown:k[1]||(k[1]=e.withModifiers(v=>l.value=!0,["prevent"]))},[e.createElementVNode("button",{onClick:k[0]||(k[0]=v=>u.value=!u.value),class:"mn-small w-100 i-semi bg-white radius-thin"},e.toDisplayString(p.content?"...":"+"),1),u.value?(e.openBlock(),e.createElementBlock("div",S,[e.createElementVNode("button",{onClick:v=>c(p),class:"block w-max text-left px-4 py-2 hover:bg-gray-200"},"Удалить",8,A),e.createElementVNode("button",{onClick:v=>i("ImageUpload","",m),class:"block w-max text-left px-4 py-2 hover:bg-gray-200"},"Добавить изображение",8,H),e.createElementVNode("button",{onClick:v=>i("H2","",m),class:"block w-max text-left px-4 py-2 hover:bg-gray-200"},"Добавить заголовок",8,z)])):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0)]),_:2},1024)]))),128))]),_:1},8,["list"])):e.createCommentVNode("",!0)]))}},q={class:"mn-small"},K=e.createElementVNode("p",{class:"t-semi uppercase"},"Please log in to leave a comment.",-1),P=[K],W={key:1,class:"mn-small"},G=["onSubmit"],J=e.createElementVNode("button",{type:"submit",class:"mn-l-auto bg-main button"},"Send",-1),O={class:"pd-t-zero"},Q={class:"p-big"},X={__name:"Comments",props:["target","owner","type"],setup(o){const r=o,n=B.axios.create({baseURL:process.env.API_URL}),t=e.ref([]),d=e.ref(""),i=async()=>{const{data:c}=await n.get(`/comments/read?type=${r.type}&target=${r.target}`);t.value=c},s=async()=>{if(d.value)try{const c=await n.post("/comments/create",{target:r.target,user:r.owner,type:r.type,content:d.value});c.data.owner=r.owner,t.value.push(c.data),d.value=""}catch(c){console.error(c)}};return i(),(c,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",null,[e.createElementVNode("h3",q,e.toDisplayString(t.value.length)+" comments",1),o.owner?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,onClick:a[0]||(a[0]=l=>c.$router.push({name:"Sign In"})),class:"cursor-pointer mn-small section bg-black t-white flex-center flex radius-big"},P)),o.owner?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("form",{onSubmit:e.withModifiers(s,["prevent"]),class:"bg-grey radius-big pd-medium"},[e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":a[1]||(a[1]=l=>d.value=l),placeholder:"Enter your comment",class:"pd-small p-big w-100 radius-small mn-r-small"},null,512),[[e.vModelText,d.value]]),J],40,G)])):e.createCommentVNode("",!0)]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.value,l=>(e.openBlock(),e.createElementBlock("div",{key:l._id,class:"comment mn-small radius-big pd-medium bg-grey"},[e.createVNode(C._sfc_main,{class:"mn-medium",owner:{target:l.user},creator:{target:l.user},date:l.createdAt},null,8,["owner","creator","date"]),e.createElementVNode("div",O,[e.createElementVNode("p",Q,e.toDisplayString(l.content),1)])]))),128))]))}},Y={class:"w-100 bg-white radius-big image-upload-area flex-v-center flex-h-center flex t-black mn-small"},Z=["src"],ee={__name:"Image",props:["label","value","prop"],setup(o){return e.ref(null),(r,n)=>(e.openBlock(),e.createElementBlock("div",Y,[o.prop.content?(e.openBlock(),e.createElementBlock("img",{key:0,src:(r.FILE_SERVER_URL||"")+o.prop.content,alt:"Uploaded image",class:"w-100 h-30r object-fit-contain"},null,8,Z)):e.createCommentVNode("",!0)]))}};exports._sfc_main=y;exports._sfc_main$1=j;exports._sfc_main$2=X;exports._sfc_main$3=ee;