Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

src/config.json

@@ -576,6 +576,16 @@
     },
     {
       "version": "1.0.0",
+      "name": "TimeLine",
+      "chnName": "时间轴节点",
+      "desc": "定义时间轴节点",
+      "type": "component",
+      "sort": "0",
+      "showDemo": false,
+      "author": "yangxiaolu"
+    },
+    {
+      "version": "1.0.0",
       "name": "SideNavBar",
       "chnName": "侧边栏导航",
       "desc": "侧边栏导航",

src/packages/circleprogress/circleprogress.vue

@@ -20,6 +20,7 @@
       :stroke="option.progressColor"
       :stroke-dasharray="arcLength"
       :stroke-width="strokeInnerWidth"
+      
       fill="none"
       transform="rotate(-90)"
       transform-origin="center"
@@ -66,6 +67,11 @@ export default {
       // console.log(this.progress,progressLength)
       return `${progressLength},${circleLength}`
     },
+    // :stroke-dashoffset="dashOffset"
+    // dashOffset() {
+    //   // 偏移初始值为dashArray长度，随着percent增大逐渐减小
+    //   return (1 - this.progress) *Math.floor(2 * Math.PI * this.option.radius);
+    // },
     option () {
       // 所有进度条的可配置项
       let baseOption = {

src/packages/circleprogress/demo.vue

@@ -13,7 +13,7 @@
     <div>
       <nut-cell>
       <span slot="title">
-          <nut-circleprogress :progress="50" :progressOption="progressOption" >
+          <nut-circleprogress :progress="50" :progress-option="progressOption" >
           </nut-circleprogress>
       </span>
       </nut-cell>
@@ -22,7 +22,7 @@
     <div>
       <nut-cell>
       <span slot="title">
-          <nut-circleprogress :progress="50" :isAuto="isAuto">
+          <nut-circleprogress :progress="50" :is-auto="isAuto">
             <slot>自定义</slot>
           </nut-circleprogress>
       </span>
@@ -32,7 +32,7 @@
     <div>
       <nut-cell>
         <span slot="title">
-          <nut-circleprogress :progress="percent"  :progressOption="progressOption" :strokeInnerWidth="strokeInnerWidth">
+          <nut-circleprogress :progress="percent"  :progress-option="progressOption" :stroke-inner-width="strokeInnerWidth">
             
           </nut-circleprogress>
         </span>

src/packages/circleprogress/doc.md

@@ -13,7 +13,7 @@
 
 ```htmL
     
-    <nut-circleprogress progress="50" :progressOption="progressOption">
+    <nut-circleprogress progress="50" :progress-option="progressOption">
     </nut-circleprogress>
 ```
 
@@ -21,7 +21,7 @@
 
 ```htmL
     
-    <nut-circleprogress progress="50" :isAuto="true">
+    <nut-circleprogress progress="50" :is-auto="true">
     </nut-circleprogress>
 ```
 
@@ -30,6 +30,6 @@
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | -----
 | progress | 百分比 | Number,String | 必传项，无默认值
-| strokeInnerWidth | 圆弧的宽度 | Number,String | 10
-| isAuto | 是否自定义内容显示 | Boolean | false
-| progressOption | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}
+| stroke-inner-width | 圆弧的宽度 | Number,String | 10
+| is-auto | 是否自定义内容显示 | Boolean | false
+| progress-option | 外圆相关参数对象,其中包括半径，宽度，背景颜色，进度色值 | Object | {radius: 50,strokeOutWidth: 10, backColor: '#d9d9d9',progressColor: 'red'}

src/packages/countdown/countdown.vue

@@ -156,6 +156,10 @@ const countdownTimer = {
   },
   created() {
     this.initTimer();
+  },
+  destroyed() {
+    this.timer && clearInterval(this.timer);
+    
   }
 }
 countdownTimer.restTime = restTime;

src/packages/countdown/doc.md

@@ -4,7 +4,7 @@
 
 ```html
 <nut-countdown 
-    :endTime="end"  
+    :end-time="end"  
 >
 </nut-countdown>
 ```
@@ -13,8 +13,8 @@
 
 ```html
 <nut-countdown 
-    :endTime="end" 
-    showDays 
+    :end-time="end" 
+    show-days 
 >
 </nut-countdown>
 ```
@@ -23,9 +23,9 @@
 
 ```html
 <nut-countdown 
-    :startTime="serverTime"
-    :endTime="end" 
-    showDays 
+    :start-time="serverTime"
+    :end-time="end" 
+    show-days 
 >
 </nut-countdown>
 ```
@@ -34,9 +34,9 @@
 
 ```html
 <nut-countdown 
-    showDays 
-    showPlainText 
-    :endTime="end" 
+    show-days 
+    show-plain-text 
+    :end-time="end" 
 >
 </nut-countdown>
 ```
@@ -45,9 +45,9 @@
 
 ```html
 <nut-countdown 
-    showDays 
-    showPlainText 
-    :endTime="asyncEnd" 
+    show-days 
+    show-plain-text 
+    :end-time="asyncEnd" 
 >
 </nut-countdown>
 ```
@@ -56,7 +56,7 @@
 
 ```html
 <nut-countdown 
-    :endTime="end" 
+    :end-time="end" 
     :paused="paused" 
 >
 </nut-countdown>
@@ -66,10 +66,10 @@
 
 | 字段 | 说明 | 类型 | 默认值
 | ----- | ----- | ----- | -----
-| startTime | 开始时间 | String, Number | Date.now()
-| endTime | 结束时间 | String, Number | Date.now()
-| showDays | 是否显示天 | Boolean | false
-| showPlainText | 显示为纯文本 | Boolean | false
+| start-time | 开始时间 | String, Number | Date.now()
+| end-time | 结束时间 | String, Number | Date.now()
+| show-days | 是否显示天 | Boolean | false
+| show-plain-text | 显示为纯文本 | Boolean | false
 | paused | 是否暂停 | Boolean | false
 
 

src/packages/datepicker/datepicker.vue

@@ -23,6 +23,10 @@ export default {
             type: String,
             default: 'date'
         },
+        isSetSecond: {
+            type: Boolean,
+            default: false
+        },
         isVisible: {
             type: Boolean,
             default: true
@@ -39,6 +43,10 @@ export default {
             type: Number,
             default: 1
         },
+        secondStep: {
+            type: Number,
+            default: 1
+        },
         isShowChinese: {
             type: Boolean,
             default: true
@@ -83,7 +91,7 @@ export default {
             updateDay: null,
             updateHour: null,
             use12Hours: ['上午', '下午'], 
-            chinese: !this.isShowChinese ? new Array(5).fill('') : this.type == 'time' ? ['时', '分', ''] : ['年', '月', '日', '时', '分']
+            chinese: !this.isShowChinese ? new Array(6).fill('') : this.type == 'time' ? (this.isUse12Hours ? ['时', '分', ''] : ['时', '分', '秒']) : ['年', '月', '日', '时', '分']
         };
     },
     components: {
@@ -151,6 +159,8 @@ export default {
                     this.cacheListData = [...[this.getHours(), this.getMinutes()]];
                     if (this.isUse12Hours) {
                         this.cacheListData = [...this.cacheListData, this.use12Hours];
+                    } else {
+                        this.cacheListData = this.isSetSecond ? [...this.cacheListData, this.getSeconds()] : [...this.cacheListData];
                     }
                     break;
             }            
@@ -162,7 +172,7 @@ export default {
             if (!this.defaultValue || !Utils.isDateString(this.defaultValue)) { 
                 switch (this.type) {
                     case 'time': 
-                        cacheDefaultValue = `00:00`;
+                        cacheDefaultValue = this.isSetSecond ? `00:00:00` :`00:00`;
                         break;
                     case 'date': 
                     case 'datetime': 
@@ -190,6 +200,7 @@ export default {
                 this.updateHour =  this.cacheDefaultData[3];  
             }
             this.defaultValueData = [...this.cacheDefaultData];
+           
         },
 
         getCacheData(data) {
@@ -327,6 +338,15 @@ export default {
             return minutes.filter(item => item);
         },
 
+        getSeconds() {
+            let seconds = Array.from(Array(60), (v,k) => {
+                if (k == 0 || k % this.secondStep == 0) {
+                    return `${k}${this.type=='time' ? this.chinese[2] : this.chinese[5]}`;
+                }
+            });
+            return seconds.filter(item => item);
+        },
+
         setChooseValue(chooseData) {
             let cacheChooseData = [];
             chooseData.map((item , index) => {
@@ -348,7 +368,7 @@ export default {
                 let week = Utils.getWhatDay(cacheChooseData[0], cacheChooseData[1], cacheChooseData[2]);
                 cacheChooseData.push(week);
             } else {
-                cacheChooseData.push(`${cacheChooseData[0]}:${cacheChooseData[1]}`);
+                cacheChooseData.push(`${cacheChooseData[0]}:${cacheChooseData[1]}${this.isSetSecond ? ':' + cacheChooseData[2] : ''}`);
             }
             this.$emit('choose', cacheChooseData)
         },

src/packages/datepicker/demo.vue

@@ -109,9 +109,10 @@
       title="请选择时间"
       startHour="8"
       endHour="18"
-      defaultValue="09:06"
+      :default-value="time1"
       @close="switchPicker('isVisible4')"
       @choose="setChooseValue4"
+      :is-set-second = "true"
     ></nut-datepicker>
     <!-- demo4-->
     <nut-datepicker
@@ -119,7 +120,7 @@
       type="time"
       title="请选择时间"
       :minute-step="5"
-      defaultValue="10:30"
+      :default-value="time2"
       @close="switchPicker('isVisible5')"
       @choose="setChooseValue5"
     ></nut-datepicker>
@@ -140,7 +141,7 @@ export default {
       date1: null,
       datetime: "2018-11-02 11:08",
       time: "01:07",
-      time1: "09:06",
+      time1: "09:06:02",
       time2: "10:30",
       amOrPm: "PM"
     };
@@ -163,7 +164,7 @@ export default {
       this.time = param[3];
     },
     setChooseValue4(param) {
-      this.time1 = param[2];
+      this.time1 = param[3];
     },
     setChooseValue5(param) {
       this.time2 = param[2];

src/packages/datepicker/doc.md

@@ -156,6 +156,7 @@ export default {
 | endDate | 结束日期 | String | 今天
 | startHour | 开始小时 | Number | 1
 | endHour | 结束小时 | Number | 23
+|isSetSecond| 是否支持秒，仅限type类型为'time'时支持 | Boolean | false
 
 ## Event
 

src/packages/drag/__test__/drag.spec.js

@@ -0,0 +1,51 @@
+// import { shallowMount } from "@vue/test-utils";
+// import Drag from "../Drag.vue";
+// import Vue from "vue";
+
+// describe("Drag.vue", () => {
+//   const wrapper = shallowMount(Drag, {});
+//   it("设置x轴拖拽方向", () => {
+//     wrapper.setProps({
+//       direction: "x",
+//     });
+
+//     return Vue.nextTick().then(function() {
+//       expect(wrapper.find(".nut-drag").isVisible()).toBe(true);
+//     });
+//   });
+
+//   it("设置y轴拖拽方向", () => {
+//     wrapper.setProps({
+//       direction: "y",
+//     });
+
+//     return Vue.nextTick().then(function() {
+//       expect(wrapper.find(".nut-drag").isVisible()).toBe(true);
+//     });
+//   });
+
+//   it("设置自动吸边", () => {
+//     wrapper.setProps({
+//       attract: true,
+//     });
+
+//     return Vue.nextTick().then(function() {
+//       expect(wrapper.find(".nut-drag").isVisible()).toBe(true);
+//     });
+//   });
+
+//   it("设置拖拽边界", () => {
+//     wrapper.setProps({
+//       boundary: {
+//         top: 401,
+//         left: 9,
+//         bottom: document.documentElement.clientHeight - 601,
+//         right: document.documentElement.clientWidth - 300 - 9,
+//       },
+//     });
+
+//     return Vue.nextTick().then(function() {
+//       expect(wrapper.find(".nut-drag").isVisible()).toBe(true);
+//     });
+//   });
+// });

src/packages/drag/demo.vue

@@ -59,7 +59,7 @@ export default {
 }
 .touch-dom {
   height: 30px;
-  padding: 10px;
+  padding: 0 10px;
   line-height: 30px;
   text-align: center;
   color: #fff;

src/packages/scroller/horizontal-scroll.vue

@@ -157,7 +157,7 @@ export default {
 
         touchEnd(event) {
             event.stopPropagation();
-            let changedTouches = event.changedTouches[0];
+            let changedTouches = event.changedTouches[0];       
             this.touchParams.lastTime = event.timestamp || Date.now();
             let moveTime = this.touchParams.lastTime - this.touchParams.startTime;
             this.touchEvent(changedTouches, (move, maxMove) => {

src/packages/scroller/scroller.scss

@@ -10,7 +10,7 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
-    //touch-action: none; 
+    touch-action: none; 
     .nut-hor-list{
         height: 100%;
         width: auto;

src/packages/searchbar/demo.vue

@@ -36,6 +36,7 @@
             <nut-searchbar
 		        placeText="请输入自定义文案"
 		        @submit="search"
+				@focus="focusFun"
 				ref="myInput"
 	        ></nut-searchbar>
         </div>

src/packages/searchbar/doc.md

@@ -51,6 +51,7 @@
 <nut-searchbar
     placeText="请输入自定义文案"
     @submit="search"
+    @focus="focusFun"
     ref="myInput"
 ></nut-searchbar>
 ```

src/packages/searchbar/searchbar.vue

@@ -10,6 +10,7 @@
 					@keyup.enter="submitFun"
 					@input="inputFun"
 					@blur="blurFun"
+					@focus="focusFun"
 					ref="searchInput"
 	    		>
 	    		<span class="close-icon" :class="hasCloseIcon ? 'show':''"
@@ -102,6 +103,7 @@ export default {
     		this.hasCloseIcon = false;
     	},
     	focusFun() {
+			
     		this.inputFocusAnimation = true;
     		this.$emit('focus');
     	},
@@ -122,6 +124,7 @@ export default {
 		},
 		//js控制获取焦点
 		focus() {
+		
 			this.$nextTick(function() {
 				this.$refs.searchInput.focus()
 			})

src/packages/stepper/__test__/stepper.spec.js

@@ -18,7 +18,7 @@ describe('Stepper.vue', () => {
         });
         const input = wraper.find('input');
         expect(wraper.contains('.nut-stepper-grey')).toBe(true);
-        expect(input.attributes('min')).toBe('0');
+        expect(input.attributes('min')).toBe('10');
         expect(input.attributes('max')).toBe(maxVal);
     });
 

src/packages/stepper/stepper.vue

@@ -117,6 +117,14 @@ export default {
                 this.$emit('change', this.num);
             },
             immediate: true
+        },
+        min:{
+            handler(v, ov) {
+                if(v < this.max){
+                    this.minNum = v
+                }
+            },
+            immediate: true
         }
     },
     computed: {