ono-react-element 0.0.0

package/dist/es/AutoSliderList-DqaQhmce.js

@@ -0,0 +1,106 @@
+import { j as y } from "./dependencies-DWmdjl5u.js";
+import { p as z } from "./utils-ziqvBIOU.js";
+import { useState as a, useRef as H, useMemo as j, useEffect as g, cloneElement as V } from "react";
+import { u as W } from "./hooks-Bj-aT2k8.js";
+var x = /* @__PURE__ */ ((s) => (s.Horizontal = "Horizontal", s.Vertical = "Vertical", s))(x || {});
+const q = ({
+  list: s,
+  style: C,
+  disable: n,
+  children: m,
+  sliderBox: v,
+  className: A,
+  sliderStyle: E,
+  duration: c = 300,
+  sliderClassName: $,
+  currentIndex: d = 0,
+  direction: i = x.Horizontal,
+  sliderTransitionTimingFunction: h = "ease-in-out"
+}) => {
+  const [I, L] = a(!1), [t, S] = a(0), [f, R] = a({
+    t: 0,
+    l: 0
+  }), [u, k] = a({
+    w: 0,
+    h: 0
+  }), l = H(null), w = H(null), B = j(
+    () => ["width", "height", "transform"].map(
+      (e) => `${e} ${c / 1e3}s ${h}`
+    ).join(","),
+    [i, c, h]
+  ), N = j(
+    () => ({
+      width: u.w,
+      height: u.h,
+      transition: I ? B : "initial",
+      transform: `translate(${f.l}px, ${f.t}px)`
+    }),
+    [u, f]
+  ), M = () => {
+    if (typeof t != "number" || !l.current || !w.current) return;
+    const e = Array.from(l.current.children).slice(
+      1
+    );
+    e.forEach((r) => {
+      r.style.position = "relative", r.style.cursor = n ? "not-allowed" : "pointer", r.style.zIndex = "1";
+    });
+    const o = window.getComputedStyle(l.current), p = {
+      t: i === "Horizontal" ? z(o.paddingTop) : e[t].offsetTop,
+      l: i === "Horizontal" ? e[t].offsetLeft : z(o.paddingLeft)
+    };
+    R(p), k({
+      w: e[t].offsetWidth,
+      h: e[t].offsetHeight
+    }), setTimeout(() => L(!0), c);
+  }, { w: P, h: T } = W();
+  return g(() => {
+    S(d);
+  }, [d]), g(() => {
+    M();
+  }, [t, P, T, n]), /* @__PURE__ */ y.jsxs(
+    "ul",
+    {
+      ref: l,
+      className: [
+        "ono-auto-slider-list-container",
+        A,
+        n ? "ono-auto-slider-list-is-disable" : ""
+      ].filter(Boolean).join(" "),
+      style: {
+        flexDirection: i === "Horizontal" ? "row" : "column",
+        ...C
+      },
+      children: [
+        /* @__PURE__ */ y.jsx(
+          "li",
+          {
+            ref: w,
+            className: ["ono-auto-slider-list-slider", $].filter(Boolean).join(" "),
+            style: { ...E, ...N },
+            children: v
+          }
+        ),
+        s.map(
+          (e, o) => V(
+            m({ item: e, index: o, isActive: o === t }),
+            {
+              onClick: (p) => {
+                if (n) return;
+                const r = m({
+                  item: e,
+                  index: o,
+                  isActive: o === t
+                }).props.onClick;
+                r && r(p), S(o);
+              }
+            }
+          )
+        )
+      ]
+    }
+  );
+};
+export {
+  q as A,
+  x as D
+};

package/dist/es/AvatarCrop-DzGw2FVQ.js

