@zauru-sdk/components 2.0.119 → 2.0.120

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.120](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.119...v2.0.120) (2025-02-05)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.119](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.118...v2.0.119) (2025-02-05)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/DynamicTable/GenericDynamicTable.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
 import { GenericDynamicTableColumn, RowDataType, SelectFieldOption } from "@zauru-sdk/types";
 export type FooterColumnConfig = {
-    content: React.ReactNode;
+    content?: React.ReactNode;
     className?: string;
     name?: string;
+    cell?: (rows: RowDataType[]) => React.ReactNode;
 };
 type Props = {
     name?: string;
@@ -14,17 +15,31 @@ type Props = {
     footerRow?: FooterColumnConfig[];
     thCSSProperties?: React.CSSProperties;
     thElementsClassName?: string;
+    /** Controla si se pueden o no editar los campos (oculta botones y/o deshabilita campos). */
     editable?: boolean;
+    /** Opciones de búsqueda. */
     searcheables?: SelectFieldOption[];
+    /** Activa o desactiva el “skeleton” de carga. */
     loading?: boolean;
+    /** Controla la paginación. */
     paginated?: boolean;
     defaultItemsPerPage?: number;
     itemsPerPageOptions?: number[];
+    /** Quita el color de fondo por defecto a las filas pares. */
     withoutBg?: boolean;
+    /** Orientación de los encabezados (`horizontal` o `vertical`). */
     orientation?: "horizontal" | "vertical";
+    /** Máximo número de filas permitidas al hacer clic en “agregar fila”. */
     maxRows?: number;
+    /** Muestra un diálogo de confirmación antes de eliminar una fila. */
     confirmDelete?: boolean;
+    /** Función personalizada para manejar el botón de “agregar fila”. */
     addRowButtonHandler?: (tableData: RowDataType[], setTableData: (data: RowDataType[]) => void) => void;
+    /**
+     * Controla si todo el componente se renderiza en modo de solo lectura,
+     * es decir, sin permitir ningún tipo de interacción de edición o eliminación.
+     */
+    readOnly?: boolean;
 };
 /**
  *
@@ -40,6 +55,23 @@ type Props = {
     defaultValue={
       invoiceDetailsDefaultValue ?? [{ id: crypto.randomUUID() }]
     }
+    addRowButtonHandler={async (tableData, setTableData) => {
+      const selectedItem = await createItemModal(ecommerceItems, {
+        itemSize: {
+          width: "150px",
+          height: "150px",
+        },
+      });
+      if (selectedItem) {
+        setTableData([
+          ...tableData,
+          {
+            id: crypto.randomUUID(),
+            code: selectedItem.code,
+          },
+        ]);
+      }
+    }}
     columns={[
       {
         label: "Producto",
@@ -70,11 +102,23 @@ type Props = {
       }
     ]}
     footerRow={[
-      { content: "Total", className: "text-left font-bold" },
-      { content: calculateTotal(), className: "text-center" },
-      { content: "", className: "text-center" }
+      {
+        name: "code",
+        content: "Total",
+        className: "text-left font-bold",
+      },
+      {
+        name: "total",
+        className: "text-left font-bold",
+        cell: (rows: any) => {
+          return `${rows.reduce((acc: number, row: any) => {
+            return acc + row.total;
+          }, 0)}`;
+        },
+      },
     ]}
     maxRows={2}
+    readOnly={false}
   />
  */
 export declare const GenericDynamicTable: (props: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/DynamicBaculoForm/index.d.ts

@@ -1,6 +1,15 @@
 import { FormGraphQL, FormSubmissionValueGraphQL } from "@zauru-sdk/types";
+import { z } from "zod";
+export declare const getDynamicBaculoFormSchema: (form?: FormGraphQL, extraFieldValidations?: {
+    [key: string]: any;
+}) => z.ZodAny | z.ZodObject<{
+    [x: string]: any;
+}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+    [x: string]: any;
+}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+    [x: string]: any;
+}, z.ZodTypeAny, "passthrough">>;
 type Props = {
-    formName?: string;
     form?: FormGraphQL;
     options?: {
         showTitle: boolean;

package/dist/Form/FileUpload/index.d.ts

@@ -7,7 +7,6 @@ type Props = {
     helpText?: string;
     hint?: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    disabled?: boolean;
     readOnly?: boolean;
     fileTypes?: string[];
     showAvailableTypes?: boolean;

package/dist/Modal/ItemModal.d.ts

@@ -1,24 +1,35 @@
 type Item = {
+    item_id: string;
     name: string;
     code: string;
     unitPrice: number;
     stock: number;
     currencyPrefix: string;
     imageUrl: string;
+    quantity: number;
+    flexiblePrice: boolean;
+    priceText: string;
 };
-type ItemCategory = {
+export type ItemModalCategory = {
     name: string;
     items: Item[];
 };
+type OnCloseType = (selectedItem: Item | null) => void;
 type ItemModalProps = {
-    itemList: ItemCategory[];
-    onClose: (selectedItem: Item | null) => void;
+    itemList: ItemModalCategory[];
+    onClose: OnCloseType;
     config?: {
-        itemSize: {
+        itemSize?: {
             width: string;
             height: string;
         };
     };
+    /**
+     * Controla cómo se muestran las categorías.
+     * - "text": Estilo por defecto (un simple título con flecha).
+     * - "card": Tarjeta más grande y ancha, útil para pantallas táctiles (tablet).
+     */
+    categoryViewMode?: "text" | "card";
 };
-export declare const createItemModal: (itemList: ItemCategory[], config?: ItemModalProps["config"]) => Promise<Item | null>;
+export declare const createItemModal: (itemList: ItemModalCategory[], config?: ItemModalProps["config"], categoryViewMode?: ItemModalProps["categoryViewMode"]) => Promise<Item | null>;
 export {};

package/dist/NavBar/NavBar.types.d.ts

@@ -3,7 +3,7 @@ export type NavBarItem = {
     link: string;
     loggedIn: boolean;
     icon?: any;
-    selectedColor?: "green";
+    selectedColor?: "pink" | "purple" | "slate" | "green" | "yellow" | "red" | "sky";
     color?: ColorInterface;
     childrens?: Exclude<NavBarItem, "loggedIn">[];
     reduxNotificationBadge?: (state: any) => string | number;
@@ -25,6 +25,7 @@ export type ColorInterface = {
     bg700: string;
     bg600: string;
     bg500: string;
+    bg200: string;
     ring600: string;
     ring500: string;
 };

package/dist/NavBar/NavBar.utils.d.ts

@@ -4,6 +4,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };
@@ -12,6 +13,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };
@@ -20,6 +22,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };
@@ -28,6 +31,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };
@@ -36,6 +40,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };
@@ -44,6 +49,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };
@@ -52,6 +58,7 @@ export declare const COLORS: {
         bg700: string;
         bg600: string;
         bg500: string;
+        bg200: string;
         ring600: string;
         ring500: string;
     };

