From 1405a14768a6188a0173299490e51ea6e97360ec Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 15 Apr 2021 15:06:20 +0300
Subject: [PATCH] Fixed #1083 - Added panelClass where necessary

---
 src/components/autocomplete/AutoComplete.d.ts   |  1 +
 src/components/autocomplete/AutoComplete.vue    |  8 ++++++--
 src/components/calendar/Calendar.d.ts           |  1 -
 src/components/calendar/Calendar.vue            |  4 ----
 src/components/cascadeselect/CascadeSelect.d.ts |  1 +
 src/components/cascadeselect/CascadeSelect.vue  |  8 ++++++--
 src/components/colorpicker/ColorPicker.d.ts     |  1 +
 src/components/colorpicker/ColorPicker.vue      |  5 +++--
 src/components/dropdown/Dropdown.d.ts           |  1 +
 src/components/dropdown/Dropdown.vue            |  8 ++++++--
 src/components/multiselect/MultiSelect.d.ts     |  1 +
 src/components/multiselect/MultiSelect.vue      |  8 ++++++--
 src/components/password/Password.d.ts           |  1 +
 src/components/password/Password.vue            | 10 +++++++---
 src/components/treeselect/TreeSelect.vue        |  5 ++++-
 src/views/autocomplete/AutoCompleteDoc.vue      |  6 ++++++
 src/views/calendar/CalendarDoc.vue              |  6 ------
 src/views/cascadeselect/CascadeSelectDoc.vue    |  6 ++++++
 src/views/colorpicker/ColorPickerDoc.vue        |  6 ++++++
 src/views/dropdown/DropdownDoc.vue              |  6 ++++++
 src/views/multiselect/MultiSelectDoc.vue        |  6 ++++++
 21 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index 1dad8d119..0c6c35eef 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -16,6 +16,7 @@ interface AutoCompleteProps {
     inputStyle?: any;
     inputClass?: string;
     forceSelection?: boolean;
+    panelClass?: string;
 }
 
 declare class AutoComplete {
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 745f5dedb..db5ec0658 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -16,7 +16,7 @@
         <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible" @click="onOverlayClick">
+                <div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': scrollHeight}" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
                     <ul :id="listId" class="p-autocomplete-items" role="listbox">
                         <template v-if="!optionGroupLabel">
@@ -98,7 +98,8 @@ export default {
         inputClass: null,
         inputStyle: null,
         class: null,
-        style: null
+        style: null,
+        panelClass: null
     },
     timeout: null,
     outsideClickListener: null,
@@ -533,6 +534,9 @@ export default {
                 'p-focus': this.focused
             }];
         },
