zs_library 0.4.10 → 0.4.11

package/dist/components/desktop/items/group-item.js

@@ -0,0 +1,305 @@
+import "./index.css";
+import { jsxs as I, jsx as s } from "react/jsx-runtime";
+import { css as o, cx as p } from "@emotion/css";
+import { motion as n } from "framer-motion";
+import { useMemo as k } from "react";
+import { ReactSortable as U } from "react-sortablejs";
+import { useSortableConfig as q } from "../context/config/hooks.js";
+import { useSortableState as A } from "../context/state/hooks.js";
+import B from "../utils.js";
+import D from "./sortable-item.js";
+const oe = (C) => {
+  const {
+    data: r,
+    className: N,
+    parentIds: u,
+    itemIndex: S,
+    onClick: t,
+    noLetters: y = !1
+  } = C, {
+    contextMenuFuns: M,
+    setList: T,
+    setOpenGroupItemData: P,
+    longPressTriggered: L,
+    moveItemId: v,
+    moveTargetId: $,
+    setMoveTargetId: G,
+    listStatus: O
+  } = A(), { itemIconBuilder: a, theme: X, contextMenu: Y } = q(), { light: g, dark: h } = B.getTheme(X), { children: d, data: f, config: j } = r, { row: l = 1, col: i = 1 } = j ?? {}, z = {
+    visible: { opacity: 1, scale: 1 },
+    hidden: { opacity: 0, scale: 0.95 }
+  }, w = ((d == null ? void 0 : d.length) ?? 0) === 0, m = w ? [r] : [...d ?? []].slice(0, 9), E = k(() => v === r.id.toString(), [r.id, v]), F = k(() => $ === r.id, [r.id, $]), b = o`
+    overflow: hidden;
+    cursor: pointer;
+    background-color: ${g.itemIconBackgroundColor};
+    box-shadow: 0 0 0.5rem ${g.itemIconShadowColor};
+    @media (prefers-color-scheme: dark) {
+      background-color: ${h.itemIconBackgroundColor};
+      box-shadow: 0 0 0.5rem ${h.itemIconShadowColor};
+    }
+  `, R = () => {
+    if (w)
+      return /* @__PURE__ */ s(
+        n.div,
+        {
+          className: p(
+            "sortable-group-item",
+            o`
+              overflow: hidden;
+              cursor: pointer;
+              width: 100%;
+              height: 100%;
+              background-color: ${g.itemIconBackgroundColor};
+              position: absolute;
+              left: 0;
+              top: 0;
+              border-radius: 0.75rem;
+              @media (prefers-color-scheme: dark) {
+                background-color: ${h.itemIconBackgroundColor};
+              }
+            `
+          ),
+          onClick: (e) => {
+            e.stopPropagation(), t == null || t(r);
+          },
+          children: a == null ? void 0 : a(r)
+        }
+      );
+    if (l === 1 && i === 1 || l === 2 && i === 2)
+      return /* @__PURE__ */ s(
+        n.div,
+        {
+          className: o`
+            display: grid;
+            width: 100%;
+            height: 100%;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            grid-template-rows: repeat(3, minmax(0, 1fr));
+            padding: ${i === 1 ? "0.125rem" : "0.25rem"};
+            gap: ${i === 1 ? "0.125rem" : "0.5rem"};
+            place-items: center;
+          `,
+          children: m == null ? void 0 : m.slice(0, 9).map((e) => /* @__PURE__ */ s(
+            n.div,
+            {
+              className: p(
+                b,
+                o`
+                  border-radius: ${i === 1 ? "0.25rem" : "0.5rem"};
+                  width: 100%;
+                  height: 100%;
+                `
+              ),
+              onClick: (c) => {
+                c.stopPropagation(), t == null || t(e);
+              },
+              children: a == null ? void 0 : a(e)
+            },
+            e.id
+          ))
+        }
+      );
+    if (l === 1 && i === 2)
+      return /* @__PURE__ */ s(
+        n.div,
+        {
+          className: o`
+            display: grid;
+            grid-template-columns: repeat(10, minmax(0, 1fr));
+            grid-template-rows: repeat(4, minmax(0, 1fr));
+            column-gap: 0.5rem;
+            row-gap: 0.25rem;
+            width: 144px;
+            height: 52px;
+            place-items: center;
+          `,
+          children: m == null ? void 0 : m.slice(0, 4).map((e, c) => /* @__PURE__ */ s(
+            n.div,
+            {
+              className: p(
+                b,
+                c < 2 ? o`
+                      width: 52px;
+                      height: 52px;
+                      border-radius: 0.5rem;
+                      grid-column: span 4 / span 4;
+                      grid-row: span 4 / span 4;
+                    ` : o`
+                      width: 1.5rem;
+                      height: 1.5rem;
+                      border-radius: 0.375rem;
+                      grid-column: span 2 / span 2;
+                      grid-row: span 2 / span 2;
+                    `
+              ),
+              onClick: (x) => {
+                c > 2 || (x.stopPropagation(), t == null || t(e));
+              },
+              children: a == null ? void 0 : a(e)
+            },
+            e.id
+          ))
+        }
+      );
+    if (l === 2 && i === 1)
+      return /* @__PURE__ */ s(
+        n.div,
+        {
+          className: o`
+            display: grid;
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+            grid-template-rows: repeat(10, minmax(0, 1fr));
+            column-gap: 0.25rem;
+            row-gap: 0.5rem;
+            width: 52px;
+            height: 144px;
+            place-items: center;
+          `,
+          children: m == null ? void 0 : m.slice(0, 4).map((e, c) => /* @__PURE__ */ s(
+            n.div,
+            {
+              className: p(
+                b,
+                c < 2 ? o`
+                      width: 52px;
+                      height: 52px;
+                      border-radius: 0.5rem;
+                      grid-column: span 4 / span 4;
+                      grid-row: span 4 / span 4;
+                    ` : o`
+                      width: 1.5rem;
+                      height: 1.5rem;
+                      grid-column: span 2 / span 2;
+                      grid-row: span 2 / span 2;
+                    `
+              ),
+              onClick: (x) => {
+                c > 2 || (x.stopPropagation(), t == null || t(e));
+              },
+              children: a == null ? void 0 : a(e)
+            },
+            e.id
+          ))
+        }
+      );
+  };
+  return /* @__PURE__ */ I(
+    D,
+    {
+      data: r,
+      itemIndex: S,
+      parentIds: u,
+      childrenLength: d == null ? void 0 : d.length,
+      className: p(
+        o`
+          grid-row: span ${l};
+          grid-column: span ${i};
+        `,
+        N
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          n.div,
+          {
+            whileTap: { scale: 0.9 },
+            className: p(
+              F ? "!scale-110" : "",
+              o`
+            cursor: pointer;
+            position: relative;
+            border-radius: 0.75rem;
+            background-color: ${g.groupItemIconBackgroundColor};
+            box-shadow: 0 0 0.5rem ${g.groupItemIconShadowColor};
+            @media (prefers-color-scheme: dark) {
+              background-color: ${h.groupItemIconBackgroundColor};
+              box-shadow: 0 0 0.5rem ${h.groupItemIconShadowColor};
+            }
+            /* overflow: hidden; */
+            transition: all 0.3s;
+            margin: 0 auto;
+            width: ${i * 64 + 32 * (i - 1)}px;
+            height: ${l * 64 + 32 * (l - 1)}px;
+          `
+            ),
+            onClick: (e) => {
+              !w && !L && (r.parentIds = u, r.pageX = e.pageX, r.pageY = e.pageY, P(r));
+            },
+            ...M(r, Y !== !1),
+            children: /* @__PURE__ */ I(
+              n.div,
+              {
+                className: o`
+            position: relative;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0.375rem;
+          `,
+                children: [
+                  R(),
+                  /* @__PURE__ */ s(
+                    U,
+                    {
+                      className: p(
+                        "sortable-group-item",
+                        o`
+                position: absolute;
+                cursor: pointer;
+                left: 0.375rem;
+                top: 0.375rem;
+                width: calc(100% - 0.75rem);
+                height: calc(100% - 0.75rem);
+                pointer-events: ${O === null ? "none" : "auto"};
+                > * {
+                  opacity: 0;
+                }
+              `
+                      ),
+                      group: { name: "nested", pull: !1, put: !0 },
+                      animation: 150,
+                      fallbackOnBody: !0,
+                      list: d ?? [],
+                      setList: (e) => T(e, u),
+                      filter: () => !0,
+                      "data-id": r.id,
+                      onChange: () => {
+                        G(r.id);
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s(
+          n.p,
+          {
+            className: p(
+              o`
+            text-align: center;
+            margin-top: 0.25rem;
+            margin-bottom: 0;
+            color: ${g.itemNameColor};
+            @media (prefers-color-scheme: dark) {
+              color: ${h.itemNameColor};
+            }
+          `,
+              y && o`
+              color: transparent;
+            `
+            ),
+            variants: z,
+            animate: E ? "hidden" : "visible",
+            children: (f == null ? void 0 : f.name) ?? "文件夹"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  oe as default
+};

package/dist/components/desktop/items/modal/group-item-modal.js

@@ -0,0 +1,158 @@
+import "./index.css";
+import { jsx as l } from "react/jsx-runtime";
+import { cx as w, css as i } from "@emotion/css";
+import C from "rc-dialog";
+import { useState as T, useEffect as N } from "react";
+import { ReactSortable as B } from "react-sortablejs";
+import { useSortableConfig as L } from "../../context/config/hooks.js";
+import { useSortableState as z } from "../../context/state/hooks.js";
+import { ghostClass as D } from "../../style.js";
+import E from "../../utils.js";
+import O from "../sortable-item.js";
+const F = (f) => {
+  const { data: e, onClose: s, onItemClick: h } = f, {
+    list: b,
+    setList: k,
+    setListStatus: a,
+    setMoveItemId: m,
+    setMoveTargetId: c,
+    updateItem: v
+  } = z(), { theme: x } = L(), { light: I, dark: S } = E.getTheme(x), [u, d] = T("文件夹"), y = [...(e == null ? void 0 : e.children) ?? []];
+  return N(() => {
+    var o;
+    e && d((o = e.data) == null ? void 0 : o.name);
+  }, [e]), /* @__PURE__ */ l(
+    C,
+    {
+      visible: !!e,
+      onClose: () => {
+        s();
+      },
+      animation: "zoom",
+      maskAnimation: "fade",
+      mousePosition: e != null && e.pageX && (e != null && e.pageY) ? {
+        x: e == null ? void 0 : e.pageX,
+        y: e == null ? void 0 : e.pageY
+      } : null,
+      title: /* @__PURE__ */ l(
+        "input",
+        {
+          className: i`
+            background-color: transparent;
+            border-style: none;
+            text-align: center;
+            font-size: 1.25rem;
+            line-height: 1.75rem;
+            color: white;
+            @media (prefers-color-scheme: dark) {
+              color: black;
+            }
+            &:focus {
+              outline: none;
+            }
+          `,
+          value: u,
+          onChange: (o) => {
+            d(o.target.value);
+          },
+          onBlur: () => {
+            e && v(e.id, {
+              ...e.data,
+              name: u
+            });
+          }
+        }
+      ),
+      footer: null,
+      closable: !1,
+      className: w(
+        "group-item-modal",
+        i`
+          .rc-dialog-content {
+            background-color: transparent;
+            box-shadow: none;
+            padding: 0;
+            .rc-dialog-header {
+              text-align: center;
+              background-color: transparent;
+              margin-bottom: 1rem;
+              border-bottom: none;
+              .ant-modal-name {
+                color: #fff;
+              }
+            }
+            .rc-dialog-body {
+              background-color: ${I.groupItemModalBackgroundColor};
+              @media (prefers-color-scheme: dark) {
+                background-color: ${S.groupItemModalBackgroundColor};
+              }
+              border-radius: 0.5rem;
+              overflow: hidden;
+            }
+          }
+        `
+      ),
+      width: 600,
+      destroyOnClose: !0,
+      children: /* @__PURE__ */ l(
+        "div",
+        {
+          className: i`
+          overflow-y: auto;
+          max-height: 60vh;
+          padding: 1.25rem 0;
+        `,
+          onDragLeave: (o) => {
+            const r = o.relatedTarget;
+            r && (o.currentTarget.contains(r) || setTimeout(() => {
+              s();
+            }, 500));
+          },
+          children: /* @__PURE__ */ l(
+            B,
+            {
+              className: i`
+            display: grid;
+            gap: 1rem;
+            place-items: center;
+            grid-template-columns: repeat(auto-fill, 96px);
+            grid-auto-flow: dense;
+            grid-auto-rows: 96px;
+          `,
+              group: { name: "nested", pull: !0, put: !1 },
+              animation: 150,
+              fallbackOnBody: !0,
+              list: (e == null ? void 0 : e.children) ?? [],
+              setList: (o) => {
+                var g, p;
+                const r = o.map((n) => n.id), t = (p = (g = b.find((n) => n.id === (e == null ? void 0 : e.id))) == null ? void 0 : g.children) == null ? void 0 : p.map((n) => n.id);
+                r.length === (t == null ? void 0 : t.length) && r.every((n, M) => n === t[M]) || r.length < ((t == null ? void 0 : t.length) ?? 0) || k(o, [...(e == null ? void 0 : e.parentIds) ?? [], e == null ? void 0 : e.id]);
+              },
+              onMove: () => (c(null), a("onMove"), !0),
+              onStart: (o) => {
+                const r = o.item.dataset;
+                r != null && r.id && m(r.id), a("onMove");
+              },
+              onEnd: () => {
+                m(null), c(null), a(null);
+              },
+              ghostClass: D,
+              children: y.map((o, r) => /* @__PURE__ */ l(
+                O,
+                {
+                  data: o,
+                  itemIndex: r,
+                  onClick: h
+                },
+                o.id
+              ))
+            }
+          )
+        }
+      )
+    }
+  );
+};
+export {
+  F as default
+};

package/dist/components/desktop/items/modal/info-modal.js

@@ -0,0 +1,33 @@
+import "./index.css";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import s from "rc-dialog";
+/* empty css                                                                                                                                 */
+import l from "react-json-view";
+const u = (m) => {
+  var i;
+  const { data: o, onClose: n } = m;
+  return /* @__PURE__ */ e(
+    s,
+    {
+      visible: !!o,
+      onClose: () => {
+        n();
+      },
+      animation: "zoom",
+      maskAnimation: "fade",
+      mousePosition: o != null && o.pageX && (o != null && o.pageY) ? {
+        x: o == null ? void 0 : o.pageX,
+        y: o == null ? void 0 : o.pageY
+      } : null,
+      footer: null,
+      title: ((i = o == null ? void 0 : o.data) == null ? void 0 : i.name) ?? "信息",
+      children: o && /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ e("div", { className: "mb-2", children: "开发者信息" }),
+        /* @__PURE__ */ e("div", { className: "p-2 rounded-md bg-[#272822]", children: /* @__PURE__ */ e(l, { src: o, theme: "monokai" }) })
+      ] })
+    }
+  );
+};
+export {
+  u as default
+};

package/dist/components/desktop/items/sortable-item.js

@@ -0,0 +1,120 @@
+import "./index.css";
+import { jsx as r, jsxs as x, Fragment as k } from "react/jsx-runtime";
+import { cx as g, css as i } from "@emotion/css";
+import { motion as p } from "framer-motion";
+import N from "rc-tooltip";
+/* empty css                                                                                                                                          */
+import v from "../context-menu/index.js";
+import { useSortableConfig as u } from "../context/config/hooks.js";
+import { useSortableState as f } from "../context/state/hooks.js";
+import w from "../utils.js";
+const S = (l) => {
+  const { data: e, noLetters: m = !1 } = l, { contextMenuFuns: c } = f(), { itemIconBuilder: t, theme: d, contextMenu: s } = u(), { light: o, dark: a } = w.getTheme(d), { data: n = {} } = e, { name: h } = n;
+  return /* @__PURE__ */ x(k, { children: [
+    /* @__PURE__ */ r(
+      p.div,
+      {
+        className: i`
+          width: 4rem;
+          height: 4rem;
+          background-color: ${o.itemIconBackgroundColor};
+          border-radius: 0.75rem;
+          box-shadow: 0 0 0.5rem ${o.itemIconShadowColor};
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          @media (prefers-color-scheme: dark) {
+            background-color: ${a.itemIconBackgroundColor};
+            box-shadow: 0 0 0.5rem ${a.itemIconShadowColor};
+          }
+        `,
+        whileTap: { scale: 0.9 },
+        children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: i`
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            color: ${o.itemNameColor};
+            @media (prefers-color-scheme: dark) {
+              color: ${a.itemNameColor};
+            }
+          `,
+            ...c(e, s !== !1),
+            children: t == null ? void 0 : t(e)
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(
+      p.p,
+      {
+        className: g(
+          i`
+            text-align: center;
+            margin-top: 0.25rem;
+            margin-bottom: 0;
+            color: ${o.itemNameColor};
+            @media (prefers-color-scheme: dark) {
+              color: ${a.itemNameColor};
+            }
+          `,
+          m && i`
+              color: transparent;
+            `
+        ),
+        children: h
+      }
+    )
+  ] });
+}, H = (l) => {
+  const {
+    data: e,
+    className: m,
+    itemIndex: c,
+    onClick: t,
+    disabledDrag: d = !1,
+    children: s,
+    parentIds: o,
+    childrenLength: a
+  } = l, { contextMenu: n, setContextMenu: h } = f(), { contextMenu: b } = u();
+  return /* @__PURE__ */ r(
+    N,
+    {
+      placement: "bottom",
+      overlayClassName: i`
+        background-color: transparent;
+        .rc-tooltip-inner {
+          background-color: transparent;
+          padding: 0;
+          border: none;
+        }
+      `,
+      overlay: /* @__PURE__ */ r(v, { ...b }),
+      visible: (n == null ? void 0 : n.data.id) === e.id,
+      onVisibleChange: (C) => {
+        C || h(null);
+      },
+      destroyTooltipOnHide: !0,
+      children: /* @__PURE__ */ r(
+        p.div,
+        {
+          "data-id": e.id,
+          "data-index": c,
+          "data-parent-ids": o == null ? void 0 : o.join(","),
+          "data-children-length": a,
+          onClick: () => t == null ? void 0 : t(e),
+          className: g(d && "drag-disabled", m),
+          children: s ?? /* @__PURE__ */ r(S, { ...l })
+        }
+      )
+    }
+  );
+};
+export {
+  S as SortableItemDefaultContent,
+  H as default
+};