vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Remove `p-ripple-disabled` class and update ripple directive

pull/5756/head
Mert Sincan 2024-05-08 16:58:22 +01:00
parent af230a824a
commit 6cd0591e24
30 changed files with 80 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

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

4
components/lib/base/style/BaseStyle.js
View File

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

14
components/lib/basedirective/BaseDirective.js
View File

@ -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);

7
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

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

5
components/lib/colorpicker/style/ColorPickerStyle.js
View File

@ -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-ripple-disabled': instance.$primevue.config.ripple === false
'p-disabled': props.disabled
}
],
colorSelector: 'p-colorpicker-color-selector',

20
components/lib/config/PrimeVue.js
View File

@ -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 }
);

7
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

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

7
components/lib/contextmenu/style/ContextMenuStyle.js
View File

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

3
components/lib/datatable/style/DataTableStyle.js
View File

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

3
components/lib/datepicker/style/DatePickerStyle.js
View File

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

3
components/lib/dialog/style/DialogStyle.js
View File

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

1
components/lib/drawer/style/DrawerStyle.js
View File

@ -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
}
],

7
components/lib/galleria/style/GalleriaStyle.js
View File

@ -402,12 +402,7 @@ const theme = ({ dt }) => `
`;
const classes = {
mask: ({ instance }) => [
'p-galleria-mask p-component-overlay p-component-overlay-enter',
{
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
mask: 'p-galleria-mask p-component-overlay p-component-overlay-enter',
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);

5
components/lib/menu/style/MenuStyle.js
View File

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

7
components/lib/multiselect/style/MultiSelectStyle.js
View File

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

7
components/lib/password/style/PasswordStyle.js
View File

@ -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 }) => [
'p-password-overlay p-component',
{
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
overlay: 'p-password-overlay p-component',
meter: 'p-password-meter',
meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
meterText: 'p-password-meter-text'

7
components/lib/popover/style/PopoverStyle.js
View File

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

16
components/lib/ripple/Ripple.js
View File

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

7
components/lib/select/style/SelectStyle.js
View File

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

3
components/lib/service/PrimeVueService.js Normal file
View File

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

5
components/lib/service/package.json Normal file
View File

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

3
components/lib/tieredmenu/style/TieredMenuStyle.js
View File

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

7
components/lib/toast/style/ToastStyle.js
View File

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

7
components/lib/treeselect/style/TreeSelectStyle.js
View File

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

4
layouts/AppConfigurator.vue
View File

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

3
layouts/default.vue
View File

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

1
nuxt-vite.config.js
View File

@ -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'),

2
pages/index.vue
View File

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

1
plugins/app-state.js
View File

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

6
rollup.config.js
View File

@ -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();