From 714d3395493ff3d9b8764f6c93af637beefb959e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 12 May 2021 12:13:50 +0300
Subject: [PATCH] Fixed #1248 - InputStyle and Ripple config do not work on
 components that are attached to body

---
 src/App.vue                                   |  2 +-
 src/AppInputStyleSwitch.vue                   |  4 +--
 src/components/autocomplete/AutoComplete.vue  |  6 +++-
 src/components/calendar/Calendar.vue          | 21 ++++++------
 .../cascadeselect/CascadeSelect.vue           |  5 ++-
 src/components/colorpicker/ColorPicker.vue    |  6 +++-
 src/components/config/PrimeVue.d.ts           |  1 +
 src/components/config/PrimeVue.js             |  1 +
 src/components/confirmpopup/ConfirmPopup.vue  |  8 ++++-
 src/components/contextmenu/ContextMenu.vue    | 10 +++++-
 src/components/datatable/ColumnFilter.vue     | 17 ++++++----
 src/components/dialog/Dialog.vue              |  4 ++-
 src/components/dropdown/Dropdown.vue          |  5 ++-
 src/components/galleria/Galleria.vue          |  5 ++-
 src/components/menu/Menu.vue                  |  4 ++-
 src/components/multiselect/MultiSelect.vue    | 33 +++++++++----------
 src/components/overlaypanel/OverlayPanel.vue  |  8 ++++-
 src/components/password/Password.vue          |  5 ++-
 src/components/sidebar/Sidebar.vue            |  4 ++-
 src/components/tieredmenu/TieredMenu.vue      |  4 ++-
 src/components/toast/Toast.vue                |  5 ++-
 src/components/treeselect/TreeSelect.vue      |  5 ++-
 src/main.js                                   |  2 +-
 src/views/setup/Setup.vue                     | 15 +++++++++
 24 files changed, 125 insertions(+), 55 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 89a17d8ec..cc5ca25d2 100755
--- a/src/App.vue
+++ b/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
             }];
         }
diff --git a/src/AppInputStyleSwitch.vue b/src/AppInputStyleSwitch.vue
index 9d9025f56..a632a9c4d 100644
--- a/src/AppInputStyleSwitch.vue
+++ b/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;
         }
     }
 };
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 31a358208..39f7ce5fe 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/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) {
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 699e4e23a..f91d317f2 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -2011,17 +2011,16 @@ export default {
             ];
         },
         panelStyleClass() {
-            return [
-                'p-datepicker p-component', this.panelClass,
-                {
-                    'p-datepicker-inline': this.inline,
-                    'p-disabled': this.$attrs.disabled,
-                    'p-datepicker-timeonly': this.timeOnly,
-                    'p-datepicker-multiple-month': this.numberOfMonths > 1,
-                    'p-datepicker-monthpicker': (this.view === 'month'),
-                    'p-datepicker-touch-ui': this.touchUI
-                }
-            ];
+            return ['p-datepicker p-component', this.panelClass, {
+                'p-datepicker-inline': this.inline,
+                'p-disabled': this.$attrs.disabled,
+                'p-datepicker-timeonly': this.timeOnly,
+                'p-datepicker-multiple-month': this.numberOfMonths > 1,
+                'p-datepicker-monthpicker': (this.view === 'month'),
+                'p-datepicker-touch-ui': this.touchUI,
+                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                'p-ripple-disabled': this.$primevue.config.ripple === false
+            }];
         },
         months() {
             let months = [];
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 6d5ab8dcb..a16c89221 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/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';
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 32b5927e2..b2a1bb490 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/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;
diff --git a/src/components/config/PrimeVue.d.ts b/src/components/config/PrimeVue.d.ts
index e433d3fe4..94eb4cdc2 100644
--- a/src/components/config/PrimeVue.d.ts
+++ b/src/components/config/PrimeVue.d.ts
@@ -2,6 +2,7 @@ import Vue, { Plugin } from 'vue';
 
 interface PrimeVueConfiguration {
     ripple?: boolean;
+    inputStyle?: string;
     locale?: PrimeVueLocaleOptions;
 }
 
diff --git a/src/components/config/PrimeVue.js b/src/components/config/PrimeVue.js
index fcd81b934..d5f750a81 100644
--- a/src/components/config/PrimeVue.js
+++ b/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',
diff --git a/src/components/confirmpopup/ConfirmPopup.vue b/src/components/confirmpopup/ConfirmPopup.vue
index 4cc380c38..60afff97b 100644
--- a/src/components/confirmpopup/ConfirmPopup.vue
+++ b/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;
         },
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 0c177216d..3670e10a9 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/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
     }
diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index af366a667..c7b947dc5 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -439,15 +439,18 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
-                'p-column-filter p-fluid', {
-                    'p-column-filter-row': this.display === 'row',
-                    'p-column-filter-menu': this.display === 'menu'
-                }
-            ]
+            return ['p-column-filter p-fluid', {
+                'p-column-filter-row': this.display === 'row',
+                '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);
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index e943f20fc..3b350c6fa 100755
--- a/src/components/dialog/Dialog.vue
+++ b/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() {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 333decc88..9c9def069 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/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();
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index eddaafc36..002f3fd80 100755
--- a/src/components/galleria/Galleria.vue
+++ b/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: {
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 1dc7f76a7..9fc483f49 100755
--- a/src/components/menu/Menu.vue
+++ b/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
             }]
         }
     },
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 5fbad3907..1ccb55529 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -521,28 +521,25 @@ export default {
             }
         },
         containerClass() {
-            return [
-                'p-multiselect p-component p-inputwrapper',
-                {
-                    'p-multiselect-chip': this.display === 'chip',
-                    'p-disabled': this.disabled,
-                    'p-focus': this.focused,
-                    'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
-                    'p-inputwrapper-focus': this.focused || this.overlayVisible
-                }
-            ];
+            return ['p-multiselect p-component p-inputwrapper', {
+                'p-multiselect-chip': this.display === 'chip',
+                'p-disabled': this.disabled,
+                'p-focus': this.focused,
+                'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
+                'p-inputwrapper-focus': this.focused || this.overlayVisible
+            }];
         },
         labelClass() {
-            return [
-                'p-multiselect-label',
-                {
-                    'p-placeholder': this.label === this.placeholder,
-                    'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
-                }
-            ];
+            return ['p-multiselect-label', {
+                '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;
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 2328382f7..25932cbed 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/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();
         }
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index a09a8f8c1..5abaa4752 100755
--- a/src/components/password/Password.vue
+++ b/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';
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 5840df22f..62f290429 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/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() {
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index d2110d789..9da223860 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/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
             }];
         }
     },
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 8c691f53c..3fa6aa505 100755
--- a/src/components/toast/Toast.vue
+++ b/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
+            }];
         }
     }
 }
diff --git a/src/components/treeselect/TreeSelect.vue b/src/components/treeselect/TreeSelect.vue
index 14f97d43a..b3c63f6ae 100644
--- a/src/components/treeselect/TreeSelect.vue
+++ b/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 = [];
diff --git a/src/main.js b/src/main.js
index 98ea51931..442ed9f6b 100644
--- a/src/main.js
+++ b/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);
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index 30f7b9185..4a6ea535c 100755
--- a/src/views/setup/Setup.vue
+++ b/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>