Fix/hover variants

docs/content/2.components/3.layout-group.md

@@ -23,10 +23,14 @@ Controls how the layout group inherits properties from its parent group. It can
 
 ## `Slots`
 
-### `default`: The default slot receives forceRender function:
+`default`: The default slot receives forceRender function:
 
 - forceRender: A function that, when called, forces the slot Motion component to calculate its layout.
 
+::alert{type="warning" icon="lucide:triangle-alert"}
+  When a `Motion` component is wrapped by `LayoutGroup`, its update will trigger layout updates for all `Motion` components under the `LayoutGroup`, so it's better to trigger the `Motion` update instead of calling forceRender
+::
+
 ```vue
 <LayoutGroup>
   <template #default="{ forceRender }">
@@ -38,7 +42,7 @@ Controls how the layout group inherits properties from its parent group. It can
 </LayoutGroup>
 ```
 
-## useLayoutGroup Hook
+## useLayoutGroup
 
 The `useLayoutGroup` hook provides access to the layout group context, allowing components to participate in the layoutGroup and respond to forced layout.
 

packages/motion/src/components/__tests__/gesture.test.tsx

@@ -0,0 +1,28 @@
+/** @jsxRuntime classic */
+/** @jsxImportSource vue */
+import { mount } from '@vue/test-utils'
+import Motion from '../Motion.vue'
+import { describe, expect, it } from 'vitest'
+import { delay } from '@/shared/test'
+
+describe('gesture', () => {
+  it('hover effect triggered by parent', async () => {
+    const wrapper = mount({
+      setup() {
+        return () => (
+          // @ts-ignore
+          <Motion hover="hover" data-testid="motion">
+            {/* @ts-ignore */}
+            <Motion data-testid="motion-child" variants={{ hover: { scale: 1.2 } }} />
+          </Motion>
+        )
+      },
+    })
+    wrapper.find('[data-testid="motion"]').trigger('pointerenter')
+    await delay(300)
+    expect(wrapper.find('[data-testid="motion-child"]').element.getAttribute('style')).toBe('transform: scale(1.2);')
+    wrapper.find('[data-testid="motion"]').trigger('pointerleave')
+    await delay(300)
+    expect(wrapper.find('[data-testid="motion-child"]').element.getAttribute('style')).toBe('transform: none;')
+  })
+})

packages/motion/src/components/animate-presence/AnimatePresence.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Transition, TransitionGroup, onMounted, onUnmounted } from 'vue'
+import { Transition, TransitionGroup, computed, onMounted, onUnmounted } from 'vue'
 import { mountedStates } from '@/state'
 import { doneCallbacks, provideAnimatePresence, removeDoneCallback } from '@/components/presence'
 import type { AnimatePresenceProps } from './types'
@@ -83,15 +83,25 @@ function exit(el: Element, done: VoidFunction) {
   el.addEventListener('motioncomplete', doneCallback)
   state.setActive('exit', true)
 }
+
+const transitionProps = computed(() => {
+  if (props.multiple) {
+    return {
+      tag: props.as,
+    }
+  }
+  return {
+    mode: props.mode === 'wait' ? 'out-in' : undefined,
+  }
+})
 </script>
 
 <template>
-  <!-- 根据multiple属性动态选择Transition或TransitionGroup组件 -->
+  <!-- @vue-ignore -->
   <component
     :is="multiple ? TransitionGroup : Transition"
-    :tag="multiple ? as : undefined"
     :css="false"
-    :mode="mode === 'wait' ? 'out-in' : undefined"
+    v-bind="transitionProps"
     @enter="enter"
     @leave="exit"
   >

packages/motion/src/shared/test.ts

@@ -0,0 +1 @@
+export const delay = (ms: number) => new Promise(r => setTimeout(r, ms))

packages/motion/src/state/motion-state.ts

@@ -201,7 +201,7 @@ export class MotionState {
       return
     this.activeStates[name] = isActive
     this.visualElement.variantChildren?.forEach((child) => {
-      ((child as any).state as MotionState).setActive(name, isActive, false)
+      ((child as any).state as MotionState).setActive(name, isActive, !isActive)
     })
     if (isAnimate) {
       this.animateUpdates()
@@ -288,7 +288,6 @@ export class MotionState {
       getChildAnimations = getAnimations
       childAnimations = animations
     }
-
     // Wait for all animation states to read from the DOM
     // yield
 

packages/motion/tsconfig.json

@@ -20,6 +20,6 @@
     // Set to empty to avoid accidental inclusion of unwanted types
     "types": []
   },
-  "include": ["./src/**/*.vue", "./src/**/*.ts"],
-  "exclude": ["node_modules", "**/__tests__/*"]
+  "include": ["./src/**/*.vue", "./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["node_modules"]
 }

packages/motion/vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
     dts({
       cleanVueFileName: true,
       outDir: 'dist',
-      exclude: ['src/test/**', 'src/**/story/**', 'src/**/*.story.vue'],
+      exclude: ['src/**/__tests__/**', 'src/**/story/**', 'src/**/*.story.vue'],
       afterBuild: async () => {
         // pnpm build:plugins
         execSync('pnpm build:plugins', { stdio: 'inherit', cwd: path.resolve(__dirname, '../plugins') })

tsconfig.json

@@ -5,5 +5,5 @@
     "baseUrl": "."
   },
   "include": ["./packages/**/*"],
-  "exclude": ["node_modules", "**/__tests__/*"]
+  "exclude": ["node_modules"]
 }