mali-applet-ui 1.1.18 → 1.1.20

package/i18n/i18n.js

@@ -0,0 +1,44 @@
+import XEUtils from 'xe-utils'
+import MaliStorage from '../storage'
+
+import zhCN from './lang/zh_CN'
+import enUS from './lang/en_US'
+
+const compMessage = {
+  zh_CN: zhCN,
+  en_US: enUS
+}
+
+const sysLang = uni.getSystemInfoSync().language
+let currLanguage = MaliStorage.getItem('MALI_LANGUAGE') || (/en/i.test(sysLang) ? 'en_US' : 'zh_CN')
+
+const localeMessage = {}
+
+const MaliI18n = {
+  getLanguage () {
+    return currLanguage
+  },
+  setLanguage (language) {
+    if (localeMessage[language]) {
+      currLanguage = language
+      MaliStorage.setItem('MALI_LANGUAGE', language)
+    } else {
+      console.error(`国际化 ${language} 不存在`)
+    }
+  },
+  setLocaleMessage (language, message) {
+    localeMessage[language] = Object.assign({}, compMessage[language], message)
+  },
+  t (key, args) {
+    if (key && key.indexOf && key.indexOf('.') > -1) {
+      const str = XEUtils.toFormatString(XEUtils.get(localeMessage[currLanguage], key), args)
+      return str || XEUtils.isNumber(str) ? str : key
+    }
+    return key
+  }
+}
+
+// 组件默认语言
+MaliI18n.setLocaleMessage(currLanguage, compMessage[currLanguage])
+
+export default MaliI18n

package/i18n/lang/en_US.js

@@ -0,0 +1,25 @@
+export default {
+  ml: {
+    base: {
+      all: 'All',
+      pleaseSelect: 'Please select'
+    },
+    loading: {
+      loading: 'Loading'
+    },
+    toast: {
+      success: 'Successful operation',
+      fail: 'Operation failure'
+    },
+    modal: {
+      sysTitle: 'System message',
+      confirm: 'Confirm',
+      cancel: 'Cancel'
+    },
+    mlLoadMore: {
+      loading: 'Loading...',
+      loadMore: 'Pull up to show more',
+      notMore: 'No more data'
+    }
+  }
+}

package/i18n/lang/zh_CN.js

@@ -0,0 +1,25 @@
+export default {
+  ml: {
+    base: {
+      all: '全部',
+      pleaseSelect: '请选择',
+      confirm: '确认',
+      cancel: '取消'
+    },
+    loading: {
+      loading: '加载中'
+    },
+    toast: {
+      success: '操作成功',
+      error: '操作失败'
+    },
+    modal: {
+      sysTitle: '系统提示'
+    },
+    mlLoadMore: {
+      loading: '正在加载中...',
+      loadMore: '上拉显示更多',
+      notMore: '没有更多数据了'
+    }
+  }
+}

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

@@ -13,8 +13,8 @@
       </view>
       <view v-if="showConfirmButton || showCancelButton || showFooter" class="ml-drawer-footer">
         <slot name="footer">
-          <ml-button v-if="showCancelButton" :status="cancelButtonStatus" @click="cancelEvent">{{ cancelButtonText }}</ml-button>
-          <ml-button v-if="showConfirmButton" :status="confirmButtonStatus" @click="confirmEvent">{{ confirmButtonText }}</ml-button>
+          <ml-button v-if="showCancelButton" :status="cancelButtonStatus" @click="cancelEvent">{{ translate(cancelButtonText) }}</ml-button>
+          <ml-button v-if="showConfirmButton" :status="confirmButtonStatus" @click="confirmEvent">{{ translate(confirmButtonText) }}</ml-button>
         </slot>
       </view>
     </view>
@@ -22,6 +22,8 @@
 </template>
 
 <script>