package/dist/esm/Buttons/Button.js

@@ -11,6 +11,7 @@ export const Button = (props) => {
             bg700: "bg-green-700",
             bg600: "bg-green-600",
             bg500: "bg-green-500",
+            bg200: "bg-green-200",
             ring600: "ring-green-600",
             ring500: "ring-green-500",
         },
@@ -19,6 +20,7 @@ export const Button = (props) => {
             bg700: "bg-indigo-700",
             bg600: "bg-indigo-600",
             bg500: "bg-indigo-500",
+            bg200: "bg-indigo-200",
             ring600: "ring-indigo-600",
             ring500: "ring-indigo-500",
         },
@@ -27,6 +29,7 @@ export const Button = (props) => {
             bg700: "bg-red-700",
             bg600: "bg-red-600",
             bg500: "bg-red-500",
+            bg200: "bg-red-200",
             ring600: "ring-red-600",
             ring500: "ring-red-500",
         },
@@ -35,6 +38,7 @@ export const Button = (props) => {
             bg700: "bg-yellow-700",
             bg600: "bg-yellow-600",
             bg500: "bg-yellow-500",
+            bg200: "bg-yellow-200",
             ring600: "ring-yellow-600",
             ring500: "ring-yellow-500",
         },
@@ -46,13 +50,13 @@ export const Button = (props) => {
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    const buttonContent = (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: "action", value: name }), _jsx("button", { type: type, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
-                    ? " bg-opacity-25 "
-                    : ""} ${loading
-                    ? " cursor-progress"
-                    : `${disabled || (enableFormErrorsValidation && formHasErrors)
-                        ? ""
-                        : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside })] }));
+    const buttonContent = (_jsx(_Fragment, { children: _jsx("button", { type: type, name: "action", value: name, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `ml-2 ${loading || disabled || (enableFormErrorsValidation && formHasErrors)
+                ? " bg-opacity-25 "
+                : ""} ${loading
+                ? " cursor-progress"
+                : `${disabled || (enableFormErrorsValidation && formHasErrors)
+                    ? ""
+                    : `hover:${color.bg700}`}`} inline-flex justify-center rounded-md border border-transparent ${color.bg600} py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${color.ring500} focus:ring-offset-2 ${className}`, children: loading ? loadingText : inside }) }));
     return (_jsxs(_Fragment, { children: [(enableFormErrorsValidation && formHasErrors && errorMessage) ||
                 (enableFormErrorsDescriptions && errorMessage) ? (_jsx("div", { className: "flex flex-col items-end mb-2", children: _jsx("div", { className: "p-2 bg-red-100 border border-red-400 text-red-700 rounded-md shadow-sm", children: _jsx("p", { className: "text-sm", children: errorMessage }) }) })) : null, buttonContent] }));
 };

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -12,7 +12,7 @@ import { TrashSvg } from "@zauru-sdk/icons";
 import { useFormContext } from "react-hook-form";
 import { ComponentError } from "../Alerts/index.js";
 const GenericDynamicTableErrorComponent = ({ name }) => {
-    const { formState: { errors }, } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+    const { formState: { errors }, } = useFormContext() || { formState: {} };
     const error = errors ? errors[name ?? "-1"] : undefined;
     return error ? (_jsxs("p", { className: `mt-2 text-sm text-red-600 dark:text-red-500`, children: [_jsx("span", { className: "font-medium", children: "Oops!" }), " ", error?.message?.toString()] })) : (_jsx(_Fragment, {}));
 };
@@ -30,6 +30,23 @@ const GenericDynamicTableErrorComponent = ({ name }) => {
     defaultValue={
       invoiceDetailsDefaultValue ?? [{ id: crypto.randomUUID() }]
     }
+    addRowButtonHandler={async (tableData, setTableData) => {
+      const selectedItem = await createItemModal(ecommerceItems, {
+        itemSize: {
+          width: "150px",
+          height: "150px",
+        },
+      });
+      if (selectedItem) {
+        setTableData([
+          ...tableData,
+          {
+            id: crypto.randomUUID(),
+            code: selectedItem.code,
+          },
+        ]);
+      }
+    }}
     columns={[
       {
         label: "Producto",
@@ -60,15 +77,33 @@ const GenericDynamicTableErrorComponent = ({ name }) => {
       }
     ]}
     footerRow={[
-      { content: "Total", className: "text-left font-bold" },
-      { content: calculateTotal(), className: "text-center" },
-      { content: "", className: "text-center" }
+      {
+        name: "code",
+        content: "Total",
+        className: "text-left font-bold",
+      },
+      {
+        name: "total",
+        className: "text-left font-bold",
+        cell: (rows: any) => {
+          return `${rows.reduce((acc: number, row: any) => {
+            return acc + row.total;
+          }, 0)}`;
+        },
+      },
     ]}
     maxRows={2}
+    readOnly={false}
   />
  */
 export const GenericDynamicTable = (props) => {
-    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, } = props;
+    const { columns, onChange, className, footerRow, defaultValue = [], thCSSProperties, thElementsClassName = "", editable = true, readOnly = false, // Nuevo prop
+    searcheables = [], loading = false, paginated = true, defaultItemsPerPage = 10, itemsPerPageOptions = [10, 50, 100], name, withoutBg = false, orientation = "horizontal", maxRows, confirmDelete = true, addRowButtonHandler, } = props;
+    /**
+     * Definimos una variable interna para saber si los campos son
+     * efectivamente editables: solo si `editable` es true y `readOnly` es false.
+     */
+    const isEditable = editable && !readOnly;
     try {
         const [tableData, setTableData] = useState(defaultValue);
         const [deletedData, setDeletedData] = useState([]);
@@ -80,12 +115,14 @@ export const GenericDynamicTable = (props) => {
             if (defaultValue.length) {
                 setTableData(defaultValue);
             }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
         useEffect(() => {
             setFilteredTableData(tableData);
         }, [tableData]);
         useEffect(() => {
             changeFilteredData();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [tableData, search]);
         const totalPages = () => {
             return Math.ceil(filteredTableData.length / itemsPerPage);
@@ -97,11 +134,11 @@ export const GenericDynamicTable = (props) => {
             const defs = {};
             columns.forEach((x) => {
                 defs[`${x.name}`] =
-                    x.type == "label" || x.type == "textField"
+                    x.type === "label" || x.type === "textField"
                         ? ""
-                        : x.type == "selectField"
+                        : x.type === "selectField"
                             ? 0
-                            : x.type == "checkbox"
+                            : x.type === "checkbox"
                                 ? false
                                 : 0;
             });
@@ -113,6 +150,8 @@ export const GenericDynamicTable = (props) => {
         const removeRow = (rowId) => {
             const newDeletedData = [...deletedData];
             const deletedItem = tableData?.find((x) => x.id === rowId);
+            // Si la fila tenía un "id" no numérico (ej. generamos un UUID al vuelo),
+            // igual se procede a eliminar, aunque no se guarde en "deletedData".
             if (deletedItem && !isNaN(deletedItem.id)) {
                 newDeletedData.push(deletedItem);
             }
@@ -132,23 +171,27 @@ export const GenericDynamicTable = (props) => {
             });
         };
         const renderHeader = () => {
+            const rendereableColumns = columns.filter((column) => column.type !== "hidden");
             if (orientation === "horizontal") {
-                return (_jsxs("tr", { style: { ...thCSSProperties }, children: [columns.map((column, index) => {
-                            const ancho = column.width ?? (editable ? 94 : 100) / (columns.length ?? 1);
+                return (_jsxs("tr", { style: { ...thCSSProperties }, children: [rendereableColumns.map((column, index) => {
+                            const ancho = column.width ??
+                                (isEditable ? 94 : 100) / (rendereableColumns.length ?? 1);
                             return (_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, style: { width: `${ancho}%` }, children: column.label }, index));
-                        }), editable && _jsx("th", { style: { width: "4%" } })] }));
+                        }), isEditable && _jsx("th", { style: { width: "4%" } })] }));
             }
             else {
                 return null;
             }
         };
         const renderRow = (rowData, index) => {
+            const rendereableColumns = columns.filter((column) => column.type !== "hidden");
             if (orientation === "horizontal") {
-                return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [columns.map((column) => renderCell(rowData, column)), editable && renderDeleteButton(rowData)] }, rowData.id));
+                return (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [rendereableColumns.map((column) => renderCell(rowData, column)), isEditable && renderDeleteButton(rowData)] }, rowData.id));
             }
             else {
-                return columns.map((column) => (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, children: column.label }), renderCell(rowData, column), editable &&
-                            column === columns[columns.length - 1] &&
+                // Orientación vertical
+                return rendereableColumns.map((column) => (_jsxs("tr", { className: index % 2 === 0 ? `${withoutBg ? "" : "bg-gray-200"}` : "", children: [_jsx("th", { className: `text-left align-middle p-2 ${thElementsClassName} ${column.headerClassName || ""}`, children: column.label }), renderCell(rowData, column), isEditable &&
+                            column === rendereableColumns[rendereableColumns.length - 1] &&
                             renderDeleteButton(rowData)] }, `${rowData.id}-${column.name}`)));
             }
         };
@@ -156,13 +199,24 @@ export const GenericDynamicTable = (props) => {
             if (loading) {
                 return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: _jsx(LoadingInputSkeleton, {}) }, `${rowData.id}-${column.name}`));
             }
+            if (column.type === "hidden") {
+                return _jsx(_Fragment, {});
+            }
             const tempVal = rowData[column.name];
             const defaultVal = column.type === "selectField"
                 ? column.options?.find((x) => x.value === tempVal)
                 : tempVal;
+            // Solo lectura: en este caso mostramos el valor como label
+            if (readOnly) {
+                return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: _jsx("div", { children: column.cell
+                            ? column.cell(rowData)
+                            : defaultVal?.label ?? tempVal }) }, `${rowData.id}-${column.name}`));
+            }
+            // Modo normal
             if (column.type === "label") {
                 return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: _jsx("div", { children: column.cell ? column.cell(rowData) : defaultVal }) }, `${rowData.id}-${column.name}`));
             }
+            // Determinamos el componente que usaremos según "type"
             const FieldComponent = column.type === "textField"
                 ? TextField
                 : column.type === "checkbox"
@@ -171,7 +225,9 @@ export const GenericDynamicTable = (props) => {
             const setTableValue = (columnName, newValue) => {
                 handleChange(columnName, newValue, rowData.id);
             };
-            return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: column.loadingOptions ? (_jsx(LoadingInputSkeleton, {})) : (_jsx(FieldComponent, { name: `${rowData.id}-${column.name}`, type: column.textFieldType, integer: !!column.integer, disabled: column.disabled, isClearable: true, onChange: (value) => {
+            return (_jsx("td", { className: `align-middle p-1 ${column.cellClassName || ""}`, children: column.loadingOptions ? (_jsx(LoadingInputSkeleton, {})) : (_jsx(FieldComponent, { name: `${rowData.id}-${column.name}`, type: column.textFieldType, integer: !!column.integer, 
+                    /** Se deshabilita si la columna lo exige o si la tabla está en modo no editable */
+                    disabled: column.disabled || !isEditable, isClearable: true, onChange: (value) => {
                         const sendValue = value?.value ?? value;
                         handleChange(column.name, sendValue, rowData.id);
                         column.onChange &&
@@ -197,6 +253,7 @@ export const GenericDynamicTable = (props) => {
                     }, type: "button", children: _jsx(TrashSvg, {}) }) }) }));
         const renderRows = () => {
             let mapeable = filteredTableData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);
+            // Si estamos cargando, mostramos celdas skeleton
             if (loading) {
                 mapeable = [
                     { id: 1 },
@@ -244,7 +301,7 @@ export const GenericDynamicTable = (props) => {
         };
         return (_jsxs(_Fragment, { children: [name && (_jsxs(_Fragment, { children: [_jsx(GenericDynamicTableErrorComponent, { name: name }), _jsx("input", { name: name, type: "hidden", value: JSON.stringify(tableData), hidden: true }), _jsx("input", { name: `deleted_${name}`, type: "hidden", value: JSON.stringify(deletedData), hidden: true })] })), _jsxs("div", { className: `${className}`, children: [searcheables.length > 0 && (_jsx("div", { children: _jsx(TextField, { className: "mb-2", name: "search", title: `Buscar por: ${searcheables
                                     .map((x) => x.label)
-                                    .join(", ")}`, onChange: handleChangeSearch, disabled: loading }) })), _jsxs("table", { className: "w-full", children: [orientation === "horizontal" && _jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), editable && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: orientation === "horizontal" ? columns.length + 1 : 2, className: "align-middle", children: (!maxRows || tableData.length < maxRows) && (_jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
+                                    .join(", ")}`, onChange: handleChangeSearch, disabled: loading || readOnly }) })), _jsxs("table", { className: "w-full", children: [orientation === "horizontal" && _jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), isEditable && (_jsx("tfoot", { children: _jsx("tr", { children: _jsx("td", { colSpan: orientation === "horizontal" ? columns.length + 1 : 2, className: "align-middle", children: (!maxRows || tableData.length < maxRows) && (_jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
                                                     event.preventDefault();
                                                     event.stopPropagation();
                                                     if (addRowButtonHandler) {
@@ -253,10 +310,12 @@ export const GenericDynamicTable = (props) => {
                                                     else {
                                                         addRow();
                                                     }
-                                                }, type: "button", children: "+" })) }) }) })), footerRow && (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsxs("tr", { children: [columns.map((column, index) => {
+                                                }, type: "button", children: "+" })) }) }) })), footerRow && (_jsx("tfoot", { className: "border-t-2 border-black", children: _jsxs("tr", { children: [columns
+                                                .filter((column) => column.type !== "hidden")
+                                                .map((column, index) => {
                                                 const footerCell = footerRow.find((fc) => fc.name === column.name);
-                                                return (_jsx("td", { colSpan: orientation === "vertical" ? 2 : 1, className: `align-middle ${footerCell?.className || ""}`, children: footerCell ? footerCell.content : _jsx(_Fragment, {}) }, index));
-                                            }), editable && _jsx("td", {})] }) }))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages(), onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
+                                                return (_jsx("td", { colSpan: orientation === "vertical" ? 2 : 1, className: `align-middle ${footerCell?.className || ""}`, children: footerCell ? (footerCell.cell ? (footerCell.cell(tableData)) : (footerCell.content)) : (_jsx(_Fragment, {})) }, index));
+                                            }), isEditable && _jsx("td", {})] }) }))] }), paginated && totalPages() > 1 && (_jsxs("div", { className: "flex justify-between items-center mt-4", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(Button, { type: "button", disabled: currentPage === 1 || readOnly, onClickSave: () => setCurrentPage((old) => Math.max(old - 1, 1)), children: "Anterior" }), _jsx("span", { className: "mx-2", children: `Página ${currentPage} de ${totalPages()}` }), _jsx(Button, { type: "button", disabled: currentPage === totalPages() || readOnly, onClickSave: () => setCurrentPage((old) => Math.min(old + 1, totalPages())), children: "Siguiente" })] }), _jsx("div", { children: _jsx("select", { value: itemsPerPage, onChange: (e) => {
                                             setItemsPerPage(Number(e.target.value));
                                             setCurrentPage(1); // resetear la página al cambiar los elementos por página
                                         }, children: itemsPerPageOptions.map((option) => (_jsxs("option", { value: option, children: [option, " elementos por p\u00E1gina"] }, option))) }) })] }))] })] }));

