Fixed #1083 - Added panelClass where necessary

src/components/autocomplete/AutoComplete.d.ts

@@ -16,6 +16,7 @@ interface AutoCompleteProps {
     inputStyle?: any;
     inputClass?: string;
     forceSelection?: boolean;
+    panelClass?: string;
 }
 
 declare class AutoComplete {

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') {

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[];

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

src/components/cascadeselect/CascadeSelect.d.ts

@@ -14,6 +14,7 @@ interface CascadeSelectProps {
     inputId?: string;
     ariaLabelledBy?: string;
     appendTo?: string;
+    panelClass?: string;
 }
 
 declare class CascadeSelect {

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: {

src/components/colorpicker/ColorPicker.d.ts

@@ -8,6 +8,7 @@ interface ColorPickerProps {
     autoZIndex?: boolean;
     baseZIndex?: number;
     ariaLabelledBy?: string;
+    panelClass?: string;
 }
 
 declare class ColorPicker {

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}];
         }
     }
 }

src/components/dropdown/Dropdown.d.ts

@@ -25,6 +25,7 @@ interface DropdownProps {
     appendTo?: string;
     emptyFilterMessage?: string;
     emptyMessage?: string;
+    panelClass?: string;
 }
 
 declare class Dropdown {

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)

src/components/multiselect/MultiSelect.d.ts

@@ -24,6 +24,7 @@ interface MultiSelectProps {
     emptyFilterMessage?: string;
     emptyMessage?: string;
     display?: string;
+    panelClass?: string;
 }
 
 declare class MultiSelect {

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;
 

src/components/password/Password.d.ts

@@ -11,6 +11,7 @@ interface PasswordProps {
     toggleMask?: boolean;
     inputStyle?: any;
     inputClass?: string;
+    panelClass?: string;
 }
 
 declare class Password {

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';
         },

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) {

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>

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>

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>

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>

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>

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>