feat:add step props

Xutaotaotao · Xutaotaotao · commit 331a1e15b139 · 2020-10-04T18:40:23.000+08:00
diff --git a/build/webpack.config.base.js b/build/webpack.config.base.js
@@ -11,6 +11,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
+      '@': utils.resolve('src'),
       'assets': utils.resolve('assets'),
       'static': utils.resolve('static'),
       'packages': utils.resolve('packages'),
diff --git a/doc/markdown/nSteps/en-US/index.md b/doc/markdown/nSteps/en-US/index.md
@@ -1 +1,43 @@
-# Step
+# Steps
+A navigation bar that guides users to complete tasks in accordance with the process.
+
+- Steps Step bar component.
+- Step Every step in the step bar.
+
+## Examples
+
+### Basic use
+
+:::demo
+```html
+<template>
+  <n-steps :active="1">
+    <n-step title="Step1" description="Step1 description"/>
+    <n-step title="Step2" description="Step2 description"/>
+    <n-step title="Step3" description="Step3 description"/>
+    <n-step title="Step4" description="Step4 description"/>
+  </n-steps>
+</template>
+
+```
+:::
+
+## API
+
+### Steps
+
+Step bar component
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| active | Current active item | Number,String | |
+| direction | Specify the direction of the step bar. Currently supports horizontal (horizontal) and vertical (vertical) two directions | String | horizontal |
+
+### Step
+
+Every step in the step bar
+
+| Property | Description | Type | Default |
+| :--- | :--- | :--- | :--- |
+| title | Title | String | |
+| description | Detailed description of the step, optional | String |  |
diff --git a/doc/markdown/nSteps/zh-CN/index.md b/doc/markdown/nSteps/zh-CN/index.md
@@ -2,7 +2,7 @@
 引导用户按照流程完成任务的导航条。
 
 - Steps 步骤条组件
-- StepsItem 步骤条内的每一个步骤。
+- Step 步骤条内的每一个步骤。
 
 ## 代码演示
 
