mali-applet-ui 0.1.98 → 0.2.1

package/components/ml-checkbox-button/ml-checkbox-button.vue

@@ -1,6 +1,5 @@
 <template>
 	<view class="ml-checkbox-button" :class="[className || '', {'is-disabled': disabled}]">
-    <view v-if="isAll" class="ml-checkbox-button-item" @tap="changeAllEvent">全部/取消</view>
     <view class="ml-checkbox-button-item" v-for="(item, index) in optionList" :class="{'is-disabled': disabled, 'is-active': value.includes(item.value)}" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
   </view>
 </template>
@@ -24,11 +23,6 @@ export default {
     }
   },
 	methods: {
-    changeAllEvent () {
-      const value = this.value.length >= this.optionList.length ? [] : this.optionList.map(option => option.value)
-			this.$emit('input', value)
-			this.$emit('change', { value })
-    },
 		changeEvent (option) {
       if (this.disabled) {
         return

package/components/ml-date-quick-range-picker/ml-date-quick-range-picker.vue

@@ -0,0 +1,119 @@
+<template>
+  <view class="ml-date-quick-range-picker" :class="className">
+    <view class="ml-date-quick-range-picker-left">
+      <ml-select-picker v-model="selectType" :options="typeList" :border="border" @change="changeTypeEvent"></ml-select-picker>
+    </view>
+    <view class="ml-date-quick-range-picker-right">
+      <uni-datetime-picker v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable"/>
+    </view>
+  </view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'MlDateQuickRangePicker',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    defaultType: Number,
+    border: Boolean,
+    startDate: String,
+    endDate: String,
+    minDate: [String, Number],
+    maxDate: [String, Number],
+    clearable: Boolean,
+    className: String
+  },
+  data () { 
+    return {
+      selectType: 0,
+      selectDates: []
+    }
+  },
+  computed: {
+    typeList () {
+      return [
+        { label: '周', value: 1 },
+        { label: '月', value: 2 },
+        { label: '年', value: 3 },
+        { label: '自定义', value: 0 }
+      ]
+    }
+  },
+  watch: {
+    startDate () {
+      this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
+    }
+  },
+  created () {
+    if (this.startDate) {
+      this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
+    }
+    if (this.defaultType) {
+      this.selectType = this.defaultType
+      this.$nextTick(() => {
+        if (!this.startDate) {
+          this.changeTypeEvent()
+        }
+      })
+    }
+  },
+  methods: {
+    changeTypeEvent () {
+      let startStr = ''
+      let enStr = ''
+      if (this.selectType === 0) {
+        return
+      }
+      if (this.selectType !== null) {
+        let startDate = new Date()
+        const endDate = new Date()
+        switch (this.selectType) {
+          case 1:
+            startDate = XEUtils.getWhatWeek(endDate, -1)
+            break
+          case 2:
+            startDate = XEUtils.getWhatDay(XEUtils.getWhatMonth(endDate, -1), 1)
+            break
+          case 3:
+            startDate = XEUtils.getWhatDay(XEUtils.getWhatYear(endDate, -1), 1)
+            break
+        }
+        startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd')
+        enStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd')
+      }
+      this.selectDates = startStr && enStr ? [startStr, enStr] : []
+      this.$emit('update:startDate', startStr)
+      this.$emit('update:endDate', enStr)
+      this.$emit('change', { startDate: startStr, endDate: enStr })
+    },
+    changeEvent (value) {
+      const [startDate, endDate] = value
+      if (!startDate || !endDate) {
+        this.selectType = 0
+      }
+      this.$emit('update:startDate', startDate || '')
+      this.$emit('update:endDate', endDate || '')
+      this.$emit('change', { startDate, endDate })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-date-quick-range-picker {
+  display: flex;
+  flex-direction: row;
+  .ml-date-quick-range-picker-left {
+    width: 170rpx;
+    flex-shrink: 0;
+  }
+  .ml-date-quick-range-picker-right {
+    flex-grow: 1;
+    margin-left: 16rpx;
+  }
+}
+</style>

package/components/ml-date-range-picker/ml-date-range-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clear"/>
+  <uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable"/>
 </template>
 
 <script>
@@ -14,10 +14,7 @@ export default {
     endDate: String,
     minDate: [String, Number],
     maxDate: [String, Number],
-    clear: {
-      type: Boolean,
-      default: true
-    },
+    clearable: Boolean,
     className: String
   },
   data () { 

package/components/ml-datetime-picker/ml-datetime-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="minDate" :end="maxDate" :hide-second="hideSecond" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="minDate" :end="maxDate" :hide-second="hideSecond" @change="changeEvent" :border="border" :clear-icon="clearable" />
 </template>
 
 <script>
@@ -13,6 +13,7 @@ export default {
     border: Boolean,
     minDate: [String, Number],
     maxDate: [String, Number],
+    clearable: Boolean,
     hideSecond: Boolean,
     className: String
   },

package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="minDate" :end="maxDate" @change="changeEvent" :border="border" :clear-icon="clearable" />
 </template>
 
 <script>
@@ -15,6 +15,7 @@ export default {
     endDate: String,
     minDate: [String, Number],
     maxDate: [String, Number],
+    clearable: Boolean,
     className: String
   },
   data () {

package/components/ml-radio-button/ml-radio-button.vue

@@ -23,7 +23,7 @@ export default {
         return [
           {
             label: '全部',
-            value: ''
+            value: null
           }
         ].concat(this.options)
       }

package/components/ml-select-picker/ml-select-picker.vue

@@ -2,7 +2,7 @@
 	<view v-if="isFromReadonly" class="ml-select-picker is-readonly">
 		<view class="ml-select-picker-readonly-content">{{ selectLabel }}</view>
 	</view>
-  <picker v-else class="ml-select-picker" mode="selector" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
+  <picker v-else class="ml-select-picker" mode="selector" :value="selectIndex" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
     <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border, 'is-clear': value !== null}]">
       <view class="ml-select-picker-text">
         <text v-if="value !== null">{{ selectLabel }}</text>
@@ -49,6 +49,7 @@ export default {
   },
   data () {
     return {
+      selectIndex: 0
     }
   },
   computed: {
@@ -83,10 +84,29 @@ export default {
       return this.optOptions.value || 'value'
     }
   },
+  watch: {
+    value () {
+      this.updateSelectStatus()
+    },
+    optionList () {
+      this.updateSelectStatus()
+    }
+  },
+  created () {
+    this.updateSelectStatus()
+  },
   methods: {
+    updateSelectStatus () {
+      const index = XEUtils.findIndexOf(this.optionList, item => String(item[this.optValueField]) === String(this.value))
+      this.selectIndex = index === -1 ? 0 : index
+    },
     changeEvent (e) {
       const index = e.detail.value
+      if (index === this.selectIndex) {
+        return
+      }
       const item = this.optionList[index]
+      this.selectIndex = index
       let value = null
       if (item) {
         value = item[this.optValueField]
@@ -135,7 +155,6 @@ export default {
 }
 .ml-select-picker-text {
   flex-grow: 1;
-  padding-right: 10rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -151,7 +170,6 @@ export default {
   border-radius: 0 $ml-border-radius $ml-border-radius 0;
 }
 .ml-select-picker-icon {
-  width: 60rpx;
   display: flex;
   flex-shrink: 0;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.1.98",
+  "version": "0.2.1",
   "description": "码里云小程序组件库",
   "scripts": {
     "release": "node script/release.js && npm publish"