mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #4505 - V-Tooltip, TailwindCSS: Styling not working when using pinia store
This commit is contained in:
parent
cde6e2b2d1
commit
5ff7eb8e4c
4 changed files with 31 additions and 36 deletions
|
@ -2,12 +2,10 @@ import { DomHandler } from 'primevue/utils';
|
|||
import BaseRipple from './BaseRipple';
|
||||
|
||||
const Ripple = BaseRipple.extend('ripple', {
|
||||
mounted(el, binding) {
|
||||
const primevue = binding.instance.$primevue;
|
||||
|
||||
if (primevue && primevue.config && primevue.config.ripple) {
|
||||
el.unstyled = primevue.config.unstyled || binding.value?.unstyled || false;
|
||||
mounted(el) {
|
||||
const config = el?.$instance?.$config;
|
||||
|
||||
if (config && config.ripple) {
|
||||
this.create(el);
|
||||
this.bindEvents(el);
|
||||
}
|
||||
|
@ -31,7 +29,7 @@ const Ripple = BaseRipple.extend('ripple', {
|
|||
'aria-hidden': true,
|
||||
'data-p-ink': true,
|
||||
'data-p-ink-active': false,
|
||||
class: !el.unstyled && this.cx('root'),
|
||||
class: !this.isUnstyled() && this.cx('root'),
|
||||
onAnimationEnd: this.onAnimationEnd,
|
||||
'p-bind': this.ptm('root')
|
||||
});
|
||||
|
@ -57,7 +55,7 @@ const Ripple = BaseRipple.extend('ripple', {
|
|||
return;
|
||||
}
|
||||
|
||||
!target.unstyled && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
!this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'false');
|
||||
|
||||
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
|
||||
|
@ -74,12 +72,12 @@ const Ripple = BaseRipple.extend('ripple', {
|
|||
ink.style.top = y + 'px';
|
||||
ink.style.left = x + 'px';
|
||||
|
||||
!target.unstyled && DomHandler.addClass(ink, 'p-ink-active');
|
||||
!this.isUnstyled() && DomHandler.addClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'true');
|
||||
|
||||
this.timeout = setTimeout(() => {
|
||||
if (ink) {
|
||||
!target.unstyled && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
!this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
|
||||
ink.setAttribute('data-p-ink-active', 'false');
|
||||
}
|
||||
}, 401);
|
||||
|
@ -89,7 +87,7 @@ const Ripple = BaseRipple.extend('ripple', {
|
|||
clearTimeout(this.timeout);
|
||||
}
|
||||
|
||||
!event.currentTarget.unstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
|
||||
!this.isUnstyled() && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
|
||||
event.currentTarget.setAttribute('data-p-ink-active', 'false');
|
||||
},
|
||||
getInk(el) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue