@deepnoid/ui 0.0.95 → 0.0.97
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/{chunk-JWFWFBQM.mjs → chunk-PNFR2J4Q.mjs} +62 -27
- package/dist/{chunk-VG4644BG.mjs → chunk-PO3ADNA5.mjs} +6 -6
- package/dist/{chunk-PR277HT5.mjs → chunk-QDDEQY63.mjs} +15 -8
- package/dist/components/accordion/accordion.test.mjs +3 -3
- package/dist/components/button/button-group.test.mjs +3 -3
- package/dist/components/button/button.test.mjs +3 -3
- package/dist/components/checkbox/checkbox.test.mjs +3 -3
- package/dist/components/input/input.test.mjs +1 -1
- package/dist/components/modal/modal.test.mjs +1 -1
- package/dist/components/select/select.test.mjs +3 -3
- package/dist/components/table/index.js +80 -38
- package/dist/components/table/index.mjs +3 -3
- package/dist/components/table/table-body.d.mts +7 -4
- package/dist/components/table/table-body.d.ts +7 -4
- package/dist/components/table/table-body.js +15 -8
- package/dist/components/table/table-body.mjs +1 -1
- package/dist/components/table/table-head.d.mts +4 -4
- package/dist/components/table/table-head.d.ts +4 -4
- package/dist/components/table/table-head.js +6 -6
- package/dist/components/table/table-head.mjs +1 -1
- package/dist/components/table/table.d.mts +51 -7
- package/dist/components/table/table.d.ts +51 -7
- package/dist/components/table/table.js +80 -38
- package/dist/components/table/table.mjs +3 -3
- package/dist/components/table/table.test.js +80 -38
- package/dist/components/table/table.test.mjs +3 -3
- package/dist/components/tabs/tabs.test.mjs +3 -3
- package/dist/components/textarea/textarea.test.mjs +1 -1
- package/dist/components/tooltip/tooltip.test.mjs +3 -3
- package/dist/index.js +80 -38
- package/dist/index.mjs +32 -32
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
table_body_default
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-QDDEQY63.mjs";
|
|
5
5
|
import {
|
|
6
6
|
table_head_default
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-PO3ADNA5.mjs";
|
|
8
8
|
import {
|
|
9
9
|
clsx
|
|
10
10
|
} from "./chunk-27Y6K5NK.mjs";
|
|
@@ -13,13 +13,20 @@ import {
|
|
|
13
13
|
} from "./chunk-E3G5QXSH.mjs";
|
|
14
14
|
|
|
15
15
|
// src/components/table/table.tsx
|
|
16
|
-
import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react";
|
|
16
|
+
import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
|
|
17
17
|
import { tv } from "tailwind-variants";
|
|
18
18
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
19
19
|
var Table = forwardRef((originalProps, ref) => {
|
|
20
20
|
const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
|
|
21
21
|
const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
|
|
22
|
+
const [checkedRows, setCheckedRows] = useState(/* @__PURE__ */ new Set());
|
|
22
23
|
const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
setCheckedRows(/* @__PURE__ */ new Set());
|
|
26
|
+
}, [rows]);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
setSelectedRows(/* @__PURE__ */ new Set());
|
|
29
|
+
}, [rows]);
|
|
23
30
|
const slots = useMemo(() => table({ ...variantProps }), [...Object.values(variantProps)]);
|
|
24
31
|
const getBaseProps = useCallback(
|
|
25
32
|
(props2) => ({
|
|
@@ -35,21 +42,41 @@ var Table = forwardRef((originalProps, ref) => {
|
|
|
35
42
|
}),
|
|
36
43
|
[classNames == null ? void 0 : classNames.table, slots]
|
|
37
44
|
);
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
|
|
45
|
+
const handleCheckAll = (isChecked) => {
|
|
46
|
+
const newCheckedRows = isChecked ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
|
|
47
|
+
setCheckedRows(newCheckedRows);
|
|
48
|
+
};
|
|
49
|
+
const handleCheckRow = (index) => {
|
|
50
|
+
const newCheckedRows = new Set(checkedRows);
|
|
51
|
+
if (newCheckedRows.has(index)) {
|
|
52
|
+
newCheckedRows.delete(index);
|
|
53
|
+
} else {
|
|
54
|
+
newCheckedRows.add(index);
|
|
55
|
+
}
|
|
56
|
+
setCheckedRows(newCheckedRows);
|
|
41
57
|
};
|
|
42
58
|
const handleSelectRow = (index) => {
|
|
43
59
|
const newSelectedRows = new Set(selectedRows);
|
|
44
|
-
if (
|
|
45
|
-
newSelectedRows.
|
|
60
|
+
if (originalProps.isMultiSelect) {
|
|
61
|
+
if (newSelectedRows.has(index)) {
|
|
62
|
+
newSelectedRows.delete(index);
|
|
63
|
+
} else {
|
|
64
|
+
newSelectedRows.add(index);
|
|
65
|
+
}
|
|
46
66
|
} else {
|
|
47
|
-
newSelectedRows.
|
|
67
|
+
if (newSelectedRows.has(index)) {
|
|
68
|
+
newSelectedRows.delete(index);
|
|
69
|
+
} else {
|
|
70
|
+
newSelectedRows.clear();
|
|
71
|
+
newSelectedRows.add(index);
|
|
72
|
+
}
|
|
48
73
|
}
|
|
49
74
|
setSelectedRows(newSelectedRows);
|
|
50
75
|
};
|
|
51
76
|
useImperativeHandle(ref, () => ({
|
|
77
|
+
checkedRows,
|
|
52
78
|
selectedRows,
|
|
79
|
+
setCheckedRows,
|
|
53
80
|
setSelectedRows
|
|
54
81
|
}));
|
|
55
82
|
return /* @__PURE__ */ jsx("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ jsxs("table", { ...getTableProps(tableComponentsProps), children: [
|
|
@@ -61,10 +88,10 @@ var Table = forwardRef((originalProps, ref) => {
|
|
|
61
88
|
columns,
|
|
62
89
|
size: originalProps.size,
|
|
63
90
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
64
|
-
|
|
91
|
+
isChecked: originalProps.isChecked,
|
|
65
92
|
isExpanded: originalProps.isExpanded,
|
|
66
|
-
|
|
67
|
-
|
|
93
|
+
onCheckAll: handleCheckAll,
|
|
94
|
+
isCheckedAll: checkedRows.size === rows.length
|
|
68
95
|
}
|
|
69
96
|
),
|
|
70
97
|
/* @__PURE__ */ jsx(
|
|
@@ -76,13 +103,16 @@ var Table = forwardRef((originalProps, ref) => {
|
|
|
76
103
|
size: originalProps.size,
|
|
77
104
|
color: originalProps.color === "neutral" ? "primary" : originalProps.color,
|
|
78
105
|
isSelected: originalProps.isSelected,
|
|
79
|
-
|
|
106
|
+
isChecked: originalProps.isChecked,
|
|
107
|
+
isCheckedRow: originalProps.isCheckedRow,
|
|
80
108
|
isExpanded: originalProps.isExpanded,
|
|
81
109
|
isLoading,
|
|
82
110
|
classNames,
|
|
83
111
|
emptyContent,
|
|
84
112
|
selectedRows,
|
|
85
|
-
|
|
113
|
+
checkedRows,
|
|
114
|
+
onCheckedRow: handleCheckRow,
|
|
115
|
+
onSelectedRow: handleSelectRow,
|
|
86
116
|
onRowAction
|
|
87
117
|
}
|
|
88
118
|
)
|
|
@@ -93,13 +123,13 @@ var table_default = Table;
|
|
|
93
123
|
var table = tv({
|
|
94
124
|
slots: {
|
|
95
125
|
base: "flex flex-col relative gap-4",
|
|
96
|
-
table: "
|
|
126
|
+
table: "w-full h-auto",
|
|
97
127
|
thead: "[&>tr]:first:rounded-lg",
|
|
98
|
-
tbody: "",
|
|
99
|
-
tr: ["group", "outline-none"],
|
|
128
|
+
tbody: "w-full",
|
|
129
|
+
tr: ["group", "outline-none", "w-full"],
|
|
100
130
|
th: [
|
|
101
131
|
"text-foreground",
|
|
102
|
-
"text-center",
|
|
132
|
+
"!text-center",
|
|
103
133
|
"align-middle",
|
|
104
134
|
"whitespace-nowrap",
|
|
105
135
|
"font-normal",
|
|
@@ -118,7 +148,6 @@ var table = tv({
|
|
|
118
148
|
"[&>*]:z-1",
|
|
119
149
|
"[&>*]:relative",
|
|
120
150
|
"transition duration-200",
|
|
121
|
-
"data-[selected=true]:before:opacity-100",
|
|
122
151
|
"group-data-[disabled=true]:text-default-300"
|
|
123
152
|
],
|
|
124
153
|
tfoot: "",
|
|
@@ -184,7 +213,13 @@ var table = tv({
|
|
|
184
213
|
isSelected: {
|
|
185
214
|
true: {}
|
|
186
215
|
},
|
|
187
|
-
|
|
216
|
+
isMultiSelect: {
|
|
217
|
+
true: {}
|
|
218
|
+
},
|
|
219
|
+
isChecked: {
|
|
220
|
+
true: {}
|
|
221
|
+
},
|
|
222
|
+
isCheckedRow: {
|
|
188
223
|
true: {
|
|
189
224
|
tr: "cursor-pointer"
|
|
190
225
|
}
|
|
@@ -216,7 +251,7 @@ var table = tv({
|
|
|
216
251
|
color: "primary",
|
|
217
252
|
variant: "solid",
|
|
218
253
|
size: "md",
|
|
219
|
-
|
|
254
|
+
isChecked: false,
|
|
220
255
|
isExpanded: false,
|
|
221
256
|
isCompact: false,
|
|
222
257
|
hideHeader: false,
|
|
@@ -229,7 +264,7 @@ var table = tv({
|
|
|
229
264
|
color: "primary",
|
|
230
265
|
class: {
|
|
231
266
|
thead: "[&>tr]:bg-primary-light",
|
|
232
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
267
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
233
268
|
}
|
|
234
269
|
},
|
|
235
270
|
{
|
|
@@ -237,7 +272,7 @@ var table = tv({
|
|
|
237
272
|
color: "secondary",
|
|
238
273
|
class: {
|
|
239
274
|
thead: "[&>tr]:bg-secondary-light",
|
|
240
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
275
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
241
276
|
}
|
|
242
277
|
},
|
|
243
278
|
{
|
|
@@ -245,7 +280,7 @@ var table = tv({
|
|
|
245
280
|
color: "neutral",
|
|
246
281
|
class: {
|
|
247
282
|
thead: "[&>tr]:bg-trans-light",
|
|
248
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
283
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
249
284
|
}
|
|
250
285
|
},
|
|
251
286
|
{
|
|
@@ -253,7 +288,7 @@ var table = tv({
|
|
|
253
288
|
color: "primary",
|
|
254
289
|
class: {
|
|
255
290
|
thead: "border-primary-light",
|
|
256
|
-
tr: "data-[expanded=true]:bg-primary-soft"
|
|
291
|
+
tr: ["data-[expanded=true]:bg-primary-soft", "data-[selected=true]:bg-primary-soft"]
|
|
257
292
|
}
|
|
258
293
|
},
|
|
259
294
|
{
|
|
@@ -261,7 +296,7 @@ var table = tv({
|
|
|
261
296
|
color: "secondary",
|
|
262
297
|
class: {
|
|
263
298
|
thead: "border-secondary-light",
|
|
264
|
-
tr: "data-[expanded=true]:bg-secondary-soft"
|
|
299
|
+
tr: ["data-[expanded=true]:bg-secondary-soft", "data-[selected=true]:bg-secondary-soft"]
|
|
265
300
|
}
|
|
266
301
|
},
|
|
267
302
|
{
|
|
@@ -269,7 +304,7 @@ var table = tv({
|
|
|
269
304
|
color: "neutral",
|
|
270
305
|
class: {
|
|
271
306
|
thead: "border-trans-light",
|
|
272
|
-
tr: "data-[expanded=true]:bg-neutral-soft"
|
|
307
|
+
tr: ["data-[expanded=true]:bg-neutral-soft", "data-[selected=true]:bg-neutral-soft"]
|
|
273
308
|
}
|
|
274
309
|
},
|
|
275
310
|
{
|
|
@@ -16,10 +16,10 @@ var TableHead = ({
|
|
|
16
16
|
size,
|
|
17
17
|
color,
|
|
18
18
|
isExpanded,
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
isChecked,
|
|
20
|
+
isCheckedAll,
|
|
21
21
|
classNames,
|
|
22
|
-
|
|
22
|
+
onCheckAll
|
|
23
23
|
}) => {
|
|
24
24
|
const getTheadProps = useCallback(
|
|
25
25
|
() => ({
|
|
@@ -39,12 +39,12 @@ var TableHead = ({
|
|
|
39
39
|
}),
|
|
40
40
|
[classNames == null ? void 0 : classNames.th, slots]
|
|
41
41
|
);
|
|
42
|
-
const
|
|
42
|
+
const handleClickCheckAll = (e) => {
|
|
43
43
|
e.preventDefault();
|
|
44
|
-
|
|
44
|
+
onCheckAll(!isCheckedAll);
|
|
45
45
|
};
|
|
46
46
|
return /* @__PURE__ */ jsx("thead", { ...getTheadProps(), children: /* @__PURE__ */ jsxs("tr", { ...getTrProps(), children: [
|
|
47
|
-
|
|
47
|
+
isChecked && /* @__PURE__ */ jsx("th", { className: "w-[40px]", onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx(checkbox_default, { size, color, checked: isCheckedAll, classNames: { wrapper: "bg-background" } }) }),
|
|
48
48
|
isExpanded && /* @__PURE__ */ jsx("th", { className: "w-[40px]" }),
|
|
49
49
|
columns.map((column, index) => /* @__PURE__ */ createElement("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
|
|
50
50
|
] }) });
|
|
@@ -22,13 +22,16 @@ var TableBody = ({
|
|
|
22
22
|
columns,
|
|
23
23
|
isExpanded,
|
|
24
24
|
isSelected,
|
|
25
|
-
|
|
25
|
+
isChecked,
|
|
26
|
+
isCheckedRow,
|
|
26
27
|
selectedRows,
|
|
28
|
+
checkedRows,
|
|
27
29
|
emptyContent,
|
|
28
|
-
|
|
30
|
+
onCheckedRow,
|
|
31
|
+
onSelectedRow,
|
|
29
32
|
onRowAction
|
|
30
33
|
}) => {
|
|
31
|
-
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (
|
|
34
|
+
const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isChecked ? 1 : 0);
|
|
32
35
|
const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
|
|
33
36
|
useEffect(() => {
|
|
34
37
|
setExpandedRows(/* @__PURE__ */ new Set());
|
|
@@ -41,11 +44,14 @@ var TableBody = ({
|
|
|
41
44
|
);
|
|
42
45
|
const getTrProps = useCallback(
|
|
43
46
|
(index) => ({
|
|
44
|
-
className: clsx(
|
|
47
|
+
className: clsx(
|
|
48
|
+
slots.tr({ class: [classNames == null ? void 0 : classNames.tr, (isSelected || isCheckedRow || isExpanded) && "cursor-pointer"] })
|
|
49
|
+
),
|
|
45
50
|
"data-odd": index % 2 !== 0,
|
|
46
|
-
"data-expanded": expandedRows.has(index)
|
|
51
|
+
"data-expanded": expandedRows.has(index),
|
|
52
|
+
"data-selected": selectedRows == null ? void 0 : selectedRows.has(index)
|
|
47
53
|
}),
|
|
48
|
-
[classNames == null ? void 0 : classNames.tr, expandedRows, slots]
|
|
54
|
+
[classNames == null ? void 0 : classNames.tr, expandedRows, isCheckedRow, isExpanded, isSelected, selectedRows, slots]
|
|
49
55
|
);
|
|
50
56
|
const getExpandedContentProps = useCallback(
|
|
51
57
|
() => ({
|
|
@@ -96,7 +102,8 @@ var TableBody = ({
|
|
|
96
102
|
e.stopPropagation();
|
|
97
103
|
e.preventDefault();
|
|
98
104
|
if (isExpanded) onChangeExpandedRow(index);
|
|
99
|
-
if (isSelected
|
|
105
|
+
if (isSelected) onSelectedRow(index);
|
|
106
|
+
if (isChecked && isCheckedRow) onCheckedRow(index);
|
|
100
107
|
const row = rows[index];
|
|
101
108
|
if (row) {
|
|
102
109
|
(_a = row.onRowAction) == null ? void 0 : _a.call(row, e, row);
|
|
@@ -106,7 +113,7 @@ var TableBody = ({
|
|
|
106
113
|
const keys = Object.keys(row);
|
|
107
114
|
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
|
|
108
115
|
/* @__PURE__ */ jsxs("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
|
|
109
|
-
|
|
116
|
+
isChecked && /* @__PURE__ */ jsx("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onCheckedRow(rowIndex), children: /* @__PURE__ */ jsx(checkbox_default, { color, size, checked: checkedRows.has(rowIndex) }) }),
|
|
110
117
|
isExpanded && /* @__PURE__ */ jsx("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ jsx(
|
|
111
118
|
Icon_default,
|
|
112
119
|
{
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
accordion_default
|
|
4
|
-
} from "../../chunk-SWR7E3NU.mjs";
|
|
5
2
|
import {
|
|
6
3
|
render
|
|
7
4
|
} from "../../chunk-FNPWLOGV.mjs";
|
|
5
|
+
import {
|
|
6
|
+
accordion_default
|
|
7
|
+
} from "../../chunk-SWR7E3NU.mjs";
|
|
8
8
|
import "../../chunk-E3G5QXSH.mjs";
|
|
9
9
|
import "../../chunk-J725QONZ.mjs";
|
|
10
10
|
import "../../chunk-IZ6II3QA.mjs";
|
|
@@ -5,12 +5,12 @@ import {
|
|
|
5
5
|
import {
|
|
6
6
|
button_group_default
|
|
7
7
|
} from "../../chunk-NGQ3MK2J.mjs";
|
|
8
|
-
import {
|
|
9
|
-
render
|
|
10
|
-
} from "../../chunk-FNPWLOGV.mjs";
|
|
11
8
|
import {
|
|
12
9
|
button_default
|
|
13
10
|
} from "../../chunk-UR64ZUAU.mjs";
|
|
11
|
+
import {
|
|
12
|
+
render
|
|
13
|
+
} from "../../chunk-FNPWLOGV.mjs";
|
|
14
14
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
15
15
|
import "../../chunk-LCI6RPWE.mjs";
|
|
16
16
|
import "../../chunk-IOCRFIQF.mjs";
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../chunk-H7BLXC5M.mjs";
|
|
3
|
+
import {
|
|
4
|
+
button_default
|
|
5
|
+
} from "../../chunk-UR64ZUAU.mjs";
|
|
3
6
|
import {
|
|
4
7
|
act,
|
|
5
8
|
render
|
|
6
9
|
} from "../../chunk-FNPWLOGV.mjs";
|
|
7
|
-
import {
|
|
8
|
-
button_default
|
|
9
|
-
} from "../../chunk-UR64ZUAU.mjs";
|
|
10
10
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
11
11
|
import "../../chunk-LCI6RPWE.mjs";
|
|
12
12
|
import "../../chunk-IOCRFIQF.mjs";
|
|
@@ -4,11 +4,11 @@ import {
|
|
|
4
4
|
} from "../../chunk-PRLGHYFO.mjs";
|
|
5
5
|
import "../../chunk-VUYUQGLF.mjs";
|
|
6
6
|
import "../../chunk-NGQ3MK2J.mjs";
|
|
7
|
+
import "../../chunk-UR64ZUAU.mjs";
|
|
7
8
|
import {
|
|
8
9
|
fireEvent,
|
|
9
10
|
render
|
|
10
11
|
} from "../../chunk-FNPWLOGV.mjs";
|
|
11
|
-
import "../../chunk-UR64ZUAU.mjs";
|
|
12
12
|
import "../../chunk-ZYIIXWVY.mjs";
|
|
13
13
|
import "../../chunk-LCI6RPWE.mjs";
|
|
14
14
|
import "../../chunk-IOCRFIQF.mjs";
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import {
|
|
3
|
+
userEvent
|
|
4
|
+
} from "../../chunk-S4DTK5GI.mjs";
|
|
2
5
|
import {
|
|
3
6
|
select_default
|
|
4
7
|
} from "../../chunk-2BCJZILI.mjs";
|
|
5
8
|
import "../../chunk-S3QS5B7F.mjs";
|
|
6
9
|
import "../../chunk-RZZWHI6O.mjs";
|
|
7
|
-
import {
|
|
8
|
-
userEvent
|
|
9
|
-
} from "../../chunk-S4DTK5GI.mjs";
|
|
10
10
|
import {
|
|
11
11
|
act,
|
|
12
12
|
render
|