refactor: refs #6897 update VnFilter and VnTable components to enhance customization and improve styling

src/components/VnTable/VnFilter.vue

@@ -25,6 +25,10 @@ const $props = defineProps({
         type: String,
         default: 'table',
     },
+    customClass: {
+        type: String,
+        default: '',
+    },
 });
 
 defineExpose({ addFilter, props: $props });
@@ -55,7 +59,7 @@ const selectComponent = {
     component: markRaw(VnSelect),
     event: updateEvent,
     attrs: {
-        class: 'q-pt-none fit vn-label-padding',
+        class: `q-pt-none fit ${$props.customClass}`,
         dense: true,
         filled: !$props.showTitle,
     },
@@ -159,8 +163,8 @@ const onTabPressed = async () => {
         />
     </div>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 label.vn-label-padding > .q-field__inner > .q-field__control {
-    padding: inherit;
+    padding: inherit !important;
 }
 </style>

src/components/VnTable/VnTable.vue

@@ -384,7 +384,7 @@ async function renderInput(rowId, field, clickedElement) {
     editingRow.value = rowId;
 
     const originalColumn = $props.columns.find((col) => col.name === field);
-    const column = { ...originalColumn };
+    const column = { ...originalColumn, ...{ label: '' } };
     const row = CrudModelRef.value.formData[rowId];
     const oldValue = CrudModelRef.value.formData[rowId][column?.name];
 
@@ -626,6 +626,7 @@ const checkbox = ref(null);
                         v-if="col.visible ?? true"
                         class="body-cell"
                         :style="col?.width ? `max-width: ${col?.width}` : ''"
+                        style="padding: inherit"
                     >
                         <div
                             class="no-padding"
@@ -654,7 +655,7 @@ const checkbox = ref(null);
                                 :data-key="$attrs['data-key']"
                                 v-model="params[columnName(col)]"
                                 :search-url="searchUrl"
-                                class="full-width"
+                                customClass="header-filter"
                             />
                         </div>
                     </QTh>
@@ -1174,4 +1175,8 @@ es:
     height: 100%;
     display: flex;
 }
+
+label.header-filter > .q-field__inner > .q-field__control {
+    padding: inherit;
+}
 </style>

src/pages/Entry/Card/EntryBuys.vue

@@ -218,11 +218,11 @@ const columns = [
     {
         align: 'center',
         labelAbbreviation: 'GM',
+        label: t('Grouping selector'),
         toolTip: t('Grouping selector'),
         name: 'groupingMode',
         component: 'toggle',
         attrs: {
-            label: '',
             'toggle-indeterminate': true,
             trueValue: 'grouping',
             falseValue: 'packing',
@@ -595,6 +595,7 @@ onMounted(() => {
         ref="entryBuysRef"
         data-key="EntryBuys"
         :url="`Entries/${entityId}/getBuyList`"
+        order="name DESC"
         save-url="Buys/crud"
         :disable-option="{ card: true }"
         v-model:selected="selectedRows"