@charlesgomes/leafcode-shared-lib-react 1.0.31 → 1.0.33

package/dist/index.css

@@ -108,7 +108,7 @@ th {
   border-top: 1px solid #edf0f2;
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 0 14px;
+  padding: 0 0 0 7px;
   font-size: 14px;
   font-family: "Roboto", sans-serif;
   font-weight: bold;
@@ -117,7 +117,7 @@ th {
 td {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 5px 1rem;
+  padding: 1.5px 7px;
 }
 .p-datatable .p-datatable-header {
   background: transparent;
@@ -134,9 +134,6 @@ td {
   -moz-appearance: none;
   background: #fff url("./seta-E7LTVAWJ.svg") no-repeat right 6px center;
 }
-.react-tooltip {
-  z-index: 99 !important;
-}
 .p-paginator-left-content {
   flex: 1;
 }
@@ -178,6 +175,30 @@ th {
   background: #094394;
   color: #ffffff;
 }
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column {
+  text-align: center !important;
+  display: table-cell;
+  vertical-align: middle;
+  position: relative;
+}
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column .p-checkbox {
+  position: relative;
+  left: -2px;
+}
+.p-datatable .p-datatable-thead > tr > th.p-selection-column .p-checkbox-input {
+  text-align: center !important;
+  position: relative;
+  left: -1rem;
+}
+.p-selection-column .p-checkbox {
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+}
+.p-column-header-content .p-checkbox {
+  position: static;
+}
 .p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #fafbfc;
 }
@@ -295,6 +316,7 @@ th {
 }
 .p-column-title {
   flex: 1;
+  text-align: left;
 }
 .p-column-filter-add-button {
   font-family: "Roboto", sans-serif;
@@ -400,14 +422,9 @@ th {
   opacity: 1;
 }
 .box-icones-actions-column {
-  position: fixed;
-  z-index: 2;
-  padding: 0.125rem;
   width: fit-content;
   height: fit-content;
   margin: auto;
-  right: 6px;
-  transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -415,6 +432,19 @@ th {
   gap: 0.25rem;
   transition: opacity 0.2s ease;
 }
+.p-datatable .p-datatable-tbody > tr > td:last-child {
+  position: sticky !important;
+  right: 0;
+  z-index: 11;
+  border-left: transparent;
+  border-right: transparent;
+}
+.p-datatable .p-datatable-tbody > tr > td:nth-last-child(2) {
+  border-right: 1px solid #edf0f2 !important;
+}
+.react-tooltip {
+  z-index: 99 !important;
+}
 .box-icones-actions-column:hover {
   opacity: 1;
 }
@@ -469,3 +499,8 @@ th {
     min-width: 100%;
   }
 }
+.p-datatable .p-datatable-thead > tr > th:last-child .p-column-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 17px 0 7px;
+}

package/dist/index.d.mts

@@ -69,6 +69,7 @@ interface ColumnCustom<T> {
   dataType?: "boolean" | "string" | "date" | "dateTime" | "numeric";
   filterGlobal?: boolean;
   filterElement?: ReactNode;
+  showFilterMatchModes?: boolean;
   filterMatchModeOptions?: {
     label: string;
     value: FilterMatchModeType | string;
@@ -96,7 +97,14 @@ declare const DateFilterTemplate: (options: any, mask?: (value: any) => string |
 declare const DateTimeFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const ValueFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const SelectFilterTemplate: (options: any, isLanguagePtBr?: boolean, items?: IItemProps[]) => react_jsx_runtime.JSX.Element;
+declare const CustomFilterElement: (options: any, isLanguagePtBr?: boolean, items?: any[]) => react_jsx_runtime.JSX.Element;
 
+declare const customMatchModes: {
+    notStartsWith: string;
+    notEndsWith: string;
+    empty: string;
+    notEmpty: string;
+};
 declare const getDefaultFilterMatchOptionsString: (isLanguagePtBr?: boolean) => {
     label: string;
     value: string;
@@ -118,4 +126,4 @@ declare const getDefaultFilterMatchOptionsEnumNotNullable: (isLanguagePtBr: bool
     value: FilterMatchMode;
 }[];
 
-export { Button, type ColumnCustom, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, customMatchModes, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };

package/dist/index.d.ts

@@ -69,6 +69,7 @@ interface ColumnCustom<T> {
   dataType?: "boolean" | "string" | "date" | "dateTime" | "numeric";
   filterGlobal?: boolean;
   filterElement?: ReactNode;
+  showFilterMatchModes?: boolean;
   filterMatchModeOptions?: {
     label: string;
     value: FilterMatchModeType | string;
@@ -96,7 +97,14 @@ declare const DateFilterTemplate: (options: any, mask?: (value: any) => string |
 declare const DateTimeFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const ValueFilterTemplate: (options: any, mask?: (value: any) => string | number) => react_jsx_runtime.JSX.Element;
 declare const SelectFilterTemplate: (options: any, isLanguagePtBr?: boolean, items?: IItemProps[]) => react_jsx_runtime.JSX.Element;
+declare const CustomFilterElement: (options: any, isLanguagePtBr?: boolean, items?: any[]) => react_jsx_runtime.JSX.Element;
 
+declare const customMatchModes: {
+    notStartsWith: string;
+    notEndsWith: string;
+    empty: string;
+    notEmpty: string;
+};
 declare const getDefaultFilterMatchOptionsString: (isLanguagePtBr?: boolean) => {
     label: string;
     value: string;
@@ -118,4 +126,4 @@ declare const getDefaultFilterMatchOptionsEnumNotNullable: (isLanguagePtBr: bool
     value: FilterMatchMode;
 }[];
 
-export { Button, type ColumnCustom, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };
+export { Button, type ColumnCustom, CustomFilterElement, DataTableAdvancedFilter, DateFilterTemplate, DateTimeFilterTemplate, type IDataTableProps, type IItemProps, ModalBase, SelectFilterTemplate, ValueFilterTemplate, customMatchModes, getDefaultFilterMatchOptionsDate, getDefaultFilterMatchOptionsEnum, getDefaultFilterMatchOptionsEnumNotNullable, getDefaultFilterMatchOptionsString, getDefaultFilterMatchOptionsStringArray };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  CustomFilterElement: () => CustomFilterElement,
   DataTableAdvancedFilter: () => DataTableAdvancedFilter,
   DateFilterTemplate: () => DateFilterTemplate,
   DateTimeFilterTemplate: () => DateTimeFilterTemplate,
@@ -39,6 +40,7 @@ __export(index_exports, {
   ModalBase: () => ModalBase,
   SelectFilterTemplate: () => SelectFilterTemplate,
   ValueFilterTemplate: () => ValueFilterTemplate,
+  customMatchModes: () => customMatchModes,
   getDefaultFilterMatchOptionsDate: () => getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum: () => getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable: () => getDefaultFilterMatchOptionsEnumNotNullable,
@@ -239,6 +241,7 @@ function TooltipCustom({ label, id }) {
       className: "tooltip-icone",
       opacity: 1,
       place: "top",
+      content: label,
       anchorSelect: `#${id}`,
       style: {
         zIndex: 9999
@@ -464,6 +467,7 @@ function DynamicColumns({
           filter: !isActionsCol,
           frozen: col.frozen,
           alignFrozen: col.alignFrozen,
+          showFilterMatchModes: col.showFilterMatchModes,
           dataType: col.dataType,
           hidden: col.hidden,
           filterElement: col.filterElement ? (options) => col.filterElement?.(options, col.mask) ?? void 0 : void 0,
@@ -1009,6 +1013,7 @@ function DataTableAdvancedFilter({
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
 var import_react_select = __toESM(require("react-select"));
+var import_dropdown = require("primereact/dropdown");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DateFilterTemplate = (options, mask) => {
   const parsedValue = options.value && typeof options.value === "string" ? /* @__PURE__ */ new Date(options.value + "T00:00:00") : options.value;
@@ -1139,6 +1144,76 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
     }
   );
 };
+var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
+  const resolvedItems = items ?? getDefaultFilterMatchOptionsString(isLanguagePtBr);
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode ?? "contains";
+  const currentValue = typeof rawFilter.value === "string" ? rawFilter.value : "";
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      className: "filter-wrapper",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        minWidth: "200px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_dropdown.Dropdown,
+          {
+            value: currentMatchMode,
+            options: resolvedItems,
+            optionLabel: "label",
+            optionValue: "value",
+            placeholder: "Tipo de filtro",
+            style: { width: "100%" },
+            onChange: (e) => {
+              const newMatchMode = e.value;
+              const isNewSpecial = newMatchMode === customMatchModes.empty || newMatchMode === customMatchModes.notEmpty;
+              if (isNewSpecial) {
+                options.filterCallback({
+                  value: null,
+                  matchMode: newMatchMode
+                });
+                return;
+              }
+              options.filterCallback({
+                value: null,
+                matchMode: newMatchMode
+              });
+            }
+          }
+        ),
+        !isSpecial && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_inputtext.InputText,
+          {
+            value: currentValue,
+            placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+            style: { width: "100%" },
+            className: "p-column-filter",
+            onChange: (e) => {
+              const value = e.target.value;
+              if (value.trim()) {
+                options.filterCallback({
+                  value,
+                  matchMode: currentMatchMode
+                });
+              } else {
+                options.filterCallback({
+                  value: null,
+                  matchMode: currentMatchMode
+                });
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
 var import_api4 = require("primereact/api");
@@ -1184,6 +1259,10 @@ var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Vazio" : "Empty",
     value: customMatchModes.empty
+  },
+  {
+    label: isLanguagePtBr ? "N\xE3o Vazio" : "NotEmpty",
+    value: customMatchModes.notEmpty
   }
 ];
 var getDefaultFilterMatchOptionsStringArray = (isLanguagePtBr = true) => [
@@ -1240,6 +1319,7 @@ var import_api5 = require("primereact/api");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  CustomFilterElement,
   DataTableAdvancedFilter,
   DateFilterTemplate,
   DateTimeFilterTemplate,
@@ -1248,6 +1328,7 @@ var import_api5 = require("primereact/api");
   ModalBase,
   SelectFilterTemplate,
   ValueFilterTemplate,
+  customMatchModes,
   getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable,

package/dist/index.mjs

@@ -190,6 +190,7 @@ function TooltipCustom({ label, id }) {
       className: "tooltip-icone",
       opacity: 1,
       place: "top",
+      content: label,
       anchorSelect: `#${id}`,
       style: {
         zIndex: 9999
@@ -415,6 +416,7 @@ function DynamicColumns({
           filter: !isActionsCol,
           frozen: col.frozen,
           alignFrozen: col.alignFrozen,
+          showFilterMatchModes: col.showFilterMatchModes,
           dataType: col.dataType,
           hidden: col.hidden,
           filterElement: col.filterElement ? (options) => col.filterElement?.(options, col.mask) ?? void 0 : void 0,
@@ -960,7 +962,8 @@ function DataTableAdvancedFilter({
 
 // src/components/DataTableAdvancedFilter/FilterTemplates.tsx
 import Select from "react-select";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { Dropdown } from "primereact/dropdown";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var DateFilterTemplate = (options, mask) => {
   const parsedValue = options.value && typeof options.value === "string" ? /* @__PURE__ */ new Date(options.value + "T00:00:00") : options.value;
   return /* @__PURE__ */ jsx11(
@@ -1090,6 +1093,76 @@ var SelectFilterTemplate = (options, isLanguagePtBr = true, items = []) => {
     }
   );
 };
+var CustomFilterElement = (options, isLanguagePtBr = true, items) => {
+  const resolvedItems = items ?? getDefaultFilterMatchOptionsString(isLanguagePtBr);
+  const rawFilter = options.value ?? {};
+  const currentMatchMode = rawFilter.matchMode ?? "contains";
+  const currentValue = typeof rawFilter.value === "string" ? rawFilter.value : "";
+  const isSpecial = currentMatchMode === customMatchModes.empty || currentMatchMode === customMatchModes.notEmpty;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "filter-wrapper",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        minWidth: "200px"
+      },
+      children: [
+        /* @__PURE__ */ jsx11(
+          Dropdown,
+          {
+            value: currentMatchMode,
+            options: resolvedItems,
+            optionLabel: "label",
+            optionValue: "value",
+            placeholder: "Tipo de filtro",
+            style: { width: "100%" },
+            onChange: (e) => {
+              const newMatchMode = e.value;
+              const isNewSpecial = newMatchMode === customMatchModes.empty || newMatchMode === customMatchModes.notEmpty;
+              if (isNewSpecial) {
+                options.filterCallback({
+                  value: null,
+                  matchMode: newMatchMode
+                });
+                return;
+              }
+              options.filterCallback({
+                value: null,
+                matchMode: newMatchMode
+              });
+            }
+          }
+        ),
+        !isSpecial && /* @__PURE__ */ jsx11(
+          InputText,
+          {
+            value: currentValue,
+            placeholder: isLanguagePtBr ? "Pesquisar" : "Search",
+            style: { width: "100%" },
+            className: "p-column-filter",
+            onChange: (e) => {
+              const value = e.target.value;
+              if (value.trim()) {
+                options.filterCallback({
+                  value,
+                  matchMode: currentMatchMode
+                });
+              } else {
+                options.filterCallback({
+                  value: null,
+                  matchMode: currentMatchMode
+                });
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/components/DataTableAdvancedFilter/filterModes.ts
 import { FilterMatchMode as FilterMatchMode4 } from "primereact/api";
@@ -1135,6 +1208,10 @@ var getDefaultFilterMatchOptionsString = (isLanguagePtBr = true) => [
   {
     label: isLanguagePtBr ? "Vazio" : "Empty",
     value: customMatchModes.empty
+  },
+  {
+    label: isLanguagePtBr ? "N\xE3o Vazio" : "NotEmpty",
+    value: customMatchModes.notEmpty
   }
 ];
 var getDefaultFilterMatchOptionsStringArray = (isLanguagePtBr = true) => [
@@ -1190,6 +1267,7 @@ var getDefaultFilterMatchOptionsEnumNotNullable = (isLanguagePtBr) => [
 import { FilterMatchMode as FilterMatchMode5, FilterOperator as FilterOperator2 } from "primereact/api";
 export {
   Button,
+  CustomFilterElement,
   DataTableAdvancedFilter,
   DateFilterTemplate,
   DateTimeFilterTemplate,
@@ -1198,6 +1276,7 @@ export {
   ModalBase,
   SelectFilterTemplate,
   ValueFilterTemplate,
+  customMatchModes,
   getDefaultFilterMatchOptionsDate,
   getDefaultFilterMatchOptionsEnum,
   getDefaultFilterMatchOptionsEnumNotNullable,

package/dist/styles/table.css

@@ -125,7 +125,7 @@ th {
   border-top: 1px solid #edf0f2;
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 0 14px;
+  padding: 0 0 0 7px;
   font-size: 14px;
   font-family: "Roboto", sans-serif;
   font-weight: bold;
@@ -135,7 +135,7 @@ th {
 td {
   border-bottom: 1px solid #edf0f2;
   border-left: 1px solid #edf0f2;
-  padding: 5px 1rem;
+  padding: 1.5px 7px;
 }
 
 .p-datatable .p-datatable-header {
@@ -157,10 +157,6 @@ td {
   background: #fff url("../assets/images/seta.svg") no-repeat right 6px center;
 }
 
-.react-tooltip {
-  z-index: 99 !important;
-}
-
 .p-paginator-left-content {
   flex: 1;
 }
@@ -175,7 +171,7 @@ th {
   font-weight: bold;
 }
 
-.p-datatable .p-datatable-tbody>tr {
+.p-datatable .p-datatable-tbody > tr {
   background: #fff;
   color: #000;
   font-family: "roboto", sans-serif;
@@ -205,13 +201,43 @@ th {
   left: -2px;
 }
 
-.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight
+  .p-checkbox-box {
   border-color: #094394;
   background: #094394;
   color: #ffffff;
 }
 
-.p-datatable .p-datatable-tbody>tr.p-highlight {
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column {
+  text-align: center !important;
+  display: table-cell;
+  vertical-align: middle;
+  position: relative;
+}
+
+.p-datatable .p-datatable-tbody > tr > td.p-selection-column .p-checkbox {
+  position: relative;
+  left: -2px;
+}
+
+.p-datatable .p-datatable-thead > tr > th.p-selection-column .p-checkbox-input {
+  text-align: center !important;
+  position: relative;
+  left: -1rem;
+}
+
+.p-selection-column .p-checkbox {
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+}
+
+.p-column-header-content .p-checkbox {
+  position: static;
+}
+
+.p-datatable .p-datatable-tbody > tr.p-highlight {
   background: #fafbfc;
 }
 
@@ -347,6 +373,7 @@ th {
 
 .p-column-title {
   flex: 1;
+  text-align: left;
 }
 
 .p-column-filter-add-button {
@@ -360,7 +387,7 @@ th {
   padding: 10px 0;
 }
 
-.p-column-filter-add-button>svg {
+.p-column-filter-add-button > svg {
   width: 12px;
   height: 12px;
 }
@@ -404,7 +431,7 @@ th {
   padding: 10px 0 0 0;
 }
 
-.p-column-filter-remove-button>svg {
+.p-column-filter-remove-button > svg {
   width: 12px;
   height: 12px;
 }
@@ -417,8 +444,8 @@ th {
   z-index: 99;
 }
 
-.NextPage>svg,
-.PrevPage>svg {
+.NextPage > svg,
+.PrevPage > svg {
   fill: #fff;
 }
 
@@ -473,14 +500,9 @@ th {
 }
 
 .box-icones-actions-column {
-  position: fixed;
-  z-index: 2;
-  padding: 0.125rem;
   width: fit-content;
   height: fit-content;
   margin: auto;
-  right: 6px;
-  transform: translate( -50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -489,6 +511,22 @@ th {
   transition: opacity 0.2s ease;
 }
 
+.p-datatable .p-datatable-tbody > tr > td:last-child {
+  position: sticky !important;
+  right: 0;
+  z-index: 11;
+  border-left: transparent;
+  border-right: transparent;
+}
+
+.p-datatable .p-datatable-tbody > tr > td:nth-last-child(2) {
+  border-right: 1px solid #edf0f2 !important;
+}
+
+.react-tooltip {
+  z-index: 99 !important;
+}
+
 .box-icones-actions-column:hover {
   opacity: 1;
 }
@@ -542,7 +580,6 @@ th {
 }
 
 @media (max-width: 567px) {
-
   .disablePagination,
   .paginatorLeft {
     display: grid;
@@ -552,4 +589,10 @@ th {
   .custom-select {
     min-width: 100%;
   }
-}
+}
+
+.p-datatable .p-datatable-thead > tr > th:last-child .p-column-title {
+  flex: 1;
+  text-align: center;
+  padding: 0 17px 0 7px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",