From 2c31ebe2e1e5d6c1de46b53776161bc3b59c2e69 Mon Sep 17 00:00:00 2001
From: mrayi <1078464063@qq.com>
Date: Wed, 17 Apr 2024 10:06:58 +0800
Subject: [PATCH] refactor(steps): move to script setup (#3022)

---
 src/config.json                               |  2 +
 src/packages/__VUE/step/index.taro.ts         | 11 +++
 src/packages/__VUE/step/index.taro.vue        | 89 -------------------
 src/packages/__VUE/step/index.ts              | 11 +++
 src/packages/__VUE/step/index.vue             | 89 -------------------
 src/packages/__VUE/step/step.taro.vue         | 70 +++++++++++++++
 src/packages/__VUE/step/step.vue              | 70 +++++++++++++++
 .../__VUE/steps/__tests__/index.spec.tsx      |  3 +
 src/packages/__VUE/steps/doc.en-US.md         | 14 +++
 src/packages/__VUE/steps/doc.md               | 14 +++
 src/packages/__VUE/steps/doc.taro.md          | 14 +++
 src/packages/__VUE/steps/index.taro.ts        | 13 +++
 src/packages/__VUE/steps/index.taro.vue       | 63 -------------
 src/packages/__VUE/steps/index.ts             | 13 +++
 src/packages/__VUE/steps/index.vue            | 63 -------------
 src/packages/__VUE/steps/steps.taro.vue       | 45 ++++++++++
 src/packages/__VUE/steps/steps.vue            | 45 ++++++++++
 src/packages/utils/useRelation/useParent.ts   |  2 +-
 18 files changed, 326 insertions(+), 305 deletions(-)
 create mode 100644 src/packages/__VUE/step/index.taro.ts
 delete mode 100644 src/packages/__VUE/step/index.taro.vue
 create mode 100644 src/packages/__VUE/step/index.ts
 delete mode 100644 src/packages/__VUE/step/index.vue
 create mode 100644 src/packages/__VUE/step/step.taro.vue
 create mode 100644 src/packages/__VUE/step/step.vue
 create mode 100644 src/packages/__VUE/steps/index.taro.ts
 delete mode 100644 src/packages/__VUE/steps/index.taro.vue
 create mode 100644 src/packages/__VUE/steps/index.ts
 delete mode 100644 src/packages/__VUE/steps/index.vue
 create mode 100644 src/packages/__VUE/steps/steps.taro.vue
 create mode 100644 src/packages/__VUE/steps/steps.vue

diff --git a/src/config.json b/src/config.json
index 2fe8e48770..3170008920 100644
--- a/src/config.json
+++ b/src/config.json
@@ -651,6 +651,7 @@
           "version": "3.0.0",
           "name": "Steps",
           "cName": "步骤条",
+          "setup": true,
           "desc": "步骤条",
           "author": "ailululu"
         },
@@ -658,6 +659,7 @@
           "version": "3.0.0",
           "name": "Step",
           "cName": "步骤条子组件",
+          "setup": true,
           "show": false,
           "desc": "步骤条子组件",
           "author": "ailululu"
