@cfx-dev/ui-components 2.1.13 → 2.1.15
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/assets/Modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._root_lmrwf_1{flex-shrink:0;position:relative;display:flex;flex-direction:column;max-width:calc((var(--width) - var(--offset-safezone) * 2) * 1);min-width:calc(var(--quant) * 50);max-height:calc((var(--height) - var(--offset-safezone) * 2) * 1);padding:calc(var(--quant) * 6);background-color:var(--color-modal-background);border-radius:var(--border-radius-small);overflow:hidden;animation-name:_modal-appearance_lmrwf_1;animation-duration:.2s}@media (min-width: 768px){._root_lmrwf_1{min-width:calc(var(--quant) * 80)}}@media (min-width: 1280px){._root_lmrwf_1{min-width:calc(var(--quant) * 100)}}@keyframes _modal-appearance_lmrwf_1{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}._root_lmrwf_1 ._close_lmrwf_36{position:absolute;top:calc(var(--quant) * 1.5);right:calc(var(--quant) * 2);z-index:1}._root_lmrwf_1 ._header_lmrwf_42{display:flex;flex-direction:column;gap:calc(var(--quant) * 2.5);padding-bottom:calc(var(--quant) * 4)}._root_lmrwf_1 ._header_lmrwf_42 a{border-bottom:1px solid rgba(var(--color-secondary),1);font-weight:700}._root_lmrwf_1 ._footer_lmrwf_52{padding-top:calc(var(--quant) * 6)}
|
package/dist/assets/Table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tableIcon_1waor_1._iconButton_1waor_1{width:calc(var(--quant) * 6);height:calc(var(--quant) * 6);display:inline-flex;align-items:center;justify-content:center;color:rgba(var(--color-secondary),1)}._tableIcon_1waor_1._iconButton_1waor_1{transition:background-color .25s ease,color .25s ease,opacity .25s ease,outline-offset 0s,outline 0s}._tableIcon_1waor_1._iconButton_1waor_1:hover{color:rgba(var(--color-primary),1);background-color:var(--color-button-linked-hover-background)}._tableIcon_1waor_1._iconButton_1waor_1:not(:disabled):active{transform:none;opacity:.8}._root_1waor_21 table{width:100%;border-collapse:collapse;border-radius:var(--border-radius-small);overflow:hidden}._root_1waor_21 th,._root_1waor_21 td{text-align:left;padding:0 calc(var(--quant) * .75);color:#fff;height:calc(var(--quant) * 8.75);box-sizing:border-box}._root_1waor_21 td{padding:calc(var(--quant) * 1.5) calc(var(--quant) * .75)}._root_1waor_21 ._radio_1waor_37{padding:calc(var(--quant) * .25)}._root_1waor_21 ._radio_1waor_37 ._radioContent_1waor_40{width:100%;height:100%;display:flex;align-items:center;justify-content:center}._root_1waor_21 ._pointer_1waor_47{cursor:pointer}._root_1waor_21 ._selectedRow_1waor_50{background-color:rgba(var(--color-secondary),.4);box-shadow:0 -1px rgba(var(--color-primary),1) inset}._root_1waor_21 th{position:sticky;top:0;z-index:0;background-color:rgba(var(--color-bg-light),1)}._root_1waor_21 th ._headerContent_1waor_60{display:flex;align-items:center;flex-direction:row}._root_1waor_21 th ._headerContent_1waor_60 ._iconButton_1waor_1{margin-left:var(--offset-medium)}._root_1waor_21 tr{box-shadow:0 -1px rgba(var(--color-bg-light),1) inset;box-sizing:border-box}._root_1waor_21 tr:hover{background-color:rgba(var(--color-secondary),.2)}._root_1waor_21 tr:hover:not(._selectedRow_1waor_50){box-shadow:none}
|
|
@@ -4,46 +4,46 @@ import "../Button/Button.js";
|
|
|
4
4
|
import { ButtonBar as k } from "../Button/ButtonBar.js";
|
|
5
5
|
import "../Button/LinkButton.js";
|
|
6
6
|
import y from "../IconButton/IconButton.js";
|
|
7
|
-
import { Overlay as
|
|
8
|
-
import { Text as
|
|
9
|
-
import { clsx as
|
|
7
|
+
import { Overlay as c } from "../Overlay/Overlay.js";
|
|
8
|
+
import { Text as d } from "../Text/Text.js";
|
|
9
|
+
import { clsx as s } from "../../utils/clsx.js";
|
|
10
10
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
11
11
|
import { useKeyboardClose as w } from "../../utils/hooks/useKeyboardClose.js";
|
|
12
12
|
import "../../index-2hJuj4UN.js";
|
|
13
|
-
import '../../assets/Modal.css';const B = "
|
|
13
|
+
import '../../assets/Modal.css';const B = "_root_lmrwf_1", v = "_close_lmrwf_36", x = "_header_lmrwf_42", g = "_footer_lmrwf_52", r = {
|
|
14
14
|
root: B,
|
|
15
|
-
"modal-appearance": "_modal-
|
|
15
|
+
"modal-appearance": "_modal-appearance_lmrwf_1",
|
|
16
16
|
close: v,
|
|
17
17
|
header: x,
|
|
18
18
|
footer: g
|
|
19
19
|
};
|
|
20
|
-
function
|
|
20
|
+
function f(t) {
|
|
21
21
|
const {
|
|
22
|
-
onClose:
|
|
23
|
-
children:
|
|
24
|
-
className:
|
|
25
|
-
overlayClassName:
|
|
26
|
-
backdropClassName:
|
|
27
|
-
contentClassName:
|
|
22
|
+
onClose: e,
|
|
23
|
+
children: l,
|
|
24
|
+
className: o,
|
|
25
|
+
overlayClassName: p,
|
|
26
|
+
backdropClassName: _,
|
|
27
|
+
contentClassName: b,
|
|
28
28
|
ariaDescribedby: h,
|
|
29
29
|
ariaLabelledby: u,
|
|
30
30
|
disableBackdropClose: n = !1,
|
|
31
31
|
disableFocusLock: C = !1
|
|
32
|
-
} =
|
|
33
|
-
n || !
|
|
34
|
-
}, [
|
|
35
|
-
return w(
|
|
32
|
+
} = t, m = N.useCallback(() => {
|
|
33
|
+
n || !e || e();
|
|
34
|
+
}, [e, n]);
|
|
35
|
+
return w(m), /* @__PURE__ */ i(c, { className: s(r.overlay, p), children: [
|
|
36
36
|
/* @__PURE__ */ a(
|
|
37
|
-
|
|
37
|
+
c.Backdrop,
|
|
38
38
|
{
|
|
39
|
-
onClick:
|
|
40
|
-
className:
|
|
39
|
+
onClick: m,
|
|
40
|
+
className: s(r.backdrop, _)
|
|
41
41
|
}
|
|
42
42
|
),
|
|
43
43
|
/* @__PURE__ */ a(
|
|
44
|
-
|
|
44
|
+
c.Content,
|
|
45
45
|
{
|
|
46
|
-
className:
|
|
46
|
+
className: b,
|
|
47
47
|
disableFocusLock: C,
|
|
48
48
|
children: /* @__PURE__ */ i(
|
|
49
49
|
"div",
|
|
@@ -51,10 +51,10 @@ function p(c) {
|
|
|
51
51
|
role: "dialog",
|
|
52
52
|
"aria-describedby": h,
|
|
53
53
|
"aria-labelledby": u,
|
|
54
|
-
className:
|
|
54
|
+
className: s(r.root, o),
|
|
55
55
|
children: [
|
|
56
|
-
!!
|
|
57
|
-
|
|
56
|
+
!!e && /* @__PURE__ */ a(y, { areaSize: "large", className: r.close, name: "Close", onClick: e }),
|
|
57
|
+
l
|
|
58
58
|
]
|
|
59
59
|
}
|
|
60
60
|
)
|
|
@@ -62,37 +62,37 @@ function p(c) {
|
|
|
62
62
|
)
|
|
63
63
|
] });
|
|
64
64
|
}
|
|
65
|
-
|
|
65
|
+
f.Header = function(e) {
|
|
66
66
|
const {
|
|
67
|
-
title:
|
|
68
|
-
description:
|
|
69
|
-
} =
|
|
67
|
+
title: l,
|
|
68
|
+
description: o
|
|
69
|
+
} = e;
|
|
70
70
|
return /* @__PURE__ */ i("div", { className: r.header, children: [
|
|
71
71
|
/* @__PURE__ */ a(
|
|
72
|
-
|
|
72
|
+
d,
|
|
73
73
|
{
|
|
74
74
|
weight: "bold",
|
|
75
75
|
size: "large",
|
|
76
|
-
children:
|
|
76
|
+
children: l
|
|
77
77
|
}
|
|
78
78
|
),
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
o && /* @__PURE__ */ a(
|
|
80
|
+
d,
|
|
81
81
|
{
|
|
82
82
|
size: "small",
|
|
83
83
|
color: "secondary",
|
|
84
|
-
children:
|
|
84
|
+
children: o
|
|
85
85
|
}
|
|
86
86
|
)
|
|
87
87
|
] });
|
|
88
88
|
};
|
|
89
|
-
|
|
89
|
+
f.Footer = function(e) {
|
|
90
90
|
const {
|
|
91
|
-
className:
|
|
92
|
-
...
|
|
93
|
-
} =
|
|
94
|
-
return /* @__PURE__ */ a(k, { ...
|
|
91
|
+
className: l,
|
|
92
|
+
...o
|
|
93
|
+
} = e;
|
|
94
|
+
return /* @__PURE__ */ a(k, { ...o, className: s(r.footer, l) });
|
|
95
95
|
};
|
|
96
96
|
export {
|
|
97
|
-
|
|
97
|
+
f as Modal
|
|
98
98
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx as t, jsxs as C } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { Text as
|
|
2
|
+
import a, { useState as p } from "react";
|
|
3
|
+
import y from "../Checkbox/Checkbox.js";
|
|
4
|
+
import I from "../IconButton/IconButton.js";
|
|
5
|
+
import { Text as T } from "../Text/Text.js";
|
|
6
6
|
import { clsx as k } from "../../utils/clsx.js";
|
|
7
|
-
import '../../assets/Table.css';const j = "
|
|
7
|
+
import '../../assets/Table.css';const $ = "_tableIcon_1waor_1", j = "_iconButton_1waor_1", z = "_root_1waor_21", A = "_radio_1waor_37", E = "_radioContent_1waor_40", O = "_pointer_1waor_47", S = "_selectedRow_1waor_50", F = "_headerContent_1waor_60", c = {
|
|
8
|
+
tableIcon: $,
|
|
8
9
|
iconButton: j,
|
|
9
10
|
root: z,
|
|
10
11
|
radio: A,
|
|
@@ -17,26 +18,26 @@ function H(r) {
|
|
|
17
18
|
const {
|
|
18
19
|
className: e,
|
|
19
20
|
color: o = "inherit"
|
|
20
|
-
} = r, n = k(
|
|
21
|
-
return /* @__PURE__ */ t(
|
|
21
|
+
} = r, n = k(c.tableIcon, c.iconButton, e);
|
|
22
|
+
return /* @__PURE__ */ t(I, { ...r, className: n, color: o });
|
|
22
23
|
}
|
|
23
|
-
function
|
|
24
|
+
function V(r) {
|
|
24
25
|
const {
|
|
25
26
|
item: e,
|
|
26
27
|
onSortClick: o
|
|
27
|
-
} = r, n =
|
|
28
|
+
} = r, n = a.useCallback(() => {
|
|
28
29
|
o && o(e.sortKey || e.text);
|
|
29
|
-
}, [e.sortKey, e.text, o]),
|
|
30
|
-
[
|
|
31
|
-
[
|
|
30
|
+
}, [e.sortKey, e.text, o]), b = k(c.headerContent, {
|
|
31
|
+
[c.sortable]: e.sortable,
|
|
32
|
+
[c.empty]: !e.text
|
|
32
33
|
});
|
|
33
34
|
return /* @__PURE__ */ t(
|
|
34
35
|
"th",
|
|
35
36
|
{
|
|
36
|
-
className: e.sortable ?
|
|
37
|
+
className: e.sortable ? c.pointer : void 0,
|
|
37
38
|
onClick: e.sortable ? n : void 0,
|
|
38
|
-
children: /* @__PURE__ */ C("div", { className:
|
|
39
|
-
/* @__PURE__ */ t(
|
|
39
|
+
children: /* @__PURE__ */ C("div", { className: b, children: [
|
|
40
|
+
/* @__PURE__ */ t(T, { color: "secondary", weight: "bold", uppercase: !0, size: "xxsmall", children: e.text }),
|
|
40
41
|
!!e.sortable && /* @__PURE__ */ t(
|
|
41
42
|
H,
|
|
42
43
|
{
|
|
@@ -48,103 +49,103 @@ function I(r) {
|
|
|
48
49
|
}
|
|
49
50
|
);
|
|
50
51
|
}
|
|
51
|
-
function
|
|
52
|
+
function q(r) {
|
|
52
53
|
const {
|
|
53
54
|
index: e,
|
|
54
55
|
includeRadio: o = !1,
|
|
55
56
|
selectedRow: n,
|
|
56
|
-
item:
|
|
57
|
+
item: b,
|
|
57
58
|
dataContainer: h,
|
|
58
59
|
onSelectChange: i
|
|
59
|
-
} = r,
|
|
60
|
+
} = r, u = a.useCallback((l) => {
|
|
60
61
|
i(
|
|
61
|
-
|
|
62
|
+
l ? e : null
|
|
62
63
|
);
|
|
63
|
-
}, [i, e]),
|
|
64
|
+
}, [i, e]), _ = a.useCallback(() => {
|
|
64
65
|
i(e);
|
|
65
|
-
}, [i, e]),
|
|
66
|
-
[
|
|
67
|
-
[
|
|
66
|
+
}, [i, e]), f = k({
|
|
67
|
+
[c.selectedRow]: n === e,
|
|
68
|
+
[c.pointer]: o
|
|
68
69
|
});
|
|
69
70
|
return /* @__PURE__ */ C(
|
|
70
71
|
"tr",
|
|
71
72
|
{
|
|
72
|
-
className:
|
|
73
|
-
onClick: o ?
|
|
73
|
+
className: f,
|
|
74
|
+
onClick: o ? _ : void 0,
|
|
74
75
|
children: [
|
|
75
|
-
o && /* @__PURE__ */ t("td", { className:
|
|
76
|
-
|
|
76
|
+
o && /* @__PURE__ */ t("td", { className: c.radio, children: /* @__PURE__ */ t("div", { className: c.radioContent, children: /* @__PURE__ */ t(
|
|
77
|
+
y,
|
|
77
78
|
{
|
|
78
79
|
size: "small",
|
|
79
|
-
onCheckedChange:
|
|
80
|
+
onCheckedChange: u,
|
|
80
81
|
"aria-label": `${e}`,
|
|
81
82
|
checked: n === e
|
|
82
83
|
}
|
|
83
84
|
) }) }),
|
|
84
|
-
|
|
85
|
+
b.map((l, w) => {
|
|
85
86
|
let m;
|
|
86
|
-
return
|
|
87
|
+
return a.isValidElement(l) ? m = l : h ? m = a.createElement(h, { item: l }) : m = String(l), /* @__PURE__ */ t("td", { children: m }, `item-${w}`);
|
|
87
88
|
})
|
|
88
89
|
]
|
|
89
90
|
},
|
|
90
91
|
`row-${e}`
|
|
91
92
|
);
|
|
92
93
|
}
|
|
93
|
-
function
|
|
94
|
+
function P({
|
|
94
95
|
headers: r = [],
|
|
95
96
|
data: e = [],
|
|
96
97
|
includeRadio: o = !1,
|
|
97
98
|
onSelectChange: n,
|
|
98
|
-
dataContainer:
|
|
99
|
+
dataContainer: b,
|
|
99
100
|
selectedRow: h = null,
|
|
100
101
|
sortBy: i,
|
|
101
|
-
sortOrder:
|
|
102
|
-
onSortChange:
|
|
102
|
+
sortOrder: u = "asc",
|
|
103
|
+
onSortChange: _
|
|
103
104
|
}) {
|
|
104
|
-
const [
|
|
105
|
-
const
|
|
106
|
-
m(
|
|
107
|
-
}, [
|
|
108
|
-
(
|
|
109
|
-
const d =
|
|
110
|
-
|
|
105
|
+
const [f, l] = p(h), [w, m] = p(i), [x, N] = p(u), B = a.useCallback((s) => {
|
|
106
|
+
const R = w === s && x === "asc" ? "desc" : "asc";
|
|
107
|
+
m(s), N(R), _ == null || _(s, R);
|
|
108
|
+
}, [_, w, x]), v = a.useCallback(
|
|
109
|
+
(s) => {
|
|
110
|
+
const d = s === f ? null : s;
|
|
111
|
+
l(d), n == null || n(d);
|
|
111
112
|
},
|
|
112
|
-
[n,
|
|
113
|
+
[n, f]
|
|
113
114
|
);
|
|
114
|
-
return
|
|
115
|
-
|
|
116
|
-
}, [h]),
|
|
115
|
+
return a.useEffect(() => {
|
|
116
|
+
l(h);
|
|
117
|
+
}, [h]), a.useEffect(() => {
|
|
117
118
|
m(i);
|
|
118
|
-
}, [i]),
|
|
119
|
-
|
|
120
|
-
}, [
|
|
119
|
+
}, [i]), a.useEffect(() => {
|
|
120
|
+
N(u);
|
|
121
|
+
}, [u]), /* @__PURE__ */ t("div", { className: c.root, children: /* @__PURE__ */ C("table", { children: [
|
|
121
122
|
/* @__PURE__ */ t("thead", { children: /* @__PURE__ */ C("tr", { children: [
|
|
122
123
|
o && /* @__PURE__ */ t("th", { "aria-label": "Select Row" }),
|
|
123
|
-
r.map((
|
|
124
|
-
|
|
124
|
+
r.map((s, d) => /* @__PURE__ */ t(
|
|
125
|
+
V,
|
|
125
126
|
{
|
|
126
|
-
item:
|
|
127
|
-
onSortClick:
|
|
127
|
+
item: s,
|
|
128
|
+
onSortClick: B
|
|
128
129
|
},
|
|
129
130
|
`header-${d}`
|
|
130
131
|
))
|
|
131
132
|
] }) }),
|
|
132
|
-
/* @__PURE__ */ t("tbody", { children: e.map((
|
|
133
|
-
|
|
133
|
+
/* @__PURE__ */ t("tbody", { children: e.map((s, d) => /* @__PURE__ */ t(
|
|
134
|
+
q,
|
|
134
135
|
{
|
|
135
136
|
index: d,
|
|
136
|
-
item:
|
|
137
|
+
item: s,
|
|
137
138
|
includeRadio: o,
|
|
138
|
-
selectedRow:
|
|
139
|
-
onSelectChange:
|
|
140
|
-
dataContainer:
|
|
139
|
+
selectedRow: f,
|
|
140
|
+
onSelectChange: v,
|
|
141
|
+
dataContainer: b
|
|
141
142
|
},
|
|
142
143
|
`row-${d}`
|
|
143
144
|
)) })
|
|
144
145
|
] }) });
|
|
145
146
|
}
|
|
146
147
|
export {
|
|
147
|
-
|
|
148
|
-
|
|
148
|
+
P as Table,
|
|
149
|
+
V as TableHeaderItem,
|
|
149
150
|
H as TableIconButton
|
|
150
151
|
};
|