From 01616e5823d5e57e3a2c6b857085d40149579ae2 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: Thu, 6 Jul 2023 13:11:23 +0300 Subject: [PATCH] Refactor #3965 - unstyled option for directives --- .../lib/badgedirective/BadgeDirective.d.ts | 5 +++++ components/lib/badgedirective/BadgeDirective.js | 4 ++-- components/lib/ripple/Ripple.d.ts | 5 +++++ components/lib/ripple/Ripple.js | 8 ++++---- components/lib/tooltip/Tooltip.d.ts | 5 +++++ components/lib/tooltip/Tooltip.js | 16 +++++++--------- 6 files changed, 28 insertions(+), 15 deletions(-) diff --git a/components/lib/badgedirective/BadgeDirective.d.ts b/components/lib/badgedirective/BadgeDirective.d.ts index f65974e09..f17146eb2 100644 --- a/components/lib/badgedirective/BadgeDirective.d.ts +++ b/components/lib/badgedirective/BadgeDirective.d.ts @@ -17,6 +17,11 @@ export interface BadgeDirectiveOptions { * @type {BadgeDirectivePassThroughOptions} */ pt?: BadgeDirectivePassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; } /** diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js index 4c1944f3c..9e2470d84 100644 --- a/components/lib/badgedirective/BadgeDirective.js +++ b/components/lib/badgedirective/BadgeDirective.js @@ -5,11 +5,11 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', { mounted(el, binding) { const id = UniqueComponentId() + '_badge'; - el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false; + el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || binding.value?.unstyled || false; const badge = DomHandler.createElement('span', { id, - class: this.cx('root'), + class: !el.$_pbadgeUnstyled && this.cx('root'), 'p-bind': this.ptm('root') }); diff --git a/components/lib/ripple/Ripple.d.ts b/components/lib/ripple/Ripple.d.ts index a7c3c048c..5d338a7ee 100644 --- a/components/lib/ripple/Ripple.d.ts +++ b/components/lib/ripple/Ripple.d.ts @@ -17,6 +17,11 @@ export interface RippleOptions { * @type {RippleDirectivePassThroughOptions} */ pt?: RippleDirectivePassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; } /** diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js index 4db852c46..5f9b01c7d 100644 --- a/components/lib/ripple/Ripple.js +++ b/components/lib/ripple/Ripple.js @@ -6,9 +6,9 @@ const Ripple = BaseRipple.extend('ripple', { const primevue = binding.instance.$primevue; if (primevue && primevue.config && primevue.config.ripple) { - el.$_prippleUnstyled = primevue.config.unstyled || false; + el.$_prippleUnstyled = primevue.config.unstyled || binding.value?.unstyled || false; - this.create(el, binding); + this.create(el); this.bindEvents(el); } }, @@ -23,13 +23,13 @@ const Ripple = BaseRipple.extend('ripple', { unbindEvents(el) { el.removeEventListener('mousedown', this.onMouseDown.bind(this)); }, - create(el, binding) { + create(el) { const ink = DomHandler.createElement('span', { role: 'presentation', 'aria-hidden': true, 'data-p-ink': true, 'data-p-ink-active': false, - class: this.cx('root'), + class: !el.$_prippleUnstyled && this.cx('root'), onAnimationEnd: this.onAnimationEnd, 'p-bind': this.ptm('root') }); diff --git a/components/lib/tooltip/Tooltip.d.ts b/components/lib/tooltip/Tooltip.d.ts index 182ccee2b..e88dfaa7c 100755 --- a/components/lib/tooltip/Tooltip.d.ts +++ b/components/lib/tooltip/Tooltip.d.ts @@ -55,6 +55,11 @@ export interface TooltipOptions { * @type {TooltipPassThroughOptions} */ pt?: TooltipPassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; } /** diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js index d94cb86d0..f2069637b 100755 --- a/components/lib/tooltip/Tooltip.js +++ b/components/lib/tooltip/Tooltip.js @@ -31,12 +31,8 @@ const Tooltip = BaseTooltip.extend('tooltip', { } } - if (options.instance.$primevue && options.instance.$primevue.config) { - let _config = options.instance.$primevue && options.instance.$primevue.config; - - target.$_ptooltipZIndex = _config.zIndex.tooltip; - target.$_ptooltipUnstyled = _config.unstyled || false; - } + target.$_ptooltipZIndex = options.instance.$primevue.config?.zIndex?.tooltip; + target.$_ptooltipUnstyled = options.instance.$primevue.config?.unstyled || options.value?.unstyled || false; this.bindEvents(target, options); }, @@ -78,6 +74,8 @@ const Tooltip = BaseTooltip.extend('tooltip', { this.bindEvents(target, options); } } + + target.$_ptooltipUnstyled = options.instance.$primevue.config?.unstyled || options.value?.unstyled || false; }, unmounted(el, options) { let target = this.getTarget(el); @@ -226,12 +224,12 @@ const Tooltip = BaseTooltip.extend('tooltip', { }, create(el, options) { const tooltipArrow = DomHandler.createElement('div', { - class: this.cx('arrow'), + class: !el.$_ptooltipUnstyled && this.cx('arrow'), 'p-bind': this.ptm('arrow') }); const tooltipText = DomHandler.createElement('div', { - class: this.cx('text'), + class: !el.$_ptooltipUnstyled && this.cx('text'), 'p-bind': this.ptm('text') }); @@ -251,7 +249,7 @@ const Tooltip = BaseTooltip.extend('tooltip', { display: 'inline-block', width: el.$_ptooltipFitContent ? 'fit-content' : undefined }, - class: [this.cx('root'), el.$_ptooltipClass], + class: [!el.$_ptooltipUnstyled && this.cx('root'), el.$_ptooltipClass], 'p-bind': this.ptm('root') }, tooltipArrow,