feat(components/config): add transitionRegistry and `componentTrans…

…itions` global context config; add `useTransition` hook and `registerTransition` util

.changeset/curvy-brooms-kiss.md

@@ -0,0 +1,14 @@
+---
+'@lun-web/components': patch
+'@lun-web/core': patch
+'@lun-web/plugins': patch
+'@lun-web/react': patch
+'@lun-web/theme': patch
+'@lun-web/utils': patch
+---
+
+## Features
+
+- `config`: add `transitionRegistry` and `componentTransitions` global context config; add `useTransition` hook and `registerTransition` util
+- `dialog`: add custom renderer for header, remove `title` prop
+- `switch`: add `beforeUpdate` to asynchronously determine whether to update checked status

packages/components/src/common/transitionProps.ts

@@ -39,7 +39,9 @@ export function getTransitionProps<N extends string>(
 ) {
   const key = `${name}Transition` as const,
     val = props[key];
-  return addHandlersIfHeight(isString(val) ? { name: (val as string) ?? defaultName } : { name: defaultName, ...val });
+  return addHandlersIfHeight(
+    isString(val) ? { name: (val as string | undefined) || defaultName } : { name: defaultName, ...val },
+  );
 }
 
 export function createTransitionProps<S extends string[]>(...names: S) {

packages/components/src/components/config/config.context.ts

@@ -1,4 +1,4 @@
-import { ComponentInternalInstance, inject, provide, reactive } from 'vue';
+import { ComponentInternalInstance, CSSProperties, inject, provide, reactive, TransitionProps } from 'vue';
 import { iconRegistry } from '../icon/icon.registry';
 import { OpenShadowComponentKey } from './config.static';
 import { ThemeConfig } from 'common';
@@ -11,6 +11,20 @@ export type DynamicStyleValue =
   | ((vm: ComponentInternalInstance, compName: OpenShadowComponentKey, context: any) => string | undefined)
   | string;
 
+export type ComponentTransition = TransitionProps & { moveClass?: string } & Record<
+    | 'enterFromStyle'
+    | 'enterActiveStyle'
+    | 'enterToStyle'
+    | 'appearFromStyle'
+    | 'appearActiveStyle'
+    | 'appearToStyle'
+    | 'leaveFromStyle'
+    | 'leaveActiveStyle'
+    | 'leaveToStyle'
+    | 'moveStyle',
+    CSSProperties
+  >;
+
 export const GlobalContextConfig = reactive({
   lang: inBrowser && navigator.language.startsWith('zh') ? 'zh-CN' : 'en',
   iconRegistry,
@@ -27,6 +41,8 @@ export const GlobalContextConfig = reactive({
     },
     scale: 1,
   } as ThemeConfig,
+  transitionRegistry: {} as Record<string, ComponentTransition>,
+  componentTransitions: reduceFromComps(() => ({} as Record<string, string>), false, false),
   zIndex: {
     teleport: 1000,
     dialog: 1000,

packages/components/src/hooks/index.ts

@@ -1,6 +1,7 @@
 import { getCurrentInstance } from 'vue';
 
 export * from './shadowDom';
+export * from './transition';
 export * from './useBreakpoint';
 export * from './useCollectorValue';
 export * from './useNameSpace';

packages/components/src/hooks/transition.ts

@@ -0,0 +1,29 @@
+import { ComponentTransition, GlobalContextConfig, OpenShadowComponentKey, useContextConfig } from 'config';
+import { isObject, isString } from '@lun-web/utils';
+import { computed } from 'vue';
+
+type ExtractTransitionProps<
+  T extends Record<string, unknown>,
+  K extends keyof T = keyof T,
+> = K extends `${infer P}Transition` ? P : never;
+
+export function useTransition<
+  P extends Record<string, any>,
+  T extends ExtractTransitionProps<P> = ExtractTransitionProps<P>,
+>(props: P, compName: OpenShadowComponentKey, transitionProp: T, defaultTransition?: string) {
+  const config = useContextConfig();
+  return computed(() => {
+    const val = props[transitionProp];
+    const registry = config.transitionRegistry,
+      transitionOfConfig = config.componentTransitions[compName][transitionProp];
+    if (isString(val) && registry[val]) return registry[val];
+    else if (isObject(val)) return val;
+    else if (registry[transitionOfConfig]) return registry[transitionOfConfig];
+    else if (defaultTransition && registry[defaultTransition]) return registry[defaultTransition];
+  });
+}
+
+export function registerTransition(name: string, transition: ComponentTransition, override = false) {
+  if (!GlobalContextConfig.transitionRegistry[name] || override)
+    GlobalContextConfig.transitionRegistry[name] = transition;
+}