fix: 上传组件更新

.huskyrc

@@ -1,5 +0,0 @@
-{
-  "hooks": {
-    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-  }
-}

package.json

@@ -21,8 +21,9 @@
     "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/**/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
-    "prettier:check": "prettier -l src/**/*.{ts,js,vue,scss}",
-    "prettier:fix": "prettier --write src/**/*.{ts,js,vue,scss}"
+    "prettier:check": "prettier -l src/**/*.{js,vue,scss}",
+    "prettier:fix": "prettier --write src/**/*.{js,vue,scss}",
+    "upload:test": "node test_script/upload.js"
   },
   "repository": {
     "type": "git",
@@ -34,6 +35,17 @@
       "./eslint-config.js"
     ]
   },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue,scss}": [
+      "prettier --write src/**/*.{js,vue,scss}",
+      "git add"
+    ]
+  },
   "stylelint": {
     "extends": [
       "./stylelint-config.js"
@@ -56,11 +68,9 @@
     "@babel/plugin-transform-runtime": "^7.9.6",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
-    "@nutui/cli": "^0.1.9",
     "@vue/composition-api": "^0.5.0",
     "babel-plugin-istanbul": "^6.0.0",
     "gsap": "^3.2.6",
-    "husky": "^3.0.0",
     "vue-lazyload": "^1.3.3",
     "vue-qr": "^2.2.1"
   },
@@ -70,11 +80,14 @@
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.8.3",
+    "@nutui/cli": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-vue": "^6.1.2",
+    "husky": "^3.0.0",
+    "prettier": "^2.0.5",
     "stylelint-config-standard": "^19.0.0"
   },
   "nyc": {

src/config.json

@@ -407,6 +407,16 @@
             "sort": "1",
             "showDemo": true,
             "author": "guoxiaoxiao"
+        },
+        {
+          "version": "1.0.0",
+          "name": "Steps",
+          "chnName": "步骤条",
+          "desc": "步骤条",
+          "type": "component",
+          "sort": "0",
+          "showDemo": true,
+          "author": "undo"
         }
     ]
 }

src/packages/field/demo.vue

@@ -68,6 +68,12 @@
         </span>
       </nut-cell>
     </div>
+      <h4>右侧自定义DOM</h4>
+       <div class="filed-wrap"> 
+          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+              <div class="get-code"> 获取验证码</div>
+          </nut-field>
+      </div>
   </div>
 </template>
 
@@ -136,4 +142,20 @@ export default {
 	width: 100%;
 	background: rgba(255, 255, 255, 1);
 }
+
+.wrapper-cell .nut-cell {
+	margin: 0 0 0 20px;
+}
+
+.filed-wrap {
+	background: #fff;
+
+	.get-code {
+		min-width: 80px;
+		background-color: #07c160;
+		border: 1px solid #07c160;
+		color: #fff;
+		margin: 10px;
+	}
+}
 </style>

src/packages/field/doc.md