+        panelStyleClass() {
+            return ['p-autocomplete-panel p-component', this.panelClass];
+        },
         inputValue() {
             if (this.modelValue) {
                 if (this.field && typeof this.modelValue === 'object') {
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 69fd11e3b..dc86b17a7 100755
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -16,7 +16,6 @@ interface CalendarProps {
     yearNavigator?: boolean;
     yearRange?: string;
     panelClass?: string;
-    panelStyle?: string;
     minDate?: Date;
     maxDate?: Date;
     disabledDates?: Date[];
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 7be749731..e60db3937 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -200,10 +200,6 @@ export default {
             type: String,
             default: null
         },
-        panelStyle: {
-            type: String,
-            default: null
-        },
         minDate: {
             type: Date,
             value: null
diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
index 69fcac2c0..29459e58e 100644
--- a/src/components/cascadeselect/CascadeSelect.d.ts
+++ b/src/components/cascadeselect/CascadeSelect.d.ts
@@ -14,6 +14,7 @@ interface CascadeSelectProps {
     inputId?: string;
     ariaLabelledBy?: string;
     appendTo?: string;
+    panelClass?: string;
 }
 
 declare class CascadeSelect {
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index afe097a10..5cc682656 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -14,7 +14,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <div class="p-cascadeselect-items-wrapper">
                         <CascadeSelectSub :options="options" :selectionPath="selectionPath" 
                             :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
@@ -58,7 +58,8 @@ export default {
         appendTo: {
             type: String,
             default: 'body'
-        }
+        },
+        panelClass: null
     },
     outsideClickListener: null,
     scrollHandler: null,
@@ -299,6 +300,9 @@ export default {
                 return this.getOptionLabel(this.selectionPath[this.selectionPath.length - 1]);
             else
                 return this.placeholder||'p-emptylabel';
+        },
+        panelStyleClass() {
+            return ['p-cascadeselect-panel p-component', this.panelClass];
         }
     },
     components: {
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
index ccddd744c..c4400db44 100755
--- a/src/components/colorpicker/ColorPicker.d.ts
+++ b/src/components/colorpicker/ColorPicker.d.ts
@@ -8,6 +8,7 @@ interface ColorPickerProps {
     autoZIndex?: boolean;
     baseZIndex?: number;
     ariaLabelledBy?: string;
+    panelClass?: string;
 }
 
 declare class ColorPicker {
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 17af28f54..b7aa3067d 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -65,7 +65,8 @@ export default {
         ariaLabelledBy: {
             type: String,
             default: null
-        }
+        },
+        panelClass: null
     },
     data() {
         return {
@@ -561,7 +562,7 @@ export default {
             return ['p-colorpicker-preview p-inputtext', {'p-disabled': this.disabled}];
         },
         pickerClass() {
-            return ['p-colorpicker-panel', {'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled}];
+            return ['p-colorpicker-panel', this.panelClass, {'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled}];
         }
     }
 }
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index b87b07bd8..437f0242b 100755
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -25,6 +25,7 @@ interface DropdownProps {
     appendTo?: string;
     emptyFilterMessage?: string;
     emptyMessage?: string;
+    panelClass?: string;
 }
 
 declare class Dropdown {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 6047cb072..cc74b41d9 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -15,7 +15,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" class="p-dropdown-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div class="p-dropdown-header" v-if="filter">
                         <div  class="p-dropdown-filter-container">
@@ -107,7 +107,8 @@ export default {
         emptyMessage: {
             type: String,
             default: null
-        }
+        },
+        panelClass: null
     },
     data() {
         return {
@@ -621,6 +622,9 @@ export default {
                 }
             ];
         },
+        panelStyleClass() {
+            return ['p-dropdown-panel p-component', this.panelClass];
+        },
         label() {
             let selectedOption = this.getSelectedOption();
             if (selectedOption)
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 55b293c04..24b1fa8df 100755
--- a/src/components/multiselect/MultiSelect.d.ts
+++ b/src/components/multiselect/MultiSelect.d.ts
@@ -24,6 +24,7 @@ interface MultiSelectProps {
     emptyFilterMessage?: string;
     emptyMessage?: string;
     display?: string;
+    panelClass?: string;
 }
 
 declare class MultiSelect {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index a7ae3b8d4..30c46333c 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -25,7 +25,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" class="p-multiselect-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div class="p-multiselect-header">
                         <div class="p-checkbox p-component" @click="onToggleAll" role="checkbox" :aria-checked="allSelected">
@@ -144,7 +144,8 @@ export default {
         display: {
             type: String,
             default: 'comma'
-        }
+        },
+        panelClass: null
     },
     data() {
         return {
@@ -529,6 +530,9 @@ export default {
                 }
             ];
         },
+        panelStyleClass() {
+            return ['p-multiselect-panel p-component', this.panelClass];
+        },
         label() {
             let label;
 
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
index 32058c158..4a3a84222 100755
--- a/src/components/password/Password.d.ts
+++ b/src/components/password/Password.d.ts
@@ -11,6 +11,7 @@ interface PasswordProps {
     toggleMask?: boolean;
     inputStyle?: any;
     inputClass?: string;
+    panelClass?: string;
 }
 
 declare class Password {
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index f15c80de6..91c8e8733 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -4,7 +4,7 @@
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" class="p-password-panel p-component" v-if="overlayVisible" @click="onOverlayClick">
+                <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header"></slot>
                     <slot name="content">
                         <div class="p-password-meter">
@@ -65,10 +65,11 @@ export default {
             type: Boolean,
             default: false
         },
-        inputClass: null,
+        inputClass: toString,
         inputStyle: null,
         style: null,
-        class: null
+        class: String,
+        panelClass: String
     },
     data() {
         return {
@@ -250,6 +251,9 @@ export default {
                 'p-disabled': this.$attrs.disabled
             }];
         },
+        panelStyleClass() {
+            return ['p-password-panel p-component', this.panelClass];
+        },
         toggleIconClass() {
             return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
         },
diff --git a/src/components/treeselect/TreeSelect.vue b/src/components/treeselect/TreeSelect.vue
index f6adf28c4..da3829fcc 100644
--- a/src/components/treeselect/TreeSelect.vue
+++ b/src/components/treeselect/TreeSelect.vue
@@ -24,7 +24,7 @@
         </div>
         <Teleport :to="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="['p-treeselect-panel p-component', panelClass]">
+                <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass">
                     <slot name="header" :value="modelValue" :options="options"></slot>
                     <div class="p-treeselect-items-wrapper" :style="{'max-height': scrollHeight}">
                         <TSTree :value="options" :selectionMode="selectionMode" @update:selectionKeys="onSelectionChange" :selectionKeys="modelValue"
@@ -369,6 +369,9 @@ export default {
                 }
             ];
         },
+        panelStyleClass() {
+            return ['p-treeselect-panel p-component', panelClass];
+        },
         selectedNodes() {
             let selectedNodes = [];
             if (this.modelValue && this.options) {
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index c034017a3..560945e75 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -229,6 +229,12 @@ export default {
                         <td>false</td>
                         <td>When present, autocomplete clears the manual input if it does not match of the suggestions to force only
                         accepting values from the suggestions.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
                     </tr>
 				</tbody>
 			</table>
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index c66967e9a..48f1d9c8d 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -263,12 +263,6 @@ export default {
                         <td>null</td>
                         <td>Style class of the datetimepicker panel.</td>
                     </tr>
-                    <tr>
-                        <td>panelStyle</td>
-                        <td>object</td>
-                        <td>null</td>
-                        <td>Inline style of the datetimepicker panel.</td>
-                    </tr>
                     <tr>
                         <td>minDate</td>
                         <td>Date</td>
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index 7d2cd2a60..412766a0f 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -212,6 +212,12 @@ data() {
                         <td>string</td>
                         <td>body</td>
                         <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
                     </tr>
 				</tbody>
 			</table>
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index b785711c5..e3bae5a3c 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -98,6 +98,12 @@ export default {
                         <td>null</td>
                         <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
                     </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 693af00ff..be5d634f8 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -268,6 +268,12 @@ export default {
                         <td>string</td>
                         <td>No results found</td>
                         <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
                     </tr>
 				</tbody>
 			</table>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 44193dedf..3e86ec2e5 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -270,6 +270,12 @@ export default {
                         <td>string</td>
                         <td>comma</td>
                         <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
                     </tr>
 				</tbody>
 			</table>