From b273dbbcc92b8ce137a3ade670de5b99b1cbe050 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Wed, 21 Jun 2023 16:48:00 +0300 Subject: [PATCH] Refactor #3965 - BaseDirective added --- components/lib/basedirective/BaseDirective.js | 70 +++++++++++++++++++ rollup.config.js | 1 + vite.config.js | 1 + 3 files changed, 72 insertions(+) create mode 100644 components/lib/basedirective/BaseDirective.js diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js new file mode 100644 index 000000000..c01c9501c --- /dev/null +++ b/components/lib/basedirective/BaseDirective.js @@ -0,0 +1,70 @@ +import { DomHandler, ObjectUtils } from 'primevue/utils'; + +export const BaseDirective = { + directiveElement: null, + extend: (directiveName, hooks) => { + return { + created: (el, binding, vnode, prevVnode) => { + hooks['created'] && hooks['created'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'created', el, binding, vnode, prevVnode); + }, + beforeMount: (el, binding, vnode, prevVnode) => { + hooks['beforeMount'] && hooks['beforeMount'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'beforeMount', el, binding, vnode, prevVnode); + }, + mounted: (el, binding, vnode, prevVnode) => { + hooks['mounted'] && hooks['mounted'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'mounted', el, binding, vnode, prevVnode); + }, + beforeUpdate: (el, binding, vnode, prevVnode) => { + hooks['beforeUpdate'] && hooks['beforeUpdate'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'beforeUpdate', el, binding, vnode, prevVnode); + }, + updated: (el, binding, vnode, prevVnode) => { + hooks['updated'] && hooks['updated'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'updated', el, binding, vnode, prevVnode); + }, + beforeUnmount: (el, binding, vnode, prevVnode) => { + hooks['beforeUnmount'] && hooks['beforeUnmount'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'beforeUnmount', el, binding, vnode, prevVnode); + }, + unmounted: (el, binding, vnode, prevVnode) => { + hooks['unmounted'] && hooks['unmounted'](el, binding, vnode, prevVnode); + BaseDirective.handleHook(directiveName, 'unmounted', el, binding, vnode, prevVnode); + } + }; + }, + handleHook: (directiveName, hookName, el, binding, vnode, prevVnode) => { + let _config = binding.instance.$primevue && binding.instance.$primevue.config; + let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName]; + + // global pt hook + _directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](BaseDirective.directiveElement, el, binding, vnode, prevVnode); + // options pt hook + binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](BaseDirective.directiveElement, el, binding, vnode, prevVnode); + }, + handleCSS: (directiveName, el, binding) => { + let _config = binding.instance.$primevue && binding.instance.$primevue.config; + let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName]; + let ptCSSOptions = []; + + // global pt css + _directive && _directive.css && ptCSSOptions.push(_directive.css); + // options pt css + binding.value && binding.value.pt && binding.value.pt.css && ptCSSOptions.push(binding.value.pt.css); + + for (let option of ptCSSOptions) { + Object.entries(option).forEach(([key, value]) => { + let styledElement; + + if (key === 'root' && directiveName !== 'ripple' && directiveName !== 'badge') styledElement = el; + else { + styledElement = DomHandler.findSingle(el, `[data-pc-section="${ObjectUtils.convertToFlatCase(key)}"]`); + } + + value.class && DomHandler.addMultipleClasses(styledElement, value.class); + value.style && DomHandler.addStyles(styledElement, value.style); + }); + } + } +}; diff --git a/rollup.config.js b/rollup.config.js index 50218ea8d..8fd85d412 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -62,6 +62,7 @@ let coreDependencies = { 'primevue/utils': 'primevue.utils', 'primevue/api': 'primevue.api', 'primevue/config': 'primevue.config', + 'primevue/basedirective': 'primevue.basedirective', 'primevue/ripple': 'primevue.ripple', 'primevue/portal': 'primevue.portal', 'primevue/basecomponent': 'primevue.basecomponent', diff --git a/vite.config.js b/vite.config.js index 49063aecd..035856409 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,7 @@ import path from 'path'; export default { resolve: { alias: { + 'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'), 'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'), 'primevue/tooltip': path.resolve(__dirname, './components/lib/tooltip/Tooltip.js'), 'primevue/focustrap': path.resolve(__dirname, './components/lib/focustrap/FocusTrap.js'),