Refactor #4211 - For Badge Directive

components/lib/badgedirective/BadgeDirective.d.ts

@@ -9,7 +9,14 @@
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective';
 
-export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | null | undefined;
+export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgeDirectivePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BadgePassThroughMethodOptions {
+    context: BadgeContext;
+}
 
 /**
  * Defines options of Badge.
@@ -50,6 +57,29 @@ export interface BadgeDirectivePassThroughAttributes {
     [key: string]: any;
 }
 
+/**
+ * Defines current options in Badge directive.
+ */
+export interface BadgeContext {
+    /**
+     * Current info state as a boolean.
+     * @defaultValue true
+     */
+    info: boolean;
+    /**
+     * Current success state as a boolean.
+     */
+    success: boolean;
+    /**
+     * Current warning state as a boolean.
+     */
+    warning: boolean;
+    /**
+     * Current danger state as a boolean.
+     */
+    danger: boolean;
+}
+
 /**
  * Defines modifiers of Badge directive.
  */

components/lib/badgedirective/BadgeDirective.js

@@ -10,7 +10,9 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
         const badge = DomHandler.createElement('span', {
             id,
             class: !el.unstyled && this.cx('root'),
-            'p-bind': this.ptm('root')
+            'p-bind': this.ptm('root', {
+                context: binding.modifiers
+            })
         });
 
         el.$_pbadgeId = badge.getAttribute('id');