feat: [components] transition, remove mergeProps & toHandlers

mergeProps: 如用户绑定`onEnter`, 合并为`[attrs.onEnter, handlerEnter]`, 这样会存在问题, 我们的目的是仅使用`handlerEnter`, `handlerEnter`内部触发`attrs.onEnter`

toHandlers: `enter-before` -> `onEnter-before` 在合并时，这看起来不符合预期

packages/components/transition/__tests__/index.spec.tsx

@@ -1,15 +1,21 @@
 // @vitest-environment jsdom
 
-import { Transition } from '@deot/vc-components';
-import { mount } from '@vue/test-utils';
+import { 
+	Transition,
+	TransitionCollapse,
+	TransitionFade,
+	TransitionScale,
+	TransitionSlide,
+	TransitionZoom 
+} from '@deot/vc-components';
 
 describe('index.ts', () => {
 	it('basic', () => {
 		expect(typeof Transition).toBe('object');
-	});
-	it('create', async () => {
-		const wrapper = mount(() => (<Transition />));
-
-		expect(wrapper.classes()).toContain('vc-transition');
+		expect(typeof TransitionCollapse).toBe('object');
+		expect(typeof TransitionFade).toBe('object');
+		expect(typeof TransitionScale).toBe('object');
+		expect(typeof TransitionSlide).toBe('object');
+		expect(typeof TransitionZoom).toBe('object');
 	});
 });

packages/components/transition/__tests__/transition-collapse.spec.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+
+import { ref, withDirectives, vShow, createApp } from 'vue';
+import { TransitionCollapse } from '@deot/vc-components';
+import { Utils } from '@deot/dev-test';
+
+describe('transition.ts', () => {
+	const root = document.createElement('div');
+	document.body.appendChild(root);
+
+	it('create', async () => {
+		const isVisible = ref(false);
+		const isGroup = ref(false);
+		const mode = ref('none');
+		const methods = {
+			onEnter: vi.fn(),
+			onBeforeEnter: vi.fn(),
+			onAfterEnter: vi.fn(),
+			onBeforeLeave: vi.fn(),
+			onLeave: vi.fn(),
+			onAfterLeave: vi.fn()
+		};
+		const app = createApp(
+			() => (
+				<TransitionCollapse 
+					origin="0"
+					mode={mode.value}
+					group={isGroup.value}
+					duration={10} 
+					{
+						...methods
+					}
+				>
+					{ withDirectives(<div key="1" />, [[vShow, isVisible.value]])}
+				</TransitionCollapse>
+			)
+		);
+
+
+		app.mount(root);
+
+		isVisible.value = true;
+		await Utils.sleep(10);
+		let el = root.querySelector('div')!;
+		expect(el.classList.contains('v-enter-from')).toBeTruthy();
+		await Utils.sleep(100);
+		expect(el.classList.contains('v-enter-to')).toBeTruthy();
+
+		isGroup.value = true;
+		await Utils.sleep(30);
+		expect(root.innerHTML).toBe(`<div></div>`);
+
+		isVisible.value = false;
+		await Utils.sleep(30);
+		expect(methods.onBeforeEnter).toHaveBeenCalledTimes(1);
+		expect(methods.onAfterEnter).toHaveBeenCalledTimes(1);
+		expect(methods.onBeforeLeave).toHaveBeenCalledTimes(1);
+		expect(methods.onAfterLeave).toHaveBeenCalledTimes(1);
+		expect(methods.onEnter).toHaveBeenCalledTimes(1);
+		expect(methods.onLeave).toHaveBeenCalledTimes(1);
+
+		mode.value = 'left-part';
+		await Utils.sleep(30);
+	});
+});

packages/components/transition/__tests__/transition-fade.spec.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+
+import { ref, withDirectives, vShow } from 'vue';
+import { TransitionFade } from '@deot/vc-components';
+import { mount } from '@vue/test-utils';
+import { Utils } from '@deot/dev-test';
+
+describe('transition-fade.ts', () => {
+	it('create', async () => {
+		const isVisible = ref(false);
+		const isGroup = ref(false);
+		const mode = ref('none');
+
+		const wrapper = mount(
+			() => (
+				<TransitionFade 
+					origin="0"
+					mode={mode.value}
+					group={isGroup.value}
+					duration={10} 
+				>
+					{ withDirectives(<div key="1" />, [[vShow, isVisible.value]])}
+				</TransitionFade>
+			)
+		);
+		let vm = wrapper.getComponent({ name: 'transition' });
+		expect(vm.props('enterActiveClass')).toBe('vc-transition-fade is-in');
+		expect(vm.props('leaveActiveClass')).toBe('vc-transition-fade is-out');
+
+		isGroup.value = true;
+		await Utils.sleep(1);
+		vm = wrapper.getComponent({ name: 'transition-group' });
+		expect(vm.props('moveClass')).toBe('vc-transition-fade is-move');
+	});
+});