@@ -86,7 +86,15 @@
     <nut-field  label="自我介绍" placeholder="自我介绍" v-model="val3"  type="textarea" maxLength="20" rows="4"  />
 </div> 
 ```
+右侧自定义demo
 
+```html
+<div class="filed-wrap"> 
+          <nut-field label="验证码：" textAlign="left"  placeholder="请输入内容" v-model="val" @inputFunc="a" > 
+              <div class="get-code"> 获取验证码</div>
+          </nut-field>
+      </div>
+```
 
 
 

src/packages/field/field.scss

@@ -23,6 +23,7 @@
 	}
 
 	input {
+		min-width: 100px;
 		flex: 1;
 		height: 40px;
 		appearance: none;
@@ -80,9 +81,9 @@
 
 	.nut-textinput-clear {
 		opacity: 0.5;
-		position: absolute;
-		right: 0;
-		top: 50%;
+		position: relative;
+		right: 20px;
+		top: 10px;
 		transform: translateY(-50%);
 		height: 20px;
 		width: 20px;

src/packages/field/field.vue

@@ -97,8 +97,7 @@ export default {
        type: Boolean,
         default:false
     },
-    value: String,
-    attr: Object
+    value: String
   },
   mounted(){
     this.txtNum=this.value.length;
@@ -123,7 +122,7 @@ export default {
       this.currentValue = '';
     },
     txtIptLength(event) {
-      const data = event.target;
+      const data = event.target.value;
       const txtLength = data.length;
       this.txtNum = txtLength;
       if (txtLength > this.maxLength) {

src/packages/steps/demo.vue

@@ -1,55 +1,48 @@
 <template>
   <div>
-    <h4>正常流程</h4>
-    <nut-steps :current="current">
-      <nut-step title="已完成" content></nut-step>
-      <nut-step title content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="进行中" content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="待进行" content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="待进行" content="这里是该步骤的描述信息"></nut-step>
+    <h4>基础样式</h4>
+    <nut-steps>
+      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96">
+        <template v-slot:status-icon>
+          <nut-icon type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
+        </template>
+      </nut-step>
+      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
     </nut-steps>
-    <h4>流程终止</h4>
-    <nut-steps :current="current" status="error">
-      <nut-step title="已完成" content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="已完成" content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="进行中" content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="待进行" content="这里是该步骤的描述信息"></nut-step>
-      <nut-step title="待进行" content="这里是该步骤的描述信息"></nut-step>
+    <h4>时间前置</h4>
+    <nut-steps :time-forward="true">
+      <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+      <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
     </nut-steps>
-    <h4>动态加载(2s后渲染)</h4>
-    <nut-steps :current="current2" :source="titles">
-      <nut-step :key="index" v-for="(item, index) in titles" :title="item" content="这里是该步骤的描述信息"></nut-step>
+    <h4>横向步骤条</h4>
+    <nut-steps :current="1" type="process" direction="horizontal">
+      <nut-step title="已完成" ></nut-step>
+      <nut-step title="进行中" ></nut-step>
+      <nut-step title="等待中" ></nut-step>
+    </nut-steps>
+    <nut-steps :current="1" type="process" direction="horizontal">
+      <nut-step title="已完成" content="这里是描述文字"></nut-step>
+      <nut-step title="进行中" content="这里是描述文字"></nut-step>
+      <nut-step title="等待中" content="这里是描述文字"></nut-step>
     </nut-steps>
   </div>
 </template>
 
 <script>
 export default {
-  components: {},
-  data() {
-    return {
-      current: 3,
-      titles: [],
-      current2: 0
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.titles = ['已完成', '已完成', '进行中'];
-      this.current2 = 3;
-    }, 2000);
-  },
-  methods: {
-    next() {
-      this.current = this.current + 1;
-    }
-  }
+
 };
 </script>
 
 <style lang="scss" scoped>
 .nut-steps {
-	margin-left: 10px;
+	margin-left: 0 10px;
 }
 
 .next-step {

src/packages/steps/doc.md

@@ -4,105 +4,44 @@
 
 ## 基本用法
 
-正常流程
+基础样式
 
 ```html
-<nut-steps 
-  :current="current"
->
-  <nut-step 
-    title="已完成" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="已完成" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="进行中" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="待进行" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="待进行" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
+<nut-steps>
+  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
 </nut-steps>
 ```
 
-流程终止
+时间前置
 
 ```html
-<nut-steps 
-  :current="current" 
-  status="error"
->
-  <nut-step 
-    title="已完成" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="已完成" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="进行中" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="待进行" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
-  <nut-step 
-    title="待进行" 
-    content="这里是该步骤的描述信息"
-  >
-  </nut-step>
+<nut-steps :time-forward="true">
+  <nut-step title="已签收" content="您的订单已由本人签收。如有疑问您可以联系配送员，感谢您在京东购物。" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step title="运输中" content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step content="您的订单已达到京东【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step content="您的订单由京东【北京顺义分拣中心】送往【北京旧宫营业部】" time="2020-03-03 11：09：96"></nut-step>
+  <nut-step title="已下单" content="您提交了订单，请等待系统确认" time="2020-03-03 11：09：96"></nut-step>
 </nut-steps>
 ```
 
-动态加载(2s后渲染)
+横向步骤条
 ```html
