@archbase/components 4.0.35 → 4.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.0.35",
+  "version": "4.0.37",
   "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.35",
-    "@archbase/data": "4.0.35",
-    "@archbase/layout": "4.0.35"
+    "@archbase/core": "4.0.37",
+    "@archbase/data": "4.0.37",
+    "@archbase/layout": "4.0.37"
   },
   "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/ArchbaseAsyncSelect.tsx

@@ -135,6 +135,8 @@ export interface ArchbaseAsyncSelectProps<T, ID, O> {
 	converter?: (value: O) => any;
 	/** Function que busca o valor original antes de converter pelo valor de retorno do converter */
 	getConvertedOption?: (value: any) => Promise<O>;
+	/** Função que determina se uma opção individual está desabilitada */
+	isOptionDisabled?: (option: O) => boolean;
 }
 function buildOptions<O>(
 	initialOptions: O[],
@@ -210,7 +212,8 @@ export function ArchbaseAsyncSelect<T, ID, O>({
 	innerRef,
 	onSearchChange,
 	converter,
-	getConvertedOption
+	getConvertedOption,
+	isOptionDisabled,
   }: ArchbaseAsyncSelectProps<T, ID, O>) {
 	const forceUpdate = useForceUpdate();
 
@@ -539,7 +542,11 @@ export function ArchbaseAsyncSelect<T, ID, O>({
 				{filteredOptions.slice(0, limit ? limit : filteredOptions.length).map((option) => {
 					const {key, ...rest} = option
 					return (
-					<Combobox.Option value={option.value} key={option.key}>
+					<Combobox.Option
+						value={option.value}
+						key={option.key}
+						disabled={isOptionDisabled ? isOptionDisabled(option.origin) : false}
+					>
 						{ItemComponent ? <ItemComponent {...rest} /> : option.label}
 					</Combobox.Option>
 					)

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/ArchbaseSelect.tsx

@@ -117,6 +117,8 @@ export interface ArchbaseSelectProps<T, ID, O> {
    * Por exemplo: (id) => fetchObjectById(id) para converter ID de volta ao objeto
    */
   getConvertedOption?: (value: any) => Promise<O>
+  /** Função que determina se uma opção individual está desabilitada */
+  isOptionDisabled?: (option: O) => boolean
 }
 
 function buildGroupOptions(
@@ -248,7 +250,8 @@ export function ArchbaseSelect<T, ID, O>({
   classNames,
   styles,
   converter,
-  getConvertedOption
+  getConvertedOption,
+  isOptionDisabled,
 }: ArchbaseSelectProps<T, ID, O>) {
   const forceUpdate = useForceUpdate();
 
@@ -282,7 +285,7 @@ export function ArchbaseSelect<T, ID, O>({
   const contextError = validationContext?.getError(fieldKey);
 
   const currentOptions: any[] = useMemo(() => {
-    return buildOptions<O>(
+    const opts = buildOptions<O>(
       options,
       initialOptions,
       children,
@@ -290,6 +293,19 @@ export function ArchbaseSelect<T, ID, O>({
       getOptionValue,
       optionsLabelField
     )
+    if (!isOptionDisabled) return opts
+    return opts.map((opt: any) => {
+      if (opt.group !== undefined) {
+        return {
+          ...opt,
+          items: opt.items.map((item: any) => ({
+            ...item,
+            disabled: isOptionDisabled(item.origin ?? item),
+          })),
+        }
+      }
+      return { ...opt, disabled: isOptionDisabled(opt.origin ?? opt) }
+    })
   }, [
     updateCounter,
     options,
@@ -297,7 +313,8 @@ export function ArchbaseSelect<T, ID, O>({
     children,
     getOptionLabel,
     getOptionValue,
-    optionsLabelField
+    optionsLabelField,
+    isOptionDisabled,
   ])
 
   const handleConverter = (value) => {