From 5ff7eb8e4c4fef2ffea7f6e2354a964db68bb475 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 10 Oct 2023 16:37:42 +0100 Subject: [PATCH] Fixed #4505 - V-Tooltip, TailwindCSS: Styling not working when using pinia store --- .../lib/badgedirective/BadgeDirective.js | 18 ++++++++---------- components/lib/basedirective/BaseDirective.js | 17 +++++++++-------- components/lib/ripple/Ripple.js | 18 ++++++++---------- components/lib/tooltip/Tooltip.js | 14 ++++++-------- 4 files changed, 31 insertions(+), 36 deletions(-) diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js index b032fb191..3a8930cb6 100644 --- a/components/lib/badgedirective/BadgeDirective.js +++ b/components/lib/badgedirective/BadgeDirective.js @@ -5,11 +5,9 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { mounted(el, binding) { const id = UniqueComponentId() + '_badge'; - el.unstyled = binding.instance.$primevue?.config?.unstyled || binding.value?.unstyled || false; - const badge = DomHandler.createElement('span', { id, - class: !el.unstyled && this.cx('root'), + class: !this.isUnstyled() && this.cx('root'), 'p-bind': this.ptm('root', { context: { ...binding.modifiers, @@ -22,7 +20,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { el.$_pbadgeId = badge.getAttribute('id'); 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) { @@ -30,22 +28,22 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { else el.$_badgeValue = binding.value; badge.appendChild(document.createTextNode(el.$_badgeValue)); - if (String(el.$_badgeValue).length === 1 && !el.unstyled) { - !el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter'); + if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) { + !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-no-gutter'); } } else { - !el.unstyled && DomHandler.addClass(badge, 'p-badge-dot'); + !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot'); } 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.appendChild(badge); this.$el = badge; }, 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'); if (binding.oldValue !== binding.value) { @@ -54,7 +52,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value; else el.$_badgeValue = binding.value; - if (!el.unstyled) { + if (!this.isUnstyled()) { if (el.$_badgeValue) { if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot'); diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js index 3784e4e2d..fb51257f3 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -4,6 +4,7 @@ import { mergeProps } from 'vue'; const BaseDirective = { _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 = {}) => { const fKeys = ObjectUtils.toFlatCase(key).split('.'); const fKey = fKeys.shift(); @@ -23,7 +24,7 @@ const BaseDirective = { const datasetPrefix = 'data-pc-'; 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 datasets = { ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }), @@ -70,7 +71,7 @@ const BaseDirective = { }, _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { const name = `on${ObjectUtils.toCapitalCase(hookName)}`; - const config = binding?.instance?.$primevue?.config; + const config = BaseDirective._getConfig(binding, vnode); const instance = el?.$instance; 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}`); @@ -83,7 +84,7 @@ const BaseDirective = { const handleHook = (hook, el, binding, vnode, prevVnode) => { el._$instances = el._$instances || {}; - const config = binding?.instance?.$primevue?.config; + const config = BaseDirective._getConfig(binding, vnode); const $prevInstance = el._$instances[name] || {}; const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {}; @@ -97,12 +98,12 @@ const BaseDirective = { $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style }, $config: config, /* computed instance variables */ - defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]), - isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled, + defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]), + isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled), /* instance's methods */ 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), - 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), ...$options }; @@ -117,10 +118,10 @@ const BaseDirective = { handleHook('created', 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 }); - !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); }, mounted: (el, binding, vnode, prevVnode) => { diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js index 846b71275..966dd88ef 100644 --- a/components/lib/ripple/Ripple.js +++ b/components/lib/ripple/Ripple.js @@ -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) { diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index 31668a6dd..83bc593c2 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -32,7 +32,6 @@ const Tooltip = BaseTooltip.extend('tooltip', { } target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip; - target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false; this.bindEvents(target, options); @@ -76,8 +75,6 @@ const Tooltip = BaseTooltip.extend('tooltip', { this.bindEvents(target, options); } } - - target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false; }, unmounted(el, options) { let target = this.getTarget(el); @@ -186,7 +183,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { let tooltipElement = this.create(el, options); this.align(el); - !el.unstyled && DomHandler.fadeIn(tooltipElement, 250); + !this.isUnstyled() && DomHandler.fadeIn(tooltipElement, 250); const $this = this; @@ -228,7 +225,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { const modifiers = el.$_ptooltipModifiers; const tooltipArrow = DomHandler.createElement('div', { - class: !el.unstyled && this.cx('arrow'), + class: !this.isUnstyled() && this.cx('arrow'), style: { top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null, bottom: modifiers?.top ? '0' : null, @@ -241,7 +238,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { }); const tooltipText = DomHandler.createElement('div', { - class: !el.unstyled && this.cx('text'), + class: !this.isUnstyled() && this.cx('text'), 'p-bind': this.ptm('text', { context: modifiers }) @@ -263,7 +260,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { display: 'inline-block', 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', { context: modifiers }) @@ -405,8 +402,9 @@ const Tooltip = BaseTooltip.extend('tooltip', { tooltipElement.style.left = -999 + 'px'; tooltipElement.style.top = -999 + 'px'; 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.setAttribute('data-p-position', position); }, isOutOfBounds(el) { let tooltipElement = this.getTooltipElement(el);