zs_library 0.4.10 → 0.4.11

package/dist/components/desktop/sortable.js

@@ -0,0 +1,272 @@
+import "./index.css";
+import { jsxs as G, Fragment as O, jsx as i } from "react/jsx-runtime";
+import { css as a, cx as c } from "@emotion/css";
+import { useRef as I, useMemo as T } from "react";
+import B from "react-slick";
+import { ReactSortable as E } from "react-sortablejs";
+/* empty css                                                                                                           */
+/* empty css                                                                                                     */
+import P from "./items/group-item.js";
+import X from "./items/modal/group-item-modal.js";
+import z from "./items/modal/info-modal.js";
+import { ghostClass as F } from "./style.js";
+import { useSortableState as J } from "./context/state/hooks.js";
+import { useSortableConfig as _ } from "./context/config/hooks.js";
+import q from "./items/sortable-item.js";
+const at = (x) => {
+  const {
+    pagination: s = { position: "bottom" },
+    className: y,
+    sliderProps: D,
+    sliderRef: u,
+    onItemClick: n
+  } = x, m = I(null), v = I(null), {
+    list: l,
+    setList: S,
+    setListStatus: d,
+    showInfoItemData: w,
+    setShowInfoItemData: C,
+    openGroupItemData: M,
+    setOpenGroupItemData: j,
+    setMoveItemId: f,
+    setMoveTargetId: p,
+    addItem: L
+  } = J(), { pagingDotBuilder: g, pagingDotsBuilder: h, itemBuilder: b } = _(), N = T(() => s === !1 ? {} : {
+    top: a`
+        display: flex;
+        flex-direction: column;
+        .slick-list {
+          order: 1;
+        }
+        .slick-dots {
+          position: static;
+        }
+      `,
+    bottom: a`
+        .slick-dots {
+          position: static;
+        }
+      `,
+    left: a`
+        .slick-dots {
+          position: absolute;
+          width: auto;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          transform: translateX(-100%);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .slick-dots-default {
+            flex-direction: column;
+          }
+        }
+      `,
+    right: a`
+        .slick-dots {
+          position: absolute;
+          width: auto;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          transform: translateX(100%);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .slick-dots-default {
+            flex-direction: column;
+          }
+        }
+      `
+  }[s.position ?? "bottom"], [s]);
+  return /* @__PURE__ */ G(O, { children: [
+    /* @__PURE__ */ i(
+      B,
+      {
+        useCSS: !0,
+        useTransform: !0,
+        arrows: !1,
+        ref: u ?? m,
+        infinite: !1,
+        dots: !0,
+        touchMove: !1,
+        lazyLoad: "anticipated",
+        className: c(
+          N,
+          a`
+            .slick-track {
+              display: flex;
+              align-items: stretch;
+            }
+            .slick-slide {
+              display: flex;
+              align-self: stretch;
+              height: unset;
+              > div {
+                display: flex;
+                align-self: stretch;
+                width: 100%;
+              }
+            }
+          `,
+          y
+        ),
+        customPaging: (r) => {
+          var t, e;
+          return g ? g(l[r], r) : /* @__PURE__ */ i(
+            "div",
+            {
+              onDragEnter: () => {
+                var o;
+                (o = (u ?? m).current) == null || o.slickGoTo(r);
+              },
+              children: (e = (t = l[r]) == null ? void 0 : t.data) == null ? void 0 : e.name
+            }
+          );
+        },
+        appendDots: (r) => h ? h(r) : s === !1 ? /* @__PURE__ */ i("div", {}) : /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+          "ul",
+          {
+            ref: v,
+            className: c(
+              "slick-dots-default",
+              a`
+                    padding: 0.5rem;
+                    display: inline-flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 0.5rem;
+                    background-color: rgba(0, 0, 0, 0.1);
+                    border-radius: 0.5rem;
+                    .slick-active {
+                      background-color: rgba(0, 0, 0, 0.3);
+                      color: white;
+                      padding: 0.25rem;
+                      border-radius: 0.25rem;
+                    }
+                    li {
+                      margin: 0;
+                      width: auto;
+                      height: auto;
+                    }
+                  `
+            ),
+            children: r
+          }
+        ) }),
+        ...D,
+        children: l.map((r) => /* @__PURE__ */ i(
+          "div",
+          {
+            onDrop: (t) => {
+              t.preventDefault();
+              const e = t.dataTransfer.getData("text/plain");
+              if (e !== "")
+                try {
+                  L(JSON.parse(e), [r.id]);
+                } catch (o) {
+                  console.log("drag error", o);
+                }
+            },
+            onDragOver: (t) => {
+              t.preventDefault();
+            },
+            children: /* @__PURE__ */ i(
+              E,
+              {
+                className: c(
+                  a`
+                    display: grid;
+                    transition: all 0.3s;
+                    grid-template-columns: repeat(auto-fill, 96px);
+                    grid-auto-flow: dense;
+                    grid-auto-rows: 96px;
+                    place-items: center;
+                    justify-content: center;
+                    align-items: center;
+                  `
+                ),
+                animation: 150,
+                fallbackOnBody: !0,
+                swapThreshold: 0.65,
+                group: "nested",
+                list: r.children ?? [],
+                setList: (t) => S(t, [r.id]),
+                filter: ".drag-disabled",
+                onMove: (t) => {
+                  d("onMove");
+                  const { dragged: e, related: o } = t, R = e.dataset, k = o.dataset;
+                  return p(null), !((Object.keys(k).length === 0 || k.parentIds) && Number(R.childrenLength) > 0 && o.classList.contains("sortable-group-item"));
+                },
+                onStart: (t) => {
+                  const e = t.item.dataset;
+                  e != null && e.id && f(e.id), d("onMove");
+                },
+                onEnd: () => {
+                  f(null), p(null), d(null);
+                },
+                ghostClass: F,
+                children: (r.children ?? []).map((t, e) => {
+                  let o;
+                  if (b)
+                    return b(t);
+                  switch (t.type) {
+                    case "group":
+                    case "app":
+                      o = /* @__PURE__ */ i(
+                        P,
+                        {
+                          data: t,
+                          itemIndex: e,
+                          parentIds: [r.id, t.id],
+                          onClick: n
+                        },
+                        t.id
+                      );
+                      break;
+                    default:
+                      o = /* @__PURE__ */ i(
+                        q,
+                        {
+                          data: t,
+                          itemIndex: e,
+                          onClick: n
+                        },
+                        t.id
+                      );
+                      break;
+                  }
+                  return o;
+                })
+              }
+            )
+          },
+          r.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ i(
+      z,
+      {
+        data: w,
+        onClose: () => {
+          C(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ i(
+      X,
+      {
+        data: M,
+        onClose: () => {
+          j(null);
+        },
+        onItemClick: n
+      }
+    )
+  ] });
+};
+export {
+  at as default
+};

package/dist/components/desktop/style.js

@@ -0,0 +1,18 @@
+import "./index.css";
+import { css as a } from "@emotion/css";
+const r = a`
+  padding: 8px;
+  transition: all 0.2s;
+  > div {
+    transition: all 0.2s;
+    border: 2px solid aquamarine;
+    background-color: transparent;
+    > div {
+      opacity: 0;
+      transition: all 0.2s;
+    }
+  }
+`;
+export {
+  r as ghostClass
+};

package/dist/components/desktop/theme.js

@@ -0,0 +1,32 @@
+import "./index.css";
+const r = {
+  token: {
+    itemNameColor: "#1a1a1a",
+    itemIconBackgroundColor: "white",
+    itemIconShadowColor: "rgba(0, 0, 0, 0.1)",
+    groupItemIconBackgroundColor: "rgba(255, 255, 255, 0.1)",
+    groupItemIconShadowColor: "rgba(0, 0, 0, 0.1)",
+    groupItemModalBackgroundColor: "rgba(255, 255, 255, 0.8)",
+    contextMenuTextColor: "black",
+    contextMenuActiveColor: "#f3f4f6",
+    contextMenuBackgroundColor: "white",
+    contextMenuShadowColor: "rgba(0, 0, 0, 0.1)"
+  }
+}, e = {
+  token: {
+    itemNameColor: "white",
+    itemIconBackgroundColor: "#1f2937",
+    itemIconShadowColor: "rgba(0, 0, 0, 0.1)",
+    groupItemIconBackgroundColor: "rgba(0, 0, 0, 0.1)",
+    groupItemIconShadowColor: "rgba(0, 0, 0, 0.1)",
+    groupItemModalBackgroundColor: "rgba(0, 0, 0, 0.1)",
+    contextMenuTextColor: "white",
+    contextMenuActiveColor: "#1a1a1a",
+    contextMenuBackgroundColor: "#1a1a1a",
+    contextMenuShadowColor: "rgba(255, 255, 255, 0.1)"
+  }
+};
+export {
+  e as themeDark,
+  r as themeLight
+};

package/dist/components/desktop/utils.js

@@ -0,0 +1,15 @@
+var c = Object.defineProperty;
+var k = (o, t, n) => t in o ? c(o, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[t] = n;
+var s = (o, t, n) => k(o, typeof t != "symbol" ? t + "" : t, n);
+import "./index.css";
+import { themeLight as u, themeDark as l } from "./theme.js";
+class a {
+}
+/** 清理重复id */
+s(a, "uniqueArray", (t) => t.reduce((n, r) => n.find((i) => i.id === r.id) ? n : n.concat([r]), [])), s(a, "getTheme", (t) => {
+  const n = u.token, r = l.token, d = { ...n, ...t == null ? void 0 : t.token }, i = { ...r, ...t == null ? void 0 : t.token };
+  return { light: d, dark: i };
+});
+export {
+  a as default
+};

package/dist/components/dock/dock-desktop.js

@@ -0,0 +1,83 @@
+import "./index.css";
+import { jsx as t, jsxs as M } from "react/jsx-runtime";
+import { useMotionValue as N, motion as i, useTransform as n, useSpring as o, AnimatePresence as T } from "framer-motion";
+import { cn as j } from "./utils.js";
+import { useRef as X, useState as C } from "react";
+const D = (a) => {
+  const { mouseX: c, title: d, icon: s, href: e } = a, m = X(null), r = n(c, (I) => {
+    var f;
+    const u = ((f = m.current) == null ? void 0 : f.getBoundingClientRect()) ?? { x: 0, width: 0 };
+    return I - u.x - u.width / 2;
+  }), h = n(r, [-150, 0, 150], [40, 80, 40]), p = n(r, [-150, 0, 150], [40, 80, 40]), g = n(
+    r,
+    [-150, 0, 150],
+    [20, 40, 20]
+  ), x = n(
+    r,
+    [-150, 0, 150],
+    [20, 40, 20]
+  ), y = o(h, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12
+  }), b = o(p, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12
+  }), v = o(g, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12
+  }), w = o(x, {
+    mass: 0.1,
+    stiffness: 150,
+    damping: 12
+  }), [k, l] = C(!1);
+  return /* @__PURE__ */ t("a", { href: e, children: /* @__PURE__ */ M(
+    i.div,
+    {
+      ref: m,
+      style: { width: y, height: b },
+      onMouseEnter: () => l(!0),
+      onMouseLeave: () => l(!1),
+      className: "aspect-square rounded-full bg-gray-200 dark:bg-neutral-800 flex items-center justify-center relative",
+      children: [
+        /* @__PURE__ */ t(T, { children: k && /* @__PURE__ */ t(
+          i.div,
+          {
+            initial: { opacity: 0, y: 10, x: "-50%" },
+            animate: { opacity: 1, y: 0, x: "-50%" },
+            exit: { opacity: 0, y: 2, x: "-50%" },
+            className: "px-2 py-0.5 whitespace-pre rounded-md bg-gray-100 border dark:bg-neutral-800 dark:border-neutral-900 dark:text-white border-gray-200 text-neutral-700 absolute left-1/2 -translate-x-1/2 -top-8 w-fit text-xs",
+            children: d
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          i.div,
+          {
+            style: { width: v, height: w },
+            className: "flex items-center justify-center",
+            children: s
+          }
+        )
+      ]
+    }
+  ) });
+}, B = (a) => {
+  const { items: c, className: d } = a, s = N(1 / 0);
+  return /* @__PURE__ */ t(
+    i.div,
+    {
+      onMouseMove: (e) => s.set(e.pageX),
+      onMouseLeave: () => s.set(1 / 0),
+      className: j(
+        "mx-auto hidden md:flex h-16 gap-4 items-end  rounded-2xl bg-gray-50 dark:bg-neutral-900 px-4 pb-3",
+        d
+      ),
+      children: c.map((e) => /* @__PURE__ */ t(D, { mouseX: s, ...e }, e.title))
+    }
+  );
+};
+export {
+  B as default
+};

package/dist/components/dock/dock-mobile.js

@@ -0,0 +1,69 @@
+import "./index.css";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { cn as h } from "./utils.js";
+import { AnimatePresence as p, motion as r } from "framer-motion";
+import { RiMoreLine as y } from "@remixicon/react";
+const j = (o) => {
+  const { items: a, className: s, collapseIcon: l, autoHidden: c = !1 } = o, [n, d] = u(!1), m = () => {
+    d(!n);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: h(
+        "relative block",
+        c ? "md:hidden" : "",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ e(p, { children: n && /* @__PURE__ */ e(
+          r.div,
+          {
+            layoutId: "nav",
+            className: "absolute bottom-full mb-2 inset-x-0 flex flex-col gap-2",
+            children: a.map((t, i) => /* @__PURE__ */ e(
+              r.div,
+              {
+                initial: { opacity: 0, y: 10 },
+                animate: {
+                  opacity: 1,
+                  y: 0
+                },
+                exit: {
+                  opacity: 0,
+                  y: 10,
+                  transition: {
+                    delay: i * 0.05
+                  }
+                },
+                transition: { delay: (a.length - 1 - i) * 0.05 },
+                children: /* @__PURE__ */ e(
+                  "a",
+                  {
+                    href: t.href,
+                    className: "h-10 w-10 rounded-full bg-gray-50 dark:bg-neutral-900 flex items-center justify-center",
+                    children: /* @__PURE__ */ e("div", { className: "h-4 w-4", children: t.icon })
+                  },
+                  t.title
+                )
+              },
+              t.title
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: m,
+            className: "h-10 w-10 rounded-full bg-gray-50 dark:bg-neutral-800 flex items-center justify-center",
+            children: l || /* @__PURE__ */ e(y, { className: "h-5 w-5 text-neutral-500 dark:text-neutral-400" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  j as default
+};

package/dist/components/dock/index.js

@@ -0,0 +1,24 @@
+import "./index.css";
+import { jsxs as l, Fragment as p, jsx as e } from "react/jsx-runtime";
+import t from "./dock-desktop.js";
+import r from "./dock-mobile.js";
+const k = (a) => {
+  const { items: o, desktopClassName: i, mobileClassName: c, ...s } = a;
+  return /* @__PURE__ */ l(p, { children: [
+    /* @__PURE__ */ e(t, { items: o, className: i, ...s }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        items: o,
+        className: c,
+        autoHidden: !0,
+        ...s
+      }
+    )
+  ] });
+}, m = k;
+m.Desktop = t;
+m.Mobile = r;
+export {
+  m as default
+};

package/dist/components/dock/utils.js

@@ -0,0 +1,9 @@
+import "./index.css";
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
+}
+export {
+  n as cn
+};