packages/components/transition/__tests__/transition-scale.spec.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+
+import { ref, withDirectives, vShow } from 'vue';
+import { TransitionScale } from '@deot/vc-components';
+import { mount } from '@vue/test-utils';
+import { Utils } from '@deot/dev-test';
+
+describe('transition-scale.ts', () => {
+	it('create', async () => {
+		const isVisible = ref(false);
+		const isGroup = ref(false);
+		const mode = ref('none');
+
+		const wrapper = mount(
+			() => (
+				<TransitionScale 
+					origin="0"
+					mode={mode.value}
+					group={isGroup.value}
+					duration={10} 
+				>
+					{ withDirectives(<div key="1" />, [[vShow, isVisible.value]])}
+				</TransitionScale>
+			)
+		);
+		let vm = wrapper.getComponent({ name: 'transition' });
+		expect(vm.props('enterActiveClass')).toBe('vc-transition-scale is-in');
+		expect(vm.props('leaveActiveClass')).toBe('vc-transition-scale is-out');
+
+		isGroup.value = true;
+		await Utils.sleep(1);
+		vm = wrapper.getComponent({ name: 'transition-group' });
+		expect(vm.props('moveClass')).toBe('vc-transition-scale is-move');
+	});
+});

packages/components/transition/__tests__/transition-slide.spec.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+
+import { ref, withDirectives, vShow } from 'vue';
+import { TransitionSlide } from '@deot/vc-components';
+import { mount } from '@vue/test-utils';
+import { Utils } from '@deot/dev-test';
+
+describe('transition-slide.ts', () => {
+	it('create', async () => {
+		const isVisible = ref(false);
+		const isGroup = ref(false);
+		const mode = ref('none');
+
+		const wrapper = mount(
+			() => (
+				<TransitionSlide 
+					origin="0"
+					mode={mode.value}
+					group={isGroup.value}
+					duration={10} 
+				>
+					{ withDirectives(<div key="1" />, [[vShow, isVisible.value]])}
+				</TransitionSlide>
+			)
+		);
+		let vm = wrapper.getComponent({ name: 'transition' });
+		expect(vm.props('enterActiveClass')).toBe('vc-transition-slide is-in');
+		expect(vm.props('leaveActiveClass')).toBe('vc-transition-slide is-out');
+
+		isGroup.value = true;
+		await Utils.sleep(1);
+		vm = wrapper.getComponent({ name: 'transition-group' });
+		expect(vm.props('moveClass')).toBe('vc-transition-slide is-move');
+	});
+});

packages/components/transition/__tests__/transition-zoom.spec.tsx

@@ -0,0 +1,35 @@
+// @vitest-environment jsdom
+
+import { ref, withDirectives, vShow } from 'vue';
+import { TransitionZoom } from '@deot/vc-components';
+import { mount } from '@vue/test-utils';
+import { Utils } from '@deot/dev-test';
+
+describe('transition-zoom.ts', () => {
+	it('create', async () => {
+		const isVisible = ref(false);
+		const isGroup = ref(false);
+		const mode = ref('none');
+
+		const wrapper = mount(
+			() => (
+				<TransitionZoom 
+					origin="0"
+					mode={mode.value}
+					group={isGroup.value}
+					duration={10} 
+				>
+					{ withDirectives(<div key="1" />, [[vShow, isVisible.value]])}
+				</TransitionZoom>
+			)
+		);
+		let vm = wrapper.getComponent({ name: 'transition' });
+		expect(vm.props('enterActiveClass')).toBe('vc-transition-zoom is-in');
+		expect(vm.props('leaveActiveClass')).toBe('vc-transition-zoom is-out');
+
+		isGroup.value = true;
+		await Utils.sleep(1);
+		vm = wrapper.getComponent({ name: 'transition-group' });
+		expect(vm.props('moveClass')).toBe('vc-transition-zoom is-move');
+	});
+});