+import MaliI18n from '../../../i18n/i18n'
+
 export default {
   name: 'MlDrawer',
   props: {
@@ -46,14 +48,14 @@ export default {
     },
     confirmButtonText: {
       type: String,
-      default: '确认'
+      default: 'ml.base.confirm'
     },
     confirmClosable: Boolean,
     showCancelButton: Boolean,
     cancelButtonStatus: String,
     cancelButtonText: {
       type: String,
-      default: '取消'
+      default: 'ml.base.cancel'
     },
     cancelClosable: {
       type: Boolean,
@@ -94,6 +96,7 @@ export default {
     })
   },
   methods: {
+    translate: MaliI18n.t,
     close () {
       clearTimeout(this.animateTime)
       this.isAnimate = true

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

@@ -2,7 +2,9 @@
   <view class="ml-form-group" :class="className || ''">
     <view v-if="title || showHeader" class="ml-form-group-header">
       <view class="ml-form-group-title">
-        <slot name="title">{{ title }}</slot>
+        <slot name="title">
+          <view>{{ translate(title) }}</view>
+        </slot>
       </view>
       <view class="ml-form-group-extra">
         <slot name="extra"></slot>
@@ -15,6 +17,8 @@
 </template>
 
 <script>
+import MaliI18n from '../../../i18n/i18n'
+
 export default {
   name: 'MlFormGroup',
   options: {
@@ -24,6 +28,9 @@ export default {
     title: String,
     showHeader: Boolean,
     className: String
+  },
+  methods: {
+    translate: MaliI18n.t
   }
 }
 </script>

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

@@ -6,7 +6,9 @@
     <view v-if="title || $slots.title" class="ml-form-item-header" :style="titleStyle">
       <view v-if="isRequired" class="ml-form-item-header-asterisk">*</view>
       <view class="ml-form-item-header-title">
-        <slot name="title">{{ title }}</slot>
+        <slot name="title">
+          <view>{{ translate(title) }}</view>
+        </slot>
       </view>
       <view class="ml-form-item-header-extra">
         <slot name="extra"></slot>
@@ -33,6 +35,7 @@
 
 <script>
 import XEUtils from 'xe-utils'
+import MaliI18n from '../../../i18n/i18n'
 
 export default {
   name: 'MlFormItem',
@@ -195,6 +198,7 @@ export default {
     }
   },
   methods: {
+    translate: MaliI18n.t,
     updateProp (prop) {
       if (this.form) {
         const item = this.form.itemList.find(item => item.mId === this.mId)

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

@@ -5,7 +5,7 @@
   <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-input not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-disabled': isFormDisabled}]" @tap="tapEvent">
     <view class="ml-input-simulate">
       <text v-if="inpVal">{{ inpVal }}</text>
-      <text v-else class="ml-input-placeholder">{{ placeholder }}</text>
+      <text v-else class="ml-input-placeholder">{{ translate(placeholder) }}</text>
     </view>
   </view>
   <view v-else class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': hasPrefix || type === 'search', 'is-suffix': hasSuffix, 'is-disabled': isFormDisabled, 'is-clear': clearable && inpVal}]">
@@ -21,7 +21,7 @@
       :autocomplete="autocomplete"
       :type="type"
       :confirm-type="type === 'search' ? 'search' : 'done'"
-      :placeholder="placeholder"
+      :placeholder="translate(placeholder)"
       :maxlength="maxlength"
       :disabled="isFormDisabled"
       @tap="tapEvent"
@@ -42,6 +42,7 @@
 
 <script>
 import MaliUtils from '../../../utils'
+import MaliI18n from '../../../i18n/i18n'
 import XEUtils from 'xe-utils'
 
 export default {
@@ -73,7 +74,7 @@ export default {
     },
     placeholder: {
       type: String,
-      default: '请输入'
+      default: 'ml.base.pleaseSelect'
     },
     maxlength: {
       type: [String, Number],
@@ -126,6 +127,7 @@ export default {
     this.inpVal = XEUtils.toValueString(this.value)
   },
   methods: {
+    translate: MaliI18n.t,
     inputEvent () {
       const value = this.inpVal
       this.$emit('input', value)

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

@@ -14,11 +14,11 @@
     <view v-else-if="showPage" class="ml-load-more-warpper">
       <view v-if="loading" class="ml-load-more-loading">
         <ml-icon name="loading" roll />
-        <text class="ml-load-more-loading-text">正在加载中...</text>
+        <text class="ml-load-more-loading-text">{{ translate('ml.mlLoadMore.loading') }}</text>
       </view>
       <template v-else>
-        <view v-if="loadStatus === 'more'" class="ml-load-more-status-more">上拉显示更多</view>
-        <view v-if="loadStatus === 'noMore'" class="ml-load-more-status-no-more">没有更多数据了</view>
+        <view v-if="loadStatus === 'more'" class="ml-load-more-status-more">{{ translate('ml.mlLoadMore.loadMore') }}</view>
+        <view v-if="loadStatus === 'noMore'" class="ml-load-more-status-no-more">{{ translate('ml.mlLoadMore.notMore') }}</view>
       </template>
     </view>
   </view>
@@ -26,6 +26,7 @@
 
 <script>
 import globalStore from '../../../config/store'
+import MaliI18n from '../../../i18n/i18n'
 import XEUtils from 'xe-utils'
 
 export default {
@@ -98,6 +99,7 @@ export default {
     })
   },
   methods: {
+    translate: MaliI18n.t,
     getParams () {
       return this.showPage
         ? {

package/lib/components/ml-not-data/ml-not-data.vue

@@ -13,7 +13,7 @@
       </view>
       <view v-if="emptyHint || $slots.hint" class="ml-not-data-hint">
         <slot name="hint">
-          <text>{{ emptyHint }}</text>
+          <view>{{ translate(emptyHint) }}</view>
         </slot>
       </view>
       <view class="ml-not-data-contnet">
@@ -25,6 +25,7 @@
 
 <script>
 import globalStore from '../../../config/store'
+import MaliI18n from '../../../i18n/i18n'
 
 export default {
   name: 'MlNotData',
@@ -38,8 +39,11 @@ export default {
       return this.emptyUrl || globalStore.notData.emptyUrl
     },
     emptyContentText () {
-      return this.emptyText || globalStore.notData.emptyText
+      return MaliI18n.t(this.emptyText || globalStore.notData.emptyText)
     }
+  },
+  methods: {
+    translate: MaliI18n.t
   }
 }
 </script>

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

@@ -6,7 +6,7 @@
     <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">{{ placeholder }}</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>
@@ -20,6 +20,7 @@
 
 <script>
 import XEUtils from 'xe-utils'
+import MaliI18n from '../../../i18n/i18n'
 
 export default {
   name: 'MlSelectPicker',
@@ -31,7 +32,7 @@ export default {
     border: Boolean,
     placeholder: {
       type: String,
-      default: '请选择'
+      default: 'ml.base.pleaseSelect'
     },
     disabled: Boolean,
     clearable: Boolean,
@@ -75,16 +76,26 @@ export default {
       if (this.isAll) {
         return [
           {
-            [this.optLabelField]: '全部',
+            [this.optLabelField]: MaliI18n.t('ml.base.all'),
             [this.optValueField]: ''
           }
-        ].concat(this.options)
+        ].concat(this.options.map(item => {
+          return {
+            [this.optLabelField]: MaliI18n.t(item[this.optLabelField]),
+            [this.optValueField]: item[this.optValueField]
+          }
+        }))
       }
-      return this.options
+      return this.options.map(item => {
+        return {
+          [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 XEUtils.toValueString(item ? item[this.optLabelField] : this.value)
+      return MaliI18n.t(XEUtils.toValueString(item ? item[this.optLabelField] : this.value))
     },
     optOptions () {
       return Object.assign({}, this.optionProps)
@@ -108,6 +119,7 @@ export default {
     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

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

@@ -5,7 +5,7 @@
   <view v-else-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-textarea not-edit" :class="[className || '', {'is-right': align === 'right', 'is-border': border}]">
     <view class="ml-textarea-simulate" :style="{color: fontColor, height: `${rows * 30}rpx`}">
       <text v-if="inpVal">{{ inpVal }}</text>
-      <text v-else class="ml-textarea-placeholder">{{ placeholder }}</text>
+      <text v-else class="ml-textarea-placeholder">{{ translate(placeholder) }}</text>
     </view>
     <view v-if="showWordLimit && !disabled" class="ml-textarea-word-count">
       <!-- <VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput> -->
@@ -19,7 +19,7 @@
         v-model="inpVal"
         :rows="rows"
         :maxlength="maxLength"
-        :placeholder="placeholder"
+        :placeholder="translate(placeholder)"
         :disabled="disabled"
         :show-count="false"
         @input="inputEvent"
@@ -36,6 +36,7 @@
 
 <script>
 import MaliUtils from '../../../utils'
+import MaliI18n from '../../../i18n/i18n'
 import XEUtils from 'xe-utils'
 // import VoiceInput from './voice-input.vue'
 
@@ -64,7 +65,7 @@ export default {
     },
     placeholder: {
       type: String,
-      default: '请输入'
+      default: 'ml.base.pleaseSelec'
     },
     showWordLimit: {
       type: Boolean,
@@ -111,6 +112,7 @@ export default {
     this.inpVal = XEUtils.toValueString(this.value)
   },
   methods: {
+    translate: MaliI18n.t,
     inputEvent () {
       let value = this.inpVal
       if (this.maxLength && value && value.length > this.maxLength) {

package/modal/loading.js

@@ -1,8 +1,10 @@
+import MaliI18n from '../i18n/i18n'
+
 const MaliLoading = {
   show (option = {}) {
     return new Promise(resolve => {
       uni.showLoading({
-        title: option.content || '加载中',
+        title: MaliI18n.t(option.content || 'ml.loading.loading'),
         success: resolve
       })
     })

package/modal/modal.js

@@ -1,14 +1,15 @@
 import XEUtils from 'xe-utils'
+import MaliI18n from '../i18n/i18n'
 
 const MaliModal = {
   alert (option) {
     const opts = XEUtils.isString(option) ? { content: option } : (option || {})
     return new Promise(resolve => {
       uni.showModal({
-        title: opts.title || '系统提示',
+        title: MaliI18n.t(opts.title || 'ml.modal.sysTitle'),
         content: opts.content || '',
         showCancel: false,
-        confirmText: opts.confirmButtonText || '确认',
+        confirmText: MaliI18n.t(opts.confirmButtonText || 'ml.base.confirm'),
         success () {
           const type = 'confirm'
           resolve(type)
@@ -20,11 +21,11 @@ const MaliModal = {
     const opts = XEUtils.isString(option) ? { content: option } : (option || {})
     return new Promise(resolve => {
       uni.showModal({
-        title: opts.title || '系统提示',
+        title: MaliI18n.t(opts.title || 'ml.modal.sysTitle'),
         content: opts.content || '',
         showCancel: true,
-        confirmText: opts.confirmButtonText || '确认',
-        cancelText: opts.cancelButtonText || '取消',
+        confirmText: MaliI18n.t(opts.confirmButtonText || 'ml.base.confirm'),
+        cancelText: MaliI18n.t(opts.cancelButtonText || 'ml.base.cancel'),
         success (res) {
           let type
           if (res.confirm) {

package/modal/toast.js

@@ -1,3 +1,4 @@
+import MaliI18n from '../i18n/i18n'
 import XEUtils from 'xe-utils'
 
 const MaliToast = {
@@ -5,7 +6,7 @@ const MaliToast = {
     const opts = XEUtils.isString(option) ? { content: option } : (option || {})
     return new Promise(resolve => {
       uni.showToast({
-        title: opts.content || '操作成功',
+        title: MaliI18n.t(opts.content || 'ml.toast.success'),
         icon: 'success',
         success () {
           setTimeout(resolve, 2000)
@@ -17,7 +18,7 @@ const MaliToast = {
     const opts = XEUtils.isString(option) ? { content: option } : (option || {})
     return new Promise(resolve => {
       uni.showToast({
-        title: opts.content || '操作失败',
+        title: MaliI18n.t(opts.content || 'ml.toast.fail'),
         icon: 'error',
         success () {
           setTimeout(resolve, 2000)
@@ -29,7 +30,7 @@ const MaliToast = {
     const opts = XEUtils.isString(option) ? { content: option } : (option || {})
     return new Promise(resolve => {
       uni.showToast({
-        title: opts.content || '操作失败',
+        title: MaliI18n.t(opts.content || 'ml.toast.fail'),
         icon: 'error',
         success () {
           setTimeout(resolve, 2000)

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.1.18",
+  "version": "1.1.20",
   "description": "vue2 码里云小程序组件库",
   "files": [
     "lib",
     "style",
     "types",
     "config",
+    "i18n",
     "utils",
     "modal",
     "store",