Fixed #1248 - InputStyle and Ripple config do not work on components that are attached to body

src/App.vue

@@ -157,7 +157,7 @@ export default {
         containerClass() {
             return [{
                 'layout-news-active': this.newsActive,
-                'p-input-filled': this.$appState.inputStyle === 'filled',
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         }

src/AppInputStyleSwitch.vue

@@ -18,12 +18,12 @@
 export default {
     methods: {
         onChange(value) {
-            this.$appState.inputStyle = value;
+            this.$primevue.config.inputStyle = value;
         }
     },
     computed: {
         value() {
-            return this.$appState.inputStyle;
+            return this.$primevue.config.inputStyle;
         }
     }
 };

src/components/autocomplete/AutoComplete.vue

@@ -543,7 +543,11 @@ export default {
             }];
         },
         panelStyleClass() {
-            return ['p-autocomplete-panel p-component', this.panelClass];
+            return [
+                'p-autocomplete-panel p-component', this.panelClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         inputValue() {
             if (this.modelValue) {

src/components/calendar/Calendar.vue

@@ -2011,17 +2011,16 @@ export default {
             ];
         },
         panelStyleClass() {
-            return [
+            return ['p-datepicker p-component', this.panelClass, {
-                'p-datepicker p-component', this.panelClass,
+                'p-datepicker-inline': this.inline,
-                {
+                'p-disabled': this.$attrs.disabled,
-                    'p-datepicker-inline': this.inline,
+                'p-datepicker-timeonly': this.timeOnly,
-                    'p-disabled': this.$attrs.disabled,
+                'p-datepicker-multiple-month': this.numberOfMonths > 1,
-                    'p-datepicker-timeonly': this.timeOnly,
+                'p-datepicker-monthpicker': (this.view === 'month'),
-                    'p-datepicker-multiple-month': this.numberOfMonths > 1,
+                'p-datepicker-touch-ui': this.touchUI,
-                    'p-datepicker-monthpicker': (this.view === 'month'),
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-datepicker-touch-ui': this.touchUI
+                'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
+            }];
-            ];
         },
         months() {
             let months = [];

src/components/cascadeselect/CascadeSelect.vue

@@ -308,7 +308,10 @@ export default {
                 return this.placeholder||'p-emptylabel';
         },
         panelStyleClass() {
-            return ['p-cascadeselect-panel p-component', this.panelClass];
+            return ['p-cascadeselect-panel p-component', this.panelClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         appendDisabled() {
             return this.appendTo === 'self';

src/components/colorpicker/ColorPicker.vue

@@ -570,7 +570,11 @@ export default {
             return ['p-colorpicker-preview p-inputtext', {'p-disabled': this.disabled}];
         },
         pickerClass() {
-            return ['p-colorpicker-panel', this.panelClass, {'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,
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         appendDisabled() {
             return this.appendTo === 'self' || this.inline;

src/components/config/PrimeVue.d.ts

@@ -2,6 +2,7 @@ import Vue, { Plugin } from 'vue';
 
 interface PrimeVueConfiguration {
     ripple?: boolean;
+    inputStyle?: string;
     locale?: PrimeVueLocaleOptions;
 }
 

src/components/config/PrimeVue.js

@@ -3,6 +3,7 @@ import {FilterMatchMode} from 'primevue/api';
 
 const defaultOptions = {
     ripple: false,
+    inputStyle: 'outlined',
     locale: {
         startsWith: 'Starts with',
         contains: 'Contains',

src/components/confirmpopup/ConfirmPopup.vue

@@ -1,7 +1,7 @@
 <template>
     <Teleport to="body">
         <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
+            <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-confirm-popup-content">
                     <i :class="iconClass" />
                     <span class="p-confirm-popup-message">{{confirmation.message}}</span>
@@ -187,6 +187,12 @@ export default {
         }
     },
     computed: {
+        containerClass() {
+            return ['p-confirm-popup p-component', {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
+        },
         message() {
             return this.confirmation ? this.confirmation.message : null;
         },

src/components/contextmenu/ContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <Teleport :to="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div :ref="containerRef" class="p-contextmenu p-component" v-if="visible" v-bind="$attrs">
+            <div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
                 <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" />
             </div>
         </transition>
@@ -196,6 +196,14 @@ export default {
             this.container = el;
         }
     },
+    computed: {
+        containerClass() {
+            return ['p-contextmenu p-component', {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }]
+        }
+    },
     components: {
         'ContextMenuSub': ContextMenuSub
     }

src/components/datatable/ColumnFilter.vue

@@ -439,15 +439,18 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
+            return ['p-column-filter p-fluid', {
-                'p-column-filter p-fluid', {
+                'p-column-filter-row': this.display === 'row',
-                    'p-column-filter-row': this.display === 'row',
+                'p-column-filter-menu': this.display === 'menu'
-                    'p-column-filter-menu': this.display === 'menu'
+            }];
-                }
-            ]
         },
         overlayClass() {
-            return [this.filterMenuClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
+            return [this.filterMenuClass, {
+                'p-column-filter-overlay p-component p-fluid': true, 
+                'p-column-filter-overlay-menu': this.display === 'menu',
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);

src/components/dialog/Dialog.vue

@@ -273,7 +273,9 @@ export default {
         dialogClass() {
             return ['p-dialog p-component', {
                 'p-dialog-rtl': this.rtl,
-                'p-dialog-maximized': this.maximizable && this.maximized
+                'p-dialog-maximized': this.maximizable && this.maximized,
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         },
         maximizeIconClass() {

src/components/dropdown/Dropdown.vue

@@ -629,7 +629,10 @@ export default {
             ];
         },
         panelStyleClass() {
-            return ['p-dropdown-panel p-component', this.panelClass];
+            return ['p-dropdown-panel p-component', this.panelClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         label() {
             let selectedOption = this.getSelectedOption();

src/components/galleria/Galleria.vue

@@ -171,7 +171,10 @@ export default {
     },
     computed: {
         maskContentClass() {
-            return ['p-galleria-mask p-component-overlay', this.maskClass];
+            return ['p-galleria-mask p-component-overlay', this.maskClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         }
     },
     components: {

src/components/menu/Menu.vue

@@ -197,7 +197,9 @@ export default {
     computed: {
         containerClass() {
             return ['p-menu p-component', {
-                'p-menu-overlay': this.popup
+                'p-menu-overlay': this.popup,
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
             }]
         }
     },

src/components/multiselect/MultiSelect.vue

@@ -521,28 +521,25 @@ export default {
             }
         },
         containerClass() {
-            return [
+            return ['p-multiselect p-component p-inputwrapper', {
-                'p-multiselect p-component p-inputwrapper',
+                'p-multiselect-chip': this.display === 'chip',
-                {
+                'p-disabled': this.disabled,
-                    'p-multiselect-chip': this.display === 'chip',
+                'p-focus': this.focused,
-                    'p-disabled': this.disabled,
+                'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
-                    'p-focus': this.focused,
+                'p-inputwrapper-focus': this.focused || this.overlayVisible
-                    'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
+            }];
-                    'p-inputwrapper-focus': this.focused || this.overlayVisible
-                }
-            ];
         },
         labelClass() {
-            return [
+            return ['p-multiselect-label', {
-                'p-multiselect-label',
+                'p-placeholder': this.label === this.placeholder,
-                {
+                'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
-                    'p-placeholder': this.label === this.placeholder,
+            }];
-                    'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
-                }
-            ];
         },
         panelStyleClass() {
-            return ['p-multiselect-panel p-component', this.panelClass];
+            return ['p-multiselect-panel p-component', this.panelClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         label() {
             let label;

src/components/overlaypanel/OverlayPanel.vue

@@ -1,7 +1,7 @@
 <template>
     <Teleport :to="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
+            <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-overlaypanel-content" @click="onContentClick">
                     <slot></slot>
                 </div>
@@ -250,6 +250,12 @@ export default {
         }
     },
     computed: {
+        containerClass() {
+            return ['p-overlaypanel p-component', {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
+        },
         attributeSelector() {
             return UniqueComponentId();
         }

src/components/password/Password.vue

@@ -258,7 +258,10 @@ export default {
             }];
         },
         panelStyleClass() {
-            return ['p-password-panel p-component', this.panelClass];
+            return ['p-password-panel p-component', this.panelClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         toggleIconClass() {
             return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';

src/components/sidebar/Sidebar.vue

@@ -152,7 +152,9 @@ export default {
     computed: {
         containerClass() {
             return ['p-sidebar p-component p-sidebar-' + this.position , {
-                'p-sidebar-active': this.visible
+                'p-sidebar-active': this.visible,
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         },
         fullScreen() {

src/components/tieredmenu/TieredMenu.vue

@@ -177,7 +177,9 @@ export default {
     computed: {
         containerClass() {
             return ['p-tieredmenu p-component', {
-                'p-tieredmenu-overlay': this.popup
+                'p-tieredmenu-overlay': this.popup,
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         }
     },

src/components/toast/Toast.vue

@@ -97,7 +97,10 @@ export default {
     },
     computed: {
         containerClass() {
-            return 'p-toast p-component p-toast-' + this.position;
+            return ['p-toast p-component p-toast-' + this.position, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         }
     }
 }

src/components/treeselect/TreeSelect.vue

@@ -376,7 +376,10 @@ export default {
             ];
         },
         panelStyleClass() {
-            return ['p-treeselect-panel p-component', this.panelClass];
+            return ['p-treeselect-panel p-component', this.panelClass, {
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         selectedNodes() {
             let selectedNodes = [];

src/main.js

@@ -113,7 +113,7 @@ router.beforeEach(function (to, from, next) {
 
 const app = createApp(App);
 
-app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTheme: false, codeSandbox: true, sourceType: 'options-api'});
+app.config.globalProperties.$appState = reactive({darkTheme: false, codeSandbox: true, sourceType: 'options-api'});
 
 app.use(PrimeVue, {ripple: true});
 app.use(ToastService);

src/views/setup/Setup.vue

@@ -218,6 +218,21 @@ const app = createApp(App);
 
 app.use(PrimeVue, {ripple: true});
 
+</code></pre>
+
+            <h5>Outlined vs Filled Input Styles</h5>
+            <p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
+            to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, 
+            use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog
+            will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeVue configuration as well.</p>
+
+<pre v-code.script><code>
+import {createApp} from 'vue';
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue, {inputStyle: 'filled'});
+
 </code></pre>
 
             <h5>ZIndex Layering</h5>