@@ -20,4 +20,24 @@
 </template>
 
 ```
-:::
+:::
+
+## API
+
+### Steps
+
+整体步骤条。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| active | 当前活动值 | Number,String | |
+| direction | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 | String | horizontal |
+
+### Step
+
+步骤条内的每一个步骤。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| :--- | :--- | :--- | :--- |
+| title | 标题 | String | |
+| description | 步骤的详情描述，可选 | String |  |
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-env": "^1.7.0",
+    "classnames": "^2.2.6",
     "copy-webpack-plugin": "5.0.4",
     "css-loader": "2.1.1",
     "deepmerge": "^4.2.2",
diff --git a/packages/n-step/src/index.scss b/packages/n-step/src/index.scss
@@ -2,27 +2,28 @@
   display: flex;
   align-items: center;
   margin: 0 0 0 5px;
+  color: #8E8E93;
   .icon{
     text-align: center;
     line-height: 30px;
     height: 30px;
     width: 30px;
-    color: #8E8E93;
     border: 1px solid #8E8E93;
     border-radius: 50%;
   }
+  .active {
+    border: 1px solid #3498FF;
+  }
   .content{
     margin-left: 10px;
     .title{
       font-family: PingFangSC-Medium;
       font-size: 16px;
-      color: #8E8E93;
       line-height: 30px;
     }
     .description{
       font-family: PingFangSC-Regular;
       font-size: 14px;
-      color: #8E8E93;
       line-height: 20px;
     }
   }
@@ -31,4 +32,7 @@
     height: 1px;
     background: #3498FF;
   }
+}
+.active {
+  color: #3498FF;
 }
diff --git a/packages/n-step/src/index.tsx b/packages/n-step/src/index.tsx
@@ -2,27 +2,25 @@ import { defineComponent,onMounted } from '@vue/composition-api';
 import './index.scss';
 
 interface stepProps {
-  title: String
-  description: String
+  title: string
+  description: string,
+  isLatest: boolean,
+  index: number,
+  active: boolean,
 }
 
 export default defineComponent({
   name: 'NStep',
-  props: ['title','description'],
-  setup(props:stepProps, {parent,slots}) {
-    onMounted(async () => {
-      if (parent !== null) {
-        console.log(parent.$attrs.active)
-      }
-    })
+  props: ['title','description','isLatest','index', 'active'],
+  setup(props:stepProps, {slots}) {
     return () => (
-      <div class={['n-step']}>
-        <div class="icon">1</div>
+      <div class={['n-step',props.active ? 'active' : '']}>
+        <div class={['icon',props.active ? 'active' : '' ]}>{props.index + 1}</div>
         <div class="content">
           <div class="title">{props.title}</div>
           <div class="description">{props.description}</div>
         </div>
-        <div class="line" />
+        { !props.isLatest && <div class="line" /> }
         {slots.default && slots.default()}
       </div>
     )
diff --git a/packages/n-steps/index.js b/packages/n-steps/index.js
@@ -1,4 +1,4 @@
-import nSteps from './src/index.tsx';
+import nSteps from './src/index';
 nSteps.install = function (Vue) {
   Vue.component('NSteps', nSteps);
 };
diff --git a/packages/n-steps/src/index.js b/packages/n-steps/src/index.js
@@ -0,0 +1,40 @@
+import { filterEmpty, getPropsData } from '@/utils/props';
+import { cloneElement } from '@/utils/vnode';
+import './index.scss';
+
+export default {
+  name: 'NSteps',
+  props: {
+    vertical: {
+      type: [Boolean, String]
+    },
+    active: {
+      type: [Number]
+    }
+  },
+  methods: {
+    renderChild (child, index, filteredChildren) {
+      const childProps = getPropsData(child);
+      let setpProps = {
+        props: {
+          ...childProps,
+          active: index === this.active - 1,
+          index,
+          isLatest: index === filteredChildren.length - 1
+        }
+      };
+      return cloneElement(child, setpProps);
+    }
+  },
+  render () {
+    const { vertical, $slots } = this;
+    const filteredChildren = filterEmpty($slots.default);
+    return (
+      <div class={['n-steps', vertical ? 'vertical' : 'horizontal']}>
+        {filteredChildren.map((child, index) => {
+          return this.renderChild(child, index, filteredChildren);
+        })}
+      </div>
+    );
+  }
+};
diff --git a/packages/n-steps/src/index.tsx b/packages/n-steps/src/index.tsx
diff --git a/src/utils/props.js b/src/utils/props.js
@@ -0,0 +1,39 @@
+const camelizeRE = /-(\w)/g;
+const camelize = str => {
+  return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
+};
+export function getPropsData (ele) {
+  let componentOptions = ele.componentOptions;
+  if (ele.$vnode) {
+    componentOptions = ele.$vnode.componentOptions;
+  }
+  return componentOptions ? componentOptions.propsData || {} : {};
+};
+
+export function isEmptyElement (c) {
+  return !(c.tag || (c.text && c.text.trim() !== ''));
+}
+
+export function isStringElement (c) {
+  return !c.tag;
+}
+
+export function filterEmpty (children = []) {
+  return children.filter(c => !isEmptyElement(c));
+}
+
+export function parseStyleText (cssText = '', camel) {
+  const res = {};
+  const listDelimiter = /;(?![^(]*\))/g;
+  const propertyDelimiter = /:(.+)/;
+  cssText.split(listDelimiter).forEach(function (item) {
+    if (item) {
+      const tmp = item.split(propertyDelimiter);
+      if (tmp.length > 1) {
+        const k = camel ? camelize(tmp[0].trim()) : tmp[0].trim();
+        res[k] = tmp[1].trim();
+      }
+    }
+  });
+  return res;
+};
diff --git a/src/utils/vnode.js b/src/utils/vnode.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import nSteps from './src/index.tsx';`
	`1`	`+import nSteps from './src/index';`
`2`	`2`	`nSteps.install = function (Vue) {`
`3`	`3`	`Vue.component('NSteps', nSteps);`
`4`	`4`	`};`