@zauru-sdk/components 2.0.202 → 2.0.204

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.204](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.203...v2.0.204) (2025-03-27)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
+## [2.0.203](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.202...v2.0.203) (2025-03-27)
+
+**Note:** Version bump only for package @zauru-sdk/components
+
+
+
+
+
 ## [2.0.202](https://github.com/intuitiva/zauru-typescript-sdk/compare/v2.0.201...v2.0.202) (2025-03-20)
 
 **Note:** Version bump only for package @zauru-sdk/components

package/dist/Containers/ButtonSectionContainer.d.ts

@@ -2,7 +2,6 @@ import React from "react";
 type Props = {
     children: React.ReactNode;
     className?: string;
-    whitBg?: boolean;
 };
 export declare const ButtonSectionContainer: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/DynamicTable/DynamicPrintTable.d.ts

@@ -10,7 +10,6 @@ export type FormatedItem = {
 };
 type Props = {
     name: string;
-    formName?: string;
     className?: string;
     items: FormatedItem[];
     onChange?: (tableState?: TableStateItem[]) => void;

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

@@ -22,6 +22,8 @@ type Props = {
         show: boolean;
     }[];
     readOnly?: boolean;
+    zauruBaseURL?: string;
+    setProcessing?: (processing: boolean) => void;
 };
 export declare function DynamicBaculoForm(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,6 @@ import React from "react";
 type Props = {
     id?: string;
     name: string;
-    formName?: string;
     title?: string;
     helpText?: string;
     hint?: string;
@@ -16,6 +15,8 @@ type Props = {
     required?: boolean;
     optimizeImages?: boolean;
     zauruBaseURL?: string;
+    setProcessing?: (processing: boolean) => void;
+    signature?: boolean;
 };
 export declare const FileUploadField: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,6 @@
 type Props = {
     id?: string;
     name: string;
-    formName?: string;
     title?: string;
     hint?: string;
     helpText?: string;

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

@@ -1,7 +1,6 @@
 type Props = {
     id?: string;
     name: string;
-    formName?: string;
     title?: string;
     defaultValue?: boolean;
     helpText?: string;

package/dist/Modal/ItemModal.d.ts

@@ -2,7 +2,7 @@ type Item = {
     item_id: string;
     name: string;
     code: string;
-    unitPrice: number;
+    unit_price: number;
     stock: number;
     currencyPrefix: string;
     imageUrl: string;

package/dist/esm/BlockUI/BlockUI.js

@@ -4,5 +4,5 @@ export const BlockUI = (props) => {
     if (!active) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsx("div", { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-3xl mr-4", children: loadingText }), _jsxs("svg", { className: "animate-spin h-5 w-5 text-gray-600", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })] }) }), children] }) }));
+    return (_jsx("div", { children: _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute bg-gray-100 bg-opacity-80 z-10 h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "flex items-center", children: [_jsx("span", { className: "text-3xl mr-4", children: loadingText }), _jsxs("svg", { className: "animate-spin h-36 w-36 text-gray-600", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] })] }) }), children] }) }));
 };

package/dist/esm/Buttons/Button.js

@@ -44,19 +44,18 @@ export const Button = (props) => {
         },
     };
     const color = COLORS[selectedColor];
-    const inside = children ?? title;
     const errorMessage = formHasErrors
         ? Object.values(formErrors)
             .map((error) => error?.message?.toString())
             .join(", ")
         : "";
