mali-applet-ui 1.0.39 → 1.0.41

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

@@ -9,29 +9,28 @@
     </view>
   </view>
   <view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border, 'is-disabled': disabled, 'is-clear': clearable && inpVal}, className]">
-    <view v-if="showTip" class="ml-amount-tip">
-      <view>首位：</view>
-      <view class="ml-amount-tip-label">{{ firstNumLabel }}</view>
-    </view>
-    <input
-      v-model="inpVal"
-      type="digit"
-      class="ml-amount-input-inp"
-      autocomplete="off"
-      :placeholder="placeholder"
-      :maxlength="maxLength"
-      :disabled="disabled"
-      @blur="blurEvent"
-      @input="inputEvent" />
-    <view v-if="clearable && !disabled && inpVal" class="ml-amount-input-clear-icon" @click.stop="clearEvent">
-      <ml-icon name="delete-filling"></ml-icon>
+    <view class="ml-amount-input-warpper">
+      <input
+        v-model="inpVal"
+        type="digit"
+        class="ml-amount-input-inp"
+        autocomplete="off"
+        :placeholder="placeholder"
+        :maxlength="maxLength"
+        :disabled="disabled"
+        @blur="blurEvent"
+        @input="inputEvent" />
+      <view v-if="clearable && !disabled && inpVal" class="ml-amount-input-clear-icon" @click.stop="clearEvent">
+        <ml-icon name="delete-filling"></ml-icon>
+      </view>
     </view>
+    <view v-if="showTip" class="ml-amount-tip">{{ currAmountLabel }}</view>
   </view>
 </template>
 
 <script>
 import XEUtils from 'xe-utils'
-import { getPlatformEnv, toAmountString, toWanAmountString } from '../../../utils'
+import { getPlatformEnv, toAmountString, toWanAmountString, toNumMoneyToChinese } from '../../../utils'
 
 function eqEmptyNull (value) {
   return value === '' || XEUtils.eqNull(value)
@@ -112,34 +111,8 @@ export default {
       }
       return null
     },
