Refactor #4103 - Update lifecycle names in Base* files
parent
2572561902
commit
63b5b8be8e
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) => {
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue