@deepnoid/ui 0.1.92 → 0.1.94
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/.turbo/turbo-build.log +133 -133
- package/dist/{chunk-Q3JMHIW5.mjs → chunk-IY4AY6JJ.mjs} +1 -1
- package/dist/{chunk-D6OJWEZM.mjs → chunk-SGOE2HGI.mjs} +1 -1
- package/dist/{chunk-ZFKQOPMK.mjs → chunk-UFAY3EIU.mjs} +57 -56
- package/dist/{chunk-V5OCV42N.mjs → chunk-Z4YJ274G.mjs} +7 -1
- package/dist/components/breadcrumb/breadcrumb.mjs +1 -1
- package/dist/components/breadcrumb/index.mjs +1 -1
- package/dist/components/button/button.js +7 -1
- package/dist/components/button/button.mjs +1 -1
- package/dist/components/button/index.js +7 -1
- package/dist/components/button/index.mjs +1 -1
- package/dist/components/fileUpload/fileUpload.js +7 -1
- package/dist/components/fileUpload/fileUpload.mjs +2 -2
- package/dist/components/fileUpload/index.js +7 -1
- package/dist/components/fileUpload/index.mjs +2 -2
- package/dist/components/modal/index.js +7 -1
- package/dist/components/modal/index.mjs +2 -2
- package/dist/components/modal/modal.js +7 -1
- package/dist/components/modal/modal.mjs +2 -2
- package/dist/components/table/index.js +57 -56
- package/dist/components/table/index.mjs +1 -1
- package/dist/components/table/table-body.d.mts +2 -1
- package/dist/components/table/table-body.d.ts +2 -1
- package/dist/components/table/table-body.js +57 -56
- package/dist/components/table/table-body.mjs +1 -1
- package/dist/components/table/table-head.d.mts +2 -2
- package/dist/components/table/table-head.d.ts +2 -2
- package/dist/components/table/table-head.js +57 -56
- package/dist/components/table/table-head.mjs +1 -1
- package/dist/components/table/table.d.mts +16 -0
- package/dist/components/table/table.d.ts +16 -0
- package/dist/components/table/table.js +57 -56
- package/dist/components/table/table.mjs +1 -1
- package/dist/index.js +64 -57
- package/dist/index.mjs +15 -15
- package/package.json +1 -1
|
@@ -695,15 +695,11 @@ var TableHead = ({
|
|
|
695
695
|
color,
|
|
696
696
|
size,
|
|
697
697
|
rowCheckbox = false,
|
|
698
|
-
|
|
698
|
+
hasCheckedRows,
|
|
699
699
|
isLoading = false,
|
|
700
700
|
classNames,
|
|
701
701
|
onCheckAll
|
|
702
702
|
}) => {
|
|
703
|
-
const handleClickCheckAll = (e) => {
|
|
704
|
-
e.preventDefault();
|
|
705
|
-
onCheckAll(!isCheckedAll);
|
|
706
|
-
};
|
|
707
703
|
const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
708
704
|
"th",
|
|
709
705
|
{
|
|
@@ -729,11 +725,11 @@ var TableHead = ({
|
|
|
729
725
|
const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
|
|
730
726
|
columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
|
|
731
727
|
rowCheckbox && renderTh(
|
|
732
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {
|
|
728
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
733
729
|
checkbox_default,
|
|
734
730
|
{
|
|
735
731
|
size,
|
|
736
|
-
checked:
|
|
732
|
+
checked: hasCheckedRows,
|
|
737
733
|
onChange: (e) => onCheckAll(e.target.checked)
|
|
738
734
|
}
|
|
739
735
|
) }),
|
|
@@ -757,6 +753,7 @@ var TableBody = ({
|
|
|
757
753
|
rowCheckbox = false,
|
|
758
754
|
checkedRows,
|
|
759
755
|
onCheckRow,
|
|
756
|
+
onRowClick,
|
|
760
757
|
isLoading = false,
|
|
761
758
|
emptyContent,
|
|
762
759
|
skeletonRow,
|
|
@@ -765,67 +762,54 @@ var TableBody = ({
|
|
|
765
762
|
}) => {
|
|
766
763
|
const renderTdSkeleton = (key, column) => {
|
|
767
764
|
const isCheckbox = key.includes("checkbox");
|
|
768
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
769
|
-
"td",
|
|
770
|
-
{
|
|
771
|
-
className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
|
|
772
|
-
style: isCheckbox ? {
|
|
773
|
-
width: "40px",
|
|
774
|
-
minWidth: "40px",
|
|
775
|
-
maxWidth: "40px",
|
|
776
|
-
flexShrink: 0,
|
|
777
|
-
flexGrow: 0,
|
|
778
|
-
boxSizing: "border-box"
|
|
779
|
-
} : column ? getCellStyle(column) : void 0,
|
|
780
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
|
|
781
|
-
},
|
|
782
|
-
key
|
|
783
|
-
);
|
|
765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
|
|
784
766
|
};
|
|
785
767
|
const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
786
768
|
"td",
|
|
787
769
|
{
|
|
788
770
|
className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
|
|
789
|
-
style: {
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
flexShrink: 0,
|
|
794
|
-
flexGrow: 0,
|
|
795
|
-
boxSizing: "border-box"
|
|
796
|
-
},
|
|
797
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
|
|
798
|
-
}
|
|
771
|
+
style: { width: "40px", minWidth: "40px", textAlign: "center" },
|
|
772
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
|
|
773
|
+
},
|
|
774
|
+
`checkbox-${rowId}`
|
|
799
775
|
);
|
|
800
776
|
const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
|
|
801
777
|
columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
|
|
802
778
|
rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
|
|
803
779
|
] }, `skeleton-${rowIndex}`);
|
|
804
780
|
const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
|
|
805
|
-
const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
781
|
+
const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
782
|
+
"tr",
|
|
783
|
+
{
|
|
784
|
+
className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
|
|
785
|
+
onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
|
|
786
|
+
children: [
|
|
787
|
+
columns.map((column, colIdx) => {
|
|
788
|
+
var _a;
|
|
789
|
+
const value = row[column.field];
|
|
790
|
+
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
|
|
791
|
+
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
793
|
+
"td",
|
|
794
|
+
{
|
|
795
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
|
|
796
|
+
style: getCellStyle(column),
|
|
797
|
+
children: content
|
|
798
|
+
},
|
|
799
|
+
`${row.id}-${column.field}-${colIdx}`
|
|
800
|
+
);
|
|
801
|
+
}),
|
|
802
|
+
rowCheckbox && renderCheckboxCell(row.id)
|
|
803
|
+
]
|
|
804
|
+
},
|
|
805
|
+
row.id
|
|
806
|
+
);
|
|
823
807
|
const renderRows = () => {
|
|
824
808
|
if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
|
|
825
809
|
if (!rows.length && emptyContent) return renderEmptyRow();
|
|
826
810
|
return rows.map((row, index) => renderDataRow(row, index));
|
|
827
811
|
};
|
|
828
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className:
|
|
812
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
|
|
829
813
|
};
|
|
830
814
|
var table_body_default = TableBody;
|
|
831
815
|
|
|
@@ -6172,7 +6156,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
|
|
|
6172
6156
|
color,
|
|
6173
6157
|
size,
|
|
6174
6158
|
skeletonRow,
|
|
6175
|
-
onCheckedRowsChange
|
|
6159
|
+
onCheckedRowsChange,
|
|
6160
|
+
onRowClick
|
|
6176
6161
|
} = { ...props, ...variantProps };
|
|
6177
6162
|
const { page = 1, perPage = 15 } = pagination || {};
|
|
6178
6163
|
const showPagination = pagination && totalData > 0 && !isLoading;
|
|
@@ -6216,8 +6201,18 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
|
|
|
6216
6201
|
return updated;
|
|
6217
6202
|
});
|
|
6218
6203
|
};
|
|
6204
|
+
const handleRowClick = (row, index, event) => {
|
|
6205
|
+
const target = event.target;
|
|
6206
|
+
if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
|
|
6207
|
+
return;
|
|
6208
|
+
}
|
|
6209
|
+
onRowClick == null ? void 0 : onRowClick(row, index, event);
|
|
6210
|
+
};
|
|
6219
6211
|
const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
|
|
6220
|
-
const slots = (0, import_react5.useMemo)(
|
|
6212
|
+
const slots = (0, import_react5.useMemo)(
|
|
6213
|
+
() => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
|
|
6214
|
+
[variantProps, onRowClick]
|
|
6215
|
+
);
|
|
6221
6216
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
|
|
6222
6217
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
6223
6218
|
"table",
|
|
@@ -6236,7 +6231,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
|
|
|
6236
6231
|
size,
|
|
6237
6232
|
color,
|
|
6238
6233
|
rowCheckbox,
|
|
6239
|
-
|
|
6234
|
+
hasCheckedRows: checkedRows.size > 0,
|
|
6240
6235
|
onCheckAll: handleAllRowCheck,
|
|
6241
6236
|
isLoading,
|
|
6242
6237
|
classNames,
|
|
@@ -6254,8 +6249,9 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
|
|
|
6254
6249
|
rowCheckbox,
|
|
6255
6250
|
checkedRows,
|
|
6256
6251
|
onCheckRow: handleRowCheck,
|
|
6257
|
-
|
|
6252
|
+
onRowClick: handleRowClick,
|
|
6258
6253
|
isLoading,
|
|
6254
|
+
emptyContent,
|
|
6259
6255
|
skeletonRow,
|
|
6260
6256
|
className: clsx(
|
|
6261
6257
|
"transition-all duration-150 ease-out",
|
|
@@ -6365,6 +6361,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
|
|
|
6365
6361
|
height: {
|
|
6366
6362
|
narrow: {},
|
|
6367
6363
|
wide: {}
|
|
6364
|
+
},
|
|
6365
|
+
rowClickable: {
|
|
6366
|
+
true: {
|
|
6367
|
+
tr: ["cursor-pointer"]
|
|
6368
|
+
}
|
|
6368
6369
|
}
|
|
6369
6370
|
},
|
|
6370
6371
|
compoundVariants: [
|
package/dist/index.js
CHANGED
|
@@ -5946,7 +5946,13 @@ var Button = (0, import_react6.forwardRef)((originalProps, ref) => {
|
|
|
5946
5946
|
var _a, _b, _c;
|
|
5947
5947
|
(_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
|
|
5948
5948
|
(_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
|
|
5949
|
-
}
|
|
5949
|
+
},
|
|
5950
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
5951
|
+
startContent && renderContent(startContent),
|
|
5952
|
+
childElement.props.children,
|
|
5953
|
+
endContent && renderContent(endContent),
|
|
5954
|
+
!disableRipple && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ripple_default, { ...getRippleProps() })
|
|
5955
|
+
] }) })
|
|
5950
5956
|
};
|
|
5951
5957
|
return (0, import_react6.cloneElement)(childElement, mergedProps);
|
|
5952
5958
|
}
|
|
@@ -8034,15 +8040,11 @@ var TableHead = ({
|
|
|
8034
8040
|
color,
|
|
8035
8041
|
size,
|
|
8036
8042
|
rowCheckbox = false,
|
|
8037
|
-
|
|
8043
|
+
hasCheckedRows,
|
|
8038
8044
|
isLoading = false,
|
|
8039
8045
|
classNames,
|
|
8040
8046
|
onCheckAll
|
|
8041
8047
|
}) => {
|
|
8042
|
-
const handleClickCheckAll = (e) => {
|
|
8043
|
-
e.preventDefault();
|
|
8044
|
-
onCheckAll(!isCheckedAll);
|
|
8045
|
-
};
|
|
8046
8048
|
const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8047
8049
|
"th",
|
|
8048
8050
|
{
|
|
@@ -8068,11 +8070,11 @@ var TableHead = ({
|
|
|
8068
8070
|
const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
|
|
8069
8071
|
columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
|
|
8070
8072
|
rowCheckbox && renderTh(
|
|
8071
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", {
|
|
8073
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8072
8074
|
checkbox_default,
|
|
8073
8075
|
{
|
|
8074
8076
|
size,
|
|
8075
|
-
checked:
|
|
8077
|
+
checked: hasCheckedRows,
|
|
8076
8078
|
onChange: (e) => onCheckAll(e.target.checked)
|
|
8077
8079
|
}
|
|
8078
8080
|
) }),
|
|
@@ -8096,6 +8098,7 @@ var TableBody = ({
|
|
|
8096
8098
|
rowCheckbox = false,
|
|
8097
8099
|
checkedRows,
|
|
8098
8100
|
onCheckRow,
|
|
8101
|
+
onRowClick,
|
|
8099
8102
|
isLoading = false,
|
|
8100
8103
|
emptyContent,
|
|
8101
8104
|
skeletonRow,
|
|
@@ -8104,67 +8107,54 @@ var TableBody = ({
|
|
|
8104
8107
|
}) => {
|
|
8105
8108
|
const renderTdSkeleton = (key, column) => {
|
|
8106
8109
|
const isCheckbox = key.includes("checkbox");
|
|
8107
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
8108
|
-
"td",
|
|
8109
|
-
{
|
|
8110
|
-
className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
|
|
8111
|
-
style: isCheckbox ? {
|
|
8112
|
-
width: "40px",
|
|
8113
|
-
minWidth: "40px",
|
|
8114
|
-
maxWidth: "40px",
|
|
8115
|
-
flexShrink: 0,
|
|
8116
|
-
flexGrow: 0,
|
|
8117
|
-
boxSizing: "border-box"
|
|
8118
|
-
} : column ? getCellStyle(column) : void 0,
|
|
8119
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
|
|
8120
|
-
},
|
|
8121
|
-
key
|
|
8122
|
-
);
|
|
8110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
|
|
8123
8111
|
};
|
|
8124
8112
|
const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
8125
8113
|
"td",
|
|
8126
8114
|
{
|
|
8127
8115
|
className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
|
|
8128
|
-
style: {
|
|
8129
|
-
|
|
8130
|
-
|
|
8131
|
-
|
|
8132
|
-
flexShrink: 0,
|
|
8133
|
-
flexGrow: 0,
|
|
8134
|
-
boxSizing: "border-box"
|
|
8135
|
-
},
|
|
8136
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
|
|
8137
|
-
}
|
|
8116
|
+
style: { width: "40px", minWidth: "40px", textAlign: "center" },
|
|
8117
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
|
|
8118
|
+
},
|
|
8119
|
+
`checkbox-${rowId}`
|
|
8138
8120
|
);
|
|
8139
8121
|
const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
|
|
8140
8122
|
columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
|
|
8141
8123
|
rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
|
|
8142
8124
|
] }, `skeleton-${rowIndex}`);
|
|
8143
8125
|
const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
|
|
8144
|
-
const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
8145
|
-
|
|
8146
|
-
|
|
8147
|
-
|
|
8148
|
-
|
|
8149
|
-
|
|
8150
|
-
|
|
8151
|
-
|
|
8152
|
-
|
|
8153
|
-
|
|
8154
|
-
|
|
8155
|
-
|
|
8156
|
-
|
|
8157
|
-
|
|
8158
|
-
|
|
8159
|
-
|
|
8160
|
-
|
|
8161
|
-
|
|
8126
|
+
const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
8127
|
+
"tr",
|
|
8128
|
+
{
|
|
8129
|
+
className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
|
|
8130
|
+
onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
|
|
8131
|
+
children: [
|
|
8132
|
+
columns.map((column, colIdx) => {
|
|
8133
|
+
var _a;
|
|
8134
|
+
const value = row[column.field];
|
|
8135
|
+
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
|
|
8136
|
+
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
8137
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
8138
|
+
"td",
|
|
8139
|
+
{
|
|
8140
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
|
|
8141
|
+
style: getCellStyle(column),
|
|
8142
|
+
children: content
|
|
8143
|
+
},
|
|
8144
|
+
`${row.id}-${column.field}-${colIdx}`
|
|
8145
|
+
);
|
|
8146
|
+
}),
|
|
8147
|
+
rowCheckbox && renderCheckboxCell(row.id)
|
|
8148
|
+
]
|
|
8149
|
+
},
|
|
8150
|
+
row.id
|
|
8151
|
+
);
|
|
8162
8152
|
const renderRows = () => {
|
|
8163
8153
|
if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, {});
|
|
8164
8154
|
if (!rows.length && emptyContent) return renderEmptyRow();
|
|
8165
8155
|
return rows.map((row, index) => renderDataRow(row, index));
|
|
8166
8156
|
};
|
|
8167
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className:
|
|
8157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
|
|
8168
8158
|
};
|
|
8169
8159
|
var table_body_default = TableBody;
|
|
8170
8160
|
|
|
@@ -8508,7 +8498,8 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8508
8498
|
color,
|
|
8509
8499
|
size,
|
|
8510
8500
|
skeletonRow,
|
|
8511
|
-
onCheckedRowsChange
|
|
8501
|
+
onCheckedRowsChange,
|
|
8502
|
+
onRowClick
|
|
8512
8503
|
} = { ...props, ...variantProps };
|
|
8513
8504
|
const { page = 1, perPage = 15 } = pagination || {};
|
|
8514
8505
|
const showPagination = pagination && totalData > 0 && !isLoading;
|
|
@@ -8552,8 +8543,18 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8552
8543
|
return updated;
|
|
8553
8544
|
});
|
|
8554
8545
|
};
|
|
8546
|
+
const handleRowClick = (row, index, event) => {
|
|
8547
|
+
const target = event.target;
|
|
8548
|
+
if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
|
|
8549
|
+
return;
|
|
8550
|
+
}
|
|
8551
|
+
onRowClick == null ? void 0 : onRowClick(row, index, event);
|
|
8552
|
+
};
|
|
8555
8553
|
const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
|
|
8556
|
-
const slots = (0, import_react17.useMemo)(
|
|
8554
|
+
const slots = (0, import_react17.useMemo)(
|
|
8555
|
+
() => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
|
|
8556
|
+
[variantProps, onRowClick]
|
|
8557
|
+
);
|
|
8557
8558
|
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
|
|
8558
8559
|
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
8559
8560
|
"table",
|
|
@@ -8572,7 +8573,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8572
8573
|
size,
|
|
8573
8574
|
color,
|
|
8574
8575
|
rowCheckbox,
|
|
8575
|
-
|
|
8576
|
+
hasCheckedRows: checkedRows.size > 0,
|
|
8576
8577
|
onCheckAll: handleAllRowCheck,
|
|
8577
8578
|
isLoading,
|
|
8578
8579
|
classNames,
|
|
@@ -8590,8 +8591,9 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8590
8591
|
rowCheckbox,
|
|
8591
8592
|
checkedRows,
|
|
8592
8593
|
onCheckRow: handleRowCheck,
|
|
8593
|
-
|
|
8594
|
+
onRowClick: handleRowClick,
|
|
8594
8595
|
isLoading,
|
|
8596
|
+
emptyContent,
|
|
8595
8597
|
skeletonRow,
|
|
8596
8598
|
className: clsx(
|
|
8597
8599
|
"transition-all duration-150 ease-out",
|
|
@@ -8701,6 +8703,11 @@ var tableStyle = (0, import_tailwind_variants18.tv)({
|
|
|
8701
8703
|
height: {
|
|
8702
8704
|
narrow: {},
|
|
8703
8705
|
wide: {}
|
|
8706
|
+
},
|
|
8707
|
+
rowClickable: {
|
|
8708
|
+
true: {
|
|
8709
|
+
tr: ["cursor-pointer"]
|
|
8710
|
+
}
|
|
8704
8711
|
}
|
|
8705
8712
|
},
|
|
8706
8713
|
compoundVariants: [
|
package/dist/index.mjs
CHANGED
|
@@ -3,15 +3,10 @@ import "./chunk-MBLZYQCN.mjs";
|
|
|
3
3
|
import {
|
|
4
4
|
tree_default
|
|
5
5
|
} from "./chunk-Y5QV7T6D.mjs";
|
|
6
|
-
import "./chunk-
|
|
7
|
-
import {
|
|
8
|
-
ToastProvider,
|
|
9
|
-
useToast
|
|
10
|
-
} from "./chunk-D3HZG3CH.mjs";
|
|
11
|
-
import "./chunk-ZOTHPHXA.mjs";
|
|
6
|
+
import "./chunk-RRAZM5D3.mjs";
|
|
12
7
|
import {
|
|
13
|
-
|
|
14
|
-
} from "./chunk-
|
|
8
|
+
textarea_default
|
|
9
|
+
} from "./chunk-6Q2BXHJL.mjs";
|
|
15
10
|
import "./chunk-HIE2YRGA.mjs";
|
|
16
11
|
import {
|
|
17
12
|
tooltip_default
|
|
@@ -21,15 +16,20 @@ import "./chunk-WSIADHVC.mjs";
|
|
|
21
16
|
import "./chunk-DX3KXNP6.mjs";
|
|
22
17
|
import {
|
|
23
18
|
table_default
|
|
24
|
-
} from "./chunk-
|
|
19
|
+
} from "./chunk-UFAY3EIU.mjs";
|
|
25
20
|
import "./chunk-3MY6LO7N.mjs";
|
|
26
21
|
import {
|
|
27
22
|
tabs_default
|
|
28
23
|
} from "./chunk-4LP3QDAE.mjs";
|
|
29
|
-
import "./chunk-
|
|
24
|
+
import "./chunk-LUWGOKLG.mjs";
|
|
30
25
|
import {
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
ToastProvider,
|
|
27
|
+
useToast
|
|
28
|
+
} from "./chunk-D3HZG3CH.mjs";
|
|
29
|
+
import "./chunk-ZOTHPHXA.mjs";
|
|
30
|
+
import {
|
|
31
|
+
toast_default
|
|
32
|
+
} from "./chunk-4BJPJ54Q.mjs";
|
|
33
33
|
import "./chunk-QCEKPS7U.mjs";
|
|
34
34
|
import {
|
|
35
35
|
select_default
|
|
@@ -60,7 +60,7 @@ import {
|
|
|
60
60
|
import "./chunk-DJOG6Z35.mjs";
|
|
61
61
|
import {
|
|
62
62
|
modal_default
|
|
63
|
-
} from "./chunk-
|
|
63
|
+
} from "./chunk-SGOE2HGI.mjs";
|
|
64
64
|
import "./chunk-7B7LRG5J.mjs";
|
|
65
65
|
import {
|
|
66
66
|
pagination_default
|
|
@@ -70,7 +70,7 @@ import "./chunk-32GA3YW4.mjs";
|
|
|
70
70
|
import "./chunk-RLXOHILK.mjs";
|
|
71
71
|
import {
|
|
72
72
|
fileUpload_default
|
|
73
|
-
} from "./chunk-
|
|
73
|
+
} from "./chunk-IY4AY6JJ.mjs";
|
|
74
74
|
import "./chunk-2GCSFWHD.mjs";
|
|
75
75
|
import {
|
|
76
76
|
input_default
|
|
@@ -128,7 +128,7 @@ import {
|
|
|
128
128
|
} from "./chunk-ITWKPTSD.mjs";
|
|
129
129
|
import {
|
|
130
130
|
button_default
|
|
131
|
-
} from "./chunk-
|
|
131
|
+
} from "./chunk-Z4YJ274G.mjs";
|
|
132
132
|
import {
|
|
133
133
|
icon_button_default
|
|
134
134
|
} from "./chunk-P6CRHHI3.mjs";
|