jclib-ui 1.0.203 → 1.0.204

package/dist/jclib-ui.es.js

@@ -4220,10 +4220,16 @@ const Container$7 = styled.div`
 const TableContainer = styled.table`
   --color-tb: var(--pn-color-border);
   --color-bg: var(--bs-body);
+  --table-border: 1px solid var(--bs-border-color);
 
   width: 100%;
   margin-bottom: 8px;
 
+  border-collapse: separate;
+  border-spacing: 0;
+
+  border-top: ${({ hasBorder }) => hasBorder ? "var(--table-border)" : "none"};
+
   tr {
     --table-line-height: 36px;
     height: var(--table-line-height);
@@ -4232,7 +4238,9 @@ const TableContainer = styled.table`
   th,
   td {
     font-size: var(--font-size);
-    border: ${({ hasBorder: border }) => border ? "1px solid var(--bs-border-color)" : "none"};
+
+    border-right: ${({ hasBorder }) => hasBorder ? "var(--table-border)" : "none"};
+    border-bottom: ${({ hasBorder }) => hasBorder ? "var(--table-border)" : "none"};
 
     &:first-child {
       border-left: none;
@@ -4240,9 +4248,16 @@ const TableContainer = styled.table`
   }
 
   thead {
-    border-bottom: 2px solid var(--bs-border-color);
+    background-color: var(--bs-body-bg);
+
+    &.table-header--fixed {
+      position: sticky;
+      top: 0;
+      z-index: 9;
+    }
 
     th {
+      border-bottom: 2px solid var(--bs-border-color);
       padding: 5px;
       color: var(--bs-body-color);
       font-weight: bold;
@@ -4529,7 +4544,9 @@ function Table({
   border = true,
   sizeBreak = 767,
   msgSemDados = "Nenhum registro encontrado!",
-  getLineColor
+  getLineColor,
+  onClick,
+  fixedHeader
 }) {
   var _a;
   if (colunas) {
@@ -4548,7 +4565,14 @@ function Table({
   if (!dados || dados.length == 0)
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "alert alert-warning", children: msgSemDados });
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Container$7, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TableContainer, { alignTop, sizeBreak, hasBorder: border, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TableHead, { colunas, incColActions }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TableHead,
+      {
+        fixedHeader,
+        colunas,
+        incColActions
+      }
+    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       TableBody,
       {
@@ -4557,16 +4581,17 @@ function Table({
         dados,
         opcoes,
         colorir,
-        getLineColor
+        getLineColor,
+        onClick
       }
     )
   ] }) });
 }
-function TableHead({ colunas, incColActions = true }) {
+function TableHead({ colunas, fixedHeader, incColActions = true }) {
   if (!colunas) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { className: fixedHeader ? "table-header--fixed" : "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
     colunas.filter((c2) => c2.campo !== "color").map((col, key) => {
       if (typeof col.visible == "boolean" && !col.visible) {
         return null;
@@ -4590,7 +4615,8 @@ function TableBody({
   opcoes,
   dados,
   colorir,
-  getLineColor
+  getLineColor,
+  onClick
 }) {
   var _a;
   const width = ((_a = acoes == null ? void 0 : acoes.acoes) == null ? void 0 : _a.length) || "auto";
@@ -4607,65 +4633,77 @@ function TableBody({
   if (!dados || (dados == null ? void 0 : dados.length) == 0) {
     return null;
   }
+  function handleClickColActions(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: dados == null ? void 0 : dados.map((line, index) => {
     var _a2;
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-      colunas == null ? void 0 : colunas.map((col, colId) => {
-        if (typeof col.visible == "boolean" && !col.visible) {
-          return null;
-        }
-        let width2 = col.campoChave ? 65 : col.largura || "auto";
-        if (col.campoChave && col.largura) {
-          width2 = col.largura;
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "td",
-          {
-            className: col.className || "",
-            style: {
-              textAlign: getAlign(col),
-              fontWeight: col.campoChave || col.bold ? "bold" : "normal",
-              color: getColor(col, line),
-              width: width2
-            },
-            children: [
-              col.titulo && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "titulo", children: [
-                col.tituloCard || col.titulo,
-                ": "
-              ] }),
-              getDataCol(col, line)
-            ]
-          },
-          colId
-        );
-      }),
-      acoes && ((_a2 = acoes.acoes) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "acoes", style: { width }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "acoes-layout", children: [
-        acoes == null ? void 0 : acoes.acoes.map((acao, key) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "span",
-          {
-            onClick: () => {
-              var _a3, _b;
-              if ((_b = (_a3 = acao == null ? void 0 : acao.botao) == null ? void 0 : _a3.props) == null ? void 0 : _b.disabled) {
-                return;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "tr",
+      {
+        role: onClick ? "button" : "",
+        onClick: (ev) => onClick && onClick(line, ev),
+        children: [
+          colunas == null ? void 0 : colunas.map((col, colId) => {
+            if (typeof col.visible == "boolean" && !col.visible) {
+              return null;
+            }
+            let width2 = col.campoChave ? 65 : col.largura || "auto";
+            if (col.campoChave && col.largura) {
+              width2 = col.largura;
+            }
+            return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "td",
+              {
+                className: col.className || "",
+                style: {
+                  textAlign: getAlign(col),
+                  fontWeight: col.campoChave || col.bold ? "bold" : "normal",
+                  color: getColor(col, line),
+                  width: width2
+                },
+                children: [
+                  col.titulo && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "titulo", children: [
+                    col.tituloCard || col.titulo,
+                    ": "
+                  ] }),
+                  getDataCol(col, line)
+                ]
+              },
+              colId
+            );
+          }),
+          acoes && ((_a2 = acoes.acoes) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "acoes", style: { width }, onClick: handleClickColActions, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "acoes-layout", children: [
+            acoes == null ? void 0 : acoes.acoes.map((acao, key) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "span",
+              {
+                onClick: () => {
+                  var _a3, _b;
+                  if ((_b = (_a3 = acao == null ? void 0 : acao.botao) == null ? void 0 : _a3.props) == null ? void 0 : _b.disabled) {
+                    return;
+                  }
+                  acao.funcao(line[acoes.campo], line, index);
+                },
+                children: acao.botao
+              },
+              key
+            )),
+            opcoes && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              DropDownButton,
+              {
+                items: opcoes,
+                size: "sm",
+                title: "Opções",
+                dados: line,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-ellipsis-h" })
               }
-              acao.funcao(line[acoes.campo], line, index);
-            },
-            children: acao.botao
-          },
-          key
-        )),
-        opcoes && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          DropDownButton,
-          {
-            items: opcoes,
-            size: "sm",
-            title: "Opções",
-            dados: line,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("i", { className: "fas fa-ellipsis-h" })
-          }
-        ) })
-      ] }) })
-    ] }, index);
+            ) })
+          ] }) })
+        ]
+      },
+      index
+    );
   }) });
 }
 styled.div`