feat(VnFilter): merge objects

src/components/VnTable/VnChip.vue

@@ -16,10 +16,11 @@ function stopEventPropagation(event) {
 }
 </script>
 <template>
+    <slot name="beforeChip" :row="row"></slot>
     <span
         v-for="col of columns"
         :key="col.name"
-        @click="stopEventPropagation($event)"
+        @click="stopEventPropagation"
         class="cursor-text"
     >
         <QChip

src/components/VnTable/VnFilter.vue

@@ -36,45 +36,44 @@ const enterEvent = {
     'keyup.enter': () => addFilter(model.value),
     remove: () => addFilter(null),
 };
+
+const defaultAttrs = {
+    filled: !$props.showTitle,
+    class: 'q-px-sm q-pb-xs q-pt-none',
+    dense: true,
+};
+
+const forceAttrs = {
+    label: $props.showTitle ? '' : $props.column.label,
+};
+
 const components = {
     input: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            class: 'q-px-sm q-pb-xs q-pt-none',
+            ...defaultAttrs,
-            dense: true,
-            filled: !$props.showTitle,
             clearable: true,
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
     number: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            dense: true,
+            ...defaultAttrs,
-            class: 'q-px-sm q-pb-xs q-pt-none',
             clearable: true,
-            filled: !$props.showTitle,
-        },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
         },
+        forceAttrs,
     },
     date: {
         component: markRaw(VnInputDate),
         event: updateEvent,
         attrs: {
-            dense: true,
+            ...defaultAttrs,
-            class: 'q-px-sm q-pb-xs q-pt-none',
-            filled: !$props.showTitle,
             style: 'min-width: 150px',
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
     checkbox: {
         component: markRaw(QCheckbox),
@@ -84,9 +83,7 @@ const components = {
             class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
             'toggle-indeterminate': true,
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
     select: {
         component: markRaw(VnSelect),
@@ -96,12 +93,10 @@ const components = {
             dense: true,
             filled: !$props.showTitle,
         },
-        forceAttrs: {
+        forceAttrs,
-            label: $props.showTitle ? '' : $props.column.label,
-        },
     },
 };
-
+console.log(components);
 async function addFilter(value) {
     value ??= undefined;
     if (value && typeof value === 'object') value = model.value;

src/pages/Customer/Card/CustomerCard.vue

@@ -5,7 +5,7 @@ import CustomerFilter from '../CustomerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Customer"
+        data-key="Client"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
         :filter-panel="CustomerFilter"