2022-12-21 12:48:42 +00:00
|
|
|
import { DomHandler, UniqueComponentId } from 'primevue/utils';
|
2023-07-03 22:20:35 +00:00
|
|
|
import BaseBadgeDirective from './BaseBadgeDirective';
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-07-03 22:20:35 +00:00
|
|
|
const BadgeDirective = BaseBadgeDirective.extend('badge', {
|
2023-06-22 13:50:40 +00:00
|
|
|
mounted(el, binding) {
|
2022-09-06 12:03:37 +00:00
|
|
|
const id = UniqueComponentId() + '_badge';
|
2022-09-14 11:26:01 +00:00
|
|
|
|
2023-07-03 22:20:35 +00:00
|
|
|
const badge = DomHandler.createElement('span', {
|
|
|
|
id,
|
2023-10-10 15:37:42 +00:00
|
|
|
class: !this.isUnstyled() && this.cx('root'),
|
2024-04-01 15:03:24 +00:00
|
|
|
[this.$attrSelector]: '',
|
2023-07-31 11:24:02 +00:00
|
|
|
'p-bind': this.ptm('root', {
|
2023-07-31 12:12:50 +00:00
|
|
|
context: {
|
|
|
|
...binding.modifiers,
|
|
|
|
nogutter: String(binding.value).length === 1,
|
|
|
|
dot: binding.value == null
|
|
|
|
}
|
2023-07-31 11:24:02 +00:00
|
|
|
})
|
2023-07-03 22:20:35 +00:00
|
|
|
});
|
2022-09-14 11:26:01 +00:00
|
|
|
|
2023-07-03 22:20:35 +00:00
|
|
|
el.$_pbadgeId = badge.getAttribute('id');
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-06-22 13:50:40 +00:00
|
|
|
for (let modifier in binding.modifiers) {
|
2023-10-10 15:37:42 +00:00
|
|
|
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-' + modifier);
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
|
2023-06-22 13:50:40 +00:00
|
|
|
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));
|
2022-09-14 11:26:01 +00:00
|
|
|
|
2023-10-10 15:37:42 +00:00
|
|
|
if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
|
2024-05-13 15:20:54 +00:00
|
|
|
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-circle');
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
2022-09-14 11:26:01 +00:00
|
|
|
} else {
|
2023-10-10 15:37:42 +00:00
|
|
|
!this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot');
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
2023-07-07 12:00:11 +00:00
|
|
|
el.setAttribute('data-pd-badge', true);
|
2023-10-10 15:37:42 +00:00
|
|
|
!this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
|
2023-06-22 13:50:40 +00:00
|
|
|
el.setAttribute('data-p-overlay-badge', 'true');
|
2022-09-06 12:03:37 +00:00
|
|
|
el.appendChild(badge);
|
2023-06-22 13:50:40 +00:00
|
|
|
|
2023-07-03 22:20:35 +00:00
|
|
|
this.$el = badge;
|
2022-09-06 12:03:37 +00:00
|
|
|
},
|
2023-06-22 13:50:40 +00:00
|
|
|
updated(el, binding) {
|
2023-10-10 15:37:42 +00:00
|
|
|
!this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
|
2023-06-22 13:50:40 +00:00
|
|
|
el.setAttribute('data-p-overlay-badge', 'true');
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-06-22 13:50:40 +00:00
|
|
|
if (binding.oldValue !== binding.value) {
|
2022-09-06 12:03:37 +00:00
|
|
|
let badge = document.getElementById(el.$_pbadgeId);
|
|
|
|
|
2023-06-22 13:50:40 +00:00
|
|
|
if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
|
|
|
|
else el.$_badgeValue = binding.value;
|
2022-09-06 12:03:37 +00:00
|
|
|
|
2023-10-10 15:37:42 +00:00
|
|
|
if (!this.isUnstyled()) {
|
2023-06-22 13:50:40 +00:00
|
|
|
if (el.$_badgeValue) {
|
|
|
|
if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');
|
|
|
|
|
2024-05-13 15:20:54 +00:00
|
|
|
if (el.$_badgeValue.length === 1) DomHandler.addClass(badge, 'p-badge-circle');
|
|
|
|
else DomHandler.removeClass(badge, 'p-badge-circle');
|
2023-06-22 13:50:40 +00:00
|
|
|
} else if (!el.$_badgeValue && !DomHandler.hasClass(badge, 'p-badge-dot')) {
|
|
|
|
DomHandler.addClass(badge, 'p-badge-dot');
|
|
|
|
}
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
badge.innerHTML = '';
|
2023-06-22 13:50:40 +00:00
|
|
|
badge.appendChild(document.createTextNode(el.$_badgeValue));
|
2022-09-06 12:03:37 +00:00
|
|
|
}
|
|
|
|
}
|
2023-06-22 13:50:40 +00:00
|
|
|
});
|
2022-09-06 12:03:37 +00:00
|
|
|
|
|
|
|
export default BadgeDirective;
|