ono-react-element 0.0.0

package/dist/es/Modal-BAJOEXRd.js

@@ -0,0 +1,154 @@
+import { j as o } from "./dependencies-DWmdjl5u.js";
+import { f as i } from "./utils-ziqvBIOU.js";
+import { useRef as b, useEffect as j } from "react";
+import { p as R } from "./PortalRenderer-8Iur-eZp.js";
+const z = ({
+  title: s = "This is a modal title",
+  icon: v,
+  content: p = "This is a modal content",
+  okText: y = "confirm",
+  cancelText: g = "cancel",
+  isLoading: c,
+  confirmDisabled: C,
+  cancelDisabled: B,
+  position: r,
+  onConfirm: N = () => {
+  },
+  onCancel: w = () => {
+  },
+  mask: d = !0,
+  maskClosable: M = !1,
+  width: m,
+  btnClr: a,
+  footer: x = ({ OkBtn: e, CancelBtn: l }) => /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(l, {}),
+    /* @__PURE__ */ o.jsx(e, {})
+  ] }),
+  modalBody: h,
+  destroy: f
+}) => {
+  const e = b(null), l = b(null), k = [
+    {
+      label: "themeColor",
+      value: a || ""
+    },
+    {
+      label: "themeHoverColor",
+      value: a && i(a, "light", 10) || ""
+    },
+    {
+      label: "themeActiveColor",
+      value: a && i(a, "dark", 20) || ""
+    },
+    {
+      label: "themeDisabledClr",
+      value: a && i(a, "light", 20) || ""
+    }
+  ], P = () => {
+    if (!l.current) return;
+    const n = l.current.style;
+    m && n.setProperty("--width", m + "px"), r && (n.setProperty(
+      "--left",
+      (r.x / window.innerWidth * 100).toFixed(2) + "%"
+    ), n.setProperty(
+      "--top",
+      (r.y / window.innerHeight * 100).toFixed(2) + "%"
+    )), a && k.forEach(
+      (u) => n.setProperty(`--${u.label}`, u.value)
+    );
+  }, t = () => {
+    if (r) {
+      if (!l.current) return;
+      l.current.classList.remove("ono-modal-enter"), l.current.classList.add("ono-modal-leave"), setTimeout(() => {
+        f();
+      }, 300);
+    } else f();
+  };
+  return j(() => (e.current && (d ? e.current.showModal() : e.current.show()), () => {
+    e.current && e.current.close();
+  }), [e.current, d]), j(() => {
+    P();
+  }, [l]), /* @__PURE__ */ o.jsx(
+    "dialog",
+    {
+      ref: e,
+      className: "ono-modal",
+      onClick: () => M && t(),
+      children: h ? h(t) : /* @__PURE__ */ o.jsxs(
+        "div",
+        {
+          ref: l,
+          className: ["ono-modal-box", r ? "ono-modal-enter" : ""].join(
+            " "
+          ),
+          onClick: (n) => n.stopPropagation(),
+          children: [
+            /* @__PURE__ */ o.jsxs("div", { className: "ono-modal-box-body", children: [
+              v ?? /* @__PURE__ */ o.jsx("div", { className: "ono-modal-box-body-icon", children: /* @__PURE__ */ o.jsx(
+                "svg",
+                {
+                  color: "#faad14",
+                  viewBox: "64 64 896 896",
+                  focusable: "false",
+                  "data-icon": "exclamation-circle",
+                  width: "22px",
+                  height: "22px",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  style: { marginInlineEnd: "12px" },
+                  children: /* @__PURE__ */ o.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" })
+                }
+              ) }),
+              /* @__PURE__ */ o.jsxs("div", { className: "ono-modal-box-body-contentBar", children: [
+                /* @__PURE__ */ o.jsx("h1", { className: "ono-modal-box-body-contentBar-title", children: s }),
+                /* @__PURE__ */ o.jsx("p", { className: "ono-modal-box-body-contentBar-content", children: p })
+              ] })
+            ] }),
+            x && /* @__PURE__ */ o.jsx("div", { className: "ono-modal-box-footer", children: x({
+              OkBtn: () => /* @__PURE__ */ o.jsxs(
+                "button",
+                {
+                  className: "ono-modal-box-footer-confirmBtn",
+                  disabled: C || c,
+                  onClick: () => {
+                    N(), t();
+                  },
+                  children: [
+                    c && /* @__PURE__ */ o.jsx(
+                      "svg",
+                      {
+                        className: "ono-modal-box-footer-confirmBtn-loading",
+                        viewBox: "0 0 1024 1024",
+                        focusable: "false",
+                        "data-icon": "loading",
+                        fill: "currentColor",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ o.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" })
+                      }
+                    ),
+                    y ?? "Confirm"
+                  ]
+                }
+              ),
+              CancelBtn: () => /* @__PURE__ */ o.jsx(
+                "button",
+                {
+                  className: "ono-modal-box-footer-cancelBtn",
+                  disabled: B || c,
+                  onClick: () => {
+                    w(), t();
+                  },
+                  children: g ?? "Cancel"
+                }
+              ),
+              handleClose: () => t()
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}, D = (s) => R(z, s, "ono-modal");
+export {
+  D as M
+};

package/dist/es/Pagination-BtmtUkVw.js

@@ -0,0 +1,110 @@
+import { j as a } from "./dependencies-DWmdjl5u.js";
+const $ = ({
+  firstBtn: t,
+  lastBtn: r,
+  currentPage: n,
+  total: i,
+  prevBtn: c,
+  nextBtn: p,
+  styles: m,
+  className: x,
+  children: d,
+  onChange: e,
+  pageBtnClassName: j,
+  pageBtnActiveClassName: f,
+  hiddenNextBtnOnLastPage: N,
+  hiddenPrevBtnOnFirstPage: g
+}) => {
+  const b = Math.max(1, Math.min(n, i)), h = () => Array.from({ length: i }, (o, s) => /* @__PURE__ */ a.jsx(
+    "li",
+    {
+      className: "ono-pagination-base",
+      onClick: () => e(s + 1),
+      children: d ? d({ page: s + 1, isActive: n === s + 1 }) : /* @__PURE__ */ a.jsx(
+        "div",
+        {
+          className: `ono-pagination-base ${j ?? "ono-pagination-btn"} ${b === s + 1 ? f ?? "ono-pagination-btn-active" : ""}`,
+          children: s + 1
+        }
+      )
+    },
+    s + 1
+  )), u = () => {
+    const o = h();
+    if (o.length <= 7) return o;
+    const s = i - 1, l = b, y = l <= 3, k = l >= i - 2;
+    return y ? [
+      ...o.slice(0, l === 3 ? 4 : 3),
+      "...",
+      o[s]
+    ] : k ? [
+      o[0],
+      "...",
+      ...o.slice(l === i - 2 ? -4 : -3)
+    ] : [
+      o[0],
+      "...",
+      ...o.slice(l - 2, l + 1),
+      "...",
+      o[s]
+    ];
+  };
+  return /* @__PURE__ */ a.jsxs("ul", { className: `ono-pagination ${x}`, style: m, children: [
+    t && /* @__PURE__ */ a.jsx(
+      "li",
+      {
+        className: t ? "ono-pagination-base" : "ono-pagination-btn",
+        onClick: () => e(1),
+        children: t
+      }
+    ),
+    g && n === 1 ? null : /* @__PURE__ */ a.jsx(
+      "li",
+      {
+        className: "ono-pagination-base",
+        style: { cursor: n !== 1 ? "pointer" : "no-drop" },
+        onClick: () => {
+          n <= 1 || e(n - 1);
+        },
+        children: c ? typeof c == "function" ? c(n !== 1) : c : /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            className: c ? "ono-pagination-base" : "ono-pagination-btn",
+            children: "prevBtn"
+          }
+        )
+      }
+    ),
+    u(),
+    N && n === i ? null : /* @__PURE__ */ a.jsx(
+      "li",
+      {
+        className: "ono-pagination-base",
+        style: {
+          cursor: n !== i ? "pointer" : "no-drop"
+        },
+        onClick: () => {
+          n >= i ? e(i) : e(n + 1);
+        },
+        children: p ? typeof p == "function" ? p(n !== i) : p : /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            className: p ? "ono-pagination-base" : "ono-pagination-btn",
+            children: "nextBtn"
+          }
+        )
+      }
+    ),
+    r && /* @__PURE__ */ a.jsx(
+      "li",
+      {
+        className: r ? "ono-pagination-base" : "ono-pagination-btn",
+        onClick: () => e(i),
+        children: r
+      }
+    )
+  ] });
+};
+export {
+  $ as P
+};

package/dist/es/PortalRenderer-8Iur-eZp.js

@@ -0,0 +1,38 @@
+import { j as m, R as i } from "./dependencies-DWmdjl5u.js";
+const u = (n, r) => {
+  let e = null, t = null;
+  return r && (e = document.getElementById(r), e || (e = document.createElement("div"), e.id = r, document.body.appendChild(e))), n ? (t = document.getElementById(n), t || (t = document.createElement("div"), t.id = n, e ? e.appendChild(t) : document.body.appendChild(t))) : (t = document.createElement("div"), e ? e.appendChild(t) : document.body.appendChild(t)), { target: t, root: e };
+}, p = (n, r, e, t) => {
+  const { target: o, root: a } = u(e, t), c = (d) => {
+    var l;
+    typeof d == "function" && d(), e ? (l = document.getElementById(e)) == null || l.remove() : o.remove(), requestAnimationFrame(
+      () => a && a.children.length === 0 && a.remove()
+    );
+  };
+  if (o.__reactContainer$ !== void 0)
+    o.__reactContainer$.render(
+      /* @__PURE__ */ m.jsx(
+        n,
+        {
+          ...r,
+          destroy: c
+        }
+      )
+    );
+  else {
+    const d = i.createRoot(o);
+    o.__reactContainer$ = d, d.render(
+      /* @__PURE__ */ m.jsx(
+        n,
+        {
+          ...r,
+          destroy: c
+        }
+      )
+    );
+  }
+  return c;
+};
+export {
+  p
+};

package/dist/es/Radio-BmSpqdK8.js

@@ -0,0 +1,113 @@
+import { j as n } from "./dependencies-DWmdjl5u.js";
+import { useState as E, useRef as b, useEffect as S } from "react";
+const k = ({
+  name: m,
+  value: s,
+  style: d,
+  checked: a,
+  onChange: y,
+  children: o,
+  className: x,
+  radioW: j = 16,
+  radioGap: C = 4,
+  checkedColor: l = "#532ce1",
+  unCheckedColor: c = "transparent",
+  disabled: u = !1
+}) => {
+  const [e, i] = E(""), g = b(null), f = b(null), t = b(null), h = [
+    { value: j, name: "w" },
+    { value: C, name: "gap" },
+    {
+      value: l,
+      name: "checkedColor"
+    },
+    {
+      value: c,
+      name: "unCheckedColor"
+    }
+  ], v = (r, p, R) => {
+    const w = typeof r == "number";
+    R.style.setProperty(
+      `--${p}`,
+      w ? `${r}px` : r
+    );
+  }, N = () => {
+    if (!t.current || !f.current) return;
+    h.forEach(({ value: p, name: R }) => {
+      p && v(p, R, f.current);
+    });
+    const r = getComputedStyle(t.current);
+    e || i(r.borderColor), a ? t.current.style.borderColor = l : t.current.style.borderColor = e;
+  };
+  return S(() => {
+    N();
+  }, [f, t, a, e]), /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      ref: f,
+      className: ["ono-radio-box", x].join(" "),
+      style: d,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            ref: t,
+            className: "ono-radio",
+            onClick: () => {
+              var r;
+              return (r = g.current) == null ? void 0 : r.click();
+            },
+            children: /* @__PURE__ */ n.jsx(
+              "input",
+              {
+                type: "radio",
+                name: m,
+                ref: g,
+                value: s + "",
+                checked: a,
+                disabled: u,
+                id: s + "" + o,
+                onChange: y
+              }
+            )
+          }
+        ),
+        o && /* @__PURE__ */ n.jsx("label", { htmlFor: s + "" + o || "", children: o })
+      ]
+    }
+  );
+}, _ = ({
+  name: m,
+  style: s,
+  options: d,
+  onChange: a,
+  className: y,
+  radioW: o = 16,
+  radioGap: x = 4,
+  labelPosition: j = "right",
+  checkedColor: C = "#532ce1",
+  unCheckedColor: l = "transparent",
+  value: c
+}) => /* @__PURE__ */ n.jsx("div", { className: ["ono-radio-group", y].join(" "), style: s, children: d.map(({ label: u, value: e, disabled: i }) => /* @__PURE__ */ n.jsx(
+  k,
+  {
+    name: m,
+    value: e,
+    radioW: o,
+    radioGap: x,
+    style: {
+      flexDirection: j === "left" ? "row-reverse" : "row"
+    },
+    checkedColor: C,
+    unCheckedColor: l,
+    onChange: () => a(e),
+    checked: c + "" == e + "",
+    disabled: typeof i == "function" ? i(c) : i || !1,
+    children: u
+  },
+  u
+)) });
+export {
+  k as R,
+  _ as a
+};