-<nut-steps :current="current2" status="error" :source="titles">
-  <nut-step :key="index" v-for="(item,index) in titles" :title="item" content="这里是该步骤的描述信息"></nut-step>
+<nut-steps :current="1" type="process" direction="horizontal">
+  <nut-step title="已完成" ></nut-step>
+  <nut-step title="进行中" ></nut-step>
+  <nut-step title="等待中" ></nut-step>
+</nut-steps>
+<nut-steps :current="1" type="process" direction="horizontal">
+  <nut-step title="已完成" content="这里是描述文字"></nut-step>
+  <nut-step title="进行中" content="这里是描述文字"></nut-step>
+  <nut-step title="等待中" content="这里是描述文字"></nut-step>
 </nut-steps>
 ```
 
-``` javascript
-export default {
-  components: {},
-  data() {
-    return {
-      current: 3,
-      titles: [],
-      current2: 0
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.titles = ["已完成", "已完成", "进行中"];
-      this.current2 = 3;
-    }, 2000);
-  },
-  methods: {
-    next() {
-      this.current = this.current + 1;
-    }
-  }
-};
-```
 
 
 ## Prop
@@ -112,12 +51,14 @@ export default {
 | 字段    | 说明                                  | 类型   | 默认值                                                   |
 |---------|---------------------------------------|--------|----------------------------------------------------------|
 | current | 当前所在的步骤                        | Number | 0                                                        |
-| status  | 流程状态                              | String | "process"（可选值 "wait"、"process"、"finish"、"error"） |
-| source  | 异步数据渲染nut-step时，必须绑定对应数组 | Array  | -                                                        |
-
+| time-forward  | 时间前置选项                    | Boolean | false |
+| direction  | 垂直或水平方向 | String  | vertical                                                       |
+| type  | 步骤条类型 | String  | '' (可选 process)                                                       |
+| source  | 数据依赖 | any  |                                                     |
 ### nut-step
   
 | 字段    | 说明              | 类型   | 默认值   |
 |---------|-------------------|--------|----------|
 | title   | 流程步骤的title   | String | 步骤     |
 | content | 流程步骤的content | String | 步骤描述 |
+| time | 流程步骤的操作时间| String | 步骤操作时间 |

src/packages/steps/step.vue

@@ -1,10 +1,19 @@
 <template>
-  <div class="nut-step clearfix" :class="'nut-step-status-' + currentStatus">
-    <div class="nut-step-line"></div>
-    <div class="nut-step-index">{{ stepNumber }}</div>
+  <div class="nut-step clearfix" :class="`${currentStatus ? 'nut-step-status-' + currentStatus : ''}`">
+    <div v-if="timeForward && time" class="nut-step-time-forward">{{ time }}</div>
+    <div class="nut-step-node">
+      <div class="nut-step-icon">
+        <slot name="status-icon">
+          <nut-icon v-if="currentStatus === 'finish'" type="self" :url="require('../../assets/svg/finish.svg')"></nut-icon>
+          <span v-else class="default-icon"></span>
+        </slot>
+      </div>
+      <div class="nut-step-line"></div>
+    </div>
     <div class="nut-step-main">
-      <div class="nut-step-title">{{ title || nutTranslate('lang.steps.step') }}</div>
-      <div class="nut-step-content">{{ content || nutTranslate('lang.steps.stepDesc') }}</div>
+      <div v-if="title" class="nut-step-title">{{ title }}</div>
+      <div v-if="content" class="nut-step-content">{{ content }}</div>
+      <div v-if="!timeForward && time" class="nut-step-time">{{ time }}</div>
     </div>
   </div>
 </template>
@@ -19,13 +28,15 @@ export default {
     },
     content: {
       type: String
+    },
+    time: {
+      type: String
     }
   },
   data() {
     return {
       currentStatus: '',
-      stepNumber: 0,
-      stepStatus: 'nut-step-status'
+      timeForward: false,
     };
   },
   methods: {},

src/packages/steps/steps.scss

@@ -1,3 +1,5 @@
+@import '../../styles/variable.scss';
+
 .clearfix {
 	zoom: 1;
 }
@@ -11,45 +13,107 @@
 }
 
 .nut-steps {
+	&.horizontal {
+		display: flex;
+
+		.nut-step {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.nut-step-node {
+				display: flex;
+				width: 100%;
+
+				.nut-step-line {
+					height: 1px;
+					width: 100%;
+					top: 50%;
+					left: 50%;
+				}
+			}
+
+			.nut-step-main {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.nut-step-title {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
 }
 
 .nut-step {
 	position: relative;
-	font-size: 14px;
-	color: #999;
-
-	.nut-step-line {
-		position: absolute;
-		top: 0;
-		left: 14px;
-		height: 100%;
-		width: 1px;
+	font-size: $font-size-body-small;
+	display: flex;
+
+	.nut-step-time-forward {
+		font-size: $font-size-display-small;
+		width: 75px;
+		color: $text-black-2;
 	}
 
-	.nut-step-index {
+	.nut-step-node {
 		position: relative;
 		z-index: 99;
-		float: left;
-		width: 26px;
-		height: 26px;
-		font-size: 14px;
-		line-height: 26px;
-		text-align: center;
-		border-radius: 50%;
+		width: 30px;
+		display: flex;
+		justify-content: center;
+
+		.nut-step-icon {
+			width: 20px;
+			height: 20px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			z-index: 1;
+
+			.default-icon {
+				width: 8px;
+				height: 8px;
+				border-radius: 50%;
+				background: $split-line-color;
+			}
+		}
+
+		.nut-step-line {
+			position: absolute;
+			top: 14px;
+			left: 14px;
+			width: 1px;
+			height: 100%;
+			background: $split-line-color;
+		}
 	}
 
 	.nut-step-main {
-		padding-left: 40px;
+		// padding-left: 40px;
+		flex: 1;
+		margin-bottom: 20px;
 
 		.nut-step-title {
-			line-height: 28px;
+			color: $text-black-1;
+			line-height: 20px;
 			font-weight: 600;
+			margin-bottom: 5px;
 		}
 
 		.nut-step-content {
-			padding-bottom: 10px;
+			color: $text-black-2;
 			line-height: 20px;
-			font-size: 12px;
+			font-size: $font-size-display-small;
+			margin-bottom: 8px;
+		}
+
+		.nut-step-time {
+			color: $text-black-3;
+			font-size: $font-size-display-small;
 		}
 	}
 
@@ -61,58 +125,54 @@
 
 	&.nut-step-status- {
 		&wait {
-			.nut-step-line {
-				background: #ccc;
-			}
-
-			.nut-step-index {
-				color: #999;
-				border: 1px solid #ccc;
-				background: #fff;
-			}
-		}
-
-		&finish {
-			.nut-step-line {
-				background: mix($primary-color, #0f0, 50%);
-			}
-
-			.nut-step-index {
-				border: 1px solid mix($primary-color, #0f0, 50%);
-				background: #fff;
-				color: mix($primary-color, #0f0, 50%);
+			.nut-step-node {
+				.nut-step-icon {
+					.default-icon {
+						width: 20px;
+						height: 20px;
+						line-height: 20px;
+						border-radius: 50%;
+						background: $split-line-color;
+						position: relative;
+
+						&::before {
+							content: '...';
+							position: absolute;
+							top: -4px;
+							width: 100%;
+							height: 100%;
+							color: $btn-default-bg;
+							text-align: center;
+						}
+					}
+				}
 			}
 		}
 
 		&process {
-			.nut-step-line {
-				background: #ccc;
-			}
-
-			.nut-step-main {
-				color: #666;
-			}
-
-			.nut-step-index {
-				border: 1px solid mix($primary-color, #0f0, 50%);
-				background: mix($primary-color, #0f0, 50%);
-				color: #fff;
-			}
-		}
-
-		&error {
-			.nut-step-line {
-				background: #ccc;
-			}
-
-			.nut-step-main {
-				color: $primary-color;
-			}
-
-			.nut-step-index {
-				border: 1px solid $primary-color;
-				background: #fff;
-				color: $primary-color;
+			.nut-step-node {
+				.nut-step-icon {
+					.default-icon {
+						width: 15px;
+						height: 15px;
+						border-radius: 50%;
+						background: $assist-color-orange;
+						position: relative;
+						z-index: 1;
+
+						&::before {
+							content: '';
+							position: absolute;
+							top: 50%;
+							left: 50%;
+							transform: translate(-50%, -50%);
+							width: 7px;
+							height: 7px;
+							border-radius: 50%;
+							background: $primary-color-jd-red;
+						}
+					}
+				}
 			}
 		}
 	}

src/packages/steps/steps.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-steps">
+  <div class="nut-steps" :class="{horizontal: direction === 'horizontal'}">
     <slot></slot>
   </div>
 </template>
@@ -8,7 +8,19 @@ export default {
   name: 'nut-steps',
   props: {
     current: {
-      type: Number
+      type: Number,
+      default: 0
+    },
+    timeForward: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: 'vertical'
+    },
+    type: {
+      type: String
     },
     source: {
       type: Array,
@@ -16,45 +28,38 @@ export default {
         return [];
       }
     },
-    status: {
-      validator(value) {
-        return ['wait', 'process', 'finish', 'error'].includes(value);
-      },
-      default: 'process'
-    }
   },
   data() {
     return {
-      steps: [],
-      stepOffset: 0
+      steps: []
     };
   },
   methods: {
     updateChildProps(isInit) {
       const total = this.steps.length;
       this.steps.forEach((child, index) => {
-        child.stepNumber = index + 1;
-        if (this.direction === 'horizontal') {
-          child.total = total;
-        }
         // 如果已存在status,且在初始化时,则略过
         // todo 如果当前是error,在current改变时需要处理
         if (!(isInit && child.currentStatus)) {
-          if (index == this.current - 1) {
-            if (this.status != 'error') {
-              child.currentStatus = 'process';
-            } else {
-              child.currentStatus = 'error';
+          if (this.current === index) {
+            child.currentStatus = 'process';
+          }
+          if (this.type === 'process') {
+            if (index < this.current) {
+              child.currentStatus = 'finish';
+            }
+            if (index > this.current) {
+              child.currentStatus = 'wait';
             }
-          } else if (index < this.current) {
-            child.currentStatus = 'finish';
-          } else {
-            child.currentStatus = 'wait';
           }
         }
+        
         if (index + 1 === total) {
           child.currentStatus += ' nut-step-last';
         }
+        if (this.timeForward) {
+          child.timeForward = true;
+        }
       });
     },
     init() {