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

Refactor #4103 - unstyled option updates

pull/4119/head
Tuğçe Küçükoğlu 2023-07-07 14:23:03 +03:00
parent 6c9b61aa65
commit 0f0c9b95b2
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,18 +5,18 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
mounted(el, binding) { mounted(el, binding) {
const id = UniqueComponentId() + '_badge'; 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', { const badge = DomHandler.createElement('span', {
id, id,
class: !el.$_pbadgeUnstyled && this.cx('root'), class: !el.unstyled && this.cx('root'),
'p-bind': this.ptm('root') 'p-bind': this.ptm('root')
}); });
el.$_pbadgeId = badge.getAttribute('id'); el.$_pbadgeId = badge.getAttribute('id');
for (let modifier in binding.modifiers) { 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) { if (binding.value != null) {
@ -24,21 +24,21 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
else el.$_badgeValue = binding.value; else el.$_badgeValue = binding.value;
badge.appendChild(document.createTextNode(el.$_badgeValue)); badge.appendChild(document.createTextNode(el.$_badgeValue));
if (String(el.$_badgeValue).length === 1 && !el.$_pbadgeUnstyled) { if (String(el.$_badgeValue).length === 1 && !el.unstyled) {
!el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-no-gutter'); !el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter');
} }
} else { } 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.setAttribute('data-p-overlay-badge', 'true');
el.appendChild(badge); el.appendChild(badge);
this.$el = badge; this.$el = badge;
}, },
updated(el, binding) { 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'); el.setAttribute('data-p-overlay-badge', 'true');
if (binding.oldValue !== binding.value) { if (binding.oldValue !== binding.value) {
@ -47,7 +47,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value; if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
else el.$_badgeValue = binding.value; else el.$_badgeValue = binding.value;
if (!el.$_pbadgeUnstyled) { if (!el.unstyled) {
if (el.$_badgeValue) { if (el.$_badgeValue) {
if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot'); if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');

2
components/lib/basedirective/BaseDirective.js
View File

@ -52,7 +52,7 @@ const BaseDirective = {
$css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css }, $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
/* computed instance variables */ /* computed instance variables */
defaultPT: config?.pt?.directives?.[name], defaultPT: config?.pt?.directives?.[name],
isUnstyled: config?.unstyled, isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
/* instance's methods */ /* instance's methods */
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }), 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), ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),

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

@ -6,7 +6,7 @@ const Ripple = BaseRipple.extend('ripple', {
const primevue = binding.instance.$primevue; const primevue = binding.instance.$primevue;
if (primevue && primevue.config && primevue.config.ripple) { 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.create(el);
this.bindEvents(el); this.bindEvents(el);
@ -29,7 +29,7 @@ const Ripple = BaseRipple.extend('ripple', {
'aria-hidden': true, 'aria-hidden': true,
'data-p-ink': true, 'data-p-ink': true,
'data-p-ink-active': false, 'data-p-ink-active': false,
class: !el.$_prippleUnstyled && this.cx('root'), class: !el.unstyled && this.cx('root'),
onAnimationEnd: this.onAnimationEnd, onAnimationEnd: this.onAnimationEnd,
'p-bind': this.ptm('root') 'p-bind': this.ptm('root')
}); });
@ -55,7 +55,7 @@ const Ripple = BaseRipple.extend('ripple', {
return; return;
} }
!target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active'); !target.unstyled && DomHandler.removeClass(ink, 'p-ink-active');
ink.setAttribute('data-p-ink-active', 'false'); ink.setAttribute('data-p-ink-active', 'false');
if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) { if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
@ -72,12 +72,12 @@ const Ripple = BaseRipple.extend('ripple', {
ink.style.top = y + 'px'; ink.style.top = y + 'px';
ink.style.left = x + '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'); ink.setAttribute('data-p-ink-active', 'true');
this.timeout = setTimeout(() => { this.timeout = setTimeout(() => {
if (ink) { 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'); ink.setAttribute('data-p-ink-active', 'false');
} }
}, 401); }, 401);
@ -87,7 +87,7 @@ const Ripple = BaseRipple.extend('ripple', {
clearTimeout(this.timeout); 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'); event.currentTarget.setAttribute('data-p-ink-active', 'false');
}, },
getInk(el) { getInk(el) {

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

@ -31,8 +31,8 @@ const Tooltip = BaseTooltip.extend('tooltip', {
} }
} }
target.$_ptooltipZIndex = options.instance.$primevue.config?.zIndex?.tooltip; target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip;
target.$_ptooltipUnstyled = options.instance.$primevue.config?.unstyled || options.value?.unstyled || false; target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
this.bindEvents(target, options); 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) { unmounted(el, options) {
let target = this.getTarget(el); let target = this.getTarget(el);
@ -184,7 +184,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
let tooltipElement = this.create(el, options); let tooltipElement = this.create(el, options);
this.align(el); this.align(el);
!el.$_ptooltipUnstyled && DomHandler.fadeIn(tooltipElement, 250); !el.unstyled && DomHandler.fadeIn(tooltipElement, 250);
const $this = this; const $this = this;
@ -224,12 +224,12 @@ const Tooltip = BaseTooltip.extend('tooltip', {
}, },
create(el, options) { create(el, options) {
const tooltipArrow = DomHandler.createElement('div', { const tooltipArrow = DomHandler.createElement('div', {
class: !el.$_ptooltipUnstyled && this.cx('arrow'), class: !el.unstyled && this.cx('arrow'),
'p-bind': this.ptm('arrow') 'p-bind': this.ptm('arrow')
}); });
const tooltipText = DomHandler.createElement('div', { const tooltipText = DomHandler.createElement('div', {
class: !el.$_ptooltipUnstyled && this.cx('text'), class: !el.unstyled && this.cx('text'),
'p-bind': this.ptm('text') 'p-bind': this.ptm('text')
}); });
@ -249,7 +249,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
display: 'inline-block', display: 'inline-block',
width: el.$_ptooltipFitContent ? 'fit-content' : undefined 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') 'p-bind': this.ptm('root')
}, },
tooltipArrow, tooltipArrow,