@@ -0,0 +1,225 @@
+import { j as p } from "./dependencies-DWmdjl5u.js";
+import { useState as h, useRef as T, useEffect as q } from "react";
+const K = ({
+  imageFile: v,
+  cvsW: $ = 520,
+  maskBG: B = "rgba(0, 0, 0, 0.5)",
+  border: y = "4px solid #fff",
+  wheelScale: j = 0.1,
+  setCtx: g,
+  maskInfo: e,
+  setMaskInfo: d,
+  imageStartState: D,
+  setImageStartState: R,
+  imageState: n,
+  setImageState: a
+}) => {
+  const [x, E] = h(), [z, U] = h({ w: 0, h: 0 }), [c, X] = h({ w: 0, h: 0 }), [L, u] = h({ x: 0, y: 0 }), [C, b] = h(!1), f = T(null), i = T(null), s = (t, r) => {
+    r((l) => ({
+      ...l,
+      ...t
+    }));
+  }, O = () => {
+    if (!f.current) return;
+    const { width: t } = f.current.getBoundingClientRect();
+    G(t), U({ w: t, h: t });
+  }, N = () => {
+    const t = y.split(" ");
+    let r = 0;
+    return t.forEach((l) => {
+      l.includes("px") && (r = Number(l.split("px")[0]));
+    }), r;
+  }, G = (t) => {
+    const r = new Image();
+    typeof v == "string" ? r.src = v : r.src = URL.createObjectURL(v), r.onload = () => {
+      var P;
+      let l = 1, o = r.width, w = r.height;
+      o > w ? (l = o / t, o = t, w = w / l, s({ w }, d)) : (l = w / t, w = t, o = o / l, s({ w: o }, d));
+      const M = (t - o) / 2, Y = (t - w) / 2;
+      s({ w: r.width, h: r.height }, X), E(r), s(
+        {
+          w: o,
+          h: w,
+          t: Y,
+          l: M
+        },
+        a
+      ), R({ w: o, h: w, t: Y, l: M }), M > Y ? s({ l: M }, d) : s({ l: Y }, d), g((P = i.current) == null ? void 0 : P.getContext("2d"));
+    };
+  }, A = () => {
+    b(!1), n.l > e.l && s({ l: e.l }, a), n.t > e.l && s({ t: e.l }, a), -n.l > n.w - e.l - e.w && s(
+      { l: -(n.w - e.l - e.w) },
+      a
+    ), -n.t > n.h - e.l - e.w && s(
+      { t: -(n.h - e.l - e.w) },
+      a
+    );
+  }, H = (t, r) => {
+    const l = r === "in" ? t * j : -t * j;
+    let o = t + l;
+    return o > c.w && (o = c.w), o < D.w && (o = D.w), o;
+  }, J = (t) => {
+    t.preventDefault(), t.stopPropagation();
+    const r = t.deltaY < 0 ? "in" : "out", l = H(n.w, r), o = l / c.w;
+    s(
+      {
+        w: l,
+        h: c.h * o
+      },
+      a
+    ), A();
+  };
+  return q(() => {
+    O();
+  }, [f]), q(() => {
+    if (!i.current || !x) return;
+    const t = i.current.getContext("2d");
+    t && (t.clearRect(
+      0,
+      0,
+      i.current.width,
+      i.current.height
+    ), t.drawImage(
+      x,
+      n.l,
+      n.t,
+      n.w,
+      n.h
+    ));
+  }, [i, x, n]), /* @__PURE__ */ p.jsxs(
+    "div",
+    {
+      ref: f,
+      className: "ono-avatar-canvas",
+      style: {
+        width: $,
+        cursor: C ? "grabbing" : "grab"
+      },
+      onWheel: J,
+      onMouseUp: A,
+      onMouseLeave: A,
+      children: [
+        /* @__PURE__ */ p.jsx(
+          "canvas",
+          {
+            width: z.w,
+            height: z.h,
+            ref: i,
+            onMouseDown: (t) => {
+              s({ x: t.clientX, y: t.clientY }, u), b(!0);
+            },
+            onMouseMove: (t) => {
+              if (C) {
+                const r = t.clientX - L.x, l = t.clientY - L.y;
+                (Math.abs(r) > 10 || Math.abs(l) > 10) && (s(
+                  {
+                    t: n.t + l,
+                    l: n.l + r
+                  },
+                  a
+                ), s({ x: t.clientX, y: t.clientY }, u));
+              }
+            }
+          }
+        ),
+        x && /* @__PURE__ */ p.jsx("div", { className: "ono-avatar-mask", children: /* @__PURE__ */ p.jsx(
+          "div",
+          {
+            style: {
+              border: y,
+              boxShadow: `${B} 0 0 0 10000px`,
+              width: `${e.w + N() * 2}px`,
+              height: `${e.w + N() * 2}px`
+            }
+          }
+        ) })
+      ]
+    }
+  );
+}, Z = ({
+  imageFile: v,
+  cvsW: $ = 520,
+  maskBG: B = "rgba(0, 0, 0, 0.5)",
+  border: y = "4px solid #fff",
+  wheelScale: j = 0.1,
+  children: g
+}) => {
+  const [e, d] = h({
+    w: 0,
+    // 图片初始宽度
+    h: 0,
+    // 图片初始高度
+    t: 0,
+    // 图片初始离顶部距离
+    l: 0
+    // 图片初始离左侧距离
+  }), [D, R] = h({
+    w: 0,
+    // 当前图片宽度
+    h: 0,
+    // 当前图片高度
+    t: 0,
+    // 圖片當前離頂部距離
+    l: 0
+    // 圖片當前離左邊距離
+  }), [n, a] = h({
+    w: 0,
+    // 蒙版寬度
+    l: 0
+    // 蒙版初始离左侧距离
+  }), [x, E] = h(), z = (c) => {
+    R({
+      w: e.w,
+      h: e.h,
+      t: e.t,
+      l: e.l
+    }), c == null || c();
+  }, U = (c, X) => {
+    if (!x) return;
+    const L = x.getImageData(
+      n.l,
+      n.l,
+      n.w,
+      n.w
+    ), u = document.createElement("canvas"), C = u.getContext("2d");
+    if (u.width = n.w, u.height = n.w, !C) return;
+    const {
+      imageSaveType: b = "png",
+      dataSaveType: f = "base64",
+      quality: i = 100
+    } = X || {};
+    C.putImageData(L, 0, 0, 0, 0, n.w, n.w), f === "base64" ? c(u.toDataURL(`image/${b}`, i / 100)) : f === "blob" && u.toBlob(
+      (s) => {
+        if (s) return c(s);
+      },
+      `image/${b}`,
+      i / 100
+    );
+  };
+  return /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
+    /* @__PURE__ */ p.jsx(
+      K,
+      {
+        imageFile: v,
+        cvsW: $,
+        maskBG: B,
+        border: y,
+        wheelScale: j,
+        maskInfo: n,
+        setMaskInfo: a,
+        setCtx: E,
+        imageStartState: e,
+        setImageStartState: d,
+        imageState: D,
+        setImageState: R
+      }
+    ),
+    g == null ? void 0 : g({
+      handleConfirm: U,
+      handleReduction: z
+    })
+  ] });
+};
+export {
+  Z as A
+};