diff --git a/src/packages/__VUE/step/index.taro.ts b/src/packages/__VUE/step/index.taro.ts
new file mode 100644
index 0000000000..676c1027bb
--- /dev/null
+++ b/src/packages/__VUE/step/index.taro.ts
@@ -0,0 +1,11 @@
+import Step from './step.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Step)
+
+export type { StepProps } from './step.taro.vue'
+
+export type StepInstance = ComponentPublicInstance & InstanceType<typeof Step>
+
+export { Step, Step as default }
diff --git a/src/packages/__VUE/step/index.taro.vue b/src/packages/__VUE/step/index.taro.vue
deleted file mode 100644
index 3e2cba97f1..0000000000
--- a/src/packages/__VUE/step/index.taro.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <view :class="classes" @click="handleClickStep">
-    <view class="nut-step-head">
-      <view class="nut-step-line"></view>
-      <view class="nut-step-icon" :class="[!dot ? 'is-icon' : '']">
-        <view class="nut-step-icon-inner">
-          <slot name="icon">
-            <template v-if="dot"></template>
-            <template v-else>
-              <view class="nut-step-inner">{{ index }}</view>
-            </template>
-          </slot>
-        </view>
-      </view>
-    </view>
-    <view class="nut-step-main">
-      <view class="nut-step-title">
-        <span v-if="!$slots.title">{{ title }}</span>
-        <slot name="title"></slot>
-      </view>
-      <view v-if="content || $slots.content" class="nut-step-content">
-        <span v-if="!$slots.content" v-html="content"></span>
-        <slot name="content"></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { reactive, computed, inject, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { STEPS_KEY } from '../steps/types'
-const { create, componentName } = createComponent('step')
-
-export default create({
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    content: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['clickStep'],
-
-  setup() {
-    const { proxy } = getCurrentInstance() as ComponentInternalInstance
-    const parent: any = inject(STEPS_KEY)
-    parent['relation'](proxy)
-
-    const state = reactive({
-      dot: parent.props.progressDot
-    })
-
-    const index = computed(() => parent.state.children.indexOf(proxy) + 1)
-
-    const getCurrentStatus = () => {
-      const activeIndex = index.value
-      if (activeIndex < +parent.props.current) return 'finish'
-      return activeIndex === +parent.props.current ? 'process' : 'wait'
-    }
-
-    const status = computed(() => {
-      return getCurrentStatus()
-    })
-
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}-${status.value}`]: true
-      }
-    })
-
-    const handleClickStep = () => {
-      parent['onEmit'](index.value)
-    }
-
-    return {
-      ...toRefs(state),
-      index,
-      classes,
-      handleClickStep
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/step/index.ts b/src/packages/__VUE/step/index.ts
new file mode 100644
index 0000000000..e9f99f1fe9
--- /dev/null
+++ b/src/packages/__VUE/step/index.ts
@@ -0,0 +1,11 @@
+import Step from './step.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Step)
+
+export type { StepProps } from './step.vue'
+
+export type StepInstance = ComponentPublicInstance & InstanceType<typeof Step>
+
+export { Step, Step as default }
diff --git a/src/packages/__VUE/step/index.vue b/src/packages/__VUE/step/index.vue
deleted file mode 100644
index 3e2cba97f1..0000000000
--- a/src/packages/__VUE/step/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <view :class="classes" @click="handleClickStep">
-    <view class="nut-step-head">
-      <view class="nut-step-line"></view>
-      <view class="nut-step-icon" :class="[!dot ? 'is-icon' : '']">
-        <view class="nut-step-icon-inner">
-          <slot name="icon">
-            <template v-if="dot"></template>
-            <template v-else>
-              <view class="nut-step-inner">{{ index }}</view>
-            </template>
-          </slot>
-        </view>
-      </view>
-    </view>
-    <view class="nut-step-main">
-      <view class="nut-step-title">
-        <span v-if="!$slots.title">{{ title }}</span>
-        <slot name="title"></slot>
-      </view>
-      <view v-if="content || $slots.content" class="nut-step-content">
-        <span v-if="!$slots.content" v-html="content"></span>
-        <slot name="content"></slot>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script lang="ts">
-import { reactive, computed, inject, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { STEPS_KEY } from '../steps/types'
-const { create, componentName } = createComponent('step')
-
-export default create({
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    content: {
-      type: String,
-      default: ''
-    }
-  },
-  emits: ['clickStep'],
-
-  setup() {
-    const { proxy } = getCurrentInstance() as ComponentInternalInstance
-    const parent: any = inject(STEPS_KEY)
-    parent['relation'](proxy)
-
-    const state = reactive({
-      dot: parent.props.progressDot
-    })
-
-    const index = computed(() => parent.state.children.indexOf(proxy) + 1)
-
-    const getCurrentStatus = () => {
-      const activeIndex = index.value
-      if (activeIndex < +parent.props.current) return 'finish'
-      return activeIndex === +parent.props.current ? 'process' : 'wait'
-    }
-
-    const status = computed(() => {
-      return getCurrentStatus()
-    })
-
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}-${status.value}`]: true
-      }
-    })
-
-    const handleClickStep = () => {
-      parent['onEmit'](index.value)
-    }
-
-    return {
-      ...toRefs(state),
-      index,
-      classes,
-      handleClickStep
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/step/step.taro.vue b/src/packages/__VUE/step/step.taro.vue
new file mode 100644
index 0000000000..129a09d13f
--- /dev/null
+++ b/src/packages/__VUE/step/step.taro.vue
@@ -0,0 +1,70 @@
+<template>
+  <view :class="classes" @click="handleClickStep">
+    <view class="nut-step-head">
+      <view class="nut-step-line"></view>
+      <view class="nut-step-icon" :class="[!dot ? 'is-icon' : '']">
+        <view class="nut-step-icon-inner">
+          <slot name="icon">
+            <template v-if="!dot">
+              <view class="nut-step-inner">{{ index + 1 }}</view>
+            </template>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <view class="nut-step-main">
+      <view class="nut-step-title">
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
+      </view>
+      <view v-if="content || $slots.content" class="nut-step-content">
+        <slot name="content">
+          <span v-html="content"></span>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useParent } from '@/packages/utils'
+import { STEPS_KEY } from '../steps/types'
+
+defineOptions({
+  name: 'NutStep'
+})
+
+export type StepProps = Partial<{
+  title: string
+  content: string
+}>
+
+withDefaults(defineProps<StepProps>(), {
+  title: '',
+  content: ''
+})
+
+const { index, parent } = useParent(STEPS_KEY)
+
+const status = computed(() => {
+  const activeIndex = index.value + 1
+  if (activeIndex < +parent.props.current) return 'finish'
+  return activeIndex === +parent.props.current ? 'process' : 'wait'
+})
+
+const dot = computed(() => parent.props.progressDot)
+
+const classes = computed(() => {
+  const prefixCls = 'nut-step'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}-${status.value}`]: true
+  }
+})
+
+const handleClickStep = () => {
+  parent.onEmit(index.value + 1)
+}
+</script>
diff --git a/src/packages/__VUE/step/step.vue b/src/packages/__VUE/step/step.vue
new file mode 100644
index 0000000000..129a09d13f
--- /dev/null
+++ b/src/packages/__VUE/step/step.vue
@@ -0,0 +1,70 @@
+<template>
+  <view :class="classes" @click="handleClickStep">
+    <view class="nut-step-head">
+      <view class="nut-step-line"></view>
+      <view class="nut-step-icon" :class="[!dot ? 'is-icon' : '']">
+        <view class="nut-step-icon-inner">
+          <slot name="icon">
+            <template v-if="!dot">
+              <view class="nut-step-inner">{{ index + 1 }}</view>
+            </template>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <view class="nut-step-main">
+      <view class="nut-step-title">
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
+      </view>
+      <view v-if="content || $slots.content" class="nut-step-content">
+        <slot name="content">
+          <span v-html="content"></span>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useParent } from '@/packages/utils'
+import { STEPS_KEY } from '../steps/types'
+
+defineOptions({
+  name: 'NutStep'
+})
+
+export type StepProps = Partial<{
+  title: string
+  content: string
+}>
+
+withDefaults(defineProps<StepProps>(), {
+  title: '',
+  content: ''
+})
+
+const { index, parent } = useParent(STEPS_KEY)
+
+const status = computed(() => {
+  const activeIndex = index.value + 1
+  if (activeIndex < +parent.props.current) return 'finish'
+  return activeIndex === +parent.props.current ? 'process' : 'wait'
+})
+
+const dot = computed(() => parent.props.progressDot)
+
+const classes = computed(() => {
+  const prefixCls = 'nut-step'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}-${status.value}`]: true
+  }
+})
+
+const handleClickStep = () => {
+  parent.onEmit(index.value + 1)
+}
+</script>
diff --git a/src/packages/__VUE/steps/__tests__/index.spec.tsx b/src/packages/__VUE/steps/__tests__/index.spec.tsx
index c6a9fde2e9..90a1ea764d 100644
--- a/src/packages/__VUE/steps/__tests__/index.spec.tsx
+++ b/src/packages/__VUE/steps/__tests__/index.spec.tsx
@@ -154,6 +154,9 @@ test('should emited click when step trigger', async () => {
   await nextTick()
   await wrapper.vm.$emit('click-step')
   expect(wrapper.emitted('click-step')).toBeTruthy()
+  const stepItem = wrapper.findAll('.nut-step')[0]
+  await stepItem.trigger('click')
+  expect(wrapper.emitted('click-step')).toBeTruthy()
 })
 
 test('render step slot', async () => {
diff --git a/src/packages/__VUE/steps/doc.en-US.md b/src/packages/__VUE/steps/doc.en-US.md
index 4f7886d3a6..b0eb9811db 100644
--- a/src/packages/__VUE/steps/doc.en-US.md
+++ b/src/packages/__VUE/steps/doc.en-US.md
@@ -70,6 +70,20 @@ app.use(Step)
 | content | Step content |
 | icon | Step icon |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  StepsProps,
+  StepsInstance,
+  StepsDirection,
+  StepProps,
+  StepInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables
diff --git a/src/packages/__VUE/steps/doc.md b/src/packages/__VUE/steps/doc.md
index cbb1d41ff7..6a5e7418cf 100644
--- a/src/packages/__VUE/steps/doc.md
+++ b/src/packages/__VUE/steps/doc.md
@@ -70,6 +70,20 @@ app.use(Step)
 | content | 步骤内容 |
 | icon | 步骤图标 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  StepsProps,
+  StepsInstance,
+  StepsDirection,
+  StepProps,
+  StepInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/steps/doc.taro.md b/src/packages/__VUE/steps/doc.taro.md
index b443943f5e..a456738d48 100644
--- a/src/packages/__VUE/steps/doc.taro.md
+++ b/src/packages/__VUE/steps/doc.taro.md
@@ -70,6 +70,20 @@ app.use(Step)
 | content | 步骤内容 |
 | icon | 步骤图标 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  StepsProps,
+  StepsInstance,
+  StepsDirection,
+  StepProps,
+  StepInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量
diff --git a/src/packages/__VUE/steps/index.taro.ts b/src/packages/__VUE/steps/index.taro.ts
new file mode 100644
index 0000000000..79fec53a2b
--- /dev/null
+++ b/src/packages/__VUE/steps/index.taro.ts
@@ -0,0 +1,13 @@
+import Steps from './steps.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Steps)
+
+export type { StepsProps } from './steps.taro.vue'
+
+export type { StepsDirection } from './types'
+
+export type StepsInstance = ComponentPublicInstance & InstanceType<typeof Steps>
+
+export { Steps, Steps as default }
diff --git a/src/packages/__VUE/steps/index.taro.vue b/src/packages/__VUE/steps/index.taro.vue
deleted file mode 100644
index 3d7877f8d6..0000000000
--- a/src/packages/__VUE/steps/index.taro.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-import { provide, computed, reactive, h, ComponentInternalInstance, PropType } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { STEPS_KEY, StepsDirection } from './types'
-const { create, componentName } = createComponent('steps')
-
-export default create({
-  props: {
-    direction: {
-      type: String as PropType<StepsDirection>,
-      default: 'horizontal'
-    },
-    current: {
-      type: [String, Number],
-      default: '0'
-    },
-    progressDot: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['clickStep'],
-  setup(props, { emit, slots }) {
-    const state = reactive({
-      children: [] as ComponentInternalInstance[]
-    })
-
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}-${props.direction}`]: true,
-        [`${prefixCls}-dot`]: !!props.progressDot
-      }
-    })
-
-    const relation = (child: ComponentInternalInstance) => {
-      child && state.children.push(child as any)
-    }
-
-    const onEmit = (index: number) => {
-      emit('clickStep', index)
-    }
-
-    provide(STEPS_KEY, {
-      relation,
-      state,
-      props,
-      onEmit
-    })
-
-    return () => {
-      return h(
-        'view',
-        {
-          class: classes.value
-        },
-        slots.default?.()
-      )
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/steps/index.ts b/src/packages/__VUE/steps/index.ts
new file mode 100644
index 0000000000..3a12fc45e8
--- /dev/null
+++ b/src/packages/__VUE/steps/index.ts
@@ -0,0 +1,13 @@
+import Steps from './steps.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Steps)
+
+export type { StepsProps } from './steps.vue'
+
+export type { StepsDirection } from './types'
+
+export type StepsInstance = ComponentPublicInstance & InstanceType<typeof Steps>
+
+export { Steps, Steps as default }
diff --git a/src/packages/__VUE/steps/index.vue b/src/packages/__VUE/steps/index.vue
deleted file mode 100644
index 3d7877f8d6..0000000000
--- a/src/packages/__VUE/steps/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-import { provide, computed, reactive, h, ComponentInternalInstance, PropType } from 'vue'
-import { createComponent } from '@/packages/utils/create'
-import { STEPS_KEY, StepsDirection } from './types'
-const { create, componentName } = createComponent('steps')
-
-export default create({
-  props: {
-    direction: {
-      type: String as PropType<StepsDirection>,
-      default: 'horizontal'
-    },
-    current: {
-      type: [String, Number],
-      default: '0'
-    },
-    progressDot: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['clickStep'],
-  setup(props, { emit, slots }) {
-    const state = reactive({
-      children: [] as ComponentInternalInstance[]
-    })
-
-    const classes = computed(() => {
-      const prefixCls = componentName
-      return {
-        [prefixCls]: true,
-        [`${prefixCls}-${props.direction}`]: true,
-        [`${prefixCls}-dot`]: !!props.progressDot
-      }
-    })
-
-    const relation = (child: ComponentInternalInstance) => {
-      child && state.children.push(child as any)
-    }
-
-    const onEmit = (index: number) => {
-      emit('clickStep', index)
-    }
-
-    provide(STEPS_KEY, {
-      relation,
-      state,
-      props,
-      onEmit
-    })
-
-    return () => {
-      return h(
-        'view',
-        {
-          class: classes.value
-        },
-        slots.default?.()
-      )
-    }
-  }
-})
-</script>
diff --git a/src/packages/__VUE/steps/steps.taro.vue b/src/packages/__VUE/steps/steps.taro.vue
new file mode 100644
index 0000000000..c37ff68e48
--- /dev/null
+++ b/src/packages/__VUE/steps/steps.taro.vue
@@ -0,0 +1,45 @@
+<template>
+  <view :class="classes">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChildren } from '@/packages/utils'
+import { STEPS_KEY, type StepsDirection } from './types'
+
+defineOptions({
+  name: 'NutSteps'
+})
+
+export type StepsProps = Partial<{
+  direction: StepsDirection
+  current: string | number
+  progressDot: boolean
+}>
+
+const props = withDefaults(defineProps<StepsProps>(), {
+  direction: 'horizontal',
+  current: '0',
+  progressDot: false
+})
+
+const emit = defineEmits(['clickStep'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-steps'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}-${props.direction}`]: true,
+    [`${prefixCls}-dot`]: !!props.progressDot
+  }
+})
+
+const { linkChildren } = useChildren(STEPS_KEY)
+
+const onEmit = (index: number) => {
+  emit('clickStep', index)
+}
+
+linkChildren({ props, onEmit })
+</script>
diff --git a/src/packages/__VUE/steps/steps.vue b/src/packages/__VUE/steps/steps.vue
new file mode 100644
index 0000000000..c37ff68e48
--- /dev/null
+++ b/src/packages/__VUE/steps/steps.vue
@@ -0,0 +1,45 @@
+<template>
+  <view :class="classes">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useChildren } from '@/packages/utils'
+import { STEPS_KEY, type StepsDirection } from './types'
+
+defineOptions({
+  name: 'NutSteps'
+})
+
+export type StepsProps = Partial<{
+  direction: StepsDirection
+  current: string | number
+  progressDot: boolean
+}>
+
+const props = withDefaults(defineProps<StepsProps>(), {
+  direction: 'horizontal',
+  current: '0',
+  progressDot: false
+})
+
+const emit = defineEmits(['clickStep'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-steps'
+  return {
+    [prefixCls]: true,
+    [`${prefixCls}-${props.direction}`]: true,
+    [`${prefixCls}-dot`]: !!props.progressDot
+  }
+})
+
+const { linkChildren } = useChildren(STEPS_KEY)
+
+const onEmit = (index: number) => {
+  emit('clickStep', index)
+}
+
+linkChildren({ props, onEmit })
+</script>
diff --git a/src/packages/utils/useRelation/useParent.ts b/src/packages/utils/useRelation/useParent.ts
index 06867dec75..37848574ae 100644
--- a/src/packages/utils/useRelation/useParent.ts
+++ b/src/packages/utils/useRelation/useParent.ts
@@ -11,7 +11,7 @@ export const useParent = (key: symbol) => {
     onUnmounted(() => {
       unlink(instance)
     })
-    const index = computed(() => internalChildren.indexOf(instance))
+    const index = computed<number>(() => internalChildren.indexOf(instance))
 
     return { parent, index }
   }