mali-applet-ui 1.1.24 → 1.1.26

package/i18n/lang/en_US.js

@@ -15,9 +15,7 @@ export default {
       fail: 'Operation failure'
     },
     modal: {
-      sysTitle: 'System message',
-      confirm: 'Confirm',
-      cancel: 'Cancel'
+      sysTitle: 'System message'
     },
     mlLoadMore: {
       loading: 'Loading...',

package/i18n/lang/zh_CN.js

@@ -12,7 +12,7 @@ export default {
     },
     toast: {
       success: '操作成功',
-      error: '操作失败'
+      fail: '操作失败'
     },
     modal: {
       sysTitle: '系统提示'

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

@@ -0,0 +1,212 @@
+<template>
+  <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" :value="selectIndex" :disabled="disabled" :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">
+        <view v-if="value !== null" class="ml-select-picker-label">{{ selectLabel }}</view>
+        <view v-else class="ml-select-picker-placeholder">{{ translate(placeholder) }}</view>
+      </view>
+      <view v-if="clearable && value !== null" class="ml-select-picker-clear-icon" @click.stop="clearEvent">
+        <ml-icon name="delete-filling"></ml-icon>
+      </view>
+      <view v-else class="ml-select-picker-icon">
+        <ml-icon name="arrow-right" />
+      </view>
+    </view>
+  </picker>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import MaliI18n from '../../../i18n/i18n'
+
+export default {
+  name: 'MlSelectPicker',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [Number, String],
+    border: Boolean,
+    placeholder: {
+      type: String,
+      default: 'ml.base.pleaseSelect'
+    },
+    disabled: Boolean,
+    clearable: Boolean,
+    readonly: Boolean,
+    options: Array,
+    optionProps: Object,
+    width: String,
+    isAll: Boolean,
+    className: String
+  },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+  data () {
+    return {
+      selectIndex: 0
+    }
+  },
+  computed: {
+    isFromReadonly () {
+      if (this.readonly) {
+        return true
+      }
+      return this.form ? this.form.readonly : false
+    },
+    optionList () {
+      // #ifdef MP-ALIPAY
+      if (!this.options || !this.options.length) {
+        return [
+          {
+            [this.optLabelField]: '',
+            [this.optValueField]: null
+          }
+        ]
+      }
+      // #endif
+
+      if (this.isAll) {
+        return [
+          {
+            [this.optLabelField]: MaliI18n.t('ml.base.all'),
+            [this.optValueField]: ''
+          }
+        ].concat(this.options.map(item => {
+          return {
+            ...item,
+            [this.optLabelField]: MaliI18n.t(item[this.optLabelField]),
+            [this.optValueField]: item[this.optValueField]
+          }
+        }))
+      }
+      return this.options.map(item => {
+        return {
+          ...item,
+          [this.optLabelField]: MaliI18n.t(item[this.optLabelField]),
+          [this.optValueField]: item[this.optValueField]
+        }
+      })
+    },
+    selectLabel () {
+      const item = this.optionList.find(item => String(item[this.optValueField]) === String(this.value))
+      return MaliI18n.t(XEUtils.toValueString(item ? item[this.optLabelField] : this.value))
+    },
+    optOptions () {
+      return Object.assign({}, this.optionProps)
+    },
+    optLabelField () {
+      return this.optOptions.label || 'label'
+    },
+    optValueField () {
+      return this.optOptions.value || 'value'
+    }
+  },
+  watch: {
+    value () {
+      this.updateSelectStatus()
+    },
+    optionList () {
+      this.updateSelectStatus()
+    }
+  },
+  created () {
+    this.updateSelectStatus()
+  },
+  methods: {
+    translate: MaliI18n.t,
+    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
+      const item = this.optionList[index]
+      this.selectIndex = index
+      let value = null
+      if (item) {
+        value = item[this.optValueField]
+      }
+      this.$emit('input', value)
+      if (this.value !== value) {
+        this.$emit('change', { value, option: item })
+      }
+    },
+    clearEvent () {
+      const value = null
+      this.$emit('input', value)
+      this.$emit('clear', { value })
+      this.$emit('change', { value, option: null })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-select-picker {
+  display: block;
+  font-size: $ml-base-font-size;
+  box-sizing: border-box;
+  padding: 0;
+  position: relative;
+  user-select: none;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  color: #6a6a6a;
+}
+.ml-select-picker-readonly-content {
+  padding: 20rpx;
+}
+.ml-select-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: $ml-border-radius;
+  &.is-border {
+    border: 1px solid #e5e5e5;
+    background: #fff;
+  }
+}
+.ml-select-picker-text {
+  flex-grow: 1;
+  overflow: hidden;
+  .ml-select-picker-label,
+  .ml-select-picker-placeholder {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-select-picker-placeholder {
+    color: $ml-input-color-placeholder;
+  }
+}
+.ml-select-picker-clear-icon {
+  width: 34rpx;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  color: $ml-input-clear-icon-color;
+  font-size: $ml-input-clear-icon-font-size;
+  border-radius: 0 $ml-border-radius $ml-border-radius 0;
+}
+.ml-select-picker-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: #6a6a6a;
+}
+</style>

package/lib/components/ml-time-line/ml-time-line.vue

@@ -6,17 +6,17 @@
       <view class="ml-time-line__info">
         <view class="ml-time-line__title">
           <slot name="title" v-bind:row="item" v-bind:text="item.title">
-            {{item.title || ''}}
+            <view>{{item.title || ''}}</view>
           </slot>
         </view>
         <view class="ml-time-line__content">
           <slot name="desc" v-bind:row="item" v-bind:text="item.content">
-            {{item.content || ''}}
+            <view>{{item.content || ''}}</view>
           </slot>
         </view>
         <view class="ml-time-line__time">
           <slot name="time" v-bind:row="item" v-bind:text="item.time">
-            {{item.time || ''}}
+            <view>{{item.time || ''}}</view>
           </slot>
         </view>
       </view>

package/package.json

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