spark-grid-vue3 0.0.83 → 0.0.85

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "spark-grid-vue3",
-    "version": "0.0.83",
+    "version": "0.0.85",
     "description": "",
     "files": [
         "src"

package/src/components/DataTableAction.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="spark-grid-datatable-cell" data-label="Ações" :style="DataTableStyler.getActionRowColumn(grid)">
+    <div class="grid-cell" data-label="Ações" :style="DataTableStyler.getActionRowColumn(grid)">
         <template v-for="(action, i) in grid.config.actions">
             <RuntimeRenderer v-if="isVisible(action)" :key="`${row._uuid}:_actions`" :content="action.element(row)" />
         </template>

package/src/components/DataTableContentWrapper.vue

@@ -60,10 +60,7 @@ const styles = computed(() => {
         background: '#fafafa'
     }
 
-    const isOverflowEnabled = props.grid.config.overflowEnabled
-        || (responsiveMode.value === ResponsiveMode.HORIZONTAL_OVERFLOW && isMobile.value)
-
-    if (isOverflowEnabled) {
+    if (props.grid.config.overflowEnabled) {
         const maxHeight = props.grid.config.height ?? (window.innerHeight - 100)
 
         styles['overflow-x'] = 'auto'
@@ -73,6 +70,8 @@ const styles = computed(() => {
         if (props.grid.config.stickyHeaderEnabled) {
             styles['position'] = 'relative'
         }
+    } else if (responsiveMode.value === ResponsiveMode.HORIZONTAL_OVERFLOW && isMobile.value) {
+        styles['overflow-x'] = 'auto'
     }
 
     return styles

package/src/components/DataTableFooter.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="grid-footer">
         <div class="spark-grid-pages">
-            <div v-show="isRowsPerPageVisible" class="spark-grid__page-details">Por página:</div>
-            <div v-show="isRowsPerPageVisible" class="spark-grid__select">
+            <div v-show="isRowsPerPageVisible" class="spark-grid__per-page">
+                <span class="spark-grid__page-details">Por página:</span>
                 <select :value="grid.rowsPerPage"
                     @change="(e) => rowsPerPageChanged(Number((e.target as HTMLSelectElement).value))"
                     class="spark-grid-datatable-select">
@@ -19,8 +19,9 @@
                 </select>
             </div>
 
-            <span v-show="grid.totalRows > 0">
-                Exibindo {{ beginningRows() }} a {{ endingRows() }} de {{ grid.totalRows }} registro(s)
+            <span v-show="grid.totalRows > 0" class="spark-grid__info">
+                <span class="spark-grid__info-full">Exibindo {{ beginningRows() }} a {{ endingRows() }} de {{ grid.totalRows }} registro(s)</span>
+                <span class="spark-grid__info-compact">{{ beginningRows() }}-{{ endingRows() }}/{{ grid.totalRows }}</span>
             </span>
 
             <span class="spark-grid-selected-rows">
@@ -110,14 +111,22 @@ const selectedRowsLength = computed(() => props.grid.getCheckedRows().length)
     gap: 8px;
 }
 
+.spark-grid__per-page {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
 .spark-grid__page-details {
     display: inline-block;
 }
 
+.spark-grid__info-compact {
+    display: none;
+}
+
 .spark-grid__select {
     width: 80px;
-    margin-left: 10px;
-    margin-right: 10px;
     display: inline-block;
 }
 
@@ -133,27 +142,41 @@ const selectedRowsLength = computed(() => props.grid.getCheckedRows().length)
     font-weight: bold;
 }
 
-/* Mobile/Tablet responsive */
+/* Mobile/Tablet responsive — single line footer */
 @media screen and (max-width: 768px) {
     .spark-grid-pages {
-        flex-direction: column;
-        align-items: center;
-        gap: 12px;
+        justify-content: center;
+        flex-wrap: nowrap;
+        gap: 6px;
         width: 100%;
+        font-size: 11px;
     }
 
     .spark-grid__page-details {
-        text-align: center;
+        display: none;
+    }
+
+    .spark-grid__info-full {
+        display: none;
+    }
+
+    .spark-grid__info-compact {
+        display: inline;
+        white-space: nowrap;
+    }
+
+    .spark-grid__per-page {
+        gap: 0;
     }
 
     .spark-grid__select {
-        width: 100px;
-        margin: 0;
+        width: auto;
+        min-width: 45px;
     }
 
     .spark-grid-selected-rows {
         margin: 0;
-        text-align: center;
+        flex: 0;
     }
 }
 </style>