From 219dd6d78b2ba369d678975c2d1be06664f0c365 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 8 Feb 2021 11:12:53 +0300
Subject: [PATCH] Add filterMenuStyle and filterMenuClass

---
 src/components/column/Column.d.ts           |  2 ++
 src/components/column/Column.vue            | 10 +++++++++-
 src/components/datatable/ColumnFilter.vue   | 22 ++++++++++++++++++---
 src/components/datatable/TableHeader.vue    |  4 ++--
 src/views/datatable/DataTableFilterDemo.vue |  5 ++++-
 5 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
index 018528bba..cacfcdb6d 100755
--- a/src/components/column/Column.d.ts
+++ b/src/components/column/Column.d.ts
@@ -16,6 +16,8 @@ declare class Column extends Vue {
     footerClass?: string;
     filterHeaderStyle?: object;
     filterHeaderClass?: string;
+    filterMenuStyle?: object;
+    filterMenuClass?: string;
     filterFunction?: Function;
     excludeGlobalFilter?: boolean;
     selectionMode?: string;
diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index f3945a872..f0e052b74 100755
--- a/src/components/column/Column.vue
+++ b/src/components/column/Column.vue
@@ -104,7 +104,15 @@ export default {
         },
         filterHeaderStyle: {
             type: null,
-            default: false
+            default: null
+        },
+        filterMenuClass: {
+            type: String,
+            default: null
+        },
+        filterMenuStyle: {
+            type: null,
+            default: null
         },
         selectionMode: {
             type: String,
diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 68d4dd372..9818bab8c 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -8,7 +8,7 @@
             @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
         <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-            <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick">
+            <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" :style="filterMenuStyle">
                 <component :is="filterHeader" :field="field" />
                 <template v-if="display === 'row'">
                     <ul class="p-column-filter-row-items">
@@ -110,6 +110,14 @@ export default {
         filters: {
             type: Object,
             default: null
+        },
+        filterMenuClass: {
+            type: String,
+            default: null
+        },
+        filterMenuStyle: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -265,18 +273,26 @@ export default {
             _filters[this.field].constraints[index].matchMode = value;
 
             if (!this.showApplyButton) {
-                this.$emit('filter-change', _filters);
+                this.$emit('filter-apply');
             }
         },
         addConstraint() {
             let _filters = {...this.filters};
             _filters[this.field].constraints.push({value: null, matchMode: this.defaultMatchMode});
             this.$emit('filter-change', _filters);
+
+            if (!this.showApplyButton) {
+                this.$emit('filter-apply');
+            }
         },
         removeConstraint(index) {
             let _filters = {...this.filters};
             _filters[this.field].constraints.splice(index, 1);
             this.$emit('filter-change', _filters);
+
+            if (!this.showApplyButton) {
+                this.$emit('filter-apply');
+            }
         },
         filterCallback() {
             this.$emit('filter-apply');
@@ -386,7 +402,7 @@ export default {
             ]
         },
         overlayClass() {
-            return {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'};
+            return [this.filterMenuyClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
         },
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index c00549e45..df575cc6f 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -17,7 +17,7 @@
                             <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
                             <DTColumnFilter v-if="filterDisplay === 'menu' && col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"  
                             :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
-                            :filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
+                            :filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
                             :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
                             :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
                         </div>
@@ -30,7 +30,7 @@
                         :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
                         <DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="row"  
                         :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
-                        :filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
+                        :filters="filters" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
                         :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
                         :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')" />
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index bc9848242..d0f12f1cd 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -84,13 +84,16 @@
                             <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
-                    <Column field="status" header="Status">
+                    <Column field="status" header="Status" filterMenuStyle="min-width:14rem">
                         <template #body="{data}">
                             <span class="p-column-title">Status</span>
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
                         <template #filter="{filterModel}">
                             <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
+                                <template #value="slotProps">
+                                    <span :class="'customer-badge status-' + slotProps.value">{{slotProps.value}}</span>
+                                </template>
                                 <template #option="slotProps">
                                     <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
                                 </template>