package/dist/esm/Form/DynamicBaculoForm/index.js

@@ -13,10 +13,34 @@ import { getDepSelectOptions, getMunSelectOptions } from "@zauru-sdk/common";
 import { StaticAlert } from "../../Alerts/index.js";
 import { SubContainer } from "../../Containers/index.js";
 import { LineSeparator } from "../../LineSeparator/index.js";
+import { z } from "zod";
+export const getDynamicBaculoFormSchema = (form, extraFieldValidations = {}) => {
+    if (!form) {
+        return z.any();
+    }
+    let fieldValidations = { ...extraFieldValidations };
+    form.settings_form_fields.forEach((field) => {
+        if (field.required) {
+            if (field.field_type === "yes_no") {
+                //se ignora la validación
+            }
+            else {
+                // Si el campo es requerido, se debe tener al menos un carácter
+                fieldValidations = {
+                    ...fieldValidations,
+                    [`${field.form_id}_${field.id}`]: z.coerce
+                        .string()
+                        .min(1, `Este campo es requerido.`),
+                };
+            }
+        }
+    });
+    return z.object(fieldValidations).passthrough(); // Iniciar con un esquema que deja pasar todo.
+};
 export function DynamicBaculoForm(props) {
-    const { form, options = { showDescription: false, showTitle: false }, formName = "", namesStr = "", defaultValues = [], showingRules = [], readOnly = false, } = props;
+    const { form, options = { showDescription: false, showTitle: false }, namesStr = "", defaultValues = [], showingRules = [], readOnly = false, } = props;
     if (!form) {
-        return (_jsx(StaticAlert, { title: "No se encontr\u00F3 el formulario din\u00E1mico", description: `Ocurrió un error encontrando el formulario para ${formName}, contacte al administrador con este mensaje de error.`, type: "info" }));
+        return (_jsx(StaticAlert, { title: "No se encontr\u00F3 el formulario din\u00E1mico", description: `Ocurrió un error encontrando el formulario, contacte al administrador con este mensaje de error.`, type: "info" }));
     }
     const renderFieldComponent = (field) => {
         const defaultValue = defaultValues?.find((x) => x.settings_form_field.print_var_name === field.print_var_name);
@@ -39,11 +63,11 @@ export function DynamicBaculoForm(props) {
             case "date":
                 return (_jsx(FormDatePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
             case "file":
-                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
+                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, readOnly: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
             case "image":
-                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["png", "jpg", "jpeg"], disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
+                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["png", "jpg", "jpeg"], readOnly: readOnly, defaultValue: defaultValue?.value }, field.id));
             case "pdf":
-                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["pdf"], disabled: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
+                return (_jsx(FileUploadField, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, showAvailableTypes: true, fileTypes: ["pdf"], readOnly: readOnly, defaultValue: defaultValue?.value, download: true }, field.id));
             case "email":
             case "url":
             case "text":