refactor(animate): move to script setup (#2947)

src/config.json

@@ -1122,6 +1122,7 @@
           "show": true,
           "taro": true,
           "tarodoc": false,
+          "setup": true,
           "type": "component",
           "author": "lijiamiao"
         },

src/packages/__VUE/animate/__tests__/animate.spec.ts

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
-import Animate from '../index.vue';
+import Animate from '../';
 import { nextTick } from 'vue';
-import { AnimateType } from '../type';
+import { AnimateType } from '../types';
 import { sleep } from '@/packages/utils/unit';
 
 const testType = [

src/packages/__VUE/animate/animate.taro.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="nut-animate">
+    <view
+      :class="classes"
+      :style="{
+        animationDuration: duration ? `${duration}ms` : undefined
+      }"
+      @click="handleClick"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import type { AnimateType, AnimateAction } from './types';
+
+defineOptions({
+  name: 'NutAnimate'
+});
+
+export type AnimateProps = Partial<{
+  type: AnimateType;
+  show: boolean;
+  action: AnimateAction;
+  loop: boolean;
+  duration: string | number;
+}>;
+
+const props = withDefaults(defineProps<AnimateProps>(), {
+  show: false,
+  action: '',
+  loop: false,
+  duration: 500
+});
+
+const emit = defineEmits(['click', 'animate']);
+
+const animated = ref(props.action === 'initial' || props.show === true || props.loop);
+const classes = computed(() => {
+  const prefixCls = 'nut-animate';
+  return {
+    'nut-animate__container': true,
+    [`${prefixCls}-${props.type}`]: animated.value,
+    loop: props.loop
+  };
+});
+
+const animate = () => {
+  animated.value = false;
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      animated.value = true;
+    });
+  });
+};
+
+const handleClick = (event: Event) => {
+  if (props.action === 'click') {
+    animate();
+    emit('click', event);
+    emit('animate');
+  }
+};
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      animate();
+      emit('animate');
+    }
+  }
+);
+</script>

src/packages/__VUE/animate/animate.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="nut-animate">
+    <view
+      :class="classes"
+      :style="{
+        animationDuration: duration ? `${duration}ms` : undefined
+      }"
+      @click="handleClick"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import type { AnimateType, AnimateAction } from './types';
+
+defineOptions({
+  name: 'NutAnimate'
+});
+
+export type AnimateProps = Partial<{
+  type: AnimateType;
+  show: boolean;
+  action: AnimateAction;
+  loop: boolean;
+  duration: string | number;
+}>;
+
+const props = withDefaults(defineProps<AnimateProps>(), {
+  show: false,
+  action: '',
+  loop: false,
+  duration: 500
+});
+
+const emit = defineEmits(['click', 'animate']);
+
+const animated = ref(props.action === 'initial' || props.show === true || props.loop);
+const classes = computed(() => {
+  const prefixCls = 'nut-animate';
+  return {
+    'nut-animate__container': true,
+    [`${prefixCls}-${props.type}`]: animated.value,
+    loop: props.loop
+  };
+});
+
+const animate = () => {
+  animated.value = false;
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      animated.value = true;
+    });
+  });
+};
+
+const handleClick = (event: Event) => {
+  if (props.action === 'click') {
+    animate();
+    emit('click', event);
+    emit('animate');
+  }
+};
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      animate();
+      emit('animate');
+    }
+  }
+);
+</script>

src/packages/__VUE/animate/doc.en-US.md

@@ -60,3 +60,16 @@ app.use(Animate);
 | 9 | jump | jump，It is recommended that loop be true |
 | 10 | twinkle | twinkle，It is recommended that loop be true |
 | 11 | flicker | Polish button，It is recommended that loop be true |
+
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  AnimateType,
+  AnimateAction,
+  AnimateProps,
+  AnimateInstance
+} from '@nutui/nutui';
+```

src/packages/__VUE/animate/doc.md

@@ -60,3 +60,16 @@ app.use(Animate);
 | 9 | jump | 跳跃，建议 loop 为 true |
 | 10 | twinkle | 水波，建议 loop 为 true |
 | 11 | flicker | 擦亮按钮，建议 loop 为 true |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  AnimateType,
+  AnimateAction,
+  AnimateProps,
+  AnimateInstance
+} from '@nutui/nutui';
+```

src/packages/__VUE/animate/doc.taro.md

@@ -60,3 +60,16 @@ app.use(Animate);
 | 9 | jump | 跳跃，建议 loop 为 true |
 | 10 | twinkle | 水波，建议 loop 为 true |
 | 11 | flicker | 擦亮按钮，建议 loop 为 true |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  AnimateType,
+  AnimateAction,
+  AnimateProps,
+  AnimateInstance
+} from '@nutui/nutui-taro';
+```

src/packages/__VUE/animate/index.taro.ts

@@ -0,0 +1,13 @@
+import Animate from './animate.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Animate);
+
+export type { AnimateProps } from './animate.taro.vue';
+
+export type { AnimateType, AnimateAction } from './types';
+
+export type AnimateInstance = ComponentPublicInstance & InstanceType<typeof Animate>;
+
+export { Animate, Animate as default };

src/packages/__VUE/animate/index.ts

@@ -0,0 +1,13 @@
+import Animate from './animate.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Animate);
+
+export type { AnimateProps } from './animate.vue';
+
+export type { AnimateType, AnimateAction } from './types';
+
+export type AnimateInstance = ComponentPublicInstance & InstanceType<typeof Animate>;
+
+export { Animate, Animate as default };