zs_library 0.4.10 → 0.4.12

package/dist/components/desktop/config.js

@@ -0,0 +1,15 @@
+import "./index.css";
+const o = {
+  maxRow: 2,
+  maxCol: 2
+}, p = {
+  ...o
+}, a = {
+  app: o,
+  group: p
+};
+export {
+  o as appConfig,
+  a as configMap,
+  p as groupConfig
+};

package/dist/components/desktop/context/config/context.js

@@ -0,0 +1,14 @@
+import "./index.css";
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as n, useMemo as s } from "react";
+import { themeLight as h, themeDark as f } from "../../theme.js";
+const l = n(
+  {}
+), d = (r) => {
+  const { children: t, theme: e, ...o } = r, i = s(() => e === "light" ? h : e === "dark" ? f : e, [e]);
+  return /* @__PURE__ */ m(l.Provider, { value: { theme: i, ...o }, children: t });
+};
+export {
+  l as SortableConfigContext,
+  d as SortableConfigProvider
+};

package/dist/components/desktop/context/config/hooks.js

@@ -0,0 +1,7 @@
+import "./index.css";
+import { useContext as t } from "react";
+import { SortableConfigContext as o } from "./context.js";
+const i = () => t(o);
+export {
+  i as useSortableConfig
+};

package/dist/components/desktop/context/state/context.js

