From 4034320ff7a6fae1efd12a4178c7a457aec913b2 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 28 Jan 2025 11:59:04 +0100
Subject: [PATCH] fix: refs #6553 fix qScrollArea

---
 src/components/VnTable/VnTable.vue | 64 +++++++++++++++++-------------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index cef199104..17fabf10d 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -181,7 +181,7 @@ onMounted(() => {
 watch(
     () => $props.columns,
     (value) => splitColumns(value),
-    { immediate: true }
+    { immediate: true },
 );
 
 const isTableMode = computed(() => mode.value == TABLE_MODE);
@@ -212,7 +212,7 @@ function splitColumns(columns) {
     // Status column
     if (splittedColumns.value.chips.length) {
         splittedColumns.value.columnChips = splittedColumns.value.chips.filter(
-            (c) => !c.isId
+            (c) => !c.isId,
         );
         if (splittedColumns.value.columnChips.length)
             splittedColumns.value.columns.unshift({
@@ -318,7 +318,15 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
                 :data-key="$attrs['data-key']"
                 :columns="columns"
                 :redirect="redirect"
-            />
+            >
+                <template
+                    v-for="(_, slotName) in $slots"
+                    #[slotName]="slotData"
+                    :key="slotName"
+                >
+                    <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
+                </template>
+            </VnTableFilter>
         </QScrollArea>
     </QDrawer>
     <CrudModel
@@ -476,7 +484,9 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
                                 btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
                             "
                             :style="`visibility: ${
-                                (btn.show && btn.show(row)) ?? true ? 'visible' : 'hidden'
+                                ((btn.show && btn.show(row)) ?? true)
+                                    ? 'visible'
+                                    : 'hidden'
                             }`"
                             @click="btn.action(row)"
                         />
@@ -490,7 +500,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
                         <QCard
                             bordered
                             flat
-                            class="row no-wrap justify-between cursor-pointer q-pa-sm"
+                            class="row no-wrap justify-between cursor-pointer"
                             @click="
                                 (_, row) => {
                                     $props.rowClick && $props.rowClick(row);
@@ -532,7 +542,7 @@ function handleSelection({ evt, added, rows: selectedRows }, rows) {
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection
-                                    class="q-pl-lg q-pr-lg q-py-xs"
+                                    class="q-pl-sm q-pr-lg q-py-xs"
                                     :class="$props.cardClass"
                                 >
                                     <div
@@ -764,19 +774,6 @@ es:
     table tbody th {
         position: relative;
     }
-    .vn-label-value {
-        display: flex;
-        flex-direction: row;
-        color: var(--vn-text-color);
-        .value {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            pointer-events: all;
-            cursor: text;
-            user-select: all;
-        }
-    }
 }
 
 .last-row-sticky {
@@ -788,6 +785,20 @@ es:
     }
 }
 
+.vn-label-value {
+    display: flex;
+    flex-direction: row;
+    color: var(--vn-text-color);
+    .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        pointer-events: all;
+        cursor: text;
+        user-select: all;
+    }
+}
+
 .cardEllipsis {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -796,15 +807,12 @@ es:
 
 .grid-two {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    .vn-label-value {
-        flex-direction: column;
-        white-space: nowrap;
-        .fields {
-            display: flex;
-        }
-    }
-    white-space: nowrap;
+    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    max-width: 100%;
+    margin: 0 auto;
+    overflow: scroll;
+    white-space: wrap;
+    width: 100%;
 }
 
 .w-80 {