-    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 }) }));
+    const buttonContent = (_jsx("button", { type: type, name: "action", value: name, disabled: loading || disabled || (enableFormErrorsValidation && formHasErrors), onClick: onClickSave, className: `${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 ? children ?? loadingText : children ?? title }));
     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/Containers/ButtonSectionContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ButtonSectionContainer = (props) => {
-    const { children, className, whitBg = false } = props;
-    return (_jsx("div", { className: `${whitBg ? "bg-gray-50" : ""} px-4 py-3 text-right sm:px-6 ${className}`, children: children }));
+    const { children, className } = props;
+    return (_jsx("div", { className: `mt-5 flex flex-col md:flex-row md:justify-end md:items-center space-x-0 space-y-4 md:space-y-0 md:space-x-4 ${className}`, children: children }));
 };

package/dist/esm/Containers/OutletContainer.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const OutletContainer = (props) => {
     const { children } = props;
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex-1 overflow-x-auto", children: children }) }));
+    return (_jsx("div", { className: "flex-1 overflow-x-auto", suppressHydrationWarning: true, children: children }));
 };

package/dist/esm/DynamicTable/DynamicPrintTable.js

@@ -108,24 +108,23 @@ export const DynamicPrintTable = ({ forwardedRef, ...props }) => {
     const renderRows = () => {
         return tableData?.map((rowData, rowIndex) => renderRow(rowData, rowIndex));
     };
-    const error = formValidations[props.formName ?? "-1"][props.name];
-    const borderColor = error ? "border-red-500" : "border-transparent";
+    const borderColor = "border-transparent";
     useEffect(() => {
         if (!isInitialItemAdded && items?.length > 0) {
             insertItems([items[0]]);
             setIsInitialItemAdded(true);
         }
     }, [isInitialItemAdded, items, insertItems]);
-    return (_jsxs("div", { className: `${className} ${borderColor} border-2`, style: { overflowX: "auto" }, children: [!!error && _jsx("div", { className: "text-red-500 text-sm mb-2", children: error }), _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
-                                            event.preventDefault();
-                                            event.stopPropagation();
-                                            addRow();
-                                        }, type: "button", children: "+" }) }), _jsxs("td", { colSpan: 2, children: ["Total de etiquetas a imprimir:", " ", tableData?.reduce((sum, x) => {
-                                            const val = React.isValidElement(x[1])
-                                                ? x[1]?.props?.defaultValue
-                                                : undefined;
-                                            if (!sum)
-                                                return val;
-                                            return sum + val;
-                                        }, 0)] })] }) })] })] }));
+    return (_jsx("div", { className: `${className} ${borderColor} border-2`, style: { overflowX: "auto" }, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: renderHeader() }), _jsx("tbody", { children: renderRows() }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "align-middle", children: _jsx("button", { className: "bg-blue-500 hover:bg-blue-600 font-bold py-2 px-4 rounded", onClick: (event) => {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        addRow();
+                                    }, type: "button", children: "+" }) }), _jsxs("td", { colSpan: 2, children: ["Total de etiquetas a imprimir:", " ", tableData?.reduce((sum, x) => {
+                                        const val = React.isValidElement(x[1])
+                                            ? x[1]?.props?.defaultValue
+                                            : undefined;
+                                        if (!sum)
+                                            return val;
+                                        return sum + val;
+                                    }, 0)] })] }) })] }) }));
 };

package/dist/esm/DynamicTable/GenericDynamicTable.js

@@ -301,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 || 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) => {
+                                    .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 text-right", 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) {

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

@@ -1,7 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextField } from "../TextField/index.js";
-import { TripleFieldContainer } from "../FieldContainer/index.js";
-import { DoubleFieldContainer } from "../FieldContainer/index.js";
 import { YesNo } from "../YesNo/index.js";
 import { TextArea } from "../TextArea/index.js";
 import { SelectField } from "../SelectField/index.js";
@@ -38,13 +36,19 @@ export const getDynamicBaculoFormSchema = (form, extraFieldValidations = {}) =>
     return z.object(fieldValidations).passthrough(); // Iniciar con un esquema que deja pasar todo.
 };
 export function DynamicBaculoForm(props) {
-    const { form, options = { showDescription: false, showTitle: false }, namesStr = "", defaultValues = [], showingRules = [], readOnly = false, } = props;
+    const { form, options = { showDescription: false, showTitle: false }, namesStr = "", defaultValues = [], showingRules = [], readOnly = false, zauruBaseURL = "", setProcessing, } = props;
     if (!form) {
         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);
+        if (field.print_var_name?.toLowerCase() === "firma_cliente" &&
+            field.field_type === "image") {
+            return (_jsx(FileUploadField, { title: `FIRMA: ${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, readOnly: readOnly, defaultValue: defaultValue?.value, zauruBaseURL: zauruBaseURL, setProcessing: setProcessing, signature: true }, field.id));
+        }
         switch (field.field_type) {
+            case "zauru_data":
+                return null;
             case "fixed_rows_table":
             case "fixed_columns_table": {
                 const columns = field.settings_form_field_table_headers?.map((x) => {
@@ -56,22 +60,16 @@ export function DynamicBaculoForm(props) {
                 }) ?? [];
                 return (_jsx(SubContainer, { title: field.name, children: _jsx(GenericDynamicTable, { name: "fixed_columns_table", columns: columns }) }, field.id));
             }
-            case "zauru_data": {
-                if (field.required) {
-                    return (_jsx(TextField, { title: `${field.required ? "*" : ""}${field.name}`, hint: field.hint, defaultValue: defaultValue?.value ?? field.default_value, disabled: true }, field.id));
-                }
-                return _jsx(_Fragment, {});
-            }
             case "hour":
                 return (_jsx(FormTimePicker, { title: `${field.required ? "*" : ""}${field.name}`, name: `${namesStr}${field.form_id}_${field.id}`, hint: field.hint, disabled: readOnly, defaultValue: defaultValue?.value }, field.id));
             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, readOnly: 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, zauruBaseURL: zauruBaseURL, setProcessing: setProcessing }, 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"], readOnly: 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, zauruBaseURL: zauruBaseURL, setProcessing: setProcessing }, 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"], readOnly: 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, zauruBaseURL: zauruBaseURL, setProcessing: setProcessing }, field.id));
             case "email":
             case "url":
             case "text":