-    firstNumLabel () {
-      const numVal = XEUtils.toNumber(this.value)
-      if (numVal > 999999999999) {
-        return '万亿'
-      } else if (numVal > 99999999999) {
-        return '千亿'
-      } else if (numVal > 9999999999) {
-        return '百亿'
-      } else if (numVal > 999999999) {
-        return '十亿'
-      } else if (numVal > 99999999) {
-        return '亿'
-      } else if (numVal > 9999999) {
-        return '千万'
-      } else if (numVal > 999999) {
-        return '百万'
-      } else if (numVal > 99999) {
-        return '十万'
-      } else if (numVal > 9999) {
-        return '万'
-      } else if (numVal > 999) {
-        return '千'
-      } else if (numVal > 99) {
-        return '百'
-      } else if (numVal > 9) {
-        return '十'
-      }
-      return '-'
+    currAmountLabel () {
+      return this.currAmountNum === '' ? '' : toNumMoneyToChinese(this.currAmountNum)
     }
   },
   watch: {
@@ -212,8 +185,6 @@ export default {
 .ml-amount-input {
   position: relative;
   flex-grow: 1;
-  display: flex;
-  flex-direction: row;
   .ml-amount-input-placeholder {
     color: $ml-input-color-placeholder;;
   }
@@ -247,16 +218,12 @@ export default {
     }
   }
   .ml-amount-tip {
+    padding: 0 10rpx;
+    font-size: $ml-describe-font-size;
+  }
+  .ml-amount-input-warpper {
     display: flex;
     flex-direction: row;
-    position: absolute;
-    top: -60rpx;
-    right: 10rpx;
-    z-index: 1;
-    .ml-amount-tip-label {
-      min-width: 60rpx;
-      text-align: right;
-    }
   }
   .ml-amount-input-inp {
     outline: 0;

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

@@ -46,6 +46,7 @@ export default {
   border-radius: $ml-border-radius;
   background: #ffffff;
   margin-bottom: 20rpx;
+  color: $ml-font-color;
   .ml-chunk-group-title {
     display: flex;
     flex-direction: row;

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

@@ -61,6 +61,9 @@ export default {
   padding: 16rpx;
   line-height: 50rpx;
   font-size: $ml-describe-font-size;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
           37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
           70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;

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

@@ -2,7 +2,7 @@
   <view v-if="isFromReadonly" class="ml-date-picker is-readonly">
     <view class="ml-date-picker-readonly-content">{{ value }}</view>
   </view>
-  <uni-datetime-picker v-else :class="className" v-model="selectVal" type="date" :start="minDate" :end="maxDate" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker v-else :class="className" v-model="selectVal" type="date" :start="minDate" :end="maxDate" :placeholder="placeholder" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,9 +13,16 @@ export default {
   },
   props: {
     value: String,
-    border: Boolean,
+    border: {
+      type: Boolean,
+      default: false
+    },
     minDate: [String, Number],
     maxDate: [String, Number],
+    placeholder: {
+      type: String,
+      default: '请选择日期'
+    },
     className: String
   },
   inject: {

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

@@ -221,12 +221,14 @@ export default {
   }
   .ml-form-item-header {
     min-height: 78rpx;
+    padding: 0 10rpx;
   }
   .ml-form-item-header-asterisk {
-    display: inline;
+    position: absolute;
+    left: 10rpx;
     color: red;
-    padding-right: 4rpx;
     font-weight: 700;
+    padding-top: 10rpx;
   }
   .ml-form-item-header-title {
     display: inline;

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

@@ -6,7 +6,8 @@
 export default {
   name: 'MlIcon',
   options: {
-    virtualHost: true
+    virtualHost: true,
+    styleIsolation: 'shared'
   },
   props: {
     name: String,

package/lib/components/ml-progress-bar/ml-progress-bar.vue

@@ -2,10 +2,11 @@
   <view class="ml-progress-bar" :class="className">
     <view class="progress-bar-header">
       <slot name="header">
-        <view v-if="title" class="progress-bar-title" :class="{'is-underline': titleUnderline}">{{ title }}</view>
+        <view v-if="title" class="progress-header-title" :class="{'is-underline': titleUnderline}">{{ title }}</view>
+        <view v-if="title && showNum" class="progress-header-num">{{ value || 0 }}{{ unit || '' }}</view>
       </slot>
     </view>
-    <view class="progress-bar-chart" @click="barClick">
+    <view class="progress-bar-chart" :class="{'show-num': !title && showNum}" @click="barClick">
       <progress
         :percent="percNum"
         :activeColor="activeColor || '#1890FF'"
@@ -13,7 +14,7 @@
         :strokeWidth="strokeWidth"
         :fontSize="fontSize"
         :border-radius="borderRadius" />
-      <view v-if="showNum" class="progress-bar-num">{{ value || 0 }}{{ unit || '' }}</view>
+      <view v-if="!title && showNum" class="progress-bar-num">{{ value || 0 }}{{ unit || '' }}</view>
     </view>
     <view class="progress-bar-footer">
       <slot name="footer"></slot>
@@ -75,13 +76,17 @@ export default {
 .ml-progress-bar {
   font-size: $ml-base-font-size;
   .progress-bar-header {
+    display: flex;
+    flex-direction: row;
     text-align: left;
   }
   .progress-bar-chart {
     height: 24rpx;
     position: relative;
     margin: 12rpx 0;
-    padding-right: 80rpx;
+    &.show-num {
+      padding-right: 80rpx;
+    }
     .progress-bar-num {
       position: absolute;
       right: 0;
@@ -91,7 +96,8 @@ export default {
       text-align: left;
     }
   }
-  .progress-bar-title {
+  .progress-header-title {
+    flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -100,5 +106,10 @@ export default {
       text-decoration: underline;
     }
   }
+  .progress-header-num {
+    flex-grow: 1;
+    min-width: 60rpx;
+    text-align: right;
+  }
 }
 </style>

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

@@ -161,6 +161,9 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .ml-select-picker-placeholder {
+    color: $uni-text-color-placeholder;
+  }
 }
 .ml-select-picker-clear-icon {
   width: 34rpx;

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

@@ -17,6 +17,9 @@ import XEUtils from 'xe-utils'
 
 export default {
   name: 'MlText',
+  options: {
+    styleIsolation: 'shared'
+  },
   props: {
     status: String,
     content: String,
@@ -115,4 +118,4 @@ export default {
     display: inline;
   }
 }
-</style>
+</style>

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

@@ -133,7 +133,7 @@ export default {
 .ml-textarea {
   display: block;
   width: 100%;
-  padding: 20rpx 10rpx 10rpx 10rpx;
+  padding: 0 10rpx;
   background: #fff;
   .ml-textarea-placeholder {
     color: $ml-input-color-placeholder;;
@@ -157,6 +157,7 @@ export default {
   }
   .ml-textarea-inp,
   .ml-textarea-simulate {
+    padding: 0;
     height: 280rpx;
     width: 100%;
     font-size: $ml-base-font-size;
@@ -169,7 +170,6 @@ export default {
     flex-grow: 1;
     color: #999999;
     text-align: right;
-    padding-right: 20rpx;
     font-size: $ml-describe-font-size;
   }
 }

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

@@ -8,28 +8,40 @@
           <ml-icon name="close" />
         </view>
       </view>
-      <view v-if="!isFromReadonly && fileList.length < limit" class="ml-upload-image-add">
-        <view class="ml-upload-image-add-btn" @tap="chooseEvent">
-          <view class="ml-upload-image-add-icon">
-            <ml-icon v-if="loading" name="loading" roll />
-            <ml-icon v-else name="add" />
-            <view v-if="loading" class="ml-upload-image-add-loading-text">上传中...</view>
+      <template v-if="!isFromReadonly && fileList.length < limit">
+        <view v-if="hasForm" class="ml-upload-image-form-add-btn" @tap="chooseEvent">
+          <ml-icon v-if="loading" name="loading" roll />
+          <ml-icon v-else name="add-circle" />
+        </view>
+        <view v-else class="ml-upload-image-add">
+          <view class="ml-upload-image-add-btn" @tap="chooseEvent">
+            <view class="ml-upload-image-add-icon">
+              <ml-icon v-if="loading" name="loading" roll />
+              <ml-icon v-else name="add" />
+              <view v-if="loading" class="ml-upload-image-add-loading-text">上传中...</view>
+            </view>
           </view>
         </view>
-      </view>
+      </template>
     </view>
     <!-- 上传文件 -->
     <view v-else class="ml-upload-file-list">
-      <view v-if="!isFromReadonly && fileList.length < limit" class="ml-upload-file-add">
-        <view class="ml-upload-file-add-btn" @tap="chooseEvent">
-          <text class="ml-upload-file-add-icon">
-            <ml-icon v-if="loading" name="loading" roll />
-            <ml-icon v-else name="add" />
-          </text>
-          <text v-if="loading">上传中...</text>
-          <text v-else>添加文件</text>
+      <template v-if="!isFromReadonly && fileList.length < limit">
+        <view v-if="hasForm" class="ml-upload-file-form-add-btn" @tap="chooseEvent">
+          <ml-icon v-if="loading" name="loading" roll />
+          <ml-icon v-else name="add-circle" />
         </view>
-      </view>
+        <view v-else class="ml-upload-file-add">
+          <view class="ml-upload-file-add-btn" @tap="chooseEvent">
+            <text class="ml-upload-file-add-icon">
+              <ml-icon v-if="loading" name="loading" roll />
+              <ml-icon v-else name="add" />
+            </text>
+            <text v-if="loading">上传中...</text>
+            <text v-else>添加文件</text>
+          </view>
+        </view>
+      </template>
       <view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
         <view class="ml-upload-file-left">
           <view class="ml-upload-file-icon">
@@ -217,6 +229,9 @@ export default {
     }
   },
   computed: {
+    hasForm () {
+      return !!this.form
+    },
     isFromReadonly () {
       if (this.readonly) {
         return true
@@ -523,6 +538,7 @@ export default {
 
 <style lang="scss">
 .ml-upload-image-list {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -540,9 +556,9 @@ export default {
     position: absolute;
     right: 0;
     top: 0;
-    width: 40rpx;
-    height: 40rpx;
-    line-height: 40rpx;
+    width: 36rpx;
+    height: 36rpx;
+    line-height: 36rpx;
     font-size: 28rpx;
     text-align: center;
     border-radius: 50%;
@@ -577,9 +593,10 @@ export default {
   }
 }
 .ml-upload-file-list {
+  position: relative;
   .ml-upload-file-add,
   .ml-upload-file-item {
-    margin: 20rpx 0;
+    margin: 10rpx 0;
   }
   .ml-upload-file-item {
     display: flex;
@@ -638,4 +655,11 @@ export default {
     width: 60rpx;
   }
 }
+.ml-upload-image-form-add-btn,
+.ml-upload-file-form-add-btn {
+  position: absolute;
+  top: -74rpx;
+  right: 20rpx;
+  font-size: 44rpx;
+}
 </style>

package/package.json

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