refactor(steps): move to script setup (#3022)

src/config.json

@@ -651,13 +651,15 @@
           "version": "3.0.0",
           "name": "Steps",
           "cName": "步骤条",
+          "setup": true,
           "desc": "步骤条",
           "author": "ailululu"
         },
         {
           "version": "3.0.0",
           "name": "Step",
           "cName": "步骤条子组件",
+          "setup": true,
           "show": false,
           "desc": "步骤条子组件",
           "author": "ailululu"

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 }

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 }

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>

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>

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 () => {

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