Merge branch 'master' of https://github.com/primefaces/primevue

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

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 [
-                '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);

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

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

@@ -2,10 +2,12 @@
     <Teleport to="body">
         <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
             <div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
-                <div class="p-sidebar-content">
-                    <button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
+                <div class="p-sidebar-header">
+                    <button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
                         <span class="p-sidebar-close-icon pi pi-times" />
                     </button>
+                </div>
+                <div class="p-sidebar-content">
                     <slot></slot>
                 </div>
             </div>
@@ -152,7 +154,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() {
@@ -169,21 +173,25 @@ export default {
 .p-sidebar {
     position: fixed;
     transition: transform .3s;
-    overflow: scroll;
+    display: flex;
+    flex-direction: column;
 }
 
 .p-sidebar-content {
     position: relative;
+    overflow-y: auto;
 }
 
-.p-sidebar-close {
-    position: absolute;
-    top: 0;
-    right: 0;
+.p-sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.p-sidebar-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow: hidden;
 }
 
 .p-sidebar-mask {

src/components/tabview/TabView.vue

@@ -90,7 +90,7 @@ export default {
                     if (this.isTabPanel(child)) {
                         tabs.push(child);
                     }
-                    else if (child.children.length > 0) {
+                    else if (child.children && child.children instanceof Array) {
                         child.children.forEach(nestedChild => {
                             if (this.isTabPanel(nestedChild)) {
                                 tabs.push(nestedChild)

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/calendar/CalendarDoc.vue

@@ -231,7 +231,7 @@ export default {
                         <td>view</td>
                         <td>string</td>
                         <td>date</td>
-                        <td>Type of view to display, valid valids are "date" for datepicker and "month" for month picker.</td>
+                        <td>Type of view to display, valid values are "date" for datepicker and "month" for month picker.</td>
                     </tr>
                     <tr>
                         <td>touchUI</td>
@@ -837,4 +837,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/views/menumodel/MenuModel.vue

@@ -164,6 +164,24 @@ const items = [
 ];
 
 </code></pre>
+
+            <h5>Separator</h5>
+            <p>Separators are special menuitems whose sole purpose is to divide menuitems. A separator is simply configured as below.</p>
+<pre v-code.script><code>
+const items = [
+    {
+        label: 'Item 1'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Item 2'
+    }
+];
+
+</code></pre>
+
         </div>
     </div>
 </template>

src/views/orderlist/OrderListDemo.vue

@@ -20,7 +20,7 @@
                                 <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
-                                <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                                <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
                                 <i class="pi pi-tag product-category-icon"></i>
                                 <span class="product-category">{{slotProps.item.category}}</span>
                             </div>
@@ -87,11 +87,13 @@ export default {
     .product-category-icon {
         vertical-align: middle;
         margin-right: .5rem;
+        font-size: .875rem;
     }
 
     .product-category {
         vertical-align: middle;
         line-height: 1;
+        font-size: .875rem;
     }
 }
 

src/views/orderlist/OrderListDoc.vue

@@ -217,7 +217,7 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
                     </div>
                     <div class="product-list-detail">
-                        <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
@@ -282,11 +282,13 @@ export default {
     .product-category-icon {
         vertical-align: middle;
         margin-right: .5rem;
+        font-size: .875rem;
     }
 
     .product-category {
         vertical-align: middle;
         line-height: 1;
+        font-size: .875rem;
     }
 }
 
@@ -322,7 +324,7 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
                     </div>
                     <div class="product-list-detail">
-                        <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
@@ -387,11 +389,13 @@ export default {
     .product-category-icon {
         vertical-align: middle;
         margin-right: .5rem;
+        font-size: .875rem;
     }
 
     .product-category {
         vertical-align: middle;
         line-height: 1;
+        font-size: .875rem;
     }
 }
 

src/views/picklist/PickListDemo.vue

@@ -23,7 +23,7 @@
                                 <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
-                                <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                                <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
                                 <i class="pi pi-tag product-category-icon"></i>
                                 <span class="product-category">{{slotProps.item.category}}</span>
                             </div>
@@ -90,11 +90,13 @@ export default {
     .product-category-icon {
         vertical-align: middle;
         margin-right: .5rem;
+        font-size: .875rem;
     }
 
     .product-category {
         vertical-align: middle;
         line-height: 1;
+        font-size: .875rem;
     }
 }
 

src/views/picklist/PickListDoc.vue

@@ -282,7 +282,7 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
                     </div>
                     <div class="product-list-detail">
-                        <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
@@ -341,11 +341,13 @@ export default {
     .product-category-icon {
         vertical-align: middle;
         margin-right: .5rem;
+        font-size: .875rem;
     }
 
     .product-category {
         vertical-align: middle;
         line-height: 1;
+        font-size: .875rem;
     }
 }
 
@@ -384,7 +386,7 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
                     </div>
                     <div class="product-list-detail">
-                        <h5 class="p-mb-2">{{slotProps.item.name}}</h5>
+                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
@@ -442,11 +444,13 @@ export default {
     .product-category-icon {
         vertical-align: middle;
         margin-right: .5rem;
+        font-size: .875rem;
     }
 
     .product-category {
         vertical-align: middle;
         line-height: 1;
+        font-size: .875rem;
     }
 }
 

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>