@aster-ui/prefixed 0.12.89 → 0.12.90
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/Chart.js +91 -88
- package/dist/components/Chart.js.map +1 -1
- package/dist/components/QRCode.js +12 -12
- package/dist/components/QRCode.js.map +1 -1
- package/dist/components/Terminal.js +96 -93
- package/dist/components/Terminal.js.map +1 -1
- package/dist/components/ThemeController.js +1 -1
- package/dist/components/ThemeController.js.map +1 -1
- package/dist/components/Watermark.js +12 -12
- package/dist/components/Watermark.js.map +1 -1
- package/dist/hooks/useTheme.d.ts +11 -21
- package/dist/hooks/useTheme.js +63 -94
- package/dist/hooks/useTheme.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +45 -44
- package/dist/providers/ThemeProvider.d.ts +5 -13
- package/dist/providers/ThemeProvider.js +61 -64
- package/dist/providers/ThemeProvider.js.map +1 -1
- package/package.json +1 -1
package/dist/components/Chart.js
CHANGED
|
@@ -1,123 +1,126 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as p, useEffect as m } from "react";
|
|
3
|
-
import
|
|
4
|
-
import { useTheme as
|
|
5
|
-
function
|
|
6
|
-
const
|
|
3
|
+
import x from "apexcharts";
|
|
4
|
+
import { useTheme as k, getThemeColors as C } from "../hooks/useTheme.js";
|
|
5
|
+
function l(t, o) {
|
|
6
|
+
const s = { ...t };
|
|
7
7
|
for (const e in o)
|
|
8
|
-
o[e] !== void 0 && (typeof o[e] == "object" && o[e] !== null && !Array.isArray(o[e]) && typeof t[e] == "object" && t[e] !== null && !Array.isArray(t[e]) ?
|
|
8
|
+
o[e] !== void 0 && (typeof o[e] == "object" && o[e] !== null && !Array.isArray(o[e]) && typeof t[e] == "object" && t[e] !== null && !Array.isArray(t[e]) ? s[e] = l(
|
|
9
9
|
t[e],
|
|
10
10
|
o[e]
|
|
11
|
-
) :
|
|
12
|
-
return
|
|
11
|
+
) : s[e] = o[e]);
|
|
12
|
+
return s;
|
|
13
13
|
}
|
|
14
|
-
const
|
|
14
|
+
const j = ({
|
|
15
15
|
type: t,
|
|
16
16
|
series: o,
|
|
17
|
-
width:
|
|
17
|
+
width: s = "100%",
|
|
18
18
|
height: e = 350,
|
|
19
19
|
options: c = {},
|
|
20
|
-
themed:
|
|
21
|
-
className:
|
|
22
|
-
"data-testid":
|
|
20
|
+
themed: d = !0,
|
|
21
|
+
className: h = "",
|
|
22
|
+
"data-testid": y
|
|
23
23
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
background: "transparent",
|
|
39
|
-
foreColor: r.foreground
|
|
40
|
-
},
|
|
41
|
-
grid: {
|
|
42
|
-
borderColor: r.foreground + "20"
|
|
43
|
-
// 12.5% opacity
|
|
44
|
-
},
|
|
45
|
-
xaxis: {
|
|
46
|
-
labels: {
|
|
47
|
-
style: {
|
|
48
|
-
colors: r.foreground
|
|
49
|
-
}
|
|
24
|
+
const a = p(null), n = p(null), { isDark: u } = k(), b = () => {
|
|
25
|
+
const r = C();
|
|
26
|
+
return {
|
|
27
|
+
colors: [
|
|
28
|
+
r.primary,
|
|
29
|
+
r.secondary,
|
|
30
|
+
r.accent,
|
|
31
|
+
r.info,
|
|
32
|
+
r.success,
|
|
33
|
+
r.warning,
|
|
34
|
+
r.error
|
|
35
|
+
],
|
|
36
|
+
theme: {
|
|
37
|
+
mode: u ? "dark" : "light"
|
|
50
38
|
},
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
chart: {
|
|
40
|
+
background: "transparent",
|
|
41
|
+
foreColor: r.foreground
|
|
53
42
|
},
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
43
|
+
grid: {
|
|
44
|
+
borderColor: r.foreground + "20"
|
|
45
|
+
// 12.5% opacity
|
|
46
|
+
},
|
|
47
|
+
xaxis: {
|
|
48
|
+
labels: {
|
|
49
|
+
style: {
|
|
50
|
+
colors: r.foreground
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
axisBorder: {
|
|
54
|
+
color: r.foreground + "20"
|
|
55
|
+
},
|
|
56
|
+
axisTicks: {
|
|
57
|
+
color: r.foreground + "20"
|
|
62
58
|
}
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
legend: {
|
|
66
|
-
labels: {
|
|
67
|
-
colors: r.foreground
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
tooltip: {
|
|
71
|
-
theme: d ? "dark" : "light",
|
|
72
|
-
style: {
|
|
73
|
-
fontSize: "12px"
|
|
74
59
|
},
|
|
75
|
-
|
|
76
|
-
|
|
60
|
+
yaxis: {
|
|
61
|
+
labels: {
|
|
62
|
+
style: {
|
|
63
|
+
colors: r.foreground
|
|
64
|
+
}
|
|
65
|
+
}
|
|
77
66
|
},
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
dataLabels: {
|
|
83
|
-
style: {
|
|
84
|
-
colors: Array(7).fill(r.foreground)
|
|
67
|
+
legend: {
|
|
68
|
+
labels: {
|
|
69
|
+
colors: r.foreground
|
|
70
|
+
}
|
|
85
71
|
},
|
|
86
|
-
|
|
87
|
-
|
|
72
|
+
tooltip: {
|
|
73
|
+
theme: u ? "dark" : "light",
|
|
74
|
+
style: {
|
|
75
|
+
fontSize: "12px"
|
|
76
|
+
},
|
|
77
|
+
x: {
|
|
78
|
+
show: !0
|
|
79
|
+
},
|
|
80
|
+
marker: {
|
|
81
|
+
show: !0
|
|
82
|
+
}
|
|
88
83
|
},
|
|
89
|
-
|
|
90
|
-
|
|
84
|
+
dataLabels: {
|
|
85
|
+
style: {
|
|
86
|
+
colors: Array(7).fill(r.foreground)
|
|
87
|
+
},
|
|
88
|
+
background: {
|
|
89
|
+
enabled: !1
|
|
90
|
+
},
|
|
91
|
+
dropShadow: {
|
|
92
|
+
enabled: !1
|
|
93
|
+
}
|
|
91
94
|
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
const
|
|
95
|
+
};
|
|
96
|
+
}, f = () => {
|
|
97
|
+
const r = {
|
|
95
98
|
chart: {
|
|
96
99
|
type: t,
|
|
97
|
-
width:
|
|
100
|
+
width: s,
|
|
98
101
|
height: e
|
|
99
102
|
},
|
|
100
103
|
series: o
|
|
101
104
|
};
|
|
102
|
-
if (
|
|
103
|
-
const
|
|
104
|
-
return
|
|
105
|
+
if (d) {
|
|
106
|
+
const i = b();
|
|
107
|
+
return l(l(r, i), c);
|
|
105
108
|
}
|
|
106
|
-
return
|
|
109
|
+
return l(r, c);
|
|
107
110
|
};
|
|
108
111
|
return m(() => {
|
|
109
|
-
if (!
|
|
110
|
-
const
|
|
111
|
-
return n.current = new
|
|
112
|
+
if (!a.current) return;
|
|
113
|
+
const r = f();
|
|
114
|
+
return n.current = new x(a.current, r), n.current.render(), () => {
|
|
112
115
|
n.current && (n.current.destroy(), n.current = null);
|
|
113
116
|
};
|
|
114
117
|
}, []), m(() => {
|
|
115
118
|
if (!n.current) return;
|
|
116
|
-
const
|
|
117
|
-
n.current.updateOptions(
|
|
118
|
-
}, [t, o,
|
|
119
|
+
const r = f();
|
|
120
|
+
n.current.updateOptions(r, !0, !0);
|
|
121
|
+
}, [t, o, s, e, c, d, u]), /* @__PURE__ */ g("div", { ref: a, className: h, "data-testid": y });
|
|
119
122
|
};
|
|
120
123
|
export {
|
|
121
|
-
|
|
124
|
+
j as Chart
|
|
122
125
|
};
|
|
123
126
|
//# sourceMappingURL=Chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","sources":["../../src/components/Chart.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport ApexCharts from 'apexcharts'\nimport type { ApexOptions } from 'apexcharts'\nimport { useTheme } from '../hooks/useTheme'\n\nexport interface ChartProps {\n /** Chart type */\n type: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap'\n /** Chart series data */\n series: ApexAxisChartSeries | ApexNonAxisChartSeries\n /** Chart width */\n width?: string | number\n /** Chart height */\n height?: string | number\n /** ApexCharts options (merged with theme defaults) */\n options?: ApexOptions\n /** Use daisyUI theme colors */\n themed?: boolean\n /** Additional CSS classes */\n className?: string\n 'data-testid'?: string\n}\n\n// Deep merge objects\nfunction deepMerge<T extends Record<string, unknown>>(target: T, source: Partial<T>): T {\n const result = { ...target }\n\n for (const key in source) {\n if (source[key] !== undefined) {\n if (\n typeof source[key] === 'object' &&\n source[key] !== null &&\n !Array.isArray(source[key]) &&\n typeof target[key] === 'object' &&\n target[key] !== null &&\n !Array.isArray(target[key])\n ) {\n result[key] = deepMerge(\n target[key] as Record<string, unknown>,\n source[key] as Record<string, unknown>\n ) as T[Extract<keyof T, string>]\n } else {\n result[key] = source[key] as T[Extract<keyof T, string>]\n }\n }\n }\n\n return result\n}\n\nexport const Chart: React.FC<ChartProps> = ({\n type,\n series,\n width = '100%',\n height = 350,\n options = {},\n themed = true,\n className = '',\n 'data-testid': testId,\n}) => {\n const chartRef = useRef<HTMLDivElement>(null)\n const chartInstance = useRef<ApexCharts | null>(null)\n const { isDark
|
|
1
|
+
{"version":3,"file":"Chart.js","sources":["../../src/components/Chart.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport ApexCharts from 'apexcharts'\nimport type { ApexOptions } from 'apexcharts'\nimport { useTheme, getThemeColors } from '../hooks/useTheme'\n\nexport interface ChartProps {\n /** Chart type */\n type: 'line' | 'area' | 'bar' | 'pie' | 'donut' | 'radialBar' | 'scatter' | 'bubble' | 'heatmap' | 'candlestick' | 'boxPlot' | 'radar' | 'polarArea' | 'rangeBar' | 'rangeArea' | 'treemap'\n /** Chart series data */\n series: ApexAxisChartSeries | ApexNonAxisChartSeries\n /** Chart width */\n width?: string | number\n /** Chart height */\n height?: string | number\n /** ApexCharts options (merged with theme defaults) */\n options?: ApexOptions\n /** Use daisyUI theme colors */\n themed?: boolean\n /** Additional CSS classes */\n className?: string\n 'data-testid'?: string\n}\n\n// Deep merge objects\nfunction deepMerge<T extends Record<string, unknown>>(target: T, source: Partial<T>): T {\n const result = { ...target }\n\n for (const key in source) {\n if (source[key] !== undefined) {\n if (\n typeof source[key] === 'object' &&\n source[key] !== null &&\n !Array.isArray(source[key]) &&\n typeof target[key] === 'object' &&\n target[key] !== null &&\n !Array.isArray(target[key])\n ) {\n result[key] = deepMerge(\n target[key] as Record<string, unknown>,\n source[key] as Record<string, unknown>\n ) as T[Extract<keyof T, string>]\n } else {\n result[key] = source[key] as T[Extract<keyof T, string>]\n }\n }\n }\n\n return result\n}\n\nexport const Chart: React.FC<ChartProps> = ({\n type,\n series,\n width = '100%',\n height = 350,\n options = {},\n themed = true,\n className = '',\n 'data-testid': testId,\n}) => {\n const chartRef = useRef<HTMLDivElement>(null)\n const chartInstance = useRef<ApexCharts | null>(null)\n const { isDark } = useTheme()\n\n // Build theme-aware chart options\n const getThemedOptions = (): Partial<ApexOptions> => {\n const colors = getThemeColors()\n const chartColors = [\n colors.primary,\n colors.secondary,\n colors.accent,\n colors.info,\n colors.success,\n colors.warning,\n colors.error,\n ]\n\n return {\n colors: chartColors,\n theme: {\n mode: isDark ? 'dark' : 'light',\n },\n chart: {\n background: 'transparent',\n foreColor: colors.foreground,\n },\n grid: {\n borderColor: colors.foreground + '20', // 12.5% opacity\n },\n xaxis: {\n labels: {\n style: {\n colors: colors.foreground,\n },\n },\n axisBorder: {\n color: colors.foreground + '20',\n },\n axisTicks: {\n color: colors.foreground + '20',\n },\n },\n yaxis: {\n labels: {\n style: {\n colors: colors.foreground,\n },\n },\n },\n legend: {\n labels: {\n colors: colors.foreground,\n },\n },\n tooltip: {\n theme: isDark ? 'dark' : 'light',\n style: {\n fontSize: '12px',\n },\n x: {\n show: true,\n },\n marker: {\n show: true,\n },\n },\n dataLabels: {\n style: {\n colors: Array(7).fill(colors.foreground),\n },\n background: {\n enabled: false,\n },\n dropShadow: {\n enabled: false,\n },\n },\n }\n }\n\n // Build final options\n const buildOptions = (): ApexOptions => {\n const baseOptions: ApexOptions = {\n chart: {\n type,\n width,\n height,\n },\n series,\n }\n\n if (themed) {\n const themedOpts = getThemedOptions()\n return deepMerge(deepMerge(baseOptions as unknown as Record<string, unknown>, themedOpts as unknown as Record<string, unknown>), options as unknown as Record<string, unknown>) as ApexOptions\n }\n\n return deepMerge(baseOptions as unknown as Record<string, unknown>, options as unknown as Record<string, unknown>) as ApexOptions\n }\n\n // Initialize chart\n useEffect(() => {\n if (!chartRef.current) return\n\n const opts = buildOptions()\n chartInstance.current = new ApexCharts(chartRef.current, opts)\n chartInstance.current.render()\n\n return () => {\n if (chartInstance.current) {\n chartInstance.current.destroy()\n chartInstance.current = null\n }\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n // Update chart when props or theme change\n useEffect(() => {\n if (!chartInstance.current) return\n\n const opts = buildOptions()\n chartInstance.current.updateOptions(opts, true, true)\n }, [type, series, width, height, options, themed, isDark]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return <div ref={chartRef} className={className} data-testid={testId} />\n}\n"],"names":["deepMerge","target","source","result","key","Chart","type","series","width","height","options","themed","className","testId","chartRef","useRef","chartInstance","isDark","useTheme","getThemedOptions","colors","getThemeColors","buildOptions","baseOptions","themedOpts","useEffect","opts","ApexCharts"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as e, jsxs as w } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as k, useEffect as B } from "react";
|
|
3
3
|
import L from "qrcode";
|
|
4
|
-
import {
|
|
4
|
+
import { getThemeColors as E } from "../hooks/useTheme.js";
|
|
5
5
|
const M = "d-loading", T = "d-loading-spinner", V = "d-loading-lg", G = "d-btn", O = "d-btn-sm", P = "d-btn-primary", X = ({
|
|
6
6
|
value: f,
|
|
7
7
|
size: t = 160,
|
|
@@ -16,9 +16,9 @@ const M = "d-loading", T = "d-loading-spinner", V = "d-loading-lg", G = "d-btn",
|
|
|
16
16
|
onRefresh: p,
|
|
17
17
|
className: j = "",
|
|
18
18
|
"data-testid": n,
|
|
19
|
-
...
|
|
19
|
+
...o
|
|
20
20
|
}) => {
|
|
21
|
-
const c = k(null),
|
|
21
|
+
const c = k(null), u = E(), b = $ ?? u.foreground, v = Q ?? u.background;
|
|
22
22
|
B(() => {
|
|
23
23
|
if (r !== "active" || !f || h !== "canvas") return;
|
|
24
24
|
(async () => {
|
|
@@ -42,25 +42,25 @@ const M = "d-loading", T = "d-loading-spinner", V = "d-loading-lg", G = "d-btn",
|
|
|
42
42
|
}, m.src = g;
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
} catch (
|
|
46
|
-
console.error("QR Code generation error:",
|
|
45
|
+
} catch (N) {
|
|
46
|
+
console.error("QR Code generation error:", N);
|
|
47
47
|
}
|
|
48
48
|
})();
|
|
49
49
|
}, [f, t, x, g, a, h, b, v, r]);
|
|
50
|
-
const
|
|
50
|
+
const i = [
|
|
51
51
|
"inline-flex items-center justify-center",
|
|
52
52
|
s && "border border-base-content/20 p-3",
|
|
53
53
|
"bg-base-100",
|
|
54
54
|
j
|
|
55
|
-
].filter(Boolean).join(" "), d = (
|
|
55
|
+
].filter(Boolean).join(" "), d = (C) => n ? `${n}-${C}` : void 0;
|
|
56
56
|
return r === "loading" ? /* @__PURE__ */ e(
|
|
57
57
|
"div",
|
|
58
58
|
{
|
|
59
|
-
className:
|
|
59
|
+
className: i,
|
|
60
60
|
style: { width: t + (s ? 24 : 0), height: t + (s ? 24 : 0) },
|
|
61
61
|
"data-state": "loading",
|
|
62
62
|
"data-testid": n,
|
|
63
|
-
...
|
|
63
|
+
...o,
|
|
64
64
|
children: /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
65
65
|
/* @__PURE__ */ e("span", { className: `${M} ${T} ${V}` }),
|
|
66
66
|
/* @__PURE__ */ e("span", { className: "text-sm text-base-content/70", "data-testid": d("loading-text"), children: "Loading..." })
|
|
@@ -69,11 +69,11 @@ const M = "d-loading", T = "d-loading-spinner", V = "d-loading-lg", G = "d-btn",
|
|
|
69
69
|
) : r === "expired" ? /* @__PURE__ */ e(
|
|
70
70
|
"div",
|
|
71
71
|
{
|
|
72
|
-
className:
|
|
72
|
+
className: i,
|
|
73
73
|
style: { width: t + (s ? 24 : 0), height: t + (s ? 24 : 0) },
|
|
74
74
|
"data-state": "expired",
|
|
75
75
|
"data-testid": n,
|
|
76
|
-
...
|
|
76
|
+
...o,
|
|
77
77
|
children: /* @__PURE__ */ w("div", { className: "flex flex-col items-center justify-center gap-2", children: [
|
|
78
78
|
/* @__PURE__ */ e("svg", { className: "w-12 h-12 text-base-content/30", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
|
|
79
79
|
"path",
|
|
@@ -95,7 +95,7 @@ const M = "d-loading", T = "d-loading-spinner", V = "d-loading-lg", G = "d-btn",
|
|
|
95
95
|
)
|
|
96
96
|
] })
|
|
97
97
|
}
|
|
98
|
-
) : h === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...
|
|
98
|
+
) : h === "canvas" ? /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...o, children: /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e("canvas", { ref: c, style: { display: "block" }, "data-testid": d("canvas") }) }) }) : /* @__PURE__ */ e("div", { className: "inline-block", "data-state": "active", "data-testid": n, ...o, children: /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e("div", { style: { width: t, height: t }, className: "bg-base-content/5", "data-testid": d("svg"), children: /* @__PURE__ */ e("span", { className: "text-xs text-base-content/50", children: "SVG mode placeholder" }) }) }) });
|
|
99
99
|
};
|
|
100
100
|
X.displayName = "QRCode";
|
|
101
101
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QRCode.js","sources":["../../src/components/QRCode.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport QRCodeLib from 'qrcode'\nimport {
|
|
1
|
+
{"version":3,"file":"QRCode.js","sources":["../../src/components/QRCode.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport QRCodeLib from 'qrcode'\nimport { getThemeColors } from '../hooks/useTheme'\n\n// DaisyUI classes\nconst dLoading = 'd-loading'\nconst dLoadingSpinner = 'd-loading-spinner'\nconst dLoadingLg = 'd-loading-lg'\nconst dBtn = 'd-btn'\nconst dBtnSm = 'd-btn-sm'\nconst dBtnPrimary = 'd-btn-primary'\n\nexport type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H'\nexport type QRCodeType = 'canvas' | 'svg'\nexport type QRCodeStatus = 'active' | 'loading' | 'expired'\n\nexport interface QRCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n value: string\n size?: number\n errorLevel?: QRCodeErrorLevel\n icon?: string\n iconSize?: number\n type?: QRCodeType\n color?: string\n bgColor?: string\n bordered?: boolean\n status?: QRCodeStatus\n onRefresh?: () => void\n 'data-testid'?: string\n}\n\nexport const QRCode: React.FC<QRCodeProps> = ({\n value,\n size = 160,\n errorLevel = 'M',\n icon,\n iconSize = 40,\n type = 'canvas',\n color,\n bgColor,\n bordered = true,\n status = 'active',\n onRefresh,\n className = '',\n 'data-testid': testId,\n ...rest\n}) => {\n const canvasRef = useRef<HTMLCanvasElement>(null)\n // Theme-aware default colors from DaisyUI CSS variables\n const colors = getThemeColors()\n const effectiveColor = color ?? colors.foreground\n const effectiveBgColor = bgColor ?? colors.background\n\n useEffect(() => {\n if (status !== 'active' || !value || type !== 'canvas') return\n\n const generateQRCode = async () => {\n if (!canvasRef.current) return\n\n try {\n await QRCodeLib.toCanvas(canvasRef.current, value, {\n width: size,\n margin: 1,\n color: {\n dark: effectiveColor,\n light: effectiveBgColor,\n },\n errorCorrectionLevel: errorLevel,\n })\n\n if (icon && canvasRef.current) {\n const canvas = canvasRef.current\n const ctx = canvas.getContext('2d')\n if (ctx) {\n const img = new Image()\n img.crossOrigin = 'anonymous'\n img.onload = () => {\n const iconX = (size - iconSize) / 2\n const iconY = (size - iconSize) / 2\n ctx.fillStyle = effectiveBgColor\n ctx.fillRect(iconX - 4, iconY - 4, iconSize + 8, iconSize + 8)\n ctx.drawImage(img, iconX, iconY, iconSize, iconSize)\n }\n img.src = icon\n }\n }\n } catch (error) {\n console.error('QR Code generation error:', error)\n }\n }\n\n generateQRCode()\n }, [value, size, errorLevel, icon, iconSize, type, effectiveColor, effectiveBgColor, status])\n\n // Download functionality can be implemented by consumers\n // by accessing the canvas ref and converting to data URL\n\n const containerClasses = [\n 'inline-flex items-center justify-center',\n bordered && 'border border-base-content/20 p-3',\n 'bg-base-100',\n className,\n ]\n .filter(Boolean)\n .join(' ')\n const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n if (status === 'loading') {\n return (\n <div\n className={containerClasses}\n style={{ width: size + (bordered ? 24 : 0), height: size + (bordered ? 24 : 0) }}\n data-state=\"loading\"\n data-testid={testId}\n {...rest}\n >\n <div className=\"flex flex-col items-center justify-center gap-2\">\n <span className={`${dLoading} ${dLoadingSpinner} ${dLoadingLg}`}></span>\n <span className=\"text-sm text-base-content/70\" data-testid={getTestId('loading-text')}>Loading...</span>\n </div>\n </div>\n )\n }\n\n if (status === 'expired') {\n return (\n <div\n className={containerClasses}\n style={{ width: size + (bordered ? 24 : 0), height: size + (bordered ? 24 : 0) }}\n data-state=\"expired\"\n data-testid={testId}\n {...rest}\n >\n <div className=\"flex flex-col items-center justify-center gap-2\">\n <svg className=\"w-12 h-12 text-base-content/30\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path\n fillRule=\"evenodd\"\n 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\"\n clipRule=\"evenodd\"\n />\n </svg>\n <span className=\"text-sm text-base-content/70\" data-testid={getTestId('expired-text')}>QR Code Expired</span>\n {onRefresh && (\n <button\n className={`${dBtn} ${dBtnSm} ${dBtnPrimary}`}\n onClick={onRefresh}\n data-testid={getTestId('refresh')}\n >\n Refresh\n </button>\n )}\n </div>\n </div>\n )\n }\n\n if (type === 'canvas') {\n return (\n <div className=\"inline-block\" data-state=\"active\" data-testid={testId} {...rest}>\n <div className={containerClasses}>\n <canvas ref={canvasRef} style={{ display: 'block' }} data-testid={getTestId('canvas')} />\n </div>\n </div>\n )\n }\n\n return (\n <div className=\"inline-block\" data-state=\"active\" data-testid={testId} {...rest}>\n <div className={containerClasses}>\n <div style={{ width: size, height: size }} className=\"bg-base-content/5\" data-testid={getTestId('svg')}>\n <span className=\"text-xs text-base-content/50\">SVG mode placeholder</span>\n </div>\n </div>\n </div>\n )\n}\n\nQRCode.displayName = 'QRCode'\n\nexport default QRCode\n"],"names":["dLoading","dLoadingSpinner","dLoadingLg","dBtn","dBtnSm","dBtnPrimary","QRCode","value","size","errorLevel","icon","iconSize","type","color","bgColor","bordered","status","onRefresh","className","testId","rest","canvasRef","useRef","colors","getThemeColors","effectiveColor","effectiveBgColor","useEffect","QRCodeLib","ctx","img","iconX","iconY","error","containerClasses","getTestId","suffix","jsx","jsxs"],"mappings":"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"}
|
|
@@ -1,87 +1,90 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import * as
|
|
4
|
-
import * as
|
|
5
|
-
import { useTheme as X } from "../hooks/useTheme.js";
|
|
6
|
-
const E =
|
|
7
|
-
let
|
|
1
|
+
import { jsx as O } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as H, useRef as x, useImperativeHandle as $, useEffect as k } from "react";
|
|
3
|
+
import * as b from "@xterm/xterm";
|
|
4
|
+
import * as p from "@xterm/addon-fit";
|
|
5
|
+
import { useTheme as j, getThemeColors as X } from "../hooks/useTheme.js";
|
|
6
|
+
const E = b.Terminal ?? b.default?.Terminal ?? b, L = p.FitAddon ?? p.default?.FitAddon ?? p;
|
|
7
|
+
let z = !1;
|
|
8
8
|
function P() {
|
|
9
|
-
if (
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
9
|
+
if (z || typeof document > "u") return;
|
|
10
|
+
z = !0;
|
|
11
|
+
const s = document.createElement("style");
|
|
12
|
+
s.setAttribute("data-xterm", ""), s.textContent = ".xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility:not(.debug),.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .xterm-accessibility-tree:not(.debug) *::selection{color:transparent}.xterm .xterm-accessibility-tree{user-select:text;white-space:pre}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:.5}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}", document.head.appendChild(s);
|
|
13
13
|
}
|
|
14
|
-
const W =
|
|
15
|
-
onData:
|
|
16
|
-
onReady:
|
|
17
|
-
readline:
|
|
18
|
-
prompt:
|
|
19
|
-
onLine:
|
|
14
|
+
const W = H(({
|
|
15
|
+
onData: s,
|
|
16
|
+
onReady: I,
|
|
17
|
+
readline: g = !1,
|
|
18
|
+
prompt: u = "$ ",
|
|
19
|
+
onLine: A,
|
|
20
20
|
convertEol: C = !0,
|
|
21
|
-
options:
|
|
22
|
-
className:
|
|
21
|
+
options: y = {},
|
|
22
|
+
className: F = "",
|
|
23
23
|
style: T,
|
|
24
|
-
"data-testid":
|
|
25
|
-
},
|
|
26
|
-
const
|
|
24
|
+
"data-testid": R
|
|
25
|
+
}, D) => {
|
|
26
|
+
const m = x(null), n = x(null), a = x(null), { isDark: l } = j(), f = x({
|
|
27
27
|
buffer: "",
|
|
28
28
|
cursor: 0,
|
|
29
29
|
history: [],
|
|
30
30
|
historyIndex: -1,
|
|
31
31
|
savedBuffer: ""
|
|
32
|
-
}),
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
32
|
+
}), w = () => {
|
|
33
|
+
const r = X();
|
|
34
|
+
return {
|
|
35
|
+
background: r.background,
|
|
36
|
+
foreground: r.foreground,
|
|
37
|
+
cursor: r.foreground,
|
|
38
|
+
cursorAccent: r.background,
|
|
39
|
+
selectionBackground: r.primary + "40",
|
|
40
|
+
selectionForeground: r.foreground,
|
|
41
|
+
black: l ? "#000000" : "#2e3436",
|
|
42
|
+
red: r.error,
|
|
43
|
+
green: r.success,
|
|
44
|
+
yellow: r.warning,
|
|
45
|
+
blue: r.info,
|
|
46
|
+
magenta: r.secondary,
|
|
47
|
+
cyan: r.accent,
|
|
48
|
+
white: l ? "#d3d7cf" : "#eeeeec",
|
|
49
|
+
brightBlack: "#555753",
|
|
50
|
+
brightRed: r.error,
|
|
51
|
+
brightGreen: r.success,
|
|
52
|
+
brightYellow: r.warning,
|
|
53
|
+
brightBlue: r.info,
|
|
54
|
+
brightMagenta: r.secondary,
|
|
55
|
+
brightCyan: r.accent,
|
|
56
|
+
brightWhite: l ? "#eeeeec" : "#ffffff"
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
$(D, () => ({
|
|
60
|
+
terminal: n.current,
|
|
61
|
+
write: (r) => n.current?.write(r),
|
|
62
|
+
writeln: (r) => n.current?.writeln(r),
|
|
63
|
+
clear: () => n.current?.clear(),
|
|
64
|
+
focus: () => n.current?.focus(),
|
|
65
|
+
fit: () => a.current?.fit(),
|
|
66
|
+
history: f.current.history,
|
|
64
67
|
clearHistory: () => {
|
|
65
|
-
|
|
68
|
+
f.current.history = [];
|
|
66
69
|
}
|
|
67
70
|
}), []);
|
|
68
|
-
const
|
|
69
|
-
const r =
|
|
71
|
+
const c = () => {
|
|
72
|
+
const r = n.current;
|
|
70
73
|
if (!r) return;
|
|
71
|
-
const t =
|
|
72
|
-
r.write("\r\x1B[K" +
|
|
74
|
+
const t = f.current;
|
|
75
|
+
r.write("\r\x1B[K" + u + t.buffer);
|
|
73
76
|
const e = t.buffer.length - t.cursor;
|
|
74
77
|
e > 0 && r.write(`\x1B[${e}D`);
|
|
75
|
-
},
|
|
76
|
-
const t =
|
|
78
|
+
}, S = (r) => {
|
|
79
|
+
const t = n.current;
|
|
77
80
|
if (!t) return;
|
|
78
|
-
const e =
|
|
81
|
+
const e = f.current;
|
|
79
82
|
if (r === "\x1B[A") {
|
|
80
|
-
e.history.length > 0 && e.historyIndex < e.history.length - 1 && (e.historyIndex === -1 && (e.savedBuffer = e.buffer), e.historyIndex++, e.buffer = e.history[e.history.length - 1 - e.historyIndex], e.cursor = e.buffer.length,
|
|
83
|
+
e.history.length > 0 && e.historyIndex < e.history.length - 1 && (e.historyIndex === -1 && (e.savedBuffer = e.buffer), e.historyIndex++, e.buffer = e.history[e.history.length - 1 - e.historyIndex], e.cursor = e.buffer.length, c());
|
|
81
84
|
return;
|
|
82
85
|
}
|
|
83
86
|
if (r === "\x1B[B") {
|
|
84
|
-
e.historyIndex > -1 && (e.historyIndex--, e.buffer = e.historyIndex === -1 ? e.savedBuffer : e.history[e.history.length - 1 - e.historyIndex], e.cursor = e.buffer.length,
|
|
87
|
+
e.historyIndex > -1 && (e.historyIndex--, e.buffer = e.historyIndex === -1 ? e.savedBuffer : e.history[e.history.length - 1 - e.historyIndex], e.cursor = e.buffer.length, c());
|
|
85
88
|
return;
|
|
86
89
|
}
|
|
87
90
|
if (r === "\x1B[C") {
|
|
@@ -101,52 +104,52 @@ const W = $(({
|
|
|
101
104
|
return;
|
|
102
105
|
}
|
|
103
106
|
if (r === "\x1B[3~") {
|
|
104
|
-
e.cursor < e.buffer.length && (e.buffer = e.buffer.slice(0, e.cursor) + e.buffer.slice(e.cursor + 1),
|
|
107
|
+
e.cursor < e.buffer.length && (e.buffer = e.buffer.slice(0, e.cursor) + e.buffer.slice(e.cursor + 1), c());
|
|
105
108
|
return;
|
|
106
109
|
}
|
|
107
110
|
if (!r.startsWith("\x1B"))
|
|
108
111
|
if (r === "\r") {
|
|
109
112
|
t.writeln("");
|
|
110
|
-
const
|
|
111
|
-
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
} else r === "" || r === "\b" ? e.cursor > 0 && (e.buffer = e.buffer.slice(0, e.cursor - 1) + e.buffer.slice(e.cursor), e.cursor--,
|
|
113
|
+
const o = e.buffer;
|
|
114
|
+
o.trim() && e.history.push(o), e.buffer = "", e.cursor = 0, e.historyIndex = -1, e.savedBuffer = "";
|
|
115
|
+
const i = A?.(o);
|
|
116
|
+
i && typeof i.then == "function" ? i.then(() => t.write(u)) : t.write(u);
|
|
117
|
+
} else r === "" || r === "\b" ? e.cursor > 0 && (e.buffer = e.buffer.slice(0, e.cursor - 1) + e.buffer.slice(e.cursor), e.cursor--, c()) : r === "" ? (t.writeln("^C"), e.buffer = "", e.cursor = 0, e.historyIndex = -1, t.write(u)) : (r >= " " || r === " ") && (e.buffer = e.buffer.slice(0, e.cursor) + r + e.buffer.slice(e.cursor), e.cursor += r.length, c());
|
|
115
118
|
};
|
|
116
|
-
return
|
|
117
|
-
if (!
|
|
119
|
+
return k(() => {
|
|
120
|
+
if (!m.current) return;
|
|
118
121
|
P();
|
|
119
|
-
const r =
|
|
120
|
-
let t = null, e = null,
|
|
121
|
-
const
|
|
122
|
-
if (
|
|
123
|
-
const
|
|
124
|
-
if (
|
|
125
|
-
|
|
126
|
-
const { theme:
|
|
122
|
+
const r = m.current;
|
|
123
|
+
let t = null, e = null, o = null, i = !1, h = !1;
|
|
124
|
+
const v = () => {
|
|
125
|
+
if (i || h || !r) return;
|
|
126
|
+
const d = r.getBoundingClientRect();
|
|
127
|
+
if (d.width === 0 || d.height === 0) return;
|
|
128
|
+
i = !0;
|
|
129
|
+
const { theme: B, ...M } = y;
|
|
127
130
|
t = new E({
|
|
128
|
-
theme: { ...
|
|
131
|
+
theme: { ...w(), ...B },
|
|
129
132
|
cursorBlink: !0,
|
|
130
133
|
convertEol: C,
|
|
131
134
|
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
|
|
132
135
|
fontSize: 14,
|
|
133
|
-
...
|
|
134
|
-
}), e = new L(), t.loadAddon(e), t.open(r), e.fit(),
|
|
136
|
+
...M
|
|
137
|
+
}), e = new L(), t.loadAddon(e), t.open(r), e.fit(), n.current = t, a.current = e, g ? t.onData(S) : s && t.onData(s), I?.(t), g && t.write(u);
|
|
135
138
|
};
|
|
136
|
-
return
|
|
137
|
-
!
|
|
138
|
-
}),
|
|
139
|
-
|
|
139
|
+
return o = new ResizeObserver((d) => {
|
|
140
|
+
!d[0] || h || (i ? e && e.fit() : v());
|
|
141
|
+
}), o.observe(r), requestAnimationFrame(v), () => {
|
|
142
|
+
h = !0, o?.disconnect(), t?.dispose(), n.current = null, a.current = null;
|
|
140
143
|
};
|
|
141
|
-
}, []),
|
|
142
|
-
|
|
143
|
-
}, [
|
|
144
|
+
}, []), k(() => {
|
|
145
|
+
n.current && (n.current.options.theme = { ...w(), ...y.theme });
|
|
146
|
+
}, [l]), /* @__PURE__ */ O(
|
|
144
147
|
"div",
|
|
145
148
|
{
|
|
146
|
-
ref:
|
|
147
|
-
className:
|
|
149
|
+
ref: m,
|
|
150
|
+
className: F,
|
|
148
151
|
style: { width: "100%", height: "100%", ...T },
|
|
149
|
-
"data-testid":
|
|
152
|
+
"data-testid": R
|
|
150
153
|
}
|
|
151
154
|
);
|
|
152
155
|
});
|