ono-react-element 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/AutoSliderList-Dy-otnYu.js +30 -0
- package/dist/es/AvatarCrop-DrA-SARP.js +65 -0
- package/dist/es/Button-C89izu2m.js +26 -0
- package/dist/es/Card3D-DMvCSUhe.js +18 -0
- package/dist/es/Checkbox-daBabj14.js +19 -0
- package/dist/es/InjunctiveBox-D0V-K9Pn.js +11 -0
- package/dist/es/Input-Z3uL5-nj.js +80 -0
- package/dist/es/List-UAKCMuGC.js +19 -0
- package/dist/es/MenuButton-DHkU5Bq7.js +17 -0
- package/dist/es/Message-GvTC61N0.js +68 -0
- package/dist/es/Modal-C-c_S_VM.js +32 -0
- package/dist/es/Pagination-m71H2tfS.js +17 -0
- package/dist/es/PortalRenderer-CDAzQJgm.js +19 -0
- package/dist/es/Radio-D_GKVoOC.js +25 -0
- package/dist/es/Select-y-aAIqxg.js +23 -0
- package/dist/es/SvgImg-CZwq2D7J.js +14 -0
- package/dist/es/Switch-CN3M5pXb.js +34 -0
- package/dist/es/TemplateDialog-fX7Ie-xU.js +45 -0
- package/dist/es/Toast-BadlA1yD.js +42 -0
- package/dist/es/Tooltip-C5OFmxWo.js +29 -0
- package/dist/es/VirtualList-BeDq637Z.js +65 -0
- package/dist/es/Waterfall-a_c3urjB.js +55 -0
- package/dist/es/dependencies-CbQbPZZ-.js +15524 -0
- package/dist/es/hooks-Dew3_cmY.js +103 -0
- package/dist/es/index.js +106 -231
- package/dist/es/utils-BxXROOPY.js +394 -0
- package/dist/index.css +1 -1
- package/dist/style/AutoSliderList.css +1 -0
- package/dist/style/AvatarCrop.css +1 -0
- package/dist/style/Button.css +1 -0
- package/dist/style/Card3D.css +1 -0
- package/dist/style/Checkbox.css +1 -0
- package/dist/style/Input.css +1 -0
- package/dist/style/MenuButton.css +1 -0
- package/dist/style/Message.css +1 -0
- package/dist/style/Modal.css +1 -0
- package/dist/style/Pagination.css +1 -0
- package/dist/style/Radio.css +1 -0
- package/dist/style/Select.css +1 -0
- package/dist/style/SvgImg.css +1 -0
- package/dist/style/Switch.css +1 -0
- package/dist/style/TemplateDialog.css +1 -0
- package/dist/style/Toast.css +1 -0
- package/dist/style/Tooltip.css +1 -0
- package/dist/style/Waterfall.css +1 -0
- package/dist/style/index.css +1 -0
- package/dist/types/index.d.ts +2 -2
- package/dist/types/printLogo.d.ts +1 -0
- package/dist/types/utils/common.d.ts +36 -20
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.css.br +0 -0
- package/dist/umd/index.css.gz +0 -0
- package/dist/umd/index.umd.cjs +16583 -295
- package/dist/umd/index.umd.cjs.br +0 -0
- package/dist/umd/index.umd.cjs.gz +0 -0
- package/package.json +56 -49
- package/dist/es/AutoSliderList-DN4Sec6L.js +0 -106
- package/dist/es/AvatarCrop-DzGw2FVQ.js +0 -225
- package/dist/es/Button-CdxyXFF4.js +0 -72
- package/dist/es/Card3D-sf3zmiHk.js +0 -41
- package/dist/es/Checkbox-BN7rT73n.js +0 -62
- package/dist/es/InjunctiveBox-CGpy0PxH.js +0 -39
- package/dist/es/Input-DoY3kR7J.js +0 -301
- package/dist/es/List-B9mP7VjN.js +0 -35
- package/dist/es/MenuButton-CuOdVlg0.js +0 -62
- package/dist/es/Message-TfweOOpK.js +0 -219
- package/dist/es/Modal-CHgTYu-I.js +0 -154
- package/dist/es/Pagination-BtmtUkVw.js +0 -110
- package/dist/es/PortalRenderer-8Iur-eZp.js +0 -38
- package/dist/es/Radio-BmSpqdK8.js +0 -113
- package/dist/es/SvgImg-Bcmzdjzl.js +0 -38
- package/dist/es/Switch-DwDBR0sG.js +0 -110
- package/dist/es/TemplateDialog-SXrElzoR.js +0 -75
- package/dist/es/Toast-C7ybVNyd.js +0 -174
- package/dist/es/Tooltip-BtzG0TSW.js +0 -94
- package/dist/es/VirtualList-OG7kqLe0.js +0 -160
- package/dist/es/Waterfall-GHdJxww4.js +0 -131
- package/dist/es/dependencies-DWmdjl5u.js +0 -25491
- package/dist/es/hooks-CQN6qu4t.js +0 -159
- package/dist/es/utils-BLV_TQU3.js +0 -585
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { j as t } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { p as e } from "./utils-BxXROOPY.js";
|
|
3
|
+
import { useState as i, useRef as o, useMemo as r, useEffect as n, cloneElement as s } from "react";
|
|
4
|
+
import { u as l } from "./hooks-Dew3_cmY.js";
|
|
5
|
+
var a = ((t2) => (t2.Horizontal = "Horizontal", t2.Vertical = "Vertical", t2))(a || {});
|
|
6
|
+
const c = ({ list: c2, style: d, disable: f, children: u, sliderBox: m, className: p, sliderStyle: h, duration: x = 300, sliderClassName: w, currentIndex: y = 0, direction: j = a.Horizontal, sliderTransitionTimingFunction: g = "ease-in-out" }) => {
|
|
7
|
+
const [z, H] = i(false), [T, $] = i(0), [v, A] = i({ t: 0, l: 0 }), [C, N] = i({ w: 0, h: 0 }), b = o(null), k = o(null), B = r(() => ["width", "height", "transform"].map((t2) => `${t2} ${x / 1e3}s ${g}`).join(","), [j, x, g]), D = r(() => ({ width: C.w, height: C.h, transition: z ? B : "initial", transform: `translate(${v.l}px, ${v.t}px)` }), [C, v]), { w: I, h: L } = l();
|
|
8
|
+
return n(() => {
|
|
9
|
+
$(y);
|
|
10
|
+
}, [y]), n(() => {
|
|
11
|
+
(() => {
|
|
12
|
+
if ("number" != typeof T) return;
|
|
13
|
+
if (!b.current || !k.current) return;
|
|
14
|
+
const t2 = Array.from(b.current.children).slice(1);
|
|
15
|
+
t2.forEach((t3) => {
|
|
16
|
+
t3.style.position = "relative", t3.style.cursor = f ? "not-allowed" : "pointer", t3.style.zIndex = "1";
|
|
17
|
+
});
|
|
18
|
+
const i2 = window.getComputedStyle(b.current), o2 = { t: "Horizontal" === j ? e(i2.paddingTop) : t2[T].offsetTop, l: "Horizontal" === j ? t2[T].offsetLeft : e(i2.paddingLeft) };
|
|
19
|
+
A(o2), N({ w: t2[T].offsetWidth, h: t2[T].offsetHeight }), setTimeout(() => H(true), x);
|
|
20
|
+
})();
|
|
21
|
+
}, [T, I, L, f]), t.jsxs("ul", { ref: b, className: ["ono-auto-slider-list-container", p, f ? "ono-auto-slider-list-is-disable" : ""].filter(Boolean).join(" "), style: { flexDirection: "Horizontal" === j ? "row" : "column", ...d }, children: [t.jsx("li", { ref: k, className: ["ono-auto-slider-list-slider", w].filter(Boolean).join(" "), style: { ...h, ...D }, children: m }), c2.map((t2, e2) => s(u({ item: t2, index: e2, isActive: e2 === T }), { onClick: (i2) => {
|
|
22
|
+
if (f) return;
|
|
23
|
+
const o2 = u({ item: t2, index: e2, isActive: e2 === T }).props.onClick;
|
|
24
|
+
o2 && o2(i2), $(e2);
|
|
25
|
+
} }))] });
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
c as A,
|
|
29
|
+
a as D
|
|
30
|
+
};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { j as t } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as e, useRef as a, useEffect as n } from "react";
|
|
3
|
+
const r = ({ imageFile: r2, cvsW: l2 = 520, maskBG: s = "rgba(0, 0, 0, 0.5)", border: i = "4px solid #fff", wheelScale: o = 0.1, setCtx: c, maskInfo: w, setMaskInfo: h, imageStartState: g, setImageStartState: d, imageState: m, setImageState: u }) => {
|
|
4
|
+
const [f, x] = e(), [p, b] = e({ w: 0, h: 0 }), [S, v] = e({ w: 0, h: 0 }), [I, y] = e({ x: 0, y: 0 }), [j, M] = e(false), k = a(null), C = a(null), R = (t2, e2) => {
|
|
5
|
+
e2((e3) => ({ ...e3, ...t2 }));
|
|
6
|
+
}, B = () => {
|
|
7
|
+
const t2 = i.split(" ");
|
|
8
|
+
let e2 = 0;
|
|
9
|
+
return t2.forEach((t3) => {
|
|
10
|
+
t3.includes("px") && (e2 = Number(t3.split("px")[0]));
|
|
11
|
+
}), e2;
|
|
12
|
+
}, D = () => {
|
|
13
|
+
M(false), m.l > w.l && R({ l: w.l }, u), m.t > w.l && R({ t: w.l }, u), -m.l > m.w - w.l - w.w && R({ l: -(m.w - w.l - w.w) }, u), -m.t > m.h - w.l - w.w && R({ t: -(m.h - w.l - w.w) }, u);
|
|
14
|
+
};
|
|
15
|
+
return n(() => {
|
|
16
|
+
(() => {
|
|
17
|
+
if (!k.current) return;
|
|
18
|
+
const { width: t2 } = k.current.getBoundingClientRect();
|
|
19
|
+
((t3) => {
|
|
20
|
+
const e2 = new Image();
|
|
21
|
+
e2.src = "string" == typeof r2 ? r2 : URL.createObjectURL(r2), e2.onload = () => {
|
|
22
|
+
var _a;
|
|
23
|
+
let a2 = 1, n2 = e2.width, r3 = e2.height;
|
|
24
|
+
n2 > r3 ? (a2 = n2 / t3, n2 = t3, r3 /= a2, R({ w: r3 }, h)) : (a2 = r3 / t3, r3 = t3, n2 /= a2, R({ w: n2 }, h));
|
|
25
|
+
const l3 = (t3 - n2) / 2, s2 = (t3 - r3) / 2;
|
|
26
|
+
R({ w: e2.width, h: e2.height }, v), x(e2), R({ w: n2, h: r3, t: s2, l: l3 }, u), d({ w: n2, h: r3, t: s2, l: l3 }), R(l3 > s2 ? { l: l3 } : { l: s2 }, h), c((_a = C.current) == null ? void 0 : _a.getContext("2d"));
|
|
27
|
+
};
|
|
28
|
+
})(t2), b({ w: t2, h: t2 });
|
|
29
|
+
})();
|
|
30
|
+
}, [k]), n(() => {
|
|
31
|
+
if (!C.current || !f) return;
|
|
32
|
+
const t2 = C.current.getContext("2d");
|
|
33
|
+
t2 && (t2.clearRect(0, 0, C.current.width, C.current.height), t2.drawImage(f, m.l, m.t, m.w, m.h));
|
|
34
|
+
}, [C, f, m]), t.jsxs("div", { ref: k, className: "ono-avatar-canvas", style: { width: l2, cursor: j ? "grabbing" : "grab" }, onWheel: (t2) => {
|
|
35
|
+
t2.preventDefault(), t2.stopPropagation();
|
|
36
|
+
const e2 = t2.deltaY < 0 ? "in" : "out", a2 = ((t3, e3) => {
|
|
37
|
+
let a3 = t3 + ("in" === e3 ? t3 * o : -t3 * o);
|
|
38
|
+
return a3 > S.w && (a3 = S.w), a3 < g.w && (a3 = g.w), a3;
|
|
39
|
+
})(m.w, e2), n2 = a2 / S.w;
|
|
40
|
+
R({ w: a2, h: S.h * n2 }, u), D();
|
|
41
|
+
}, onMouseUp: D, onMouseLeave: D, children: [t.jsx("canvas", { width: p.w, height: p.h, ref: C, onMouseDown: (t2) => {
|
|
42
|
+
R({ x: t2.clientX, y: t2.clientY }, y), M(true);
|
|
43
|
+
}, onMouseMove: (t2) => {
|
|
44
|
+
if (j) {
|
|
45
|
+
const e2 = t2.clientX - I.x, a2 = t2.clientY - I.y;
|
|
46
|
+
(Math.abs(e2) > 10 || Math.abs(a2) > 10) && (R({ t: m.t + a2, l: m.l + e2 }, u), R({ x: t2.clientX, y: t2.clientY }, y));
|
|
47
|
+
}
|
|
48
|
+
} }), f && t.jsx("div", { className: "ono-avatar-mask", children: t.jsx("div", { style: { border: i, boxShadow: `${s} 0 0 0 10000px`, width: `${w.w + 2 * B()}px`, height: `${w.w + 2 * B()}px` } }) })] });
|
|
49
|
+
}, l = ({ imageFile: a2, cvsW: n2 = 520, maskBG: l2 = "rgba(0, 0, 0, 0.5)", border: s = "4px solid #fff", wheelScale: i = 0.1, children: o }) => {
|
|
50
|
+
const [c, w] = e({ w: 0, h: 0, t: 0, l: 0 }), [h, g] = e({ w: 0, h: 0, t: 0, l: 0 }), [d, m] = e({ w: 0, l: 0 }), [u, f] = e();
|
|
51
|
+
return t.jsxs(t.Fragment, { children: [t.jsx(r, { imageFile: a2, cvsW: n2, maskBG: l2, border: s, wheelScale: i, maskInfo: d, setMaskInfo: m, setCtx: f, imageStartState: c, setImageStartState: w, imageState: h, setImageState: g }), o == null ? void 0 : o({ handleConfirm: (t2, e2) => {
|
|
52
|
+
if (!u) return;
|
|
53
|
+
const a3 = u.getImageData(d.l, d.l, d.w, d.w), n3 = document.createElement("canvas"), r2 = n3.getContext("2d");
|
|
54
|
+
if (n3.width = d.w, n3.height = d.w, !r2) return;
|
|
55
|
+
const { imageSaveType: l3 = "png", dataSaveType: s2 = "base64", quality: i2 = 100 } = e2 || {};
|
|
56
|
+
r2.putImageData(a3, 0, 0, 0, 0, d.w, d.w), "base64" === s2 ? t2(n3.toDataURL(`image/${l3}`, i2 / 100)) : "blob" === s2 && n3.toBlob((e3) => {
|
|
57
|
+
if (e3) return t2(e3);
|
|
58
|
+
}, `image/${l3}`, i2 / 100);
|
|
59
|
+
}, handleReduction: (t2) => {
|
|
60
|
+
g({ w: c.w, h: c.h, t: c.t, l: c.l }), t2 == null ? void 0 : t2();
|
|
61
|
+
} })] });
|
|
62
|
+
};
|
|
63
|
+
export {
|
|
64
|
+
l as A
|
|
65
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as n, useRef as t, useEffect as s } from "react";
|
|
3
|
+
const i = ({ onClick: i2, children: o, disabled: r, loading: l, plain: a, shape: c = "default", htmlType: d = "button", type: u = "primary", className: p, style: h, icon: f }) => {
|
|
4
|
+
const [m, g] = n(false), j = t(null), b = t(null);
|
|
5
|
+
return s(() => {
|
|
6
|
+
(() => {
|
|
7
|
+
if (!b.current) return;
|
|
8
|
+
const e2 = b.current;
|
|
9
|
+
l ? (g(true), e2.classList.add("ono-loading-start")) : (setTimeout(() => {
|
|
10
|
+
g(false);
|
|
11
|
+
}, 300), e2.classList.remove("ono-loading-start"), e2.classList.add("ono-loading-end"));
|
|
12
|
+
})();
|
|
13
|
+
}, [l, b]), s(() => {
|
|
14
|
+
(() => {
|
|
15
|
+
if (!j.current) return;
|
|
16
|
+
const e2 = j.current, n2 = e2.getBoundingClientRect();
|
|
17
|
+
e2.style.setProperty("--btn-height", n2.height + "px");
|
|
18
|
+
})();
|
|
19
|
+
}, [j]), e.jsxs("button", { ref: j, className: [`ono-btn-${u}`, l || m ? "is-loading" : "", l || f ? "is-icon" : "", r ? "is-disabled" : "", "round" === c ? "is-round" : "circle" === c ? "is-circle" : "", a ? "is-plain" : "", p ?? ""].filter(Boolean).join(" "), type: d, disabled: ("function" == typeof r ? r() : r) || !!l, style: h, onClick: i2, children: [(() => {
|
|
20
|
+
const n2 = e.jsx("span", { ref: b, className: "ono-btn-icon", children: e.jsx("span", { children: "object" == typeof l ? l.icon : e.jsx("svg", { viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", children: e.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" }) }) }) });
|
|
21
|
+
return l || m ? n2 : f ? e.jsx("span", { children: f }) : e.jsx(e.Fragment, {});
|
|
22
|
+
})(), o] });
|
|
23
|
+
};
|
|
24
|
+
export {
|
|
25
|
+
i as B
|
|
26
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as r, useRef as t, useEffect as s } from "react";
|
|
3
|
+
const o = ({ src: o2, children: n, enlarge: c = false, scale: a = 1.1, shadow: d, xRange: l = [-10, 10], yRange: i = [-10, 10], borderRadius: u = 20 }) => {
|
|
4
|
+
const [y, f] = r(false), p = t(null), g = (e2, r2, t2) => r2 / t2 * (e2[1] - e2[0]) + e2[0];
|
|
5
|
+
return s(() => {
|
|
6
|
+
p.current && d && p.current.style.setProperty("--sd", d);
|
|
7
|
+
}, [p.current]), s(() => {
|
|
8
|
+
if (!n && !o2) throw new Error("请传入children或者src属性");
|
|
9
|
+
}, [n, o2]), e.jsx("div", { ref: p, className: "ono-card", style: { borderRadius: u, transform: `perspective(500px) scale(${y && c ? a : 1}) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))` }, onMouseEnter: () => f(true), onMouseMove: (e2) => {
|
|
10
|
+
const { offsetX: r2, offsetY: t2 } = e2.nativeEvent, { offsetWidth: s2, offsetHeight: o3 } = p.current, n2 = g(l, t2, o3), c2 = -g(i, r2, s2);
|
|
11
|
+
p.current.style.setProperty("--rx", `${n2}deg`), p.current.style.setProperty("--ry", `${c2}deg`);
|
|
12
|
+
}, onMouseLeave: () => {
|
|
13
|
+
f(false), p.current.style.setProperty("--rx", "0deg"), p.current.style.setProperty("--ry", "0deg");
|
|
14
|
+
}, children: n ?? e.jsx("img", { src: o2, alt: "图片" }) });
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
o as C
|
|
18
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as r, useRef as t, useEffect as n } from "react";
|
|
3
|
+
const o = ({ id: o2, style: c, checked: l, onChange: a, className: i, indeterminate: s = false, checkedColor: d = "#0077cc", indeterminateStyle: m = "line", indeterminateColor: u = "#0077cc" }) => {
|
|
4
|
+
const [h, p] = r(""), y = t(null), C = [{ value: d, name: "checkedColor" }, { value: u, name: "indeterminateColor" }];
|
|
5
|
+
return n(() => {
|
|
6
|
+
(() => {
|
|
7
|
+
if (!y.current) return;
|
|
8
|
+
const e2 = getComputedStyle(y.current);
|
|
9
|
+
h || p(e2.borderColor), y.current.style.height = e2.width, [{ value: e2.width, name: "w" }, { value: l || s ? d : h, name: "border-color" }, ...C].forEach(({ value: e3, name: r2 }) => {
|
|
10
|
+
e3 && ((e4, r3, t2) => {
|
|
11
|
+
"string" == typeof e4 ? t2.style.setProperty(`--${r3}`, e4) : t2.style.setProperty(`--${r3}`, `${e4}px`);
|
|
12
|
+
})(e3, r2, y.current);
|
|
13
|
+
});
|
|
14
|
+
})(), y.current && (y.current.indeterminate = s);
|
|
15
|
+
}, [y, i, c, s]), e.jsx("input", { id: o2, type: "checkbox", ref: y, checked: l, onChange: a, className: [i, "line" === m ? "ono-checkbox-line" : "ono-checkbox-border"].filter(Boolean).join(" "), style: c });
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
o as C
|
|
19
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { j as o, R as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { a as n } from "./hooks-Dew3_cmY.js";
|
|
3
|
+
let s, l = null;
|
|
4
|
+
const t = ({ className: e2, content: s2, style: t2, onClick: u2, onDoubleClick: c2, onContextMenu: i, onMouseDown: a, onMouseUp: r, onMouseEnter: M, onMouseLeave: d, onMouseMove: m, isClickBoxToClose: p }) => (n("click", () => {
|
|
5
|
+
p && l && (l.remove(), l = null);
|
|
6
|
+
}), o.jsx("div", { className: e2, style: t2, onClick: u2, onDoubleClick: c2, onContextMenu: i, onMouseDown: a, onMouseUp: r, onMouseEnter: M, onMouseLeave: d, onMouseMove: m, children: "function" == typeof s2 ? s2((o2) => {
|
|
7
|
+
l && (l.remove(), l = null, o2 && o2());
|
|
8
|
+
}) : s2 })), u = (e2) => (c(e2.isSingle || false).render(o.jsx(t, { ...e2 })), l), c = (o2) => (o2 && l && s || (l = document.createElement("div"), document.body.appendChild(l), s = e.createRoot(l)), s);
|
|
9
|
+
export {
|
|
10
|
+
u as i
|
|
11
|
+
};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as o, useRef as n, useEffect as t } from "react";
|
|
3
|
+
import { b as a } from "./hooks-Dew3_cmY.js";
|
|
4
|
+
const s = () => e.jsx("svg", { className: "ono-input-icon", viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", fill: "currentColor", "aria-hidden": "true", children: e.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }) }), r = ({ open: o2 }) => e.jsx("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": o2 ? "eye" : "eye-invisible", fill: "currentColor", "aria-hidden": "true", className: "ono-input-icon", children: o2 ? e.jsx("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }) : e.jsxs(e.Fragment, { children: [e.jsx("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z" }), e.jsx("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z" })] }) }), l = ({ id: a2, name: l2, max: i2, min: c, maxLength: d, minLength: u, type: p = "text", className: m, defaultValue: h, placeholder: x, readonly: f, autocomplete: y = "off", autofocus: g, form: b, disabled: v, clearable: C, showPassword: j, prepend: w, append: N, prefix: L, suffix: z, showCount: S, border: k = "1px solid #5644b8", boxShadow: B = "0 0 0 2px #7969d11a", value: M = "", onChange: P, onFocus: F, onBlur: E, onClear: O }) => {
|
|
5
|
+
const [q, D] = o(M), [Q, R] = o(false), [Y, V] = o(false), W = n(null), $ = C && !v && q, A = j && !v;
|
|
6
|
+
return t(() => {
|
|
7
|
+
W.current && (W.current.style.setProperty("--ono-input-border", k), W.current.style.setProperty("--ono-input-box-shadow", B));
|
|
8
|
+
}, [W]), t(() => {
|
|
9
|
+
D(M);
|
|
10
|
+
}, [M]), e.jsxs("div", { className: ["ono-input", "ono-input-border", v ? "ono-input-is-disabled" : ""].filter(Boolean).join(" "), children: [w && e.jsx("div", { className: "ono-prepend", children: w }), e.jsxs("div", { ref: W, className: ["ono-input-wrapper", Q ? "ono-input-is-focus" : "", m].filter(Boolean).join(" "), onMouseDown: (e2) => {
|
|
11
|
+
"INPUT" !== e2.target.tagName && e2.preventDefault();
|
|
12
|
+
}, children: [L && e.jsx("span", { className: "ono-prefix", children: L }), e.jsx("input", { id: a2, max: i2, min: c, name: l2, maxLength: d, minLength: u, defaultValue: h, className: "ono-input-inner", type: j ? Y ? "text" : "password" : p, placeholder: x, readOnly: f, autoComplete: y, autoFocus: g, form: b, disabled: v, onFocus: (e2) => {
|
|
13
|
+
F == null ? void 0 : F(e2), R(true);
|
|
14
|
+
}, onBlur: (e2) => {
|
|
15
|
+
E == null ? void 0 : E(e2), R(false);
|
|
16
|
+
}, value: q, onChange: (e2) => {
|
|
17
|
+
P == null ? void 0 : P(e2), D(e2.target.value);
|
|
18
|
+
} }), (z || $ || A || S) && e.jsxs("span", { className: "ono-suffix", children: [z, $ && e.jsx("button", { className: "ono-clear-icon", onClick: () => {
|
|
19
|
+
O == null ? void 0 : O(), D("");
|
|
20
|
+
}, children: e.jsx(s, {}) }), A && e.jsx("button", { className: "ono-eye-icon", onClick: () => V(!Y), children: e.jsx(r, { open: Y }) }), S && d && e.jsxs("p", { className: "ono-count", children: [q.length, "/", d] })] })] }), N && e.jsx("div", { className: "ono-append", children: N })] });
|
|
21
|
+
}, i = ({ id: s2, name: r2, rows: l2, maxLength: i2, minLength: c, className: d, placeholder: u, readonly: p, resize: m = true, autocomplete: h = "off", autofocus: x, form: f, disabled: y, autoSize: g, showCount: b, border: v = "1px solid #5644b8", boxShadow: C = "0 0 0 2px #7969d11a", value: j = "", onChange: w }) => {
|
|
22
|
+
const [N, L] = o(j), [z, S] = o(false), [k, B] = o([j]), [M, P] = o(0), F = n(null), E = (e2) => {
|
|
23
|
+
const o2 = k.slice(0, M + 1);
|
|
24
|
+
o2.push(e2), B(o2), P(o2.length - 1);
|
|
25
|
+
}, O = [{ key: "CommandOrControl+z", handler: (e2) => {
|
|
26
|
+
document.activeElement === F.current && (e2.preventDefault(), (() => {
|
|
27
|
+
if (M > 0 && F.current) {
|
|
28
|
+
const e3 = M - 1, o2 = k[e3];
|
|
29
|
+
if (F.current.value = o2, L(o2), P(e3), w) {
|
|
30
|
+
const e4 = { target: F.current };
|
|
31
|
+
w(e4);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
})());
|
|
35
|
+
}, deps: [k] }, { key: "CommandOrControl+d", handler: (e2) => {
|
|
36
|
+
if (F.current && document.activeElement === F.current) {
|
|
37
|
+
e2.preventDefault();
|
|
38
|
+
const o2 = ((e3) => {
|
|
39
|
+
const { value: o3, selectionStart: n2, selectionEnd: t2 } = e3, a2 = o3.substring(0, n2) + o3.substring(t2);
|
|
40
|
+
return e3.value = a2, e3.setSelectionRange(n2, n2), a2;
|
|
41
|
+
})(F.current);
|
|
42
|
+
if (L(o2), E(o2), w) {
|
|
43
|
+
const e3 = { target: F.current };
|
|
44
|
+
w(e3);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}, deps: [k] }];
|
|
48
|
+
return O.forEach(({ key: e2, handler: o2, deps: n2 }) => a(e2, o2, { target: F.current, deps: n2 })), t(() => {
|
|
49
|
+
L(j);
|
|
50
|
+
}, [j]), t(() => {
|
|
51
|
+
(() => {
|
|
52
|
+
if (!F.current) return;
|
|
53
|
+
const e2 = F.current;
|
|
54
|
+
((e3, o2, n2, t2, a2) => {
|
|
55
|
+
const s3 = e3.parentNode;
|
|
56
|
+
e3.style.resize = o2 ? "none" : n2 ? "vertical" : "none", s3.style.setProperty("--ono-input-border", t2), s3.style.setProperty("--ono-input-box-shadow", a2), s3.style.setProperty("--ono-input-height", "auto");
|
|
57
|
+
})(e2, g || false, m, v, C), g && ((e3, o2) => {
|
|
58
|
+
const { minRows: n2 = 2, maxRows: t2 } = "object" == typeof o2 ? o2 : {}, a2 = document.createElement("div");
|
|
59
|
+
a2.style.position = "absolute", a2.style.visibility = "hidden", a2.style.whiteSpace = "pre-wrap", a2.style.wordWrap = "break-word", a2.style.width = `${e3.clientWidth}px`, a2.style.font = getComputedStyle(e3).font, a2.style.padding = getComputedStyle(e3).padding, a2.style.border = getComputedStyle(e3).border, a2.style.boxSizing = "border-box", document.body.appendChild(a2);
|
|
60
|
+
const s3 = 34 * n2;
|
|
61
|
+
let r3 = s3;
|
|
62
|
+
if (e3.value) {
|
|
63
|
+
a2.textContent = e3.value;
|
|
64
|
+
const o3 = a2.offsetHeight;
|
|
65
|
+
r3 = Math.max(s3, o3), t2 && r3 > 34 * t2 ? (r3 = 34 * t2, e3.style.overflowY = "auto") : e3.style.overflowY = "hidden";
|
|
66
|
+
} else e3.style.overflowY = "hidden";
|
|
67
|
+
e3.style.height = `${r3}px`, e3.style.resize = o2 ? "none" : "vertical", document.body.removeChild(a2), Math.floor(r3 / 34);
|
|
68
|
+
})(e2, g);
|
|
69
|
+
})();
|
|
70
|
+
}, [F, g, N]), e.jsxs("div", { className: ["ono-textarea", y ? "ono-input-is-disabled" : ""].filter(Boolean).join(" "), children: [e.jsx("div", { className: ["ono-textarea-wrapper", z ? "none" === v ? "" : "ono-input-is-focus" : "", d].filter(Boolean).join(" "), onClick: () => {
|
|
71
|
+
var _a;
|
|
72
|
+
return (_a = F.current) == null ? void 0 : _a.focus();
|
|
73
|
+
}, children: e.jsx("textarea", { ref: F, className: "ono-textarea-inner", id: s2, rows: l2, name: r2, maxLength: i2, minLength: c, placeholder: u, readOnly: p, autoComplete: h, autoFocus: x, form: f, disabled: y, onFocus: () => S(true), onBlur: () => S(false), value: N, onChange: (e2) => {
|
|
74
|
+
L(e2.target.value), E(e2.target.value), w == null ? void 0 : w(e2);
|
|
75
|
+
} }) }), b && i2 && e.jsx("p", { className: "ono-count-bar", onClick: (e2) => e2.stopPropagation(), children: N.length + "/" + i2 })] });
|
|
76
|
+
};
|
|
77
|
+
export {
|
|
78
|
+
l as O,
|
|
79
|
+
i as a
|
|
80
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useState as e, useEffect as t } from "react";
|
|
2
|
+
const n = ({ list: n2, children: r2, fallback: s, deps: l = [], insertBetweenDom: o }) => {
|
|
3
|
+
const [c, a] = e([]);
|
|
4
|
+
return t(() => {
|
|
5
|
+
(async () => {
|
|
6
|
+
if (!n2) return;
|
|
7
|
+
a(s);
|
|
8
|
+
const e2 = "function" == typeof n2 ? await n2() : n2;
|
|
9
|
+
a(e2.length > 0 ? ((e3, t2) => t2 ? e3.reduce((n3, r3, s2) => (n3.push(r3), s2 < e3.length - 1 && n3.push(t2(s2)), n3), []) : e3)(((e3) => e3.map(r2).filter((e4) => e4))(e2), o) : s);
|
|
10
|
+
})();
|
|
11
|
+
}, [...l]), c;
|
|
12
|
+
}, r = ({ list: e2, children: t2, fallback: n2, insertBetweenDom: r2 }) => (() => {
|
|
13
|
+
const s = "function" == typeof e2 ? e2() : e2;
|
|
14
|
+
return s.length > 0 ? ((e3, t3) => t3 ? e3.reduce((n3, r3, s2) => (n3.push(r3), s2 < e3.length - 1 && n3.push(t3(s2)), n3), []) : e3)(((e3) => e3.map(t2).filter(Boolean))(s), r2) : n2;
|
|
15
|
+
})();
|
|
16
|
+
export {
|
|
17
|
+
n as A,
|
|
18
|
+
r as L
|
|
19
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { j as t } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as e, useEffect as r } from "react";
|
|
3
|
+
const a = ({ active: a2, onchange: n, w: s = "40px", duration: o = 400, clr: i = "#f5f5f5", bgc: l = "#342A7C" }) => {
|
|
4
|
+
const [d, c] = e(false), h = (t2, e2) => {
|
|
5
|
+
let r2;
|
|
6
|
+
const a3 = t2.split("");
|
|
7
|
+
return "x" === a3[a3.length - 1] && (r2 = Number(a3.slice(0, -2).join("")) * e2 + "px"), r2;
|
|
8
|
+
}, m = { width: h(s, 0.6), height: h(s, 0.06), left: h(s, d ? 0.11 : 0.2), borderRadius: h(s, 1), background: i, transition: `all ${o / 1e3}s` }, u = [{ ...m, width: h(s, d ? 0.8 : 0.5), height: h(s, d ? 0.05 : 0.06), transform: d ? "translateY(0) rotate(45deg)" : `translateY(-${h(s, 0.22)})` }, { ...m, width: h(s, d ? 0.8 : 0.3), height: h(s, d ? 0.05 : 0.06), transform: d ? "translateY(0) rotate(315deg)" : `translateY(${h(s, 0.22)})` }, { ...m, left: "auto", transform: d ? `translateX(${h(s, 1.1)})` : "translateX(0)" }];
|
|
9
|
+
return r(() => {
|
|
10
|
+
c(!!a2);
|
|
11
|
+
}, [a2]), t.jsx("button", { className: "ono-menu-button", style: { width: s, height: s, background: l, borderRadius: h(s, 0.2) }, onClick: () => requestAnimationFrame(() => {
|
|
12
|
+
n == null ? void 0 : n(!d), c(!d);
|
|
13
|
+
}), children: u.map((e2, r2) => t.jsx("span", { style: { ...e2 } }, r2)) });
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
a as M
|
|
17
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as s, useRef as a, useMemo as o, useCallback as n, useEffect as t } from "react";
|
|
3
|
+
import { c as r, g as c, a as l, b as i, d, e as u } from "./utils-BxXROOPY.js";
|
|
4
|
+
const f = { info: { light: "#1677ff", dark: "#1677ff" }, success: { light: "#52c41a", dark: "#49aa19" }, error: { light: "#ff4d4f", dark: "#a61d24" }, warning: { light: "#faad14", dark: "#d89614" }, loading: { light: "#9254de", dark: "#f5f5f5" } }, m = (e2, s2) => f[e2][s2], g = (s2) => {
|
|
5
|
+
switch (s2) {
|
|
6
|
+
case "success":
|
|
7
|
+
return e.jsx("svg", { className: "ono-type-icon", viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "check-circle", fill: m(s2, "light"), "aria-hidden": "true", children: e.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }) });
|
|
8
|
+
case "error":
|
|
9
|
+
return e.jsx("svg", { className: "ono-type-icon", viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "close-circle", fill: m(s2, "light"), "aria-hidden": "true", children: e.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }) });
|
|
10
|
+
case "loading":
|
|
11
|
+
return e.jsx("svg", { className: ["ono-info-icon", "ono-loading"].join(" "), viewBox: "0 0 1024 1024", focusable: "false", "data-icon": "loading", fill: m(s2, "light"), "aria-hidden": "true", children: e.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" }) });
|
|
12
|
+
default:
|
|
13
|
+
return e.jsx("svg", { className: "ono-info-icon", viewBox: "64 64 896 896", focusable: "false", "data-icon": "exclamation-circle", fill: m(s2, "light"), "aria-hidden": "true", children: e.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" }) });
|
|
14
|
+
}
|
|
15
|
+
}, h = ({ handleDestroy: s2 }) => e.jsx("button", { onClick: s2, children: e.jsx("svg", { className: "ono-clear-icon", viewBox: "64 64 896 896", focusable: "false", "data-icon": "close-circle", fill: "currentColor", "aria-hidden": "true", children: e.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }) }) }), p = ({ id: r2, instancesKey: f2, duration: m2 = 3e3, speed: p2 = 300, offset: y2 = 20, message: x2, type: j, plain: v = true, showClose: C = false, zIndex: w, onClose: z = () => {
|
|
16
|
+
}, destroy: L }) => {
|
|
17
|
+
const [, k] = s(false), [b, B] = s(0), [M, N] = s(c(r2)), [$, S] = s({ duration: m2, speed: p2, message: x2, type: j, showClose: C, onClose: z }), T = a(null), D = a(null), F = a(null), I = M + b, K = o(() => ({ transform: `translate(-50%, ${M}px)`, transition: `transform ${p2}ms ease-in-out`, zIndex: w }), [M, p2]), O = () => {
|
|
18
|
+
F.current && (F.current.classList.remove("ono-message-enter"), F.current.classList.add("ono-message-leave"), F.current.style.transform = `translate(-50%, ${d(r2) - b}px)`, u(r2), setTimeout(() => L($.onClose), p2));
|
|
19
|
+
}, q = (e2, s2, a2) => {
|
|
20
|
+
"loading" !== e2 && (T.current = setTimeout(O, s2 - a2));
|
|
21
|
+
}, A = () => {
|
|
22
|
+
const e2 = d(r2);
|
|
23
|
+
k((s2) => (s2 && N(e2 + y2), true)), requestAnimationFrame(A);
|
|
24
|
+
}, E = n(() => {
|
|
25
|
+
if ("loading" === $.type) {
|
|
26
|
+
if (D.current) return;
|
|
27
|
+
D.current = setTimeout(() => {
|
|
28
|
+
D.current = null;
|
|
29
|
+
const e2 = l(f2 || "");
|
|
30
|
+
e2 && (((e3) => {
|
|
31
|
+
S((s2) => ({ ...s2, ...e3 }));
|
|
32
|
+
})({ ...e2 }), q($.type, e2.duration || $.duration, e2.speed || $.speed), E());
|
|
33
|
+
}, 100);
|
|
34
|
+
}
|
|
35
|
+
}, [$]);
|
|
36
|
+
return t(() => {
|
|
37
|
+
q($.type, $.duration, $.speed), A(), E();
|
|
38
|
+
}, [$.type, $.duration, $.speed]), t(() => {
|
|
39
|
+
(() => {
|
|
40
|
+
if (!F.current) return;
|
|
41
|
+
const { height: e2 } = F.current.getBoundingClientRect();
|
|
42
|
+
F.current.style.setProperty("--speed", `${$.speed}ms`), B(e2);
|
|
43
|
+
})();
|
|
44
|
+
}, [F]), t(() => {
|
|
45
|
+
i(r2, { topOffset: M, height: b, bottomOffset: I });
|
|
46
|
+
}, [I]), e.jsx("div", { ref: F, className: ["ono-message", `ono-message-${$.type}`, "ono-message-enter", v ? "" : "ono-message-color"].filter(Boolean).join(" "), style: K, onMouseEnter: () => {
|
|
47
|
+
T.current && (clearTimeout(T.current), T.current = null);
|
|
48
|
+
}, onMouseLeave: () => q($.type, $.duration, $.speed), children: "function" == typeof $.message ? $.message(g($.type), $.showClose && e.jsx(h, { handleDestroy: O })) : e.jsxs(e.Fragment, { children: [g($.type), e.jsx("div", { children: $.message }), $.showClose && e.jsx(h, { handleDestroy: O })] }) });
|
|
49
|
+
}, y = (e2) => {
|
|
50
|
+
if ("string" == typeof e2) return { message: e2 };
|
|
51
|
+
{
|
|
52
|
+
const s2 = { ...e2, instancesKey: e2.key };
|
|
53
|
+
return delete s2.key, { ...s2 };
|
|
54
|
+
}
|
|
55
|
+
}, x = { info: (e2) => {
|
|
56
|
+
r(p, { ...y(e2), type: "info" }, "ono-message");
|
|
57
|
+
}, success: (e2) => {
|
|
58
|
+
r(p, { ...y(e2), type: "success" }, "ono-message");
|
|
59
|
+
}, warning: (e2) => {
|
|
60
|
+
r(p, { ...y(e2), type: "warning" }, "ono-message");
|
|
61
|
+
}, error: (e2) => {
|
|
62
|
+
r(p, { ...y(e2), type: "error" }, "ono-message");
|
|
63
|
+
}, loading: (e2) => {
|
|
64
|
+
r(p, { ...y(e2), type: "loading" }, "ono-message");
|
|
65
|
+
} };
|
|
66
|
+
export {
|
|
67
|
+
x as m
|
|
68
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { j as o } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { f as e } from "./utils-BxXROOPY.js";
|
|
3
|
+
import { useRef as n, useEffect as l } from "react";
|
|
4
|
+
import { p as a } from "./PortalRenderer-CDAzQJgm.js";
|
|
5
|
+
const t = ({ title: a2 = "This is a modal title", icon: t2, content: r2 = "This is a modal content", okText: s = "confirm", cancelText: i = "cancel", isLoading: c, confirmDisabled: d, cancelDisabled: m, position: x, onConfirm: h = () => {
|
|
6
|
+
}, onCancel: b = () => {
|
|
7
|
+
}, mask: f = true, maskClosable: u = false, width: j, btnClr: p, footer: C = ({ OkBtn: e2, CancelBtn: n2 }) => o.jsxs(o.Fragment, { children: [o.jsx(n2, {}), o.jsx(e2, {})] }), modalBody: v, destroy: y }) => {
|
|
8
|
+
const g = n(null), B = n(null), w = [{ label: "themeColor", value: p || "" }, { label: "themeHoverColor", value: p && e(p, "light", 10) || "" }, { label: "themeActiveColor", value: p && e(p, "dark", 20) || "" }, { label: "themeDisabledClr", value: p && e(p, "light", 20) || "" }], N = () => {
|
|
9
|
+
if (x) {
|
|
10
|
+
if (!B.current) return;
|
|
11
|
+
B.current.classList.remove("ono-modal-enter"), B.current.classList.add("ono-modal-leave"), setTimeout(() => {
|
|
12
|
+
y();
|
|
13
|
+
}, 300);
|
|
14
|
+
} else y();
|
|
15
|
+
};
|
|
16
|
+
return l(() => (g.current && (f ? g.current.showModal() : g.current.show()), () => {
|
|
17
|
+
g.current && g.current.close();
|
|
18
|
+
}), [g.current, f]), l(() => {
|
|
19
|
+
(() => {
|
|
20
|
+
if (!B.current) return;
|
|
21
|
+
const o2 = B.current.style;
|
|
22
|
+
j && o2.setProperty("--width", j + "px"), x && (o2.setProperty("--left", (x.x / window.innerWidth * 100).toFixed(2) + "%"), o2.setProperty("--top", (x.y / window.innerHeight * 100).toFixed(2) + "%")), p && w.forEach((e2) => o2.setProperty(`--${e2.label}`, e2.value));
|
|
23
|
+
})();
|
|
24
|
+
}, [B]), o.jsx("dialog", { ref: g, className: "ono-modal", onClick: () => u && N(), children: v ? v(N) : o.jsxs("div", { ref: B, className: ["ono-modal-box", x ? "ono-modal-enter" : ""].join(" "), onClick: (o2) => o2.stopPropagation(), children: [o.jsxs("div", { className: "ono-modal-box-body", children: [t2 ?? o.jsx("div", { className: "ono-modal-box-body-icon", children: 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: 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" }) }) }), o.jsxs("div", { className: "ono-modal-box-body-contentBar", children: [o.jsx("h1", { className: "ono-modal-box-body-contentBar-title", children: a2 }), o.jsx("p", { className: "ono-modal-box-body-contentBar-content", children: r2 })] })] }), C && o.jsx("div", { className: "ono-modal-box-footer", children: C({ OkBtn: () => o.jsxs("button", { className: "ono-modal-box-footer-confirmBtn", disabled: d || c, onClick: () => {
|
|
25
|
+
h(), N();
|
|
26
|
+
}, children: [c && 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: 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" }) }), s ?? "Confirm"] }), CancelBtn: () => o.jsx("button", { className: "ono-modal-box-footer-cancelBtn", disabled: m || c, onClick: () => {
|
|
27
|
+
b(), N();
|
|
28
|
+
}, children: i ?? "Cancel" }), handleClose: () => N() }) })] }) });
|
|
29
|
+
}, r = (o2) => a(t, o2, "ono-modal");
|
|
30
|
+
export {
|
|
31
|
+
r as M
|
|
32
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { j as n } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
const a = ({ firstBtn: a2, lastBtn: i, currentPage: o, total: e, prevBtn: t, nextBtn: s, styles: l, className: c, children: r, onChange: p, pageBtnClassName: g, pageBtnActiveClassName: d, hiddenNextBtnOnLastPage: h, hiddenPrevBtnOnFirstPage: m }) => {
|
|
3
|
+
const b = Math.max(1, Math.min(o, e));
|
|
4
|
+
return n.jsxs("ul", { className: `ono-pagination ${c}`, style: l, children: [a2 && n.jsx("li", { className: a2 ? "ono-pagination-base" : "ono-pagination-btn", onClick: () => p(1), children: a2 }), m && 1 === o ? null : n.jsx("li", { className: "ono-pagination-base", style: { cursor: 1 !== o ? "pointer" : "no-drop" }, onClick: () => {
|
|
5
|
+
o <= 1 || p(o - 1);
|
|
6
|
+
}, children: t ? "function" == typeof t ? t(1 !== o) : t : n.jsx("div", { className: t ? "ono-pagination-base" : "ono-pagination-btn", children: "prevBtn" }) }), (() => {
|
|
7
|
+
const a3 = Array.from({ length: e }, (a4, i3) => n.jsx("li", { className: "ono-pagination-base", onClick: () => p(i3 + 1), children: r ? r({ page: i3 + 1, isActive: o === i3 + 1 }) : n.jsx("div", { className: `ono-pagination-base ${g ?? "ono-pagination-btn"} ${b === i3 + 1 ? d ?? "ono-pagination-btn-active" : ""}`, children: i3 + 1 }) }, i3 + 1));
|
|
8
|
+
if (a3.length <= 7) return a3;
|
|
9
|
+
const i2 = e - 1, t2 = b, s2 = t2 >= e - 2;
|
|
10
|
+
return t2 <= 3 ? [...a3.slice(0, 3 === t2 ? 4 : 3), "...", a3[i2]] : s2 ? [a3[0], "...", ...a3.slice(t2 === e - 2 ? -4 : -3)] : [a3[0], "...", ...a3.slice(t2 - 2, t2 + 1), "...", a3[i2]];
|
|
11
|
+
})(), h && o === e ? null : n.jsx("li", { className: "ono-pagination-base", style: { cursor: o !== e ? "pointer" : "no-drop" }, onClick: () => {
|
|
12
|
+
p(o >= e ? e : o + 1);
|
|
13
|
+
}, children: s ? "function" == typeof s ? s(o !== e) : s : n.jsx("div", { className: s ? "ono-pagination-base" : "ono-pagination-btn", children: "nextBtn" }) }), i && n.jsx("li", { className: i ? "ono-pagination-base" : "ono-pagination-btn", onClick: () => p(e), children: i })] });
|
|
14
|
+
};
|
|
15
|
+
export {
|
|
16
|
+
a as P
|
|
17
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { j as e, R as t } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
const n = (n2, d, o, r) => {
|
|
3
|
+
const { target: a, root: c } = ((e2, t2) => {
|
|
4
|
+
let n3 = null, d2 = null;
|
|
5
|
+
return t2 && (n3 = document.getElementById(t2), n3 || (n3 = document.createElement("div"), n3.id = t2, document.body.appendChild(n3))), e2 ? (d2 = document.getElementById(e2), d2 || (d2 = document.createElement("div"), d2.id = e2, n3 ? n3.appendChild(d2) : document.body.appendChild(d2))) : (d2 = document.createElement("div"), n3 ? n3.appendChild(d2) : document.body.appendChild(d2)), { target: d2, root: n3 };
|
|
6
|
+
})(o, r), m = (e2) => {
|
|
7
|
+
var _a;
|
|
8
|
+
"function" == typeof e2 && e2(), o ? (_a = document.getElementById(o)) == null ? void 0 : _a.remove() : a.remove(), requestAnimationFrame(() => c && 0 === c.children.length && c.remove());
|
|
9
|
+
};
|
|
10
|
+
if (void 0 !== a.__reactContainer$) a.__reactContainer$.render(e.jsx(n2, { ...{ ...d, destroy: m } }));
|
|
11
|
+
else {
|
|
12
|
+
const o2 = t.createRoot(a);
|
|
13
|
+
a.__reactContainer$ = o2, o2.render(e.jsx(n2, { ...{ ...d, destroy: m } }));
|
|
14
|
+
}
|
|
15
|
+
return m;
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
n as p
|
|
19
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as r, useRef as o, useEffect as a } from "react";
|
|
3
|
+
const n = ({ name: n2, value: l2, style: c, checked: d, onChange: s, children: t, className: i, radioW: u = 16, radioGap: h = 4, checkedColor: m = "#532ce1", unCheckedColor: p = "transparent", disabled: C = false }) => {
|
|
4
|
+
const [v, k] = r(""), f = o(null), y = o(null), b = o(null), j = [{ value: u, name: "w" }, { value: h, name: "gap" }, { value: m, name: "checkedColor" }, { value: p, name: "unCheckedColor" }];
|
|
5
|
+
return a(() => {
|
|
6
|
+
(() => {
|
|
7
|
+
if (!b.current || !y.current) return;
|
|
8
|
+
j.forEach(({ value: e3, name: r2 }) => {
|
|
9
|
+
e3 && ((e4, r3, o2) => {
|
|
10
|
+
const a2 = "number" == typeof e4;
|
|
11
|
+
o2.style.setProperty(`--${r3}`, a2 ? `${e4}px` : e4);
|
|
12
|
+
})(e3, r2, y.current);
|
|
13
|
+
});
|
|
14
|
+
const e2 = getComputedStyle(b.current);
|
|
15
|
+
v || k(e2.borderColor), b.current.style.borderColor = d ? m : v;
|
|
16
|
+
})();
|
|
17
|
+
}, [y, b, d, v]), e.jsxs("div", { ref: y, className: ["ono-radio-box", i].join(" "), style: c, children: [e.jsx("div", { ref: b, className: "ono-radio", onClick: () => {
|
|
18
|
+
var _a;
|
|
19
|
+
return (_a = f.current) == null ? void 0 : _a.click();
|
|
20
|
+
}, children: e.jsx("input", { type: "radio", name: n2, ref: f, value: l2 + "", checked: d, disabled: C, id: l2 + "" + t, onChange: s }) }), t && e.jsx("label", { htmlFor: l2 + "" + t || "", children: t })] });
|
|
21
|
+
}, l = ({ name: r2, style: o2, options: a2, onChange: l2, className: c, radioW: d = 16, radioGap: s = 4, labelPosition: t = "right", checkedColor: i = "#532ce1", unCheckedColor: u = "transparent", value: h }) => e.jsx("div", { className: ["ono-radio-group", c].join(" "), style: o2, children: a2.map(({ label: o3, value: a3, disabled: c2 }) => e.jsx(n, { name: r2, value: a3, radioW: d, radioGap: s, style: { flexDirection: "left" === t ? "row-reverse" : "row" }, checkedColor: i, unCheckedColor: u, onChange: () => l2(a3), checked: h + "" == a3 + "", disabled: "function" == typeof c2 ? c2(h) : c2 || false, children: o3 }, o3)) });
|
|
22
|
+
export {
|
|
23
|
+
n as R,
|
|
24
|
+
l as a
|
|
25
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useState as o, useEffect as n } from "react";
|
|
3
|
+
import { T as a } from "./Tooltip-C5OFmxWo.js";
|
|
4
|
+
import { O as t } from "./Input-Z3uL5-nj.js";
|
|
5
|
+
import { L as l } from "./List-UAKCMuGC.js";
|
|
6
|
+
const i = ({ label: o2, value: n2, disabled: a2, onChange: t2, optionRender: l2, currentValue: i2 }) => e.jsx("button", { role: "option", "aria-label": o2, disabled: a2, className: "ono-option-item", onClick: () => t2 == null ? void 0 : t2(n2), children: l2 ? l2({ label: o2, value: n2, disabled: a2 }, i2 === o2) : e.jsx("div", { className: ["ono-option-item-content", i2 === o2 ? "ono-option-item-content-active" : "", a2 ? "ono-option-item-content-disabled" : ""].filter(Boolean).join(" "), children: o2 }) }), s = ({ options: s2, defaultValue: c, placeholder: d, inputBorder: p, isShowArrow: m, disabled: u, clearable: h, selectClassName: j, optionsClassName: b, filterable: f, notFoundContent: x, optionRender: v, onClear: C, onChange: g, filterMethod: w }) => {
|
|
7
|
+
const [N, L] = o(""), [B, S] = o(""), [V, k] = o(false), [M, y] = o(false), [O, R] = o(""), A = (e2) => {
|
|
8
|
+
const o2 = s2.find((o3) => o3.value === e2);
|
|
9
|
+
L(o2 ? o2.label : "");
|
|
10
|
+
}, F = (e2) => {
|
|
11
|
+
g == null ? void 0 : g(e2), R(e2), A(e2);
|
|
12
|
+
};
|
|
13
|
+
return n(() => {
|
|
14
|
+
c && A(c);
|
|
15
|
+
}, [c, s2]), e.jsx(a, { sameWidth: true, trigger: "click", placement: "bottom", isShowArrow: m, className: ["ono-option", b].filter(Boolean).join(" "), onOpenChange: (e2) => {
|
|
16
|
+
y(e2), f && B && !e2 && S("");
|
|
17
|
+
}, content: e.jsx(l, { list: f ? w && "function" == typeof w ? w(B, s2) : s2.filter((e2) => e2.label.toLocaleLowerCase().includes(B.toLocaleLowerCase())) : s2, fallback: x ?? e.jsx("div", { className: "ono-option-item", children: e.jsx("div", { className: "ono-option-item-content-no-data", onClick: (e2) => e2.stopPropagation(), children: "No Data" }) }), children: (o2) => e.jsx(i, { ...o2, onChange: F, currentValue: N.toString(), optionRender: v }, o2.value) }), children: e.jsx("div", { className: "ono-select", onMouseEnter: () => k(true), onMouseLeave: () => k(false), children: e.jsx(t, { className: [f ? "" : "ono-select-readonly", j].filter(Boolean).join(" "), border: p, disabled: u, placeholder: f && O ? N.toString() || "" : d, readonly: !f, value: f && M ? B : N.toString(), clearable: V && h, suffix: V && h && N || h && B && f ? e.jsx(e.Fragment, {}) : e.jsx(r, { isVisible: M }), onClear: () => {
|
|
18
|
+
C == null ? void 0 : C(), g == null ? void 0 : g(""), R(""), L(""), S("");
|
|
19
|
+
}, onChange: (e2) => S(e2.target.value) }) }) });
|
|
20
|
+
}, r = ({ isVisible: o2 }) => e.jsx("svg", { className: ["ono-select-arrow-down-icon", o2 ? "ono-select-arrow-down-active" : ""].filter(Boolean).join(" "), viewBox: "64 64 896 896", focusable: "false", "data-icon": "down", fill: "currentColor", "aria-hidden": "true", children: e.jsx("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }) });
|
|
21
|
+
export {
|
|
22
|
+
s as O
|
|
23
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { useRef as r, useEffect as s } from "react";
|
|
3
|
+
const a = ({ w: a2, h: n, src: t, clr: l, className: c, onClick: o }) => {
|
|
4
|
+
const m = r(null), i = [{ value: a2, name: "w" }, { value: n, name: "h" }, { value: l, name: "clr" }];
|
|
5
|
+
return s(() => {
|
|
6
|
+
m.current && i.forEach((e2) => {
|
|
7
|
+
var r2, s2, a3;
|
|
8
|
+
e2.value && (r2 = e2.value, s2 = e2.name, a3 = m.current, "string" == typeof r2 ? a3.style.setProperty(`--${s2}`, r2) : a3.style.setProperty(`--${s2}`, `${r2}px`));
|
|
9
|
+
});
|
|
10
|
+
}, [m, l]), e.jsx("div", { ref: m, className: ["ono-svg-img", c].join(" "), onClick: o, children: e.jsx("img", { src: t, alt: "" }) });
|
|
11
|
+
};
|
|
12
|
+
export {
|
|
13
|
+
a as S
|
|
14
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { p as n } from "./utils-BxXROOPY.js";
|
|
3
|
+
import { useRef as r, useEffect as t } from "react";
|
|
4
|
+
const c = ({ id: c2, text: i, style: s, color: l, checked: a, onChange: o, name: d = "", className: h, disabled: u = false }) => {
|
|
5
|
+
const m = r(null), f = r(null), v = r(null), p = r(null), j = r(null), x = r(null), w = [{ value: "string" == typeof l ? l : l == null ? void 0 : l.active, name: "checkedClr" }, { value: "string" == typeof l ? void 0 : l == null ? void 0 : l.inactive, name: "uncheckedClr" }];
|
|
6
|
+
return t(() => {
|
|
7
|
+
(() => {
|
|
8
|
+
if (!f.current || !m.current) return;
|
|
9
|
+
let e2 = 60, r2 = 32;
|
|
10
|
+
if (h || s) {
|
|
11
|
+
const t2 = getComputedStyle(f.current);
|
|
12
|
+
e2 = n(t2.width), r2 = n(t2.height);
|
|
13
|
+
}
|
|
14
|
+
[...w, { value: e2, name: "w" }, { value: r2, name: "h" }].forEach(({ value: e3, name: n2 }) => {
|
|
15
|
+
e3 && ((e4, n3, r3) => {
|
|
16
|
+
const t2 = "number" == typeof e4;
|
|
17
|
+
r3.style.setProperty(`--${n3}`, t2 ? `${e4}px` : e4);
|
|
18
|
+
})(e3, n2, m.current);
|
|
19
|
+
}), requestAnimationFrame(() => {
|
|
20
|
+
p.current && (p.current.style.transition = "transform 0.3s");
|
|
21
|
+
});
|
|
22
|
+
})();
|
|
23
|
+
}, [f, m, p, h, s, l, i, j, x]), t(() => {
|
|
24
|
+
v.current && (v.current.checked = a);
|
|
25
|
+
}, [v, a]), e.jsxs("div", { ref: m, className: ["ono-switch", u ? "ono-switch-is-disabled" : ""].filter(Boolean).join(" "), children: [e.jsx("input", { id: c2, name: d, role: "switch", ref: v, type: "checkbox", checked: a, onChange: (e2) => {
|
|
26
|
+
u || (o == null ? void 0 : o(e2.currentTarget.checked, e2));
|
|
27
|
+
} }), e.jsx("div", { ref: f, className: ["ono-switch-box", h || ""].filter(Boolean).join(" "), style: s, onClick: () => {
|
|
28
|
+
var _a;
|
|
29
|
+
return (_a = v.current) == null ? void 0 : _a.click();
|
|
30
|
+
}, children: e.jsxs("div", { ref: p, className: "ono-switch-children-bar", children: [(i == null ? void 0 : i.active) && e.jsx("div", { ref: j, className: "ono-switch-children", children: i == null ? void 0 : i.active }), e.jsx("div", { className: "ono-switch-slider" }), (i == null ? void 0 : i.inactive) && e.jsx("div", { ref: x, className: "ono-switch-children", children: i == null ? void 0 : i.inactive })] }) })] });
|
|
31
|
+
};
|
|
32
|
+
export {
|
|
33
|
+
c as S
|
|
34
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { j as e } from "./dependencies-CbQbPZZ-.js";
|
|
2
|
+
import { h as t } from "./utils-BxXROOPY.js";
|
|
3
|
+
import { useState as n, useRef as o, useEffect as r, useCallback as s } from "react";
|
|
4
|
+
const i = ({ children: i2, animation: a, className: l, duration: c = 300, style: d, maskColor: p = "rgba(0, 0, 0, 0.5)", disableContextMenu: u, clickMaskClose: m = true, dialogClose: y }) => {
|
|
5
|
+
const [f, k] = n(false), x = o(null), h = () => {
|
|
6
|
+
if (x.current) if (k(true), a) {
|
|
7
|
+
const e2 = x.current;
|
|
8
|
+
e2.classList.remove(`ono-${a.type}-enter`), e2.classList.add(`ono-${a.type}-leave`), setTimeout(y, c);
|
|
9
|
+
} else y();
|
|
10
|
+
};
|
|
11
|
+
r(() => {
|
|
12
|
+
(() => {
|
|
13
|
+
if (!a || !x.current) return;
|
|
14
|
+
const e2 = x.current.parentElement.style, n2 = x.current.style;
|
|
15
|
+
switch (e2.setProperty("--duration", c / 1e3 + "s"), a.type) {
|
|
16
|
+
case "zoom": {
|
|
17
|
+
const { x: e3, y: o2 } = t(a.element), r2 = (e3 / window.innerWidth * 100).toFixed(2) + "%", s2 = (o2 / window.innerHeight * 100).toFixed(2) + "%";
|
|
18
|
+
n2.setProperty("--left", r2), n2.setProperty("--top", s2);
|
|
19
|
+
break;
|
|
20
|
+
}
|
|
21
|
+
case "fade": {
|
|
22
|
+
const e3 = "left-center" === a.direction ? "--left" : "--top";
|
|
23
|
+
n2.setProperty(e3, a.startPosition);
|
|
24
|
+
break;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
})();
|
|
28
|
+
}, [x, a]);
|
|
29
|
+
const v = s(() => {
|
|
30
|
+
if (!a) return "";
|
|
31
|
+
const e2 = `ono-${a.type}-enter`, t2 = `ono-${a.type}-leave`;
|
|
32
|
+
return f ? t2 : e2;
|
|
33
|
+
}, [a, f]);
|
|
34
|
+
return e.jsx("div", { className: `
|
|
35
|
+
ono-mask
|
|
36
|
+
ono-mask-${f ? "leave" : "enter"}
|
|
37
|
+
`, style: { background: p }, onClick: () => m && h(), onContextMenu: (e2) => u && e2.preventDefault(), children: e.jsx("div", { ref: x, className: `
|
|
38
|
+
ono-dialog
|
|
39
|
+
${l || ""}
|
|
40
|
+
${v()}
|
|
41
|
+
`, style: d, onClick: (e2) => e2.stopPropagation(), children: "function" == typeof i2 ? i2(h) : i2 }) });
|
|
42
|
+
};
|
|
43
|
+
export {
|
|
44
|
+
i as T
|
|
45
|
+
};
|