ghost 5.74.2 → 5.74.4

package/core/built/admin/assets/admin-x-demo/modals-10ef986a.mjs

@@ -0,0 +1,381 @@
+import { c as e, j as s, u as O, a as te, b as U, d as $, B as K, e as ae, H as T, N as D, f as le } from "./index-2fa5a3c2.mjs";
+const ne = ({
+  shiftY: l,
+  footerBgColorClass: o = "bg-white dark:bg-black",
+  contentBgColorClass: i = "bg-white dark:bg-black",
+  height: c = 96,
+  children: m
+}) => {
+  const f = e(
+    "w-100 sticky bottom-[-24px] z-[297] m-0 box-border p-0"
+  ), g = l ? `calc(${l} - 24px)` : "-24px", x = `${c + 24}px`, u = e(
+    "sticky z-[298] block h-[24px]",
+    i
+  ), j = "0", h = e(
+    "sticky z-[299] mb-[-24px] flex items-center justify-between",
+    "h-[96px]",
+    o
+  ), p = "0", k = `${c}px`, b = "sticky mx-2 block h-[24px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]", B = l ? `calc(${l} + ${c - 24}px)` : `${c - 24}px`;
+  return /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      className: f,
+      style: {
+        bottom: g,
+        height: x
+      },
+      children: [
+        /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            className: u,
+            style: {
+              bottom: j
+            }
+          }
+        ),
+        /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            className: h,
+            style: {
+              bottom: p,
+              height: k
+            },
+            children: m
+          }
+        ),
+        /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            className: b,
+            style: {
+              bottom: B
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+function F(l, o, i = {}) {
+  l ? D.show(ce, {
+    title: "Are you sure you want to leave this page?",
+    prompt: /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsx("p", { children: "Hey there! It looks like you didn't save the changes you made." }),
+      /* @__PURE__ */ s.jsx("p", { children: "Save before you go!" })
+    ] }),
+    okLabel: "Leave",
+    cancelLabel: "Stay",
+    okColor: "red",
+    onOk: (c) => {
+      o(), c == null || c.remove();
+    },
+    ...i
+  }) : o();
+}
+const oe = "bg-[rgba(98,109,121,0.2)] backdrop-blur-[3px]", W = ({
+  size: l = "md",
+  width: o,
+  height: i,
+  testId: c,
+  title: m,
+  okLabel: f = "OK",
+  okLoading: g = !1,
+  cancelLabel: x = "Cancel",
+  footer: u,
+  header: j,
+  leftButtonProps: h,
+  buttonsDisabled: p,
+  padding: k = !0,
+  onOk: b,
+  okColor: B = "black",
+  onCancel: N,
+  topRightContent: v,
+  hideXOnMobile: X = !1,
+  afterClose: C,
+  children: q,
+  backDrop: J = !0,
+  backDropClick: P = !0,
+  stickyFooter: z = !1,
+  stickyHeader: Q = !1,
+  scrolling: R = !0,
+  dirty: E = !1,
+  animate: V = !0,
+  formSheet: M = !1,
+  enableCMDS: Z = !0
+}) => {
+  const H = O(), { setGlobalDirtyState: G } = te(), [I, Y] = U(!1);
+  $(() => {
+    G(E);
+  }, [E, G]), $(() => {
+    const r = (w) => {
+      w.key === "Escape" && (document.activeElement && document.activeElement instanceof HTMLElement && document.activeElement.blur(), setTimeout(() => {
+        N ? N() : F(E, () => {
+          H.remove(), C == null || C();
+        });
+      }));
+    };
+    return document.addEventListener("keydown", r), () => {
+      document.removeEventListener("keydown", r);
+    };
+  }, [H, E, C, N]), $(() => {
+    const r = setTimeout(() => {
+      Y(!0);
+    }, 250);
+    return () => clearTimeout(r);
+  }, []), $(() => {
+    if (b) {
+      const r = (w) => {
+        (w.metaKey || w.ctrlKey) && w.key === "s" && (w.preventDefault(), b());
+      };
+      if (Z)
+        return window.addEventListener("keydown", r), () => {
+          window.removeEventListener("keydown", r);
+        };
+    }
+  });
+  const _ = [];
+  let A;
+  const S = () => {
+    F(E, () => {
+      H.remove(), C == null || C();
+    });
+  };
+  u || (x && _.push({
+    key: "cancel-modal",
+    label: x,
+    color: "outline",
+    onClick: N || (() => {
+      S();
+    }),
+    disabled: p
+  }), f && _.push({
+    key: "ok-modal",
+    label: f,
+    color: B,
+    className: "min-w-[80px]",
+    onClick: b,
+    disabled: p,
+    loading: g
+  }));
+  let a = e(
+    "relative z-50 mx-auto flex max-h-[100%] w-full flex-col justify-between overflow-x-hidden bg-white dark:bg-black",
+    l !== "bleed" && "rounded",
+    M ? "shadow-md" : "shadow-xl",
+    V && !M && !I && "animate-modal-in",
+    M && !I && "animate-modal-in-reverse",
+    R ? "overflow-y-auto" : "overflow-y-hidden"
+  ), n = e(
+    "fixed inset-0 z-[1000] h-[100vh] w-[100vw]"
+  ), d = "", t = e(
+    !v || v === "close" ? "" : "flex items-center justify-between gap-5"
+  );
+  switch (Q && (t = e(
+    t,
+    "sticky top-0 z-[200] -mb-4 bg-white !pb-4 dark:bg-black"
+  )), l) {
+    case "sm":
+      a = e(
+        a,
+        "max-w-[480px]"
+      ), n = e(
+        n,
+        "p-4 md:p-[8vmin]"
+      ), d = "p-8", t = e(
+        t,
+        "-inset-x-8"
+      );
+      break;
+    case "md":
+      a = e(
+        a,
+        "max-w-[720px]"
+      ), n = e(
+        n,
+        "p-4 md:p-[8vmin]"
+      ), d = "p-8", t = e(
+        t,
+        "-inset-x-8"
+      );
+      break;
+    case "lg":
+      a = e(
+        a,
+        "max-w-[1020px]"
+      ), n = e(
+        n,
+        "p-4 md:p-[4vmin]"
+      ), d = "p-8", t = e(
+        t,
+        "-inset-x-8"
+      );
+      break;
+    case "xl":
+      a = e(
+        a,
+        "max-w-[1240px]0"
+      ), n = e(
+        n,
+        "p-4 md:p-[3vmin]"
+      ), d = "p-10", t = e(
+        t,
+        "-inset-x-10 -top-10"
+      );
+      break;
+    case "full":
+      a = e(
+        a,
+        "h-full"
+      ), n = e(
+        n,
+        "p-4 md:p-[3vmin]"
+      ), d = "p-10", t = e(
+        t,
+        "-inset-x-10"
+      );
+      break;
+    case "bleed":
+      a = e(
+        a,
+        "h-full"
+      ), d = "p-10", t = e(
+        t,
+        "-inset-x-10"
+      );
+      break;
+    default:
+      n = e(
+        n,
+        "p-4 md:p-[8vmin]"
+      ), d = "p-8", t = e(
+        t,
+        "-inset-x-8"
+      );
+      break;
+  }
+  k || (d = "p-0"), a = e(
+    a
+  ), t = e(
+    t,
+    d,
+    "pb-0"
+  ), A = e(
+    d,
+    "py-0"
+  ), n = e(
+    n,
+    "max-[800px]:!pb-20"
+  );
+  const ee = e(
+    `${d} ${z ? "py-6" : ""}`,
+    "flex w-full items-center justify-between"
+  );
+  A = e(
+    A,
+    (l === "full" || l === "bleed" || i === "full" || typeof i == "number") && "grow"
+  );
+  const se = (r) => {
+    r.target === r.currentTarget && P && S();
+  }, L = {};
+  typeof o == "number" ? (L.width = "100%", L.maxWidth = o + "px") : o === "full" && (a = e(
+    a,
+    "w-full"
+  )), typeof i == "number" ? (L.height = "100%", L.maxHeight = i + "px") : i === "full" && (a = e(
+    a,
+    "h-full"
+  ));
+  let y;
+  return u ? y = u : u === !1 ? A += " pb-0 " : y = /* @__PURE__ */ s.jsxs("div", { className: ee, children: [
+    /* @__PURE__ */ s.jsx("div", { children: h && /* @__PURE__ */ s.jsx(K, { ...h }) }),
+    /* @__PURE__ */ s.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ s.jsx(ae, { buttons: _ }) })
+  ] }), y = z ? /* @__PURE__ */ s.jsx(ne, { height: 84, children: y }) : /* @__PURE__ */ s.jsx(s.Fragment, { children: y }), /* @__PURE__ */ s.jsxs("div", { className: n, id: "modal-backdrop", onMouseDown: se, children: [
+    /* @__PURE__ */ s.jsx("div", { className: e(
+      "pointer-events-none fixed inset-0 z-0",
+      J && !M && oe,
+      M && "bg-[rgba(98,109,121,0.08)]"
+    ) }),
+    /* @__PURE__ */ s.jsxs("section", { className: a, "data-testid": c, style: L, children: [
+      j === !1 ? "" : !v || v === "close" ? /* @__PURE__ */ s.jsxs("header", { className: t, children: [
+        m && /* @__PURE__ */ s.jsx(T, { level: 3, children: m }),
+        /* @__PURE__ */ s.jsx("div", { className: `${v !== "close" && "md:!invisible md:!hidden"} ${X && "hidden"} absolute right-6 top-6`, children: /* @__PURE__ */ s.jsx(K, { className: "-m-2 cursor-pointer p-2 opacity-50 hover:opacity-100", icon: "close", iconColorClass: "text-black dark:text-white", size: "sm", unstyled: !0, onClick: S }) })
+      ] }) : /* @__PURE__ */ s.jsxs("header", { className: t, children: [
+        m && /* @__PURE__ */ s.jsx(T, { level: 3, children: m }),
+        v
+      ] }),
+      /* @__PURE__ */ s.jsx("div", { className: A, children: q }),
+      y
+    ] })
+  ] });
+}, ie = ({
+  title: l = "Are you sure?",
+  prompt: o,
+  cancelLabel: i = "Cancel",
+  okLabel: c = "OK",
+  okRunningLabel: m = "...",
+  okColor: f = "black",
+  onCancel: g,
+  onOk: x,
+  customFooter: u,
+  formSheet: j = !0
+}) => {
+  const h = O(), [p, k] = U("");
+  return /* @__PURE__ */ s.jsx(
+    W,
+    {
+      backDropClick: !1,
+      buttonsDisabled: p === "running",
+      cancelLabel: i,
+      footer: u,
+      formSheet: j,
+      okColor: f,
+      okLabel: p === "running" ? m : c,
+      testId: "confirmation-modal",
+      title: l,
+      width: 540,
+      onCancel: g,
+      onOk: async () => {
+        k("running");
+        try {
+          await (x == null ? void 0 : x(h));
+        } catch (b) {
+          console.error("Unhandled Promise Rejection. Make sure you catch errors in your onOk handler.", b);
+        }
+        k("");
+      },
+      children: /* @__PURE__ */ s.jsx("div", { className: "py-4 leading-9", children: o })
+    }
+  );
+}, ce = D.create(ie), de = D.create(() => {
+  const { updateRoute: l } = le(), o = D.useModal();
+  return /* @__PURE__ */ s.jsx(
+    W,
+    {
+      afterClose: () => {
+        l("");
+      },
+      cancelLabel: "",
+      okLabel: "Close",
+      size: "sm",
+      title: "About",
+      onOk: () => {
+        l(""), o.remove();
+      },
+      children: /* @__PURE__ */ s.jsxs("div", { className: "mt-3 flex flex-col gap-4", children: [
+        /* @__PURE__ */ s.jsx("p", { children: "You're looking at a React app inside Ghost Admin. It uses common AdminX framework and Design System packages, and works seamlessly with the current Admin's routing." }),
+        /* @__PURE__ */ s.jsx("p", { children: "At the moment the look and feel follows the current Admin's style to blend in with existing pages. However the system is built in a very flexible way to allow easy updates in the future." }),
+        /* @__PURE__ */ s.jsx(T, { className: "-mb-2 mt-4", level: 5, children: "Contents" }),
+        /* @__PURE__ */ s.jsxs("p", { children: [
+          "The demo uses a mocked list of members — it's ",
+          /* @__PURE__ */ s.jsx("strong", { children: "not" }),
+          " ",
+          "the actual or future design of members in Ghost Admin. Instead, the pages showcase common design patterns like a list and detail, navigation, modals and toasts."
+        ] })
+      ] })
+    }
+  );
+}), me = { DemoModal: de };
+export {
+  me as default
+};
+//# sourceMappingURL=modals-10ef986a.mjs.map