fix: refs #6553 fix qScrollArea

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,6 +774,17 @@ es:
     table tbody th {
         position: relative;
     }
+}
+
+.last-row-sticky {
+    tbody:nth-last-child(1) {
+        @extend .bg-header;
+        position: sticky;
+        z-index: 2;
+        bottom: 0;
+    }
+}
+
 .vn-label-value {
     display: flex;
     flex-direction: row;
@@ -777,16 +798,6 @@ es:
         user-select: all;
     }
 }
-}
-
-.last-row-sticky {
-    tbody:nth-last-child(1) {
-        @extend .bg-header;
-        position: sticky;
-        z-index: 2;
-        bottom: 0;
-    }
-}
 
 .cardEllipsis {
     overflow: hidden;
@@ -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 {