From 0f0c9b95b2beeac55659f8d18d65361f23a2697a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 7 Jul 2023 14:23:03 +0300 Subject: [PATCH] Refactor #4103 - unstyled option updates --- .../lib/badgedirective/BadgeDirective.js | 18 +++++++++--------- components/lib/basedirective/BaseDirective.js | 2 +- components/lib/ripple/Ripple.js | 12 ++++++------ components/lib/tooltip/Tooltip.js | 14 +++++++------- 4 files changed, 23 insertions(+), 23 deletions(-) diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js index 9e2470d84..1d51b6c9f 100644 --- a/components/lib/badgedirective/BadgeDirective.js +++ b/components/lib/badgedirective/BadgeDirective.js @@ -5,18 +5,18 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { mounted(el, binding) { const id = UniqueComponentId() + '_badge'; - el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || binding.value?.unstyled || false; + el.unstyled = binding.instance.$primevue?.config?.unstyled || binding.value?.unstyled || false; const badge = DomHandler.createElement('span', { id, - class: !el.$_pbadgeUnstyled && this.cx('root'), + class: !el.unstyled && this.cx('root'), 'p-bind': this.ptm('root') }); el.$_pbadgeId = badge.getAttribute('id'); for (let modifier in binding.modifiers) { - !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier); + !el.unstyled && DomHandler.addClass(badge, 'p-badge-' + modifier); } if (binding.value != null) { @@ -24,21 +24,21 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { else el.$_badgeValue = binding.value; badge.appendChild(document.createTextNode(el.$_badgeValue)); - if (String(el.$_badgeValue).length === 1 && !el.$_pbadgeUnstyled) { - !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-no-gutter'); + if (String(el.$_badgeValue).length === 1 && !el.unstyled) { + !el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter'); } } else { - !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-dot'); + !el.unstyled && DomHandler.addClass(badge, 'p-badge-dot'); } - !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge'); + !el.unstyled && DomHandler.addClass(el, 'p-overlay-badge'); el.setAttribute('data-p-overlay-badge', 'true'); el.appendChild(badge); this.$el = badge; }, updated(el, binding) { - !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge'); + !el.unstyled && DomHandler.addClass(el, 'p-overlay-badge'); el.setAttribute('data-p-overlay-badge', 'true'); if (binding.oldValue !== binding.value) { @@ -47,7 +47,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value; else el.$_badgeValue = binding.value; - if (!el.$_pbadgeUnstyled) { + if (!el.unstyled) { 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 9292e4699..88f0d1ae2 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -52,7 +52,7 @@ const BaseDirective = { $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css }, /* computed instance variables */ defaultPT: config?.pt?.directives?.[name], - isUnstyled: config?.unstyled, + isUnstyled: el.unstyled !== undefined ? el.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), diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js index d56dd097a..56b528a18 100644 --- a/components/lib/ripple/Ripple.js +++ b/components/lib/ripple/Ripple.js @@ -6,7 +6,7 @@ const Ripple = BaseRipple.extend('ripple', { const primevue = binding.instance.$primevue; if (primevue && primevue.config && primevue.config.ripple) { - el.$_prippleUnstyled = primevue.config.unstyled || binding.value?.unstyled || false; + el.unstyled = primevue.config.unstyled || binding.value?.unstyled || false; this.create(el); this.bindEvents(el); @@ -29,7 +29,7 @@ const Ripple = BaseRipple.extend('ripple', { 'aria-hidden': true, 'data-p-ink': true, 'data-p-ink-active': false, - class: !el.$_prippleUnstyled && this.cx('root'), + class: !el.unstyled && this.cx('root'), onAnimationEnd: this.onAnimationEnd, 'p-bind': this.ptm('root') }); @@ -55,7 +55,7 @@ const Ripple = BaseRipple.extend('ripple', { return; } - !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active'); + !target.unstyled && DomHandler.removeClass(ink, 'p-ink-active'); ink.setAttribute('data-p-ink-active', 'false'); if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) { @@ -72,12 +72,12 @@ const Ripple = BaseRipple.extend('ripple', { ink.style.top = y + 'px'; ink.style.left = x + 'px'; - !target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active'); + !target.unstyled && DomHandler.addClass(ink, 'p-ink-active'); ink.setAttribute('data-p-ink-active', 'true'); this.timeout = setTimeout(() => { if (ink) { - !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active'); + !target.unstyled && DomHandler.removeClass(ink, 'p-ink-active'); ink.setAttribute('data-p-ink-active', 'false'); } }, 401); @@ -87,7 +87,7 @@ const Ripple = BaseRipple.extend('ripple', { clearTimeout(this.timeout); } - !event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active'); + !event.currentTarget.unstyled && 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 f2069637b..48a1793eb 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -31,8 +31,8 @@ const Tooltip = BaseTooltip.extend('tooltip', { } } - target.$_ptooltipZIndex = options.instance.$primevue.config?.zIndex?.tooltip; - target.$_ptooltipUnstyled = options.instance.$primevue.config?.unstyled || options.value?.unstyled || false; + target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip; + target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false; this.bindEvents(target, options); }, @@ -75,7 +75,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { } } - target.$_ptooltipUnstyled = options.instance.$primevue.config?.unstyled || options.value?.unstyled || false; + target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false; }, unmounted(el, options) { let target = this.getTarget(el); @@ -184,7 +184,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { let tooltipElement = this.create(el, options); this.align(el); - !el.$_ptooltipUnstyled && DomHandler.fadeIn(tooltipElement, 250); + !el.unstyled && DomHandler.fadeIn(tooltipElement, 250); const $this = this; @@ -224,12 +224,12 @@ const Tooltip = BaseTooltip.extend('tooltip', { }, create(el, options) { const tooltipArrow = DomHandler.createElement('div', { - class: !el.$_ptooltipUnstyled && this.cx('arrow'), + class: !el.unstyled && this.cx('arrow'), 'p-bind': this.ptm('arrow') }); const tooltipText = DomHandler.createElement('div', { - class: !el.$_ptooltipUnstyled && this.cx('text'), + class: !el.unstyled && this.cx('text'), 'p-bind': this.ptm('text') }); @@ -249,7 +249,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { display: 'inline-block', width: el.$_ptooltipFitContent ? 'fit-content' : undefined }, - class: [!el.$_ptooltipUnstyled && this.cx('root'), el.$_ptooltipClass], + class: [!el.unstyled && this.cx('root'), el.$_ptooltipClass], 'p-bind': this.ptm('root') }, tooltipArrow,