mali-applet-ui 1.0.80 → 1.0.82

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

@@ -1,8 +1,8 @@
 <template>
-  <view v-if="isFromReadonly" class="ml-input is-readonly" :class="[className || '', {'is-right': align === 'right'}]">
+  <view v-if="isFromReadonly" class="ml-input is-readonly" :class="[className || '', {'is-right': align === 'right'}]" @tap="tapEvent">
     <view class="ml-input-readonly-content">{{ inpVal }}</view>
   </view>
-  <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
+  <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]" @tap="tapEvent">
     <view class="ml-input-simulate">
       <text v-if="inpVal">{{ inpVal }}</text>
       <text v-else class="ml-input-placeholder">{{ placeholder }}</text>
@@ -24,6 +24,7 @@
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
+      @tap="tapEvent"
       @input="inputEvent"
       @focus="focusEvent"
       @blur="blurEvent"
@@ -116,6 +117,10 @@ export default {
       this.$emit('input', value)
       this.$emit('change', { value })
     },
+    tapEvent () {
+      this.$emit('tap', {})
+      this.$emit('click', {})
+    },
     focusEvent () {
       this.$emit('focus', { value: this.inpVal })
     },
@@ -141,7 +146,7 @@ export default {
   display: flex;
   flex-direction: row;
   .ml-input-placeholder {
-    color: $ml-input-color-placeholder;;
+    color: $ml-input-color-placeholder;
   }
   .ml-input-simulate {
     padding: 0 10rpx;

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

@@ -36,6 +36,7 @@ export default {
     vertical: Boolean,
     showPage: Boolean,
     autoload: Boolean,
+    border: Boolean,
     prefixIcon: String,
     height: String,
     pageProps: Object,

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-list-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-padding': padding, 'is-vertical': itemVertical, 'is-disabled': disabled}]" :style="styles" @click="clickEvent" @tap="tapEvent">
+  <view class="ml-list-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-border': itemBorder,  'is-padding': padding, 'is-vertical': itemVertical, 'is-disabled': disabled}]" :style="styles" @click="clickEvent" @tap="tapEvent">
     <view v-if="itemType === 'checkbox'" class="ml-list-checkbox-icon">
       <ml-checkbox :value="hasCheckedChecked" :disabled="disabled"></ml-checkbox>
     </view>
@@ -53,6 +53,10 @@ export default {
     className: String
   },
   inject: {
+    listSelectGroup: {
+      from: 'mlListSelectGroup',
+      default: null
+    },
     listGroup: {
       from: 'mlListGroup',
       default: null
@@ -79,11 +83,20 @@ export default {
       return this.selection.includes(this.value)
     },
     hasRadioChecked () {
+      if (this.listSelectGroup) {
+        return this.listSelectGroup ? this.listSelectGroup.selectValue : null
+      }
       return this.listGroup ? this.listGroup.selectValue : null
     },
     selection () {
+      if (this.listSelectGroup) {
+        return this.listSelectGroup ? this.listSelectGroup.selection : null
+      }
       return this.listGroup ? this.listGroup.selection : []
     },
+    itemBorder () {
+      return this.listGroup ? this.listGroup.border : null
+    },
     itemVertical () {
       if (this.vertical) {
         return true
@@ -91,6 +104,9 @@ export default {
       return this.listGroup ? this.listGroup.vertical : false
     },
     itemType () {
+      if (this.listSelectGroup) {
+        return this.listSelectGroup ? this.listSelectGroup.type : null
+      }
       return this.listGroup ? this.listGroup.type : ''
     }
   },
@@ -133,7 +149,9 @@ export default {
       if (this.disabled) {
         return
       }
-      if (this.listGroup) {
+      if (this.listSelectGroup) {
+        this.listSelectGroup.triggerItemEvent({ value: this.value })
+      } else if (this.listGroup) {
         this.listGroup.triggerItemEvent({ value: this.value })
       }
       if (this.url) {
@@ -162,6 +180,12 @@ export default {
   border-radius: $ml-border-radius;
   background: #ffffff;
   font-size: $ml-describe-font-size;
+  &.is-border {
+    border-bottom: 1px solid #e5e5e5;
+    &:first-child {
+      border-top: 1px solid #e5e5e5;
+    }
+  }
   &.is-disabled {
     opacity: 0.5;
     // #ifdef H5

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

@@ -27,10 +27,12 @@ export default {
     },
     isAllChecked: Boolean,
     isAllIndeterminate: Boolean,
+    optionProps: Object,
     type: String,
     vertical: Boolean,
     prefixIcon: String,
     height: String,
+    options: Array,
     className: String
   },
   data () {
@@ -48,6 +50,15 @@ export default {
   computed: {
     contentStyle () {
       return this.height ? `height: ${this.height};` : ''
+    },
+    optOptions () {
+      return Object.assign({}, this.optionProps)
+    },
+    optLabelField () {
+      return this.optOptions.label || 'label'
+    },
+    optValueField () {
+      return this.optOptions.value || 'value'
     }
   },
   watch: {

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

@@ -0,0 +1,193 @@
+<template>
+  <view class="ml-list-select-group" :class="[className || '', type ? `type-${type}` : '']">
+    <slot>
+      <ml-list-group :border="border">
+        <ml-list-item v-for="(item, index) in options" :key="index" :value="item[optValueField]" :padding="false" suffixIcon="none">{{ item[optLabelField] }}</ml-list-item>
+      </ml-list-group>
+    </slot>
+  </view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'MlListSelectGroup',
+  props: {
+    value: Array,
+    checkedKeys: {
+      type: Array,
+      default: null
+    },
+    checkedKey: {
+      type: [Number, String],
+      default: null
+    },
+    optionProps: Object,
+    isAllChecked: Boolean,
+    isAllIndeterminate: Boolean,
+    type: String,
+    border: Boolean,
+    options: {
+      type: Array,
+      default: () => []
+    },
+    className: String
+  },
+  provide () {
+    return {
+      mlListSelectGroup: this
+    }
+  },
+  data () {
+    return {
+      selectValue: null,
+      selection: []
+    }
+  },
+  computed: {
+    optOptions () {
+      return Object.assign({}, this.optionProps)
+    },
+    optLabelField () {
+      return this.optOptions.label || 'label'
+    },
+    optValueField () {
+      return this.optOptions.value || 'value'
+    }
+  },
+  watch: {
+    checkedKeys (value) {
+      if (!this.updateModel) {
+        this.selection = []
+        this.handleCheckboxRow(value, true)
+      }
+      this.updateModel = false
+    },
+    checkedKey (value) {
+      if (!this.updateModel) {
+        this.selectValue = null
+        this.handleRadioRow(value)
+      }
+      this.updateModel = false
+    },
+    options () {
+      if (this.type === 'checkbox') {
+        this.handleCheckboxRow(this.checkedKeys, true)
+      } else if (this.type === 'radio') {
+        this.handleRadioRow(this.checkedKey)
+      }
+    }
+  },
+  created () {
+    if (this.type === 'checkbox') {
+      if (this.checkedKeys) {
+        this.selection = this.checkedKeys
+      }
+    } else if (this.type === 'radio') {
+      if (this.checkedKey) {
+        this.selectValue = this.checkedKey
+      }
+    }
+  },
+  mounted () {
+    if (this.type === 'checkbox') {
+      setTimeout(() => this.updateStatus(), 10)
+    }
+  },
+  methods: {
+    updateStatus () {
+      const disableItems = this.options.filter(item => item.disabled)
+      const allSelectSize = this.selection.length + disableItems.length
+      const isAllChecked = allSelectSize > 0 && allSelectSize >= this.options.length
+      const isAllIndeterminate = this.selection.length > 0 && this.selection.length < this.options.length
+      this.$emit('update:isAllChecked', isAllChecked)
+      this.$emit('update:isAllIndeterminate', isAllIndeterminate)
+    },
+    updateChecked () {
+      let rest = null
+      this.updateModel = true
+      if (this.type === 'checkbox') {
+        rest = this.selection
+        this.$emit('update:checkedKeys', rest)
+      } else if (this.type === 'radio') {
+        rest = this.selectValue
+        this.$emit('update:checkedKey', rest)
+      }
+      this.$emit('change', { value: rest })
+      this.updateStatus()
+    },
+    toggleCheckboxRow (label) {
+      const index = this.selection.indexOf(label)
+      if (index > -1) {
+        this.selection.splice(index, 1)
+      } else {
+        this.selection.push(label)
+      }
+      this.updateChecked()
+    },
+    handleCheckboxRow (label, checked) {
+      let labels = label
+      if (!XEUtils.isArray(label)) {
+        labels = [label]
+      }
+      labels.forEach(val => {
+        const item = this.options.find(item => item[this.optValueField] === val)
+        if (item && !item.disabled) {
+          if (checked) {
+            if (!this.selection.includes(val)) {
+              this.selection.push(val)
+            }
+          } else {
+            const index = this.selection.indexOf(val)
+            if (index > -1) {
+              this.selection.splice(index, 1)
+            }
+          }
+        }
+      })
+      this.updateStatus()
+    },
+    setCheckboxRow (val, checked) {
+      this.handleCheckboxRow(val, checked)
+      this.updateChecked()
+    },
+    clearCheckboxRow () {
+      this.selection = []
+      this.updateChecked()
+    },
+    handleRadioRow (val) {
+      this.selectValue = val
+      this.updateStatus()
+    },
+    setRadioRow (val) {
+      this.handleRadioRow(val)
+      this.updateChecked()
+    },
+    clearRadioRow () {
+      this.selectValue = null
+      this.updateChecked()
+    },
+    triggerItemEvent (params) {
+      const { value: label } = params
+      if (this.type === 'checkbox') {
+        this.toggleCheckboxRow(label)
+        this.$emit('checkbox-change', {})
+      } else if (this.type === 'radio') {
+        this.setRadioRow(label)
+        this.$emit('radio-change', {})
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-select-group {
+  margin-bottom: $ml-page-interval-margin;
+  color: $uni-text-color;
+  font-size: $ml-base-font-size;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

@@ -0,0 +1,128 @@
+<template>
+  <view class="ml-list-select-page" :class="[className || '', {'is-border': border}]" @tap="tapEvent">
+    <view class="ml-list-select-page-warpper">
+      <view v-if="hasEmpty" class="ml-list-select-page-placeholder">{{ placeholder }}</view>
+      <view v-else>
+        <slot>
+          <view>{{ selectLabel }}</view>
+        </slot>
+      </view>
+    </view>
+    <view v-if="clearable && value.length" class="ml-list-select-page-clear-icon" @click.stop="clearEvent">
+      <ml-icon name="delete-filling"></ml-icon>
+    </view>
+    <view v-else class="ml-list-select-page-icon">
+      <ml-icon name="arrow-right" />
+    </view>
+  </view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'MlListSelectPage',
+  props: {
+    value: [Array, Number, String],
+    optionProps: Object,
+    compTitle: {
+      type: String,
+      default: '请选择'
+    },
+    compRender: {
+      type: Object,
+      default: () => ({})
+    },
+    type: String,
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    border: Boolean,
+    clearable: Boolean,
+    className: String
+  },
+  data () {
+    return {
+      dataList: []
+    }
+  },
+  computed: {
+    optOptions () {
+      return Object.assign({}, this.optionProps)
+    },
+    optLabelField () {
+      return this.optOptions.label || 'label'
+    },
+    optValueField () {
+      return this.optOptions.value || 'value'
+    },
+    hasEmpty  () {
+      if (this.type === 'checkbox') {
+        return !this.value || !this.value.length
+      }
+      return XEUtils.eqNull(this.value) || this.value === ''
+    },
+    selectLabel () {
+      if (this.type === 'checkbox') {
+        return this.dataList.filter(item => this.value.includes(item[this.optValueField])).map(item => item[this.optLabelField]).join(', ')
+      }
+      if (this.type === 'radio') {
+        return this.dataList.filter(item => this.value === item[this.optValueField]).map(item => item[this.optLabelField]).join(', ')
+      }
+      return ''
+    }
+  },
+  methods: {
+    tapEvent () {
+      // 打开选择列表页面
+      this.$store.dispatch('openSelectPage', {
+        compName: this.compRender.name, // 指定加载组件名称
+        compTitle: this.compTitle, // 页面标题
+        compType: this.type, // 单选框和复选框
+        compProps: this.compRender.props, // 组件参数
+        optionProps: this.optionProps,
+        value: this.value, // 选择值
+        events: {
+          // 加载完成事件
+          load: (params) => {
+            this.dataList = params.options || []
+          },
+          // 点击确认事件
+          confirm: (params) => {
+            this.$emit('input', params.value)
+          }
+        }
+      })
+      this.$emit('tap', {})
+      this.$emit('click', {})
+    },
+    clearEvent () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-select-page {
+  display: flex;
+  flex-direction: row;
+  padding: 0 10rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  .ml-list-select-page-warpper {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-list-select-page-clear-icon,
+  .ml-list-select-page-icon {
+    flex-shrink: 0;
+  }
+  .ml-list-select-page-placeholder {
+    color: $ml-input-color-placeholder;
+  }
+}
+</style>

package/lib/components/ml-load-more/ml-load-more.vue

@@ -89,7 +89,11 @@ export default {
   created () {
     this.$nextTick(() => {
       if (this.autoload && this.requestMethod) {
-        this.reload()
+        this.reload().then(() => {
+          this.$emit('init')
+        })
+      } else {
+        this.$emit('init')
       }
     })
   },
@@ -152,6 +156,7 @@ export default {
         }
         uni.stopPullDownRefresh()
         this.$emit('input', data)
+        this.$emit('query', { value: data })
       } catch (e) {
         if (this.$loading) {
           this.$loading.hide()
@@ -160,6 +165,9 @@ export default {
         console.error(e)
       }
       this.updateEmptyStatus()
+      return new Promise(resolve => {
+        setTimeout(resolve, 100)
+      })
     },
     async loadMore () {
       if (this.showPage && !this.loading && this.loadStatus === 'more') {
@@ -168,6 +176,7 @@ export default {
           const data = await this.getList()
           const moreList = (this.value || []).concat(data)
           this.$emit('input', moreList)
+          this.$emit('more', { value: moreList })
         } catch (e) {
           console.error(e)
         }

package/package.json

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

package/store/base.js

@@ -0,0 +1,53 @@
+const base = {
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+    initSelectPage ({ commit }) {
+      commit('setEventData', null)
+    },
+    clearSelectPage ({ commit }) {
+      commit('setEventData', null)
+    },
+    openSelectPage (params, options) {
+      const opts = { ...options }
+      const compParams = {
+        value: opts.value, // 默认选中
+        compName: opts.compName, // 指定加载组件名称
+        compType: opts.compType, // 单选框和复选框
+        compProps: opts.compProps,
+        optionProps: opts.optionProps
+      }
+      if (!opts.compName) {
+        console.error('openSelectPage：compName 不能为空')
+        return
+      }
+      const evnts = opts.events || {}
+      uni.navigateTo({
+        url: `/pagesA/base/select/SelectPage?compName=${opts.compName}`,
+        success ({ eventChannel }) {
+          if (opts && opts.compTitle) {
+            uni.setNavigationBarTitle({
+              title: opts.compTitle
+            })
+          }
+          eventChannel.emit('init', compParams)
+        },
+        events: {
+          ...evnts,
+          confirm (params) {
+            if (evnts.confirm) {
+              evnts.confirm(params)
+            }
+            uni.navigateBack()
+          }
+        }
+      })
+    }
+  }
+}
+
+export default base

package/store/events.js

@@ -13,9 +13,6 @@ const events = {
     setEvent (state, evnt) {
       state[`global${evnt.type.slice(0, 1).toUpperCase()}${evnt.type.slice(1)}`] = evnt
     },
-    initEventData (state) {
-      state.eventData = null
-    },
     setEventData (state, data) {
       state.eventData = data
     }