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

Fixed #4505 - V-Tooltip, TailwindCSS: Styling not working when using pinia store

pull/4604/head
mertsincan 2023-10-10 16:37:42 +01:00
parent cde6e2b2d1
commit 5ff7eb8e4c
4 changed files with 31 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/lib/badgedirective/BadgeDirective.js
View File

@ -5,11 +5,9 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
mounted(el, binding) { mounted(el, binding) {
const id = UniqueComponentId() + '_badge'; const id = UniqueComponentId() + '_badge';
el.unstyled = binding.instance.$primevue?.config?.unstyled || binding.value?.unstyled || false;
const badge = DomHandler.createElement('span', { const badge = DomHandler.createElement('span', {
id, id,
class: !el.unstyled && this.cx('root'), class: !this.isUnstyled() && this.cx('root'),
'p-bind': this.ptm('root', { 'p-bind': this.ptm('root', {
context: { context: {
...binding.modifiers, ...binding.modifiers,
@ -22,7 +20,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
el.$_pbadgeId = badge.getAttribute('id'); el.$_pbadgeId = badge.getAttribute('id');
for (let modifier in binding.modifiers) { for (let modifier in binding.modifiers) {
!el.unstyled && DomHandler.addClass(badge, 'p-badge-' + modifier); !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-' + modifier);
} }
if (binding.value != null) { if (binding.value != null) {
@ -30,22 +28,22 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
else el.$_badgeValue = binding.value; else el.$_badgeValue = binding.value;
badge.appendChild(document.createTextNode(el.$_badgeValue)); badge.appendChild(document.createTextNode(el.$_badgeValue));
if (String(el.$_badgeValue).length === 1 && !el.unstyled) { if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
!el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter'); !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-no-gutter');
} }
} else { } else {
!el.unstyled && DomHandler.addClass(badge, 'p-badge-dot'); !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot');
} }
el.setAttribute('data-pd-badge', true); el.setAttribute('data-pd-badge', true);
!el.unstyled && DomHandler.addClass(el, 'p-overlay-badge'); !this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true'); el.setAttribute('data-p-overlay-badge', 'true');
el.appendChild(badge); el.appendChild(badge);
this.$el = badge; this.$el = badge;
}, },
updated(el, binding) { updated(el, binding) {
!el.unstyled && DomHandler.addClass(el, 'p-overlay-badge'); !this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true'); el.setAttribute('data-p-overlay-badge', 'true');
if (binding.oldValue !== binding.value) { if (binding.oldValue !== binding.value) {
@ -54,7 +52,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value; if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
else el.$_badgeValue = binding.value; else el.$_badgeValue = binding.value;
if (!el.unstyled) { if (!this.isUnstyled()) {
if (el.$_badgeValue) { if (el.$_badgeValue) {
if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot'); if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');

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

@ -4,6 +4,7 @@ import { mergeProps } from 'vue';
const BaseDirective = { const BaseDirective = {
_getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])], _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
_getConfig: (binding, vnode) => (binding?.instance?.$primevue || vnode?.ctx?.appContext?.config?.globalProperties?.$primevue)?.config,
_getOptionValue: (options, key = '', params = {}) => { _getOptionValue: (options, key = '', params = {}) => {
const fKeys = ObjectUtils.toFlatCase(key).split('.'); const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift(); const fKey = fKeys.shift();
@ -23,7 +24,7 @@ const BaseDirective = {
const datasetPrefix = 'data-pc-'; const datasetPrefix = 'data-pc-';
const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {}; const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {};
const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT, getValue, key, params) : undefined; const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT(), getValue, key, params) : undefined;
const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} }); const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
const datasets = { const datasets = {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }), ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
@ -70,7 +71,7 @@ const BaseDirective = {
}, },
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`; const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
const config = binding?.instance?.$primevue?.config; const config = BaseDirective._getConfig(binding, vnode);
const instance = el?.$instance; const instance = el?.$instance;
const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`); const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
const defaultHook = BaseDirective._useDefaultPT(instance, config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`); const defaultHook = BaseDirective._useDefaultPT(instance, config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`);
@ -83,7 +84,7 @@ const BaseDirective = {
const handleHook = (hook, el, binding, vnode, prevVnode) => { const handleHook = (hook, el, binding, vnode, prevVnode) => {
el._$instances = el._$instances || {}; el._$instances = el._$instances || {};
const config = binding?.instance?.$primevue?.config; const config = BaseDirective._getConfig(binding, vnode);
const $prevInstance = el._$instances[name] || {}; const $prevInstance = el._$instances[name] || {};
const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {}; const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
@ -97,12 +98,12 @@ const BaseDirective = {
$style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style }, $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
$config: config, $config: config,
/* computed instance variables */ /* computed instance variables */
defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]), defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled, isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
/* instance's methods */ /* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }), ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false), ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined), cx: (key = '', params = {}) => (!el.$instance?.isUnstyled() ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined), sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
...$options ...$options
}; };
@ -117,10 +118,10 @@ const BaseDirective = {
handleHook('created', el, binding, vnode, prevVnode); handleHook('created', el, binding, vnode, prevVnode);
}, },
beforeMount: (el, binding, vnode, prevVnode) => { beforeMount: (el, binding, vnode, prevVnode) => {
const config = binding?.instance?.$primevue?.config; const config = BaseDirective._getConfig(binding, vnode);
BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce }); BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
!el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce }); !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
handleHook('beforeMount', el, binding, vnode, prevVnode); handleHook('beforeMount', el, binding, vnode, prevVnode);
}, },
mounted: (el, binding, vnode, prevVnode) => { mounted: (el, binding, vnode, prevVnode) => {

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

@ -2,12 +2,10 @@ import { DomHandler } from 'primevue/utils';
import BaseRipple from './BaseRipple'; import BaseRipple from './BaseRipple';
const Ripple = BaseRipple.extend('ripple', { const Ripple = BaseRipple.extend('ripple', {
mounted(el, binding) { mounted(el) {
const primevue = binding.instance.$primevue; const config = el?.$instance?.$config;
if (primevue && primevue.config && primevue.config.ripple) {
el.unstyled = primevue.config.unstyled || binding.value?.unstyled || false;
if (config && config.ripple) {
this.create(el); this.create(el);
this.bindEvents(el); this.bindEvents(el);
} }
@ -31,7 +29,7 @@ const Ripple = BaseRipple.extend('ripple', {
'aria-hidden': true, 'aria-hidden': true,
'data-p-ink': true, 'data-p-ink': true,
'data-p-ink-active': false, 'data-p-ink-active': false,
class: !el.unstyled && this.cx('root'), class: !this.isUnstyled() && this.cx('root'),
onAnimationEnd: this.onAnimationEnd, onAnimationEnd: this.onAnimationEnd,
'p-bind': this.ptm('root') 'p-bind': this.ptm('root')
}); });
@ -57,7 +55,7 @@ const Ripple = BaseRipple.extend('ripple', {
return; return;
} }
!target.unstyled && DomHandler.removeClass(ink, 'p-ink-active'); !this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false'); ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) { if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
@ -74,12 +72,12 @@ const Ripple = BaseRipple.extend('ripple', {
ink.style.top = y + 'px'; ink.style.top = y + 'px';
ink.style.left = x + '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'); ink.setAttribute('data-p-ink-active', 'true');
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
if (ink) { 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'); ink.setAttribute('data-p-ink-active', 'false');
} }
}, 401); }, 401);
@ -89,7 +87,7 @@ const Ripple = BaseRipple.extend('ripple', {
clearTimeout(this.timeout); 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'); event.currentTarget.setAttribute('data-p-ink-active', 'false');
}, },
getInk(el) { getInk(el) {

14
components/lib/tooltip/Tooltip.js
View File

@ -32,7 +32,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
} }
target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip; target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip;
target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
this.bindEvents(target, options); this.bindEvents(target, options);
@ -76,8 +75,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
this.bindEvents(target, options); this.bindEvents(target, options);
} }
} }
target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
}, },
unmounted(el, options) { unmounted(el, options) {
let target = this.getTarget(el); let target = this.getTarget(el);
@ -186,7 +183,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
let tooltipElement = this.create(el, options); let tooltipElement = this.create(el, options);
this.align(el); this.align(el);
!el.unstyled && DomHandler.fadeIn(tooltipElement, 250); !this.isUnstyled() && DomHandler.fadeIn(tooltipElement, 250);
const $this = this; const $this = this;
@ -228,7 +225,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
const modifiers = el.$_ptooltipModifiers; const modifiers = el.$_ptooltipModifiers;
const tooltipArrow = DomHandler.createElement('div', { const tooltipArrow = DomHandler.createElement('div', {
class: !el.unstyled && this.cx('arrow'), class: !this.isUnstyled() && this.cx('arrow'),
style: { style: {
top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null, top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null,
bottom: modifiers?.top ? '0' : null, bottom: modifiers?.top ? '0' : null,
@ -241,7 +238,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
}); });
const tooltipText = DomHandler.createElement('div', { const tooltipText = DomHandler.createElement('div', {
class: !el.unstyled && this.cx('text'), class: !this.isUnstyled() && this.cx('text'),
'p-bind': this.ptm('text', { 'p-bind': this.ptm('text', {
context: modifiers context: modifiers
}) })
@ -263,7 +260,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
display: 'inline-block', display: 'inline-block',
width: el.$_ptooltipFitContent ? 'fit-content' : undefined width: el.$_ptooltipFitContent ? 'fit-content' : undefined
}, },
class: [!el.unstyled && this.cx('root'), el.$_ptooltipClass], class: [!this.isUnstyled() && this.cx('root'), el.$_ptooltipClass],
'p-bind': this.ptm('root', { 'p-bind': this.ptm('root', {
context: modifiers context: modifiers
}) })
@ -405,8 +402,9 @@ const Tooltip = BaseTooltip.extend('tooltip', {
tooltipElement.style.left = -999 + 'px'; tooltipElement.style.left = -999 + 'px';
tooltipElement.style.top = -999 + 'px'; tooltipElement.style.top = -999 + 'px';
DomHandler.removeClass(tooltipElement, `p-tooltip-${tooltipElement.$_ptooltipPosition}`); DomHandler.removeClass(tooltipElement, `p-tooltip-${tooltipElement.$_ptooltipPosition}`);
DomHandler.addClass(tooltipElement, `p-tooltip-${position}`); !this.isUnstyled() && DomHandler.addClass(tooltipElement, `p-tooltip-${position}`);
tooltipElement.$_ptooltipPosition = position; tooltipElement.$_ptooltipPosition = position;
tooltipElement.setAttribute('data-p-position', position);
}, },
isOutOfBounds(el) { isOutOfBounds(el) {
let tooltipElement = this.getTooltipElement(el); let tooltipElement = this.getTooltipElement(el);