ono-react-element 0.0.7 → 0.0.9

package/dist/es/Modal-CHgTYu-I.js

@@ -1,154 +0,0 @@
-import { j as o } from "./dependencies-DWmdjl5u.js";
-import { f as i } from "./utils-BLV_TQU3.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

@@ -1,110 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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-DwDBR0sG.js

@@ -1,110 +0,0 @@
-import { j as s } from "./dependencies-DWmdjl5u.js";
-import { p as j } from "./utils-BLV_TQU3.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-SXrElzoR.js

@@ -1,75 +0,0 @@
-import { j as u } from "./dependencies-DWmdjl5u.js";
-import { C as $ } from "./utils-BLV_TQU3.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, C] = b(!1), s = w(null), m = () => {
-    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 (C(!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(() => {
-    m();
-  }, [s, e]);
-  const x = 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 || ""} 
-          ${x()}
-        `,
-          style: f,
-          onClick: (t) => t.stopPropagation(),
-          children: typeof r == "function" ? r(p) : r
-        }
-      )
-    }
-  );
-};
-export {
-  N as T
-};