Merge pull request #111 from motiondivision/fix/tabindex

Fix/tabindex

Author: rick-hup

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-motion",
-  "version": "0.11.3",
+  "version": "0.12.0-beta.2",
   "private": true,
   "packageManager": "pnpm@9.15.0+sha1.8bfdb6d72b4d5fdf87d21d27f2bfbe2b21dd2629",
   "description": "",

packages/motion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.11.3",
+  "version": "0.12.0-beta.2",
   "description": "",
   "author": "",
   "license": "MIT",

packages/motion/src/features/gestures/press/__tests__/press.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render } from '@testing-library/vue'
+import { Motion } from '@/components'
+import { nextTick } from 'vue'
+
+// Mock framer-motion press
+vi.mock('framer-motion/dom', async () => {
+  const actual = await vi.importActual('framer-motion/dom')
+  return {
+    ...actual,
+    press: vi.fn((element) => {
+      // 模拟 press 的行为
+      element.setAttribute('tabindex', '0')
+      return (actual.press as any)(element)
+    }),
+  }
+})
+describe('press gesture', () => {
+  it('adds tabindex=0 when whilePress is set', async () => {
+    const wrapper = render(Motion, {
+      props: {
+        whilePress: { scale: 0.9 },
+      },
+      attrs: {
+        'data-testid': 'motion',
+      },
+    })
+    await nextTick()
+    const motion = wrapper.getByTestId('motion')
+    expect(motion.tabIndex).toBe(0)
+  })
+
+  it('does not add tabindex when whilePress is not set', () => {
+    const wrapper = render(Motion, {
+      props: {},
+      attrs: {
+        'data-testid': 'motion',
+      },
+    })
+
+    expect(wrapper.getByTestId('motion').tabIndex).toBe(-1)
+  })
+})

packages/motion/src/features/gestures/press/index.ts

@@ -2,6 +2,7 @@ import type { MotionState } from '@/state/motion-state'
 import { Feature } from '@/features'
 import { frame, press } from 'framer-motion/dom'
 import type { EventInfo } from 'framer-motion'
+import type { Options } from '@/types'
 
 export function extractEventInfo(event: PointerEvent): EventInfo {
   return {
@@ -35,30 +36,46 @@ function handlePressEvent(
 
 export class PressGesture extends Feature {
   isActive() {
-    return Boolean(this.state.options.press)
+    return Boolean(this.state.options.whilePress)
   }
 
   constructor(state: MotionState) {
     super(state)
   }
 
   mount() {
-    const element = this.state.element
-    if (!element)
-      return
-    this.unmount = press(
-      element,
-      (el, startEvent) => {
-        handlePressEvent(this.state, startEvent, 'Start')
+    this.register()
+  }
+
+  update() {
+    const preProps = this.state.visualElement.prevProps as unknown as Options
+    // Re-register if whilePress changes
+    if (preProps.whilePress !== this.state.options.whilePress) {
+      this.register()
+    }
+  }
+
+  register() {
+    // Unmount previous press handler
+    this.unmount()
+    if (this.isActive()) {
+      const element = this.state.element
+      if (!element)
+        return
+      this.unmount = press(
+        element,
+        (el, startEvent) => {
+          handlePressEvent(this.state, startEvent, 'Start')
 
-        return (endEvent, { success }) =>
-          handlePressEvent(
-            this.state,
-            endEvent,
-            success ? 'End' : 'Cancel',
-          )
-      },
-      { useGlobalTarget: this.state.options.globalPressTarget },
-    )
+          return (endEvent, { success }) =>
+            handlePressEvent(
+              this.state,
+              endEvent,
+              success ? 'End' : 'Cancel',
+            )
+        },
+        { useGlobalTarget: this.state.options.globalPressTarget },
+      )
+    }
   }
 }

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

@@ -48,7 +48,7 @@ export function animateUpdates(
   else
     animationOptions = resolveStateAnimation.call(this, controlActiveState)
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay)
-  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback)
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, animationOptions, this.activeStates, isFallback)
 
   return executeAnimations.call(this, {
     factories,
@@ -134,12 +134,13 @@ function createAnimationFactories(
       return
     this.baseTarget[key] ??= style.get(this.element, key) as string
     const keyValue = (this.target[key] === 'none' && isDef(transformResetValue[key])) ? transformResetValue[key] : this.target[key]
+    // console.log(key, keyValue, (animationOptions?.[key]?.delay || animationOptions?.delay || 0) + controlDelay, controlDelay)
     factories.push(() => animate(
       this.element,
       { [key]: keyValue },
       {
         ...animationOptions,
-        delay: (animationOptions[key]?.delay || animationOptions?.delay || 0) + controlDelay,
+        delay: (animationOptions?.[key]?.delay || animationOptions?.delay || 0) + controlDelay,
       } as any,
     ))
   })

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

@@ -168,10 +168,10 @@ export class MotionState {
     // Mount features in parent-to-child order
     this.featureManager.mount()
     if (!notAnimate && this.options.animate) {
-      /**
-       * Immediately animate updates on mount to avoid transform-origin issues with SVG elements
-       */
-      this.animateUpdates()
+      if (this.visualElement.type === 'svg') {
+        (this.visualElement as any).updateDimensions()
+      }
+      this.startAnimation()
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId)
@@ -267,7 +267,7 @@ export class MotionState {
     if (isAnimate) {
       this.animateUpdates({
         isFallback: !isActive && name !== 'exit' && this.visualElement.isControllingVariants,
-        isExit: this.activeStates.exit,
+        isExit: name === 'exit' && this.activeStates.exit,
       })
     }
   }

packages/motion/vitest.config.ts

@@ -6,7 +6,7 @@ import path from 'node:path'
 export default defineConfig({
   plugins: [vue(), vueJsx()],
   test: {
-    environment: 'happy-dom',
+    environment: 'jsdom',
     globals: true,
     coverage: {
       provider: 'v8',

packages/plugins/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugins",
-  "version": "0.11.3",
+  "version": "0.12.0-beta.2",
   "private": true,
   "description": "",
   "author": "",