Refactor #4103 - Update lifecycle names in Base* files

pull/4186/head
mertsincan 2023-07-10 10:34:48 +01:00
parent 2572561902
commit 63b5b8be8e
6 changed files with 71 additions and 33 deletions

View File

@ -1,12 +1,12 @@
export interface ComponentHooks { export interface ComponentHooks {
beforeCreate?(): void; onBeforeCreate?(): void;
created?(): void; onCreated?(): void;
beforeMount?(): void; onBeforeMount?(): void;
mounted?(): void; onMounted?(): void;
beforeUpdate?(): void; onBeforeUpdate?(): void;
updated?(): void; onUpdated?(): void;
beforeUnmount?(): void; onBeforeUnmount?(): void;
unmounted?(): void; onUnmounted?(): void;
} }
export interface BaseComponentPassThroughOptions { export interface BaseComponentPassThroughOptions {

View File

@ -400,30 +400,30 @@ export default {
} }
}, },
beforeCreate() { beforeCreate() {
this.pt?.hooks?.['beforeCreate']?.(); this.pt?.hooks?.['onBeforeCreate']?.();
this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['beforeCreate']?.(); this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
}, },
created() { created() {
this._hook('created'); this._hook('onCreated');
}, },
beforeMount() { beforeMount() {
loadBaseStyle(); loadBaseStyle();
this._hook('beforeMount'); this._hook('onBeforeMount');
}, },
mounted() { mounted() {
this._hook('mounted'); this._hook('onMounted');
}, },
beforeUpdate() { beforeUpdate() {
this._hook('beforeUpdate'); this._hook('onBeforeUpdate');
}, },
updated() { updated() {
this._hook('updated'); this._hook('onUpdated');
}, },
beforeUnmount() { beforeUnmount() {
this._hook('beforeUnmount'); this._hook('onBeforeUnmount');
}, },
unmounted() { unmounted() {
this._hook('unmounted'); this._hook('onUnmounted');
}, },
methods: { methods: {
_hook(hookName) { _hook(hookName) {
@ -437,12 +437,12 @@ export default {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
}, },
_getOptionValue(options, key = '', params = {}) { _getOptionValue(options, key = '', params = {}) {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.'); const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift(); const fKey = fKeys.shift();
return fKey return fKey
? ObjectUtils.isObject(options) ? ObjectUtils.isObject(options)
? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params) ? this._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined : undefined
: ObjectUtils.getItemValue(options, params); : ObjectUtils.getItemValue(options, params);
}, },
@ -451,8 +451,8 @@ export default {
const self = this._getOptionValue(obj, key, params); const self = this._getOptionValue(obj, key, params);
const globalPT = searchInDefaultPT ? this._getOptionValue(this.defaultPT, key, params) : undefined; const globalPT = searchInDefaultPT ? this._getOptionValue(this.defaultPT, key, params) : undefined;
const merged = mergeProps(self, globalPT, { const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(this.$.type.name) }), ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key) [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
}); });
return merged; return merged;

View File

@ -1,6 +1,37 @@
import { ObjectDirective } from 'vue'; import { DirectiveBinding, VNode } from 'vue';
export interface DirectiveHooks extends Omit<ObjectDirective, 'getSSRProps' | 'deep'> {} export interface DirectiveInstance<T = any, V = any> {
$name: string | undefined;
$host: T;
$binding: DirectiveBinding<V>;
$el: HTMLElement | undefined;
$css?: {
classes?: undefined;
inlineStyles?: undefined;
loadStyle?: () => void;
};
defaultPT: any;
isUnstyled: boolean;
[key: string]: any;
}
/* All parameters passed by the directive of Vue.js */
export interface DirectiveOptions<T = any, Prev = VNode<any, T> | null, V = any> {
el: T;
binding: DirectiveBinding<V>;
vnode: VNode<any, T>;
prevVNode: Prev;
}
export interface DirectiveHooks<T = any, V = any> {
onCreated?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onBeforeMount?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onMounted?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onBeforeUpdate?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, VNode<any, T>, V>) => void;
onUpdated?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, VNode<any, T>, V>) => void;
onBeforeUnmount?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
onUnmounted?: (instance: DirectiveInstance<T, V> | undefined, options: DirectiveOptions<T, null, V>) => void;
}
export interface BaseDirectivePassThroughOptions { export interface BaseDirectivePassThroughOptions {
hooks?: DirectiveHooks; hooks?: DirectiveHooks;

View File

@ -5,12 +5,12 @@ import { mergeProps } from 'vue';
const BaseDirective = { const BaseDirective = {
_getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])], _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
_getOptionValue: (options, key = '', params = {}) => { _getOptionValue: (options, key = '', params = {}) => {
const fKeys = ObjectUtils.convertToFlatCase(key).split('.'); const fKeys = ObjectUtils.toFlatCase(key).split('.');
const fKey = fKeys.shift(); const fKey = fKeys.shift();
return fKey return fKey
? ObjectUtils.isObject(options) ? ObjectUtils.isObject(options)
? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params) ? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.toFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
: undefined : undefined
: ObjectUtils.getItemValue(options, params); : ObjectUtils.getItemValue(options, params);
}, },
@ -19,19 +19,21 @@ const BaseDirective = {
const self = BaseDirective._getOptionValue(obj, key, params); const self = BaseDirective._getOptionValue(obj, key, params);
const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined; const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined;
const merged = mergeProps(self, globalPT, { const merged = mergeProps(self, globalPT, {
...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(instance.$name) }), ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
[`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key) [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
}); });
return merged; return merged;
}, },
_hook: (directiveName, hookName, el, binding, vnode, prevVnode) => { _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
const config = binding?.instance?.$primevue?.config; const config = binding?.instance?.$primevue?.config;
const selfHook = binding?.value?.pt?.hooks?.[hookName]; const selfHook = binding?.value?.pt?.hooks?.[name];
const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[hookName]; const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[name];
const options = { el, binding, vnode, prevVnode };
selfHook?.(el, binding, vnode, prevVnode); selfHook?.(el?.$instance, options);
globalHook?.(el, binding, vnode, prevVnode); globalHook?.(el?.$instance, options);
}, },
_extend: (name, options = {}) => { _extend: (name, options = {}) => {
const handleHook = (hook, el, binding, vnode, prevVnode) => { const handleHook = (hook, el, binding, vnode, prevVnode) => {

View File

@ -201,11 +201,15 @@ export default {
return null; return null;
}, },
convertToFlatCase(str) { toFlatCase(str) {
// convert snake, kebab, camel and pascal cases to flat case // convert snake, kebab, camel and pascal cases to flat case
return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str; return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
}, },
toCapitalCase(str) {
return this.isNotEmpty(str) ? str[0].toUpperCase() + str.slice(1) : str;
},
isEmpty(value) { isEmpty(value) {
return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0); return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
}, },

View File

@ -74,7 +74,8 @@ export declare class ObjectUtils {
static contains(value: any, list: any[]): boolean; static contains(value: any, list: any[]): boolean;
static insertIntoOrderedArray(item: any, index: number, arr: any[], sourceArr: any[]): void; static insertIntoOrderedArray(item: any, index: number, arr: any[], sourceArr: any[]): void;
static removeAccents(str: any): string; static removeAccents(str: any): string;
static convertToFlatCase(str: string): string; static toFlatCase(str: string): string;
static toCapitalCase(str: string): string;
static isEmpty(value: any): boolean; static isEmpty(value: any): boolean;
static isNotEmpty(value: any): boolean; static isNotEmpty(value: any): boolean;
static isFunction(value: any): boolean; static isFunction(value: any): boolean;