@deepnoid/ui 0.1.78 → 0.1.79

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.
Files changed (15) hide show
  1. package/.turbo/turbo-build.log +105 -105
  2. package/dist/{chunk-4PU6UC7K.mjs → chunk-AX3D6VFT.mjs} +48 -38
  3. package/dist/{chunk-TKB2JL2E.mjs → chunk-D5N7OBSO.mjs} +18 -9
  4. package/dist/{chunk-5GBAUDP4.mjs → chunk-SIVCIIB6.mjs} +45 -5
  5. package/dist/components/table/index.js +109 -50
  6. package/dist/components/table/index.mjs +3 -3
  7. package/dist/components/table/table-body.js +45 -5
  8. package/dist/components/table/table-body.mjs +1 -1
  9. package/dist/components/table/table-head.js +18 -9
  10. package/dist/components/table/table-head.mjs +1 -1
  11. package/dist/components/table/table.js +109 -50
  12. package/dist/components/table/table.mjs +3 -3
  13. package/dist/index.js +109 -50
  14. package/dist/index.mjs +3 -3
  15. package/package.json +1 -1
package/dist/components/table/index.js CHANGED
@@ -691,23 +691,30 @@ var TableHead = ({
691
691
  e.preventDefault();
692
692
  onCheckAll(!isCheckedAll);
693
693
  };
694
- const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
694
+ const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
695
695
  "th",
696
696
  {
697
- className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
697
+ className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
698
698
  style: {
699
- width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
700
- minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
701
- maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
702
- height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
699
+ width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
700
+ minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
701
+ maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
702
+ height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
703
+ ...isCheckbox || (column == null ? void 0 : column.width) ? {
704
+ flexShrink: 0,
705
+ flexGrow: 0,
706
+ boxSizing: "border-box"
707
+ } : {}
703
708
  },
704
709
  children: content
705
710
  },
706
711
  key
707
712
  );
