@oneclick.dev/cms-core-modules 0.0.52 → 0.0.54

package/dist/Detail-CpfOQChd.mjs

@@ -0,0 +1,585 @@
+import { defineComponent as B, inject as G, resolveComponent as c, createBlock as S, openBlock as r, withCtx as l, createVNode as t, createElementVNode as s, createElementBlock as w, createCommentVNode as b, createTextVNode as d, unref as e, isRef as j, toDisplayString as y, withModifiers as Y, watch as Z, provide as R, computed as ee, ref as te, onMounted as le } from "vue";
+import { u as E, a as N, t as oe, o as q, s as M, f as se } from "./vee-validate-zod-IXkfh-6Q.mjs";
+import { X as ne, ImagePlus as ie, Tag as ae, ChevronRight as re, Trash as ce, Loader2 as W } from "lucide-vue-next";
+import { g as ue } from "./google-CvtuJwgk.mjs";
+import { useModulePermissions as de, useModuleRoute as pe, useConfirmation as me, useFirebaseIntegration as fe, useModuleBreadcrumbs as _e } from "@oneclick.dev/cms-kit";
+import { t as z } from "./index-RLz1QPrf.mjs";
+const xe = { class: "flex flex-col gap-4" }, ge = { class: "flex flex-col gap-2" }, be = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1"
+}, ve = { class: "flex flex-col gap-4" }, Ce = { class: "flex flex-col gap-2" }, we = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1"
+}, ye = { class: "flex flex-col gap-4" }, he = { class: "flex flex-col gap-2" }, Se = { class: "flex items-center gap-2 mb-2" }, ke = { class: "flex items-center gap-2" }, $e = ["src"], Me = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1"
+}, Ve = /* @__PURE__ */ B({
+  __name: "Main",
+  setup(U) {
+    const p = G("sources");
+    G("defaultSource");
+    const { errors: m } = E(), { value: v } = N("title"), { value: n } = N("description"), { value: f } = N("thumbnail"), k = (i) => {
+      f.value = i;
+    };
+    return (i, a) => {
+      const _ = c("Label"), V = c("Input"), T = c("Textarea"), I = c("Button"), C = c("MediaPickerDialog"), L = c("CardContent"), F = c("Card");
+      return r(), S(F, null, {
+        default: l(() => [
+          t(L, { class: "flex flex-col gap-4" }, {
+            default: l(() => [
+              s("div", xe, [
+                s("div", ge, [
+                  t(_, {
+                    for: "title",
+                    class: "text-sm mb-2"
+                  }, {
+                    default: l(() => [...a[5] || (a[5] = [
+                      d("Title", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(V, {
+                    type: "text",
+                    id: "title",
+                    placeholder: "Summer collection",
+                    modelValue: e(v),
+                    "onUpdate:modelValue": a[0] || (a[0] = ($) => j(v) ? v.value = $ : null)
+                  }, null, 8, ["modelValue"]),
+                  e(m).title ? (r(), w("p", be, y(e(m).title), 1)) : b("", !0)
+                ])
+              ]),
+              s("div", ve, [
+                s("div", Ce, [
+                  t(_, {
+                    for: "description",
+                    class: "text-sm mb-2"
+                  }, {
+                    default: l(() => [...a[6] || (a[6] = [
+                      d("Description", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(T, {
+                    id: "description",
+                    placeholder: "Fresh, vibrant, and bold. The perfect collection for the summer season.",
+                    modelValue: e(n),
+                    "onUpdate:modelValue": a[1] || (a[1] = ($) => j(n) ? n.value = $ : null)
+                  }, null, 8, ["modelValue"]),
+                  e(m).description ? (r(), w("p", we, y(e(m).description), 1)) : b("", !0)
+                ])
+              ]),
+              s("div", ye, [
+                s("div", he, [
+                  s("div", Se, [
+                    t(_, {
+                      for: "media",
+                      class: "text-sm"
+                    }, {
+                      default: l(() => [...a[7] || (a[7] = [
+                        d("Thumbnail", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    e(f) ? (r(), S(I, {
+                      key: 0,
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: a[2] || (a[2] = ($) => f.value = "")
+                    }, {
+                      default: l(() => [
+                        t(e(ne), { class: "size-4" })
+                      ]),
+                      _: 1
+                    })) : b("", !0)
+                  ]),
+                  s("div", ke, [
+                    t(C, {
+                      sources: e(p),
+                      maxFiles: 1,
+                      "initial-value": e(f) ? [e(f)] : [],
+                      onSubmit: a[4] || (a[4] = ($) => k($))
+                    }, {
+                      default: l(() => [
+                        s("button", {
+                          onClick: a[3] || (a[3] = Y(() => {
+                          }, ["stop"])),
+                          tabindex: "-1",
+                          class: "cursor-pointer block"
+                        }, [
+                          e(f) ? (r(), w("img", {
+                            key: 1,
+                            src: e(f),
+                            class: "size-42 rounded-md object-cover",
+                            draggable: "false"
+                          }, null, 8, $e)) : (r(), S(I, {
+                            key: 0,
+                            variant: "outline",
+                            class: "size-42 border-dashed cursor-pointer"
+                          }, {
+                            default: l(() => [
+                              t(e(ie))
+                            ]),
+                            _: 1
+                          }))
+                        ])
+                      ]),
+                      _: 1
+                    }, 8, ["sources", "initial-value"]),
+                    e(m).thumbnail ? (r(), w("p", Me, y(e(m).thumbnail), 1)) : b("", !0)
+                  ])
+                ])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Te = { class: "bg-white dark:bg-gray-50 border-4 dark:border-gray-600 p-4 rounded-lg mb-4" }, Ie = { class: "flex items-center gap-2 mb-2" }, Pe = ["src"], ze = { class: "text-[#1a0dab] text-lg" }, Ne = { class: "text-[#006621] text-[13px]" }, De = { class: "text-[#545454] text-[13px]" }, Ue = { class: "flex flex-col gap-4 mb-4" }, Fe = { class: "flex flex-col" }, je = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1"
+}, Be = { class: "flex flex-col gap-4 mb-4" }, Le = { class: "flex flex-col" }, Ee = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1"
+}, Oe = { class: "flex flex-col gap-4" }, Je = { class: "flex flex-col" }, Ae = {
+  key: 0,
+  class: "text-red-500 text-sm mt-1"
+}, Ge = {
+  key: 1,
+  class: "text-[#545454] text-[13px]"
+}, Re = {
+  key: 2,
+  class: "text-orange-500 text-[13px]"
+}, qe = /* @__PURE__ */ B({
+  __name: "SEO",
+  setup(U) {
+    const { errors: p } = E(), { value: m } = N("title"), { value: v } = N("slug"), { value: n } = N("seo");
+    function f(k) {
+      return k ? k.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^\w\s-]/g, "").trim().replace(/[-\s]+/g, "-") : "";
+    }
+    return Z(m, (k, i) => {
+      (!v.value || f(i) === v.value) && (v.value = f(k)), (!n.value.title || i === n.value.title) && (n.value.title = k);
+    }), (k, i) => {
+      const a = c("Label"), _ = c("Input"), V = c("Textarea"), T = c("CardContent"), I = c("Card");
+      return r(), S(I, null, {
+        default: l(() => [
+          t(T, null, {
+            default: l(() => [
+              i[7] || (i[7] = s("h3", { class: "text-lg font-semibold mb-4" }, "Search engine listing", -1)),
+              s("div", Te, [
+                s("div", Ie, [
+                  s("img", {
+                    src: e(ue),
+                    alt: "Google",
+                    class: "w-16 pointer-events-none",
+                    draggable: "false"
+                  }, null, 8, Pe),
+                  i[3] || (i[3] = s("span", { class: "text-[#4186f5] font-medium text-xs" }, "Preview", -1))
+                ]),
+                s("p", ze, y(e(n).title), 1),
+                s("p", Ne, y(e(v)), 1),
+                s("p", De, y(e(n).description?.slice(0, 155)) + y(e(n).description?.length > 155 ? " ..." : ""), 1)
+              ]),
+              s("div", Ue, [
+                s("div", Fe, [
+                  t(a, {
+                    for: "slug",
+                    class: "text-sm mb-2"
+                  }, {
+                    default: l(() => [...i[4] || (i[4] = [
+                      d("Slug", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(_, {
+                    id: "slug",
+                    placeholder: "t-shirt-with-red-heart",
+                    modelValue: e(v),
+                    "onUpdate:modelValue": i[0] || (i[0] = (C) => j(v) ? v.value = C : null)
+                  }, null, 8, ["modelValue"]),
+                  e(p).slug ? (r(), w("p", je, y(e(p).slug), 1)) : b("", !0)
+                ])
+              ]),
+              s("div", Be, [
+                s("div", Le, [
+                  t(a, {
+                    for: "meta-title",
+                    class: "text-sm mb-2"
+                  }, {
+                    default: l(() => [...i[5] || (i[5] = [
+                      d("Title", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(_, {
+                    id: "meta-title",
+                    placeholder: "T-shirt with red heart",
+                    modelValue: e(n).title,
+                    "onUpdate:modelValue": i[1] || (i[1] = (C) => e(n).title = C)
+                  }, null, 8, ["modelValue"]),
+                  e(p).seo?.title ? (r(), w("p", Ee, y(e(p).seo.title), 1)) : b("", !0)
+                ])
+              ]),
+              s("div", Oe, [
+                s("div", Je, [
+                  t(a, {
+                    for: "meta-description",
+                    class: "text-sm mb-2"
+                  }, {
+                    default: l(() => [...i[6] || (i[6] = [
+                      d("Description", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(V, {
+                    id: "meta-description",
+                    placeholder: "Lovely T-shirt featuring a red heart",
+                    modelValue: e(n).description,
+                    "onUpdate:modelValue": i[2] || (i[2] = (C) => e(n).description = C),
+                    class: "mb-1 resize-none"
+                  }, null, 8, ["modelValue"]),
+                  e(p).seo?.description ? (r(), w("p", Ae, y(e(p).seo.description), 1)) : e(n).description.length < 155 ? (r(), w("p", Ge, y(e(n).description.length) + " characters", 1)) : (r(), w("p", Re, "Please keep it under 155 characters"))
+                ])
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+}), We = { class: "flex items-center gap-2" }, Xe = {
+  key: 0,
+  class: "size-3 rounded-full bg-green-500"
+}, He = {
+  key: 1,
+  class: "size-3 rounded-full bg-blue-500"
+}, Ke = /* @__PURE__ */ B({
+  __name: "Status",
+  setup(U) {
+    const { errors: p } = E(), { value: m } = N("status");
+    return (v, n) => {
+      const f = c("SelectValue"), k = c("SelectTrigger"), i = c("SelectItem"), a = c("SelectGroup"), _ = c("SelectContent"), V = c("Select"), T = c("CardContent"), I = c("Card");
+      return r(), S(I, null, {
+        default: l(() => [
+          t(T, null, {
+            default: l(() => [
+              n[3] || (n[3] = s("p", { class: "text-md font-semibold mb-2" }, "Status", -1)),
+              t(V, {
+                modelValue: e(m),
+                "onUpdate:modelValue": n[0] || (n[0] = (C) => j(m) ? m.value = C : null),
+                class: "w-full"
+              }, {
+                default: l(() => [
+                  t(k, { class: "w-full" }, {
+                    default: l(() => [
+                      s("div", We, [
+                        e(m) === "published" ? (r(), w("span", Xe)) : e(m) === "draft" ? (r(), w("span", He)) : b("", !0),
+                        t(f, { placeholder: "Status" })
+                      ])
+                    ]),
+                    _: 1
+                  }),
+                  t(_, null, {
+                    default: l(() => [
+                      t(a, null, {
+                        default: l(() => [
+                          t(i, { value: "published" }, {
+                            default: l(() => [...n[1] || (n[1] = [
+                              s("span", { class: "size-3 rounded-full bg-green-500" }, null, -1),
+                              d(" Published ", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          t(i, { value: "draft" }, {
+                            default: l(() => [...n[2] || (n[2] = [
+                              s("span", { class: "size-3 rounded-full bg-blue-500" }, null, -1),
+                              d(" Draft ", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["modelValue"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Qe = { class: "relative @container" }, Ye = { class: "flex flex-row gap-4 justify-between max-w-5xl mx-auto mt-4 mb-6" }, Ze = { class: "flex items-center" }, et = { class: "text-lg font-semibold mx-2" }, tt = {
+  key: 0,
+  class: "bg-green-500 text-green-950 px-2 py-1 rounded-lg text-xs"
+}, lt = {
+  key: 1,
+  class: "bg-blue-500 text-blue-950 px-2 py-1 rounded-lg text-xs"
+}, ot = { class: "flex flex-col @3xl:flex-row gap-4 max-w-5xl mx-auto pb-24" }, st = { class: "flex flex-col gap-4 w-full @3xl:w-2/3" }, nt = { class: "flex flex-col gap-4 w-full @3xl:w-1/3" }, it = {
+  key: 0,
+  class: "fixed bottom-4 left-0 md:left-12 right-0 min-w-xs max-w-5xl w-[calc(100%-2rem)] md:w-[calc(100%-5rem)] xl:w-[calc(100%-2rem)] h-16 border border-white/10 backdrop-blur-sm border-t border-border flex items-center justify-center px-4 mx-auto z-[9999] rounded-xl overflow-hidden shadow bg-[radial-gradient(#ffffff80,transparent)] dark:bg-[radial-gradient(#00000080,transparent)]"
+}, at = { class: "w-full max-w-5xl flex items-center justify-end mx-auto" }, _t = /* @__PURE__ */ B({
+  __name: "Detail",
+  props: {
+    config: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(U) {
+    const p = U, { hasPermission: m, hasAnyPermission: v } = de(), { params: n, navigateTo: f } = pe(), { confirm: k } = me(), i = fe(p.config.project);
+    R("sources", p.config.allowedMediaSources), R("defaultSource", p.config.defaultUploadMediaSource);
+    const a = ee(() => !n.value.collectionId || n.value.collectionId === "new"), _ = te(!1), V = oe(q({
+      id: M().optional(),
+      title: M().min(1, "Title is required"),
+      type: M(),
+      description: M().optional(),
+      thumbnail: M().optional(),
+      slug: M(),
+      seo: q({
+        title: M().optional(),
+        description: M().optional()
+      }).optional(),
+      status: M()
+    })), { handleSubmit: T, errors: I, values: C, setValues: L } = se({
+      validationSchema: V,
+      initialValues: {
+        status: "draft",
+        type: "manual",
+        seo: {
+          title: "",
+          description: ""
+        }
+      }
+    });
+    _e(() => [
+      { text: a.value ? "New Collection" : C.title || "Collection" }
+    ]);
+    const F = T(async (u) => {
+      _.value = !0;
+      let o = await $() || [];
+      if (a.value) {
+        let x = JSON.parse(JSON.stringify(u));
+        if (x.id = crypto.randomUUID(), await O(x.slug)) {
+          z.error("Collection with this slug already exists"), _.value = !1;
+          return;
+        }
+        const h = [...o, x], g = p.config.collectionsCollection.split(":");
+        console.log("collectionParts", g[0], { [g[1]]: h }), await i.update(g[0], null, { [g[1]]: h }), f("/"), z.success("Collection created");
+      } else {
+        let x = JSON.parse(JSON.stringify(u));
+        const h = o.map((P) => P.id === n.value.collectionId ? x : P), g = p.config.collectionsCollection.split(":");
+        await i.update(g[0], null, { [g[1]]: h }), f("/"), z.success("Collection updated");
+      }
+      _.value = !1;
+    }), $ = async () => {
+      if (!p.config.collectionsCollection) return [];
+      const u = p.config.collectionsCollection.split(":");
+      return u.length !== 2 ? [] : (await i.get(u[0]))?.[u[1]] || [];
+    }, X = async () => {
+      const o = (await $()).find((x) => x.id === n.value.collectionId);
+      L(o);
+    }, H = async () => {
+      try {
+        let u = { ...C }, o = u.slug + "-copy", x = 2;
+        for (; await O(o); )
+          o = u.slug + "-copy-" + x, x++;
+        u.id = crypto.randomUUID(), u.slug = o, u.status = "draft", u.title = u.title + " (copy)";
+        const g = [...await $() || [], u], P = p.config.collectionsCollection.split(":");
+        await i.update(P[0], null, { [P[1]]: g }), f(u.id), z.success("Collection duplicated");
+      } catch {
+        z.error("Failed to duplicate collection");
+      }
+    }, K = async () => {
+      if (await k("Are you sure you want to delete this collection?"))
+        try {
+          const o = await $() || [];
+          if (o.length === 0 || !n.value.collectionId) throw new Error("Error loading values");
+          const x = o.filter((g) => g.id !== n.value.collectionId), h = p.config.collectionsCollection.split(":");
+          await i.update(h[0], null, { [h[1]]: x }), f(""), z.success("Collection deleted");
+        } catch {
+          z.error("Failed to delete collection");
+        }
+    }, O = async (u) => !!(await $() || []).find((x) => x.slug === u);
+    return le(() => {
+      a.value || X();
+    }), (u, o) => {
+      const x = c("Button"), h = c("MenubarTrigger"), g = c("MenubarMenu"), P = c("MenubarShortcut"), D = c("MenubarItem"), J = c("MenubarSeparator"), A = c("MenubarContent"), Q = c("Menubar");
+      return r(), w("div", Qe, [
+        s("div", Ye, [
+          s("div", Ze, [
+            t(x, {
+              variant: "ghost",
+              onClick: o[0] || (o[0] = (rt) => e(f)(""))
+            }, {
+              default: l(() => [
+                t(e(ae), { class: "size-4" })
+              ]),
+              _: 1
+            }),
+            t(e(re), { class: "size-3" }),
+            s("h1", et, y(a.value ? "New Collection" : e(C).title), 1),
+            e(C).status === "published" ? (r(), w("span", tt, "Published")) : e(C).status === "draft" ? (r(), w("span", lt, "Draft")) : b("", !0)
+          ]),
+          a.value ? b("", !0) : (r(), S(Q, {
+            key: 0,
+            class: "bg-sidebar"
+          }, {
+            default: l(() => [
+              e(m)("create-collection") ? (r(), S(g, { key: 0 }, {
+                default: l(() => [
+                  t(h, { onClick: H }, {
+                    default: l(() => [...o[1] || (o[1] = [
+                      d("Duplicate", -1)
+                    ])]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })) : b("", !0),
+              t(g, null, {
+                default: l(() => [
+                  t(h, null, {
+                    default: l(() => [...o[2] || (o[2] = [
+                      d("Preview", -1)
+                    ])]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              t(g, null, {
+                default: l(() => [
+                  t(h, null, {
+                    default: l(() => [...o[3] || (o[3] = [
+                      d("Share", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(A, null, {
+                    default: l(() => [
+                      t(D, null, {
+                        default: l(() => [
+                          o[5] || (o[5] = d(" New Tab ", -1)),
+                          t(P, null, {
+                            default: l(() => [...o[4] || (o[4] = [
+                              d("⌘T", -1)
+                            ])]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }),
+                      t(D, null, {
+                        default: l(() => [...o[6] || (o[6] = [
+                          d("New Window", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      t(J),
+                      t(D, null, {
+                        default: l(() => [...o[7] || (o[7] = [
+                          d("Share", -1)
+                        ])]),
+                        _: 1
+                      }),
+                      t(J),
+                      t(D, null, {
+                        default: l(() => [...o[8] || (o[8] = [
+                          d("Print", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              e(v)("edit-collection", "delete-collection") ? (r(), S(g, { key: 1 }, {
+                default: l(() => [
+                  t(h, null, {
+                    default: l(() => [...o[9] || (o[9] = [
+                      d("More actions", -1)
+                    ])]),
+                    _: 1
+                  }),
+                  t(A, null, {
+                    default: l(() => [
+                      e(m)("delete-collection") ? (r(), S(D, {
+                        key: 0,
+                        variant: "destructive",
+                        onClick: K
+                      }, {
+                        default: l(() => [
+                          t(e(ce), { class: "size-4" }),
+                          o[10] || (o[10] = d(" Delete collection ", -1))
+                        ]),
+                        _: 1
+                      })) : b("", !0)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })) : b("", !0)
+            ]),
+            _: 1
+          }))
+        ]),
+        s("div", ot, [
+          s("div", st, [
+            t(Ve),
+            t(qe)
+          ]),
+          s("div", nt, [
+            t(Ke)
+          ])
+        ]),
+        e(v)("create-collection", "edit-collection") ? (r(), w("div", it, [
+          s("div", at, [
+            a.value && e(m)("create-collection") ? (r(), S(x, {
+              key: 0,
+              onClick: e(F),
+              disabled: _.value
+            }, {
+              default: l(() => [
+                _.value ? (r(), S(e(W), {
+                  key: 0,
+                  class: "size-4 animate-spin"
+                })) : b("", !0),
+                d(" " + y(_.value ? "Creating" : "Create") + " New Collection ", 1)
+              ]),
+              _: 1
+            }, 8, ["onClick", "disabled"])) : e(m)("edit-collection") ? (r(), S(x, {
+              key: 1,
+              onClick: e(F),
+              disabled: _.value
+            }, {
+              default: l(() => [
+                _.value ? (r(), S(e(W), {
+                  key: 0,
+                  class: "size-4 animate-spin"
+                })) : b("", !0),
+                d(" " + y(_.value ? "Saving" : "Save") + " Changes ", 1)
+              ]),
+              _: 1
+            }, 8, ["onClick", "disabled"])) : b("", !0)
+          ])
+        ])) : b("", !0)
+      ]);
+    };
+  }
+});
+export {
+  _t as default
+};