@deepnoid/ui 0.1.202 → 0.1.204
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 +166 -166
- package/dist/{chunk-2EUKWA4W.mjs → chunk-AUGYJPCS.mjs} +89 -47
- package/dist/{chunk-KYWCJIXI.mjs → chunk-W3V4SZV5.mjs} +24 -68
- package/dist/components/list/index.mjs +3 -3
- package/dist/components/picker/datePicker.d.mts +2 -0
- package/dist/components/picker/datePicker.d.ts +2 -0
- package/dist/components/picker/datePicker.js +90 -48
- package/dist/components/picker/datePicker.mjs +1 -1
- package/dist/components/picker/index.js +90 -48
- package/dist/components/picker/index.mjs +6 -6
- package/dist/components/table/index.js +19 -63
- package/dist/components/table/index.mjs +4 -4
- package/dist/components/table/table-body.js +19 -63
- package/dist/components/table/table-body.mjs +2 -2
- package/dist/components/table/table-head.d.mts +1 -1
- package/dist/components/table/table-head.d.ts +1 -1
- package/dist/components/table/table-head.js +19 -63
- package/dist/components/table/table-head.mjs +2 -2
- package/dist/components/table/table.js +19 -63
- package/dist/components/table/table.mjs +2 -2
- package/dist/components/toast/index.mjs +2 -2
- package/dist/components/toast/use-toast.mjs +2 -2
- package/dist/index.js +110 -112
- package/dist/index.mjs +44 -44
- package/package.json +1 -1
- package/dist/{chunk-SSGCTWWW.mjs → chunk-L3A3IEKZ.mjs} +3 -3
|
@@ -6716,6 +6716,8 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6716
6716
|
confirmTitle,
|
|
6717
6717
|
range = false,
|
|
6718
6718
|
dualCalendar = false,
|
|
6719
|
+
disabledDates,
|
|
6720
|
+
enabledDates,
|
|
6719
6721
|
...inputProps
|
|
6720
6722
|
} = { ...props, ...variantProps };
|
|
6721
6723
|
const [selectedDate, setSelectedDate] = (0, import_react7.useState)(range ? "" : typeof value === "string" ? value || "" : "");
|
|
@@ -6837,29 +6839,18 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6837
6839
|
for (let i = 0; i < dates.length; i += 7) weeks.push(dates.slice(i, i + 7));
|
|
6838
6840
|
return weeks;
|
|
6839
6841
|
}, []);
|
|
6840
|
-
const
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
}
|
|
6846
|
-
|
|
6847
|
-
|
|
6848
|
-
const newLeftDate = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
|
|
6849
|
-
setLeftCurrentDate(newLeftDate);
|
|
6850
|
-
if (dualCalendar) {
|
|
6851
|
-
setRightCurrentDate(new Date(newLeftDate.getFullYear(), newLeftDate.getMonth() + 1));
|
|
6852
|
-
}
|
|
6853
|
-
};
|
|
6854
|
-
const handleRightNextMonth = () => {
|
|
6855
|
-
if (!dualCalendar) return;
|
|
6856
|
-
const newRightDate = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
|
|
6857
|
-
setRightCurrentDate(newRightDate);
|
|
6858
|
-
setLeftCurrentDate(new Date(newRightDate.getFullYear(), newRightDate.getMonth() - 1));
|
|
6859
|
-
};
|
|
6842
|
+
const isDateDisabled = (0, import_react7.useCallback)(
|
|
6843
|
+
(date) => {
|
|
6844
|
+
if (enabledDates) return !enabledDates(date);
|
|
6845
|
+
if (disabledDates) return disabledDates(date);
|
|
6846
|
+
return false;
|
|
6847
|
+
},
|
|
6848
|
+
[disabledDates, enabledDates]
|
|
6849
|
+
);
|
|
6860
6850
|
const handleDateSelect = (date, isCurrentMonth, currentDate) => {
|
|
6861
6851
|
if (!isCurrentMonth) return;
|
|
6862
6852
|
const selected = new Date(currentDate.getFullYear(), currentDate.getMonth(), date);
|
|
6853
|
+
if (isDateDisabled(selected)) return;
|
|
6863
6854
|
const formatted = formatDateToString(selected);
|
|
6864
6855
|
if (range) {
|
|
6865
6856
|
if (rangeSelection === "start") {
|
|
@@ -6870,7 +6861,10 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6870
6861
|
if (selected >= startDate) {
|
|
6871
6862
|
setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
|
|
6872
6863
|
} else {
|
|
6873
|
-
setTempSelectedRange({
|
|
6864
|
+
setTempSelectedRange({
|
|
6865
|
+
startDate: formatted,
|
|
6866
|
+
endDate: tempSelectedRange.startDate
|
|
6867
|
+
});
|
|
6874
6868
|
}
|
|
6875
6869
|
}
|
|
6876
6870
|
} else {
|
|
@@ -6879,6 +6873,7 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6879
6873
|
};
|
|
6880
6874
|
const handleSetToday = () => {
|
|
6881
6875
|
const today = /* @__PURE__ */ new Date();
|
|
6876
|
+
if (isDateDisabled(today)) return;
|
|
6882
6877
|
const formatted = formatDateToString(today);
|
|
6883
6878
|
if (range) {
|
|
6884
6879
|
if (rangeSelection === "start") {
|
|
@@ -6889,7 +6884,10 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6889
6884
|
if (today >= startDate) {
|
|
6890
6885
|
setTempSelectedRange({ ...tempSelectedRange, endDate: formatted });
|
|
6891
6886
|
} else {
|
|
6892
|
-
setTempSelectedRange({
|
|
6887
|
+
setTempSelectedRange({
|
|
6888
|
+
startDate: formatted,
|
|
6889
|
+
endDate: tempSelectedRange.startDate
|
|
6890
|
+
});
|
|
6893
6891
|
}
|
|
6894
6892
|
}
|
|
6895
6893
|
} else {
|
|
@@ -6901,11 +6899,11 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6901
6899
|
const handleConfirmDate = () => {
|
|
6902
6900
|
if (isConfirmDisabled) return;
|
|
6903
6901
|
if (range) {
|
|
6904
|
-
setSelectedRange(tempSelectedRange);
|
|
6905
6902
|
onChange == null ? void 0 : onChange(tempSelectedRange);
|
|
6903
|
+
setSelectedRange(tempSelectedRange);
|
|
6906
6904
|
} else {
|
|
6907
|
-
setSelectedDate(tempSelectedDate);
|
|
6908
6905
|
onChange == null ? void 0 : onChange(tempSelectedDate);
|
|
6906
|
+
setSelectedDate(tempSelectedDate);
|
|
6909
6907
|
}
|
|
6910
6908
|
setIsPanelOpen(false);
|
|
6911
6909
|
};
|
|
@@ -6920,31 +6918,29 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6920
6918
|
};
|
|
6921
6919
|
const getDayProps = (0, import_react7.useCallback)(
|
|
6922
6920
|
(dateObj, currentDate) => {
|
|
6921
|
+
const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateObj.date);
|
|
6922
|
+
if (isDateDisabled(date)) return "disabled";
|
|
6923
6923
|
const today = /* @__PURE__ */ new Date();
|
|
6924
6924
|
const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
|
|
6925
6925
|
if (range) {
|
|
6926
|
-
const
|
|
6927
|
-
const
|
|
6928
|
-
const
|
|
6929
|
-
const
|
|
6930
|
-
const
|
|
6931
|
-
const isInRange =
|
|
6932
|
-
if (
|
|
6933
|
-
if (
|
|
6934
|
-
if (
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6940
|
-
return dateObj.currentMonth && isSelected ? "selected" : dateObj.currentMonth && isToday ? "today" : !dateObj.currentMonth ? "disabled" : "default";
|
|
6941
|
-
}
|
|
6926
|
+
const start = tempSelectedRange.startDate ? formatStringToDate(tempSelectedRange.startDate) : null;
|
|
6927
|
+
const end = tempSelectedRange.endDate ? formatStringToDate(tempSelectedRange.endDate) : null;
|
|
6928
|
+
const current = date;
|
|
6929
|
+
const isStart = start && start.getFullYear() === current.getFullYear() && start.getMonth() === current.getMonth() && start.getDate() === current.getDate();
|
|
6930
|
+
const isEnd = end && end.getFullYear() === current.getFullYear() && end.getMonth() === current.getMonth() && end.getDate() === current.getDate();
|
|
6931
|
+
const isInRange = start && end && current > start && current < end;
|
|
6932
|
+
if (isStart || isEnd) return "selected";
|
|
6933
|
+
if (isInRange) return "period";
|
|
6934
|
+
if (isToday) return "today";
|
|
6935
|
+
return dateObj.currentMonth ? "default" : "disabled";
|
|
6936
|
+
}
|
|
6937
|
+
const selected = tempSelectedDate ? formatStringToDate(tempSelectedDate) : null;
|
|
6938
|
+
const isSelected = selected && selected.getFullYear() === date.getFullYear() && selected.getMonth() === date.getMonth() && selected.getDate() === date.getDate();
|
|
6939
|
+
return isSelected ? "selected" : isToday ? "today" : dateObj.currentMonth ? "default" : "disabled";
|
|
6942
6940
|
},
|
|
6943
|
-
[tempSelectedDate, tempSelectedRange, range]
|
|
6941
|
+
[tempSelectedDate, tempSelectedRange, range, isDateDisabled]
|
|
6944
6942
|
);
|
|
6945
|
-
const getPlaceholderText = () =>
|
|
6946
|
-
return placeholder;
|
|
6947
|
-
};
|
|
6943
|
+
const getPlaceholderText = () => placeholder;
|
|
6948
6944
|
(0, import_react7.useEffect)(() => {
|
|
6949
6945
|
if (range && typeof value === "object") {
|
|
6950
6946
|
setSelectedRange(value || { startDate: "", endDate: "" });
|
|
@@ -6965,17 +6961,63 @@ var DatePicker = (0, import_react7.forwardRef)((originalProps, ref) => {
|
|
|
6965
6961
|
const endContent = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
|
|
6966
6962
|
const renderCalendar = (currentDate, isLeft) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-[5px]", children: [
|
|
6967
6963
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: dualCalendar ? isLeft ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
6968
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6964
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6965
|
+
icon_button_default,
|
|
6966
|
+
{
|
|
6967
|
+
name: "left",
|
|
6968
|
+
variant: "soft",
|
|
6969
|
+
color: "neutral",
|
|
6970
|
+
onClick: () => {
|
|
6971
|
+
const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
|
|
6972
|
+
setLeftCurrentDate(newLeft);
|
|
6973
|
+
setRightCurrentDate(new Date(newLeft.getFullYear(), newLeft.getMonth() + 1));
|
|
6974
|
+
}
|
|
6975
|
+
}
|
|
6976
|
+
),
|
|
6969
6977
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
|
|
6970
6978
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-8" })
|
|
6971
6979
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
6972
6980
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-8" }),
|
|
6973
6981
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
|
|
6974
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6982
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6983
|
+
icon_button_default,
|
|
6984
|
+
{
|
|
6985
|
+
name: "right",
|
|
6986
|
+
variant: "soft",
|
|
6987
|
+
color: "neutral",
|
|
6988
|
+
onClick: () => {
|
|
6989
|
+
const newRight = new Date(rightCurrentDate.getFullYear(), rightCurrentDate.getMonth() + 1);
|
|
6990
|
+
setRightCurrentDate(newRight);
|
|
6991
|
+
setLeftCurrentDate(new Date(newRight.getFullYear(), newRight.getMonth() - 1));
|
|
6992
|
+
}
|
|
6993
|
+
}
|
|
6994
|
+
)
|
|
6975
6995
|
] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
6976
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6996
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6997
|
+
icon_button_default,
|
|
6998
|
+
{
|
|
6999
|
+
name: "left",
|
|
7000
|
+
variant: "soft",
|
|
7001
|
+
color: "neutral",
|
|
7002
|
+
onClick: () => {
|
|
7003
|
+
const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() - 1);
|
|
7004
|
+
setLeftCurrentDate(newLeft);
|
|
7005
|
+
}
|
|
7006
|
+
}
|
|
7007
|
+
),
|
|
6977
7008
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-extrabold", children: monthYearFormat(currentDate.getFullYear(), currentDate.getMonth()) }),
|
|
6978
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
7009
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
7010
|
+
icon_button_default,
|
|
7011
|
+
{
|
|
7012
|
+
name: "right",
|
|
7013
|
+
variant: "soft",
|
|
7014
|
+
color: "neutral",
|
|
7015
|
+
onClick: () => {
|
|
7016
|
+
const newLeft = new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1);
|
|
7017
|
+
setLeftCurrentDate(newLeft);
|
|
7018
|
+
}
|
|
7019
|
+
}
|
|
7020
|
+
)
|
|
6979
7021
|
] }) }),
|
|
6980
7022
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
|
|
6981
7023
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react7.Fragment, { children: week.map((dateObj, index) => {
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../chunk-4VWG4726.mjs";
|
|
3
|
-
import {
|
|
4
|
-
timePicker_default
|
|
5
|
-
} from "../../chunk-COGGK5Q6.mjs";
|
|
6
|
-
import "../../chunk-QCEKPS7U.mjs";
|
|
7
|
-
import "../../chunk-K2RW5KLO.mjs";
|
|
8
3
|
import {
|
|
9
4
|
datePicker_default
|
|
10
|
-
} from "../../chunk-
|
|
5
|
+
} from "../../chunk-AUGYJPCS.mjs";
|
|
11
6
|
import "../../chunk-FWFEKWWD.mjs";
|
|
12
7
|
import {
|
|
13
8
|
day_default
|
|
14
9
|
} from "../../chunk-XZYQFBCT.mjs";
|
|
10
|
+
import {
|
|
11
|
+
timePicker_default
|
|
12
|
+
} from "../../chunk-COGGK5Q6.mjs";
|
|
13
|
+
import "../../chunk-QCEKPS7U.mjs";
|
|
14
|
+
import "../../chunk-K2RW5KLO.mjs";
|
|
15
15
|
import "../../chunk-2GCSFWHD.mjs";
|
|
16
16
|
import "../../chunk-3RTVVQA3.mjs";
|
|
17
17
|
import "../../chunk-MY5U63QO.mjs";
|
|
@@ -641,37 +641,13 @@ function TableHeaderCell({
|
|
|
641
641
|
}) {
|
|
642
642
|
const thRef = (0, import_react2.useRef)(null);
|
|
643
643
|
const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
|
|
644
|
-
|
|
645
|
-
if (
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
const children = Array.from(el.children);
|
|
649
|
-
for (const child of children) {
|
|
650
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
651
|
-
return true;
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
return false;
|
|
655
|
-
};
|
|
656
|
-
const extractTextFromContent = (node) => {
|
|
657
|
-
if (typeof node === "string" || typeof node === "number") {
|
|
658
|
-
return String(node);
|
|
659
|
-
}
|
|
660
|
-
if ((0, import_react2.isValidElement)(node)) {
|
|
661
|
-
return String(node.props.children || "");
|
|
662
|
-
}
|
|
663
|
-
return "";
|
|
664
|
-
};
|
|
665
|
-
(0, import_react2.useEffect)(() => {
|
|
666
|
-
if (thRef.current && !isCheckbox) {
|
|
667
|
-
setTimeout(() => {
|
|
668
|
-
if (thRef.current) {
|
|
669
|
-
setShowTitle(checkOverflow(thRef.current));
|
|
670
|
-
}
|
|
671
|
-
}, 0);
|
|
644
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
645
|
+
if (!isCheckbox && thRef.current) {
|
|
646
|
+
const el = thRef.current;
|
|
647
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
672
648
|
}
|
|
673
649
|
}, [content, isCheckbox]);
|
|
674
|
-
const titleText = !isCheckbox && showTitle ?
|
|
650
|
+
const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
|
|
675
651
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
676
652
|
"th",
|
|
677
653
|
{
|
|
@@ -684,7 +660,10 @@ function TableHeaderCell({
|
|
|
684
660
|
flexShrink: 0,
|
|
685
661
|
flexGrow: 0,
|
|
686
662
|
boxSizing: "border-box"
|
|
687
|
-
} : column ? {
|
|
663
|
+
} : column ? {
|
|
664
|
+
...getCellStyle(column),
|
|
665
|
+
textAlign: "center"
|
|
666
|
+
} : void 0,
|
|
688
667
|
title: titleText,
|
|
689
668
|
children: content
|
|
690
669
|
}
|
|
@@ -693,7 +672,6 @@ function TableHeaderCell({
|
|
|
693
672
|
var TableHead = ({
|
|
694
673
|
slots,
|
|
695
674
|
columns,
|
|
696
|
-
color,
|
|
697
675
|
size,
|
|
698
676
|
rowCheckbox = false,
|
|
699
677
|
hasCheckedRows,
|
|
@@ -745,53 +723,31 @@ function TableCell({
|
|
|
745
723
|
}) {
|
|
746
724
|
var _a, _b;
|
|
747
725
|
const value = row[column.field];
|
|
748
|
-
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field }))
|
|
726
|
+
const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
|
|
749
727
|
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
728
|
+
const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
|
|
750
729
|
const tdRef = (0, import_react3.useRef)(null);
|
|
751
730
|
const [showTitle, setShowTitle] = (0, import_react3.useState)(false);
|
|
752
|
-
|
|
753
|
-
const checkOverflow = (el) => {
|
|
754
|
-
if (el.scrollWidth > el.clientWidth) {
|
|
755
|
-
return true;
|
|
756
|
-
}
|
|
757
|
-
const children = Array.from(el.children);
|
|
758
|
-
for (const child of children) {
|
|
759
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
760
|
-
return true;
|
|
761
|
-
}
|
|
762
|
-
}
|
|
763
|
-
return false;
|
|
764
|
-
};
|
|
765
|
-
(0, import_react3.useEffect)(() => {
|
|
731
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
766
732
|
if (tdRef.current && isTextContent) {
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
setShowTitle(checkOverflow(tdRef.current));
|
|
770
|
-
}
|
|
771
|
-
}, 0);
|
|
733
|
+
const el = tdRef.current;
|
|
734
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
772
735
|
}
|
|
773
736
|
}, [content, isTextContent]);
|
|
774
737
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
775
738
|
"td",
|
|
776
739
|
{
|
|
777
740
|
ref: tdRef,
|
|
778
|
-
className: clsx(
|
|
779
|
-
slots.td(),
|
|
780
|
-
classNames == null ? void 0 : classNames.td,
|
|
781
|
-
column.className,
|
|
782
|
-
isTextContent && "truncate",
|
|
783
|
-
isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
|
|
784
|
-
),
|
|
741
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
|
|
785
742
|
style: {
|
|
786
743
|
...getCellStyle(column),
|
|
787
744
|
maxWidth: column.width || "150px",
|
|
788
745
|
textAlign: column.align || "center",
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
}
|
|
746
|
+
whiteSpace: isTextContent ? "nowrap" : "normal",
|
|
747
|
+
overflow: isTextContent ? "hidden" : "visible",
|
|
748
|
+
textOverflow: isTextContent ? "ellipsis" : void 0
|
|
793
749
|
},
|
|
794
|
-
title: showTitle ? String(
|
|
750
|
+
title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
|
|
795
751
|
children: content
|
|
796
752
|
},
|
|
797
753
|
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import "../../chunk-DX3KXNP6.mjs";
|
|
3
|
-
import {
|
|
4
|
-
table_default
|
|
5
|
-
} from "../../chunk-KYWCJIXI.mjs";
|
|
6
3
|
import {
|
|
7
4
|
definition_table_default
|
|
8
5
|
} from "../../chunk-DS5CGU2X.mjs";
|
|
6
|
+
import {
|
|
7
|
+
table_default
|
|
8
|
+
} from "../../chunk-W3V4SZV5.mjs";
|
|
9
9
|
import "../../chunk-7B7LRG5J.mjs";
|
|
10
10
|
import "../../chunk-VVCSY7DG.mjs";
|
|
11
11
|
import "../../chunk-F3HENRVM.mjs";
|
|
12
|
+
import "../../chunk-QZ3LVYJW.mjs";
|
|
12
13
|
import "../../chunk-2GCSFWHD.mjs";
|
|
13
14
|
import "../../chunk-3RTVVQA3.mjs";
|
|
14
|
-
import "../../chunk-QZ3LVYJW.mjs";
|
|
15
15
|
import "../../chunk-DQRAFUDA.mjs";
|
|
16
16
|
import "../../chunk-EWS3FESG.mjs";
|
|
17
17
|
import "../../chunk-OEIEALIP.mjs";
|
|
@@ -641,37 +641,13 @@ function TableHeaderCell({
|
|
|
641
641
|
}) {
|
|
642
642
|
const thRef = (0, import_react2.useRef)(null);
|
|
643
643
|
const [showTitle, setShowTitle] = (0, import_react2.useState)(false);
|
|
644
|
-
|
|
645
|
-
if (
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
const children = Array.from(el.children);
|
|
649
|
-
for (const child of children) {
|
|
650
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
651
|
-
return true;
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
return false;
|
|
655
|
-
};
|
|
656
|
-
const extractTextFromContent = (node) => {
|
|
657
|
-
if (typeof node === "string" || typeof node === "number") {
|
|
658
|
-
return String(node);
|
|
659
|
-
}
|
|
660
|
-
if ((0, import_react2.isValidElement)(node)) {
|
|
661
|
-
return String(node.props.children || "");
|
|
662
|
-
}
|
|
663
|
-
return "";
|
|
664
|
-
};
|
|
665
|
-
(0, import_react2.useEffect)(() => {
|
|
666
|
-
if (thRef.current && !isCheckbox) {
|
|
667
|
-
setTimeout(() => {
|
|
668
|
-
if (thRef.current) {
|
|
669
|
-
setShowTitle(checkOverflow(thRef.current));
|
|
670
|
-
}
|
|
671
|
-
}, 0);
|
|
644
|
+
(0, import_react2.useLayoutEffect)(() => {
|
|
645
|
+
if (!isCheckbox && thRef.current) {
|
|
646
|
+
const el = thRef.current;
|
|
647
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
672
648
|
}
|
|
673
649
|
}, [content, isCheckbox]);
|
|
674
|
-
const titleText = !isCheckbox && showTitle ?
|
|
650
|
+
const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
|
|
675
651
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
676
652
|
"th",
|
|
677
653
|
{
|
|
@@ -684,7 +660,10 @@ function TableHeaderCell({
|
|
|
684
660
|
flexShrink: 0,
|
|
685
661
|
flexGrow: 0,
|
|
686
662
|
boxSizing: "border-box"
|
|
687
|
-
} : column ? {
|
|
663
|
+
} : column ? {
|
|
664
|
+
...getCellStyle(column),
|
|
665
|
+
textAlign: "center"
|
|
666
|
+
} : void 0,
|
|
688
667
|
title: titleText,
|
|
689
668
|
children: content
|
|
690
669
|
}
|
|
@@ -693,7 +672,6 @@ function TableHeaderCell({
|
|
|
693
672
|
var TableHead = ({
|
|
694
673
|
slots,
|
|
695
674
|
columns,
|
|
696
|
-
color,
|
|
697
675
|
size,
|
|
698
676
|
rowCheckbox = false,
|
|
699
677
|
hasCheckedRows,
|
|
@@ -6719,53 +6697,31 @@ function TableCell({
|
|
|
6719
6697
|
}) {
|
|
6720
6698
|
var _a, _b;
|
|
6721
6699
|
const value = row[column.field];
|
|
6722
|
-
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field }))
|
|
6700
|
+
const formattedValue = (_b = (_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) != null ? _b : value;
|
|
6723
6701
|
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
6702
|
+
const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
|
|
6724
6703
|
const tdRef = (0, import_react7.useRef)(null);
|
|
6725
6704
|
const [showTitle, setShowTitle] = (0, import_react7.useState)(false);
|
|
6726
|
-
|
|
6727
|
-
const checkOverflow = (el) => {
|
|
6728
|
-
if (el.scrollWidth > el.clientWidth) {
|
|
6729
|
-
return true;
|
|
6730
|
-
}
|
|
6731
|
-
const children = Array.from(el.children);
|
|
6732
|
-
for (const child of children) {
|
|
6733
|
-
if (child.scrollWidth > child.clientWidth) {
|
|
6734
|
-
return true;
|
|
6735
|
-
}
|
|
6736
|
-
}
|
|
6737
|
-
return false;
|
|
6738
|
-
};
|
|
6739
|
-
(0, import_react7.useEffect)(() => {
|
|
6705
|
+
(0, import_react7.useLayoutEffect)(() => {
|
|
6740
6706
|
if (tdRef.current && isTextContent) {
|
|
6741
|
-
|
|
6742
|
-
|
|
6743
|
-
setShowTitle(checkOverflow(tdRef.current));
|
|
6744
|
-
}
|
|
6745
|
-
}, 0);
|
|
6707
|
+
const el = tdRef.current;
|
|
6708
|
+
setShowTitle(el.scrollWidth > el.clientWidth);
|
|
6746
6709
|
}
|
|
6747
6710
|
}, [content, isTextContent]);
|
|
6748
6711
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
6749
6712
|
"td",
|
|
6750
6713
|
{
|
|
6751
6714
|
ref: tdRef,
|
|
6752
|
-
className: clsx(
|
|
6753
|
-
slots.td(),
|
|
6754
|
-
classNames == null ? void 0 : classNames.td,
|
|
6755
|
-
column.className,
|
|
6756
|
-
isTextContent && "truncate",
|
|
6757
|
-
isTextContent && "[&>*]:inline-block [&>*]:max-w-full [&>*]:truncate [&>*]:align-middle"
|
|
6758
|
-
),
|
|
6715
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, isTextContent && "truncate"),
|
|
6759
6716
|
style: {
|
|
6760
6717
|
...getCellStyle(column),
|
|
6761
6718
|
maxWidth: column.width || "150px",
|
|
6762
6719
|
textAlign: column.align || "center",
|
|
6763
|
-
|
|
6764
|
-
|
|
6765
|
-
|
|
6766
|
-
}
|
|
6720
|
+
whiteSpace: isTextContent ? "nowrap" : "normal",
|
|
6721
|
+
overflow: isTextContent ? "hidden" : "visible",
|
|
6722
|
+
textOverflow: isTextContent ? "ellipsis" : void 0
|
|
6767
6723
|
},
|
|
6768
|
-
title: showTitle ? String(
|
|
6724
|
+
title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
|
|
6769
6725
|
children: content
|
|
6770
6726
|
},
|
|
6771
6727
|
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
table_body_default
|
|
4
|
-
} from "../../chunk-
|
|
4
|
+
} from "../../chunk-W3V4SZV5.mjs";
|
|
5
5
|
import "../../chunk-7B7LRG5J.mjs";
|
|
6
6
|
import "../../chunk-VVCSY7DG.mjs";
|
|
7
7
|
import "../../chunk-F3HENRVM.mjs";
|
|
8
|
+
import "../../chunk-QZ3LVYJW.mjs";
|
|
8
9
|
import "../../chunk-2GCSFWHD.mjs";
|
|
9
10
|
import "../../chunk-3RTVVQA3.mjs";
|
|
10
|
-
import "../../chunk-QZ3LVYJW.mjs";
|
|
11
11
|
import "../../chunk-DQRAFUDA.mjs";
|
|
12
12
|
import "../../chunk-EWS3FESG.mjs";
|
|
13
13
|
import "../../chunk-OEIEALIP.mjs";
|
|
@@ -14,6 +14,6 @@ type TableHeadProps = {
|
|
|
14
14
|
classNames?: SlotsToClasses<TableSlots>;
|
|
15
15
|
onCheckAll: (isChecked: boolean) => void;
|
|
16
16
|
};
|
|
17
|
-
declare const TableHead: ({ slots, columns,
|
|
17
|
+
declare const TableHead: ({ slots, columns, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
|
|
18
18
|
|
|
19
19
|
export { TableHead as default };
|
|
@@ -14,6 +14,6 @@ type TableHeadProps = {
|
|
|
14
14
|
classNames?: SlotsToClasses<TableSlots>;
|
|
15
15
|
onCheckAll: (isChecked: boolean) => void;
|
|
16
16
|
};
|
|
17
|
-
declare const TableHead: ({ slots, columns,
|
|
17
|
+
declare const TableHead: ({ slots, columns, size, rowCheckbox, hasCheckedRows, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
|
|
18
18
|
|
|
19
19
|
export { TableHead as default };
|