From b80f3fb7da4b55c8dfa337ab6a934ea8f5a23d35 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Wed, 6 Mar 2024 15:23:43 +0800
Subject: [PATCH] refactor(animate): move to script setup (#2947)

---
 src/config.json                               |  1 +
 .../__VUE/animate/__tests__/animate.spec.ts   |  4 +-
 src/packages/__VUE/animate/animate.taro.vue   | 75 +++++++++++++++++
 src/packages/__VUE/animate/animate.vue        | 75 +++++++++++++++++
 src/packages/__VUE/animate/doc.en-US.md       | 13 +++
 src/packages/__VUE/animate/doc.md             | 13 +++
 src/packages/__VUE/animate/doc.taro.md        | 13 +++
 src/packages/__VUE/animate/index.taro.ts      | 13 +++
 src/packages/__VUE/animate/index.taro.vue     | 84 -------------------
 src/packages/__VUE/animate/index.ts           | 13 +++
 src/packages/__VUE/animate/index.vue          | 84 -------------------
 .../__VUE/animate/{type.ts => types.ts}       |  0
 12 files changed, 218 insertions(+), 170 deletions(-)
 create mode 100644 src/packages/__VUE/animate/animate.taro.vue
 create mode 100644 src/packages/__VUE/animate/animate.vue
 create mode 100644 src/packages/__VUE/animate/index.taro.ts
 delete mode 100644 src/packages/__VUE/animate/index.taro.vue
 create mode 100644 src/packages/__VUE/animate/index.ts
 delete mode 100644 src/packages/__VUE/animate/index.vue
 rename src/packages/__VUE/animate/{type.ts => types.ts} (100%)

diff --git a/src/config.json b/src/config.json
index 2a1f545bd9..afff0d61a1 100644
--- a/src/config.json
+++ b/src/config.json
@@ -1122,6 +1122,7 @@
           "show": true,
           "taro": true,
           "tarodoc": false,
+          "setup": true,
           "type": "component",
           "author": "lijiamiao"
         },
diff --git a/src/packages/__VUE/animate/__tests__/animate.spec.ts b/src/packages/__VUE/animate/__tests__/animate.spec.ts
index 2ece6789ff..530f9c696c 100644
--- a/src/packages/__VUE/animate/__tests__/animate.spec.ts
+++ b/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 = [
diff --git a/src/packages/__VUE/animate/animate.taro.vue b/src/packages/__VUE/animate/animate.taro.vue
new file mode 100644
index 0000000000..1890dcac5e
--- /dev/null
+++ b/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>
diff --git a/src/packages/__VUE/animate/animate.vue b/src/packages/__VUE/animate/animate.vue
new file mode 100644
index 0000000000..1890dcac5e
--- /dev/null
+++ b/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>
diff --git a/src/packages/__VUE/animate/doc.en-US.md b/src/packages/__VUE/animate/doc.en-US.md
index 08f1989ce1..66fd1b24b5 100644
--- a/src/packages/__VUE/animate/doc.en-US.md
+++ b/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';
+```
diff --git a/src/packages/__VUE/animate/doc.md b/src/packages/__VUE/animate/doc.md
index 834eb8a86d..dfa9bc83c3 100644
--- a/src/packages/__VUE/animate/doc.md
+++ b/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';
+```
diff --git a/src/packages/__VUE/animate/doc.taro.md b/src/packages/__VUE/animate/doc.taro.md
index cbf8729bd3..e18f09894c 100644
--- a/src/packages/__VUE/animate/doc.taro.md
+++ b/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';
+```
diff --git a/src/packages/__VUE/animate/index.taro.ts b/src/packages/__VUE/animate/index.taro.ts
new file mode 100644
index 0000000000..99caf7a37f
--- /dev/null
+++ b/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 };
diff --git a/src/packages/__VUE/animate/index.taro.vue b/src/packages/__VUE/animate/index.taro.vue
deleted file mode 100644
index 3d15cebbd3..0000000000
--- a/src/packages/__VUE/animate/index.taro.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <view class="nut-animate">
-    <view
-      :class="classes"
-      :style="{
-        animationDuration: duration ? `${duration}ms` : undefined
-      }"
-      @click="handleClick"
-    >
-      <slot></slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { ref, computed, PropType, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { AnimateType, AnimateAction } from './type';
-const { create } = createComponent('animate');
-export default create({
-  props: {
-    type: {
-      type: String as PropType<AnimateType>,
-      default: ''
-    },
-    show: {
-      type: Boolean,
-      defualt: false
-    },
-    action: {
-      type: String as PropType<AnimateAction>,
-      default: ''
-    },
-    loop: {
-      type: Boolean,
-      default: false
-    },
-    duration: {
-      type: [String, Number],
-      defualt: 500
-    }
-  },
-  emits: ['click', 'animate'],
-  setup(props, { emit }) {
-    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');
-        }
-      }
-    );
-
-    return { classes, handleClick };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/animate/index.ts b/src/packages/__VUE/animate/index.ts
new file mode 100644
index 0000000000..148082e936
--- /dev/null
+++ b/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 };
diff --git a/src/packages/__VUE/animate/index.vue b/src/packages/__VUE/animate/index.vue
deleted file mode 100644
index 3d15cebbd3..0000000000
--- a/src/packages/__VUE/animate/index.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <view class="nut-animate">
-    <view
-      :class="classes"
-      :style="{
-        animationDuration: duration ? `${duration}ms` : undefined
-      }"
-      @click="handleClick"
-    >
-      <slot></slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { ref, computed, PropType, watch } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { AnimateType, AnimateAction } from './type';
-const { create } = createComponent('animate');
-export default create({
-  props: {
-    type: {
-      type: String as PropType<AnimateType>,
-      default: ''
-    },
-    show: {
-      type: Boolean,
-      defualt: false
-    },
-    action: {
-      type: String as PropType<AnimateAction>,
-      default: ''
-    },
-    loop: {
-      type: Boolean,
-      default: false
-    },
-    duration: {
-      type: [String, Number],
-      defualt: 500
-    }
-  },
-  emits: ['click', 'animate'],
-  setup(props, { emit }) {
-    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');
-        }
-      }
-    );
-
-    return { classes, handleClick };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/animate/type.ts b/src/packages/__VUE/animate/types.ts
similarity index 100%
rename from src/packages/__VUE/animate/type.ts
rename to src/packages/__VUE/animate/types.ts