@@ -0,0 +1,221 @@
+import "./index.css";
+import { jsx as re } from "react/jsx-runtime";
+import { useLocalStorageState as oe, useDebounceEffect as ue } from "ahooks";
+import { createContext as se, useState as d, useRef as ie, useEffect as b } from "react";
+import { v4 as k } from "uuid";
+import { configMap as ce } from "../../config.js";
+import M from "../../utils.js";
+const le = se({
+  list: [],
+  setList: () => {
+  },
+  contextMenu: null,
+  setContextMenu: () => {
+  },
+  listStatus: null,
+  setListStatus: () => {
+  },
+  contextMenuFuns: () => {
+  },
+  hideContextMenu: () => {
+  },
+  showInfoItemData: null,
+  setShowInfoItemData: () => {
+  },
+  openGroupItemData: null,
+  setOpenGroupItemData: () => {
+  },
+  longPressTriggered: !1,
+  updateItem: () => {
+  },
+  updateItemConfig: () => {
+  },
+  removeItem: () => {
+  },
+  addItem: () => {
+  },
+  moveItemId: null,
+  setMoveItemId: () => {
+  },
+  moveTargetId: null,
+  setMoveTargetId: () => {
+  }
+}), ve = (C) => {
+  const {
+    children: F,
+    list: I = [],
+    onChange: n,
+    storageKey: Y = "ZS_LIBRARY_DESKTOP_SORTABLE_CONFIG",
+    enableCaching: x = !0
+  } = C, [S, T] = d(), [B, A] = d(), [g, K] = d(null), p = ie(g), [U, D] = d(null), [h, a] = d([]), [X, j] = d(
+    null
+  ), [w, N] = d(
+    null
+  ), [V, P] = d(!1), [Z, z] = d(null), [H, J] = d(
+    null
+  ), [R, Q] = d(!1), [v, W] = oe(Y, {
+    defaultValue: [],
+    listenStorageChange: !0
+  }), G = () => {
+    D(null), clearTimeout(S), T(void 0), p.current = null;
+  }, q = (e, l) => {
+    D({ ...e, pageX: e.pageX, pageY: e.pageY, data: l }), clearTimeout(S);
+  }, $ = (e, l = !0) => {
+    const { config: c = {} } = e;
+    return c.allowContextMenu === !1 ? {} : {
+      onMouseDown: (r) => {
+        T(
+          setTimeout(() => {
+            l && p.current === null && q(r, e);
+          }, 800)
+        ), P(!1), A(
+          setTimeout(() => {
+            P(!0);
+          }, 800)
+        );
+      },
+      onMouseUp: () => {
+        clearTimeout(B), A(void 0), clearTimeout(S), T(void 0);
+      },
+      onContextMenu: (r) => {
+        l && (r.preventDefault(), q(r, e));
+      }
+    };
+  }, y = (e, l) => {
+    const c = [...l || []];
+    if (c.length > 0)
+      a((r) => {
+        const s = [...r], u = (t) => {
+          var E, L;
+          const o = c.shift(), i = t.find((m) => m.id === o), f = t.findIndex((m) => m.id === o);
+          if (c.length && i) {
+            if (((E = i.children) == null ? void 0 : E.filter(
+              (m) => !e.some((ne) => ne.id === m.id)
+            ).length) === 1 && e.length === 1) {
+              const m = { ...e[0] };
+              return t.splice(f, 1, m), n == null || n(t), t;
+            }
+            return i.children = u(i.children || []), t.splice(f, 1, i), n == null || n(t), t;
+          }
+          if (i) {
+            if (!((L = i.children) != null && L.length) && e.length) {
+              const m = { ...i };
+              return i.data = { name: "文件夹" }, i.type = "group", i.children = [m, ...e], i.id = k(), t.splice(f, 1, i), n == null || n(t), t;
+            }
+            return i.children = M.uniqueArray(e), t.splice(f, 1, i), n == null || n(t), t;
+          }
+          return M.uniqueArray(e);
+        };
+        return M.uniqueArray(u(s));
+      });
+    else {
+      const r = M.uniqueArray(e);
+      n == null || n(r), a(r);
+    }
+  }, _ = (e, l) => {
+    a((c) => {
+      const r = [...c], s = (u) => {
+        var t;
+        for (let o = 0; o < u.length; o++)
+          if (u[o].id === e) {
+            u[o].config = l;
+            break;
+          } else ((t = u[o].children) == null ? void 0 : t.length) !== void 0 && s(u[o].children);
+      };
+      return s(r), n == null || n(r), r;
+    });
+  }, O = (e, l) => {
+    a((c) => {
+      const r = [...c], s = (u) => {
+        var t;
+        for (let o = 0; o < u.length; o++)
+          if (u[o].id === e) {
+            u[o].data = l;
+            break;
+          } else ((t = u[o].children) == null ? void 0 : t.length) !== void 0 && s(u[o].children);
+      };
+      return s(r), n == null || n(r), r;
+    });
+  }, ee = (e) => {
+    a((l) => {
+      const c = [...l], r = (s) => {
+        var u;
+        for (let t = 0; t < s.length; t++)
+          if (s[t].id === e) {
+            s.splice(t, 1);
+            break;
+          } else ((u = s[t].children) == null ? void 0 : u.length) !== void 0 && r(s[t].children);
+      };
+      return r(c), n == null || n(c), c;
+    });
+  }, te = (e, l) => {
+    const c = [...h], r = (s, u) => {
+      const t = u.shift(), o = s.find((f) => f.id === t), i = s.findIndex((f) => f.id === t);
+      if (o) {
+        if (u.length)
+          o.children = r(o.children || [], u);
+        else {
+          const f = (e == null ? void 0 : e.type) ?? "app";
+          o.children = [
+            ...o.children ?? [],
+            {
+              ...e,
+              id: k(),
+              config: (e == null ? void 0 : e.config) ?? ce[f]
+            }
+          ];
+        }
+        return s.splice(i, 1, o), s;
+      } else
+        return s;
+    };
+    a(r(c, l));
+  };
+  return b(() => {
+    (I == null ? void 0 : I.length) > 0 && h.length === 0 && y(I);
+  }, [I]), b(() => {
+    p.current = g, g !== null && G();
+  }, [g]), b(() => {
+    x && v != null && v.length && !R && (y(v), Q(!0));
+  }, [v, R, x]), ue(
+    () => {
+      x && W(h);
+    },
+    [h, x],
+    {
+      wait: 1e3
+    }
+  ), /* @__PURE__ */ re(
+    le.Provider,
+    {
+      value: {
+        list: h,
+        setList: y,
+        contextMenu: U,
+        setContextMenu: D,
+        listStatus: g,
+        setListStatus: K,
+        contextMenuFuns: $,
+        hideContextMenu: G,
+        showInfoItemData: X,
+        setShowInfoItemData: j,
+        openGroupItemData: w,
+        setOpenGroupItemData: N,
+        longPressTriggered: V,
+        updateItemConfig: _,
+        updateItem: O,
+        removeItem: ee,
+        addItem: te,
+        moveItemId: Z,
+        setMoveItemId: z,
+        moveTargetId: H,
+        setMoveTargetId: J
+      },
+      children: F
+    }
+  );
+};
+export {
+  le as SortableStateContext,
+  ve as SortableStateProvider
+};

package/dist/components/desktop/context/state/hooks.js

@@ -0,0 +1,7 @@
+import "./index.css";
+import { useContext as t } from "react";
+import { SortableStateContext as e } from "./context.js";
+const m = () => t(e);
+export {
+  m as useSortableState
+};

package/dist/components/desktop/context-menu/index.js

