@controleonline/ui-default 1.0.283 → 1.0.285

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.283",
+  "version": "1.0.285",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/table/DefaultTable.js

@@ -143,6 +143,9 @@ const DefaultTable = ({
   };
   const storeSelectable = storeDeclaredConfigs.selectable === true;
   const isCompactView = width > 0 && width <= compactBreakpoint;
+  // Mobile: no page buttons — infinite scroll only (desktop keeps pages mode when requested).
+  const resolvedPaginationMode =
+    width > 0 && width <= 768 && paginationMode === 'pages' ? 'infinite' : paginationMode;
   const addConfig = store?.getters?.add;
   const normalizedAddButtonPlacement = normalizeText(addButtonPlacement) || 'toolbar';
   const resolvedAddLabel =
@@ -184,7 +187,7 @@ const DefaultTable = ({
     onEndReached,
     onRefresh,
     pageSize,
-    paginationMode,
+    paginationMode: resolvedPaginationMode,
     requestParams: requestParamsSeed,
     resolvedActions,
     resolvedSort,
@@ -235,7 +238,7 @@ const DefaultTable = ({
     () => ({
       ...storeDeclaredConfigs,
       appearance,
-      paginationMode,
+      paginationMode: resolvedPaginationMode,
       currentPage,
       pageSizeNumber,
       onPageChange: goToPage,
@@ -310,7 +313,7 @@ const DefaultTable = ({
       viewMode: viewMode ? storeDeclaredConfigs.viewMode : effectiveViewMode,
     }),
     [
-      appearance, paginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
+      appearance, resolvedPaginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
       add,
       normalizedAddButtonPlacement,
       resolvedAddLabel,
@@ -376,7 +379,7 @@ const DefaultTable = ({
   const defaultTableConfigsSignature = useMemo(
     () =>
       stableSerialize({
-        appearance, paginationMode, currentPage, pageSizeNumber, resolvedIsLoading,
+        appearance, resolvedPaginationMode, currentPage, pageSizeNumber, resolvedIsLoading,
         configuredImport: storeDeclaredConfigs.import || null,
         add,
         addButtonPlacement: normalizedAddButtonPlacement,
@@ -415,7 +418,7 @@ const DefaultTable = ({
         toolbarActionsLength: Array.isArray(toolbarActions) ? toolbarActions.length : 0,
       }),
     [
-      appearance, paginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
+      appearance, resolvedPaginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
       add,
       normalizedAddButtonPlacement,
       resolvedAddLabel,

package/src/react/components/table/DefaultTable.styleGroup2.js

@@ -46,7 +46,7 @@ pinnedIdentityCell: {
     zIndex: 6,
     ...Platform.select({
       web: {
-        boxShadow: '2px 0 0 rgba(226,232,240,0.9)',
+        boxShadow: '2px 0 6px rgba(15,23,42,0.08)',
         position: 'relative',
       },
       default: {},
@@ -57,7 +57,7 @@ pinnedActionsCell: {
     zIndex: 6,
     ...Platform.select({
       web: {
-        boxShadow: '-2px 0 0 rgba(226,232,240,0.9)',
+        boxShadow: '-2px 0 6px rgba(15,23,42,0.08)',
         position: 'relative',
       },
       default: {},
@@ -276,9 +276,9 @@ emptyBox: {
     gap: 8,
   },
 footerBar: {
-    minHeight: 40,
+    minHeight: 34,
     paddingHorizontal: 8,
-    paddingVertical: 5,
+    paddingVertical: 3,
     borderTopWidth: 1,
     borderTopColor: '#E2E8F0',
     backgroundColor: '#FFFFFF',
@@ -311,13 +311,13 @@ footerSummaryItem: {
   },
 footerSummaryLabel: {
     color: '#64748B',
-    fontSize: 9,
+    fontSize: 8,
     fontWeight: '900',
     textTransform: 'uppercase',
   },
 footerSummaryValue: {
     color: '#0F172A',
-    fontSize: 13,
+    fontSize: 12,
     fontWeight: '900',
   },
 footerCountPill: {
@@ -329,7 +329,7 @@ footerCountPill: {
     paddingVertical: 5,
   },
 footerCountText: {
-    fontSize: 11,
+    fontSize: 10,
     fontWeight: '900',
   },
 emptyText: {

package/src/react/components/table/DefaultTableCompact.styles.js

@@ -9,7 +9,7 @@ export default StyleSheet.create({
   inputMobile: {fontSize: 16},
   button: {minHeight: 44, minWidth: 44, paddingHorizontal: 10, borderWidth: 1, borderRadius: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6},
   label: {fontSize: 12, fontWeight: '600'},
-  small: {fontSize: 12},
+  small: {fontSize: 11},
   chips: {flexDirection: 'row', flexWrap: 'wrap', gap: 6, alignItems: 'center'},
   chip: {minHeight: 30, maxWidth: '100%', borderWidth: 1, borderRadius: 18, paddingHorizontal: 9, flexDirection: 'row', alignItems: 'center', gap: 6},
   secondary: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8},
@@ -19,9 +19,9 @@ export default StyleSheet.create({
   sheetHeader: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10},
   sheetTitle: {fontSize: 17, fontWeight: '600'},
   option: {minHeight: 44, paddingVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8},
-  footer: {padding: 10, flexShrink: 0, borderTopWidth: 1, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 8},
-  pager: {flexDirection: 'row', flexWrap: 'wrap', gap: 4, alignItems: 'center'},
-  page: {minWidth: 44, minHeight: 44, borderWidth: 1, borderRadius: 7, justifyContent: 'center', alignItems: 'center'},
+  footer: {paddingVertical: 4, paddingHorizontal: 8, flexShrink: 0, borderTopWidth: 1, flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'center', justifyContent: 'space-between', gap: 6, minHeight: 36},
+  pager: {flexDirection: 'row', flexWrap: 'nowrap', gap: 3, alignItems: 'center', flexShrink: 0},
+  page: {minWidth: 28, minHeight: 28, paddingHorizontal: 4, borderWidth: 1, borderRadius: 6, justifyContent: 'center', alignItems: 'center'},
   disabled: {opacity: 0.45},
   cardItem: {flexDirection: 'column', alignItems: 'stretch', borderWidth: 1, borderRadius: 12, overflow: 'hidden', margin: 0},
   cardActions: {alignSelf: 'stretch', flexDirection: 'row', justifyContent: 'flex-end', borderTopWidth: 1, paddingHorizontal: 12, paddingVertical: 8},

package/src/react/components/table/DefaultTableFooter.js

@@ -12,6 +12,7 @@ import {
 } from './DefaultTable.utils';
 import styles from './DefaultTable.styles';
 import useDefaultTableTheme from './useDefaultTableTheme';
+import DefaultTablePaginationBar from './DefaultTablePaginationBar';
 
 const DefaultTableFooter = ({ storeName }) => {
   const store = useStore(storeName);
@@ -119,10 +120,16 @@ const DefaultTableFooter = ({ storeName }) => {
       : React.createElement(footerComponent, footerProps);
   }
 
-  if (!shouldRenderFooterBar) {
+  // Keep a single footer row even when only pagination (pages mode, desktop) is present.
+  // PaginationBar returns null on mobile / infinite mode.
+  if (!shouldRenderFooterBar && configs.paginationMode !== 'pages') {
     return null;
   }
 
+  const hasSummaryOrCount =
+    (shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems) ||
+    summaryEntries.length > 0;
+
   return (
     <View
       style={[
@@ -174,6 +181,7 @@ const DefaultTableFooter = ({ storeName }) => {
           </Text>
         </View>
       ) : null}
+      <DefaultTablePaginationBar storeName={storeName} embedded />
     </View>
   );
 };

package/src/react/components/table/DefaultTablePaginationBar.js

@@ -6,12 +6,16 @@ import useDefaultTableTheme from './useDefaultTableTheme';
 import {getVisiblePageNumbers} from './DefaultTableCompact.helpers';
 import s from './DefaultTableCompact.styles';
 
-export default function DefaultTablePaginationBar({storeName}) {
+/**
+ * Desktop/tablet only. Mobile keeps infinite scroll (no page buttons).
+ * Renders as a compact trailing segment for the unified footer row.
+ */
+export default function DefaultTablePaginationBar({storeName, embedded = false}) {
   const mobile = useWindowDimensions().width <= 768;
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
   const {themeColors: c} = useDefaultTableTheme();
-  if (configs.paginationMode !== 'pages') return null;
+  if (mobile || configs.paginationMode !== 'pages') return null;
   const page = configs.currentPage || 1;
   const size = configs.pageSizeNumber || 20;
   const total = Number(store.getters.totalItems || 0);
@@ -20,19 +24,56 @@ export default function DefaultTablePaginationBar({storeName}) {
   const text = c.tableFooterText || c.textPrimary;
   const background = c.tableFooterBackground || c.panelBackground;
   const border = c.tableFooterBorder || c.inputBorder;
-  const button = (value, icon, label, disabled = false) => <TouchableOpacity key={label} accessibilityRole="button" accessibilityLabel={label}
-    accessibilityState={{disabled: disabled || busy, selected: !icon && page === value}} disabled={disabled || busy}
-    onPress={() => configs.onPageChange?.(value)} style={[s.page, {backgroundColor: !icon && page === value ? c.chipSelectedBackground || c.badgeBackground : background, borderColor: border}, (disabled || busy) && s.disabled]}>
-    {icon ? <Icon name={icon} size={16} color={text} /> : <Text style={[s.small, {color: text}]}>{value}</Text>}
-  </TouchableOpacity>;
-  return <View testID="default-table-pagination" style={[s.footer, {backgroundColor: background, borderTopColor: border}]}>
-    <Text accessibilityLiveRegion="polite" style={[s.small, {color: text}]}>{configs.showTotalItemsInFooter === false ? `Página ${page}` : `${total ? (page - 1) * size + 1 : 0}–${Math.min(page * size, total)} de ${total}`}</Text>
-    <View style={s.pager}>
-      {!mobile ? button(1, 'chevrons-left', 'Primeira página', page === 1) : null}
-      {button(page - 1, 'chevron-left', 'Página anterior', page === 1)}
-      {getVisiblePageNumbers(page, pages).map(value => button(value, null, `Página ${value}`))}
-      {button(page + 1, 'chevron-right', 'Próxima página', page >= pages)}
-      {!mobile ? button(pages, 'chevrons-right', 'Última página', page >= pages) : null}
+  const button = (value, icon, label, disabled = false) => (
+    <TouchableOpacity
+      key={label}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={{disabled: disabled || busy, selected: !icon && page === value}}
+      disabled={disabled || busy}
+      onPress={() => configs.onPageChange?.(value)}
+      style={[
+        s.page,
+        {
+          backgroundColor: !icon && page === value ? c.chipSelectedBackground || c.badgeBackground : background,
+          borderColor: border,
+        },
+        (disabled || busy) && s.disabled,
+      ]}>
+      {icon ? <Icon name={icon} size={13} color={text} /> : <Text style={[s.small, {color: text, fontSize: 11}]}>{value}</Text>}
+    </TouchableOpacity>
+  );
+  const t = global.t?.t;
+  const pageWord = t?.(storeName, 'label', 'page') || t?.('configs', 'label', 'page') || 'Página';
+  const ofWord = t?.(storeName, 'label', 'of') || t?.('configs', 'label', 'of') || 'de';
+  const rangeLabel =
+    configs.showTotalItemsInFooter === false
+      ? `${pageWord} ${page}`
+      : `${total ? (page - 1) * size + 1 : 0}–${Math.min(page * size, total)} ${ofWord} ${total}`;
+  const body = (
+    <>
+      <Text accessibilityLiveRegion="polite" style={[s.small, {color: text, fontSize: 11, flexShrink: 0}]}>
+        {rangeLabel}
+      </Text>
+      <View style={s.pager}>
+        {button(1, 'chevrons-left', 'Primeira página', page === 1)}
+        {button(page - 1, 'chevron-left', 'Página anterior', page === 1)}
+        {getVisiblePageNumbers(page, pages).map(value => button(value, null, `Página ${value}`))}
+        {button(page + 1, 'chevron-right', 'Próxima página', page >= pages)}
+        {button(pages, 'chevrons-right', 'Última página', page >= pages)}
+      </View>
+    </>
+  );
+  if (embedded) {
+    return (
+      <View testID="default-table-pagination" style={{flexDirection: 'row', alignItems: 'center', gap: 8, flexShrink: 0}}>
+        {body}
+      </View>
+    );
+  }
+  return (
+    <View testID="default-table-pagination" style={[s.footer, {backgroundColor: background, borderTopColor: border}]}>
+      {body}
     </View>
-  </View>;
+  );
 }

package/src/react/components/table/DefaultTableRows.js

@@ -27,6 +27,14 @@ import {getCompactColumnLabel} from './DefaultTableCompact.helpers';
 import useDefaultTableRowInteraction from './useDefaultTableRowInteraction';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
+
+const isIdentityColumn = column => {
+  if (!column) return false;
+  if (column.isIdentity === true) return true;
+  const key = String(getColumnKey(column) || '').toLowerCase();
+  return key === 'id' || key === 'uuid';
+};
+
 /** Row stripes: themes-map listItemEvenRow / listItemOddRow — never status.color. */
 export const resolveRowBackgroundColor = ({ index, tableOddColor, tableEvenColor }) => {
   return index % 2 === 0 ? tableOddColor : tableEvenColor;
@@ -96,16 +104,22 @@ const DefaultTableRows = ({ storeName }) => {
         : next;
     });
   };
+  // Body cells live inside FlatList (own overflow). CSS position:sticky breaks there
+  // relative to the outer horizontal ScrollView — pin with translateX instead.
   const stickyBodyTransforms = useMemo(() => {
     const viewportWidth = Number(horizontalMetrics.viewportWidth || 0);
     const contentWidth = Number(horizontalMetrics.contentWidth || 0);
     const x = Number(horizontalMetrics.x || 0);
-    const canScrollHorizontally = viewportWidth > 0 && contentWidth > viewportWidth;
-    const actionsTranslateX = canScrollHorizontally
-      ? x + viewportWidth - contentWidth
-      : 0;
-
+    const canScrollHorizontally = viewportWidth > 0 && contentWidth > viewportWidth + 0.5;
+    if (!canScrollHorizontally) {
+      return { identity: null, actions: null };
+    }
+    // Identity stays at the left edge of the viewport.
+    const identityTranslateX = x;
+    // Actions stay at the right edge of the viewport.
+    const actionsTranslateX = x + viewportWidth - contentWidth;
     return {
+      identity: identityTranslateX !== 0 ? [{ translateX: identityTranslateX }] : null,
       actions:
         shouldPinRowActions && actionsTranslateX !== 0
           ? [{ translateX: actionsTranslateX }]
@@ -174,12 +188,15 @@ const DefaultTableRows = ({ storeName }) => {
           <React.Fragment key={getColumnKey(column)}>
             <DefaultTableInput
               column={column}
-              options={{...(column?.isIdentity ? {
+              options={{...(isIdentityColumn(column) ? {
                 cellStyle: [
                   styles.pinnedIdentityCell,
-                  styles.stickyIdentityCell,
                   {
                     backgroundColor: rowBackgroundColor,
+                    zIndex: 6,
+                    ...(stickyBodyTransforms.identity
+                      ? { transform: stickyBodyTransforms.identity }
+                      : {}),
                   },
                 ],
               } : {
@@ -200,12 +217,12 @@ const DefaultTableRows = ({ storeName }) => {
               styles.cell,
               styles.actionsCell,
               shouldPinRowActions ? styles.pinnedActionsCell : null,
-              shouldPinRowActions ? styles.stickyActionsCell : null,
               {
                 minWidth: actionsCellWidth,
                 width: actionsCellWidth,
                 flexBasis: actionsCellWidth,
                 maxWidth: actionsCellWidth,
+                zIndex: shouldPinRowActions ? 6 : undefined,
                 ...(stickyBodyTransforms.actions
                   ? { transform: stickyBodyTransforms.actions }
                   : {}),
@@ -286,7 +303,7 @@ const DefaultTableRows = ({ storeName }) => {
                   accessibilityHint={configs.resolvedSort?.field === sortFieldName ? `Ordem ${configs.resolvedSort.direction === 'asc' ? 'crescente' : 'decrescente'}` : undefined}
                   style={[
                     getColumnStyle(column),
-                    column?.isIdentity
+                    isIdentityColumn(column)
                       ? [styles.stickyIdentityCell, styles.stickyHeaderCell, { backgroundColor: tableHeaderColor }]
                       : null,
                   ]}
@@ -347,7 +364,7 @@ const DefaultTableRows = ({ storeName }) => {
                     key={`${fieldName}-filter`}
                     style={[
                       getColumnStyle(column),
-                      column?.isIdentity
+                      isIdentityColumn(column)
                         ? [styles.stickyIdentityCell, { backgroundColor: tableHeaderColor }]
                         : null,
                     ]}

package/src/react/components/table/DefaultTableView.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Modal, Text, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import DefaultTablePaginationBar from './DefaultTablePaginationBar';
 import DefaultTableBody from './DefaultTableBody';
 import DefaultTableFooter from './DefaultTableFooter';
 import DefaultTableToolbar from './DefaultTableToolbar';
@@ -50,7 +49,6 @@ export default function DefaultTableView({
       ) : null}
       <DefaultTableBody storeName={storeName} />
       <DefaultTableFooter storeName={storeName} />
-      <DefaultTablePaginationBar storeName={storeName} />
       {shouldRenderBottomAddButton ? (
         <View style={styles.bottomAddBar}>
           <TouchableOpacity

package/src/react/components/upload/DefaultUpload.styles.js

@@ -130,9 +130,9 @@ export const defaultUploadStyles = {
   attachmentsEmpty: {borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 10},
   attachmentsEmptyText: {color: '#666'},
   attachmentsList: {flexDirection: 'row', gap: 10},
-  attachmentCard: {width: 240, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 0, overflow: 'hidden', backgroundColor: '#fff'},
-  attachmentThumb: {width: 240, height: 240, backgroundColor: '#f5f5f5', overflow: 'hidden', alignItems: 'center', justifyContent: 'center'},
-  attachmentImage: {width: 240, height: 240},
+  attachmentCard: {width: 320, borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 0, overflow: 'hidden', backgroundColor: '#fff'},
+  attachmentThumb: {width: 320, height: 320, backgroundColor: '#f5f5f5', overflow: 'hidden', alignItems: 'center', justifyContent: 'center'},
+  attachmentImage: {width: 320, height: 320},
   attachmentActionsRow: {flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 8, marginTop: 2},
   attachmentIconButton: {width: 36, height: 36, borderRadius: 8, alignItems: 'center', justifyContent: 'center'},
   attachmentRemoveButton: {backgroundColor: '#b00020', paddingVertical: 6, borderRadius: 4},

package/src/react/components/upload/DefaultUploadAttachmentsList.js

@@ -76,20 +76,20 @@ export default function DefaultUploadAttachmentsList({
                   key={row.id || fileId || index}
                   style={[
                     styles.attachmentCard,
-                    // app-community#813: card principal 240x240 (app-community#1275)
-                    {width: 240, padding: 0, overflow: 'hidden'},
+                    // app-community#813: card principal 320x320
+                    {width: 320, padding: 0, overflow: 'hidden'},
                   ]}>
                   <View
                     style={[
                       styles.attachmentThumb,
-                      {width: 240, height: 240, marginBottom: 0},
+                      {width: 320, height: 320, marginBottom: 0},
                     ]}>
                     {file ? (
                       <DefaultFile
                         file={file}
                         company={company}
                         resizeMode="cover"
-                        style={{width: 240, height: 240}}
+                        style={{width: 320, height: 320}}
                       />
                     ) : null}
                   </View>