Refactor #3965 - For StyleClass

pull/4077/head
Tuğçe Küçükoğlu 2023-06-22 16:55:50 +03:00
parent 0746ad86ac
commit c7c08b6c96
2 changed files with 52 additions and 4 deletions

View File

@ -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.
*/

View File

@ -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;