package/dist/es/Button-CdxyXFF4.js

@@ -0,0 +1,72 @@
+import { j as n } from "./dependencies-DWmdjl5u.js";
+import { useState as R, useRef as u, useEffect as f } from "react";
+const N = ({
+  onClick: d,
+  children: m,
+  disabled: s,
+  loading: e,
+  plain: p,
+  shape: c = "default",
+  htmlType: h = "button",
+  type: x = "primary",
+  className: j,
+  style: g,
+  icon: i
+}) => {
+  const [a, l] = R(!1), o = u(null), r = u(null), b = () => {
+    if (!o.current) return;
+    const t = o.current, C = t.getBoundingClientRect();
+    t.style.setProperty("--btn-height", C.height + "px");
+  }, L = () => {
+    if (!r.current) return;
+    const t = r.current;
+    e ? (l(!0), t.classList.add("ono-loading-start")) : (setTimeout(() => {
+      l(!1);
+    }, 300), t.classList.remove("ono-loading-start"), t.classList.add("ono-loading-end"));
+  }, y = () => [
+    `ono-btn-${x}`,
+    e || a ? "is-loading" : "",
+    e || i ? "is-icon" : "",
+    s ? "is-disabled" : "",
+    c === "round" ? "is-round" : c === "circle" ? "is-circle" : "",
+    p ? "is-plain" : "",
+    j ?? ""
+  ].filter(Boolean).join(" "), B = () => {
+    const t = /* @__PURE__ */ n.jsx("span", { ref: r, className: "ono-btn-icon", children: /* @__PURE__ */ n.jsx("span", { children: typeof e == "object" ? e.icon : /* @__PURE__ */ n.jsx(
+      "svg",
+      {
+        viewBox: "0 0 1024 1024",
+        focusable: "false",
+        "data-icon": "loading",
+        width: "1em",
+        height: "1em",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ n.jsx("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" })
+      }
+    ) }) });
+    return e || a ? t : i ? /* @__PURE__ */ n.jsx("span", { children: i }) : /* @__PURE__ */ n.jsx(n.Fragment, {});
+  };
+  return f(() => {
+    L();
+  }, [e, r]), f(() => {
+    b();
+  }, [o]), /* @__PURE__ */ n.jsxs(
+    "button",
+    {
+      ref: o,
+      className: y(),
+      type: h,
+      disabled: (typeof s == "function" ? s() : s) || !!e,
+      style: g,
+      onClick: d,
+      children: [
+        B(),
+        m
+      ]
+    }
+  );
+};
+export {
+  N as B
+};

package/dist/es/Card3D-sf3zmiHk.js

