Refactor #3965 - unstyled option for directives

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;
 }
 
 /**

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')
         });
 

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;
 }
 
 /**

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')
             });

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;
 }
 
 /**

components/lib/tooltip/Tooltip.js

@@ -31,12 +31,8 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             }
         }
 
-        if (options.instance.$primevue && options.instance.$primevue.config) {
+        target.$_ptooltipZIndex = options.instance.$primevue.config?.zIndex?.tooltip;
-            let _config = options.instance.$primevue && options.instance.$primevue.config;
+        target.$_ptooltipUnstyled = options.instance.$primevue.config?.unstyled || options.value?.unstyled || false;
-
-            target.$_ptooltipZIndex = _config.zIndex.tooltip;
-            target.$_ptooltipUnstyled = _config.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,