Refactor #3965 - For BadgeDirective

components/lib/badgedirective/BadgeDirective.d.ts

@@ -8,6 +8,90 @@
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Custom passthrough(pt) hooks options.
+ */
+export interface BadgePassThroughHooksOptions {
+    /**
+     * Called before bound element's attributes or event listeners are applied.
+     */
+    created?: DirectiveBinding;
+    /**
+     * Called right before the element is inserted into the DOM.
+     */
+    beforeMount?: DirectiveBinding;
+    /**
+     * Called when the bound element's parent component and all its children are mounted.
+     */
+    mounted?: DirectiveBinding;
+    /**
+     * Called before the parent component is updated.
+     */
+    beforeUpdate?: DirectiveBinding;
+    /**
+     * Called after the parent component and all of its children have updated all of its children have updated.
+     */
+    updated?: DirectiveBinding;
+    /**
+     * Called before the parent component is unmounted.
+     */
+    beforeUnmount?: DirectiveBinding;
+    /**
+     * Called when the parent component is unmounted.
+     */
+    unmounted?: DirectiveBinding;
+}
+
+/**
+ * Custom passthrough(pt) css options.
+ */
+export interface BadgePassThroughCSSOptions {
+    /**
+     * Style class of the element.
+     */
+    class?: any;
+    /**
+     * Inline style of the element.
+     */
+    style?: any;
+}
+
+export interface BadgePassThroughDirectiveOptions {
+    /**
+     * Uses to pass attributes to the life cycle hooks.
+     * @see {@link BadgePassThroughHooksOptions}
+     */
+    hooks?: BadgePassThroughHooksOptions;
+    /**
+     * Uses to pass attributes to the styles.
+     *  @see {@link BadgePassThroughCSSOptions}
+     */
+    css?: BadgePassThroughCSSOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BadgeOptions.pt}
+ */
+export interface BadgePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     *  @see {@link BadgePassThroughDirectiveOptions}
+     */
+    root?: BadgePassThroughDirectiveOptions;
+}
+
+/**
+ * Defines options of Badge.
+ */
+export interface BadgeOptions {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BadgePassThroughOptions}
+     */
+    pt?: BadgePassThroughOptions;
+}
+
 /**
  * Defines modifiers of Badge directive.
  */
@@ -41,7 +125,7 @@ export interface BadgeDirectiveBinding extends Omit<DirectiveBinding, 'modifiers
     /**
      * Value of the Badge.
      */
-    value?: string | undefined;
+    value?: string | BadgeOptions | undefined;
     /**
      * Modifiers of the Badge.
      * @type {BadgeDirectiveModifiers}

components/lib/badgedirective/BadgeDirective.js

@@ -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);
+        el.$_pDirectiveElement = badge;
+
+        BaseDirective.directiveElement = badge;
+        BaseDirective.handleCSS('badge', el, binding);
     },
-    updated(el, options) {
-        DomHandler.addClass(el, 'p-overlay-badge');
+    updated(el, binding) {
+        !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
+        el.setAttribute('data-p-overlay-badge', 'true');
 
-        if (options.oldValue !== options.value) {
+        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;