@@ -0,0 +1,41 @@
+import { j as a } from "./dependencies-DWmdjl5u.js";
+import { useState as j, useRef as R, useEffect as l } from "react";
+const $ = ({
+  src: r,
+  children: s,
+  enlarge: y = !1,
+  scale: i = 1.1,
+  shadow: c,
+  xRange: d = [-10, 10],
+  yRange: p = [-10, 10],
+  borderRadius: v = 20
+}) => {
+  const [x, f] = j(!1), e = R(null), u = (t, o, n) => o / n * (t[1] - t[0]) + t[0], m = (t) => {
+    const { offsetX: o, offsetY: n } = t.nativeEvent, { offsetWidth: g, offsetHeight: M } = e.current, E = u(d, n, M), P = -u(p, o, g);
+    e.current.style.setProperty("--rx", `${E}deg`), e.current.style.setProperty("--ry", `${P}deg`);
+  };
+  return l(() => {
+    e.current && c && e.current.style.setProperty("--sd", c);
+  }, [e.current]), l(() => {
+    if (!s && !r) throw new Error("请传入children或者src属性");
+  }, [s, r]), /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      ref: e,
+      className: "ono-card",
+      style: {
+        borderRadius: v,
+        transform: `perspective(500px) scale(${x && y ? i : 1}) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))`
+      },
+      onMouseEnter: () => f(!0),
+      onMouseMove: m,
+      onMouseLeave: () => {
+        f(!1), e.current.style.setProperty("--rx", "0deg"), e.current.style.setProperty("--ry", "0deg");
+      },
+      children: s ?? /* @__PURE__ */ a.jsx("img", { src: r, alt: "图片" })
+    }
+  );
+};
+export {
+  $ as C
+};

package/dist/es/Checkbox-BN7rT73n.js

@@ -0,0 +1,62 @@
+import { j as C } from "./dependencies-DWmdjl5u.js";
+import { useState as d, useRef as k, useEffect as j } from "react";
+const w = ({
+  id: u,
+  style: c,
+  checked: s,
+  onChange: p,
+  className: l,
+  indeterminate: n = !1,
+  checkedColor: i = "#0077cc",
+  indeterminateStyle: y = "line",
+  indeterminateColor: a = "#0077cc"
+}) => {
+  const [f, h] = d(""), e = k(null), x = [
+    {
+      value: i,
+      name: "checkedColor"
+    },
+    {
+      value: a,
+      name: "indeterminateColor"
+    }
+  ], b = (t, r, o) => {
+    typeof t == "string" ? o.style.setProperty(`--${r}`, t) : o.style.setProperty(`--${r}`, `${t}px`);
+  }, m = () => {
+    if (!e.current) return;
+    const t = getComputedStyle(e.current);
+    f || h(t.borderColor), e.current.style.height = t.width, [
+      {
+        value: t.width,
+        name: "w"
+      },
+      {
+        value: s || n ? i : f,
+        name: "border-color"
+      },
+      ...x
+    ].forEach(({ value: r, name: o }) => {
+      r && b(r, o, e.current);
+    });
+  };
+  return j(() => {
+    m(), e.current && (e.current.indeterminate = n);
+  }, [e, l, c, n]), /* @__PURE__ */ C.jsx(
+    "input",
+    {
+      id: u,
+      type: "checkbox",
+      ref: e,
+      checked: s,
+      onChange: p,
+      className: [
+        l,
+        y === "line" ? "ono-checkbox-line" : "ono-checkbox-border"
+      ].filter(Boolean).join(" "),
+      style: c
+    }
+  );
+};
+export {
+  w as C
+};

package/dist/es/InjunctiveBox-CmZg4sIq.js

@@ -0,0 +1,39 @@
+import { j as i, R as j } from "./dependencies-DWmdjl5u.js";
+import { a as p } from "./hooks-Bj-aT2k8.js";
+let e = null, t;
+const B = ({
+  className: n,
+  content: r,
+  style: u,
+  onClick: c,
+  onDoubleClick: l,
+  onContextMenu: s,
+  onMouseDown: m,
+  onMouseUp: d,
+  onMouseEnter: a,
+  onMouseLeave: x,
+  onMouseMove: f,
+  isClickBoxToClose: v
+}) => (p("click", () => {
+  v && e && (e.remove(), e = null);
+}), /* @__PURE__ */ i.jsx(
+  "div",
+  {
+    className: n,
+    style: u,
+    onClick: c,
+    onDoubleClick: l,
+    onContextMenu: s,
+    onMouseDown: m,
+    onMouseUp: d,
+    onMouseEnter: a,
+    onMouseLeave: x,
+    onMouseMove: f,
+    children: typeof r == "function" ? r((o) => {
+      e && (e.remove(), e = null, o && o());
+    }) : r
+  }
+)), b = (n) => (R(n.isSingle || !1).render(/* @__PURE__ */ i.jsx(B, { ...n })), e), R = (n) => (n && e && t || (e = document.createElement("div"), document.body.appendChild(e), t = j.createRoot(e)), t);
+export {
+  b as i
+};