feat(VnTable): refs #6825 use checkbox if startsWith 'is' or 'has'

src/components/VnTable/VnColumn.vue

@@ -99,6 +99,11 @@ const col = computed(() => {
             ...specific.forceAttrs,
         };
     }
+    if (
+        (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
+        !newColumn.component
+    )
+        newColumn.component = 'checkbox';
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
 
     return newColumn;

src/components/VnTable/VnFilter.vue

@@ -66,7 +66,7 @@ const components = {
         event: updateEvent,
         attrs: {
             dense: true,
-            class: 'q-pa-sm q-mt-md',
+            class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
             'toggle-indeterminate': true,
         },
         forceAttrs: {
@@ -89,7 +89,7 @@ const components = {
 
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
-    value = value == '' ? null : value;
+    value = value === '' ? null : value;
     let field = columnFilter.value?.name ?? $props.column.name;
     const toFilter = { [field]: value };
 
@@ -97,9 +97,9 @@ async function addFilter(value) {
 }
 
 function alignRow() {
-    if ($props.column.align == 'left') return 'justify-start';
+    if ($props.column.align == 'left') return 'justify-start items-start';
-    if ($props.column.align == 'right') return 'justify-end';
+    if ($props.column.align == 'right') return 'justify-end items-end';
-    return 'justify-center';
+    return 'flex-center';
 }
 </script>
 <template>
@@ -112,19 +112,17 @@ function alignRow() {
     </div>
     <div
         v-if="columnFilter !== false && column.name != 'tableActions'"
-        class="row no-wrap"
+        class="full-width"
         :class="alignRow()"
     >
-        <span :class="$props.column.component != 'checkbox' ? 'full-width' : alignRow()">
+        <VnTableColumn
-            <VnTableColumn
+            :column="$props.column"
-                :column="$props.column"
+            :row="{}"
-                :row="{}"
+            default="input"
-                default="input"
+            v-model="model"
-                v-model="model"
+            :components="components"
-                :components="components"
+            component-prop="columnFilter"
-                component-prop="columnFilter"
+        />
-            />
-        </span>
     </div>
     <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
 </template>

src/components/VnTable/VnTable.vue

@@ -479,7 +479,7 @@ defineExpose({
 .vnTable {
     thead tr th {
         position: sticky;
-        z-index: 1;
+        z-index: 2;
     }
     thead tr:first-child th {
         top: 0;
@@ -505,10 +505,10 @@ defineExpose({
     .sticky {
         position: sticky;
         right: 0;
-        z-index: 1;
     }
     td.sticky {
         background-color: var(--q-dark);
+        z-index: 1;
     }
 }
 

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -177,25 +177,21 @@ const columns = computed(() => [
             condition: (value) => !value,
             icon: 'vn:disabled',
         },
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
-        component: 'checkbox',
         created: true,
     },
     {
@@ -207,43 +203,36 @@ const columns = computed(() => [
             condition: (value) => value,
             icon: 'vn:frozen',
         },
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
-        component: 'checkbox',
     },
     {
         align: 'right',