package/dist/es/SvgImg-Bcmzdjzl.js

@@ -0,0 +1,38 @@
+import { j as i } from "./dependencies-DWmdjl5u.js";
+import { useRef as m, useEffect as l } from "react";
+const g = (e, t, s) => {
+  typeof e == "string" ? s.style.setProperty(`--${t}`, e) : s.style.setProperty(`--${t}`, `${e}px`);
+}, j = ({ w: e, h: t, src: s, clr: o, className: a, onClick: f }) => {
+  const n = m(null), u = [
+    {
+      value: e,
+      name: "w"
+    },
+    {
+      value: t,
+      name: "h"
+    },
+    {
+      value: o,
+      name: "clr"
+    }
+  ], c = () => {
+    n.current && u.forEach((r) => {
+      r.value && g(r.value, r.name, n.current);
+    });
+  };
+  return l(() => {
+    c();
+  }, [n, o]), /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      ref: n,
+      className: ["ono-svg-img", a].join(" "),
+      onClick: f,
+      children: /* @__PURE__ */ i.jsx("img", { src: s, alt: "" })
+    }
+  );
+};
+export {
+  j as S
+};

package/dist/es/Switch-hGQGZVO2.js

@@ -0,0 +1,110 @@
+import { j as s } from "./dependencies-DWmdjl5u.js";
+import { p as j } from "./utils-ziqvBIOU.js";
+import { useRef as c, useEffect as R } from "react";
+const _ = ({
+  id: S,
+  text: e,
+  style: o,
+  color: n,
+  checked: h,
+  onChange: m,
+  name: N = "",
+  className: d,
+  disabled: v = !1
+}) => {
+  const u = c(null), a = c(null), t = c(null), l = c(null), w = c(null), y = c(null), b = [
+    {
+      value: typeof n == "string" ? n : n == null ? void 0 : n.active,
+      name: "checkedClr"
+    },
+    {
+      value: typeof n == "string" || n == null ? void 0 : n.inactive,
+      name: "uncheckedClr"
+    }
+  ], g = (i, f, r) => {
+    const p = typeof i == "number";
+    r.style.setProperty(
+      `--${f}`,
+      p ? `${i}px` : i
+    );
+  }, k = () => {
+    if (!a.current || !u.current) return;
+    let i = 60, f = 32;
+    if (d || o) {
+      const r = getComputedStyle(a.current);
+      i = j(r.width), f = j(r.height);
+    }
+    [
+      ...b,
+      {
+        value: i,
+        name: "w"
+      },
+      {
+        value: f,
+        name: "h"
+      }
+    ].forEach(({ value: r, name: p }) => {
+      r && g(r, p, u.current);
+    }), requestAnimationFrame(() => {
+      l.current && (l.current.style.transition = "transform 0.3s");
+    });
+  }, B = (i) => {
+    v || m == null || m(i.currentTarget.checked, i);
+  };
+  return R(() => {
+    k();
+  }, [
+    a,
+    u,
+    l,
+    d,
+    o,
+    n,
+    e,
+    w,
+    y
+  ]), R(() => {
+    t.current && (t.current.checked = h);
+  }, [t, h]), /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      ref: u,
+      className: ["ono-switch", v ? "ono-switch-is-disabled" : ""].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ s.jsx(
+          "input",
+          {
+            id: S,
+            name: N,
+            role: "switch",
+            ref: t,
+            type: "checkbox",
+            checked: h,
+            onChange: B
+          }
+        ),
+        /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            ref: a,
+            className: ["ono-switch-box", d || ""].filter(Boolean).join(" "),
+            style: o,
+            onClick: () => {
+              var i;
+              return (i = t.current) == null ? void 0 : i.click();
+            },
+            children: /* @__PURE__ */ s.jsxs("div", { ref: l, className: "ono-switch-children-bar", children: [
+              (e == null ? void 0 : e.active) && /* @__PURE__ */ s.jsx("div", { ref: w, className: "ono-switch-children", children: e == null ? void 0 : e.active }),
+              /* @__PURE__ */ s.jsx("div", { className: "ono-switch-slider" }),
+              (e == null ? void 0 : e.inactive) && /* @__PURE__ */ s.jsx("div", { ref: y, className: "ono-switch-children", children: e == null ? void 0 : e.inactive })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  _ as S
+};

package/dist/es/TemplateDialog-DuURiDPX.js

@@ -0,0 +1,75 @@
+import { j as u } from "./dependencies-DWmdjl5u.js";
+import { Q as $ } from "./utils-ziqvBIOU.js";
+import { useState as b, useRef as w, useEffect as h, useCallback as j } from "react";
+const N = ({
+  children: r,
+  animation: e,
+  className: i,
+  duration: c = 300,
+  style: f,
+  maskColor: y = "rgba(0, 0, 0, 0.5)",
+  disableContextMenu: d,
+  clickMaskClose: g = !0,
+  dialogClose: a
+}) => {
+  const [n, m] = b(!1), s = w(null), x = () => {
+    if (!e || !s.current) return;
+    const t = s.current.parentElement.style, o = s.current.style;
+    switch (t.setProperty("--duration", `${c / 1e3}s`), e.type) {
+      case "zoom": {
+        const { x: l, y: P } = $(e.element), k = (l / window.innerWidth * 100).toFixed(2) + "%", v = (P / window.innerHeight * 100).toFixed(2) + "%";
+        o.setProperty("--left", k), o.setProperty("--top", v);
+        break;
+      }
+      case "fade": {
+        const l = e.direction === "left-center" ? "--left" : "--top";
+        o.setProperty(l, e.startPosition);
+        break;
+      }
+    }
+  }, p = () => {
+    if (s.current)
+      if (m(!0), e) {
+        const t = s.current;
+        t.classList.remove(`ono-${e.type}-enter`), t.classList.add(`ono-${e.type}-leave`), setTimeout(a, c);
+      } else
+        a();
+  };
+  h(() => {
+    x();
+  }, [s, e]);
+  const C = j(() => {
+    if (!e) return "";
+    const t = `ono-${e.type}-enter`, o = `ono-${e.type}-leave`;
+    return n ? o : t;
+  }, [e, n]);
+  return /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      className: `
+        ono-mask
+        ono-mask-${n ? "leave" : "enter"}
+      `,
+      style: { background: y },
+      onClick: () => g && p(),
+      onContextMenu: (t) => d && t.preventDefault(),
+      children: /* @__PURE__ */ u.jsx(
+        "div",
+        {
+          ref: s,
+          className: `
+          ono-dialog
+          ${i || ""} 
+          ${C()}
+        `,
+          style: f,
+          onClick: (t) => t.stopPropagation(),
+          children: typeof r == "function" ? r(p) : r
+        }
+      )
+    }
+  );
+};
+export {
+  N as T
+};