@controleonline/ui-default 1.0.279 → 1.0.280

package/package.json

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

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

@@ -64,7 +64,7 @@ const DefaultTable = ({
   onSelectionChange = null,
   onSortChange = null,
   pageSize = null,
-  appearance = 'default',
+  appearance = 'compact',
   paginationMode = 'infinite',
   pinRowActions = true,
   renderCard = null,

package/src/tests/react/components/table/DefaultTable.defaultAppearance.test.js

@@ -0,0 +1,14 @@
+// app-community #1092: the compact layout is the DefaultTable default.
+// Pages (Order History, Financial Hub) must inherit it instead of opting in.
+const fs = require('node:fs');
+const path = require('node:path');
+
+const read = relative => fs.readFileSync(path.join(__dirname, relative), 'utf8');
+
+it('uses the compact layout as the DefaultTable default appearance', () => {
+  expect(read('../../../../react/components/table/DefaultTable.js')).toMatch(/^\s+appearance = 'compact',$/m);
+});
+
+it('keeps legacy appearance reachable through an explicit prop', () => {
+  expect(read('../../../../react/components/table/DefaultTableToolbar.js')).toMatch(/configs\.appearance === 'compact'/);
+});

package/src/tests/react/components/table/DefaultTable.group1.test.js

@@ -19,6 +19,7 @@ it('can show only search in the toolbar while hiding configured actions and cont
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome', searchable: true}],
           data: [],
           showToolbarActions: false,
@@ -42,6 +43,7 @@ it('keeps the list/card toggle visible on compact layouts even when cards are fo
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [],
           showColumnFiltersButton: false,
@@ -68,6 +70,7 @@ it('respects the compact grid/list toggle in the table body', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           data: [{id: 1, name: 'Pedido'}],
           showColumnFiltersButton: false,
           storeName: 'orders',
@@ -87,6 +90,7 @@ it('respects the compact grid/list toggle in the table body', () => {
       toggleViewButton.props.onPress();
       tree.update(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           data: [{id: 1, name: 'Pedido'}],
           showColumnFiltersButton: false,
           storeName: 'orders',
@@ -118,6 +122,7 @@ it('pins identity and action columns on table view', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           rowActionsComponent,
           storeName: 'orders',
         }),
@@ -178,6 +183,7 @@ it('renders a custom row actions component with the configured actions width', (
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           onEditRow: jest.fn(),
           rowActionsComponent,
           rowActionsWidth: 180,
@@ -231,6 +237,7 @@ it('keeps only the identity column pinned when row actions are not pinned', () =
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           pinRowActions: false,
           rowActionsComponent,
           storeName: 'orders',
@@ -293,6 +300,7 @@ it('keeps the complete search aligned in the toolbar when there is enough room',
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [],
           storeName: 'orders',
@@ -316,6 +324,7 @@ it('hides the toolbar when the screen disables it', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome', searchable: true}],
           data: [],
           showToolbar: false,
@@ -344,6 +353,7 @@ it('keeps add available as a floating button when the toolbar is hidden', () =>
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome', searchable: true}],
           data: [],
           onAdd,
@@ -380,6 +390,7 @@ it('opens the default create form when add has no custom handler', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           requestParams: {receiver: 21},
           showToolbar: false,
           storeName: 'invoice',
@@ -418,6 +429,7 @@ it('collapses search into an icon on narrow toolbars and opens the search modal'
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [],
           storeName: 'orders',

package/src/tests/react/components/table/DefaultTable.group2.test.js

@@ -13,6 +13,7 @@ it('gives collapsed search a stable accessible name without a placeholder', () =
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [],
           storeName: 'orders',
@@ -41,6 +42,7 @@ it('keeps the financial compact toolbar aligned when the total is already in the
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [],
           showTotalItemsInCompactToolbar: true,
@@ -80,6 +82,7 @@ it('opens the filters modal with filterable columns only', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           data: [],
           storeName: 'orders',
         }),
@@ -117,6 +120,7 @@ it('persists filters and sort under default-table[store][route]', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           storeName: 'orders',
         }),
       );
@@ -195,6 +199,7 @@ it('hydrates the saved sort using a stable preference key on auto tables', async
     await renderer.act(async () => {
       renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           storeName: 'orders',
           visibleColumnsPreferenceKey: 'order-history-page',
         }),
@@ -244,6 +249,7 @@ it('hydrates and persists controlled filters under default-table[store][route]',
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           filters: {},
           onFilterChange,
           storeName: 'product_showcase_items',
@@ -257,6 +263,7 @@ it('hydrates and persists controlled filters under default-table[store][route]',
     renderer.act(() => {
       tree.update(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           filters: {integration: 'ifood'},
           onFilterChange,
           storeName: 'product_showcase_items',
@@ -294,6 +301,7 @@ it('preserves the compact toolbar total when the footer total is disabled', () =
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [],
           showTotalItemsInCompactToolbar: true,
@@ -307,6 +315,7 @@ it('preserves the compact toolbar total when the footer total is disabled', () =
   });
 it('forces cards when entering compact mode and still toggles between cards and list', () => {
     const props = {
+      appearance: 'default',
       columns: [{key: 'name', label: 'Nome'}],
       data: [{id: 1, name: 'Pedido 1'}],
       showColumnFiltersButton: false,
@@ -360,6 +369,7 @@ it('applies a custom rowStyle to rendered table rows', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [{id: 1, name: 'Pedido 1'}],
           onRowPress: () => {},
@@ -398,6 +408,7 @@ it('blocks row navigation while an inline cell is editing or saving', async () =
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           storeName: 'orders',
           actions: {save},
           columns: [{key: 'name', label: 'Nome', editable: true}],

package/src/tests/react/components/table/DefaultTable.group3.test.js

@@ -7,6 +7,7 @@ it('protects custom card openRow while a card field is editing', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome', editable: true}],
           data: [{id: 1, name: 'Cliente'}],
           onRowPress,
@@ -44,6 +45,7 @@ it('protects both custom row action navigation callbacks during inline editing',
   mockState.windowDimensions = {width: 1024, height: 800};
   let tree;
   renderer.act(() => {tree = renderer.create(React.createElement(DefaultTable, {
+          appearance: 'default',
     columns: [{key: 'name', label: 'Nome', editable: true}],
     data: [{id: 1, name: 'Cliente'}], onRowPress,
     rowActionsComponent: props => React.createElement('CustomRowActions', props),
@@ -82,6 +84,7 @@ it('renders a custom footer component when provided', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'name', label: 'Nome'}],
           data: [{id: 1, name: 'Pedido 1'}],
           footerComponent: FooterComponent,
@@ -113,6 +116,7 @@ it('keeps infinite scroll loading transparent over existing rows', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           showColumnFiltersButton: false,
           showRowActions: false,
           storeName: 'invoices',
@@ -157,6 +161,7 @@ it('uses the configured summary and labels before the store summary', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [{key: 'status', label: 'Situação'}],
           data: [{id: 332, status: 'Pago'}],
           showColumnFiltersButton: false,
@@ -200,6 +205,7 @@ it('opens a debug query modal when the store exposes debug.query', () => {
     renderer.act(() => {
       tree = renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           requestParams: {itemsPerPage: 50},
           storeName: 'orders',
         }),
@@ -239,6 +245,7 @@ it('uses store actions when no explicit table actions are passed', async () => {
     await renderer.act(async () => {
       renderer.create(
         React.createElement(DefaultTable, {
+          appearance: 'default',
           columns: [
             {
               key: 'jobTitle',

package/src/tests/react/components/table/DefaultTableCards.layout.test.js

@@ -11,6 +11,7 @@ jest.mock('react-native', () => {
     Text: props => React.createElement('Text', props, props.children),
     FlatList: props => React.createElement('List', {}, props.data.map((item, index) => props.renderItem({item, index}))),
     StyleSheet: {create: value => value},
+    useWindowDimensions: () => ({width: 1024, height: 800}),
     Platform: {select: value => value.web},
   };
 });