mali-applet-ui 1.0.154 → 1.0.156

package/lib/components/ml-calendar/calendar.js

@@ -0,0 +1,145 @@
+import XEUtils from 'xe-utils'
+
+// 判断是否是闰年,
+const isLeapYear = (year) => {
+  if (year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
+    return true
+  }
+  return false
+}
+
+// 获取当前月份的总天数
+const totalDaysByDate = (date) => {
+  const today = new Date(date)
+  const year = today.getFullYear()
+  const month = today.getMonth() + 1
+  let monthDay = 31
+  switch (month) {
+    case 1: monthDay = 31; break
+    case 2:
+      if (isLeapYear(year)) { monthDay = 29 } else { monthDay = 28 }
+      break
+    case 3: monthDay = 31; break
+    case 4: monthDay = 30; break
+    case 5: monthDay = 31; break
+    case 6: monthDay = 30; break
+    case 7: monthDay = 31; break
+    case 8: monthDay = 31; break
+    case 9: monthDay = 30; break
+    case 10: monthDay = 31; break
+    case 11: monthDay = 30; break
+    case 12: monthDay = 31; break
+  }
+  return monthDay
+}
+
+// 获取当前月份数据
+const getDaysByDate = (date) => {
+  // 获取总天数
+  const totalDays = totalDaysByDate(date)
+  const days = []
+  const thisMonth = new Date(date)
+  const todayDate = new Date()
+  const today = XEUtils.toDateString(todayDate, 'yyyy-MM-dd')
+  for (let i = 1; i <= totalDays; i++) {
+    thisMonth.setDate(i)
+    const dateFormat = {
+      date: XEUtils.toDateString(thisMonth, 'yyyy-MM-dd'),
+      day: XEUtils.toDateString(thisMonth, 'd'),
+      statusList: []
+    }
+    if (dateFormat.date === today) {
+      dateFormat.isToday = true
+    } else {
+      if (todayDate.getTime() < thisMonth.getTime()) {
+        dateFormat.isNotYet = true
+      }
+    }
+    days.push(dateFormat)
+  }
+  const { previousMonth, nextMonth } = completion(date)
+  return [...previousMonth, ...days, ...nextMonth]
+}
+
+// 获取这个月的第一天和左后一天
+const getMonthInfo = (date) => {
+  const designatedDate = new Date(date)
+  const nowMonth = designatedDate.getMonth() // 当前月
+  const nowYear = designatedDate.getFullYear() // 当前年
+  // 本月的开始时间
+  const monthStartDate = new Date(nowYear, nowMonth, 1)
+  // 本月的结束时间
+  const monthEndDate = new Date(nowYear, nowMonth + 1, 0)
+  return {
+    start: monthStartDate,
+    end: monthEndDate
+  }
+}
+// 补全开头和结尾
+const completion = (date) => {
+  const { start: startDate, end: endDate } = getMonthInfo(date)
+  const startWeek = startDate.getDay()
+  const endWeek = endDate.getDay()
+  const startDifference = startWeek
+  const endDifference = 7 - endWeek
+  const previousMonth = []
+  const nextMonth = []
+  const todayDate = new Date()
+  const today = XEUtils.toDateString(todayDate, 'yyyy-MM-dd')
+  for (let i = startDifference; i > 0; i--) {
+    let needDate = new Date(startDate.getTime())
+    needDate = needDate.setDate(needDate.getDate() - i)
+    needDate = new Date(needDate)
+    const dateFormat = {
+      date: XEUtils.toDateString(needDate, 'yyyy-MM-dd'),
+      day: XEUtils.toDateString(needDate, 'd'),
+      statusList: [],
+      isLastMonth: true
+    }
+    if (dateFormat.date === today) {
+      dateFormat.isToday = true
+    } else {
+      if (todayDate.getTime() < needDate.getTime()) {
+        dateFormat.isNotYet = true
+      }
+    }
+    previousMonth.push(dateFormat)
+  }
+  for (let i = 1; i < endDifference; i++) {
+    let needDate = new Date(endDate.getTime())
+    needDate = needDate.setDate(needDate.getDate() + i)
+    needDate = new Date(needDate)
+    const dateFormat = {
+      date: XEUtils.toDateString(needDate, 'yyyy-MM-dd'),
+      day: XEUtils.toDateString(needDate, 'd'),
+      statusList: [],
+      isNextMonth: true
+    }
+    if (dateFormat.date === today) {
+      dateFormat.isToday = true
+    } else {
+      if (todayDate.getTime() < needDate.getTime()) {
+        dateFormat.isNotYet = true
+      }
+    }
+    nextMonth.push(dateFormat)
+  }
+  return {
+    previousMonth,
+    nextMonth
+  }
+}
+
+// 获取日历数据
+export const Calendar = (date) => {
+  return getDaysByDate(date)
+}
+
+// 每组多少
+export const GroupArray = (list, num) => {
+  const arr = []
+  for (let i = 0; i < list.length; i += 7) {
+    arr.push(list.slice(i, i + 7))
+  }
+  return arr
+}

