From aa90a7e55c809e8b8e1fdc98836bcc7029fcaff7 Mon Sep 17 00:00:00 2001
From: Konv Suu <82451257+kovsu@users.noreply.github.com>
Date: Thu, 12 Jan 2023 15:44:50 +0800
Subject: [PATCH] feat(comp:stepper): add dot prop (#1401)

fix #1082
---
 .../components/stepper/__tests__/steps.spec.ts     |  9 +++++++++
 packages/components/stepper/demo/Dot.md            | 14 ++++++++++++++
 packages/components/stepper/demo/Dot.vue           |  7 +++++++
 packages/components/stepper/docs/Api.zh.md         |  2 +-
 packages/components/stepper/src/StepperItem.tsx    |  7 ++++++-
 packages/components/stepper/src/types.ts           |  4 ++++
 packages/components/stepper/style/index.less       | 12 ++++++++++++
 packages/components/stepper/style/mixin.less       |  4 ++++
 8 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/stepper/demo/Dot.md
 create mode 100644 packages/components/stepper/demo/Dot.vue

diff --git a/packages/components/stepper/__tests__/steps.spec.ts b/packages/components/stepper/__tests__/steps.spec.ts
index c220828b8..875ef2dc0 100644
--- a/packages/components/stepper/__tests__/steps.spec.ts
+++ b/packages/components/stepper/__tests__/steps.spec.ts
@@ -55,6 +55,15 @@ describe('Stepper', () => {
     expect(onUpdateActiveKey).toBeCalledTimes(1)
   })
 
+  test('dot work', async () => {
+    const wrapper = StepperMount({ props: { dot: true } })
+    const items = await wrapper.findAll('.ix-stepper-item')
+
+    expect(items[0].classes()).toContain('ix-stepper-item-dot')
+    expect(items[1].classes()).toContain('ix-stepper-item-dot')
+    expect(items[2].classes()).toContain('ix-stepper-item-dot')
+  })
+
   test('labelPlacement work', async () => {
     const wrapper = StepperMount({ props: { labelPlacement: 'bottom' } })
 
diff --git a/packages/components/stepper/demo/Dot.md b/packages/components/stepper/demo/Dot.md
new file mode 100644
index 000000000..0bc3f2787
--- /dev/null
+++ b/packages/components/stepper/demo/Dot.md
@@ -0,0 +1,14 @@
+---
+title:
+  zh: 点状步骤条
+  en: Dot Stepper
+order: 10
+---
+
+## zh
+
+点状的步骤条。
+
+## en
+
+The dot style stepper.
diff --git a/packages/components/stepper/demo/Dot.vue b/packages/components/stepper/demo/Dot.vue
new file mode 100644
index 000000000..4fb5432e8
--- /dev/null
+++ b/packages/components/stepper/demo/Dot.vue
@@ -0,0 +1,7 @@
+<template>
+  <IxStepper :activeKey="2" :dot="true" labelPlacement="bottom">
+    <IxStepperItem title="Finished" description="This is a description."></IxStepperItem>
+    <IxStepperItem title="In Progress" description="This is a description."></IxStepperItem>
+    <IxStepperItem title="Waiting" description="This is a description."></IxStepperItem>
+  </IxStepper>
+</template>
diff --git a/packages/components/stepper/docs/Api.zh.md b/packages/components/stepper/docs/Api.zh.md
index 1ee1187d9..e1a7cefc9 100644
--- a/packages/components/stepper/docs/Api.zh.md
+++ b/packages/components/stepper/docs/Api.zh.md
@@ -7,7 +7,7 @@
 | ---| --- | --- | --- | --- | --- |
 `v-model:activeKey` | 当前的激活节点的 `key` | `VKey` | - | - | - |
 `clickable` | 是否可点击 | `boolean` | `false` | - | - |
-`dot` | 是否为点状步骤条 | `boolean \| #dot={key, status}` | `false` | - | - |
+`dot` | 是否为点状步骤条 | `boolean` | `false` | - | - |
 `labelPlacement` | 指定文本信息放置的位置 | `'end' \| 'bottom'` | `'end'` | -| - |
 `percent` | 当前激活节点的进度 | `number` | - | - | 取值是 0-100 |
 `size` | 指定节点的大小 | `'md' \| 'sm'` | `'md'` | ✅ | - |
diff --git a/packages/components/stepper/src/StepperItem.tsx b/packages/components/stepper/src/StepperItem.tsx
index 9fa39ad32..d5995caa8 100644
--- a/packages/components/stepper/src/StepperItem.tsx
+++ b/packages/components/stepper/src/StepperItem.tsx
@@ -46,6 +46,8 @@ export default defineComponent({
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
       const { disabled, icon } = props
+      const { dot, labelPlacement } = parentProps
+
       return normalizeClass({
         [prefixCls]: true,
         [`${prefixCls}-${status.value}`]: true,
@@ -53,6 +55,8 @@ export default defineComponent({
         [`${prefixCls}-clickable`]: parentProps.clickable && !disabled,
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-with-icon`]: icon || !!slots.icon,
+        [`${prefixCls}-dot`]: dot,
+        [`${prefixCls}-label-${labelPlacement}`]: true,
       })
     })
 
@@ -66,6 +70,7 @@ export default defineComponent({
     return () => {
       const prefixCls = mergedPrefixCls.value
       const clickable = parentProps.clickable && !props.disabled
+      const { dot } = parentProps
       const iconNode = renderIcon(props, slots, parentProps, status, key)
       const titleNode = convertStringVNode(slots, props, 'title')
       const descriptionNode = convertStringVNode(slots, props, 'description')
@@ -77,7 +82,7 @@ export default defineComponent({
           onClick={clickable ? onClick : undefined}
         >
           <div class={`${prefixCls}-tail`}></div>
-          <div class={`${prefixCls}-icon`}>{iconNode}</div>
+          <div class={`${prefixCls}-icon`}>{dot ? '' : iconNode}</div>
           <div class={`${prefixCls}-content`}>
             <div class={`${prefixCls}-title`}>{titleNode}</div>
             {descriptionNode && <div class={`${prefixCls}-description`}>{descriptionNode}</div>}
diff --git a/packages/components/stepper/src/types.ts b/packages/components/stepper/src/types.ts
index 96c5e5f64..2fc288c92 100644
--- a/packages/components/stepper/src/types.ts
+++ b/packages/components/stepper/src/types.ts
@@ -34,6 +34,10 @@ export const stepperProps = {
     type: Boolean,
     default: false,
   },
+  dot: {
+    type: Boolean,
+    default: false,
+  },
 
   'onUpdate:activeKey': [Function, Array] as PropType<MaybeArray<(key: any) => void>>,
 } as const
diff --git a/packages/components/stepper/style/index.less b/packages/components/stepper/style/index.less
index bcb9928e5..fd35ba7e6 100644
--- a/packages/components/stepper/style/index.less
+++ b/packages/components/stepper/style/index.less
@@ -58,6 +58,18 @@
     }
   }
 
+  &-label-bottom {
+    .@{stepper-item-prefix}-content {
+      margin-top: -10px;
+    }
+  }
+
+  &-dot {
+    .@{stepper-item-prefix}-icon {
+      transform: scale(0.35) ;
+    }
+  }
+
   &-icon {
     display: inline-flex;
     align-items: center;
diff --git a/packages/components/stepper/style/mixin.less b/packages/components/stepper/style/mixin.less
index 4b4b8fc76..bd47f74fd 100644
--- a/packages/components/stepper/style/mixin.less
+++ b/packages/components/stepper/style/mixin.less
@@ -14,6 +14,10 @@
     color: @@icon-color;
   }
 
+  &-@{status}.@{stepper-item-prefix}-dot &-icon {
+    background: @@icon-color;
+  }
+
   &-@{status} &-content &-title {
     color: @@title-color;
   }