Feature issue 64/75/77 (#90)

* feature(picker):reset picker when cancel

* feature:add maskClosable prop #64

* fix(date-picker):amend defaultDate according to minDate and maxDate #75

* feature(cashier):update channel display logic #77

* feat(tab-picker): add revoke operation feature  when user click the cancel button

* feat(tab-pciker): add async casacade tabpicker initial feature

* feature(action-sheet & selector):add max-height limit prop #86

* fix(tab-picker): recursion breakpoints continue

* fix(cashier):fix unit test error

components/action-sheet/README.md

@@ -27,6 +27,7 @@ Vue.component(ActionSheet.name, ActionSheet)
 |default-index|默认选中项| Boolean| `0`|
 |invalid-index|禁用选择项索引 |Number|`-1`|
 |cancel-text|取消按钮文案 |String |-|
+|max-height|面板最高高度, 超出后可滚动|Number|400|单位`px`|
 
 #### ActionSheet Events
 

components/action-sheet/index.vue

@@ -4,10 +4,11 @@
       v-model="isActionSheetShow"
       position="bottom"
       prevent-scroll
+      :prevent-scroll-exclude="scroller"
       @show="$_onShow"
       @hide="$_onHide"
     >
-      <div class="md-action-sheet-content">
+      <div class="md-action-sheet-content" :style="{maxHeight: `${maxHeight}px`}">
         <header v-if="title">{{ title }}</header>
         <ul>
           <template v-for="(item, index) in options">
@@ -66,12 +67,17 @@ export default {
       type: String,
       default: '取消',
     },
+    maxHeight: {
+      type: Number,
+      default: 400,
+    },
   },
 
   data() {
     return {
       isActionSheetShow: this.value,
       clickIndex: -1,
+      scroller: '',
     }
   },
 