package/lib/components/ml-calendar/ml-calendar.vue

@@ -0,0 +1,331 @@
+<template>
+  <view class="ml-calendar" :class="{'is-fold': isfold}">
+    <view class="ml-calendar-header">
+      <button class="ml-calendar-header-button" @tap="onLastMonth">
+        <ml-icon class="text-bold" name="arrow-left"></ml-icon>
+      </button>
+      <view class="ml-calendar-header-title">
+        <slot name="title">
+          <text>{{ monthTitle }}</text>
+        </slot>
+      </view>
+      <button class="ml-calendar-header-button" @tap="onNextMonth" :disabled="!isAfterMonth">
+        <ml-icon class="text-bold" name="arrow-right"></ml-icon>
+      </button>
+    </view>
+
+    <view class="ml-calendar-body" @touchstart="touchstartEvent" @touchend="touchendEvent">
+      <view class="ml-calendar-date-head">
+        <view class="ml-calendar-week-item" v-for="(week, index) in weekList" :key="index">
+          <view class="ml-calendar-week-box">{{ week }}</view>
+        </view>
+      </view>
+
+      <view class="ml-calendar-date-content" :style="contentStyle">
+        <view class="ml-calendar-date-week-list" v-for="(list, index) in months" :key="index">
+          <view class="ml-calendar-date-day-item" v-for="(item, key) in list" :key="key" @tap="onSelect(item)">
+            <view class="ml-calendar-date-day-box" :class="{'today': item.isToday, 'last-month': item.isLastMonth, 'next-month': item.isNextMonth, 'selected': selectDay === item.date, 'not-yet': item.isNotYet, 'disabled': item.disabled}">
+              <view class="ml-calendar-date-box-warpper">
+                <view class="ml-calendar-date-day-text" :class="{'today': item.isToday}" v-if="item.isToday">今天</view>
+                <view class="ml-calendar-date-day-text" v-else>{{ item.day }}</view>
+                <view class="ml-calendar-date-day-dots">
+                  <view class="ml-calendar-date-day-status" v-for="(status, sIndex) in item.statusList" :key="sIndex" :class="[`ss-${status}`]"></view>
+                </view>
+                <view class="ml-calendar-date-day-dots">
+                  <view class="ml-calendar-date-day-status" :style="{ backgroundColor: item.color }" v-if="item.color"></view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="ml-calendar-fold-btn" @tap="toggleFold">
+        <ml-icon :name="isfold ? 'arrow-down' : 'arrow-top'"></ml-icon>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { Calendar, GroupArray } from './calendar.js'
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'MlCalendar',
+  props: {
+    value: String,
+    scheduleMethod: Function
+  },
+  inject: {
+    currVM: {
+      from: '$pageVM',
+      default: null
+    }
+  },
+  data () {
+    return {
+      isfold: false,
+      selectMonth: new Date(),
+      weekList: ['日', '一', '二', '三', '四', '五', '六'],
+      months: [],
+      selectDay: ''
+    }
+  },
+  computed: {
+    monthTitle () {
+      return XEUtils.toDateString(this.selectMonth, 'yyyy年MM月')
+    },
+    contentStyle () {
+      const lineHeight = 80
+      if (this.isfold) {
+        return `height: ${lineHeight}rpx;`
+      }
+      return `height: ${(this.months.length || 5) * lineHeight}rpx;`
+    },
+    // 判断是否可进行下一月的切换
+    isAfterMonth () {
+      return true
+    }
+  },
+  watch: {
+    value () {
+      this.updateDate()
+    }
+  },
+  mounted () {
+    this.updateDate()
+    this.updateCalendar()
+  },
+  methods: {
+    updateDate () {
+      const currVal = XEUtils.toStringDate(this.value || new Date())
+      this.selectDay = XEUtils.toDateString(currVal, 'yyyy-MM-dd')
+      this.selectMonth = currVal
+    },
+    loadsChedule () {
+      if (this.scheduleMethod) {
+        Promise.resolve(this.scheduleMethod.call(this.currVM, { currMonth: this.selectMonth })).then(rest => {
+          if (rest) {
+            const dateMaps = {}
+            rest.forEach(item => {
+              dateMaps[item.date] = item
+            })
+            this.months.forEach(list => {
+              list.forEach(item => {
+                if (dateMaps[item.date]) {
+                  const status = dateMaps[item.date].status
+                  item.statusList = (XEUtils.isArray(status) ? status : [status]).slice(0, 2)
+                }
+              })
+            })
+          }
+        })
+      }
+    },
+    updateCalendar (date) {
+      if (!date) {
+        date = this.value
+      }
+      if (!date) {
+        date = new Date()
+      }
+      const dates = Calendar(this.selectMonth)
+      this.months = GroupArray(dates, 7)
+      this.loadsChedule()
+    },
+    toggleFold () {
+      this.isfold = !this.isfold
+    },
+    onSelect (item) {
+      if (item.disabled) {
+        return false
+      }
+      const value = item.date
+      this.selectDay = value
+      this.selectMonth = XEUtils.toStringDate(value)
+      if (item.isLastMonth) {
+        this.initCalendar()
+      } else if (item.isNextMonth) {
+        this.initCalendar()
+      }
+      this.$emit('input', value)
+      this.$emit('click', { value })
+    },
+    onLastMonth () {
+      this.selectMonth = XEUtils.getWhatMonth(this.selectMonth, -1)
+      this.updateCalendar()
+    },
+    onNextMonth () {
+      this.selectMonth = XEUtils.getWhatMonth(this.selectMonth, 1)
+      this.updateCalendar()
+    },
+    touchstartEvent (e) {
+      this.startPoint = e.changedTouches[0]
+    },
+    touchendEvent (e) {
+      const startPoint = this.startPoint
+      const endPoint = e.changedTouches[0]
+      if (startPoint.clientX > endPoint.clientX + 60) {
+        this.onLastMonth()
+      } else if (startPoint.clientX < endPoint.clientX - 60) {
+        this.onNextMonth()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-calendar {
+  width: 100%;
+  padding: 30rpx;
+  background-color: #FFFFFF;
+  .ml-calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10rpx;
+    .ml-calendar-header-title {
+      flex: 1;
+      text-align: center;
+      margin: 0 30rpx;
+      font-size: 40rpx;
+      font-weight: bolder;
+    }
+    .ml-calendar-header-button {
+      border: 1px solid #dddddd;
+      padding: 10rpx;
+      border-radius: 8rpx;
+      text-align: center;
+      margin: 0;
+    }
+  }
+
+  .ml-calendar-date-head {
+    display: flex;
+    align-items: center;
+    margin: 0 -10rpx;
+    margin-bottom: 10rpx;
+    .ml-calendar-week-item {
+      flex-grow: 1;
+      .ml-calendar-week-box {
+        color: #999999;
+        text-align: center;
+        width: 60rpx;
+        height: 60rpx;
+        margin: auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+
+  .ml-calendar-date-content {
+    height: 500rpx;
+    overflow: hidden;
+    transition: height 0.3s ease-out;
+    .ml-calendar-date-week-list {
+      display: flex;
+      align-items: center;
+      margin: 0 -10rpx;
+      margin-bottom: 10rpx;
+      .ml-calendar-date-day-item {
+        flex-grow: 1;
+      }
+      .ml-calendar-date-day-box {
+        width: 64rpx;
+        height: 72rpx;
+        border-radius: 8rpx;
+        margin: auto;
+        border: 2px solid transparent;
+        .ml-calendar-date-box-warpper {
+          width: 100%;
+          height: 100%;
+          .ml-calendar-date-day-text {
+            font-weight: 500;
+            font-size: 32rpx;
+            text-align: center;
+            line-height: 36rpx;
+            &.today {
+              font-size: 22rpx;
+            }
+          }
+          .ml-calendar-date-day-dots {
+            width: 100%;
+            line-height: 24rpx;
+            text-align: center;
+          }
+          .ml-calendar-date-day-status {
+            display: inline-block;
+            width: 15rpx;
+            height: 15rpx;
+            margin: 0 5rpx;
+            border-radius: 50%;
+            &.ss-primary {
+              background-color: $ml-theme-primary-color;
+            }
+            &.ss-success {
+              background-color: $ml-theme-success-color;
+            }
+            &.ss-info {
+              background-color: #909399;
+            }
+            &.ss-warning {
+              background-color: $ml-theme-warning-color;
+            }
+            &.ss-danger {
+              background-color: $ml-theme-error-color;
+            }
+            &.ss-gray {
+              background-color: $ml-gray-color;
+            }
+            &.ss-blue {
+              background-color: $ml-blue-color;
+            }
+            &.ss-green {
+              background-color: $ml-green-color;
+            }
+            &.ss-pink {
+              background-color: $ml-pink-color;
+            }
+            &.ss-orange {
+              background-color: $ml-orange-color;
+            }
+            &.ss-purple {
+              background-color: $ml-purple-color;
+            }
+          }
+        }
+        &.selected {
+          border-color: #2497FF;
+        }
+        &.selected {
+          border-color: #2497FF;
+        }
+        &.today {
+          .ml-calendar-date-box-warpper {
+            background-color: #c6e4ff;
+            border-radius: 8rpx;
+            .ml-calendar-date-day-text {
+              color: #2497FF;
+            }
+          }
+        }
+        &.last-month,
+        &.next-month,
+        &.disabled {
+          .ml-calendar-date-day-text {
+            color: rgba(23, 26, 29, 0.4);
+          }
+        }
+      }
+    }
+  }
+
+  .ml-calendar-fold-btn {
+    text-align: center;
+  }
+}
+</style>

package/lib/components/ml-drawer/ml-drawer.vue

@@ -188,7 +188,7 @@ export default {
     align-items: center;
     padding: 10rpx 20rpx;
     min-height: 90rpx;
-    font-size: $uni-font-size-lg;
+    font-size: 32rpx;
   }
   .ml-drawer-header-title {
     text-align: center;

package/lib/components/ml-fix-uni-datetime-picker/calendar-item.vue

@@ -62,8 +62,6 @@ export default {
 </script>
 
 <style lang="scss" >
-  $uni-primary: #007aff !default;
-
   .uni-calendar-item__weeks-box {
     flex: 1;
     /* #ifndef APP-NVUE */
@@ -80,7 +78,7 @@ export default {
     font-size: 14px;
     // font-family: Lato-Bold, Lato;
     font-weight: bold;
-    color: darken($color: $uni-primary, $amount: 40%);
+    color: darken($color: $ml-theme-primary-color, $amount: 40%);
   }
 
   .uni-calendar-item__weeks-lunar-text {
@@ -115,7 +113,6 @@ export default {
   }
 
   .uni-calendar-item__weeks-box .uni-calendar-item--disable {
-    // background-color: rgba(249, 249, 249, $uni-opacity-disabled);
     cursor: default;
   }
 
@@ -139,7 +136,7 @@ export default {
   }
 
   .uni-calendar-item__weeks-box .uni-calendar-item--checked {
-    background-color: $uni-primary;
+    background-color: $ml-theme-primary-color;
     border-radius: 50%;
     box-sizing: border-box;
     border: 3px solid #fff;
@@ -160,7 +157,7 @@ export default {
 
   .uni-calendar-item--multiple .uni-calendar-item--before-checked,
   .uni-calendar-item--multiple .uni-calendar-item--after-checked {
-    background-color: $uni-primary;
+    background-color: $ml-theme-primary-color;
     border-radius: 50%;
     box-sizing: border-box;
     border: 3px solid #F6F7FC;

package/lib/components/ml-fix-uni-datetime-picker/calendar.vue

@@ -619,8 +619,6 @@ export default {
 </script>
 
 <style lang="scss" >
-  $uni-primary: #007aff !default;
-
   .uni-calendar {
     /* #ifndef APP-NVUE */
     display: flex;
@@ -731,7 +729,7 @@ export default {
     text-align: center;
     width: 100px;
     font-size: 14px;
-    color: $uni-primary;
+    color: $ml-theme-primary-color;
     /* #ifndef APP-NVUE */
     letter-spacing: 3px;
     /* #endif */
@@ -909,7 +907,7 @@ export default {
     border-radius: 100px;
     height: 40px;
     line-height: 40px;
-    background-color: $uni-primary;
+    background-color: $ml-theme-primary-color;
     color: #fff;
     font-size: 16px;
     letter-spacing: 2px;

package/lib/components/ml-fix-uni-datetime-picker/ml-fix-uni-datetime-picker.vue

@@ -796,8 +796,6 @@ export default {
 </script>
 
 <style lang="scss">
-  $uni-primary: #007aff !default;
-
   .uni-date {
     /* #ifndef APP-NVUE */
     width: 100%;
@@ -956,14 +954,14 @@ export default {
   }
 
   .popup-x-footer text:hover {
-    color: $uni-primary;
+    color: $ml-theme-primary-color;
     cursor: pointer;
     opacity: 0.8;
   }
 
   .popup-x-footer .confirm {
     margin-left: 20px;
-    color: $uni-primary;
+    color: $ml-theme-primary-color;
   }
 
   .uni-date-changed {

package/lib/components/ml-fix-uni-datetime-picker/time-picker.vue

@@ -788,8 +788,6 @@ export default {
 </script>
 
 <style lang="scss">
-  $uni-primary: #007aff !default;
-
   .uni-datetime-picker {
     /* #ifndef APP-NVUE */
     /* width: 100%; */
@@ -823,7 +821,7 @@ export default {
 
   .uni-datetime-picker-btn-text {
     font-size: 14px;
-    color: $uni-primary;
+    color: $ml-theme-primary-color;
   }
 
   .uni-datetime-picker-btn-group {

package/lib/components/ml-list-group/ml-list-group.vue

@@ -270,7 +270,7 @@ export default {
 <style lang="scss">
 .ml-list-group {
   margin-bottom: $ml-page-interval-margin;
-  color: $uni-text-color;
+  color: $ml-font-color;
   font-size: $ml-base-font-size;
   .ml-list-group-content {
     display: flex;

package/lib/components/ml-list-select-group/ml-list-select-group.vue

@@ -200,7 +200,7 @@ export default {
 <style lang="scss">
 .ml-list-select-group {
   margin-bottom: $ml-page-interval-margin;
-  color: $uni-text-color;
+  color: $ml-font-color;
   font-size: $ml-base-font-size;
   display: flex;
   flex-direction: column;

package/lib/components/ml-list-select-user-page/ml-list-select-user-page.vue

@@ -215,7 +215,7 @@ export default {
     cursor: pointer;
     // #endif
     .ml-list-select-user-add-item {
-      color: $uni-text-color-disable;
+      color: #c0c0c0;
     }
   }
   .ml-list-select-user-avatar {

package/lib/components/ml-modal/ml-modal.vue

@@ -159,7 +159,7 @@ export default {
     align-items: center;
     padding: 10rpx 20rpx;
     min-height: 90rpx;
-    font-size: $uni-font-size-lg;
+    font-size: 32rpx;
   }
   .ml-modal-header-title {
     flex-grow: 1;

package/lib/components/ml-navbar/ml-navbar.vue

@@ -56,7 +56,7 @@ export default {
   width: 100%;
   height: 90rpx;
   line-height: 90rpx;
-  color: $uni-text-color;
+  color: $ml-font-color;
   background: #FFFFFF;
   .ml-navbar-left-warpper {
     height: 100%;
@@ -92,4 +92,4 @@ export default {
     font-size: 30rpx;
   }
 }
-</style>
+</style>

package/lib/components/ml-tabbar/ml-tabbar.vue

@@ -75,7 +75,7 @@ export default {
   position: fixed;
   z-index: 20;
   padding: 6rpx 0 12rpx 0;
-  color: $uni-text-color;
+  color: $ml-font-color;
   background: #FFFFFF;
   &.is-vertical {
     flex-direction: column;

package/lib/components/ml-table/ml-table.vue

@@ -182,13 +182,20 @@ export default {
       return column.cellRender.props ? column.cellRender.props.activeColor : ''
     },
     getHeaderCellClass (params) {
+      const { column } = params
+      const clss = []
+      const showOverflow = XEUtils.isBoolean(column.showOverflow) ? column.showOverflow : this.showOverflow
+      if (showOverflow) {
+        clss.push('is-ellipsis')
+      }
       if (this.headerCellClass) {
         if (XEUtils.isFunction(this.headerCellClass)) {
-          return this.headerCellClass.call(this.currVM, params)
+          clss.push(this.headerCellClass.call(this.currVM, params))
+        } else {
+          clss.push(`${this.headerCellClass}`)
         }
-        return `${this.headerCellClass}`
       }
-      return ''
+      return clss.join(' ')
     },
     getHeaderCellValue (params) {
       const { row, column } = params
@@ -342,7 +349,6 @@ export default {
     background: #fff;
     .table-td {
       height: 84rpx;
-      line-height: 84rpx;
     }
   }
   .table-th {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.0.154",
+  "version": "1.0.156",
   "description": "码里云小程序组件库",
   "files": [
     "lib",

package/theme.scss

@@ -11,15 +11,15 @@ $ml-theme-warning-color: #f0ad4e;
 $ml-theme-error-color: #dd524d;
 
 //  字体
-$ml-base-font-size: 34rpx;
+$ml-base-font-size: 17px;
 // 副标题字体
-$ml-subhead-font-size: 30rpx;
+$ml-subhead-font-size: 15px;
 // 描述字体
-$ml-describe-font-size: 28rpx;
+$ml-describe-font-size: 14px;
 
 // 页面间隔宽度
-$ml-page-interval-margin: 16rpx;
-$ml-page-toolbar-left-width: 120rpx;
+$ml-page-interval-margin: 8px;
+$ml-page-toolbar-left-width: 60px;
 
 // 全局色调
 $ml-gray-color: #F0F2F5;
@@ -31,11 +31,11 @@ $ml-purple-color: #9747FF;
 $ml-white-color: #ffffff;
 
 // 边框圆角
-$ml-border-radius: 8rpx;
+$ml-border-radius: 4px;
 // 按钮间隔宽度
-$ml-button-interval-margin: 16rpx;
+$ml-button-interval-margin: 8px;
 // 输入框清除按钮颜色
 $ml-input-clear-icon-color:  rgba(23, 26, 29, 0.4);
-$ml-input-clear-icon-font-size: 44rpx;
+$ml-input-clear-icon-font-size: 22px;
 // 输入框提示文本颜色
 $ml-input-color-placeholder: rgba(23, 26, 29, 0.7);