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

Refactor #3965 - unstyled option for directives

pull/4101/head^2
Tuğçe Küçükoğlu 2023-07-06 13:11:23 +03:00
parent f98d740652
commit 01616e5823
6 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/lib/badgedirective/BadgeDirective.d.ts vendored
View File

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

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

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

5
components/lib/ripple/Ripple.d.ts vendored
View File

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

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

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

5
components/lib/tooltip/Tooltip.d.ts vendored
View File

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

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

@ -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,