src/components/common/VnTable.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, defineModel } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -11,17 +11,10 @@ import VnLv from 'components/ui/VnLv.vue';
 
 import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
-import VnTableCreate from 'components/common/VnTableCreate.vue';
+import VnTableChip from 'components/common/VnTableChip.vue';
 
+const columns = defineModel();
 const $props = defineProps({
-    columns: {
-        type: Array,
-        required: true,
-    },
-    columnsTable: {
-        type: Array,
-        default: () => [],
-    },
     defaultMode: {
         type: String,
         default: 'card', // 'table', 'card'
@@ -85,11 +78,12 @@ const cardTemplate = computed(() => {
     const create = [];
     let title;
     let actions;
-    for (const col of $props.columns) {
+    for (const col of columns.value) {
         if (col.field == 'tableActions') {
             actions = col;
         }
         if (col.chip) {
+            if (!chips.length) setChipColumn();
             chips.push(col);
         }
         if (col.isTitle) {
@@ -110,10 +104,22 @@ const rowClickFunction = computed(() => {
     return () => {};
 });
 
-const stopEventPropagation = (event) => {
+function stopEventPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
-};
+}
+
+function setChipColumn() {
+    console.log('SETTING', columns.value);
+    columns.value.unshift({
+        align: 'left',
+        field: 'status',
+        label: t('status'),
+        name: 'status',
+        customFilter: false,
+    });
+    console.log('SETTING', columns.value);
+}
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -199,7 +205,15 @@ const stopEventPropagation = (event) => {
                         />
                     </QTh>
                 </template>
-
+                <template #body-cell-chips="{ col }">
+                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                        <VnTableChip :columns="cardTemplate.chips" :row="row">
+                            <template #afterChip>
+                                <slot name="afterChip" :row="row"></slot>
+                            </template>
+                        </VnTableChip>
+                    </QTd>
+                </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
@@ -232,35 +246,11 @@ const stopEventPropagation = (event) => {
                                     v-if="cardTemplate.chips.length"
                                     class="no-margin q-px-xs q-py-none"
                                 >
-                                    <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)"
-                                            :title="t(col.label)"
-                                            :class="
-                                                col.chip.color
-                                                    ? col.chip.color(row)
-                                                    : !col.chip.icon &&
-                                                      'bg-chip-secondary'
-                                            "
-                                            dense
-                                            square
-                                        >
-                                            <span v-if="!col.chip.icon">{{
-                                                row[col.field]
-                                            }}</span>
-                                            <QIcon
-                                                v-else
-                                                :name="col.chip.icon"
-                                                color="primary-light"
-                                            />
-                                        </QChip>
-                                    </span>
-                                    <slot name="afterChip" :row="row"></slot>
+                                    <VnTableChip :columns="cardTemplate.chips" :row="row">
+                                        <template #afterChip>
+                                            <slot name="afterChip" :row="row"></slot>
+                                        </template>
+                                    </VnTableChip>
                                 </QCardSection>
                                 <!-- Title -->
                                 <QCardSection

src/components/common/VnTableChip.vue

@@ -0,0 +1,53 @@
+<script setup>
+defineProps({
+    columns: {
+        type: Array,
+        required: true,
+    },
+    row: {
+        type: Object,
+        default: null,
+    },
+});
+
+function stopEventPropagation(event) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+</script>
+<template>
+    <span
+        v-for="col of columns"
+        :key="col.field"
+        @click="stopEventPropagation($event)"
+        class="cursor-text"
+    >
+        <QChip
+            v-if="col.chip.condition(row[col.field], row)"
+            :title="col.label"
+            :class="
+                col.chip.color
+                    ? col.chip.color(row)
+                    : !col.chip.icon && 'bg-chip-secondary'
+            "
+            dense
+            square
+        >
+            <span v-if="!col.chip.icon">{{ row[col.field] }}</span>
+            <QIcon v-else :name="col.chip.icon" color="primary-light" />
+        </QChip>
+    </span>
+    <slot name="afterChip" :row="row"></slot>
+</template>
+<style lang="scss">
+.bg-chip-secondary {
+    background-color: var(--vn-page-color);
+    color: var(--vn-text-color);
+}
+
+.cursor-text {
+    pointer-events: all;
+    cursor: text;
+    user-select: all;
+}
+</style>

src/components/common/VnTableColumn.vue

@@ -1,27 +1,3 @@
-<template>
-    <VnComponent
-        v-if="col.before"
-        :prop="col.before"
-        :components="components"
-        :value="value"
-        v-model="model"
-    />
-    <VnComponent
-        v-if="col.component"
-        :prop="col"
-        :components="components"
-        :value="value"
-        v-model="model"
-    />
-    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
-    <VnComponent
-        v-if="col.after"
-        :prop="col.after"
-        :components="components"
-        :value="value"
-        v-model="model"
-    />
-</template>
 <script setup>
 import { markRaw, computed, defineModel } from 'vue';
 import { QIcon, QCheckbox } from 'quasar';
@@ -127,3 +103,27 @@ const col = computed(() => {
 
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
+<template>
+    <VnComponent
+        v-if="col.before"
+        :prop="col.before"
+        :components="components"
+        :value="value"
+        v-model="model"
+    />
+    <VnComponent
+        v-if="col.component"
+        :prop="col"
+        :components="components"
+        :value="value"
+        v-model="model"
+    />
+    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
+    <VnComponent
+        v-if="col.after"
+        :prop="col.after"
+        :components="components"
+        :value="value"
+        v-model="model"
+    />
+</template>

src/components/common/VnTableCreate.vue

@@ -1,29 +0,0 @@
-<script setup>
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnTableColumn from 'components/common/VnTableColumn.vue';
-
-const $props = defineProps({
-    columns: {
-        type: Object,
-        required: true,
-    },
-    create: {
-        type: Object,
-        required: true,
-    },
-});
-</script>
-<template>
-    <FormModelPopup v-bind="{ ...$attrs, ...$props.create }">
-        <template #form-inputs="{ data }">
-            <VnTableColumn
-                v-for="column of $props.columns"
-                :key="column.field"
-                :column="column"
-                :row="{}"
-                default="input"
-                v-model="data[column.field]"
-            />
-        </template>
-    </FormModelPopup>
-</template>

src/pages/Customer/ExtendedList/CustomerExtendedList.vue

@@ -581,7 +581,7 @@ function handleLocation(data, location) {
             },
         }"
         order="id DESC"
-        :columns="columns"
+        v-model="columns"
         default-mode="table"
         redirect="customer"
         auto-load