@@ -0,0 +1,312 @@
+import "./index.css";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { cx as s, css as n } from "@emotion/css";
+import { RiPencilRuler2Line as T, RiShareLine as j, RiInformationLine as L, RiCloseCircleLine as P } from "@remixicon/react";
+import { AnimatePresence as D, motion as t } from "framer-motion";
+import { configMap as X } from "../config.js";
+import { useSortableConfig as M } from "../context/config/hooks.js";
+import { useSortableState as Y } from "../context/state/hooks.js";
+import $ from "../utils.js";
+const H = {
+  menuShow: {
+    opacity: 1,
+    y: 0,
+    transition: { type: "spring", stiffness: 300, damping: 24 }
+  },
+  menuHide: { opacity: 0, y: 20, transition: { duration: 0.2 } }
+}, w = (h) => {
+  const { icon: f, title: x, onClick: l } = h, { theme: k } = M(), { light: m, dark: p } = $.getTheme(k);
+  return /* @__PURE__ */ o(
+    t.div,
+    {
+      className: n`
+        &:hover {
+          background-color: ${m.contextMenuActiveColor};
+          @media (prefers-color-scheme: dark) {
+            background-color: ${p.contextMenuActiveColor};
+          }
+        }
+        @media (prefers-color-scheme: dark) {
+          color: black;
+        }
+        font-size: 0.75rem;
+        line-height: 1rem;
+        cursor: pointer;
+        transition: all 0.3s;
+        user-select: none;
+        border-radius: 0.5rem;
+      `,
+      onClick: (u) => {
+        u.stopPropagation(), l == null || l();
+      },
+      variants: H,
+      children: /* @__PURE__ */ d(
+        t.div,
+        {
+          className: s(
+            "py-1.5 px-3 rounded-lg",
+            n`
+            padding-top: 0.375rem;
+            padding-bottom: 0.375rem;
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
+            border-radius: 0.5rem;
+          `
+          ),
+          whileTap: { scale: 0.9 },
+          children: [
+            /* @__PURE__ */ o(
+              t.div,
+              {
+                className: s(
+                  n`
+              margin-bottom: 0.375rem;
+              display: flex;
+              justify-content: center;
+            `
+                ),
+                children: f
+              }
+            ),
+            /* @__PURE__ */ o(t.div, { children: x })
+          ]
+        }
+      )
+    }
+  );
+}, Q = (h) => {
+  const {
+    showInfoButton: f = !0,
+    showRemoveButton: x = !0,
+    showShareButton: l = !0,
+    showSizeButton: k = !0,
+    onInfoClick: m,
+    onShareClick: p,
+    onRemoveClick: u
+  } = h, {
+    contextMenu: r,
+    setContextMenu: S,
+    hideContextMenu: N,
+    setShowInfoItemData: z,
+    removeItem: y,
+    updateItemConfig: B
+  } = Y(), { theme: R } = M(), { light: a, dark: c } = $.getTheme(R), { data: A } = r ?? {}, { config: b = {} } = A ?? {}, I = () => {
+    var g;
+    const e = X[(g = r == null ? void 0 : r.data) == null ? void 0 : g.type], i = [];
+    for (let C = 1; C <= ((e == null ? void 0 : e.maxRow) ?? 2); C++)
+      for (let v = 1; v <= ((e == null ? void 0 : e.maxCol) ?? 2); v++)
+        i.push(`${C}x${v}`);
+    return i;
+  };
+  return /* @__PURE__ */ o(D, { children: r && /* @__PURE__ */ d(
+    t.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      onMouseDown: (e) => {
+        e.stopPropagation(), e.preventDefault();
+      },
+      children: [
+        /* @__PURE__ */ o(
+          t.div,
+          {
+            className: s(
+              n`
+                border-radius: 0.5rem;
+                overflow: hidden;
+                background-color: ${a.contextMenuBackgroundColor};
+                box-shadow: 0 0 0.5rem ${a.contextMenuShadowColor};
+                @media (prefers-color-scheme: dark) {
+                  background-color: ${c.contextMenuBackgroundColor};
+                  box-shadow: 0 0 0.5rem ${c.contextMenuShadowColor};
+                }
+              `
+            ),
+            children: k && b.allowResize !== !1 && /* @__PURE__ */ o(
+              t.ul,
+              {
+                className: n`
+                  background-color: white;
+                  padding: 0.25rem;
+                  margin: 0;
+                `,
+                children: [
+                  {
+                    label: "修改大小",
+                    key: "size",
+                    icon: /* @__PURE__ */ o(T, { size: 14 }),
+                    items: I().map((e) => ({
+                      label: e,
+                      key: e,
+                      onClick: () => {
+                        const [i, g] = e.split("x").map(Number);
+                        B(r.data.id, {
+                          row: i,
+                          col: g
+                        });
+                      }
+                    }))
+                  }
+                ].map((e) => /* @__PURE__ */ d(
+                  t.li,
+                  {
+                    className: n`
+                      padding-top: 0.5rem;
+                      padding-bottom: 0.5rem;
+                      padding-left: 0.75rem;
+                      padding-right: 0.75rem;
+                    `,
+                    children: [
+                      /* @__PURE__ */ d(
+                        t.p,
+                        {
+                          className: n`
+                        display: flex;
+                        align-items: center;
+                        font-size: 0.875rem;
+                        line-height: 1.25rem;
+                        gap: 0.5rem;
+                        padding-bottom: 0.5rem;
+                        margin: 0;
+                      `,
+                          children: [
+                            e.icon,
+                            " ",
+                            e.label
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ o(
+                        t.div,
+                        {
+                          className: n`
+                        display: grid;
+                        grid-template-columns: repeat(2, minmax(0, 1fr));
+                        gap: 0.25rem;
+                      `,
+                          children: e.items.map((i) => /* @__PURE__ */ o(
+                            t.div,
+                            {
+                              className: s(
+                                "py-1 px-2 hover:bg-gray-100 rounded transition-all cursor-pointer text-center text-sm",
+                                n`
+                              padding-top: 0.25rem;
+                              padding-bottom: 0.25rem;
+                              padding-left: 0.5rem;
+                              padding-right: 0.5rem;
+                              border-radius: 0.25rem;
+                              transition: all 0.3s;
+                              font-size: 0.875rem;
+                              line-height: 1.25rem;
+                              cursor: pointer;
+                              text-align: center;
+                              color: ${a.contextMenuTextColor};
+                              @media (prefers-color-scheme: dark) {
+                                color: ${c.contextMenuTextColor};
+                              }
+                              &:hover {
+                                background-color: ${a.contextMenuActiveColor};
+                                @media (prefers-color-scheme: dark) {
+                                  background-color: ${c.contextMenuActiveColor};
+                                }
+                              }
+                            `,
+                                `${b.row}x${b.col}` === i.key && n`
+                                background-color: ${a.contextMenuActiveColor};
+                                @media (prefers-color-scheme: dark) {
+                                  background-color: ${c.contextMenuActiveColor};
+                                }
+                              `
+                              ),
+                              onClick: i.onClick,
+                              children: i.label
+                            },
+                            i.key
+                          ))
+                        }
+                      )
+                    ]
+                  },
+                  e.key
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ d(
+          t.div,
+          {
+            className: s(
+              n`
+                background-color: ${a.contextMenuBackgroundColor};
+                box-shadow: 0 0 0.5rem ${a.contextMenuShadowColor};
+                @media (prefers-color-scheme: dark) {
+                  background-color: ${c.contextMenuBackgroundColor};
+                  box-shadow: 0 0 0.5rem ${c.contextMenuShadowColor};
+                }
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                margin-top: 0.5rem;
+                border-radius: 0.5rem;
+                overflow: hidden;
+                padding: 0.25rem;
+              `
+            ),
+            children: [
+              l && /* @__PURE__ */ o(
+                w,
+                {
+                  icon: /* @__PURE__ */ o(j, { size: 20 }),
+                  title: "分享",
+                  onClick: () => {
+                    if (p) {
+                      p(r.data);
+                      return;
+                    }
+                  }
+                }
+              ),
+              f && /* @__PURE__ */ o(
+                w,
+                {
+                  icon: /* @__PURE__ */ o(L, { size: 20 }),
+                  title: "信息",
+                  onClick: () => {
+                    if (m) {
+                      m(r.data);
+                      return;
+                    }
+                    z({
+                      ...r.data,
+                      pageX: r.pageX,
+                      pageY: r.pageY
+                    }), N();
+                  }
+                }
+              ),
+              x && /* @__PURE__ */ o(
+                w,
+                {
+                  icon: /* @__PURE__ */ o(P, { size: 20 }),
+                  title: "移除",
+                  onClick: () => {
+                    if (u) {
+                      u(r.data, y);
+                      return;
+                    }
+                    S(null), y(r.data.id);
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  Q as default
+};

package/dist/components/desktop/index.js

@@ -0,0 +1,40 @@
+import "./index.css";
+import { jsx as t } from "react/jsx-runtime";
+import f from "./sortable.js";
+import { SortableConfigProvider as h } from "./context/config/context.js";
+import { SortableStateProvider as B } from "./context/state/context.js";
+const P = (e) => {
+  const {
+    list: o,
+    onChange: r,
+    storageKey: i,
+    enableCaching: n,
+    theme: a,
+    noLetters: s,
+    contextMenu: l,
+    contextMenuBuilder: c,
+    itemBuilder: m,
+    itemIconBuilder: d,
+    pagingDotBuilder: g,
+    pagingDotsBuilder: p,
+    ...u
+  } = e;
+  return /* @__PURE__ */ t(B, { ...{
+    list: o,
+    onChange: r,
+    storageKey: i,
+    enableCaching: n
+  }, children: /* @__PURE__ */ t(h, { ...{
+    theme: a,
+    noLetters: s,
+    contextMenu: l,
+    pagingDotsBuilder: p,
+    pagingDotBuilder: g,
+    itemBuilder: m,
+    itemIconBuilder: d,
+    contextMenuBuilder: c
+  }, children: /* @__PURE__ */ t(f, { ...u }) }) });
+};
+export {
+  P as default
+};