@easyops-cn/a2ui-react 0.0.8 → 0.0.9
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.
|
@@ -1,98 +1,106 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { memo as
|
|
3
|
-
import { CalendarIcon as
|
|
4
|
-
import { parse as
|
|
5
|
-
import { useFormBinding as
|
|
6
|
-
import { cn as
|
|
7
|
-
import { Button as
|
|
8
|
-
import { Calendar as
|
|
9
|
-
import { Popover as
|
|
10
|
-
import { Input as
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsxs as d, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { memo as B, useMemo as y, useCallback as v } from "react";
|
|
3
|
+
import { CalendarIcon as P } from "lucide-react";
|
|
4
|
+
import { parse as a, isValid as L, format as m } from "date-fns";
|
|
5
|
+
import { useDataBinding as S, useFormBinding as k } from "../../hooks/useDataBinding.js";
|
|
6
|
+
import { cn as h } from "../../../lib/utils.js";
|
|
7
|
+
import { Button as A } from "../../../components/ui/button.js";
|
|
8
|
+
import { Calendar as U } from "../../../components/ui/calendar.js";
|
|
9
|
+
import { Popover as $, PopoverTrigger as q, PopoverContent as z } from "../../../components/ui/popover.js";
|
|
10
|
+
import { Input as x } from "../../../components/ui/input.js";
|
|
11
|
+
import { Label as w } from "../../../components/ui/label.js";
|
|
12
|
+
const E = B(function({
|
|
13
|
+
surfaceId: H,
|
|
14
|
+
componentId: N,
|
|
15
|
+
label: C,
|
|
16
|
+
value: I,
|
|
15
17
|
enableDate: o = !0,
|
|
16
18
|
enableTime: t = !1
|
|
17
19
|
}) {
|
|
18
|
-
const [n, e] =
|
|
20
|
+
const l = S(H, C, ""), [n, e] = k(H, I, ""), r = y(() => {
|
|
19
21
|
if (!n) return;
|
|
20
22
|
let s;
|
|
21
|
-
return o && t ? s =
|
|
22
|
-
}, [n, o, t]),
|
|
23
|
+
return o && t ? s = a(n, "yyyy-MM-dd'T'HH:mm", /* @__PURE__ */ new Date()) : o ? s = a(n, "yyyy-MM-dd", /* @__PURE__ */ new Date()) : t && (s = a(n, "HH:mm", /* @__PURE__ */ new Date())), s && L(s) ? s : void 0;
|
|
24
|
+
}, [n, o, t]), F = y(() => !r || !t ? "" : m(r, "HH:mm"), [r, t]), V = v(
|
|
23
25
|
(s) => {
|
|
24
26
|
if (!s) {
|
|
25
27
|
e("");
|
|
26
28
|
return;
|
|
27
29
|
}
|
|
28
30
|
if (o && t) {
|
|
29
|
-
const u = r ? m(r, "HH:mm") : "00:00", [
|
|
30
|
-
s.setHours(
|
|
31
|
+
const u = r ? m(r, "HH:mm") : "00:00", [f, p] = u.split(":").map(Number);
|
|
32
|
+
s.setHours(f, p), e(m(s, "yyyy-MM-dd'T'HH:mm"));
|
|
31
33
|
} else
|
|
32
34
|
e(m(s, "yyyy-MM-dd"));
|
|
33
35
|
},
|
|
34
36
|
[e, o, t, r]
|
|
35
|
-
),
|
|
37
|
+
), M = v(
|
|
36
38
|
(s) => {
|
|
37
39
|
const u = s.target.value;
|
|
38
40
|
if (!u) return;
|
|
39
|
-
const [
|
|
41
|
+
const [f, p] = u.split(":").map(Number);
|
|
40
42
|
if (o && t) {
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
+
const g = r || /* @__PURE__ */ new Date();
|
|
44
|
+
g.setHours(f, p), e(m(g, "yyyy-MM-dd'T'HH:mm"));
|
|
43
45
|
} else t && !o && e(u);
|
|
44
46
|
},
|
|
45
47
|
[e, o, t, r]
|
|
46
|
-
),
|
|
47
|
-
return t && !o ? /* @__PURE__ */
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
type: "time",
|
|
52
|
-
value: n,
|
|
53
|
-
onChange: a,
|
|
54
|
-
className: "w-full"
|
|
55
|
-
}
|
|
56
|
-
) }) : /* @__PURE__ */ i("div", { className: y("flex flex-col gap-2"), children: /* @__PURE__ */ f(k, { children: [
|
|
57
|
-
/* @__PURE__ */ i(A, { asChild: !0, children: /* @__PURE__ */ f(
|
|
58
|
-
F,
|
|
48
|
+
), j = y(() => r ? o && t ? m(r, "yyyy-MM-dd HH:mm") : o ? m(r, "yyyy-MM-dd") : m(r, "HH:mm") : o && t ? "选择日期和时间" : o ? "选择日期" : "选择时间", [r, o, t]), c = `datetime-${N}`;
|
|
49
|
+
return t && !o ? /* @__PURE__ */ d("div", { className: h("flex flex-col gap-2"), children: [
|
|
50
|
+
l && /* @__PURE__ */ i(w, { htmlFor: c, children: l }),
|
|
51
|
+
/* @__PURE__ */ i(
|
|
52
|
+
x,
|
|
59
53
|
{
|
|
60
|
-
id:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
),
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ i(j, { className: "mr-2 h-4 w-4" }),
|
|
68
|
-
I
|
|
69
|
-
]
|
|
54
|
+
id: c,
|
|
55
|
+
type: "time",
|
|
56
|
+
value: n,
|
|
57
|
+
onChange: M,
|
|
58
|
+
className: "w-full"
|
|
70
59
|
}
|
|
71
|
-
)
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
selected: r,
|
|
78
|
-
onSelect: C,
|
|
79
|
-
captionLayout: "dropdown",
|
|
80
|
-
initialFocus: !0
|
|
81
|
-
}
|
|
82
|
-
),
|
|
83
|
-
t && /* @__PURE__ */ i("div", { className: "border-t p-3", children: /* @__PURE__ */ i(
|
|
84
|
-
g,
|
|
60
|
+
)
|
|
61
|
+
] }) : /* @__PURE__ */ d("div", { className: h("flex flex-col gap-2"), children: [
|
|
62
|
+
l && /* @__PURE__ */ i(w, { htmlFor: c, children: l }),
|
|
63
|
+
/* @__PURE__ */ d($, { children: [
|
|
64
|
+
/* @__PURE__ */ i(q, { asChild: !0, children: /* @__PURE__ */ d(
|
|
65
|
+
A,
|
|
85
66
|
{
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
67
|
+
id: c,
|
|
68
|
+
variant: "outline",
|
|
69
|
+
className: h(
|
|
70
|
+
"w-full justify-start text-left font-normal",
|
|
71
|
+
!r && "text-muted-foreground"
|
|
72
|
+
),
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ i(P, { className: "mr-2 h-4 w-4" }),
|
|
75
|
+
j
|
|
76
|
+
]
|
|
90
77
|
}
|
|
91
|
-
) })
|
|
78
|
+
) }),
|
|
79
|
+
/* @__PURE__ */ d(z, { className: "w-auto p-0", align: "start", children: [
|
|
80
|
+
/* @__PURE__ */ i(
|
|
81
|
+
U,
|
|
82
|
+
{
|
|
83
|
+
mode: "single",
|
|
84
|
+
selected: r,
|
|
85
|
+
onSelect: V,
|
|
86
|
+
captionLayout: "dropdown",
|
|
87
|
+
initialFocus: !0
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
t && /* @__PURE__ */ i("div", { className: "border-t p-3", children: /* @__PURE__ */ i(
|
|
91
|
+
x,
|
|
92
|
+
{
|
|
93
|
+
type: "time",
|
|
94
|
+
value: F,
|
|
95
|
+
onChange: M,
|
|
96
|
+
className: "w-full"
|
|
97
|
+
}
|
|
98
|
+
) })
|
|
99
|
+
] })
|
|
92
100
|
] })
|
|
93
|
-
] })
|
|
101
|
+
] });
|
|
94
102
|
});
|
|
95
|
-
|
|
103
|
+
E.displayName = "A2UI.DateTimeInput";
|
|
96
104
|
export {
|
|
97
|
-
|
|
105
|
+
E as DateTimeInputComponent
|
|
98
106
|
};
|
|
@@ -1,82 +1,89 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { memo as
|
|
3
|
-
import {
|
|
4
|
-
import { Select as
|
|
5
|
-
import { Checkbox as
|
|
6
|
-
import { Label as
|
|
7
|
-
import { cn as
|
|
8
|
-
const
|
|
9
|
-
surfaceId:
|
|
10
|
-
componentId:
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsxs as u, jsx as r, Fragment as S } from "react/jsx-runtime";
|
|
2
|
+
import { memo as T, useCallback as b } from "react";
|
|
3
|
+
import { useDataBinding as y, useFormBinding as $ } from "../../hooks/useDataBinding.js";
|
|
4
|
+
import { Select as j, SelectTrigger as B, SelectValue as D, SelectContent as L, SelectItem as A } from "../../../components/ui/select.js";
|
|
5
|
+
import { Checkbox as O } from "../../../components/ui/checkbox.js";
|
|
6
|
+
import { Label as f } from "../../../components/ui/label.js";
|
|
7
|
+
import { cn as g } from "../../../lib/utils.js";
|
|
8
|
+
const R = T(function({
|
|
9
|
+
surfaceId: t,
|
|
10
|
+
componentId: d,
|
|
11
|
+
label: x,
|
|
12
|
+
selections: k,
|
|
13
|
+
options: o,
|
|
13
14
|
maxAllowedSelections: n
|
|
14
15
|
}) {
|
|
15
|
-
const [e, i] =
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const s = y(t, x, ""), [e, i] = $(
|
|
17
|
+
t,
|
|
18
|
+
k,
|
|
18
19
|
n === 1 ? "" : []
|
|
19
|
-
),
|
|
20
|
+
), M = b(
|
|
20
21
|
(l) => {
|
|
21
22
|
i(l);
|
|
22
23
|
},
|
|
23
24
|
[i]
|
|
24
|
-
),
|
|
25
|
+
), N = b(
|
|
25
26
|
(l, c) => {
|
|
26
|
-
const
|
|
27
|
+
const a = Array.isArray(e) ? e : e ? [e] : [];
|
|
27
28
|
if (c) {
|
|
28
|
-
if (n !== void 0 &&
|
|
29
|
+
if (n !== void 0 && a.length >= n)
|
|
29
30
|
return;
|
|
30
|
-
i([...
|
|
31
|
+
i([...a, l]);
|
|
31
32
|
} else
|
|
32
|
-
i(
|
|
33
|
+
i(a.filter((h) => h !== l));
|
|
33
34
|
},
|
|
34
35
|
[e, i, n]
|
|
35
|
-
), m = `multiplechoice-${
|
|
36
|
-
if (!
|
|
36
|
+
), m = `multiplechoice-${d}`;
|
|
37
|
+
if (!o || o.length === 0)
|
|
37
38
|
return null;
|
|
38
39
|
if (n === 1) {
|
|
39
40
|
const l = Array.isArray(e) ? e[0] || "" : e;
|
|
40
|
-
return /* @__PURE__ */
|
|
41
|
-
/* @__PURE__ */ r(
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
41
|
+
return /* @__PURE__ */ u("div", { className: g("flex flex-col gap-2"), children: [
|
|
42
|
+
s && /* @__PURE__ */ r(f, { htmlFor: m, children: s }),
|
|
43
|
+
/* @__PURE__ */ u(j, { value: l, onValueChange: M, children: [
|
|
44
|
+
/* @__PURE__ */ r(B, { id: m, children: /* @__PURE__ */ r(D, { placeholder: "Select an option" }) }),
|
|
45
|
+
/* @__PURE__ */ r(L, { children: o.map((c) => /* @__PURE__ */ r(A, { value: c.value, children: /* @__PURE__ */ r(v, { surfaceId: t, label: c.label }) }, c.value)) })
|
|
46
|
+
] })
|
|
47
|
+
] });
|
|
44
48
|
}
|
|
45
|
-
const
|
|
46
|
-
return /* @__PURE__ */
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
49
|
+
const C = Array.isArray(e) ? e : e ? [e] : [], V = n !== void 0 && C.length >= n;
|
|
50
|
+
return /* @__PURE__ */ u("div", { className: g("flex flex-col gap-2"), children: [
|
|
51
|
+
s && /* @__PURE__ */ r(f, { children: s }),
|
|
52
|
+
o.map((l) => {
|
|
53
|
+
const c = C.includes(l.value), a = !c && V, h = `${m}-${l.value}`;
|
|
54
|
+
return /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
|
|
55
|
+
/* @__PURE__ */ r(
|
|
56
|
+
O,
|
|
57
|
+
{
|
|
58
|
+
id: h,
|
|
59
|
+
checked: c,
|
|
60
|
+
disabled: a,
|
|
61
|
+
onCheckedChange: (F) => N(l.value, F === !0)
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ r(
|
|
65
|
+
f,
|
|
66
|
+
{
|
|
67
|
+
htmlFor: h,
|
|
68
|
+
className: g(
|
|
69
|
+
"cursor-pointer",
|
|
70
|
+
a && "cursor-not-allowed opacity-50"
|
|
71
|
+
),
|
|
72
|
+
children: /* @__PURE__ */ r(v, { surfaceId: t, label: l.label })
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
] }, l.value);
|
|
76
|
+
})
|
|
77
|
+
] });
|
|
71
78
|
});
|
|
72
|
-
function
|
|
73
|
-
surfaceId:
|
|
74
|
-
label:
|
|
79
|
+
function v({
|
|
80
|
+
surfaceId: p,
|
|
81
|
+
label: t
|
|
75
82
|
}) {
|
|
76
|
-
const
|
|
77
|
-
return /* @__PURE__ */ r(
|
|
83
|
+
const d = y(p, t, "");
|
|
84
|
+
return /* @__PURE__ */ r(S, { children: d });
|
|
78
85
|
}
|
|
79
|
-
|
|
86
|
+
R.displayName = "A2UI.MultipleChoice";
|
|
80
87
|
export {
|
|
81
|
-
|
|
88
|
+
R as MultipleChoiceComponent
|
|
82
89
|
};
|
|
@@ -1,43 +1,48 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import { useFormBinding as
|
|
4
|
-
import { Slider as
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as h, useCallback as x } from "react";
|
|
3
|
+
import { useDataBinding as u, useFormBinding as g } from "../../hooks/useDataBinding.js";
|
|
4
|
+
import { Slider as C } from "../../../components/ui/slider.js";
|
|
5
|
+
import { Label as S } from "../../../components/ui/label.js";
|
|
6
|
+
import { cn as b } from "../../../lib/utils.js";
|
|
7
|
+
const N = h(function({
|
|
8
|
+
surfaceId: o,
|
|
9
|
+
componentId: a,
|
|
10
|
+
label: c,
|
|
11
|
+
value: p,
|
|
9
12
|
minValue: n = 0,
|
|
10
13
|
maxValue: r = 100
|
|
11
14
|
}) {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
+
const t = u(o, c, ""), [i, l] = g(
|
|
16
|
+
o,
|
|
17
|
+
p,
|
|
15
18
|
n
|
|
16
|
-
),
|
|
17
|
-
(
|
|
18
|
-
|
|
19
|
+
), f = x(
|
|
20
|
+
(s) => {
|
|
21
|
+
s.length > 0 && l(s[0]);
|
|
19
22
|
},
|
|
20
|
-
[
|
|
21
|
-
)
|
|
22
|
-
return /* @__PURE__ */
|
|
23
|
+
[l]
|
|
24
|
+
), m = `slider-${a}`;
|
|
25
|
+
return /* @__PURE__ */ d("div", { className: b("flex flex-col gap-2 py-2"), children: [
|
|
26
|
+
t && /* @__PURE__ */ e(S, { htmlFor: m, children: t }),
|
|
23
27
|
/* @__PURE__ */ e(
|
|
24
|
-
|
|
28
|
+
C,
|
|
25
29
|
{
|
|
26
|
-
|
|
27
|
-
|
|
30
|
+
id: m,
|
|
31
|
+
value: [i],
|
|
32
|
+
onValueChange: f,
|
|
28
33
|
min: n,
|
|
29
34
|
max: r,
|
|
30
35
|
step: 1
|
|
31
36
|
}
|
|
32
37
|
),
|
|
33
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ d("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
|
|
34
39
|
/* @__PURE__ */ e("span", { children: n }),
|
|
35
|
-
/* @__PURE__ */ e("span", { className: "font-medium text-foreground", children:
|
|
40
|
+
/* @__PURE__ */ e("span", { className: "font-medium text-foreground", children: i }),
|
|
36
41
|
/* @__PURE__ */ e("span", { children: r })
|
|
37
42
|
] })
|
|
38
43
|
] });
|
|
39
44
|
});
|
|
40
|
-
|
|
45
|
+
N.displayName = "A2UI.Slider";
|
|
41
46
|
export {
|
|
42
|
-
|
|
47
|
+
N as SliderComponent
|
|
43
48
|
};
|
|
@@ -284,6 +284,7 @@ export interface TextFieldComponentProps extends BaseComponentProps {
|
|
|
284
284
|
* DateTimeInput component properties.
|
|
285
285
|
*/
|
|
286
286
|
export interface DateTimeInputComponentProps extends BaseComponentProps {
|
|
287
|
+
label?: ValueSource;
|
|
287
288
|
value?: ValueSource;
|
|
288
289
|
enableDate?: boolean;
|
|
289
290
|
enableTime?: boolean;
|
|
@@ -299,6 +300,7 @@ export interface MultipleChoiceOption {
|
|
|
299
300
|
* MultipleChoice component properties.
|
|
300
301
|
*/
|
|
301
302
|
export interface MultipleChoiceComponentProps extends BaseComponentProps {
|
|
303
|
+
label?: ValueSource;
|
|
302
304
|
selections?: ValueSource;
|
|
303
305
|
options?: MultipleChoiceOption[];
|
|
304
306
|
maxAllowedSelections?: number;
|
|
@@ -307,6 +309,7 @@ export interface MultipleChoiceComponentProps extends BaseComponentProps {
|
|
|
307
309
|
* Slider component properties.
|
|
308
310
|
*/
|
|
309
311
|
export interface SliderComponentProps extends BaseComponentProps {
|
|
312
|
+
label?: ValueSource;
|
|
310
313
|
value?: ValueSource;
|
|
311
314
|
minValue?: number;
|
|
312
315
|
maxValue?: number;
|