@@ -117,52 +115,18 @@ export function DynamicBaculoForm(props) {
     };
     const renderFields = () => {
         const fields = form.settings_form_fields;
-        const fieldGroups = [];
-        let tempGroup = [];
-        fields.forEach((field, i) => {
-            const rule = showingRules.find((x) => x.name === field.name);
-            if (!(rule && !rule.show)) {
+        return (_jsx("div", { className: "flex flex-wrap gap-4 items-stretch", children: fields.map((field) => {
+                const rule = showingRules.find((x) => x.name === field.name);
+                if (rule && !rule.show)
+                    return null;
                 const renderedField = renderFieldComponent(field);
-                if (renderedField === null) {
-                    return;
-                }
-                tempGroup.push(renderedField);
-                const isLastField = i === fields.length - 1;
+                if (!renderedField)
+                    return null;
                 const isSectionField = field.field_type === "section";
-                if (isSectionField) {
-                    tempGroup.pop();
-                    if (tempGroup.length === 1) {
-                        fieldGroups.push(tempGroup[0]);
-                    }
-                    else if (tempGroup.length === 2) {
-                        fieldGroups.push(_jsx(DoubleFieldContainer, { children: tempGroup }, i));
-                    }
-                    else if (tempGroup.length === 3) {
-                        fieldGroups.push(_jsx(TripleFieldContainer, { children: tempGroup }, i));
-                    }
-                    fieldGroups.push(renderedField);
-                    tempGroup = [];
-                }
-                else if (isLastField) {
-                    if (tempGroup.length === 1) {
-                        fieldGroups.push(tempGroup[0]);
-                    }
-                    else if (tempGroup.length === 2) {
-                        fieldGroups.push(_jsx(DoubleFieldContainer, { children: tempGroup }, i));
-                    }
-                    else if (tempGroup.length === 3) {
-                        fieldGroups.push(_jsx(TripleFieldContainer, { children: tempGroup }, i));
-                    }
-                    tempGroup = [];
-                }
-                else if (tempGroup.length === 3) {
-                    // Si hay 3 elementos en el grupo temporal y el siguiente campo no es 'section', se agrega a fieldGroups
-                    fieldGroups.push(_jsx(TripleFieldContainer, { children: tempGroup }, i));
-                    tempGroup = [];
-                }
-            }
-        });
-        return fieldGroups;
+                return (_jsx("div", { className: isSectionField
+                        ? "w-full"
+                        : "flex flex-col h-full flex-grow min-w-[250px] max-w-full sm:max-w-[48%] lg:max-w-[24%]", children: renderedField }, field.id));
+            }) }));
     };
     return (_jsx(SubContainer, { title: options?.showTitle ? form.name : undefined, description: options?.showDescription ? form.description : undefined, children: renderFields() }));
 }