packages/components/transition/__tests__/transition.spec.tsx

@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+
+import { ref, withDirectives, vShow, createApp } from 'vue';
+import { Transition as VTransition } from '@deot/vc-components';
+// import { mount } from '@vue/test-utils';
+import { Utils } from '@deot/dev-test';
+
+describe('transition.ts', () => {
+	const root = document.createElement('div');
+	document.body.appendChild(root);
+
+	it('create', async () => {
+		const isVisible = ref(false);
+		const isGroup = ref(false);
+		const mode = ref('none');
+		const methods = {
+			onEnter: vi.fn(),
+			onBeforeEnter: vi.fn(),
+			onAfterEnter: vi.fn(),
+			onBeforeLeave: vi.fn(),
+			onLeave: vi.fn(),
+			onAfterLeave: vi.fn()
+		};
+		const app = createApp(
+			() => (
+				<VTransition 
+					origin="0"
+					mode={mode.value}
+					group={isGroup.value}
+					duration={10} 
+					{
+						...methods
+					}
+				>
+					{ withDirectives(<div key="1" />, [[vShow, isVisible.value]])}
+				</VTransition>
+			)
+		);
+
+
+		app.mount(root);
+
+		isVisible.value = true;
+		await Utils.sleep(10);
+		let el = root.querySelector('div')!;
+		expect(el.classList.contains('v-enter-from')).toBeTruthy();
+		await Utils.sleep(30);
+		expect(el.classList.contains('v-enter-to')).toBeTruthy();
+
+		isGroup.value = true;
+		await Utils.sleep(30);
+		expect(root.innerHTML).toBe(`<div></div>`);
+
+		isVisible.value = false;
+		await Utils.sleep(30);
+		expect(methods.onBeforeEnter).toHaveBeenCalledTimes(1);
+		expect(methods.onAfterEnter).toHaveBeenCalledTimes(1);
+		expect(methods.onBeforeLeave).toHaveBeenCalledTimes(1);
+		expect(methods.onAfterLeave).toHaveBeenCalledTimes(1);
+		expect(methods.onEnter).toHaveBeenCalledTimes(1);
+		expect(methods.onLeave).toHaveBeenCalledTimes(1);
+
+		mode.value = 'left-part';
+		await Utils.sleep(30);
+	});
+});

packages/components/transition/examples/index.vue

@@ -92,6 +92,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { 
+	Transition as VTransition,
 	TransitionFade,
 	TransitionScale,
 	TransitionSlide,
@@ -103,13 +104,14 @@ let count = 0;
 
 const isVisible = ref(true);
 const isGroup = ref(false);
-const transitionName = ref('collapse');
+const transitionName = ref('fade');
 const transitionOptions = ref([
 	'fade',
 	'scale',
 	'slide',
 	'zoom',
-	'collapse'
+	'collapse',
+	'custom'
 ]);
 const slideModeName = ref('left-part');
 const slideModeOptions = ref(['left-part', 'right-part', 'down-part', 'up-part', 'left', 'right', 'down', 'up']);
@@ -135,7 +137,6 @@ const mode = computed(() => {
 });
 
 const wrapper = computed(() => {
-
 	switch (transitionName.value) {
 		case 'scale':
 			return TransitionScale;
@@ -147,6 +148,8 @@ const wrapper = computed(() => {
 			return TransitionCollapse;
 		case 'fade':
 			return TransitionFade;
+		case 'custom':
+			return VTransition
 		default:
 			return '';
 	}

packages/components/transition/examples/transition.vue

@@ -0,0 +1,26 @@
+<template>
+	<div style="padding: 100px">
+		<h3 @click="handleClick">
+			点击触发: {{ isVisible }}
+		</h3>
+		<VTransition @before-enter="handleBeforeEnter">
+			<div v-show="isVisible">
+				Transition
+			</div>
+		</VTransition>
+	</div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Transition as VTransition } from '..';
+
+const isVisible = ref(true);
+
+const handleBeforeEnter = (el) => {
+	console.log('before-enter', el);
+};
+const handleClick = () => {
+	isVisible.value = !isVisible.value;
+};
+
+</script>