feat: add disabled prop for <spring> element

Author: ktsn

README.ja.md

@@ -123,6 +123,7 @@ requestAnimationFrame(() => {
 - `spring-style`: アニメーションさせるスタイルオブジェクト
 - `bounce`
 - `duration`
+- `disabled`
 
 ```vue
 <script setup>

README.md

@@ -123,6 +123,7 @@ It renders a native HTML element as same tag name as the property name (e.g. `<s
 - `spring-style`: Style object to be animated
 - `bounce`
 - `duration`
+- `disabled`
 
 ```vue
 <script setup>

src/vue/spring-element.ts

@@ -11,6 +11,7 @@ const createSpringElement = (tagName: string) => {
       },
       bounce: Number,
       duration: Number,
+      disabled: Boolean,
     },
 
     setup(props, { slots }) {
@@ -20,6 +21,7 @@ const createSpringElement = (tagName: string) => {
           return {
             bounce: props.bounce,
             duration: props.duration,
+            disabled: props.disabled,
           }
         },
       )

test/vue/spring-element.test.ts

@@ -87,7 +87,39 @@ describe('Spring Element', () => {
     expect(mockController.setOptions).toHaveBeenCalledWith({
       bounce: 0.2,
       duration: 800,
+      disabled: false,
     })
     expect(mockController.setStyle).toHaveBeenCalledWith({ opacity: 0 })
   })
+
+  test('disable animation when disabled prop is true', async () => {
+    const root = document.createElement('div')
+    const app = createApp({
+      template: `
+        <springp :spring-style="springStyle" disabled>
+          Hello
+        </springp>
+      `,
+
+      components: {
+        springp: spring.p!,
+      },
+
+      setup() {
+        const springStyle = ref({ opacity: 1 })
+        return {
+          springStyle,
+        }
+      },
+    })
+    const vm: any = app.mount(root)
+    expect(vm.$el.style.opacity).toBe('1')
+
+    vm.springStyle.opacity = 0
+    await nextTick()
+    expect(mockController.setStyle).toHaveBeenCalledWith(
+      { opacity: 0 },
+      { animate: false },
+    )
+  })
 })