asterui 0.12.61 → 0.12.63
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/Affix.d.ts +2 -0
- package/dist/components/Affix.js.map +1 -1
- package/dist/components/Alert.d.ts +2 -0
- package/dist/components/Alert.js.map +1 -1
- package/dist/components/Anchor.d.ts +2 -0
- package/dist/components/Anchor.js +79 -75
- package/dist/components/Anchor.js.map +1 -1
- package/dist/components/Autocomplete.d.ts +1 -0
- package/dist/components/Autocomplete.js +115 -110
- package/dist/components/Autocomplete.js.map +1 -1
- package/dist/components/Avatar.d.ts +4 -0
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Breadcrumb.d.ts +4 -2
- package/dist/components/Breadcrumb.js +54 -29
- package/dist/components/Breadcrumb.js.map +1 -1
- package/dist/components/Browser.d.ts +2 -0
- package/dist/components/Browser.js.map +1 -1
- package/dist/components/Button.d.ts +5 -1
- package/dist/components/Button.js +117 -107
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Chart.d.ts +1 -0
- package/dist/components/Chart.js +31 -30
- package/dist/components/Chart.js.map +1 -1
- package/dist/components/Chat.d.ts +1 -0
- package/dist/components/Chat.js +39 -28
- package/dist/components/Chat.js.map +1 -1
- package/dist/components/Code.d.ts +2 -0
- package/dist/components/Code.js.map +1 -1
- package/dist/components/Command.d.ts +5 -2
- package/dist/components/Command.js +262 -233
- package/dist/components/Command.js.map +1 -1
- package/dist/components/Container.d.ts +2 -0
- package/dist/components/Container.js.map +1 -1
- package/dist/components/ContextMenu.d.ts +4 -0
- package/dist/components/ContextMenu.js +157 -122
- package/dist/components/ContextMenu.js.map +1 -1
- package/dist/components/CopyButton.d.ts +2 -0
- package/dist/components/CopyButton.js +9 -8
- package/dist/components/CopyButton.js.map +1 -1
- package/dist/components/Countdown.d.ts +3 -3
- package/dist/components/Countdown.js +49 -47
- package/dist/components/Countdown.js.map +1 -1
- package/dist/components/Diff.d.ts +3 -3
- package/dist/components/Diff.js +14 -10
- package/dist/components/Diff.js.map +1 -1
- package/dist/components/Divider.d.ts +2 -0
- package/dist/components/Divider.js.map +1 -1
- package/dist/components/Dock.d.ts +6 -0
- package/dist/components/Dock.js +75 -38
- package/dist/components/Dock.js.map +1 -1
- package/dist/components/Dropdown.js +110 -110
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/Fieldset.d.ts +2 -0
- package/dist/components/Fieldset.js.map +1 -1
- package/dist/components/FileInput.d.ts +1 -0
- package/dist/components/FileInput.js +26 -26
- package/dist/components/FileInput.js.map +1 -1
- package/dist/components/Filter.d.ts +1 -0
- package/dist/components/Filter.js +43 -40
- package/dist/components/Filter.js.map +1 -1
- package/dist/components/Flex.d.ts +1 -0
- package/dist/components/Flex.js +43 -42
- package/dist/components/Flex.js.map +1 -1
- package/dist/components/FloatButton.d.ts +9 -0
- package/dist/components/FloatButton.js +211 -136
- package/dist/components/FloatButton.js.map +1 -1
- package/dist/components/Footer.d.ts +2 -0
- package/dist/components/Footer.js.map +1 -1
- package/dist/components/Grid.d.ts +4 -0
- package/dist/components/Grid.js.map +1 -1
- package/dist/components/Hero.d.ts +2 -0
- package/dist/components/Hero.js.map +1 -1
- package/dist/components/HoverGallery.d.ts +3 -3
- package/dist/components/HoverGallery.js +12 -10
- package/dist/components/HoverGallery.js.map +1 -1
- package/dist/components/Input.d.ts +1 -0
- package/dist/components/Input.js +201 -184
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Join.d.ts +2 -0
- package/dist/components/Join.js.map +1 -1
- package/dist/components/Kbd.d.ts +2 -0
- package/dist/components/Kbd.js.map +1 -1
- package/dist/components/Loading.d.ts +3 -0
- package/dist/components/Loading.js +58 -35
- package/dist/components/Loading.js.map +1 -1
- package/dist/components/Mask.d.ts +2 -2
- package/dist/components/Mask.js.map +1 -1
- package/dist/components/Masonry.d.ts +1 -0
- package/dist/components/Masonry.js +45 -42
- package/dist/components/Masonry.js.map +1 -1
- package/dist/components/Mention.d.ts +1 -0
- package/dist/components/Mention.js +95 -91
- package/dist/components/Mention.js.map +1 -1
- package/dist/components/MonthCalendar.d.ts +1 -0
- package/dist/components/MonthCalendar.js +104 -97
- package/dist/components/MonthCalendar.js.map +1 -1
- package/dist/components/Navbar.d.ts +2 -0
- package/dist/components/Navbar.js.map +1 -1
- package/dist/components/Notification.js +32 -18
- package/dist/components/Notification.js.map +1 -1
- package/dist/components/Phone.d.ts +3 -2
- package/dist/components/Phone.js +10 -8
- package/dist/components/Phone.js.map +1 -1
- package/dist/components/Popconfirm.js +110 -92
- package/dist/components/Popconfirm.js.map +1 -1
- package/dist/components/Popover.d.ts +2 -0
- package/dist/components/Popover.js.map +1 -1
- package/dist/components/Progress.d.ts +2 -0
- package/dist/components/Progress.js.map +1 -1
- package/dist/components/QRCode.d.ts +1 -0
- package/dist/components/QRCode.js +84 -55
- package/dist/components/QRCode.js.map +1 -1
- package/dist/components/RadialProgress.d.ts +1 -0
- package/dist/components/RadialProgress.js +19 -17
- package/dist/components/RadialProgress.js.map +1 -1
- package/dist/components/Radio.d.ts +6 -3
- package/dist/components/Radio.js +9 -9
- package/dist/components/Radio.js.map +1 -1
- package/dist/components/Range.d.ts +1 -0
- package/dist/components/Range.js +45 -43
- package/dist/components/Range.js.map +1 -1
- package/dist/components/Rating.d.ts +4 -2
- package/dist/components/Rating.js +83 -79
- package/dist/components/Rating.js.map +1 -1
- package/dist/components/Responsive.d.ts +4 -2
- package/dist/components/Responsive.js +10 -9
- package/dist/components/Responsive.js.map +1 -1
- package/dist/components/Result.d.ts +1 -0
- package/dist/components/Result.js +24 -22
- package/dist/components/Result.js.map +1 -1
- package/dist/components/Select.d.ts +1 -0
- package/dist/components/Select.js +72 -62
- package/dist/components/Select.js.map +1 -1
- package/dist/components/Skeleton.d.ts +2 -0
- package/dist/components/Skeleton.js.map +1 -1
- package/dist/components/Space.d.ts +2 -0
- package/dist/components/Space.js.map +1 -1
- package/dist/components/Splitter.d.ts +2 -0
- package/dist/components/Splitter.js +137 -131
- package/dist/components/Splitter.js.map +1 -1
- package/dist/components/Stat.d.ts +4 -2
- package/dist/components/Stat.js +19 -18
- package/dist/components/Stat.js.map +1 -1
- package/dist/components/Status.d.ts +3 -3
- package/dist/components/Status.js +27 -25
- package/dist/components/Status.js.map +1 -1
- package/dist/components/Steps.d.ts +4 -2
- package/dist/components/Steps.js +56 -52
- package/dist/components/Steps.js.map +1 -1
- package/dist/components/TextRotate.d.ts +1 -0
- package/dist/components/TextRotate.js +14 -12
- package/dist/components/TextRotate.js.map +1 -1
- package/dist/components/Textarea.d.ts +1 -0
- package/dist/components/Textarea.js +31 -30
- package/dist/components/Textarea.js.map +1 -1
- package/dist/components/ThemeController.d.ts +6 -3
- package/dist/components/ThemeController.js +101 -92
- package/dist/components/ThemeController.js.map +1 -1
- package/dist/components/Toggle.d.ts +2 -0
- package/dist/components/Toggle.js.map +1 -1
- package/dist/components/Tooltip.d.ts +2 -0
- package/dist/components/Tooltip.js +38 -32
- package/dist/components/Tooltip.js.map +1 -1
- package/dist/components/Typography.d.ts +10 -5
- package/dist/components/Typography.js +84 -81
- package/dist/components/Typography.js.map +1 -1
- package/dist/components/VirtualList.d.ts +2 -1
- package/dist/components/VirtualList.js +40 -36
- package/dist/components/VirtualList.js.map +1 -1
- package/dist/components/Watermark.d.ts +1 -0
- package/dist/components/Watermark.js +74 -71
- package/dist/components/Watermark.js.map +1 -1
- package/dist/components/WeekCalendar.d.ts +1 -0
- package/dist/components/WeekCalendar.js +91 -76
- package/dist/components/WeekCalendar.js.map +1 -1
- package/dist/components/Window.d.ts +3 -2
- package/dist/components/Window.js +9 -7
- package/dist/components/Window.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
export interface PhoneProps {
|
|
2
|
+
export interface PhoneProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
children: React.ReactNode;
|
|
4
4
|
color?: string;
|
|
5
|
-
className?: string;
|
|
6
5
|
displayClassName?: string;
|
|
6
|
+
/** Test ID for testing */
|
|
7
|
+
'data-testid'?: string;
|
|
7
8
|
}
|
|
8
9
|
export declare const Phone: React.FC<PhoneProps>;
|
package/dist/components/Phone.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
const m = "mockup-phone", r = "mockup-phone-camera",
|
|
1
|
+
import { jsxs as p, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
const m = "mockup-phone", r = "mockup-phone-camera", i = "mockup-phone-display", l = ({
|
|
3
3
|
children: s,
|
|
4
4
|
color: o,
|
|
5
|
-
className:
|
|
6
|
-
displayClassName:
|
|
5
|
+
className: a = "",
|
|
6
|
+
displayClassName: c = "",
|
|
7
|
+
"data-testid": t,
|
|
8
|
+
...n
|
|
7
9
|
}) => {
|
|
8
|
-
const
|
|
9
|
-
return /* @__PURE__ */
|
|
10
|
+
const d = o ? { borderColor: o } : {};
|
|
11
|
+
return /* @__PURE__ */ p("div", { className: `${m} ${a}`, style: d, "data-testid": t, ...n, children: [
|
|
10
12
|
/* @__PURE__ */ e("div", { className: r }),
|
|
11
|
-
/* @__PURE__ */ e("div", { className: `${
|
|
13
|
+
/* @__PURE__ */ e("div", { className: `${i} ${c}`, children: s })
|
|
12
14
|
] });
|
|
13
15
|
};
|
|
14
16
|
export {
|
|
15
|
-
|
|
17
|
+
l as Phone
|
|
16
18
|
};
|
|
17
19
|
//# sourceMappingURL=Phone.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Phone.js","sources":["../../src/components/Phone.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dMockupPhone = 'mockup-phone'\nconst dMockupPhoneCamera = 'mockup-phone-camera'\nconst dMockupPhoneDisplay = 'mockup-phone-display'\n\nexport interface PhoneProps {\n children: React.ReactNode\n color?: string\n
|
|
1
|
+
{"version":3,"file":"Phone.js","sources":["../../src/components/Phone.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dMockupPhone = 'mockup-phone'\nconst dMockupPhoneCamera = 'mockup-phone-camera'\nconst dMockupPhoneDisplay = 'mockup-phone-display'\n\nexport interface PhoneProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n color?: string\n displayClassName?: string\n /** Test ID for testing */\n 'data-testid'?: string\n}\n\nexport const Phone: React.FC<PhoneProps> = ({\n children,\n color,\n className = '',\n displayClassName = '',\n 'data-testid': testId,\n ...rest\n}) => {\n const style: React.CSSProperties = color ? { borderColor: color } : {}\n\n return (\n <div className={`${dMockupPhone} ${className}`} style={style} data-testid={testId} {...rest}>\n <div className={dMockupPhoneCamera}></div>\n <div className={`${dMockupPhoneDisplay} ${displayClassName}`}>\n {children}\n </div>\n </div>\n )\n}\n"],"names":["dMockupPhone","dMockupPhoneCamera","dMockupPhoneDisplay","Phone","children","color","className","displayClassName","testId","rest","style","jsxs","jsx"],"mappings":";AAGA,MAAMA,IAAe,gBACfC,IAAqB,uBACrBC,IAAsB,wBAUfC,IAA8B,CAAC;AAAA,EAC1C,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,kBAAAC,IAAmB;AAAA,EACnB,eAAeC;AAAA,EACf,GAAGC;AACL,MAAM;AACJ,QAAMC,IAA6BL,IAAQ,EAAE,aAAaA,EAAA,IAAU,CAAA;AAEpE,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAW,GAAGX,CAAY,IAAIM,CAAS,IAAI,OAAAI,GAAc,eAAaF,GAAS,GAAGC,GACrF,UAAA;AAAA,IAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWX,EAAA,CAAoB;AAAA,IACpC,gBAAAW,EAAC,SAAI,WAAW,GAAGV,CAAmB,IAAIK,CAAgB,IACvD,UAAAH,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1,73 +1,77 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { useConfig as
|
|
4
|
-
const
|
|
5
|
-
children:
|
|
6
|
-
title:
|
|
7
|
-
description:
|
|
8
|
-
onConfirm:
|
|
9
|
-
onCancel:
|
|
10
|
-
okText:
|
|
11
|
-
cancelText:
|
|
12
|
-
okType:
|
|
13
|
-
cancelType:
|
|
14
|
-
placement:
|
|
15
|
-
disabled:
|
|
16
|
-
icon:
|
|
17
|
-
showCancel:
|
|
18
|
-
"data-testid":
|
|
19
|
-
className:
|
|
20
|
-
...
|
|
21
|
-
},
|
|
22
|
-
const { locale:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import U, { forwardRef as V, useState as N, useRef as p, useId as B, useCallback as Y, useEffect as Z } from "react";
|
|
3
|
+
import { useConfig as _ } from "../providers/ConfigProvider.js";
|
|
4
|
+
const L = "btn", E = "btn-sm", tt = "btn-primary", et = "btn-secondary", nt = "btn-accent", st = "btn-success", ot = "btn-warning", at = "btn-error", rt = "btn-info", it = "btn-ghost", lt = "loading", ct = "loading-spinner", dt = "loading-xs", bt = V(function({
|
|
5
|
+
children: b,
|
|
6
|
+
title: P,
|
|
7
|
+
description: i,
|
|
8
|
+
onConfirm: g,
|
|
9
|
+
onCancel: l,
|
|
10
|
+
okText: T,
|
|
11
|
+
cancelText: O,
|
|
12
|
+
okType: R = "primary",
|
|
13
|
+
cancelType: I = "ghost",
|
|
14
|
+
placement: h = "top",
|
|
15
|
+
disabled: S = !1,
|
|
16
|
+
icon: x,
|
|
17
|
+
showCancel: j = !0,
|
|
18
|
+
"data-testid": c,
|
|
19
|
+
className: z,
|
|
20
|
+
...A
|
|
21
|
+
}, K) {
|
|
22
|
+
const { locale: v } = _(), [a, n] = N(!1), [d, y] = N(!1), u = p(null), k = B(), w = B(), W = T ?? v.Popconfirm?.okText ?? "OK", D = O ?? v.Popconfirm?.cancelText ?? "Cancel", r = (t) => c ? `${c}-${t}` : void 0, f = p(null), C = p(null), m = Y((t) => {
|
|
23
|
+
t.key === "Escape" && (n(!1), l?.());
|
|
24
|
+
}, [l]);
|
|
25
|
+
Z(() => {
|
|
26
|
+
const t = (s) => {
|
|
27
|
+
u.current && !u.current.contains(s.target) && f.current && !f.current.contains(s.target) && n(!1);
|
|
26
28
|
};
|
|
27
|
-
if (
|
|
28
|
-
return document.addEventListener("mousedown", t), () =>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
29
|
+
if (a)
|
|
30
|
+
return document.addEventListener("mousedown", t), document.addEventListener("keydown", m), setTimeout(() => C.current?.focus(), 0), () => {
|
|
31
|
+
document.removeEventListener("mousedown", t), document.removeEventListener("keydown", m);
|
|
32
|
+
};
|
|
33
|
+
}, [a, m]);
|
|
34
|
+
const G = (t) => {
|
|
35
|
+
S || (t.stopPropagation(), n(!a));
|
|
36
|
+
}, M = async () => {
|
|
37
|
+
if (g) {
|
|
38
|
+
y(!0);
|
|
35
39
|
try {
|
|
36
|
-
await
|
|
40
|
+
await g(), n(!1);
|
|
37
41
|
} finally {
|
|
38
|
-
|
|
42
|
+
y(!1);
|
|
39
43
|
}
|
|
40
44
|
} else
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
},
|
|
45
|
+
n(!1);
|
|
46
|
+
}, X = () => {
|
|
47
|
+
l?.(), n(!1);
|
|
48
|
+
}, q = () => `absolute z-50 ${{
|
|
45
49
|
top: "bottom-full left-1/2 -translate-x-1/2 mb-3",
|
|
46
50
|
bottom: "top-full left-1/2 -translate-x-1/2 mt-3",
|
|
47
51
|
left: "right-full top-1/2 -translate-y-1/2 mr-3",
|
|
48
52
|
right: "left-full top-1/2 -translate-y-1/2 ml-3"
|
|
49
|
-
}[
|
|
53
|
+
}[h]}`, F = () => "bg-base-100 rounded-lg p-4 min-w-[200px] max-w-[300px] shadow-lg", H = () => `absolute w-2.5 h-2.5 bg-base-100 rotate-45 shadow-lg ${{
|
|
50
54
|
top: "bottom-[-5px] left-1/2 -translate-x-1/2",
|
|
51
55
|
bottom: "top-[-5px] left-1/2 -translate-x-1/2",
|
|
52
56
|
left: "right-[-5px] top-1/2 -translate-y-1/2",
|
|
53
57
|
right: "left-[-5px] top-1/2 -translate-y-1/2"
|
|
54
|
-
}[
|
|
55
|
-
primary:
|
|
56
|
-
secondary:
|
|
57
|
-
accent:
|
|
58
|
-
success:
|
|
59
|
-
warning:
|
|
60
|
-
error:
|
|
61
|
-
info:
|
|
62
|
-
ghost:
|
|
63
|
-
},
|
|
58
|
+
}[h]}`, J = {
|
|
59
|
+
primary: tt,
|
|
60
|
+
secondary: et,
|
|
61
|
+
accent: nt,
|
|
62
|
+
success: st,
|
|
63
|
+
warning: ot,
|
|
64
|
+
error: at,
|
|
65
|
+
info: rt,
|
|
66
|
+
ghost: it
|
|
67
|
+
}, $ = (t) => J[t], Q = /* @__PURE__ */ e(
|
|
64
68
|
"svg",
|
|
65
69
|
{
|
|
66
70
|
className: "w-5 h-5 text-warning",
|
|
67
71
|
fill: "none",
|
|
68
72
|
stroke: "currentColor",
|
|
69
73
|
viewBox: "0 0 24 24",
|
|
70
|
-
children: /* @__PURE__ */
|
|
74
|
+
children: /* @__PURE__ */ e(
|
|
71
75
|
"path",
|
|
72
76
|
{
|
|
73
77
|
strokeLinecap: "round",
|
|
@@ -78,52 +82,66 @@ const k = "btn", w = "btn-sm", Q = "btn-primary", U = "btn-secondary", V = "btn-
|
|
|
78
82
|
)
|
|
79
83
|
}
|
|
80
84
|
);
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
|
|
85
|
+
return /* @__PURE__ */ o("div", { ref: K || u, className: `relative inline-block ${z || ""}`, "data-state": a ? "open" : "closed", "data-testid": c, ...A, children: [
|
|
86
|
+
U.cloneElement(b, {
|
|
83
87
|
onClick: (t) => {
|
|
84
|
-
|
|
85
|
-
const
|
|
86
|
-
|
|
88
|
+
G(t);
|
|
89
|
+
const s = b.props?.onClick;
|
|
90
|
+
s && s(t);
|
|
87
91
|
}
|
|
88
92
|
}),
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
93
|
+
a && /* @__PURE__ */ e("div", { className: q(), "data-testid": r("popup"), children: /* @__PURE__ */ o(
|
|
94
|
+
"div",
|
|
95
|
+
{
|
|
96
|
+
ref: f,
|
|
97
|
+
className: F(),
|
|
98
|
+
role: "dialog",
|
|
99
|
+
"aria-modal": "true",
|
|
100
|
+
"aria-labelledby": k,
|
|
101
|
+
"aria-describedby": i ? w : void 0,
|
|
102
|
+
children: [
|
|
103
|
+
/* @__PURE__ */ o("div", { className: "flex gap-3 relative z-10", children: [
|
|
104
|
+
/* @__PURE__ */ e("div", { className: "flex-shrink-0 mt-0.5", "aria-hidden": "true", children: x !== void 0 ? x : Q }),
|
|
105
|
+
/* @__PURE__ */ o("div", { className: "flex-1", children: [
|
|
106
|
+
/* @__PURE__ */ e("div", { id: k, className: "font-semibold text-base-content mb-1", "data-testid": r("title"), children: P }),
|
|
107
|
+
i && /* @__PURE__ */ e("div", { id: w, className: "text-sm text-base-content/70 mb-3", "data-testid": r("description"), children: i }),
|
|
108
|
+
/* @__PURE__ */ o("div", { className: "flex justify-end gap-2 mt-3", children: [
|
|
109
|
+
j && /* @__PURE__ */ e(
|
|
110
|
+
"button",
|
|
111
|
+
{
|
|
112
|
+
type: "button",
|
|
113
|
+
className: `${L} ${E} ${$(I)}`,
|
|
114
|
+
onClick: X,
|
|
115
|
+
disabled: d,
|
|
116
|
+
"data-testid": r("cancel-button"),
|
|
117
|
+
children: D
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ o(
|
|
121
|
+
"button",
|
|
122
|
+
{
|
|
123
|
+
ref: C,
|
|
124
|
+
type: "button",
|
|
125
|
+
className: `${L} ${E} ${$(R)}`,
|
|
126
|
+
onClick: M,
|
|
127
|
+
disabled: d,
|
|
128
|
+
"data-testid": r("ok-button"),
|
|
129
|
+
children: [
|
|
130
|
+
d && /* @__PURE__ */ e("span", { className: `${lt} ${ct} ${dt}`, "aria-hidden": "true" }),
|
|
131
|
+
W
|
|
132
|
+
]
|
|
133
|
+
}
|
|
134
|
+
)
|
|
135
|
+
] })
|
|
136
|
+
] })
|
|
137
|
+
] }),
|
|
138
|
+
/* @__PURE__ */ e("div", { className: H() })
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
) })
|
|
124
142
|
] });
|
|
125
143
|
});
|
|
126
144
|
export {
|
|
127
|
-
|
|
145
|
+
bt as Popconfirm
|
|
128
146
|
};
|
|
129
147
|
//# sourceMappingURL=Popconfirm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popconfirm.js","sources":["../../src/components/Popconfirm.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { useConfig } from '../providers/ConfigProvider'\n\n// DaisyUI classes\nconst dBtn = 'btn'\nconst dBtnSm = 'btn-sm'\nconst dBtnPrimary = 'btn-primary'\nconst dBtnSecondary = 'btn-secondary'\nconst dBtnAccent = 'btn-accent'\nconst dBtnSuccess = 'btn-success'\nconst dBtnWarning = 'btn-warning'\nconst dBtnError = 'btn-error'\nconst dBtnInfo = 'btn-info'\nconst dBtnGhost = 'btn-ghost'\nconst dLoading = 'loading'\nconst dLoadingSpinner = 'loading-spinner'\nconst dLoadingXs = 'loading-xs'\n\nexport interface PopconfirmProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n children: React.ReactElement\n title: React.ReactNode\n description?: React.ReactNode\n onConfirm?: () => void | Promise<void>\n onCancel?: () => void\n okText?: string\n cancelText?: string\n okType?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\n cancelType?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'ghost'\n placement?: 'top' | 'bottom' | 'left' | 'right'\n disabled?: boolean\n icon?: React.ReactNode\n showCancel?: boolean\n /** Test ID prefix for child elements */\n 'data-testid'?: string\n}\n\nexport const Popconfirm = forwardRef<HTMLDivElement, PopconfirmProps>(function Popconfirm(\n {\n children,\n title,\n description,\n onConfirm,\n onCancel,\n okText,\n cancelText,\n okType = 'primary',\n cancelType = 'ghost',\n placement = 'top',\n disabled = false,\n icon,\n showCancel = true,\n 'data-testid': testId,\n className,\n ...rest\n },\n ref\n) {\n const { locale } = useConfig()\n const [isOpen, setIsOpen] = useState(false)\n const [loading, setLoading] = useState(false)\n const containerRef = useRef<HTMLDivElement>(null)\n\n // Resolve locale strings\n const resolvedOkText = okText ?? locale.Popconfirm?.okText ?? 'OK'\n const resolvedCancelText = cancelText ?? locale.Popconfirm?.cancelText ?? 'Cancel'\n\n // Helper for test IDs\n const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n const popupRef = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node) &&\n popupRef.current &&\n !popupRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false)\n }\n }\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }\n }, [isOpen])\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (disabled) return\n e.stopPropagation()\n setIsOpen(!isOpen)\n }\n\n const handleConfirm = async () => {\n if (onConfirm) {\n setLoading(true)\n try {\n await onConfirm()\n setIsOpen(false)\n } finally {\n setLoading(false)\n }\n } else {\n setIsOpen(false)\n }\n }\n\n const handleCancel = () => {\n onCancel?.()\n setIsOpen(false)\n }\n\n const getPopupContainerClasses = () => {\n const positions = {\n top: 'bottom-full left-1/2 -translate-x-1/2 mb-3',\n bottom: 'top-full left-1/2 -translate-x-1/2 mt-3',\n left: 'right-full top-1/2 -translate-y-1/2 mr-3',\n right: 'left-full top-1/2 -translate-y-1/2 ml-3',\n }\n\n return `absolute z-50 ${positions[placement]}`\n }\n\n const getPopupClasses = () => {\n return 'bg-base-100 rounded-lg p-4 min-w-[200px] max-w-[300px] shadow-lg'\n }\n\n const getArrowClasses = () => {\n const base = 'absolute w-2.5 h-2.5 bg-base-100 rotate-45 shadow-lg'\n\n const positions = {\n top: 'bottom-[-5px] left-1/2 -translate-x-1/2',\n bottom: 'top-[-5px] left-1/2 -translate-x-1/2',\n left: 'right-[-5px] top-1/2 -translate-y-1/2',\n right: 'left-[-5px] top-1/2 -translate-y-1/2',\n }\n\n return `${base} ${positions[placement]}`\n }\n\n const buttonClasses = {\n primary: dBtnPrimary,\n secondary: dBtnSecondary,\n accent: dBtnAccent,\n success: dBtnSuccess,\n warning: dBtnWarning,\n error: dBtnError,\n info: dBtnInfo,\n ghost: dBtnGhost,\n } as const\n\n const getButtonClass = (type: keyof typeof buttonClasses) => {\n return buttonClasses[type]\n }\n\n const defaultIcon = (\n <svg\n className=\"w-5 h-5 text-warning\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n )\n\n return (\n <div ref={ref || containerRef} className={`relative inline-block ${className || ''}`} data-state={isOpen ? 'open' : 'closed'} data-testid={testId} {...rest}>\n {React.cloneElement(children, {\n onClick: (e: React.MouseEvent) => {\n handleTriggerClick(e)\n const originalOnClick = (children.props as any)?.onClick\n if (originalOnClick) {\n originalOnClick(e)\n }\n },\n } as any)}\n\n {isOpen && (\n <div className={getPopupContainerClasses()} data-testid={getTestId('popup')}>\n <div ref={popupRef} className={getPopupClasses()}>\n <div className=\"flex gap-3 relative z-10\">\n <div className=\"flex-shrink-0 mt-0.5\">\n {icon !== undefined ? icon : defaultIcon}\n </div>\n <div className=\"flex-1\">\n <div className=\"font-semibold text-base-content mb-1\" data-testid={getTestId('title')}>{title}</div>\n {description && (\n <div className=\"text-sm text-base-content/70 mb-3\" data-testid={getTestId('description')}>{description}</div>\n )}\n <div className=\"flex justify-end gap-2 mt-3\">\n {showCancel && (\n <button\n className={`${dBtn} ${dBtnSm} ${getButtonClass(cancelType)}`}\n onClick={handleCancel}\n disabled={loading}\n data-testid={getTestId('cancel-button')}\n >\n {resolvedCancelText}\n </button>\n )}\n <button\n className={`${dBtn} ${dBtnSm} ${getButtonClass(okType)}`}\n onClick={handleConfirm}\n disabled={loading}\n data-testid={getTestId('ok-button')}\n >\n {loading && <span className={`${dLoading} ${dLoadingSpinner} ${dLoadingXs}`}></span>}\n {resolvedOkText}\n </button>\n </div>\n </div>\n </div>\n <div className={getArrowClasses()} />\n </div>\n </div>\n )}\n </div>\n )\n})\n"],"names":["dBtn","dBtnSm","dBtnPrimary","dBtnSecondary","dBtnAccent","dBtnSuccess","dBtnWarning","dBtnError","dBtnInfo","dBtnGhost","dLoading","dLoadingSpinner","dLoadingXs","Popconfirm","forwardRef","children","title","description","onConfirm","onCancel","okText","cancelText","okType","cancelType","placement","disabled","icon","showCancel","testId","className","rest","ref","locale","useConfig","isOpen","setIsOpen","useState","loading","setLoading","containerRef","useRef","resolvedOkText","resolvedCancelText","getTestId","suffix","popupRef","useEffect","handleClickOutside","event","handleTriggerClick","e","handleConfirm","handleCancel","getPopupContainerClasses","getPopupClasses","getArrowClasses","buttonClasses","getButtonClass","type","defaultIcon","jsx","React","originalOnClick","jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popconfirm.js","sources":["../../src/components/Popconfirm.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, forwardRef, useId, useCallback } from 'react'\nimport { useConfig } from '../providers/ConfigProvider'\n\n// DaisyUI classes\nconst dBtn = 'btn'\nconst dBtnSm = 'btn-sm'\nconst dBtnPrimary = 'btn-primary'\nconst dBtnSecondary = 'btn-secondary'\nconst dBtnAccent = 'btn-accent'\nconst dBtnSuccess = 'btn-success'\nconst dBtnWarning = 'btn-warning'\nconst dBtnError = 'btn-error'\nconst dBtnInfo = 'btn-info'\nconst dBtnGhost = 'btn-ghost'\nconst dLoading = 'loading'\nconst dLoadingSpinner = 'loading-spinner'\nconst dLoadingXs = 'loading-xs'\n\nexport interface PopconfirmProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n children: React.ReactElement\n title: React.ReactNode\n description?: React.ReactNode\n onConfirm?: () => void | Promise<void>\n onCancel?: () => void\n okText?: string\n cancelText?: string\n okType?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'\n cancelType?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'ghost'\n placement?: 'top' | 'bottom' | 'left' | 'right'\n disabled?: boolean\n icon?: React.ReactNode\n showCancel?: boolean\n /** Test ID prefix for child elements */\n 'data-testid'?: string\n}\n\nexport const Popconfirm = forwardRef<HTMLDivElement, PopconfirmProps>(function Popconfirm(\n {\n children,\n title,\n description,\n onConfirm,\n onCancel,\n okText,\n cancelText,\n okType = 'primary',\n cancelType = 'ghost',\n placement = 'top',\n disabled = false,\n icon,\n showCancel = true,\n 'data-testid': testId,\n className,\n ...rest\n },\n ref\n) {\n const { locale } = useConfig()\n const [isOpen, setIsOpen] = useState(false)\n const [loading, setLoading] = useState(false)\n const containerRef = useRef<HTMLDivElement>(null)\n const titleId = useId()\n const descriptionId = useId()\n\n // Resolve locale strings\n const resolvedOkText = okText ?? locale.Popconfirm?.okText ?? 'OK'\n const resolvedCancelText = cancelText ?? locale.Popconfirm?.cancelText ?? 'Cancel'\n\n // Helper for test IDs\n const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n const popupRef = useRef<HTMLDivElement>(null)\n const confirmButtonRef = useRef<HTMLButtonElement>(null)\n\n // Handle ESC key to close\n const handleKeyDown = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsOpen(false)\n onCancel?.()\n }\n }, [onCancel])\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node) &&\n popupRef.current &&\n !popupRef.current.contains(event.target as Node)\n ) {\n setIsOpen(false)\n }\n }\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside)\n document.addEventListener('keydown', handleKeyDown)\n // Focus the confirm button when dialog opens\n setTimeout(() => confirmButtonRef.current?.focus(), 0)\n return () => {\n document.removeEventListener('mousedown', handleClickOutside)\n document.removeEventListener('keydown', handleKeyDown)\n }\n }\n }, [isOpen, handleKeyDown])\n\n const handleTriggerClick = (e: React.MouseEvent) => {\n if (disabled) return\n e.stopPropagation()\n setIsOpen(!isOpen)\n }\n\n const handleConfirm = async () => {\n if (onConfirm) {\n setLoading(true)\n try {\n await onConfirm()\n setIsOpen(false)\n } finally {\n setLoading(false)\n }\n } else {\n setIsOpen(false)\n }\n }\n\n const handleCancel = () => {\n onCancel?.()\n setIsOpen(false)\n }\n\n const getPopupContainerClasses = () => {\n const positions = {\n top: 'bottom-full left-1/2 -translate-x-1/2 mb-3',\n bottom: 'top-full left-1/2 -translate-x-1/2 mt-3',\n left: 'right-full top-1/2 -translate-y-1/2 mr-3',\n right: 'left-full top-1/2 -translate-y-1/2 ml-3',\n }\n\n return `absolute z-50 ${positions[placement]}`\n }\n\n const getPopupClasses = () => {\n return 'bg-base-100 rounded-lg p-4 min-w-[200px] max-w-[300px] shadow-lg'\n }\n\n const getArrowClasses = () => {\n const base = 'absolute w-2.5 h-2.5 bg-base-100 rotate-45 shadow-lg'\n\n const positions = {\n top: 'bottom-[-5px] left-1/2 -translate-x-1/2',\n bottom: 'top-[-5px] left-1/2 -translate-x-1/2',\n left: 'right-[-5px] top-1/2 -translate-y-1/2',\n right: 'left-[-5px] top-1/2 -translate-y-1/2',\n }\n\n return `${base} ${positions[placement]}`\n }\n\n const buttonClasses = {\n primary: dBtnPrimary,\n secondary: dBtnSecondary,\n accent: dBtnAccent,\n success: dBtnSuccess,\n warning: dBtnWarning,\n error: dBtnError,\n info: dBtnInfo,\n ghost: dBtnGhost,\n } as const\n\n const getButtonClass = (type: keyof typeof buttonClasses) => {\n return buttonClasses[type]\n }\n\n const defaultIcon = (\n <svg\n className=\"w-5 h-5 text-warning\"\n fill=\"none\"\n stroke=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n />\n </svg>\n )\n\n return (\n <div ref={ref || containerRef} className={`relative inline-block ${className || ''}`} data-state={isOpen ? 'open' : 'closed'} data-testid={testId} {...rest}>\n {React.cloneElement(children, {\n onClick: (e: React.MouseEvent) => {\n handleTriggerClick(e)\n const originalOnClick = (children.props as any)?.onClick\n if (originalOnClick) {\n originalOnClick(e)\n }\n },\n } as any)}\n\n {isOpen && (\n <div className={getPopupContainerClasses()} data-testid={getTestId('popup')}>\n <div\n ref={popupRef}\n className={getPopupClasses()}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n aria-describedby={description ? descriptionId : undefined}\n >\n <div className=\"flex gap-3 relative z-10\">\n <div className=\"flex-shrink-0 mt-0.5\" aria-hidden=\"true\">\n {icon !== undefined ? icon : defaultIcon}\n </div>\n <div className=\"flex-1\">\n <div id={titleId} className=\"font-semibold text-base-content mb-1\" data-testid={getTestId('title')}>{title}</div>\n {description && (\n <div id={descriptionId} className=\"text-sm text-base-content/70 mb-3\" data-testid={getTestId('description')}>{description}</div>\n )}\n <div className=\"flex justify-end gap-2 mt-3\">\n {showCancel && (\n <button\n type=\"button\"\n className={`${dBtn} ${dBtnSm} ${getButtonClass(cancelType)}`}\n onClick={handleCancel}\n disabled={loading}\n data-testid={getTestId('cancel-button')}\n >\n {resolvedCancelText}\n </button>\n )}\n <button\n ref={confirmButtonRef}\n type=\"button\"\n className={`${dBtn} ${dBtnSm} ${getButtonClass(okType)}`}\n onClick={handleConfirm}\n disabled={loading}\n data-testid={getTestId('ok-button')}\n >\n {loading && <span className={`${dLoading} ${dLoadingSpinner} ${dLoadingXs}`} aria-hidden=\"true\"></span>}\n {resolvedOkText}\n </button>\n </div>\n </div>\n </div>\n <div className={getArrowClasses()} />\n </div>\n </div>\n )}\n </div>\n )\n})\n"],"names":["dBtn","dBtnSm","dBtnPrimary","dBtnSecondary","dBtnAccent","dBtnSuccess","dBtnWarning","dBtnError","dBtnInfo","dBtnGhost","dLoading","dLoadingSpinner","dLoadingXs","Popconfirm","forwardRef","children","title","description","onConfirm","onCancel","okText","cancelText","okType","cancelType","placement","disabled","icon","showCancel","testId","className","rest","ref","locale","useConfig","isOpen","setIsOpen","useState","loading","setLoading","containerRef","useRef","titleId","useId","descriptionId","resolvedOkText","resolvedCancelText","getTestId","suffix","popupRef","confirmButtonRef","handleKeyDown","useCallback","event","useEffect","handleClickOutside","handleTriggerClick","e","handleConfirm","handleCancel","getPopupContainerClasses","getPopupClasses","getArrowClasses","buttonClasses","getButtonClass","type","defaultIcon","jsx","React","originalOnClick","jsxs"],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ export interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
10
10
|
open?: boolean;
|
|
11
11
|
onOpenChange?: (open: boolean) => void;
|
|
12
12
|
overlayClassName?: string;
|
|
13
|
+
/** Test ID for testing */
|
|
14
|
+
'data-testid'?: string;
|
|
13
15
|
}
|
|
14
16
|
export declare const Popover: React.FC<PopoverProps>;
|
|
15
17
|
export default Popover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\n\nexport type PopoverPlacement =\n | 'top'\n | 'topLeft'\n | 'topRight'\n | 'bottom'\n | 'bottomLeft'\n | 'bottomRight'\n | 'left'\n | 'leftTop'\n | 'leftBottom'\n | 'right'\n | 'rightTop'\n | 'rightBottom'\n\nexport type PopoverTrigger = 'hover' | 'click' | 'focus'\n\nexport interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n children: React.ReactNode\n content: React.ReactNode\n title?: React.ReactNode\n trigger?: PopoverTrigger\n placement?: PopoverPlacement\n open?: boolean\n onOpenChange?: (open: boolean) => void\n overlayClassName?: string\n}\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n content,\n title,\n trigger = 'hover',\n placement = 'top',\n open: controlledOpen,\n onOpenChange,\n className = '',\n overlayClassName = '',\n ...rest\n}) => {\n const [internalOpen, setInternalOpen] = useState(false)\n const triggerRef = useRef<HTMLDivElement>(null)\n const popoverRef = useRef<HTMLDivElement>(null)\n const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)\n\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen\n\n const setOpen = (value: boolean) => {\n if (controlledOpen === undefined) {\n setInternalOpen(value)\n }\n onOpenChange?.(value)\n }\n\n const handleMouseEnter = () => {\n if (trigger === 'hover') {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n setOpen(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (trigger === 'hover') {\n timeoutRef.current = setTimeout(() => setOpen(false), 100)\n }\n }\n\n const handleClick = () => {\n if (trigger === 'click') {\n setOpen(!isOpen)\n }\n }\n\n const handleFocus = () => {\n if (trigger === 'focus') {\n setOpen(true)\n }\n }\n\n const handleBlur = () => {\n if (trigger === 'focus') {\n setOpen(false)\n }\n }\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n trigger === 'click' &&\n isOpen &&\n triggerRef.current &&\n popoverRef.current &&\n !triggerRef.current.contains(event.target as Node) &&\n !popoverRef.current.contains(event.target as Node)\n ) {\n setOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [trigger, isOpen])\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n }\n }, [])\n\n const getPlacementClasses = () => {\n const baseClasses = 'absolute z-50'\n\n const placements: Record<PopoverPlacement, string> = {\n top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',\n topLeft: 'bottom-full left-0 mb-2',\n topRight: 'bottom-full right-0 mb-2',\n bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',\n bottomLeft: 'top-full left-0 mt-2',\n bottomRight: 'top-full right-0 mt-2',\n left: 'right-full top-1/2 -translate-y-1/2 mr-2',\n leftTop: 'right-full top-0 mr-2',\n leftBottom: 'right-full bottom-0 mr-2',\n right: 'left-full top-1/2 -translate-y-1/2 ml-2',\n rightTop: 'left-full top-0 ml-2',\n rightBottom: 'left-full bottom-0 ml-2',\n }\n\n return `${baseClasses} ${placements[placement]}`\n }\n\n return (\n <div className={`relative inline-block ${className}`} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n <div\n ref={triggerRef}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onClick={handleClick}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n {children}\n </div>\n\n {isOpen && (\n <div\n ref={popoverRef}\n className={getPlacementClasses()}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <div\n className={`bg-base-100 border border-base-content/10 rounded-lg shadow-lg p-3 min-w-[200px] max-w-xs ${overlayClassName}`}\n >\n {title && (\n <div className=\"font-semibold mb-2 text-base-content border-b border-base-content/10 pb-2\">\n {title}\n </div>\n )}\n <div className=\"text-sm text-base-content/80\">{content}</div>\n </div>\n </div>\n )}\n </div>\n )\n}\n\nPopover.displayName = 'Popover'\n\nexport default Popover\n"],"names":["Popover","children","content","title","trigger","placement","controlledOpen","onOpenChange","className","overlayClassName","rest","internalOpen","setInternalOpen","useState","triggerRef","useRef","popoverRef","timeoutRef","isOpen","setOpen","value","handleMouseEnter","handleMouseLeave","handleClick","handleFocus","handleBlur","useEffect","handleClickOutside","event","getPlacementClasses","jsxs","jsx"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../src/components/Popover.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react'\n\nexport type PopoverPlacement =\n | 'top'\n | 'topLeft'\n | 'topRight'\n | 'bottom'\n | 'bottomLeft'\n | 'bottomRight'\n | 'left'\n | 'leftTop'\n | 'leftBottom'\n | 'right'\n | 'rightTop'\n | 'rightBottom'\n\nexport type PopoverTrigger = 'hover' | 'click' | 'focus'\n\nexport interface PopoverProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n children: React.ReactNode\n content: React.ReactNode\n title?: React.ReactNode\n trigger?: PopoverTrigger\n placement?: PopoverPlacement\n open?: boolean\n onOpenChange?: (open: boolean) => void\n overlayClassName?: string\n /** Test ID for testing */\n 'data-testid'?: string\n}\n\nexport const Popover: React.FC<PopoverProps> = ({\n children,\n content,\n title,\n trigger = 'hover',\n placement = 'top',\n open: controlledOpen,\n onOpenChange,\n className = '',\n overlayClassName = '',\n ...rest\n}) => {\n const [internalOpen, setInternalOpen] = useState(false)\n const triggerRef = useRef<HTMLDivElement>(null)\n const popoverRef = useRef<HTMLDivElement>(null)\n const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)\n\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen\n\n const setOpen = (value: boolean) => {\n if (controlledOpen === undefined) {\n setInternalOpen(value)\n }\n onOpenChange?.(value)\n }\n\n const handleMouseEnter = () => {\n if (trigger === 'hover') {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n setOpen(true)\n }\n }\n\n const handleMouseLeave = () => {\n if (trigger === 'hover') {\n timeoutRef.current = setTimeout(() => setOpen(false), 100)\n }\n }\n\n const handleClick = () => {\n if (trigger === 'click') {\n setOpen(!isOpen)\n }\n }\n\n const handleFocus = () => {\n if (trigger === 'focus') {\n setOpen(true)\n }\n }\n\n const handleBlur = () => {\n if (trigger === 'focus') {\n setOpen(false)\n }\n }\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n trigger === 'click' &&\n isOpen &&\n triggerRef.current &&\n popoverRef.current &&\n !triggerRef.current.contains(event.target as Node) &&\n !popoverRef.current.contains(event.target as Node)\n ) {\n setOpen(false)\n }\n }\n\n document.addEventListener('mousedown', handleClickOutside)\n return () => document.removeEventListener('mousedown', handleClickOutside)\n }, [trigger, isOpen])\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current)\n }\n }, [])\n\n const getPlacementClasses = () => {\n const baseClasses = 'absolute z-50'\n\n const placements: Record<PopoverPlacement, string> = {\n top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',\n topLeft: 'bottom-full left-0 mb-2',\n topRight: 'bottom-full right-0 mb-2',\n bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',\n bottomLeft: 'top-full left-0 mt-2',\n bottomRight: 'top-full right-0 mt-2',\n left: 'right-full top-1/2 -translate-y-1/2 mr-2',\n leftTop: 'right-full top-0 mr-2',\n leftBottom: 'right-full bottom-0 mr-2',\n right: 'left-full top-1/2 -translate-y-1/2 ml-2',\n rightTop: 'left-full top-0 ml-2',\n rightBottom: 'left-full bottom-0 ml-2',\n }\n\n return `${baseClasses} ${placements[placement]}`\n }\n\n return (\n <div className={`relative inline-block ${className}`} data-state={isOpen ? 'open' : 'closed'} {...rest}>\n <div\n ref={triggerRef}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onClick={handleClick}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n {children}\n </div>\n\n {isOpen && (\n <div\n ref={popoverRef}\n className={getPlacementClasses()}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n <div\n className={`bg-base-100 border border-base-content/10 rounded-lg shadow-lg p-3 min-w-[200px] max-w-xs ${overlayClassName}`}\n >\n {title && (\n <div className=\"font-semibold mb-2 text-base-content border-b border-base-content/10 pb-2\">\n {title}\n </div>\n )}\n <div className=\"text-sm text-base-content/80\">{content}</div>\n </div>\n </div>\n )}\n </div>\n )\n}\n\nPopover.displayName = 'Popover'\n\nexport default Popover\n"],"names":["Popover","children","content","title","trigger","placement","controlledOpen","onOpenChange","className","overlayClassName","rest","internalOpen","setInternalOpen","useState","triggerRef","useRef","popoverRef","timeoutRef","isOpen","setOpen","value","handleMouseEnter","handleMouseLeave","handleClick","handleFocus","handleBlur","useEffect","handleClickOutside","event","getPlacementClasses","jsxs","jsx"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
|
|
3
3
|
type?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
|
|
4
|
+
/** Test ID for testing */
|
|
5
|
+
'data-testid'?: string;
|
|
4
6
|
}
|
|
5
7
|
export declare function Progress({ value, max, type, className, ...rest }: ProgressProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sources":["../../src/components/Progress.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dProgress = 'progress'\nconst dProgressNeutral = 'progress-neutral'\nconst dProgressPrimary = 'progress-primary'\nconst dProgressSecondary = 'progress-secondary'\nconst dProgressAccent = 'progress-accent'\nconst dProgressInfo = 'progress-info'\nconst dProgressSuccess = 'progress-success'\nconst dProgressWarning = 'progress-warning'\nconst dProgressError = 'progress-error'\n\nexport interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {\n type?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'\n}\n\nconst typeClasses = {\n neutral: dProgressNeutral,\n primary: dProgressPrimary,\n secondary: dProgressSecondary,\n accent: dProgressAccent,\n info: dProgressInfo,\n success: dProgressSuccess,\n warning: dProgressWarning,\n error: dProgressError,\n} as const\n\nexport function Progress({ value, max = 100, type, className = '', ...rest }: ProgressProps) {\n const classes = [\n dProgress,\n type && typeClasses[type],\n className,\n ]\n .filter(Boolean)\n .join(' ')\n\n return <progress className={classes} value={value} max={max} {...rest} />\n}\n"],"names":["dProgress","dProgressNeutral","dProgressPrimary","dProgressSecondary","dProgressAccent","dProgressInfo","dProgressSuccess","dProgressWarning","dProgressError","typeClasses","Progress","value","max","type","className","rest","classes"],"mappings":";AAGA,MAAMA,IAAY,YACZC,IAAmB,oBACnBC,IAAmB,oBACnBC,IAAqB,sBACrBC,IAAkB,mBAClBC,IAAgB,iBAChBC,IAAmB,oBACnBC,IAAmB,oBACnBC,IAAiB,
|
|
1
|
+
{"version":3,"file":"Progress.js","sources":["../../src/components/Progress.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dProgress = 'progress'\nconst dProgressNeutral = 'progress-neutral'\nconst dProgressPrimary = 'progress-primary'\nconst dProgressSecondary = 'progress-secondary'\nconst dProgressAccent = 'progress-accent'\nconst dProgressInfo = 'progress-info'\nconst dProgressSuccess = 'progress-success'\nconst dProgressWarning = 'progress-warning'\nconst dProgressError = 'progress-error'\n\nexport interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {\n type?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'\n /** Test ID for testing */\n 'data-testid'?: string\n}\n\nconst typeClasses = {\n neutral: dProgressNeutral,\n primary: dProgressPrimary,\n secondary: dProgressSecondary,\n accent: dProgressAccent,\n info: dProgressInfo,\n success: dProgressSuccess,\n warning: dProgressWarning,\n error: dProgressError,\n} as const\n\nexport function Progress({ value, max = 100, type, className = '', ...rest }: ProgressProps) {\n const classes = [\n dProgress,\n type && typeClasses[type],\n className,\n ]\n .filter(Boolean)\n .join(' ')\n\n return <progress className={classes} value={value} max={max} {...rest} />\n}\n"],"names":["dProgress","dProgressNeutral","dProgressPrimary","dProgressSecondary","dProgressAccent","dProgressInfo","dProgressSuccess","dProgressWarning","dProgressError","typeClasses","Progress","value","max","type","className","rest","classes"],"mappings":";AAGA,MAAMA,IAAY,YACZC,IAAmB,oBACnBC,IAAmB,oBACnBC,IAAqB,sBACrBC,IAAkB,mBAClBC,IAAgB,iBAChBC,IAAmB,oBACnBC,IAAmB,oBACnBC,IAAiB,kBAQjBC,IAAc;AAAA,EAClB,SAASR;AAAA,EACT,SAASC;AAAA,EACT,WAAWC;AAAA,EACX,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,SAASC;AAAA,EACT,OAAOC;AACT;AAEO,SAASE,EAAS,EAAE,OAAAC,GAAO,KAAAC,IAAM,KAAK,MAAAC,GAAM,WAAAC,IAAY,IAAI,GAAGC,KAAuB;AAC3F,QAAMC,IAAU;AAAA,IACdhB;AAAA,IACAa,KAAQJ,EAAYI,CAAI;AAAA,IACxBC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BAAQ,YAAA,EAAS,WAAWE,GAAS,OAAAL,GAAc,KAAAC,GAAW,GAAGG,GAAM;AACzE;"}
|
|
@@ -14,6 +14,7 @@ export interface QRCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
14
14
|
bordered?: boolean;
|
|
15
15
|
status?: QRCodeStatus;
|
|
16
16
|
onRefresh?: () => void;
|
|
17
|
+
'data-testid'?: string;
|
|
17
18
|
}
|
|
18
19
|
export declare const QRCode: React.FC<QRCodeProps>;
|
|
19
20
|
export default QRCode;
|
|
@@ -1,76 +1,105 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import
|
|
4
|
-
import { useTheme as
|
|
5
|
-
const
|
|
6
|
-
value:
|
|
1
|
+
import { jsx as e, jsxs as w } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as k, useEffect as B } from "react";
|
|
3
|
+
import L from "qrcode";
|
|
4
|
+
import { useTheme as E } from "../hooks/useTheme.js";
|
|
5
|
+
const M = "loading", T = "loading-spinner", V = "loading-lg", G = "btn", O = "btn-sm", P = "btn-primary", X = ({
|
|
6
|
+
value: f,
|
|
7
7
|
size: t = 160,
|
|
8
|
-
errorLevel:
|
|
9
|
-
icon:
|
|
10
|
-
iconSize:
|
|
11
|
-
type:
|
|
12
|
-
color:
|
|
13
|
-
bgColor:
|
|
14
|
-
bordered:
|
|
15
|
-
status:
|
|
16
|
-
onRefresh:
|
|
17
|
-
className:
|
|
18
|
-
|
|
8
|
+
errorLevel: x = "M",
|
|
9
|
+
icon: g,
|
|
10
|
+
iconSize: a = 40,
|
|
11
|
+
type: h = "canvas",
|
|
12
|
+
color: $,
|
|
13
|
+
bgColor: Q,
|
|
14
|
+
bordered: s = !0,
|
|
15
|
+
status: i = "active",
|
|
16
|
+
onRefresh: p,
|
|
17
|
+
className: j = "",
|
|
18
|
+
"data-testid": n,
|
|
19
|
+
...o
|
|
19
20
|
}) => {
|
|
20
|
-
const c =
|
|
21
|
-
|
|
22
|
-
if (
|
|
21
|
+
const c = k(null), { colors: u } = E(), b = $ ?? u.foreground, v = Q ?? u.background;
|
|
22
|
+
B(() => {
|
|
23
|
+
if (i !== "active" || !f || h !== "canvas") return;
|
|
23
24
|
(async () => {
|
|
24
25
|
if (c.current)
|
|
25
26
|
try {
|
|
26
|
-
if (await
|
|
27
|
+
if (await L.toCanvas(c.current, f, {
|
|
27
28
|
width: t,
|
|
28
29
|
margin: 1,
|
|
29
30
|
color: {
|
|
30
|
-
dark:
|
|
31
|
-
light:
|
|
31
|
+
dark: b,
|
|
32
|
+
light: v
|
|
32
33
|
},
|
|
33
|
-
errorCorrectionLevel:
|
|
34
|
-
}),
|
|
34
|
+
errorCorrectionLevel: x
|
|
35
|
+
}), g && c.current) {
|
|
35
36
|
const l = c.current.getContext("2d");
|
|
36
37
|
if (l) {
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
l.fillStyle =
|
|
41
|
-
},
|
|
38
|
+
const m = new Image();
|
|
39
|
+
m.crossOrigin = "anonymous", m.onload = () => {
|
|
40
|
+
const y = (t - a) / 2, R = (t - a) / 2;
|
|
41
|
+
l.fillStyle = v, l.fillRect(y - 4, R - 4, a + 8, a + 8), l.drawImage(m, y, R, a, a);
|
|
42
|
+
}, m.src = g;
|
|
42
43
|
}
|
|
43
44
|
}
|
|
44
|
-
} catch (
|
|
45
|
-
console.error("QR Code generation error:",
|
|
45
|
+
} catch (C) {
|
|
46
|
+
console.error("QR Code generation error:", C);
|
|
46
47
|
}
|
|
47
48
|
})();
|
|
48
|
-
}, [
|
|
49
|
-
const
|
|
49
|
+
}, [f, t, x, g, a, h, b, v, i]);
|
|
50
|
+
const d = [
|
|
50
51
|
"inline-flex items-center justify-center",
|
|
51
|
-
|
|
52
|
+
s && "border border-base-content/20 p-3",
|
|
52
53
|
"bg-base-100",
|
|
53
|
-
|
|
54
|
-
].filter(Boolean).join(" ");
|
|
55
|
-
return
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
"
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
54
|
+
j
|
|
55
|
+
].filter(Boolean).join(" "), r = (N) => n ? `${n}-${N}` : void 0;
|
|
56
|
+
return i === "loading" ? /* @__PURE__ */ e(
|
|
57
|
+
"div",
|
|
58
|
+
{
|
|
59
|
+
className: d,
|
|
60
|
+
style: { width: t + (s ? 24 : 0), height: t + (s ? 24 : 0) },
|
|
61
|
+
"data-state": "loading",
|
|
62
|
+
"data-testid": n,
|
|
63
|
+
...o,
|
|
64
|
+
children: /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
65
|
+
/* @__PURE__ */ e("span", { className: `${M} ${T} ${V}` }),
|
|
66
|
+
/* @__PURE__ */ e("span", { className: "text-sm text-base-content/70", "data-testid": r("loading-text"), children: "Loading..." })
|
|
67
|
+
] })
|
|
68
|
+
}
|
|
69
|
+
) : i === "expired" ? /* @__PURE__ */ e(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
className: d,
|
|
73
|
+
style: { width: t + (s ? 24 : 0), height: t + (s ? 24 : 0) },
|
|
74
|
+
"data-state": "expired",
|
|
75
|
+
"data-testid": n,
|
|
76
|
+
...o,
|
|
77
|
+
children: /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
78
|
+
/* @__PURE__ */ e("svg", { className: "w-12 h-12 text-base-content/30", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
|
|
79
|
+
"path",
|
|
80
|
+
{
|
|
81
|
+
fillRule: "evenodd",
|
|
82
|
+
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
|
|
83
|
+
clipRule: "evenodd"
|
|
84
|
+
}
|
|
85
|
+
) }),
|
|
86
|
+
/* @__PURE__ */ e("span", { className: "text-sm text-base-content/70", "data-testid": r("expired-text"), children: "QR Code Expired" }),
|
|
87
|
+
p && /* @__PURE__ */ e(
|
|
88
|
+
"button",
|
|
89
|
+
{
|
|
90
|
+
className: `${G} ${O} ${P}`,
|
|
91
|
+
onClick: p,
|
|
92
|
+
"data-testid": r("refresh"),
|
|
93
|
+
children: "Refresh"
|
|
94
|
+
}
|
|
95
|
+
)
|
|
96
|
+
] })
|
|
97
|
+
}
|
|
98
|
+
) : h === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...o, children: /* @__PURE__ */ e("div", { className: d, children: /* @__PURE__ */ e("canvas", { ref: c, style: { display: "block" }, "data-testid": r("canvas") }) }) }) : /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...o, children: /* @__PURE__ */ e("div", { className: d, children: /* @__PURE__ */ e("div", { style: { width: t, height: t }, className: "bg-base-content/5", "data-testid": r("svg"), children: /* @__PURE__ */ e("span", { className: "text-xs text-base-content/50", children: "SVG mode placeholder" }) }) }) });
|
|
70
99
|
};
|
|
71
|
-
|
|
100
|
+
X.displayName = "QRCode";
|
|
72
101
|
export {
|
|
73
|
-
|
|
74
|
-
|
|
102
|
+
X as QRCode,
|
|
103
|
+
X as default
|
|
75
104
|
};
|
|
76
105
|
//# sourceMappingURL=QRCode.js.map
|