feat(comp:stepper): add dot prop (#1401)

fix #1082
IDuxFE · Jan 12, 2023 · aa90a7e · aa90a7e
1 parent ba15f33
commit aa90a7e
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -46,13 +46,17 @@ 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,
         [`${prefixCls}-active`]: isActive.value,
         [`${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
@@ -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
@@ -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
@@ -14,6 +14,10 @@
     color: @@icon-color;
   }
 
+  &-@{status}.@{stepper-item-prefix}-dot &-icon {
+    background: @@icon-color;
+  }
+
   &-@{status} &-content &-title {
     color: @@title-color;
   }