mali-applet-ui 0.1.5 → 0.1.7

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

@@ -2,18 +2,22 @@
 	<view v-if="isFromReadonly" class="ml-amount-input is-readonly">
 		<view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
 	</view>
-	<input
-		v-else
-		class="ml-amount-input"
-		v-model="inpVal"
-		type="digit"
-		:class="[{'is-right': align === 'right', 'is-border': border}, className]"
-		autocomplete="off"
-		:placeholder="placeholder"
-		:maxlength="maxLength"
-		:disabled="disabled"
-		@blur="blurEvent"
-		@input="inputEvent" />
+	<view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border}, 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>
 </template>
 
 <script>
@@ -26,7 +30,7 @@ export default {
     virtualHost: true
   },
 	props: {
-		value: String,
+		value: [String, Number],
 		align: String,
 		border: Boolean,
 		min: {
@@ -35,7 +39,7 @@ export default {
 		},
 		max: {
 			type: [Number, String],
-			default: 9999999999999
+			default: 9999999999
 		},
 		maxLength: {
 			type: Number,
@@ -49,6 +53,7 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		showTip: Boolean,
     className: String
 	},
   inject: {
@@ -86,11 +91,43 @@ export default {
 			return Number(this.max)
 			}
 			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 '个'
 		}
 	},
 	watch: {
 		value (val) {
-			this.inpVal = val
+			if (!this.updateModel) {
+				this.inpVal = val
+			}
+			this.updateModel = false
 		},
 		min () {
 			this.checkValue()
@@ -100,28 +137,36 @@ export default {
 		}
 	},
 	created () {
-		this.inpVal = this.value
+		this.updateValue(this.inpVal)
 	},
 	methods: {
+		updateValue (value) {
+			this.inpVal = value === '' || XEUtils.eqNull(value) ? '' : XEUtils.toFixed(XEUtils.toNumber(value), 2)
+		},
 		checkValue  () {
-			if (this.minNum !== null && (Number(this.value) < this.minNum)) {
-			this.$emit('input', this.minNum)
-			return { status: false, value: this.minNum }
+			const numVal = XEUtils.toNumber(this.inpVal)
+			if (this.minNum !== null && (numVal < this.minNum)) {
+				this.$emit('input', this.minNum)
+				return { status: false, value: this.minNum }
 			}
-			if (this.maxNum !== null && (Number(this.value) > this.maxNum)) {
-			this.$emit('input', this.maxNum)
-			return { status: false, value: this.maxNum }
+			if (this.maxNum !== null && (numVal > this.maxNum)) {
+				this.$emit('input', this.maxNum)
+				return { status: false, value: this.maxNum }
 			}
-			const val = XEUtils.floor(Number(this.value), 2)
+			const val = XEUtils.floor(numVal, 2)
 			if (`${val}` !== `${this.value}`) {
 				this.$emit('input', val)
 				return { status: false, value: val }
 			}
-			return { status: true, value: 0 }
+			return { status: true, value: numVal }
 		},
 		blurEvent () {
-			this.checkValue()
-			this.$emit('blur')
+			const rest = this.checkValue()
+			this.updateModel = rest.status
+			this.$nextTick(() => {
+				this.updateValue(rest.value)
+			})
+			this.$emit('blur', { value: this.inpVal })
 		},
 		inputEvent () {
 			const value = this.inpVal
@@ -134,16 +179,35 @@ export default {
 
 <style lang="scss">
 .ml-amount-input {
-	font-size: $uni-font-size-base;
-	padding: 0 10rpx;
-	height: 70rpx;
-	width: 100%;
+	position: relative;
 	&.is-right {
-		text-align: right;
+		.ml-amount-input-inp {
+			text-align: right;
+		}
 	}
 	&.is-border {
-    border: 1px solid #e5e5e5;
-    border-radius: 10rpx;
+		.ml-amount-input-inp {
+			border: 1px solid #e5e5e5;
+			border-radius: 10rpx;
+		}
+	}
+	.ml-amount-tip {
+		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 {
+		font-size: $uni-font-size-base;
+		width: 100%;
+		height: 70rpx;
+		padding: 0 10rpx;
 	}
 }
 .ml-amount-input-readonly-content {

package/components/ml-button/ml-button.vue

@@ -93,15 +93,17 @@ export default {
     &.size-medium {
       height: 90rpx;
       line-height: 90rpx;
-      font-size:  $uni-font-size-lg;
+      font-size: 36rpx;
     }
     &.size-small {
       height: 70rpx;
       line-height: 70rpx;
+      font-size: 28rpx;
     }
     &.size-mini {
       height: 60rpx;
       line-height: 60rpx;
+      font-size: 24rpx;
     }
     &.status-primary {
       color: #ffffff;

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

@@ -10,11 +10,12 @@
       <view class="ml-form-item-content-warpper">
         <slot>
           <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-input>
+          <ml-number-input v-if="matchComponent('MlNumberInput')" :value="itemValue" border @change="modelEvent"></ml-number-input>
           <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
           <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
           <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" :showVoice="renderOpts.showVoice || true" border @change="modelEvent"></ml-textarea>
           <ml-upload v-else-if="matchComponent('MlUpload')" :value="itemValue" :mediatype="renderOpts.mediatype || 'image'" @change="modelEvent"></ml-upload>
-          <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" border @change="modelEvent"></ml-amount-input>
+          <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" :showTip="itemVertical" border @change="modelEvent"></ml-amount-input>
           <ml-amount-text v-else-if="matchComponent('MlAmountText')" :value="itemValue" @change="modelEvent"></ml-amount-text>
           <text v-else class="ml-form-item-default-content">{{ itemValue }}</text>
         </slot>
@@ -176,7 +177,6 @@ export default {
   }
   .ml-form-item-header {
     min-height: 70rpx;
-    color: rgba(0, 0, 0, 0.65);
   }
   .ml-form-item-header-asterisk {
     display: inline;
@@ -192,6 +192,7 @@ export default {
   &:not(.is-vertical) {
     .ml-form-item-header {
       flex-shrink: 0;
+      color: rgba(0, 0, 0, 0.65);
     }
   }
   &.title-align-left {

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

@@ -2,7 +2,7 @@
 	<view v-if="isFromReadonly" class="ml-input is-readonly">
 		<view class="ml-input-readonly-content">{{ inpVal }}</view>
 	</view>
-	<view v-else class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled}]">
+	<view v-else class="ml-input" :class="[className || '', {'is-right': align === 'right', 'is-border': border, 'is-prefix': prefixIcon || type === 'search', 'is-suffix': suffixIcon, 'is-disabled': disabled, 'is-clear': clearable && inpVal}]">
 		<view v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
 			<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
 			<ml-icon v-else name="search"></ml-icon>
@@ -13,8 +13,13 @@
 			class="ml-input-inp"
 			autocomplete="off"
 			:placeholder="placeholder"
-			@input="inputEvent" 
+			:maxlength="maxlength"
+			@input="inputEvent"
+			@blur="blurEvent"
 			@confirm="confirmEvent"/>
+		<view v-if="clearable && inpVal" class="ml-input-clear-icon" @click.stop="clearEvent">
+			<ml-icon name="delete-filling"></ml-icon>
+		</view>
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
 			<ml-icon :className="suffixIcon"></ml-icon>
 		</view>
@@ -35,10 +40,15 @@ export default {
 		disabled: Boolean,
 		prefixIcon: String,
 		suffixIcon: String,
+		clearable: Boolean,
 		placeholder: {
 			type: String,
 			default: '请输入'
 		},
+		maxlength: {
+			type: [String, Number],
+			default: 30
+		},
 		className: String
 	},
   inject: {
@@ -71,9 +81,17 @@ export default {
 			this.$emit('input', value)
 			this.$emit('change', { value })
 		},
+		blurEvent () {
+			this.$emit('blur', { value: this.inpVal })
+		},
 		confirmEvent () {
 			const value = this.inpVal
 			this.$emit('confirm', { value })
+		},
+		clearEvent () {
+			this.inpVal = ''
+			this.inputEvent()
+      this.$emit('clear', { value: this.inpVal })
 		}
 	}
 }
@@ -93,6 +111,16 @@ export default {
 		width: 100%;
 		font-size: $uni-font-size-base;
 	}
+	.ml-input-clear-icon {
+		width: 60rpx;
+		display: flex;
+		flex-shrink: 0;
+    align-items: center;
+		justify-content: center;
+		background: #fff;
+		color: #c0c4cc;
+  	border-radius: 0 10rpx 10rpx 0;
+	}
 	.ml-input-prefix-icon,
 	.ml-input-suffix-icon {
 		min-width: 70rpx;
@@ -118,6 +146,10 @@ export default {
 	&.is-prefix,
 	&.is-suffix,
 	&.is-border {
+		.ml-input-clear-icon {
+    	border: 1px solid #e5e5e5;
+    	border-left: 0;
+		}
 		.ml-input-inp {
     	border: 1px solid #e5e5e5;
     	border-radius: 10rpx;
@@ -133,6 +165,10 @@ export default {
 		}
 	}
 	&.is-suffix {
+		.ml-input-clear-icon {
+    	border-radius: 0;
+    	border-right: 0;
+		}
 		.ml-input-suffix-icon {
     	border-radius: 0 10rpx 10rpx 0;
 		}
@@ -141,6 +177,12 @@ export default {
     	border-radius: 10rpx 0 0 10rpx;
 		}
 	}
+	&.is-clear {
+		.ml-input-inp {
+			padding-right: 0;
+			border-right: 0;
+		}
+	}
 	&.is-prefix.is-suffix {
 		.ml-input-inp {
 			border-radius: 0;

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

@@ -8,17 +8,20 @@
 		:placeholder="placeholder"
 		:maxlength="maxLength"
 		:disabled="disabled"
+		@blur="blurEvent"
 		@input="inputEvent" />
 </template>
 
 <script>
+import XEUtils from 'xe-utils'
+
 export default {
 	name: 'MlNumberInput',
   options: {
     virtualHost: true
   },
 	props: {
-		value: String,
+		value: [String, Number],
 		align: String,
 		border: Boolean,
 		type: String,
@@ -43,13 +46,29 @@ export default {
 	},
 	watch: {
 		value (val) {
-			this.inpVal = val
+			if (!this.updateModel) {
+				this.inpVal = val
+			}
+			this.updateModel = false
 		}
 	},
 	created () {
 		this.inpVal = this.value
 	},
 	methods: {
+		checkValue  () {
+			const numVal = XEUtils.toNumber(this.inpVal)
+			if (`${numVal}` !== `${this.value}`) {
+				this.$emit('input', numVal)
+				return { status: false, value: numVal }
+			}
+			return { status: true, value: numVal }
+		},
+		blurEvent () {
+			const rest = this.checkValue()
+			this.updateModel = rest.status
+			this.$emit('blur', { value: this.inpVal })
+		},
 		inputEvent () {
 			this.$emit('input', this.inpVal)
 		}

package/components/ml-popup/ml-popup.vue

@@ -146,7 +146,7 @@ export default {
   width: 100%;
   padding-bottom: 20rpx;
   transform: translateY(100%);
-  transition: transform 0.3s ease, transform 0.3s ease;
+  transition: transform 0.25s ease, transform 0.3s ease;
   background: #fff;
 }
 .ml-popup-header-title {

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

@@ -3,12 +3,15 @@
 		<view class="ml-select-picker-readonly-content">{{ selectLabel }}</view>
 	</view>
   <picker v-else class="ml-select-picker" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
-    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border}]">
+    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border, 'is-clear': value !== null}]">
       <view class="ml-select-picker-text">
         <text v-if="value !== null">{{ selectLabel }}</text>
         <text v-else class="picker-placeholder">{{ placeholder }}</text>
       </view>
-      <view class="ml-select-picker-icon">
+      <view v-if="clearable && value !== null" class="ml-select-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-down" />
       </view>
     </view>
@@ -28,6 +31,7 @@ export default {
       type: String,
       default: '请选择'
     },
+    clearable: Boolean,
     options: Array,
     optionProps: Object,
     width: String,
@@ -83,6 +87,12 @@ export default {
       }
       this.$emit('input', value)
       this.$emit('change', { value, option: item })
+    },
+    clearEvent () {
+      const value = null
+      this.$emit('input', value)
+      this.$emit('change', { value, option: null })
+      this.$emit('clear', { value })
     }
   }
 }
@@ -109,11 +119,12 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 10rpx;
+  padding: 0 20rpx;
   height: 70rpx;
   border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
+    background: #fff;
   }
 }
 .ml-select-picker-text {
@@ -123,8 +134,22 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.ml-select-clear-icon {
+  width: 60rpx;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  color: #c0c4cc;
+  border-radius: 0 10rpx 10rpx 0;
+}
 .ml-select-picker-icon {
-  display: inline;
+  width: 60rpx;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
   color: #6a6a6a;
 }
 </style>

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

@@ -7,7 +7,7 @@
 		<view v-else>
 			<textarea class="ml-textarea-inp" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" :show-count="false" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
 			<view v-if="showWordLimit" class="ml-textarea-word-count">
-				<VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput>
+				<!-- <VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput> -->
 				<view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
 			</view>
 		</view>
@@ -37,7 +37,7 @@ export default {
     },
     maxLength: {
       type: Number,
-      default: 250
+      default: 200
     },
     placeholder: {
       type: String,

package/package.json

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