708
713
  const renderSkeletonRow = () => /* @__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: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
709
- columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
710
- rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
714
+ columns.map(
715
+ (column, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
716
+ ),
717
+ rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
711
718
  ] }) });
712
719
  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: [
713
720
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
@@ -720,7 +727,9 @@ var TableHead = ({
720
727
  onChange: (e) => onCheckAll(e.target.checked)
721
728
  }
722
729
  ) }),
723
- "checkbox"
730
+ "checkbox",
731
+ void 0,
732
+ true
724
733
  )
725
734
  ] }) });
726
735
  return isLoading ? renderSkeletonRow() : renderContentRow();
@@ -745,16 +754,56 @@ var TableBody = ({
745
754
  className
746
755
  }) => {
747
756
  const getCellStyle = (column) => ({
748
- width: column.width ? `${column.width}px` : void 0,
757
+ width: column.width ? `${column.width}px` : "auto",
749
758
  minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
750
759
  maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
751
760
  height: column.height ? `${column.height}px` : void 0,
752
- textAlign: column.align || "center"
761
+ textAlign: column.align || "center",
762
+ ...column.width && {
763
+ flexShrink: 0,
764
+ flexGrow: 0,
765
+ boxSizing: "border-box",
766
+ overflow: "hidden",
767
+ textOverflow: "ellipsis",
768
+ whiteSpace: "nowrap"
769
+ }
753
770
  });
754
- const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
755
- const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) });
771
+ const renderTdSkeleton = (key, column) => {
772
+ const isCheckbox = key.includes("checkbox");
773
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
774
+ "td",
775
+ {
776
+ className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
777
+ style: isCheckbox ? {
778
+ width: "40px",
779
+ minWidth: "40px",
780
+ maxWidth: "40px",
781
+ flexShrink: 0,
782
+ flexGrow: 0,
783
+ boxSizing: "border-box"
784
+ } : column ? getCellStyle(column) : void 0,
785
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
786
+ },
787
+ key
788
+ );
789
+ };
790
+ const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
791
+ "td",
792
+ {
793
+ className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
794
+ style: {
795
+ width: "40px",
796
+ minWidth: "40px",
797
+ maxWidth: "40px",
798
+ flexShrink: 0,
799
+ flexGrow: 0,
800
+ boxSizing: "border-box"
801
+ },
802
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
803
+ }
804
+ );
756
805
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
757
- columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
806
+ columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
758
807
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
759
808
  ] }, `skeleton-${rowIndex}`);
760
809
  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 }) });
@@ -6165,43 +6214,53 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6165
6214
  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
6166
6215
  const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
6167
6216
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
6168
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
6169
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6170
- table_head_default,
6171
- {
6172
- columns,
6173
- size,
6174
- color,
6175
- rowCheckbox,
6176
- isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6177
- onCheckAll: handleAllRowCheck,
6178
- isLoading,
6179
- classNames,
6180
- slots
6181
- }
6182
- ),
6183
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6184
- table_body_default,
6185
- {
6186
- slots,
6187
- rows,
6188
- columns,
6189
- size,
6190
- color,
6191
- rowCheckbox,
6192
- checkedRows,
6193
- onCheckRow: handleRowCheck,
6194
- emptyContent,
6195
- isLoading,
6196
- skeletonRow,
6197
- className: clsx(
6198
- "transition-all duration-150 ease-out",
6199
- isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
6200
- classNames
6217
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
6218
+ "table",
6219
+ {
6220
+ className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
6221
+ style: {
6222
+ tableLayout: "fixed",
6223
+ width: "100%"
6224
+ },
6225
+ children: [
6226
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6227
+ table_head_default,
6228
+ {
6229
+ columns,
6230
+ size,
6231
+ color,
6232
+ rowCheckbox,
6233
+ isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6234
+ onCheckAll: handleAllRowCheck,
6235
+ isLoading,
6236
+ classNames,
6237
+ slots
6238
+ }
6239
+ ),
6240
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6241
+ table_body_default,
6242
+ {
6243
+ slots,
6244
+ rows,
6245
+ columns,
6246
+ size,
6247
+ color,
6248
+ rowCheckbox,
6249
+ checkedRows,
6250
+ onCheckRow: handleRowCheck,
6251
+ emptyContent,
6252
+ isLoading,
6253
+ skeletonRow,
6254
+ className: clsx(
6255
+ "transition-all duration-150 ease-out",
6256
+ isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
6257
+ classNames
6258
+ )
6259
+ }
6201
6260
  )
6202
- }
6203
- )
6204
- ] }) }),
6261
+ ]
6262
+ }
6263
+ ) }),
6205
6264
  showPagination && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6206
6265
  pagination_default,
6207
6266
  {
package/dist/components/table/index.mjs CHANGED
@@ -5,9 +5,9 @@ import {
5
5
  } from "../../chunk-KCAGZUYM.mjs";
6
6
  import {
7
7
  table_default
8
- } from "../../chunk-4PU6UC7K.mjs";
9
- import "../../chunk-5GBAUDP4.mjs";
10
- import "../../chunk-TKB2JL2E.mjs";
8
+ } from "../../chunk-AX3D6VFT.mjs";
9
+ import "../../chunk-SIVCIIB6.mjs";
10
+ import "../../chunk-D5N7OBSO.mjs";
11
11
  import "../../chunk-DQRAFUDA.mjs";
12
12
  import "../../chunk-M37VBNB3.mjs";
13
13
  import "../../chunk-MZ76AA76.mjs";
package/dist/components/table/table-body.js CHANGED
@@ -687,16 +687,56 @@ var TableBody = ({
687
687
  className
688
688
  }) => {
689
689
  const getCellStyle = (column) => ({
690
- width: column.width ? `${column.width}px` : void 0,
690
+ width: column.width ? `${column.width}px` : "auto",
691
691
  minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
692
692
  maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
693
693
  height: column.height ? `${column.height}px` : void 0,
694
- textAlign: column.align || "center"
694
+ textAlign: column.align || "center",
695
+ ...column.width && {
696
+ flexShrink: 0,
697
+ flexGrow: 0,
698
+ boxSizing: "border-box",
699
+ overflow: "hidden",
700
+ textOverflow: "ellipsis",
701
+ whiteSpace: "nowrap"
702
+ }
695
703
  });
696
- const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
697
- const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) });
704
+ const renderTdSkeleton = (key, column) => {
705
+ const isCheckbox = key.includes("checkbox");
706
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
707
+ "td",
708
+ {
709
+ className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
710
+ style: isCheckbox ? {
711
+ width: "40px",
712
+ minWidth: "40px",
713
+ maxWidth: "40px",
714
+ flexShrink: 0,
715
+ flexGrow: 0,
716
+ boxSizing: "border-box"
717
+ } : column ? getCellStyle(column) : void 0,
718
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
719
+ },
720
+ key
721
+ );
722
+ };
723
+ const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
724
+ "td",
725
+ {
726
+ className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
727
+ style: {
728
+ width: "40px",
729
+ minWidth: "40px",
730
+ maxWidth: "40px",
731
+ flexShrink: 0,
732
+ flexGrow: 0,
733
+ boxSizing: "border-box"
734
+ },
735
+ children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
736
+ }
737
+ );
698
738
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
699
- columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
739
+ columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
700
740
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
701
741
  ] }, `skeleton-${rowIndex}`);
702
742
  const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
package/dist/components/table/table-body.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  table_body_default
4
- } from "../../chunk-5GBAUDP4.mjs";
4
+ } from "../../chunk-SIVCIIB6.mjs";
5
5
  import "../../chunk-MZ76AA76.mjs";
6
6
  import "../../chunk-6PN3DGOE.mjs";
7
7
  import "../../chunk-QZ3LVYJW.mjs";
package/dist/components/table/table-head.js CHANGED
@@ -686,23 +686,30 @@ var TableHead = ({
686
686
  e.preventDefault();
687
687
  onCheckAll(!isCheckedAll);
688
688
  };
689
- const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
689
+ const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
690
690
  "th",
691
691
  {
692
- className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
692
+ className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
693
693
  style: {
694
- width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
695
- minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
696
- maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
697
- height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
694
+ width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
695
+ minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
696
+ maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
697
+ height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
698
+ ...isCheckbox || (column == null ? void 0 : column.width) ? {
699
+ flexShrink: 0,
700
+ flexGrow: 0,
701
+ boxSizing: "border-box"
702
+ } : {}
698
703
  },
699
704
  children: content
700
705
  },
701
706
  key
702
707
  );
703
708
  const renderSkeletonRow = () => /* @__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: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
704
- columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
705
- rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
709
+ columns.map(
710
+ (column, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
711
+ ),
712
+ rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
706
713
  ] }) });
707
714
  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: [
708
715
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
@@ -715,7 +722,9 @@ var TableHead = ({
715
722
  onChange: (e) => onCheckAll(e.target.checked)
716
723
  }
717
724
  ) }),
718
- "checkbox"
725
+ "checkbox",
726
+ void 0,
727
+ true
719
728
  )
720
729
  ] }) });
721
730
  return isLoading ? renderSkeletonRow() : renderContentRow();
package/dist/components/table/table-head.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  table_head_default
4
- } from "../../chunk-TKB2JL2E.mjs";
4
+ } from "../../chunk-D5N7OBSO.mjs";
5
5
  import "../../chunk-MZ76AA76.mjs";
6
6
  import "../../chunk-6PN3DGOE.mjs";
7
7
  import "../../chunk-QZ3LVYJW.mjs";
package/dist/components/table/table.js CHANGED
@@ -688,23 +688,30 @@ var TableHead = ({
688
688
  e.preventDefault();
689
689
  onCheckAll(!isCheckedAll);
690
690
  };
691
- const renderTh = (content, key, column) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
691
+ const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
692
692
  "th",
693
693
  {
694
- className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column),
694
+ className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
695
695
  style: {
696
- width: (column == null ? void 0 : column.width) ? `${column.width}px` : void 0,
697
- minWidth: (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
698
- maxWidth: (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
699
- height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0
696
+ width: isCheckbox ? "40px" : (column == null ? void 0 : column.width) ? `${column.width}px` : "auto",
697
+ minWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.minWidth) ? `${column.minWidth}px` : void 0,
698
+ maxWidth: isCheckbox ? "40px" : (column == null ? void 0 : column.maxWidth) ? `${column.maxWidth}px` : void 0,
699
+ height: (column == null ? void 0 : column.height) ? `${column.height}px` : void 0,
700
+ ...isCheckbox || (column == null ? void 0 : column.width) ? {
701
+ flexShrink: 0,
702
+ flexGrow: 0,
703
+ boxSizing: "border-box"
704
+ } : {}
700
705
  },
701
706
  children: content
702
707
  },
703
708
  key
704
709
  );
705
710
  const renderSkeletonRow = () => /* @__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: clsx(slots.tr({ class: classNames == null ? void 0 : classNames.tr }), "[&>th]:border-0"), children: [
706
- columns.map((_, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`)),
707
- rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton")
711
+ columns.map(
712
+ (column, idx) => renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), `skeleton-${idx}`, column)
713
+ ),
714
+ rowCheckbox && renderTh(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, rounded: "lg", speed: "fast" }), "checkbox-skeleton", void 0, true)
708
715
  ] }) });
709
716
  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: [
710
717
  columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
@@ -717,7 +724,9 @@ var TableHead = ({
717
724
  onChange: (e) => onCheckAll(e.target.checked)
718
725
  }
719
726
  ) }),
720
- "checkbox"
727
+ "checkbox",
728
+ void 0,
729
+ true
721
730
  )
722
731
  ] }) });
723
732
  return isLoading ? renderSkeletonRow() : renderContentRow();
@@ -742,16 +751,56 @@ var TableBody = ({
742
751
  className
743
752
  }) => {
744
753
  const getCellStyle = (column) => ({
745
- width: column.width ? `${column.width}px` : void 0,
754
+ width: column.width ? `${column.width}px` : "auto",
746
755
  minWidth: column.minWidth ? `${column.minWidth}px` : void 0,
747
756
  maxWidth: column.maxWidth ? `${column.maxWidth}px` : void 0,
748
757
  height: column.height ? `${column.height}px` : void 0,
749
- textAlign: column.align || "center"
758
+ textAlign: column.align || "center",
759
+ ...column.width && {
760
+ flexShrink: 0,
761
+ flexGrow: 0,
762
+ boxSizing: "border-box",
763
+ overflow: "hidden",
764
+ textOverflow: "ellipsis",
765
+ whiteSpace: "nowrap"
766
+ }
750
767
  });
751
- const renderTdSkeleton = (key) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
752
- const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) });
768
+ const renderTdSkeleton = (key, column) => {
769
+ const isCheckbox = key.includes("checkbox");
770
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
771
+ "td",
772
+ {
773
+ className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
774
+ style: isCheckbox ? {
775
+ width: "40px",
776
+ minWidth: "40px",
777
+ maxWidth: "40px",
778
+ flexShrink: 0,
779
+ flexGrow: 0,
780
+ boxSizing: "border-box"
781
+ } : column ? getCellStyle(column) : void 0,
782
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
783
+ },
784
+ key
785
+ );
786
+ };
787
+ const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
788
+ "td",
789
+ {
790
+ className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
791
+ style: {
792
+ width: "40px",
793
+ minWidth: "40px",
794
+ maxWidth: "40px",
795
+ flexShrink: 0,
796
+ flexGrow: 0,
797
+ boxSizing: "border-box"
798
+ },
799
+ children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
800
+ }
801
+ );
753
802
  const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
754
- columns.map((_, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`)),
803
+ columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
755
804
  rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
756
805
  ] }, `skeleton-${rowIndex}`);
757
806
  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 }) });
@@ -6162,43 +6211,53 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
6162
6211
  const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
6163
6212
  const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
6164
6213
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
6165
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
6166
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6167
- table_head_default,
6168
- {
6169
- columns,
6170
- size,
6171
- color,
6172
- rowCheckbox,
6173
- isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6174
- onCheckAll: handleAllRowCheck,
6175
- isLoading,
6176
- classNames,
6177
- slots
6178
- }
6179
- ),
6180
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6181
- table_body_default,
6182
- {
6183
- slots,
6184
- rows,
6185
- columns,
6186
- size,
6187
- color,
6188
- rowCheckbox,
6189
- checkedRows,
6190
- onCheckRow: handleRowCheck,
6191
- emptyContent,
6192
- isLoading,
6193
- skeletonRow,
6194
- className: clsx(
6195
- "transition-all duration-150 ease-out",
6196
- isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
6197
- classNames
6214
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
6215
+ "table",
6216
+ {
6217
+ className: slots.table({ class: classNames == null ? void 0 : classNames.table }),
6218
+ style: {
6219
+ tableLayout: "fixed",
6220
+ width: "100%"
6221
+ },
6222
+ children: [
6223
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6224
+ table_head_default,
6225
+ {
6226
+ columns,
6227
+ size,
6228
+ color,
6229
+ rowCheckbox,
6230
+ isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
6231
+ onCheckAll: handleAllRowCheck,
6232
+ isLoading,
6233
+ classNames,
6234
+ slots
6235
+ }
6236
+ ),
6237
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6238
+ table_body_default,
6239
+ {
6240
+ slots,
6241
+ rows,
6242
+ columns,
6243
+ size,
6244
+ color,
6245
+ rowCheckbox,
6246
+ checkedRows,
6247
+ onCheckRow: handleRowCheck,
6248
+ emptyContent,
6249
+ isLoading,
6250
+ skeletonRow,
6251
+ className: clsx(
6252
+ "transition-all duration-150 ease-out",
6253
+ isLoading ? "-translate-y-2 opacity-0" : "translate-y-0 opacity-100",
6254
+ classNames
6255
+ )
6256
+ }
6198
6257
  )
6199
- }
6200
- )
6201
- ] }) }),
6258
+ ]
6259
+ }
6260
+ ) }),
6202
6261
  showPagination && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
6203
6262
  pagination_default,
6204
6263
  {
package/dist/components/table/table.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
  import {
3
3
  table_default
4
- } from "../../chunk-4PU6UC7K.mjs";
5
- import "../../chunk-5GBAUDP4.mjs";
6
- import "../../chunk-TKB2JL2E.mjs";
4
+ } from "../../chunk-AX3D6VFT.mjs";
5
+ import "../../chunk-SIVCIIB6.mjs";
6
+ import "../../chunk-D5N7OBSO.mjs";
7
7
  import "../../chunk-DQRAFUDA.mjs";
8
8
  import "../../chunk-M37VBNB3.mjs";
9
9
  import "../../chunk-MZ76AA76.mjs";