erp-pos-ecommerce-shared 0.2.19 → 0.2.21

package/dist/components.js

@@ -1296,6 +1296,7 @@ function useDataTable({
 }
 var defaultHeaderTextColor = "light-dark(var(--mantine-color-dimmed), var(--mantine-color-gray-4))";
 var defaultHeaderHoverBg = "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-2))";
+var actionsColumnWidth = 56;
 function normalizeHeaderStyle(value) {
   if (value == null) {
     return {
@@ -1335,11 +1336,20 @@ var TableHeader = ({
   const bgColor = style.bgColor ?? defaultHeaderBgColor;
   const hoverBg = style.hoverBgColor ?? defaultHeaderHoverBg;
   const hoverText = style.hoverTextColor ?? style.textColor ?? defaultHeaderTextColor;
+  const totalColumnsSize = table.getVisibleLeafColumns().reduce((sum, column) => sum + column.getSize(), 0);
   const getSortIcon = (sortState) => {
     if (sortState === "asc") return SortIconAsc;
     if (sortState === "desc") return SortIconDesc;
     return SortIcon;
   };
+  const getColumnStyle = (size) => {
+    if (!size || totalColumnsSize <= 0) return void 0;
+    const baseWidth = `${size / totalColumnsSize * 100}%`;
+    return {
+      width: hasActionsColumn ? `calc((100% - ${actionsColumnWidth}px) * ${size / totalColumnsSize})` : baseWidth,
+      minWidth: size
+    };
+  };
   const baseButtonStyle = {
     padding: style.padding ?? "4px 10px",
     fontSize: style.fontSize ?? 14,
@@ -1381,33 +1391,49 @@ var TableHeader = ({
       const sortState = header.column.getIsSorted();
       const Icon = canSort ? getSortIcon(sortState) : null;
       const isHovered = hoveredHeaderId === header.id;
-      return /* @__PURE__ */ jsx(Table.Th, { bg: bgColor, style: header.column.columnDef.size ? { width: header.column.columnDef.size, minWidth: header.column.columnDef.size } : void 0, children: /* @__PURE__ */ jsxs(
-        UnstyledButton,
+      return /* @__PURE__ */ jsx(
+        Table.Th,
         {
-          style: {
-            ...baseButtonStyle,
-            color: isHovered ? hoverText : style.textColor ?? defaultHeaderTextColor,
-            backgroundColor: isHovered ? hoverBg : void 0
-          },
-          onClick: header.column.getToggleSortingHandler(),
-          onMouseEnter: () => setHoveredHeaderId(header.id),
-          onMouseLeave: () => setHoveredHeaderId(null),
-          children: [
-            header.isPlaceholder ? null : flexRender(
-              header.column.columnDef.header,
-              header.getContext()
-            ),
-            Icon && /* @__PURE__ */ jsx(Icon, { size: 16 })
-          ]
-        }
-      ) }, header.id);
+          bg: bgColor,
+          style: getColumnStyle(header.column.getSize()),
+          children: /* @__PURE__ */ jsxs(
+            UnstyledButton,
+            {
+              style: {
+                ...baseButtonStyle,
+                color: isHovered ? hoverText : style.textColor ?? defaultHeaderTextColor,
+                backgroundColor: isHovered ? hoverBg : void 0
+              },
+              onClick: header.column.getToggleSortingHandler(),
+              onMouseEnter: () => setHoveredHeaderId(header.id),
+              onMouseLeave: () => setHoveredHeaderId(null),
+              children: [
+                header.isPlaceholder ? null : flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                ),
+                Icon && /* @__PURE__ */ jsx(Icon, { size: 16 })
+              ]
+            }
+          )
+        },
+        header.id
+      );
     }),
-    hasActionsColumn && /* @__PURE__ */ jsx(Table.Th, { bg: bgColor })
+    hasActionsColumn && /* @__PURE__ */ jsx(
+      Table.Th,
+      {
+        bg: bgColor,
+        style: { width: actionsColumnWidth, minWidth: actionsColumnWidth }
+      }
+    )
   ] }, headerGroup.id)) });
 };
+var actionsColumnWidth2 = 56;
 var TableBody = ({
   table,
   canCheck = false,
+  hasActionsColumn = false,
   columnActions,
   MenuIcon = MoreVertical,
   listMenuActions,
@@ -1415,6 +1441,15 @@ var TableBody = ({
   onRowHover
 }) => {
   const [hoveredRowId, setHoveredRowId] = useState(null);
+  const totalColumnsSize = table.getVisibleLeafColumns().reduce((sum, column) => sum + column.getSize(), 0);
+  const getColumnStyle = (size) => {
+    if (!size || totalColumnsSize <= 0) return void 0;
+    const baseWidth = `${size / totalColumnsSize * 100}%`;
+    return {
+      width: hasActionsColumn ? `calc((100% - ${actionsColumnWidth2}px) * ${size / totalColumnsSize})` : baseWidth,
+      minWidth: size
+    };
+  };
   return /* @__PURE__ */ jsx(Table.Tbody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxs(
     Table.Tr,
     {
@@ -1458,7 +1493,7 @@ var TableBody = ({
         row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
           Table.Td,
           {
-            style: cell.column.columnDef.size ? { width: cell.column.columnDef.size, minWidth: cell.column.columnDef.size } : void 0,
+            style: getColumnStyle(cell.column.getSize()),
             onClick: () => onRowClick?.(row.original),
             children: /* @__PURE__ */ jsx(
               Text,
@@ -1473,7 +1508,7 @@ var TableBody = ({
           },
           cell.id
         )),
-        (columnActions || listMenuActions) && /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", align: "center", gap: "sm", children: [
+        (columnActions || listMenuActions) && /* @__PURE__ */ jsx(Table.Td, { style: { width: actionsColumnWidth2, minWidth: actionsColumnWidth2 }, children: /* @__PURE__ */ jsxs(Flex, { justify: "flex-end", align: "center", gap: "sm", children: [
           columnActions?.(row.original),
           listMenuActions && /* @__PURE__ */ jsxs(Menu, { variant: "subtle", children: [
             /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, { variant: "subtle", color: "gray", size: "sm", children: /* @__PURE__ */ jsx(MenuIcon, { size: 16 }) }) }),
@@ -1662,6 +1697,7 @@ var SimpleDataTable = ({
             onRowHover,
             table,
             canCheck,
+            hasActionsColumn,
             columnActions,
             listMenuActions
           }