@ozdao/prometheus-framework 0.2.112 → 0.2.114

package/dist/prometheus-framework/src/modules/gallery/components/sections/BackofficeGallery.vue.js

@@ -1,212 +1,177 @@
-import { ref as n, computed as O, onMounted as T, openBlock as a, createElementBlock as o, createElementVNode as l, createCommentVNode as f, Fragment as P, renderList as M, createVNode as c, Transition as w, withCtx as b, toDisplayString as x, withDirectives as q, vShow as A, createTextVNode as H, pushScopeId as J, popScopeId as K } from "vue";
-import Q from "../../../../components/Field/Field.vue2.js";
-import W from "../../../../components/Button/Button.vue2.js";
-import X from "../../../../components/Select/Select.vue2.js";
-import { state as G, actions as d } from "../../store/gallery.js";
-import Y from "../../../../components/EditImages/EditImages.vue.js";
-import "./BackofficeGallery.vue2.js";
-import Z from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const u = (m) => (J("data-v-99e559ad"), m = m(), K(), m), ee = { class: "pos-relative w-100" }, le = { class: "mn-b-semi flex-v-center flex-nowrap flex" }, te = /* @__PURE__ */ u(() => /* @__PURE__ */ l("h1", { class: "mn-r-small" }, "Manage Gallery", -1)), se = ["data-id"], ae = ["src", "onClick"], oe = {
-  key: 1,
-  class: "radius-small bg-white"
-}, ie = ["src", "onClick"], ne = { class: "t-black p-small mn-b-thin" }, ce = /* @__PURE__ */ u(() => /* @__PURE__ */ l("span", { class: "uppercase t-transp" }, "Size", -1)), re = /* @__PURE__ */ u(() => /* @__PURE__ */ l("br", null, null, -1)), de = { class: "pd-2px radius-big d-inline-block bg-grey" }, ue = { class: "t-black p-small mn-b-small uppe" }, me = /* @__PURE__ */ u(() => /* @__PURE__ */ l("span", { class: "uppercase t-transp" }, "Categories", -1)), pe = /* @__PURE__ */ u(() => /* @__PURE__ */ l("br", null, null, -1)), ve = { class: "pd-2px radius-big d-inline-block bg-grey t-semi" }, ge = { class: "flex-nowrap flex" }, he = ["onClick"], _e = { class: "modal pd-thin" }, fe = { class: "modal-content radius-big" }, be = { class: "" }, ye = ["src"], ke = {
-  key: 0,
-  class: "flex-v-center flex m modal pd-big"
-}, we = { class: "modal-content radius-small pd-medium bg-white" }, xe = ["src"], Ce = ["src"], U = 10, Se = {
+import { ref as l, onMounted as A, openBlock as i, createElementBlock as c, createVNode as r, unref as d, withCtx as h, Fragment as E, renderList as I, createElementVNode as P, createBlock as N, createCommentVNode as w, createTextVNode as V, toDisplayString as B } from "vue";
+import { useRoute as F } from "vue-router";
+import "../../../../components/Field/Field.vue.js";
+import O from "../../../../components/Button/Button.vue2.js";
+import "../../../../components/Select/Select.vue.js";
+import R from "../../../../components/Chips/Chips.vue.js";
+import "../../../../components/SelectMulti/SelectMulti.vue2.js";
+import D from "../../../../components/Popup/Popup.vue2.js";
+import L from "../../../../components/Feed/Feed.vue.js";
+import { state as k } from "../../../auth/store/auth.js";
+import "../../../organizations/store/organizations.js";
+import n from "../../store/gallery.js";
+import T from "../../../globals/components/blocks/CardHeader.vue.js";
+import j from "../../../globals/components/sections/SectionPageTitle.vue.js";
+import G from "../../../../components/EditImages/EditImages.vue.js";
+import M from "../../../../components/FieldTags/BlockTags.vue.js";
+const S = { class: "cols-1 gap-thin pd-thin" }, z = ["src"], q = { class: "pd-small" }, H = ["src"], ce = {
   __name: "BackofficeGallery",
-  setup(m) {
-    const p = n(!0), C = n(null);
-    let y = 1, S = n(null), z = n(!1);
-    const v = n([]), $ = (s) => {
-      v.value = s;
-    }, j = O(() => E.value === "all" ? G.gallery : G.gallery.filter((s) => s.categories.includes(E.value))), B = async () => {
-      z.value = !0, await d.fetchGallery(y, U), z.value = !1;
-    }, g = n(null), e = n({
-      categories: "",
-      size: "",
-      image: !1
-    }), h = n(null), k = (s) => {
-      console.log(p.value), p.value ? V(s) : (g.value = "modal", e.value.image = s, I());
-    }, V = (s) => {
-      g.value = "edit-modal", e.value = s || {
-        categories: "",
-        size: "",
-        image: null
-      }, I();
-    }, r = () => {
-      e.value = {
-        categories: "",
-        size: "",
-        image: !1
-      }, h.value = null, N();
-    }, I = () => {
-      document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden";
-    }, N = () => {
-      document.body.style.overflow = "", document.documentElement.style.overflow = "";
-    }, R = [
-      { 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 (s) => {
-      await d.deletePhoto(s);
-    }, F = async () => {
-      await d.updatePhoto(e.value), r();
-    }, L = async (s) => {
-      if (v.length < 1 || !e.value.categories || !e.value.size) {
-        console.error("All fields are required.");
+  setup(J) {
+    const v = F(), u = l("all"), p = l(!1);
+    function _(a) {
+      p.value = !0, b.value = a;
+    }
+    function g() {
+      p.value = !1, b.value = null;
+    }
+    const b = l(null);
+    l("all");
+    const s = l({
+      tags: null,
+      image: null
+    }), m = l([]), U = (a) => {
+      m.value = a;
+    };
+    l(null);
+    const f = l([]), $ = async (a) => {
+      await n.delete(a);
+    }, C = async () => {
+      await n.update(s.value), g();
+    }, x = async () => {
+      if (m.length < 1) {
+        alert("Upload at least 1 image");
         return;
       }
-      await d.createPhoto({
-        images: v.value,
-        size: e.value.size,
-        categories: typeof e.value.categories == "string" ? e.value.categories.split(",").map((i) => i.trim()) : e.value.categories
-      }), r();
+      let a = await n.create({
+        images: m.value,
+        tags: s.value.tags,
+        owner: {
+          type: "Organization",
+          target: v.params._id
+        },
+        creator: {
+          type: "User",
+          target: k.user._id
+        }
+      });
+      for (let e of a)
+        n.addItem(e, f.value);
     };
-    let E = n("all");
-    return T(async () => {
-      await d.fetchGallery(y, U), typeof window < "u" && new IntersectionObserver((i) => {
-        i.some((t) => t.isIntersecting) && (y += 1, B());
-      }).observe(S.value);
-    }), (s, i) => (a(), o("div", ee, [
-      l("div", le, [
-        te,
-        p.value ? (a(), o("button", {
-          key: 0,
-          onClick: i[0] || (i[0] = (t) => k(null)),
-          class: "t-white t-black bg-second i-big radius-extra"
-        }, "+")) : f("", !0)
-      ]),
-      l("div", {
-        ref_key: "grid",
-        ref: C,
-        class: "cols-4 gap-thin"
-      }, [
-        (a(!0), o(P, null, M(j.value, (t, ze) => (a(), o("div", {
-          key: t.id,
-          "data-id": t.id
-        }, [
-          c(w, {
-            name: "scaleIn",
-            mode: "in-out"
-          }, {
-            default: b(() => [
-              !p.value && C.value ? (a(), o("img", {
-                key: 0,
-                src: "https://thecommunephuket.com/photos/" + t.cover,
-                class: "w-100 h-100 o-hidden radius-medium object-fit-cover",
-                onClick: (_) => k(t.image)
-              }, null, 8, ae)) : (a(), o("div", oe, [
-                l("img", {
-                  src: "https://thecommunephuket.com/photos/" + t.cover,
-                  class: "w-100 radius-small mn-b-small h-10r object-fit-cover",
-                  onClick: (_) => k(t)
-                }, null, 8, ie),
-                l("p", ne, [
-                  ce,
-                  re,
-                  l("span", de, x(t.size.name), 1)
-                ]),
-                l("p", ue, [
-                  me,
-                  pe,
-                  (a(!0), o(P, null, M(t.categories, (_) => (a(), o("span", ve, x(_), 1))), 256))
-                ]),
-                l("div", ge, [
-                  l("button", {
-                    class: "button-small w-100 button",
-                    onClick: (_) => D(t._id)
-                  }, "Delete", 8, he)
-                ])
-              ]))
-            ]),
-            _: 2
-          }, 1024)
-        ], 8, se))), 128)),
-        l("div", {
-          ref_key: "sentinel",
-          ref: S,
-          class: "sentinel"
-        }, null, 512),
-        c(w, { name: "modal" }, {
-          default: b(() => [
-            q(l("div", _e, [
-              l("div", fe, [
-                l("div", be, [
-                  l("span", {
-                    class: "close",
-                    onClick: r
-                  }, "×"),
-                  l("img", {
-                    src: (s.FILE_SERVER_URL || "") + e.value.image
-                  }, null, 8, ye)
-                ])
-              ])
-            ], 512), [
-              [A, e.value.image !== !1 && g.value === "modal"]
-            ])
-          ]),
-          _: 1
-        }),
-        c(w, { name: "modal" }, {
-          default: b(() => [
-            e.value.image !== !1 && g.value === "edit-modal" ? (a(), o("div", ke, [
-              l("div", we, [
-                l("span", {
-                  class: "close",
-                  onClick: r
-                }, "×"),
-                typeof h.value == "string" ? (a(), o("img", {
+    return A(async () => {
+    }), (a, e) => (i(), c("div", S, [
+      r(j, {
+        title: "Manage Gallery",
+        "onUpdate:tabs_current": e[0] || (e[0] = (t) => u.value = t),
+        tabs_current: u.value,
+        tabs: [
+          { name: "All", value: "all" },
+          { name: "Featured", value: "featured" },
+          { name: "Published", value: "published" },
+          { name: "Draft", value: "draft" },
+          { name: "Archived", value: "archived" }
+        ],
+        actions: [
+          { method: () => _(null), label: "Add Photo" }
+        ],
+        class: "mn-b-small bg-light bg-light radius-big"
+      }, null, 8, ["tabs_current", "actions"]),
+      r(L, {
+        items: f.value,
+        "onUpdate:items": e[2] || (e[2] = (t) => f.value = t),
+        sort: d(n).state.sort,
+        "onUpdate:sort": e[3] || (e[3] = (t) => d(n).state.sort = t),
+        search: !0,
+        states: {
+          empty: {
+            title: "No Photos Found",
+            description: "Currently, there are no photos in gallery."
+          }
+        },
+        store: {
+          read: (t) => d(n).read(t)
+        },
+        options: {
+          limit: 15,
+          owner: d(v).params._id,
+          ...u.value !== "all" && { status: u.value }
+        },
+        class: "cols-3 gap-thin"
+      }, {
+        default: h(({
+          items: t
+        }) => [
+          (i(!0), c(E, null, I(t, (o) => {
+            var y;
+            return i(), c("div", {
+              key: o._id,
+              class: "bg-light radius-small flex-column pos-relative flex-wrap"
+            }, [
+              r(T, {
+                entity: o,
+                entityType: "photo",
+                user: k.user._id,
+                owner: o.creator,
+                creator: o.creator,
+                date: o.createdAt,
+                actions: [
+                  { method: () => $(o._id), label: "Delete" }
+                ],
+                class: "pd-small mn-b-small"
+              }, null, 8, ["entity", "user", "owner", "creator", "date", "actions"]),
+              P("img", {
+                src: (a.FILE_SERVER_URL || "") + o.cover,
+                class: "w-100 h-20r object-fit-contain bg-black",
+                onClick: e[1] || (e[1] = (K) => _(a.photo))
+              }, null, 8, z),
+              P("div", q, [
+                ((y = o.tags) == null ? void 0 : y.length) > 0 ? (i(), N(R, {
                   key: 0,
-                  src: h.value,
-                  class: "radius-small w-100 mn-b-small h-20r object-fit-cover"
-                }, null, 8, xe)) : f("", !0),
-                typeof h.value == "object" && e.value.image !== null ? (a(), o("img", {
-                  key: 1,
-                  class: "radius-small w-100 mn-b-small h-20r object-fit-cover",
-                  src: "/photos/" + e.value.cover
-                }, null, 8, Ce)) : f("", !0),
-                c(X, {
-                  options: R,
-                  label: "Size",
-                  select: e.value.size,
-                  "onUpdate:select": i[1] || (i[1] = (t) => e.value.size = t),
-                  placeholder: "Select Size",
-                  class: "bg-grey pd-thin radius-small mn-b-thin t-black"
-                }, null, 8, ["select"]),
-                c(Q, {
-                  field: e.value.categories,
-                  "onUpdate:field": i[2] || (i[2] = (t) => e.value.categories = t),
-                  type: "text",
-                  label: "Categories",
-                  placeholder: "Enter categories for image (comma separated)",
-                  class: "bg-grey pd-thin radius-small mn-b-medium t-black"
-                }, null, 8, ["field"]),
-                c(Y, {
-                  images: v.value,
-                  "onUpdate:images": $,
-                  uploadPath: "photos",
-                  class: "mn-b-semi"
-                }, null, 8, ["images"]),
-                c(W, {
-                  submit: e.value._id ? F : L,
-                  callback: r,
-                  class: "mn-b-thin"
-                }, {
-                  default: b(() => [
-                    H(x(e.value._id ? "Update" : "Create"), 1)
-                  ]),
-                  _: 1
-                }, 8, ["submit"])
+                  chips: o.tags
+                }, null, 8, ["chips"])) : w("", !0)
               ])
-            ])) : f("", !0)
-          ]),
-          _: 1
-        })
-      ], 512)
+            ]);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["items", "sort", "store", "options"]),
+      r(D, {
+        title: "Add photo",
+        onClosePopup: g,
+        isPopupOpen: p.value,
+        class: "bg-white w-max-30r radius-big pd-big"
+      }, {
+        default: h(() => [
+          s.value.cover ? (i(), c("img", {
+            key: 0,
+            src: s.value.cover,
+            class: "radius-small w-100 mn-b-small h-20r object-fit-cover"
+          }, null, 8, H)) : w("", !0),
+          r(G, {
+            images: m.value,
+            uploadPath: "/photos",
+            "onUpdate:images": U,
+            class: "mn-b-semi bg-light radius-medium"
+          }, null, 8, ["images"]),
+          r(M, {
+            onTagsChanged: e[4] || (e[4] = (t) => s.value.tags = t),
+            tags: s.value.tags
+          }, null, 8, ["tags"]),
+          r(O, {
+            submit: s.value._id ? C : x,
+            callback: g,
+            class: "mn-b-thin bg-main w-100"
+          }, {
+            default: h(() => [
+              V(B(s.value._id ? "Update" : "Publish"), 1)
+            ]),
+            _: 1
+          }, 8, ["submit"])
+        ]),
+        _: 1
+      }, 8, ["isPopupOpen"])
     ]));
   }
-}, Be = /* @__PURE__ */ Z(Se, [["__scopeId", "data-v-99e559ad"]]);
+};
 export {
-  Be as default
+  ce as default
 };

package/dist/prometheus-framework/src/modules/gallery/components/sections/GalleryWithCategories.vue.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),x=require("vue-router"),z=require("../../../../components/Field/Field.vue2.cjs"),S=require("../../../../components/Button/Button.vue2.cjs"),q=require("../../../../components/Select/Select.vue2.cjs"),M=require("../../../../components/Upload/Upload.vue.cjs"),s=require("../../store/gallery.cjs");require("./GalleryWithCategories.vue2.cjs");const F=require("../../../../../../_virtual/_plugin-vue_export-helper.cjs"),I={class:"pd-medium flex-v-center gap-big flex-nowrap flex pd-t-thin pd-b-thin o-scroll"},P=["onClick"],j=["data-id"],G=["src","onClick"],R={class:"modal pd-thin"},T={class:"modal-content radius-big"},U={class:""},D=["src"],L={key:0,class:"flex-v-center flex m modal pd-big"},O={class:"modal-content radius-small pd-medium bg-white"},$=["src"],A=["src"],W=!1,f=10,H={__name:"GalleryWithCategories",setup(K){x.useRoute();const m=e.ref(null),h=["all","place","drinks","people","events"];let d=1,v=e.ref(null),g=e.ref(!1);const _=e.computed(()=>r.value==="all"?s.state.gallery:s.state.gallery.filter(a=>a.categories.includes(r.value))),b=async()=>{g.value=!0,await s.actions.fetchGallery(d,f),g.value=!1},c=e.ref(null),t=e.ref({categories:"",size:"",image:!1}),i=e.ref(null),k=a=>{W.value?y(a):(c.value="modal",t.value.image=a,p())},y=a=>{c.value="edit-modal",t.value=a||{categories:"",size:"",image:null},p()},n=()=>{t.value={categories:"",size:"",image:!1},i.value=null,w()},p=()=>{document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"},w=()=>{document.body.style.overflow="",document.documentElement.style.overflow=""},V=[{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"}],C=async()=>{await s.actions.updatePhoto(t.value),n()},E=a=>{const o=a.files;if(t.value.image=o,o&&o.length>0){const l=new FileReader;l.onload=u=>{i.value=u.target.result},l.readAsDataURL(o[0])}},N=async a=>{if(!t.value.image||!t.value.categories||!t.value.size){console.error("All fields are required.");return}await s.actions.createPhoto({...t.value,size:t.value.size,categories:typeof t.value.categories=="string"?t.value.categories.split(",").map(o=>o.trim()):t.value.categories}),n()};let r=e.ref("all");const B=a=>{r.value=a};return e.onMounted(async()=>{await s.actions.fetchGallery(d,f),typeof window<"u"&&new IntersectionObserver(o=>{o.some(l=>l.isIntersecting)&&(d+=1,b())}).observe(v.value)}),(a,o)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",I,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(h,l=>e.createElementVNode("a",{key:l,onClick:u=>B(l),class:e.normalizeClass(["h3 uppercase",{"t-transp":e.unref(r)!==l,"pd-thin bg-main radius-small":e.unref(r)===l}])},e.toDisplayString(a.$t("gallery.categories."+l)),11,P)),64)),e.createCommentVNode("",!0)]),e.createElementVNode("div",{ref_key:"grid",ref:m,class:"pd-medium cols-4 gap-thin"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(_.value,(l,u)=>(e.openBlock(),e.createElementBlock("div",{key:l.id,"data-id":l.id},[e.createVNode(e.Transition,{name:"scaleIn",mode:"in-out"},{default:e.withCtx(()=>[m.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:"https://thecommunephuket.com/photos/"+l.cover,class:"w-100 h-100 o-hidden radius-big object-fit-cover",onClick:Q=>k(l.image)},null,8,G)):e.createCommentVNode("",!0)]),_:2},1024)],8,j))),128)),e.createElementVNode("div",{ref_key:"sentinel",ref:v,class:"sentinel"},null,512),e.createVNode(e.Transition,{name:"modal"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",R,[e.createElementVNode("div",T,[e.createElementVNode("div",U,[e.createElementVNode("span",{class:"close",onClick:n},"×"),e.createElementVNode("img",{src:"https://thecommunephuket.com/photos/"+t.value.image},null,8,D)])])],512),[[e.vShow,t.value.image!==!1&&c.value==="modal"]])]),_:1}),e.createVNode(e.Transition,{name:"modal"},{default:e.withCtx(()=>[t.value.image!==!1&&c.value==="edit-modal"?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",O,[e.createElementVNode("span",{class:"close",onClick:n},"×"),typeof i.value=="string"?(e.openBlock(),e.createElementBlock("img",{key:0,src:i.value,class:"radius-small w-100 mn-b-small h-20r object-fit-cover"},null,8,$)):e.createCommentVNode("",!0),typeof i.value=="object"&&t.value.image!==null?(e.openBlock(),e.createElementBlock("img",{key:1,class:"radius-small w-100 mn-b-small h-20r object-fit-cover",src:"/photos/"+t.value.cover},null,8,A)):e.createCommentVNode("",!0),t.value._id?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(M.default,{key:2,id:"photo",name:"photo",type:"file",class:"t-black bg-grey pd-thin radius-small mn-b-thin",onFileChange:E,multiple:"true"})),e.createVNode(q.default,{options:V,label:"Size",select:t.value.size,"onUpdate:select":o[1]||(o[1]=l=>t.value.size=l),placeholder:"Select Size",class:"bg-grey pd-thin radius-small mn-b-thin t-black"},null,8,["select"]),e.createVNode(z.default,{field:t.value.categories,"onUpdate:field":o[2]||(o[2]=l=>t.value.categories=l),type:"text",label:"Categories",placeholder:"Enter categories for image (comma separated)",class:"bg-grey pd-thin radius-small mn-b-medium t-black"},null,8,["field"]),e.createVNode(S.default,{submit:t.value._id?C:N,callback:n,class:"mn-b-thin"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.value._id?"Update":"Create"),1)]),_:1},8,["submit"])])])):e.createCommentVNode("",!0)]),_:1})],512)]))}},J=F.default(H,[["__scopeId","data-v-4c5bced8"]]);exports.default=J;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("vue-router");require("../../../../components/Field/Field.vue.cjs");require("../../../../components/Loader/Loader.vue.cjs");require("../../../../components/Button/Button.vue.cjs");require("../../../../components/Select/Select.vue.cjs");require("../../../../components/Upload/Upload.vue2.cjs");require("../../store/gallery.cjs");const N={class:"pd-medium flex-v-center gap-big flex-nowrap flex pd-t-thin pd-b-thin o-scroll"},V=["onClick"],C=["data-id"],B=["src","onClick"],q={class:"modal pd-thin"},M={class:"modal-content radius-big"},S={class:""},x=["src"],I=!1,m=10,z={__name:"GalleryWithCategories",setup(G){w.useRoute();const r=e.ref(null),v=["all","place","drinks","people","events"];let s=1,i=e.ref(null),c=e.ref(!1);const f=e.computed(()=>n.value==="all"?state.gallery:state.gallery.filter(l=>l.categories.includes(n.value))),p=async()=>{c.value=!0,await actions.fetchGallery(s,m),c.value=!1},a=e.ref(null),o=e.ref({categories:"",size:"",image:!1}),h=e.ref(null),g=l=>{I.value?_(l):(a.value="modal",o.value.image=l,d())},_=l=>{a.value="edit-modal",o.value=l||{categories:"",size:"",image:null},d()},k=()=>{o.value={categories:"",size:"",image:!1},h.value=null,y()},d=()=>{document.body.style.overflow="hidden",document.documentElement.style.overflow="hidden"},y=()=>{document.body.style.overflow="",document.documentElement.style.overflow=""};let n=e.ref("all");const E=l=>{n.value=l};return e.onMounted(async()=>{await actions.fetchGallery(s,m),typeof window<"u"&&new IntersectionObserver(u=>{u.some(t=>t.isIntersecting)&&(s+=1,p())}).observe(i.value)}),(l,u)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",N,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(v,t=>e.createElementVNode("a",{key:t,onClick:b=>E(t),class:e.normalizeClass(["h3 uppercase",{"t-transp":e.unref(n)!==t,"pd-thin bg-main radius-small":e.unref(n)===t}])},e.toDisplayString(l.$t("gallery.categories."+t)),11,V)),64)),e.createCommentVNode("",!0)]),e.createElementVNode("div",{ref_key:"grid",ref:r,class:"pd-medium cols-4 gap-thin"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(t,b)=>(e.openBlock(),e.createElementBlock("div",{key:t.id,"data-id":t.id},[e.createVNode(e.Transition,{name:"scaleIn",mode:"in-out"},{default:e.withCtx(()=>[r.value?(e.openBlock(),e.createElementBlock("img",{key:0,src:"https://thecommunephuket.com/photos/"+t.cover,class:"w-100 h-100 o-hidden radius-big object-fit-cover",onClick:$=>g(t.image)},null,8,B)):e.createCommentVNode("",!0)]),_:2},1024)],8,C))),128)),e.createElementVNode("div",{ref_key:"sentinel",ref:i,class:"sentinel"},null,512),e.withDirectives(e.createElementVNode("div",q,[e.createElementVNode("div",M,[e.createElementVNode("div",S,[e.createElementVNode("span",{class:"close",onClick:k},"×"),e.createElementVNode("img",{src:"https://thecommunephuket.com/photos/"+o.value.image},null,8,x)])])],512),[[e.vShow,o.value.image!==!1&&a.value==="modal"]])],512)]))}};exports.default=z;