asterui 0.12.21 → 0.12.22
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/components/VirtualList.d.ts +29 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +46 -44
- package/dist/index.js.map +1 -1
- package/dist/index10.js +1 -1
- package/dist/index100.js +32 -5
- package/dist/index100.js.map +1 -1
- package/dist/index101.js +5 -13
- package/dist/index101.js.map +1 -1
- package/dist/index102.js +11 -43
- package/dist/index102.js.map +1 -1
- package/dist/index103.js +44 -11
- package/dist/index103.js.map +1 -1
- package/dist/index104.js +10 -12
- package/dist/index104.js.map +1 -1
- package/dist/index105.js +14 -7
- package/dist/index105.js.map +1 -1
- package/dist/index106.js +7 -12
- package/dist/index106.js.map +1 -1
- package/dist/index107.js +11 -29
- package/dist/index107.js.map +1 -1
- package/dist/index108.js +29 -16
- package/dist/index108.js.map +1 -1
- package/dist/index109.js +21 -0
- package/dist/index109.js.map +1 -0
- package/dist/index11.js +14 -14
- package/dist/index110.js +36 -0
- package/dist/index110.js.map +1 -0
- package/dist/index111.js +523 -0
- package/dist/index111.js.map +1 -0
- package/dist/index112.js +53 -0
- package/dist/index112.js.map +1 -0
- package/dist/index20.js +8 -8
- package/dist/index23.js +13 -13
- package/dist/index28.js +2 -2
- package/dist/index36.js +5 -5
- package/dist/index40.js +6 -6
- package/dist/index41.js +30 -30
- package/dist/index45.js +5 -5
- package/dist/index47.js +15 -15
- package/dist/index51.js +18 -18
- package/dist/index51.js.map +1 -1
- package/dist/index55.js +4 -4
- package/dist/index55.js.map +1 -1
- package/dist/index58.js +22 -22
- package/dist/index62.js +12 -12
- package/dist/index64.js +13 -13
- package/dist/index68.js +12 -12
- package/dist/index71.js +19 -19
- package/dist/index76.js +2 -2
- package/dist/index77.js +21 -21
- package/dist/index8.js +18 -18
- package/dist/index80.js +13 -13
- package/dist/index82.js +23 -23
- package/dist/index88.js +2 -2
- package/dist/index97.js +61 -121
- package/dist/index97.js.map +1 -1
- package/dist/index98.js +126 -14
- package/dist/index98.js.map +1 -1
- package/dist/index99.js +12 -31
- package/dist/index99.js.map +1 -1
- package/package.json +6 -1
package/dist/index77.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { jsx as h, jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as h, jsxs as _, Fragment as ie } from "react/jsx-runtime";
|
|
2
|
+
import K, { useRef as L, useState as J, useCallback as y, useEffect as Q } from "react";
|
|
3
3
|
const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
4
4
|
children: M,
|
|
5
5
|
direction: z = "horizontal",
|
|
6
6
|
sizes: P,
|
|
7
7
|
defaultSizes: $,
|
|
8
|
-
onSizesChange:
|
|
8
|
+
onSizesChange: T,
|
|
9
9
|
gutterSize: R = 8,
|
|
10
10
|
minSize: E = 50,
|
|
11
11
|
className: Z = ""
|
|
12
12
|
}) => {
|
|
13
|
-
const D = L(null), I = L([]), x = L(null), u =
|
|
14
|
-
(e) =>
|
|
15
|
-
), m = u.length, [f,
|
|
13
|
+
const D = L(null), I = L([]), x = L(null), u = K.Children.toArray(M).filter(
|
|
14
|
+
(e) => K.isValidElement(e)
|
|
15
|
+
), m = u.length, [f, F] = J(
|
|
16
16
|
() => u.map((e) => e.props.defaultCollapsed ?? e.props.collapsed ?? !1)
|
|
17
|
-
),
|
|
17
|
+
), W = L([]), j = y(() => {
|
|
18
18
|
const e = u.map((s) => s.props.defaultSize), o = e.some((s) => s !== void 0);
|
|
19
19
|
if ($ && $.length === m)
|
|
20
20
|
return $;
|
|
@@ -24,39 +24,39 @@ const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
|
24
24
|
}
|
|
25
25
|
const i = 100 / m;
|
|
26
26
|
return Array(m).fill(i);
|
|
27
|
-
}, [$, m, u]), [k,
|
|
27
|
+
}, [$, m, u]), [k, X] = J(j), ee = y(() => {
|
|
28
28
|
const e = u.map((t) => t.props.size);
|
|
29
29
|
if (!e.some((t) => t !== void 0)) return null;
|
|
30
30
|
const i = e.reduce((t, l) => t + (l ?? 0), 0), s = e.filter((t) => t === void 0).length, r = Math.max(0, 100 - i), a = s > 0 ? r / s : 0;
|
|
31
31
|
return e.map((t, l) => t ?? k[l] ?? a);
|
|
32
32
|
}, [u, k]), d = P || ee() || k;
|
|
33
33
|
Q(() => {
|
|
34
|
-
!P && k.length !== m &&
|
|
34
|
+
!P && k.length !== m && X(j());
|
|
35
35
|
}, [m, P, k.length, j]), Q(() => {
|
|
36
36
|
const e = u.map(
|
|
37
37
|
(i, s) => i.props.collapsed ?? f[s] ?? !1
|
|
38
38
|
);
|
|
39
|
-
e.some((i, s) => i !== f[s]) &&
|
|
39
|
+
e.some((i, s) => i !== f[s]) && F(e);
|
|
40
40
|
}, [u.map((e) => e.props.collapsed).join(",")]);
|
|
41
41
|
const b = y(
|
|
42
42
|
(e) => {
|
|
43
|
-
P ||
|
|
43
|
+
P || X(e), T?.(e);
|
|
44
44
|
},
|
|
45
|
-
[P,
|
|
46
|
-
),
|
|
45
|
+
[P, T]
|
|
46
|
+
), Y = y(
|
|
47
47
|
(e) => {
|
|
48
48
|
const o = u[e];
|
|
49
49
|
if (!o?.props.collapsible) return;
|
|
50
50
|
const s = !f[e], r = [...f];
|
|
51
|
-
if (r[e] = s,
|
|
52
|
-
|
|
51
|
+
if (r[e] = s, F(r), o.props.onCollapse?.(s), s) {
|
|
52
|
+
W.current = [...d];
|
|
53
53
|
const a = 0, t = d[e] - a, l = d.map((n, c) => ({ size: n, index: c })).filter((n, c) => c !== e && !r[c]);
|
|
54
54
|
if (l.length > 0) {
|
|
55
55
|
const n = t / l.length, c = d.map((p, w) => w === e ? a : r[w] ? p : p + n);
|
|
56
56
|
b(c);
|
|
57
57
|
}
|
|
58
58
|
} else {
|
|
59
|
-
const a =
|
|
59
|
+
const a = W.current[e] || 100 / m, l = d.map((n, c) => ({ size: n, index: c })).filter((n, c) => c !== e && !r[c]).reduce((n, c) => n + c.size, 0);
|
|
60
60
|
if (l > 0) {
|
|
61
61
|
const n = d.map((c, p) => {
|
|
62
62
|
if (p === e) return a;
|
|
@@ -135,7 +135,7 @@ const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
|
135
135
|
className: `flex ${g ? "flex-row" : "flex-col"} h-full w-full ${Z}`,
|
|
136
136
|
children: u.map((e, o) => {
|
|
137
137
|
const i = e.props, s = o === u.length - 1, r = f[o], a = i.resizable !== !1 && !r;
|
|
138
|
-
return /* @__PURE__ */ K
|
|
138
|
+
return /* @__PURE__ */ _(K.Fragment, { children: [
|
|
139
139
|
/* @__PURE__ */ h(
|
|
140
140
|
"div",
|
|
141
141
|
{
|
|
@@ -171,7 +171,7 @@ const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
|
171
171
|
onKeyDown: (t) => oe(o, t),
|
|
172
172
|
children: (() => {
|
|
173
173
|
const { showStart: t, showEnd: l, panel1Collapsed: n, panel2Collapsed: c } = ne(o);
|
|
174
|
-
return !t && !l ? /* @__PURE__ */
|
|
174
|
+
return !t && !l ? /* @__PURE__ */ _(
|
|
175
175
|
"div",
|
|
176
176
|
{
|
|
177
177
|
className: `
|
|
@@ -184,7 +184,7 @@ const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
|
184
184
|
/* @__PURE__ */ h("div", { className: "w-1 h-1 rounded-full bg-base-content/30 group-hover:bg-primary/60" })
|
|
185
185
|
]
|
|
186
186
|
}
|
|
187
|
-
) : /* @__PURE__ */
|
|
187
|
+
) : /* @__PURE__ */ _(
|
|
188
188
|
"div",
|
|
189
189
|
{
|
|
190
190
|
className: `
|
|
@@ -197,7 +197,7 @@ const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
|
197
197
|
{
|
|
198
198
|
type: "button",
|
|
199
199
|
onClick: (p) => {
|
|
200
|
-
p.stopPropagation(),
|
|
200
|
+
p.stopPropagation(), Y(o);
|
|
201
201
|
},
|
|
202
202
|
className: `
|
|
203
203
|
p-0.5 rounded hover:bg-base-content/20 transition-colors
|
|
@@ -221,7 +221,7 @@ const pe = ({ children: M }) => /* @__PURE__ */ h(ie, { children: M }), ue = ({
|
|
|
221
221
|
{
|
|
222
222
|
type: "button",
|
|
223
223
|
onClick: (p) => {
|
|
224
|
-
p.stopPropagation(),
|
|
224
|
+
p.stopPropagation(), Y(o + 1);
|
|
225
225
|
},
|
|
226
226
|
className: `
|
|
227
227
|
p-0.5 rounded hover:bg-base-content/20 transition-colors
|
package/dist/index8.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
import { jsx as n, jsxs as f } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
function x({ children: c, items: r, separator: t, className:
|
|
4
|
-
const
|
|
5
|
-
const d =
|
|
6
|
-
return /* @__PURE__ */ f(
|
|
2
|
+
import h from "react";
|
|
3
|
+
function x({ children: c, items: r, separator: t, className: a = "", ...i }) {
|
|
4
|
+
const l = t !== void 0, o = typeof t == "string" ? "px-2" : "px-1", m = () => !r || r.length === 0 ? null : r.map((e, s) => {
|
|
5
|
+
const d = s === r.length - 1;
|
|
6
|
+
return /* @__PURE__ */ f(h.Fragment, { children: [
|
|
7
7
|
/* @__PURE__ */ n("li", { className: e.className, children: e.href || e.onClick ? /* @__PURE__ */ n("a", { href: e.href, onClick: e.onClick, children: e.title }) : e.title }),
|
|
8
|
-
|
|
9
|
-
] },
|
|
8
|
+
l && !d && /* @__PURE__ */ n("li", { className: `flex items-center ${o} text-base-content/50`, children: t })
|
|
9
|
+
] }, s);
|
|
10
10
|
}), b = () => {
|
|
11
11
|
if (r && r.length > 0)
|
|
12
12
|
return m();
|
|
13
|
-
if (
|
|
14
|
-
const e =
|
|
15
|
-
return e.forEach((d,
|
|
16
|
-
|
|
17
|
-
/* @__PURE__ */ n("li", { className: `flex items-center ${
|
|
13
|
+
if (l && c) {
|
|
14
|
+
const e = h.Children.toArray(c), s = [];
|
|
15
|
+
return e.forEach((d, u) => {
|
|
16
|
+
s.push(d), u < e.length - 1 && s.push(
|
|
17
|
+
/* @__PURE__ */ n("li", { className: `flex items-center ${o} text-base-content/50`, children: t }, `sep-${u}`)
|
|
18
18
|
);
|
|
19
|
-
}),
|
|
19
|
+
}), s;
|
|
20
20
|
}
|
|
21
21
|
return c;
|
|
22
|
-
}, p =
|
|
22
|
+
}, p = l ? `breadcrumbs text-sm [&_li::before]:!hidden ${a}` : `breadcrumbs text-sm ${a}`;
|
|
23
23
|
return /* @__PURE__ */ n("div", { className: p, ...i, children: /* @__PURE__ */ n("ul", { children: b() }) });
|
|
24
24
|
}
|
|
25
|
-
function g({ children: c, href: r, onClick: t, icon:
|
|
26
|
-
const
|
|
27
|
-
|
|
25
|
+
function g({ children: c, href: r, onClick: t, icon: a, className: i = "", ...l }) {
|
|
26
|
+
const o = a ? /* @__PURE__ */ f("span", { className: "inline-flex items-center gap-2", children: [
|
|
27
|
+
a,
|
|
28
28
|
c
|
|
29
29
|
] }) : c;
|
|
30
|
-
return r || t ? /* @__PURE__ */ n("li", { className: i, ...
|
|
30
|
+
return r || t ? /* @__PURE__ */ n("li", { className: i, ...l, children: /* @__PURE__ */ n("a", { href: r, onClick: t, children: o }) }) : /* @__PURE__ */ n("li", { className: i, ...l, children: o });
|
|
31
31
|
}
|
|
32
32
|
const N = Object.assign(x, {
|
|
33
33
|
Item: g
|
package/dist/index80.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a, jsxs as b } from "react/jsx-runtime";
|
|
2
2
|
import y from "react";
|
|
3
3
|
const j = {
|
|
4
4
|
neutral: "step-neutral",
|
|
@@ -11,7 +11,7 @@ const j = {
|
|
|
11
11
|
error: "step-error"
|
|
12
12
|
};
|
|
13
13
|
function N({
|
|
14
|
-
children:
|
|
14
|
+
children: i,
|
|
15
15
|
items: l,
|
|
16
16
|
current: e,
|
|
17
17
|
direction: p,
|
|
@@ -22,9 +22,9 @@ function N({
|
|
|
22
22
|
}) {
|
|
23
23
|
const n = ["steps", (p === "vertical" || d) && "steps-vertical", c].filter(Boolean).join(" ");
|
|
24
24
|
if (l && l.length > 0)
|
|
25
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ a("ul", { className: n, ...f, children: l.map((s, o) => {
|
|
26
26
|
const C = e !== void 0 && o < e, r = e !== void 0 && o === e, v = s.color || (C || r ? "primary" : void 0);
|
|
27
|
-
return /* @__PURE__ */
|
|
27
|
+
return /* @__PURE__ */ a(
|
|
28
28
|
k,
|
|
29
29
|
{
|
|
30
30
|
color: v,
|
|
@@ -40,7 +40,7 @@ function N({
|
|
|
40
40
|
s.key ?? o
|
|
41
41
|
);
|
|
42
42
|
}) });
|
|
43
|
-
const u = e !== void 0 ? y.Children.map(
|
|
43
|
+
const u = e !== void 0 ? y.Children.map(i, (s, o) => {
|
|
44
44
|
if (y.isValidElement(s)) {
|
|
45
45
|
const C = o < e, r = o === e, v = s.props.color || (C || r ? "primary" : void 0);
|
|
46
46
|
return y.cloneElement(s, {
|
|
@@ -52,11 +52,11 @@ function N({
|
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
54
|
return s;
|
|
55
|
-
}) :
|
|
56
|
-
return /* @__PURE__ */
|
|
55
|
+
}) : i;
|
|
56
|
+
return /* @__PURE__ */ a("ul", { className: n, ...f, children: u });
|
|
57
57
|
}
|
|
58
58
|
function k({
|
|
59
|
-
children:
|
|
59
|
+
children: i,
|
|
60
60
|
title: l,
|
|
61
61
|
description: e,
|
|
62
62
|
icon: p,
|
|
@@ -81,17 +81,17 @@ function k({
|
|
|
81
81
|
style: n && !c ? { cursor: "pointer" } : void 0,
|
|
82
82
|
...s,
|
|
83
83
|
children: [
|
|
84
|
-
p && /* @__PURE__ */
|
|
85
|
-
l ??
|
|
86
|
-
e && /* @__PURE__ */
|
|
84
|
+
p && /* @__PURE__ */ a("span", { className: "step-icon", children: p }),
|
|
85
|
+
l ?? i,
|
|
86
|
+
e && /* @__PURE__ */ a("span", { className: "text-xs opacity-70 block", children: e })
|
|
87
87
|
]
|
|
88
88
|
}
|
|
89
89
|
);
|
|
90
90
|
}
|
|
91
|
-
const
|
|
91
|
+
const S = Object.assign(N, {
|
|
92
92
|
Step: k
|
|
93
93
|
});
|
|
94
94
|
export {
|
|
95
|
-
|
|
95
|
+
S as Steps
|
|
96
96
|
};
|
|
97
97
|
//# sourceMappingURL=index80.js.map
|
package/dist/index82.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as a, jsxs as c, Fragment as o } from "react/jsx-runtime";
|
|
2
|
+
import u, { useState as k } from "react";
|
|
3
3
|
const B = {
|
|
4
4
|
box: "tabs-box",
|
|
5
5
|
border: "tabs-border",
|
|
@@ -11,11 +11,11 @@ const B = {
|
|
|
11
11
|
lg: "tabs-lg",
|
|
12
12
|
xl: "tabs-xl"
|
|
13
13
|
};
|
|
14
|
-
function
|
|
15
|
-
children:
|
|
14
|
+
function _({
|
|
15
|
+
children: s,
|
|
16
16
|
items: e,
|
|
17
17
|
activeKey: n,
|
|
18
|
-
defaultActiveKey:
|
|
18
|
+
defaultActiveKey: y,
|
|
19
19
|
onChange: K,
|
|
20
20
|
variant: b,
|
|
21
21
|
size: r,
|
|
@@ -23,27 +23,27 @@ function E({
|
|
|
23
23
|
className: p = "",
|
|
24
24
|
...C
|
|
25
25
|
}) {
|
|
26
|
-
const g =
|
|
27
|
-
(t) =>
|
|
28
|
-
),
|
|
26
|
+
const g = u.Children.toArray(s).filter(
|
|
27
|
+
(t) => u.isValidElement(t) && t.type === x
|
|
28
|
+
), l = e && e.length > 0 ? e.map((t) => ({
|
|
29
29
|
tabKey: t.key,
|
|
30
30
|
tab: t.label,
|
|
31
31
|
children: t.children,
|
|
32
32
|
disabled: t.disabled,
|
|
33
33
|
icon: t.icon
|
|
34
34
|
})) : g.map((t) => t.props), [j, A] = k(
|
|
35
|
-
|
|
36
|
-
),
|
|
35
|
+
y || l[0]?.tabKey || ""
|
|
36
|
+
), f = n !== void 0 ? n : j, N = (t) => {
|
|
37
37
|
n === void 0 && A(t), K?.(t);
|
|
38
38
|
}, P = [
|
|
39
39
|
"tabs",
|
|
40
40
|
b && B[b],
|
|
41
41
|
r && R[r],
|
|
42
42
|
p
|
|
43
|
-
].filter(Boolean).join(" "),
|
|
44
|
-
const
|
|
43
|
+
].filter(Boolean).join(" "), m = l.find((t) => t.tabKey === f), h = /* @__PURE__ */ a("div", { role: "tablist", className: P, children: l.map((t) => {
|
|
44
|
+
const i = f === t.tabKey, T = [
|
|
45
45
|
"tab",
|
|
46
|
-
|
|
46
|
+
i && "tab-active",
|
|
47
47
|
t.disabled && "tab-disabled"
|
|
48
48
|
].filter(Boolean).join(" ");
|
|
49
49
|
return /* @__PURE__ */ c(
|
|
@@ -53,17 +53,17 @@ function E({
|
|
|
53
53
|
className: T,
|
|
54
54
|
onClick: () => !t.disabled && N(t.tabKey),
|
|
55
55
|
disabled: t.disabled,
|
|
56
|
-
"data-state":
|
|
57
|
-
"aria-selected":
|
|
56
|
+
"data-state": i ? "active" : "inactive",
|
|
57
|
+
"aria-selected": i,
|
|
58
58
|
children: [
|
|
59
|
-
t.icon && /* @__PURE__ */
|
|
59
|
+
t.icon && /* @__PURE__ */ a("span", { className: "mr-1", children: t.icon }),
|
|
60
60
|
t.tab
|
|
61
61
|
]
|
|
62
62
|
},
|
|
63
63
|
t.tabKey
|
|
64
64
|
);
|
|
65
|
-
}) }), v =
|
|
66
|
-
return /* @__PURE__ */
|
|
65
|
+
}) }), v = m && /* @__PURE__ */ a("div", { className: d === "top" ? "mt-4" : "mb-4", role: "tabpanel", children: m.children });
|
|
66
|
+
return /* @__PURE__ */ a("div", { ...C, children: d === "top" ? /* @__PURE__ */ c(o, { children: [
|
|
67
67
|
h,
|
|
68
68
|
v
|
|
69
69
|
] }) : /* @__PURE__ */ c(o, { children: [
|
|
@@ -71,13 +71,13 @@ function E({
|
|
|
71
71
|
h
|
|
72
72
|
] }) });
|
|
73
73
|
}
|
|
74
|
-
function
|
|
75
|
-
return /* @__PURE__ */
|
|
74
|
+
function x({ children: s }) {
|
|
75
|
+
return /* @__PURE__ */ a(o, { children: s });
|
|
76
76
|
}
|
|
77
|
-
const
|
|
78
|
-
Panel:
|
|
77
|
+
const I = Object.assign(_, {
|
|
78
|
+
Panel: x
|
|
79
79
|
});
|
|
80
80
|
export {
|
|
81
|
-
|
|
81
|
+
I as Tabs
|
|
82
82
|
};
|
|
83
83
|
//# sourceMappingURL=index82.js.map
|
package/dist/index88.js
CHANGED
|
@@ -59,10 +59,10 @@ function p({
|
|
|
59
59
|
l && /* @__PURE__ */ e("div", { className: c, children: l })
|
|
60
60
|
] });
|
|
61
61
|
}
|
|
62
|
-
const
|
|
62
|
+
const _ = Object.assign(N, {
|
|
63
63
|
Item: p
|
|
64
64
|
});
|
|
65
65
|
export {
|
|
66
|
-
|
|
66
|
+
_ as Timeline
|
|
67
67
|
};
|
|
68
68
|
//# sourceMappingURL=index88.js.map
|
package/dist/index97.js
CHANGED
|
@@ -1,129 +1,69 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as o } from "react";
|
|
3
|
+
import { useVirtualizer as S } from "./index110.js";
|
|
4
|
+
function N({
|
|
5
|
+
items: e,
|
|
6
|
+
height: a,
|
|
7
|
+
itemHeight: i,
|
|
8
|
+
renderItem: u,
|
|
9
|
+
overscan: d = 5,
|
|
10
|
+
className: f = "",
|
|
11
|
+
innerClassName: h = "",
|
|
12
|
+
itemClassName: p = "",
|
|
13
|
+
width: m,
|
|
14
|
+
gap: g = 0,
|
|
15
|
+
onScroll: x
|
|
16
|
+
}) {
|
|
17
|
+
const s = o(null), r = o(i), l = o(e);
|
|
18
|
+
r.current = i, l.current = e;
|
|
19
|
+
const c = S({
|
|
20
|
+
count: e.length,
|
|
21
|
+
getScrollElement: () => s.current,
|
|
22
|
+
estimateSize: (t) => (typeof r.current == "function" ? r.current(l.current[t], t) : r.current) + g,
|
|
23
|
+
overscan: d
|
|
24
|
+
}), y = c.getVirtualItems(), z = (t) => {
|
|
25
|
+
x?.(t.currentTarget.scrollTop);
|
|
26
26
|
};
|
|
27
|
-
|
|
28
|
-
children: t,
|
|
29
|
-
className: c = "",
|
|
30
|
-
style: r,
|
|
31
|
-
content: i,
|
|
32
|
-
image: d,
|
|
33
|
-
width: s = 120,
|
|
34
|
-
height: a = 64,
|
|
35
|
-
gap: g,
|
|
36
|
-
offset: m,
|
|
37
|
-
rotate: T = -22,
|
|
38
|
-
zIndex: W = 1e3,
|
|
39
|
-
font: S,
|
|
40
|
-
...A
|
|
41
|
-
}) => {
|
|
42
|
-
const [y, $] = V(null), u = g?.[0] ?? 120, f = g?.[1] ?? 120, B = m?.[0] ?? u / 2, F = m?.[1] ?? f / 2, E = P(
|
|
43
|
-
() => typeof i == "string" ? [i] : Array.isArray(i) ? i : [D],
|
|
44
|
-
[i]
|
|
45
|
-
), k = U(S?.color), l = P(
|
|
46
|
-
() => M(S, k),
|
|
47
|
-
[S, k]
|
|
48
|
-
), h = Math.PI / 180 * T, I = E.join("|");
|
|
49
|
-
Y(() => {
|
|
50
|
-
if (typeof window > "u") return;
|
|
51
|
-
let p = !1;
|
|
52
|
-
const n = window.devicePixelRatio || 1, w = s + u, C = a + f, v = document.createElement("canvas");
|
|
53
|
-
v.width = w * n, v.height = C * n;
|
|
54
|
-
const e = v.getContext("2d");
|
|
55
|
-
if (!e) return;
|
|
56
|
-
const L = () => {
|
|
57
|
-
const o = v.toDataURL();
|
|
58
|
-
p || $({ url: o, width: w, height: C });
|
|
59
|
-
}, N = () => {
|
|
60
|
-
e.save(), e.translate((u / 2 + s / 2) * n, (f / 2 + a / 2) * n), e.rotate(h), e.fillStyle = l.color, e.textAlign = "center", e.textBaseline = "middle", e.font = `${l.fontStyle} normal ${l.fontWeight} ${l.fontSize * n}px ${l.fontFamily}`;
|
|
61
|
-
const o = l.lineHeight * n, b = -((E.length - 1) * o) / 2;
|
|
62
|
-
E.forEach((x, j) => {
|
|
63
|
-
e.fillText(x, 0, b + j * o);
|
|
64
|
-
}), e.restore();
|
|
65
|
-
};
|
|
66
|
-
if (d) {
|
|
67
|
-
const o = new Image();
|
|
68
|
-
o.crossOrigin = "anonymous", o.referrerPolicy = "no-referrer";
|
|
69
|
-
const b = () => {
|
|
70
|
-
e.save(), e.translate((u / 2 + s / 2) * n, (f / 2 + a / 2) * n), e.rotate(h), e.drawImage(
|
|
71
|
-
o,
|
|
72
|
-
-s / 2 * n,
|
|
73
|
-
-a / 2 * n,
|
|
74
|
-
s * n,
|
|
75
|
-
a * n
|
|
76
|
-
), e.restore(), L();
|
|
77
|
-
}, x = () => {
|
|
78
|
-
p || $(null);
|
|
79
|
-
};
|
|
80
|
-
return o.addEventListener("load", b), o.addEventListener("error", x), o.src = d, () => {
|
|
81
|
-
p = !0, o.removeEventListener("load", b), o.removeEventListener("error", x);
|
|
82
|
-
};
|
|
83
|
-
} else
|
|
84
|
-
N(), L();
|
|
85
|
-
return () => {
|
|
86
|
-
p = !0;
|
|
87
|
-
};
|
|
88
|
-
}, [
|
|
89
|
-
l,
|
|
90
|
-
u,
|
|
91
|
-
f,
|
|
92
|
-
a,
|
|
93
|
-
d,
|
|
94
|
-
h,
|
|
95
|
-
I,
|
|
96
|
-
s
|
|
97
|
-
]);
|
|
98
|
-
const H = ["relative", c].filter(Boolean).join(" ");
|
|
99
|
-
return /* @__PURE__ */ z(
|
|
27
|
+
return /* @__PURE__ */ n(
|
|
100
28
|
"div",
|
|
101
29
|
{
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
30
|
+
ref: s,
|
|
31
|
+
className: `overflow-auto ${f}`,
|
|
32
|
+
style: { height: a, width: m },
|
|
33
|
+
onScroll: z,
|
|
34
|
+
children: /* @__PURE__ */ n(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
className: h,
|
|
38
|
+
style: {
|
|
39
|
+
height: c.getTotalSize(),
|
|
40
|
+
width: "100%",
|
|
41
|
+
position: "relative"
|
|
42
|
+
},
|
|
43
|
+
children: y.map((t) => /* @__PURE__ */ n(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
className: p,
|
|
47
|
+
"data-index": t.index,
|
|
48
|
+
style: {
|
|
49
|
+
position: "absolute",
|
|
50
|
+
top: 0,
|
|
51
|
+
left: 0,
|
|
52
|
+
width: "100%",
|
|
53
|
+
height: t.size,
|
|
54
|
+
transform: `translateY(${t.start}px)`
|
|
55
|
+
},
|
|
56
|
+
children: u(e[t.index], t.index)
|
|
57
|
+
},
|
|
58
|
+
t.key
|
|
59
|
+
))
|
|
60
|
+
}
|
|
61
|
+
)
|
|
122
62
|
}
|
|
123
63
|
);
|
|
124
|
-
}
|
|
125
|
-
|
|
64
|
+
}
|
|
65
|
+
N.displayName = "VirtualList";
|
|
126
66
|
export {
|
|
127
|
-
|
|
67
|
+
N as VirtualList
|
|
128
68
|
};
|
|
129
69
|
//# sourceMappingURL=index97.js.map
|
package/dist/index97.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index97.js","sources":["../src/components/Watermark.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\n\nexport type WatermarkGap = [number, number]\nexport type WatermarkOffset = [number, number]\n\nexport interface WatermarkFontOptions {\n /** Text color for watermark content */\n color?: string\n /** Font size in pixels */\n fontSize?: number\n /** Font weight for watermark text */\n fontWeight?: number | 'normal' | 'bold' | 'bolder' | 'lighter'\n /** Font style for watermark text */\n fontStyle?: 'normal' | 'italic' | 'oblique'\n /** Font family for watermark text */\n fontFamily?: string\n /** Line height in pixels for multi-line content */\n lineHeight?: number\n}\n\nexport interface WatermarkProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n /** Text to render inside the watermark; falls back to \"asterui\" */\n content?: string | string[]\n /** Image source (URL or base64) to render instead of text */\n image?: string\n /** Width of a single watermark tile in pixels */\n width?: number\n /** Height of a single watermark tile in pixels */\n height?: number\n /** Horizontal/vertical gap between watermarks in pixels */\n gap?: WatermarkGap\n /** Offset for the first watermark tile from the top-left corner */\n offset?: WatermarkOffset\n /** Rotation angle in degrees */\n rotate?: number\n /** z-index for the overlay layer */\n zIndex?: number\n /** Font settings for text watermarks */\n font?: WatermarkFontOptions\n /** Content to protect with the watermark */\n children?: React.ReactNode\n}\n\ntype WatermarkImage = {\n url: string\n width: number\n height: number\n}\n\nconst DEFAULT_CONTENT = 'asterui'\nconst DEFAULT_OPACITY = 0.22\n\nconst resolveThemeColor = (requested?: string, opacity = DEFAULT_OPACITY) => {\n const fallback = `rgba(0,0,0,${opacity})`\n\n if (requested && requested.includes('var(--bc')) {\n if (typeof window !== 'undefined') {\n const docBase = getComputedStyle(document.documentElement).getPropertyValue('--bc').trim()\n const bodyBase = getComputedStyle(document.body).getPropertyValue('--bc').trim()\n const base = docBase || bodyBase\n if (base) {\n return requested.replace(/var\\(--bc\\)/g, base)\n }\n }\n return fallback\n }\n\n if (requested) return requested\n\n if (typeof window === 'undefined') return fallback\n\n const docBase = getComputedStyle(document.documentElement).getPropertyValue('--bc').trim()\n const bodyBase = getComputedStyle(document.body).getPropertyValue('--bc').trim()\n const base = docBase || bodyBase\n\n return base ? `hsl(${base} / ${opacity})` : fallback\n}\n\nconst getFontSettings = (font: WatermarkFontOptions | undefined, resolvedColor: string) => {\n const fontSize = font?.fontSize ?? 16\n\n return {\n color: resolvedColor,\n fontSize,\n fontWeight: font?.fontWeight ?? 600,\n fontStyle: font?.fontStyle ?? 'normal',\n fontFamily: font?.fontFamily ?? 'sans-serif',\n lineHeight: font?.lineHeight ?? fontSize * 1.2,\n }\n}\n\nexport const Watermark: React.FC<WatermarkProps> = ({\n children,\n className = '',\n style,\n content,\n image,\n width = 120,\n height = 64,\n gap,\n offset,\n rotate = -22,\n zIndex = 1000,\n font,\n ...rest\n}) => {\n const [watermark, setWatermark] = useState<WatermarkImage | null>(null)\n\n const gapX = gap?.[0] ?? 120\n const gapY = gap?.[1] ?? 120\n const offsetX = offset?.[0] ?? gapX / 2\n const offsetY = offset?.[1] ?? gapY / 2\n const textLines = useMemo(\n () =>\n typeof content === 'string'\n ? [content]\n : Array.isArray(content)\n ? content\n : [DEFAULT_CONTENT],\n [content]\n )\n const resolvedColor = resolveThemeColor(font?.color)\n const fontSettings = useMemo(\n () => getFontSettings(font, resolvedColor),\n [font, resolvedColor]\n )\n const rotationInRadians = (Math.PI / 180) * rotate\n const textKey = textLines.join('|')\n\n useEffect(() => {\n if (typeof window === 'undefined') return\n\n let cancelled = false\n const ratio = window.devicePixelRatio || 1\n const tileWidth = width + gapX\n const tileHeight = height + gapY\n const canvas = document.createElement('canvas')\n canvas.width = tileWidth * ratio\n canvas.height = tileHeight * ratio\n const ctx = canvas.getContext('2d')\n\n if (!ctx) return\n\n const commitWatermark = () => {\n const url = canvas.toDataURL()\n if (!cancelled) {\n setWatermark({ url, width: tileWidth, height: tileHeight })\n }\n }\n\n const drawText = () => {\n ctx.save()\n ctx.translate((gapX / 2 + width / 2) * ratio, (gapY / 2 + height / 2) * ratio)\n ctx.rotate(rotationInRadians)\n ctx.fillStyle = fontSettings.color\n ctx.textAlign = 'center'\n ctx.textBaseline = 'middle'\n ctx.font = `${fontSettings.fontStyle} normal ${fontSettings.fontWeight} ${fontSettings.fontSize * ratio}px ${fontSettings.fontFamily}`\n\n const lineHeight = fontSettings.lineHeight * ratio\n const startY = -((textLines.length - 1) * lineHeight) / 2\n\n textLines.forEach((line, index) => {\n ctx.fillText(line, 0, startY + index * lineHeight)\n })\n\n ctx.restore()\n }\n\n if (image) {\n const img = new Image()\n img.crossOrigin = 'anonymous'\n img.referrerPolicy = 'no-referrer'\n\n const handleLoad = () => {\n ctx.save()\n ctx.translate((gapX / 2 + width / 2) * ratio, (gapY / 2 + height / 2) * ratio)\n ctx.rotate(rotationInRadians)\n ctx.drawImage(\n img,\n (-width / 2) * ratio,\n (-height / 2) * ratio,\n width * ratio,\n height * ratio\n )\n ctx.restore()\n commitWatermark()\n }\n\n const handleError = () => {\n if (!cancelled) setWatermark(null)\n }\n\n img.addEventListener('load', handleLoad)\n img.addEventListener('error', handleError)\n img.src = image\n\n return () => {\n cancelled = true\n img.removeEventListener('load', handleLoad)\n img.removeEventListener('error', handleError)\n }\n } else {\n drawText()\n commitWatermark()\n }\n\n return () => {\n cancelled = true\n }\n }, [\n fontSettings,\n gapX,\n gapY,\n height,\n image,\n rotationInRadians,\n textKey,\n width,\n ])\n\n const classes = ['relative', className].filter(Boolean).join(' ')\n\n return (\n <div\n className={classes}\n style={{ position: style?.position ?? 'relative', ...style }}\n {...rest}\n >\n {children}\n {watermark && (\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-0\"\n style={{\n zIndex,\n backgroundImage: `url(${watermark.url})`,\n backgroundRepeat: 'repeat',\n backgroundSize: `${watermark.width}px ${watermark.height}px`,\n backgroundPosition: `${offsetX}px ${offsetY}px`,\n }}\n />\n )}\n </div>\n )\n}\n\nWatermark.displayName = 'Watermark'\n"],"names":["DEFAULT_CONTENT","DEFAULT_OPACITY","resolveThemeColor","requested","opacity","fallback","docBase","bodyBase","base","getFontSettings","font","resolvedColor","fontSize","Watermark","children","className","style","content","image","width","height","gap","offset","rotate","zIndex","rest","watermark","setWatermark","useState","gapX","gapY","offsetX","offsetY","textLines","useMemo","fontSettings","rotationInRadians","textKey","useEffect","cancelled","ratio","tileWidth","tileHeight","canvas","ctx","commitWatermark","url","drawText","lineHeight","startY","line","index","img","handleLoad","handleError","classes","jsxs","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index97.js","sources":["../src/components/VirtualList.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport { useVirtualizer } from '@tanstack/react-virtual'\n\nexport interface VirtualListProps<T> {\n /** Array of items to render */\n items: T[]\n /** Height of the scrollable container */\n height: number | string\n /** Height of each item, or function returning estimated height per item */\n itemHeight: number | ((item: T, index: number) => number)\n /** Render function for each item */\n renderItem: (item: T, index: number) => React.ReactNode\n /** Number of items to render outside visible area */\n overscan?: number\n /** Additional class for the scroll container */\n className?: string\n /** Additional class for the inner container */\n innerClassName?: string\n /** Additional class for each item wrapper */\n itemClassName?: string\n /** Width of the container */\n width?: number | string\n /** Gap between items */\n gap?: number\n /** Callback when scroll position changes */\n onScroll?: (scrollTop: number) => void\n}\n\nexport function VirtualList<T>({\n items,\n height,\n itemHeight,\n renderItem,\n overscan = 5,\n className = '',\n innerClassName = '',\n itemClassName = '',\n width,\n gap = 0,\n onScroll,\n}: VirtualListProps<T>) {\n const parentRef = useRef<HTMLDivElement>(null)\n const itemHeightRef = useRef(itemHeight)\n const itemsRef = useRef(items)\n itemHeightRef.current = itemHeight\n itemsRef.current = items\n\n const virtualizer = useVirtualizer({\n count: items.length,\n getScrollElement: () => parentRef.current,\n estimateSize: (index) => {\n const h = typeof itemHeightRef.current === 'function'\n ? itemHeightRef.current(itemsRef.current[index], index)\n : itemHeightRef.current\n return h + gap\n },\n overscan,\n })\n\n const virtualItems = virtualizer.getVirtualItems()\n\n const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n onScroll?.(e.currentTarget.scrollTop)\n }\n\n return (\n <div\n ref={parentRef}\n className={`overflow-auto ${className}`}\n style={{ height, width }}\n onScroll={handleScroll}\n >\n <div\n className={innerClassName}\n style={{\n height: virtualizer.getTotalSize(),\n width: '100%',\n position: 'relative',\n }}\n >\n {virtualItems.map((virtualItem) => (\n <div\n key={virtualItem.key}\n className={itemClassName}\n data-index={virtualItem.index}\n style={{\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: virtualItem.size,\n transform: `translateY(${virtualItem.start}px)`,\n }}\n >\n {renderItem(items[virtualItem.index], virtualItem.index)}\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nVirtualList.displayName = 'VirtualList'\n"],"names":["VirtualList","items","height","itemHeight","renderItem","overscan","className","innerClassName","itemClassName","width","gap","onScroll","parentRef","useRef","itemHeightRef","itemsRef","virtualizer","useVirtualizer","index","virtualItems","handleScroll","e","jsx","virtualItem"],"mappings":";;;AA4BO,SAASA,EAAe;AAAA,EAC7B,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,gBAAAC,IAAiB;AAAA,EACjB,eAAAC,IAAgB;AAAA,EAChB,OAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AACF,GAAwB;AACtB,QAAMC,IAAYC,EAAuB,IAAI,GACvCC,IAAgBD,EAAOV,CAAU,GACjCY,IAAWF,EAAOZ,CAAK;AAC7B,EAAAa,EAAc,UAAUX,GACxBY,EAAS,UAAUd;AAEnB,QAAMe,IAAcC,EAAe;AAAA,IACjC,OAAOhB,EAAM;AAAA,IACb,kBAAkB,MAAMW,EAAU;AAAA,IAClC,cAAc,CAACM,OACH,OAAOJ,EAAc,WAAY,aACvCA,EAAc,QAAQC,EAAS,QAAQG,CAAK,GAAGA,CAAK,IACpDJ,EAAc,WACPJ;AAAA,IAEb,UAAAL;AAAA,EAAA,CACD,GAEKc,IAAeH,EAAY,gBAAA,GAE3BI,IAAe,CAACC,MAAqC;AACzD,IAAAV,IAAWU,EAAE,cAAc,SAAS;AAAA,EACtC;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKV;AAAA,MACL,WAAW,iBAAiBN,CAAS;AAAA,MACrC,OAAO,EAAE,QAAAJ,GAAQ,OAAAO,EAAA;AAAA,MACjB,UAAUW;AAAA,MAEV,UAAA,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWf;AAAA,UACX,OAAO;AAAA,YACL,QAAQS,EAAY,aAAA;AAAA,YACpB,OAAO;AAAA,YACP,UAAU;AAAA,UAAA;AAAA,UAGX,UAAAG,EAAa,IAAI,CAACI,MACjB,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWd;AAAA,cACX,cAAYe,EAAY;AAAA,cACxB,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,KAAK;AAAA,gBACL,MAAM;AAAA,gBACN,OAAO;AAAA,gBACP,QAAQA,EAAY;AAAA,gBACpB,WAAW,cAAcA,EAAY,KAAK;AAAA,cAAA;AAAA,cAG3C,YAAWtB,EAAMsB,EAAY,KAAK,GAAGA,EAAY,KAAK;AAAA,YAAA;AAAA,YAZlDA,EAAY;AAAA,UAAA,CAcpB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEAvB,EAAY,cAAc;"}
|