mali-applet-ui 0.1.6 → 0.1.7

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

@@ -4,8 +4,8 @@
 	</view>
 	<view v-else class="ml-amount-input" :class="[{'is-right': align === 'right', 'is-border': border}, className]">
 		<view v-if="showTip" class="ml-amount-tip">
-			<text>首位：</text>
-			<text>{{ firstNumLabel }}</text>
+			<view>首位：</view>
+			<view class="ml-amount-tip-label">{{ firstNumLabel }}</view>
 		</view>
 		<input
 			v-model="inpVal"
@@ -30,7 +30,7 @@ export default {
     virtualHost: true
   },
 	props: {
-		value: String,
+		value: [String, Number],
 		align: String,
 		border: Boolean,
 		min: {
@@ -39,7 +39,7 @@ export default {
 		},
 		max: {
 			type: [Number, String],
-			default: 9999999999999
+			default: 9999999999
 		},
 		maxLength: {
 			type: Number,
@@ -124,7 +124,10 @@ export default {
 	},
 	watch: {
 		value (val) {
-			this.inpVal = val
+			if (!this.updateModel) {
+				this.inpVal = val
+			}
+			this.updateModel = false
 		},
 		min () {
 			this.checkValue()
@@ -134,14 +137,14 @@ export default {
 		}
 	},
 	created () {
-		this.updateValue()
+		this.updateValue(this.inpVal)
 	},
 	methods: {
-		updateValue () {
-			this.inpVal = this.value ? XEUtils.toFixed(XEUtils.toNumber(this.value), 2) : ''
+		updateValue (value) {
+			this.inpVal = value === '' || XEUtils.eqNull(value) ? '' : XEUtils.toFixed(XEUtils.toNumber(value), 2)
 		},
 		checkValue  () {
-			const numVal = XEUtils.toNumber(this.value)
+			const numVal = XEUtils.toNumber(this.inpVal)
 			if (this.minNum !== null && (numVal < this.minNum)) {
 				this.$emit('input', this.minNum)
 				return { status: false, value: this.minNum }
@@ -155,12 +158,15 @@ export default {
 				this.$emit('input', val)
 				return { status: false, value: val }
 			}
-			return { status: true, value: 0 }
+			return { status: true, value: numVal }
 		},
 		blurEvent () {
-			this.checkValue()
-			this.updateValue()
-			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
@@ -186,10 +192,16 @@ export default {
 		}
 	}
 	.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;

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

@@ -10,6 +10,7 @@
       <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>

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>
@@ -14,8 +14,12 @@
 			autocomplete="off"
 			:placeholder="placeholder"
 			:maxlength="maxlength"
-			@input="inputEvent" 
+			@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>
@@ -36,13 +40,14 @@ export default {
 		disabled: Boolean,
 		prefixIcon: String,
 		suffixIcon: String,
+		clearable: Boolean,
 		placeholder: {
 			type: String,
 			default: '请输入'
 		},
 		maxlength: {
-			type: String,
-			default: '50'
+			type: [String, Number],
+			default: 30
 		},
 		className: String
 	},
@@ -76,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 })
 		}
 	}
 }
@@ -98,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;
@@ -123,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;
@@ -138,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;
 		}
@@ -146,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.6",
+  "version": "0.1.7",
   "description": "码里云小程序组件库",
   "files": [
     "components",