Merge pull request 'feat(VnTable): improve css columns' (!548) from 6825-improve-css into dev

Reviewed-on: verdnatura/salix-front#548
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/components/VnTable/VnOrder.vue

@@ -53,7 +53,7 @@ defineExpose({ orderBy });
         @click="orderBy(name, model?.direction)"
         class="row items-center no-wrap cursor-pointer"
     >
-        <span>{{ label }}</span>
+        <span :title="label">{{ label }}</span>
         <QChip
             v-if="name"
             :label="!vertical && model?.index"
@@ -69,8 +69,9 @@ defineExpose({ orderBy });
                 model?.index ? 'color-vn-text' : 'bg-transparent',
                 vertical ? 'q-px-none' : '',
             ]"
-            class="no-box-shadow q-mr-lg"
+            class="no-box-shadow"
             :clickable="true"
+            style="min-width: 40px"
         >
             <div
                 class="column flex-center"

src/components/VnTable/VnTable.vue

@@ -348,11 +348,7 @@ defineExpose({
                         />
                     </template>
                     <template #header-cell="{ col }">
-                        <QTh
-                            v-if="col.visible ?? true"
-                            auto-width
-                            style="min-width: 100px"
-                        >
+                        <QTh v-if="col.visible ?? true" auto-width>
                             <div
                                 class="column self-start q-ml-xs ellipsis"
                                 :class="`text-${col?.align ?? 'left'}`"
@@ -401,7 +397,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="getColAlign(col)"
+                            :class="[getColAlign(col), col.class, col.columnField?.class]"
                             v-if="col.visible ?? true"
                         >
                             <slot :name="`column-${col.name}`" :col="col" :row="row">

src/css/app.scss

@@ -229,3 +229,26 @@ input::-webkit-inner-spin-button {
 *::-webkit-scrollbar-track {
     background: transparent;
 }
+
+.q-table {
+    thead,
+    tbody {
+        th {
+            .q-select {
+                max-width: 120px;
+            }
+        }
+        td {
+            padding: 1px 10px 1px 10px;
+            max-width: 100px;
+            div span {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+        .expand {
+            max-width: 400px;
+        }
+    }
+}

src/pages/Customer/CustomerList.vue

@@ -42,6 +42,9 @@ const columns = computed(() => [
         name: 'name',
         isTitle: true,
         create: true,
+        columnField: {
+            class: 'expand',
+        },
     },
     {
         align: 'left',
@@ -49,6 +52,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.socialName'),
         isTitle: true,
         create: true,
+        columnField: {
+            class: 'expand',
+        },
     },
     {
         align: 'left',
@@ -78,8 +84,8 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
-        component: 'number',
         columnFilter: {
+            component: 'number',
             inWhere: true,
         },
     },
@@ -87,8 +93,8 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
-        component: 'number',
         columnFilter: {
+            component: 'number',
             inWhere: true,
         },
     },
@@ -130,6 +136,9 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        columnField: {
+            class: 'expand',
+        },
     },
     {
         align: 'left',
@@ -179,8 +188,8 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.created'),
         name: 'created',
         format: ({ created }) => toDate(created),
-        component: 'date',
         columnFilter: {
+            component: 'date',
             alias: 'c',
             inWhere: true,
         },