feat: refs #6825 qchip color

src/components/common/VnTable.vue

@@ -17,8 +17,8 @@ const $props = defineProps({
         default: () => [],
     },
     defaultMode: {
-        type: String, // 'table', 'list', 'card 2/3'
+        type: String,
-        default: 'list',
+        default: 'list', // 'table', 'list', 'card'
     },
     reponsive: {
         type: Boolean,
@@ -135,26 +135,32 @@ onMounted(() => {
                         />
                     </QTh>
                 </template>
+
                 <template #body-cell="{ row, col }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
                         <VnTableColumn :column="col" :row />
                     </QTd>
                 </template>
-                <template #item="{ row, cols, colsMap }">
+                <template #item="{ row, colsMap }">
+                    <TransitionGroup name="grid" tag="div" class="grid">
                         <QCard bordered flat>
                             <QCardSection horizontal>
-                            <span
+                                <span v-for="(col, index) of colsMap" :key="col.field">
-                                v-for="(prop, index) of Object.entries(row)"
+                                    {{ index }}
-                                :key="index"
-                            >
                                     <QChip
-                                    color="primary-light"
+                                        :class="
+                                            col.color
+                                                ? col.color(row)
+                                                : col.isId == 1
+                                                ? 'bg-primary-light'
+                                                : 'bg-secondary'
+                                        "
                                         square
-                                    v-if="cols[index]?.isId"
+                                        v-if="col.isId"
-                                    :title="t(cols[index].label)"
+                                        :title="t(col.label)"
                                         class="no-margin"
                                     >
-                                    {{ prop[1] }}
+                                        {{ row[col.field] }}
                                     </QChip>
                                 </span>
                             </QCardSection>
@@ -178,7 +184,8 @@ onMounted(() => {
                                 </div>
                                 <div v-if="colsMap.tableActions" class="column">
                                     <QBtn
-                                    v-for="(btn, index) of colsMap.tableActions.actions"
+                                        v-for="(btn, index) of colsMap.tableActions
+                                            .actions"
                                         :key="index"
                                         :title="btn.title"
                                         :icon="btn.icon"
@@ -191,6 +198,7 @@ onMounted(() => {
                                 </div>
                             </QCardSection>
                         </QCard>
+                    </TransitionGroup>
                 </template>
             </QTable>
         </template>
@@ -204,6 +212,11 @@ onMounted(() => {
     background-color: var(--primary-light);
     color: var(--vn-section-color);
 }
+
+.bg-secondary {
+    background-color: var(--vn-page-color);
+    color: var(--vn-text-colo);
+}
 .text-primary-light {
     color: var(--primary-light);
 }
@@ -260,6 +273,17 @@ onMounted(() => {
     grid-gap: 10px;
 }
 
+// WIP TRANSITIONS
+// .grid-item {
+//     background-color: red;
+//     transition: all 500ms ease;
+// }
+
+// .grid-move {
+//     background-color: #6b7280 !important;
+//     transform: scale(0.9);
+// }
+
 .divisor-line {
     height: 1px;
     background-color: var(--vn-section-color);

src/components/ui/VnPaginate.vue

@@ -192,12 +192,6 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div
-        v-if="!isLoading && store.hasMoreData"
-        class="w-full flex justify-center q-mt-md"
-    >
-        <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
-    </div>
 </template>
 
 <style lang="scss" scoped>

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -271,13 +271,14 @@ const columns = computed(() => [
         field: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
-        isId: true,
+        isId: 1,
     },
     {
         align: 'left',
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
+        isId: 2,
     },
     {
         align: 'left',