@archbase/components 4.0.36 → 4.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.0.36",
+  "version": "4.0.38",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -118,9 +118,9 @@
     "vis-timeline": "^7.7.3",
     "xlsx": "^0.18.5",
     "yet-another-react-lightbox": "^3.21.0",
-    "@archbase/core": "4.0.36",
-    "@archbase/data": "4.0.36",
-    "@archbase/layout": "4.0.36"
+    "@archbase/core": "4.0.38",
+    "@archbase/data": "4.0.38",
+    "@archbase/layout": "4.0.38"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/datagrid/ag-grid/archbase-data-grid-ag-types.tsx

@@ -118,6 +118,12 @@ export interface ArchbaseDataGridAGColumnProps<T = any> {
   hideWhenNoPermission?: boolean;
   /** Auto-register column permission */
   autoRegisterPermission?: boolean;
+
+  /** Função para formatar o valor da célula para exportação (CSV/Excel). Útil quando render usa componentes React (ex: badges, arrays de objetos). */
+  exportValue?: (row: T) => string;
+
+  /** Se false, a coluna não aparece nas opções de exportação/impressão (ex: colunas de imagem). Padrão: true. */
+  exportable?: boolean;
 }
 
 /**
@@ -412,4 +418,6 @@ export function GridToolBarActions(props: GridToolBarActionsProps) {
 export interface ExtendedColDef<TData = any, TValue = any> extends ColDef<TData, TValue> {
   enableGlobalFilter?: boolean;
   dataType?: FieldDataType;
+  exportValue?: (row: TData) => string;
+  exportable?: boolean;
 }

package/src/datagrid/ag-grid/archbase-data-grid-ag.tsx

@@ -541,6 +541,8 @@ function ArchbaseDataGridAG<T extends object = any, ID = any>(
               // Custom properties
               enableGlobalFilter: columnProps.enableGlobalFilter,
               dataType: columnProps.dataType,
+              exportValue: columnProps.exportValue,
+              exportable: columnProps.exportable !== false,
             };
 
             cols.push(colDef);
@@ -1131,7 +1133,7 @@ function ArchbaseDataGridAG<T extends object = any, ID = any>(
   // Modal columns for export/print
   const modalColumns = useMemo(() => {
     return columnDefs
-      .filter((col) => col.field && !col.field.startsWith('__'))
+      .filter((col) => col.field && !col.field.startsWith('__') && col.exportable !== false)
       .map((col) => ({
         id: col.field!,
         title: col.headerName || col.field!,

package/src/datagrid/main/archbase-data-grid-types.tsx

@@ -358,4 +358,7 @@ export interface ArchbaseDataGridColumnProps<T = any> {
   
   /** Auto-registra a permissão da coluna (padrão: true) */
   autoRegisterPermission?: boolean;
+
+  /** Função para formatar o valor da célula para exportação (CSV/Excel). Útil quando render usa componentes React (ex: badges, arrays de objetos). */
+  exportValue?: (row: T) => string;
 }

package/src/datagrid/main/archbase-data-grid.tsx

@@ -1152,7 +1152,8 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
               // Armazenar metadados personalizados
               columnMetadata[columnProps.dataField] = {
                 enableGlobalFilter: columnProps.enableGlobalFilter,
-                dataType: columnProps.dataType
+                dataType: columnProps.dataType,
+                exportValue: columnProps.exportValue
               }
 
               // Obter o renderizador adequado para o tipo de dados
@@ -1246,6 +1247,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
       if (metadata) {
         ;(col as any).enableGlobalFilter = metadata.enableGlobalFilter
         ;(col as any).dataType = metadata.dataType
+        ;(col as any).exportValue = metadata.exportValue
       }
     })
 

package/src/datagrid/modals/export-data.tsx

@@ -2,6 +2,8 @@
 import { saveAs } from 'file-saver';
 import { utils, write } from 'xlsx';
 import { format } from 'date-fns';
+import { jsPDF } from 'jspdf';
+import autoTable from 'jspdf-autotable';
 
 // Tipos de exportação suportados
 export type ExportFormat = 'csv' | 'excel' | 'pdf';
