fix(VnTable): refs #6825 fix events and css

src/components/common/VnTable.vue

@@ -107,12 +107,17 @@ const rowClickFunction = computed(() => {
     if ($props.rowClick) return $props.rowClick;
     if ($props.redirect)
         return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
-    return null;
+    return () => {};
 });
+
+const stopEventPropagation = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+        <QScrollArea class="fit">
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
                 :search-button="true"
@@ -148,7 +153,7 @@ const rowClickFunction = computed(() => {
                 selection="multiple"
                 v-model:selected="selected"
                 :grid="mode != 'table'"
-                table-header-class="bg-grey-8"
+                table-header-class="bg-header"
                 card-container-class="grid-three"
                 flat
                 :style="mode == 'table' && 'max-height: 92vh'"
@@ -165,21 +170,21 @@ const rowClickFunction = computed(() => {
                     <QBtn
                         icon="visibility"
                         title="asd"
-                        class="bg-dark q-mr-md"
+                        class="bg-vn-section-color q-mr-md"
                         dense
                         v-if="mode == 'table'"
                     />
                     <QBtnToggle
                         v-model="mode"
                         toggle-color="primary"
-                        class="bg-dark"
+                        class="bg-vn-section-color"
                         dense
                         :options="tableModes"
                     />
                     <QBtn
                         icon="filter_alt"
                         title="asd"
-                        class="bg-dark q-ml-md"
+                        class="bg-vn-section-color q-ml-md"
                         dense
                         @click="stateStore.toggleRightDrawer()"
                     />
@@ -230,6 +235,8 @@ const rowClickFunction = computed(() => {
                                     <span
                                         v-for="col of cardTemplate.chips"
                                         :key="col.field"
+                                        @click="stopEventPropagation($event)"
+                                        class="cursor-text"
                                     >
                                         <QChip
                                             v-if="col.chip.condition(row[col.field], row)"
@@ -260,9 +267,12 @@ const rowClickFunction = computed(() => {
                                     v-if="cardTemplate.title"
                                     class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
                                 >
-                                    <span :title="row[cardTemplate.title.field]">{{
+                                    <span
-                                        row[cardTemplate.title.field]
+                                        :title="row[cardTemplate.title.field]"
-                                    }}</span>
+                                        @click="stopEventPropagation($event)"
+                                        class="cursor-text"
+                                        >{{ row[cardTemplate.title.field] }}</span
+                                    >
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
@@ -273,7 +283,11 @@ const rowClickFunction = computed(() => {
                                     >
                                         <VnLv :label="`${col.label}:`">
                                             <template #value>
-                                                <VnTableColumn :column="col" :row />
+                                                <span
+                                                    @click="stopEventPropagation($event)"
+                                                >
+                                                    <VnTableColumn :column="col" :row />
+                                                </span>
                                             </template>
                                         </VnLv>
                                     </div>
@@ -283,6 +297,7 @@ const rowClickFunction = computed(() => {
                             <QCardSection
                                 v-if="colsMap.tableActions"
                                 class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                                @click="stopEventPropagation($event)"
                             >
                                 <QBtn
                                     v-for="(btn, index) of colsMap.tableActions.actions"
@@ -292,7 +307,7 @@ const rowClickFunction = computed(() => {
                                     class="q-pa-xs"
                                     flat
                                     :class="{ 'text-primary-light': btn.isPrimary }"
-                                    @click.prevent="btn.action(row)"
+                                    @click="btn.action(row)"
                                 />
                             </QCardSection>
                         </QCard>
@@ -329,39 +344,29 @@ const rowClickFunction = computed(() => {
     </QDialog>
 </template>
 <style lang="scss">
-* {
-    --primary-light: #f5b351;
-}
-.bg-primary-light {
-    background-color: var(--primary-light);
-    color: var(--vn-section-color);
-}
-
 .bg-chip-secondary {
     background-color: var(--vn-page-color);
     color: var(--vn-text-color);
 }
-.text-primary-light {
+
-    color: var(--primary-light);
+.bg-header {
-}
+    background-color: #5d5d5d;
-.q-checkbox {
+    color: var(--vn-page-color);
-    & .q-checkbox__label {
+    * {
-        color: var(--primary-light); /* use global*/
+        font-weight: bold !important;
-    }
-    & .q-checkbox__inner {
-        color: var(--primary-light); /* use global*/
     }
 }
+
 .q-table--dark .q-table__bottom,
 .q-table--dark thead,
 .q-table--dark tr,
 .q-table--dark th,
 .q-table--dark td {
-    border-color: #222222; /* use global*/
+    border-color: #222222;
 }
 
 .q-table__container > div:first-child {
-    background-color: #222222;
+    background-color: var(--vn-page-color);
 }
 
 /* Works on Firefox */
@@ -382,7 +387,7 @@ const rowClickFunction = computed(() => {
 *::-webkit-scrollbar-thumb {
     background-color: transparent;
     border-radius: 20px;
-    border: 3px solid grey;
+    border: 3px solid var(--vn-page-color);
 }
 
 .grid-three {
@@ -454,6 +459,9 @@ const rowClickFunction = computed(() => {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        pointer-events: all;
+        cursor: text;
+        user-select: all;
     }
 }
 
@@ -474,5 +482,6 @@ const rowClickFunction = computed(() => {
 .cursor-text {
     pointer-events: all;
     cursor: text;
+    user-select: all;
 }
 </style>

src/css/app.scss

@@ -115,6 +115,13 @@ select:-webkit-autofill {
     background-color: var(--vn-accent-color);
 }
 
+.text-primary-light {
+    color: $primary-light !important;
+}
+.bg-primary-light {
+    background: $primary-light !important;
+}
+
 .fill-icon {
     font-variation-settings: 'FILL' 1;
 }

src/css/quasar.variables.scss

@@ -28,7 +28,7 @@ $color-link: #66bfff;
 $color-spacer-light: #a3a3a31f;
 $color-spacer: #7979794d;
 $border-thin-light: 1px solid $color-spacer-light;
-$primary-light: lighten($primary, 35%);
+$primary-light: #f5b351;
 $dark-shadow-color: black;
 $layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
 $spacing-md: 16px;

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -264,13 +264,6 @@ const redirectToCreateView = (row) => {
 };
 
 const columns = computed(() => [
-    {
-        align: 'left',
-        field: 'customerStatus',
-        label: 'customerStatus',
-        name: 'customerStatus',
-        columnFilter: false,
-    },
     {
         align: 'left',
         field: 'id',
@@ -590,6 +583,7 @@ function handleLocation(data, location) {
         order="id DESC"
         :columns="columns"
         default-mode="table"
+        redirect="customer"
         auto-load
     >
         <template #more-create-dialog="{ data }">