Refactor #3965 - For StyleClass

components/lib/styleclass/StyleClass.d.ts

@@ -8,6 +8,51 @@
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 
+/**
+ * Custom passthrough(pt) hooks options.
+ */
+export interface StyleClassPassThroughHooksOptions {
+    /**
+     * 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;
+}
+
+/**
+ * Defines passthrough(pt) options.
+ */
+export interface StyleClassPassThroughDirectiveOptions {
+    /**
+     * Uses to pass attributes to the life cycle hooks.
+     * @see {@link StyleClassPassThroughHooksOptions}
+     */
+    hooks?: StyleClassPassThroughHooksOptions;
+}
+
 /**
  * Defines options of StyleClass.
  */

components/lib/styleclass/StyleClass.js

@@ -1,9 +1,12 @@
+import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler } from 'primevue/utils';
 
 function bind(el, binding) {
-    el.$_pstyleclass_clicklistener = () => {
+    const target = resolveTarget(el, binding);
-        const target = resolveTarget(el, binding);
 
+    BaseDirective.directiveElement = target;
+
+    el.$_pstyleclass_clicklistener = () => {
         if (binding.value.toggleClass) {
             if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);
             else DomHandler.addClass(target, binding.value.toggleClass);
@@ -163,13 +166,13 @@ function isOutsideClick(event, target, el) {
     return !el.isSameNode(event.target) && !el.contains(event.target) && !target.contains(event.target);
 }
 
-const StyleClass = {
+const StyleClass = BaseDirective.extend('styleclass', {
     mounted(el, binding) {
         bind(el, binding);
     },
     unmounted(el) {
         unbind(el);
     }
-};
+});
 
 export default StyleClass;