@@ -37,6 +39,16 @@ const getCellValue = (row: any, column: any): any => {
     return value;
   }
   
+  // Usar exportValue se disponível (tem prioridade sobre valueGetter para exportação)
+  if (column.exportValue) {
+    try {
+      return column.exportValue(row);
+    } catch (e) {
+      console.error('Error in exportValue:', e);
+      return '';
+    }
+  }
+
   // Usar valueGetter se disponível
   if (column.valueGetter) {
     try {
@@ -176,8 +188,22 @@ async function exportToExcel(data: any[], config: ExportConfig): Promise<void> {
   saveAs(blob, `${config.filename || 'export'}.xlsx`);
 }
 
-// Exportação para PDF (placeholder - necessita implementação específica)
+// Exportação para PDF
 async function exportToPDF(data: any[], config: ExportConfig): Promise<void> {
-  console.warn('Exportação para PDF ainda não implementada. Considere usar a função printData em seu lugar.');
-  // Implementar lógica de exportação PDF ou usar a função printData
+  if (!data || data.length === 0) return;
+
+  const doc = new jsPDF({ orientation: 'landscape', unit: 'mm', format: 'A4' }) as any;
+
+  const headers = Object.keys(data[0]);
+  const tableData = data.map(row => headers.map(h => (row[h] !== null && row[h] !== undefined ? row[h] : '')));
+
+  autoTable(doc, {
+    head: [headers],
+    body: tableData,
+    theme: 'grid',
+    styles: { fontSize: 9, cellPadding: 2, font: 'helvetica', overflow: 'linebreak' },
+    headStyles: { fillColor: [51, 51, 51], textColor: 255, fontStyle: 'bold', halign: 'center' },
+  });
+
+  saveAs(doc.output('blob'), `${config.filename || 'export'}.pdf`);
 }

package/src/editors/ArchbaseAvatarEdit.tsx

@@ -52,6 +52,10 @@ export interface ArchbaseAvatarEditProps<T, ID> {
     maxSizeKB?: number;
     /** Qualidade da compressão da imagem (0 a 1), sendo 1 melhor qualidade */
     imageQuality?: number;
+    /** Maior dimensão (px) da imagem final: o recorte é redimensionado automaticamente
+     * para caber neste limite antes da compressão, independente do tamanho da foto
+     * enviada pelo usuário. 0 mantém a resolução original do recorte. */
+    maxOutputSizePx?: number;
 }
 
 export function ArchbaseAvatarEdit<T, ID>({
@@ -75,6 +79,7 @@ export function ArchbaseAvatarEdit<T, ID>({
     hoverBackgroundColor = 'rgba(0, 0, 0, 0.6)',
     maxSizeKB = 0, // 0 significa sem limite
     imageQuality = 0.95,
+    maxOutputSizePx = 512, // avatar não precisa de resolução maior que isso
     ...otherProps
 }: ArchbaseAvatarEditProps<T, ID>) {
     const [value, setValue] = useState<string | undefined>(undefined);
@@ -342,6 +347,24 @@ export function ArchbaseAvatarEdit<T, ID>({
         // Colocar os dados da imagem rotacionada de volta no canvas
         ctx.putImageData(data, -pixelCrop.x, - pixelCrop.y);
 
+        // Redimensionar para a dimensão máxima de saída: reduzir a resolução (e não só a
+        // qualidade JPEG) garante arquivos pequenos mesmo para fotos de celular gigantes,
+        // sem o usuário precisar escolher uma "imagem menor"
+        const maiorDimensao = Math.max(pixelCrop.width, pixelCrop.height);
+        if (maxOutputSizePx > 0 && maiorDimensao > maxOutputSizePx) {
+            const escala = maxOutputSizePx / maiorDimensao;
+            const canvasSaida = document.createElement('canvas');
+            canvasSaida.width = Math.max(1, Math.round(pixelCrop.width * escala));
+            canvasSaida.height = Math.max(1, Math.round(pixelCrop.height * escala));
+            const ctxSaida = canvasSaida.getContext('2d');
+            if (ctxSaida) {
+                ctxSaida.imageSmoothingEnabled = true;
+                ctxSaida.imageSmoothingQuality = 'high';
+                ctxSaida.drawImage(canvas, 0, 0, canvasSaida.width, canvasSaida.height);
+                return canvasSaida.toDataURL('image/jpeg', quality);
+            }
+        }
+
         // Retornar como base64 com a qualidade especificada
         return canvas.toDataURL('image/jpeg', quality);
     }

package/src/editors/ArchbaseNumberEdit.tsx

@@ -448,6 +448,48 @@ export function ArchbaseNumberEdit<T, ID>({
     }
   };
 
+  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+    event.preventDefault();
+
+    let pastedText = event.clipboardData.getData('text').trim();
+
+    if (!allowNegative) {
+      pastedText = pastedText.replace(/-/g, '');
+    }
+
+    // Normaliza separador decimal: aceita tanto '.' quanto ',' como entrada
+    const otherSeparator = decimalSeparator === '.' ? ',' : '.';
+    pastedText = pastedText
+      .replace(new RegExp(`\\${thousandSeparator}`, 'g'), '')
+      .replace(otherSeparator, decimalSeparator);
+
+    const { maskedValue: newMaskedValue, value: newValue } = formatNumber(
+      pastedText,
+      precision,
+      decimalSeparator,
+      thousandSeparator,
+      allowNegative,
+      prefix,
+      suffix,
+      minValue,
+      maxValue,
+      false
+    );
+
+    if (newMaskedValue === null && newValue === null) return;
+
+    setMaskedValue(newMaskedValue);
+    setCurrentValue(newValue);
+
+    if (dataSource && !dataSource.isBrowsing() && dataField) {
+      v1v2Compatibility.handleValueChange(newValue);
+    }
+
+    if (onChangeValue) {
+      onChangeValue(newMaskedValue, newValue, event as any);
+    }
+  };
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const input = event.currentTarget;
     const selectionStart = input.selectionStart || 0;
@@ -601,6 +643,7 @@ export function ArchbaseNumberEdit<T, ID>({
       onBlur={handleFocusExit}
       onFocus={handleFocusEnter}
       onKeyDown={handleKeyDown}
+      onPaste={handlePaste}
       styles={{
         input: {
           textAlign: 'right',

package/src/editors/ArchbaseRichTextEdit.tsx

@@ -17,6 +17,21 @@ let SunEditorComponent: React.ComponentType<any> | null = null;
 let langModules: { en: any; es: any; ptBR: any } = { en: {}, es: {}, ptBR: {} };
 let loadPromise: Promise<void> | null = null;
 
+/**
+ * Resolve o componente de um módulo importado dinamicamente lidando com o
+ * interop CJS→ESM. `suneditor-react` é publicado como CJS (`exports.default = SunEditor`
+ * com `__esModule: true`); dependendo do empacotador (ex.: build de produção com Rollup),
+ * `mod.default` pode chegar como o objeto `{ default: SunEditor, __esModule: true }` em vez
+ * do próprio componente, fazendo o React lançar "Element type is invalid ... got: object".
+ */
+function resolveDefaultComponent(mod: any): any {
+	const candidate = mod?.default ?? mod;
+	if (candidate && typeof candidate !== 'function' && candidate.__esModule && candidate.default) {
+		return candidate.default;
+	}
+	return candidate;
+}
+
 // Função para carregar suneditor e dependências
 async function loadSunEditor(): Promise<void> {
 	if (loadPromise) return loadPromise;
@@ -31,7 +46,7 @@ async function loadSunEditor(): Promise<void> {
 			import('suneditor/src/lang/es'),
 			import('suneditor/src/lang/pt_br'),
 		]);
-		SunEditorComponent = sunEditorModule.default;
+		SunEditorComponent = resolveDefaultComponent(sunEditorModule);
 		langModules = {
 			en: enModule.default,
 			es: esModule.default,