vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For BadgeDirective

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-06-22 16:50:40 +03:00
parent 3c84f251e4
commit 6818c8092e
3 changed files with 568 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

65
components/lib/badgedirective/BadgeDirective.js
View file

@ -1,54 +1,69 @@
import { BaseDirective } from 'primevue/basedirective';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
const BadgeDirective = {
mounted(el, options) {
const BadgeDirective = BaseDirective.extend('badge', {
mounted(el, binding) {
const id = UniqueComponentId() + '_badge';
el.$_pbadgeId = id;
el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false;
let badge = document.createElement('span');
badge.id = id;
badge.className = 'p-badge p-component';
!el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component');
badge.setAttribute('data-pc-name', 'badge');
badge.setAttribute('data-pc-section', 'root');
for (let modifier in options.modifiers) {
DomHandler.addClass(badge, 'p-badge-' + modifier);
for (let modifier in binding.modifiers) {
!el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
}
if (options.value != null) {
badge.appendChild(document.createTextNode(options.value));
if (binding.value != null) {
if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
else el.$_badgeValue = binding.value;
badge.appendChild(document.createTextNode(el.$_badgeValue));
if (String(options.value).length === 1) {
DomHandler.addClass(badge, 'p-badge-no-gutter');
if (String(el.$_badgeValue).length === 1 && !el.$_pbadgeUnstyled) {
!el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-no-gutter');
}
} else {
DomHandler.addClass(badge, 'p-badge-dot');
!el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-dot');
}
DomHandler.addClass(el, 'p-overlay-badge');
!el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true');
el.appendChild(badge);
},
updated(el, options) {
DomHandler.addClass(el, 'p-overlay-badge');
el.$_pDirectiveElement = badge;
if (options.oldValue !== options.value) {
BaseDirective.directiveElement = badge;
BaseDirective.handleCSS('badge', el, binding);
},
updated(el, binding) {
!el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
el.setAttribute('data-p-overlay-badge', 'true');
if (binding.oldValue !== binding.value) {
let badge = document.getElementById(el.$_pbadgeId);
if (options.value) {
if (DomHandler.hasClass(badge, 'p-badge-dot')) {
DomHandler.removeClass(badge, 'p-badge-dot');
}
if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
else el.$_badgeValue = binding.value;
if (String(options.value).length === 1) DomHandler.addClass(badge, 'p-badge-no-gutter');
else DomHandler.removeClass(badge, 'p-badge-no-gutter');
} else if (!options.value && !DomHandler.hasClass(badge, 'p-badge-dot')) {
DomHandler.addClass(badge, 'p-badge-dot');
if (!el.$_pbadgeUnstyled) {
if (el.$_badgeValue) {
if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');
if (el.$_badgeValue.length === 1) DomHandler.addClass(badge, 'p-badge-no-gutter');
else DomHandler.removeClass(badge, 'p-badge-no-gutter');
} else if (!el.$_badgeValue && !DomHandler.hasClass(badge, 'p-badge-dot')) {
DomHandler.addClass(badge, 'p-badge-dot');
}
}
badge.innerHTML = '';
badge.appendChild(document.createTextNode(options.value));
badge.appendChild(document.createTextNode(el.$_badgeValue));
}
}
};
});
export default BadgeDirective;