@ozdao/prometheus-framework 0.1.16 → 0.1.18

package/dist/Gallery-1f82841a.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-4e469a71.mjs";
+import { V as ce } from "./vue-draggable-next.esm-bundler-ff6e3f52.mjs";
+import { _ as de } from "./UploadImageMultiple-d2d48f39.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
+};