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

components/lib/autocomplete/style/AutoCompleteStyle.js

@@ -261,12 +261,7 @@ const classes = {
     inputChip: 'p-autocomplete-input-chip',
     loader: 'p-autocomplete-loader',
     dropdown: 'p-autocomplete-dropdown',
-    panel: ({ instance }) => [
+    panel: 'p-autocomplete-overlay p-component',
-        'p-autocomplete-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     list: 'p-autocomplete-list',
     optionGroup: 'p-autocomplete-option-group',
     option: ({ instance, option, i, getItemOptions }) => [

components/lib/base/style/BaseStyle.js

@@ -219,10 +219,6 @@ const theme = ({ dt }) => `
     animation: ripple 0.4s linear;
 }
 
-.p-ripple-disabled .p-ink {
-    display: none;
-}
-
 @keyframes ripple {
     100% {
         opacity: 0;

components/lib/basedirective/BaseDirective.js

@@ -1,5 +1,6 @@
 import Base from 'primevue/base';
 import BaseStyle from 'primevue/base/style';
+import PrimeVueService from 'primevue/service';
 import Theme, { ThemeService } from 'primevue/themes';
 import { ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import { mergeProps } from 'vue';
@@ -193,6 +194,18 @@ const BaseDirective = {
             BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
         };
 
+        const handleWatch = (el) => {
+            const watchers = el.$instance?.watch;
+
+            // for 'config'
+            watchers?.['config']?.call(el.$instance, el.$instance?.$config);
+            PrimeVueService.on('config:change', ({ newValue, oldValue }) => watchers?.['config']?.call(el.$instance, newValue, oldValue));
+
+            // for 'config.ripple'
+            watchers?.['config.ripple']?.call(el.$instance, el.$instance?.$config?.ripple);
+            PrimeVueService.on('config:ripple:change', ({ newValue, oldValue }) => watchers?.['config.ripple']?.call(el.$instance, newValue, oldValue));
+        };
+
         return {
             created: (el, binding, vnode, prevVnode) => {
                 handleHook('created', el, binding, vnode, prevVnode);
@@ -201,6 +214,7 @@ const BaseDirective = {
                 el.$attrSelector = UniqueComponentId('pd');
                 BaseDirective._loadStyles(el, binding, vnode);
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
+                handleWatch(el);
             },
             mounted: (el, binding, vnode, prevVnode) => {
                 BaseDirective._loadStyles(el, binding, vnode);

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -209,12 +209,7 @@ const classes = {
     dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',
-    overlay: ({ instance }) => [
+    overlay: 'p-cascadeselect-overlay p-component',
-        'p-cascadeselect-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     listContainer: 'p-cascadeselect-list-container',
     list: 'p-cascadeselect-list',
     item: ({ instance, processedOption }) => [

components/lib/colorpicker/style/ColorPickerStyle.js

@@ -114,12 +114,11 @@ const theme = ({ dt }) => `
 const classes = {
     root: 'p-colorpicker p-component',
     preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
-    panel: ({ instance, props }) => [
+    panel: ({ props }) => [
         'p-colorpicker-panel',
         {
             'p-colorpicker-panel-inline': props.inline,
-            'p-disabled': props.disabled,
+            'p-disabled': props.disabled
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     colorSelector: 'p-colorpicker-color-selector',

components/lib/config/PrimeVue.js

@@ -1,4 +1,5 @@
 import { FilterMatchMode } from 'primevue/api';
+import PrimeVueService from 'primevue/service';
 import Theme, { ThemeService } from 'primevue/themes';
 import { inject, reactive, ref, watch } from 'vue';
 
@@ -175,14 +176,31 @@ export function setup(app, options) {
 export function setupTheme(app, PrimeVue) {
     const isChanged = ref(false);
 
+    watch(
+        PrimeVue.config,
+        (newValue, oldValue) => {
+            PrimeVueService.emit('config:change', { newValue, oldValue });
+        },
+        { immediate: true, deep: true }
+    );
+
+    watch(
+        () => PrimeVue.config.ripple,
+        (newValue, oldValue) => {
+            PrimeVueService.emit('config:ripple:change', { newValue, oldValue });
+        },
+        { immediate: true, deep: true }
+    );
+
     watch(
         PrimeVue.config.theme,
-        (newValue) => {
+        (newValue, oldValue) => {
             if (!isChanged.value) {
                 Theme.setTheme(newValue);
             }
 
             isChanged.value = false;
+            PrimeVueService.emit('config:theme:change', { newValue, oldValue });
         },
         { immediate: true, deep: true }
     );

components/lib/confirmpopup/style/ConfirmPopupStyle.js

@@ -111,12 +111,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance }) => [
+    root: 'p-confirmpopup p-component',
-        'p-confirmpopup p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     content: 'p-confirmpopup-content',
     icon: 'p-confirmpopup-icon',
     message: 'p-confirmpopup-message',

components/lib/contextmenu/style/ContextMenuStyle.js

@@ -124,12 +124,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance }) => [
+    root: 'p-contextmenu p-component',
-        'p-contextmenu p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     rootList: 'p-contextmenu-root-list',
     item: ({ instance, processedItem }) => [
         'p-contextmenu-item',

components/lib/datatable/style/DataTableStyle.js

@@ -643,8 +643,7 @@ const classes = {
     filterOverlay: ({ instance, props }) => [
         'p-datatable-filter-overlay p-component',
         {
-            'p-datatable-filter-overlay-popover': props.display === 'menu',
+            'p-datatable-filter-overlay-popover': props.display === 'menu'
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     filterConstraintList: 'p-datatable-filter-constraint-list',

components/lib/datepicker/style/DatePickerStyle.js

@@ -359,8 +359,7 @@ const classes = {
         {
             'p-datepicker-panel-inline': props.inline,
             'p-disabled': props.disabled,
-            'p-datepicker-timeonly': props.timeOnly,
+            'p-datepicker-timeonly': props.timeOnly
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     calendarContainer: 'p-datepicker-calendar-container',

components/lib/dialog/style/DialogStyle.js

@@ -167,8 +167,7 @@ const classes = {
         'p-dialog p-component',
         {
             'p-dialog-rtl': props.rtl,
-            'p-dialog-maximized': props.maximizable && instance.maximized,
+            'p-dialog-maximized': props.maximizable && instance.maximized
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     header: 'p-dialog-header',

components/lib/drawer/style/DrawerStyle.js

@@ -181,7 +181,6 @@ const classes = {
     root: ({ instance }) => [
         'p-drawer p-component',
         {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false,
             'p-drawer-full': instance.fullScreen
         }
     ],

components/lib/galleria/style/GalleriaStyle.js

@@ -402,12 +402,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    mask: ({ instance }) => [
+    mask: 'p-galleria-mask p-component-overlay p-component-overlay-enter',
-        'p-galleria-mask p-component-overlay p-component-overlay-enter',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     root: ({ instance }) => {
         const thumbnailsPosClass = instance.$attrs.showThumbnails && instance.getPositionClass('p-galleria-thumbnails', instance.$attrs.thumbnailsPosition);
         const indicatorPosClass = instance.$attrs.showIndicators && instance.getPositionClass('p-galleria-indicators', instance.$attrs.indicatorsPosition);

components/lib/menu/style/MenuStyle.js

@@ -92,11 +92,10 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance, props }) => [
+    root: ({ props }) => [
         'p-menu p-component',
         {
-            'p-menu-overlay': props.popup,
+            'p-menu-overlay': props.popup
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     start: 'p-menu-start',

components/lib/multiselect/style/MultiSelectStyle.js

@@ -224,12 +224,7 @@ const classes = {
     dropdown: 'p-multiselect-dropdown',
     loadingIcon: 'p-multiselect-loading-icon',
     dropdownIcon: 'p-multiselect-dropdown-icon',
-    overlay: ({ instance }) => [
+    overlay: 'p-multiselect-overlay p-component',
-        'p-multiselect-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     header: 'p-multiselect-header',
     pcFilterContainer: 'p-multiselect-filter-container',
     pcFilter: 'p-multiselect-filter',

components/lib/password/style/PasswordStyle.js

@@ -86,12 +86,7 @@ const classes = {
     ptInput: 'p-password-input',
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
-    overlay: ({ instance }) => [
+    overlay: 'p-password-overlay p-component',
-        'p-password-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     meter: 'p-password-meter',
     meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
     meterText: 'p-password-meter-text'

components/lib/popover/style/PopoverStyle.js

@@ -81,12 +81,7 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: ({ instance }) => [
+    root: 'p-popover p-component',
-        'p-popover p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     content: 'p-popover-content'
 };
 

components/lib/ripple/Ripple.js

@@ -2,14 +2,16 @@ import { DomHandler } from 'primevue/utils';
 import BaseRipple from './BaseRipple';
 
 const Ripple = BaseRipple.extend('ripple', {
-    mounted(el) {
+    watch: {
-        const config = el?.$instance?.$config;
+        'config.ripple'(newValue) {
+            if (newValue) {
+                this.create(this.$host);
+                this.bindEvents(this.$host);
 
-        if (config && config.ripple) {
+                this.$host.setAttribute('data-pd-ripple', true);
-            this.create(el);
+            } else {
-            this.bindEvents(el);
+                this.remove(this.$host);
-
+            }
-            el.setAttribute('data-pd-ripple', true);
         }
     },
     unmounted(el) {

components/lib/select/style/SelectStyle.js

@@ -219,12 +219,7 @@ const classes = {
     dropdown: 'p-select-dropdown',
     loadingicon: 'p-select-loading-icon',
     dropdownIcon: 'p-select-dropdown-icon',
-    overlay: ({ instance }) => [
+    overlay: 'p-select-overlay p-component',
-        'p-select-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     header: 'p-select-header',
     pcFilter: 'p-select-filter',
     listContainer: 'p-select-list-container',

components/lib/service/PrimeVueService.js

@@ -0,0 +1,3 @@
+import { EventBus } from 'primevue/utils';
+
+export default EventBus();

components/lib/service/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./primevueservice.cjs.js",
+    "module": "./primevueservice.esm.js",
+    "unpkg": "./primevueservice.min.js"
+}

components/lib/tabs/style/TabsStyle.js

@@ -69,6 +69,8 @@ const theme = ({ dt }) => `
 }
 
 .p-tab {
+    position: relative;
+    overflow: hidden;
     cursor: pointer;
     border-style: solid;
     border-width: 0 0 1px 0;

components/lib/tieredmenu/style/TieredMenuStyle.js

@@ -135,8 +135,7 @@ const classes = {
     root: ({ instance, props }) => [
         'p-tieredmenu p-component',
         {
-            'p-tieredmenu-overlay': props.popup,
+            'p-tieredmenu-overlay': props.popup
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     start: 'p-tieredmenu-start',

components/lib/toast/style/ToastStyle.js

@@ -230,12 +230,7 @@ const inlineStyles = {
 };
 
 const classes = {
-    root: ({ props, instance }) => [
+    root: ({ props }) => ['p-toast p-component p-toast-' + props.position],
-        'p-toast p-component p-toast-' + props.position,
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     message: ({ props }) => [
         'p-toast-message',
         {

components/lib/treeselect/style/TreeSelectStyle.js

@@ -154,12 +154,7 @@ const classes = {
     pcChipLabel: 'p-treeselect-chip-label',
     dropdown: 'p-treeselect-dropdown',
     dropdownIcon: 'p-treeselect-dropdown-icon',
-    panel: ({ instance }) => [
+    panel: 'p-treeselect-overlay p-component',
-        'p-treeselect-overlay p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
     treeContainer: 'p-treeselect-tree-container',
     emptyMessage: 'p-treeselect-empty-message'
 };

layouts/AppConfigurator.vue

@@ -203,7 +203,7 @@ export default {
             EventBus.emit('theme-palette-change');
         },
         onRippleChange(value) {
-            this.$appState.ripple = value;
+            this.$primevue.config.ripple = value;
         },
         onPresetChange(value) {
             const preset = value === 'Lara' ? Lara : Aura;
@@ -214,7 +214,7 @@ export default {
     },
     computed: {
         rippleActive() {
-            return this.$appState.ripple;
+            return this.$primevue.config.ripple;
         }
     }
 };

layouts/default.vue

@@ -73,8 +73,7 @@ export default {
             return [
                 'layout-wrapper',
                 {
-                    'layout-news-active': this.$appState.newsActive,
+                    'layout-news-active': this.$appState.newsActive
-                    'p-ripple-disabled': this.$appState.ripple === false
                 }
             ];
         }

nuxt-vite.config.js

@@ -221,6 +221,7 @@ export default {
         },
         alias: {
             'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
+            'primevue/service': path.resolve(__dirname, './components/lib/service/PrimeVueService.js'),
             'primevue/config': path.resolve(__dirname, './components/lib/config/PrimeVue.js'),
             'primevue/styled': path.resolve(__dirname, './components/lib/styled/PrimeVueStyled.js'),
             'primevue/unstyled': path.resolve(__dirname, './components/lib/unstyled/PrimeVueUnstyled.js'),

pages/index.vue

@@ -48,7 +48,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['landing', { 'layout-news-active': this.$appState?.newsActive, 'p-ripple-disabled': this.$appState.ripple === false }];
+            return ['landing', { 'layout-news-active': this.$appState?.newsActive }];
         }
     },
     components: {

plugins/app-state.js

@@ -11,7 +11,6 @@ const $appState = {
             sourceType: 'options-api',
             newsActive: false,
             announcement: null,
-            ripple: false,
             storageKey: 'primevue'
         });
     }

rollup.config.js

@@ -228,6 +228,7 @@ const CORE_THEME_DEPENDENCIES = {
 const CORE_DEPENDENCIES = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
+    'primevue/service': 'primevue.service',
     'primevue/config': 'primevue.config',
     'primevue/styled': 'primevue.styled',
     'primevue/unstyled': 'primevue.unstyled',
@@ -514,6 +515,10 @@ function addDirectives() {
     addEntry('animateonscroll', 'AnimateOnScroll.js', 'animateonscroll');
 }
 
+function addService() {
+    addEntry('service', 'PrimeVueService.js', 'primevueservice');
+}
+
 function addConfig() {
     addEntry('config', 'PrimeVue.js', 'config');
     addEntry('styled', 'PrimeVueStyled.js', 'primevuestyled');
@@ -605,6 +610,7 @@ addStyle();
 addThemes();
 addBase();
 addApi();
+addService();
 addConfig();
 addDirectives();
 addServices();