@@ -86,8 +92,17 @@ export default {
   },
 
   methods: {
+    $_setScroller() {
+      const boxer = this.$el ? this.$el.querySelector('.md-action-sheet-content') : null
+      if (boxer && boxer.clientHeight >= this.maxHeight) {
+        this.scroller = '.md-action-sheet-content'
+      } else {
+        this.scroller = ''
+      }
+    },
     // MARK: events handler, 如 $_onButtonClick
     $_onShow() {
+      this.$_setScroller()
       this.$emit('show')
     },
     $_onHide() {
@@ -115,12 +130,12 @@ export default {
   color color-text-base
   -webkit-font-smoothing antialiased
   .md-action-sheet-content
-    overflow hidden
     position relative
     width 100%
     font-size action-sheet-font-size
     background color-bg-base
     text-align center
+    overflow auto
     header
       vertical-height(action-sheet-height)
       padding 0 30px

components/cashier/index.vue

@@ -40,8 +40,18 @@
                   <md-icon :name="item.icon"></md-icon>
                 </i>
                 <span class="item-label" v-html="item.text || item.label"></span>
-                <md-icon name="circle-right" class="item-check" v-if="index === activeChannelIndex"></md-icon>
-                <md-icon name="circle" class="item-check" v-else></md-icon>
+                <template v-if="!isSingle">
+                  <md-icon
+                    v-if="index === activeChannelIndex"
+                    name="circle-right"
+                    class="item-check"
+                  ></md-icon>
+                  <md-icon
+                    v-else
+                    name="circle"
+                    class="item-check"
+                  ></md-icon>
+                </template>
               </li>
             </ul>
             <ul class="choose-channel-list" v-else-if="channels[defaultIndex]">
@@ -50,11 +60,15 @@
                   <md-icon :name="channels[defaultIndex].icon"></md-icon>
                 </i>
                 <span class="item-label" v-html="channels[defaultIndex].text || channels[defaultIndex].label"></span>
-                <md-icon name="circle-right" class="item-check"></md-icon>
+                <md-icon
+                  v-if="!isSingle"
+                  name="circle-right"
+                  class="item-check"
+                ></md-icon>
               </li>
             </ul>
             <div
-              v-if="channels.length"
+              v-if="!isSingle"
               class="choose-channel-more"
               :class="{disabled: isChannelActive}"
               @click="$_onChannelMore"
@@ -210,6 +224,12 @@ export default {
     }
   },
 
+  computed: {
+    isSingle() {
+      return !(this.channels.length > 1)
+    },
+  },
+
   watch: {
     value(val) {
       this.isCashierShow = val
@@ -224,6 +244,11 @@ export default {
 
   created() {
     this.$_initialCashier()
+
+    if (this.channels.length < 3) {
+      this.isChannelShow = true
+      this.isChannelActive = true
+    }
   },
 
   methods: {

components/cashier/rolling.vue

@@ -79,7 +79,7 @@
     doSuccess() {
       const st = this.startTmp
       const et = Date.now()
-      const delay = Math.ceil((et - st) / 2000) * 2000 - (et - st)
+      const delay = Math.ceil((et - st) / 1500) * 1500 - (et - st)
       setTimeout(() => {
         this.successFlag = true
       }, delay)

components/cashier/test/index.spec.js

@@ -45,10 +45,10 @@ describe('Cashier', () => {
     wrapper.vm.channels = channels
     wrapper.vm.defaultIndex = 1
     wrapper.vm.value = true
-    wrapper.vm.$nextTick(() => {
+    setTimeout(() => {
       expect(
         wrapper
-          .find('.choose-channel-item')[0]
+          .find('.choose-channel-item.default')[0]
           .text()
           .trim(),
       ).to.equal(channels[1].text)
@@ -71,7 +71,7 @@ describe('Cashier', () => {
         wrapper.vm.value = false
         done()
       })
-    })
+    }, 500)
   })
 
   it('cashier captcha', done => {

components/date-picker/README.md

@@ -36,6 +36,7 @@ Vue.component(DatePicker.name, DatePicker)
 |title|选择器标题|String|-|-| 
 |ok-text|选择器确认文案|String|`确认`|-| 
 |cancel-text|选择器取消文案|String|`取消`|-| 
+|mask-closable|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
 
 #### DatePicker Methods
 

components/date-picker/index.vue

@@ -10,9 +10,11 @@
       :ok-text="okText"
       :cancel-text="cancelText"
       :is-view="isView"
+      :mask-closable="maskClosable"
       @initialed="$emit('initialed')"
       @change="$_onPickerChange"
       @confirm="$_onPickerConfirm"
+      @cancel="$_onPickerCancel"
       @show="$_onPickerShow"
       @hide="$_onPickerHide"
     ></md-picker>
@@ -133,6 +135,10 @@ export default {
     isView: {
       type: Boolean,
       default: false
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true,
     }
   },
 
@@ -141,6 +147,7 @@ export default {
       isPickerShow: false,
       currentDateIns: new Date(),
       columnData: [],
+      oldColumnData: null,
       columnDataDefault: [],
       columnDataGenerator: [],
       disabledCascadeComlumnIndex: [] // columns do not need cascading 
@@ -235,7 +242,7 @@ export default {
       isSetColumn && this.picker.refresh(null, columnIndex)
     },
     $_initColumnDataGenerator () { 
-      const defaultDate = this.defaultDate     
+      const defaultDate = this.$_getDefaultDate()     
       switch (this.type) {
         case 'date':
           this.$_initColumnDataGeneratorForDate(defaultDate)
@@ -319,6 +326,25 @@ export default {
         this.columnDataDefault.push(hourInfo.ap)
       }
     },
+    $_getDefaultDate () {
+      const defaultDate = this.defaultDate
+      const minDate = this.minDate
+      const maxDate = this.maxDate
+
+      if (!defaultDate) {
+        return defaultDate
+      }
+
+      if (minDate && defaultDate.getTime() < minDate.getTime()) {
+        return minDate
+      }
+
+      if (maxDate && defaultDate.getTime() > maxDate.getTime()) {
+        return maxDate
+      }
+
+      return defaultDate
+    },
     $_generateYearData () {
       const start = this.minDate ? this.minDate.getFullYear() : this.currentYear - 20
       const end = this.maxDate ? this.maxDate.getFullYear() : this.currentYear + 20
@@ -469,6 +495,7 @@ export default {
 
     // MARK: events handler
     $_onPickerShow () {
+      this.oldColumnData = [...this.columnData]
       this.$emit('show')
     },
     $_onPickerHide () {
@@ -489,6 +516,10 @@ export default {
     $_onPickerConfirm (columnsValue) {
       this.$emit('confirm', columnsValue)
     },
+    $_onPickerCancel () {
+      this.$emit('cancel')
+      this.columnData = [...this.oldColumnData]
+    },
 
     getFormatDate (format = 'yyyy-MM-dd hh:mm') {
       const columnValues = this.picker.getColumnValues()

components/picker/README.md

@@ -31,6 +31,7 @@ Vue.component(Picker.name, Picker)
 |title|选择器标题|String|-|-|
 |ok-text|选择器确认文案|String|`确认`|-|
 |cancel-text|选择器取消文案|String|`取消`|-|
+|mask-closable|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
 
 #### Picker Methods
 

components/picker/demo/cases/demo2.vue

@@ -2,26 +2,42 @@
   <div class="md-example-child md-example-child-picker md-example-child-picker-2">
     <md-field>
       <md-field-item
-        name="name"
         title="起保年份"
         arrow="arrow-right"
         align="right"
-        :value="pickerValue"
-        @click.native="isPickerShow = true">
+        :value="pickerValue0"
+        @click.native="isPickerShow0 = true">
+      </md-field-item>
+      <md-field-item
+        title="省市区/县"
+        arrow="arrow-right"
+        align="right"
+        :value="pickerValue1"
+        @click.native="isPickerShow1 = true">
       </md-field-item>
     </md-field>
     <md-picker
-      ref="picker"
-      v-model="isPickerShow"
-      :data="pickerData"
-      @confirm="onPickerConfirm"
+      ref="picker0"
+      v-model="isPickerShow0"
+      :data="pickerData0"
+      @confirm="onPickerConfirm(0)"
       title="选择年份"
     ></md-picker>
+    <md-picker
+      ref="picker1"
+      v-model="isPickerShow1"
+      :data="pickerData1"
+      :cols="3"
+      is-cascade
+      title="选择省市区/县"
+      @confirm="onPickerConfirm(1)"
+    ></md-picker>
   </div>
 </template>
 
 <script>import {Picker, Field, FieldItem} from 'mand-mobile'
 import simple from 'mand-mobile/components/picker/demo/data/simple'
+import district from 'mand-mobile/components/picker/demo/data/district'
 
 export default {
   name: 'picker-demo',
@@ -36,20 +52,23 @@ export default {
   },
   data() {
     return {
-      isPickerShow: false,
-      pickerData: simple,
-      pickerValue: '',
+      isPickerShow0: false,
+      isPickerShow1: false,
+      pickerData0: simple,
+      pickerData1: district,
+      pickerValue0: '',
+      pickerValue1: '',
     }
   },
   methods: {
-    onPickerConfirm() {
-      const values = this.$refs['picker'].getColumnValues()
+    onPickerConfirm(index) {
+      const values = this.$refs[`picker${index}`].getColumnValues()
 
       let res = ''
       values.forEach(value => {
-        value && (res += `${value.text} `)
+        value && (res += `${value.text || value.label} `)
       })
-      this.pickerValue = res
+      this[`pickerValue${index}`] = res
     },
   },
 }