mali-applet-ui 0.1.6 → 0.1.8

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-full-watermark/ml-full-watermark.vue

@@ -28,7 +28,7 @@ export default {
 	.ml-full-watermark-text{
 		float: left;
 		padding: 0 50rpx;
-		color: rgba(169,169,169,0.15);
+		color: rgba(169,169,169,0.2);
 		text-align: center;
 		font-size: 22rpx;
 		margin: 80rpx 0;

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>
@@ -12,10 +12,15 @@
 			type="text"
 			class="ml-input-inp"
 			autocomplete="off"
+			:confirm-type="type === 'search' ? 'search' : 'done'"
 			: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 +41,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 +82,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 +112,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;
@@ -108,6 +132,7 @@ export default {
     border: 1px solid #e5e5e5;
 		font-size: 30rpx;
 		padding: 0 10rpx;
+		color: rgba(0, 0, 0, 0.4);
 	}
 	.ml-input-prefix-icon {
 		border-right: 0;
@@ -123,6 +148,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 +167,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 +179,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-province-city-picker/ml-province-city-picker.vue

@@ -1,15 +1,31 @@
 <template>
-  <view class="ml-region-picker" :class="className" :style="{width: width}">
-    <uni-data-picker
-      v-model="selectVals"
-      popup-title="请选择城市"
-      :placeholder="placeholder"
-      :border="border"
-      :localdata="cityList"
-      :clear-icon="false"
-      :map="{text: optLabelField, value: optValueField}"
-      @change="changeEvent">
-    </uni-data-picker>
+	<view v-if="isFromReadonly" class="ml-province-city-picker is-readonly">
+		<view class="ml-province-city-picker-readonly-content">{{ selectLabel }}</view>
+	</view>
+  <view v-else class="ml-province-city-picker" :class="[className || '', {'is-border': border, 'is-clear': value !== null}]">
+    <view class="ml-province-city-picker-warpper" @click="openPopup()">
+      <view class="ml-province-city-picker-text">
+        <text v-if="value !== null">{{ selectLabel }}</text>
+        <text v-else class="picker-placeholder">{{ placeholder }}</text>
+      </view>
+      <view v-if="clearable && value !== null" class="ml-province-city-picker-clear-icon" @click.stop="clearEvent">
+        <ml-icon name="delete-filling"></ml-icon>
+      </view>
+      <view v-else class="ml-province-city-picker-icon">
+        <ml-icon name="arrow-down" />
+      </view>
+    </view>
+
+    <ml-popup v-model="showPopup" title="请选择省/市" showConfirmButton showCancelButton @confirm="confirmEvent">
+      <picker-view v-if="showPopup" :value="selectVals" @change="changeEvent" class="ml-province-city-picker-view">
+        <picker-view-column>
+          <view class="item" v-for="(item, index) in provinceList" :key="index">{{ item[optLabelField] }}</view>
+        </picker-view-column>
+        <picker-view-column>
+          <view class="item" v-for="(item, index) in cityList" :key="index">{{ item[optLabelField] }}</view>
+        </picker-view-column>
+      </picker-view>
+    </ml-popup>
   </view>
 </template>
 
@@ -25,15 +41,26 @@ export default {
     province: String,
     city: String,
     width: String,
+    isAll: Boolean,
     optionProps: Object,
     className: String
   },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
   data () {
     return {
-      selectVals: []
+      showPopup: false,
+      selectVals: [0]
     }
   },
   computed: {
+		isFromReadonly () {
+			return this.form ? this.form.readonly : false
+		},
     optOptions () {
       return Object.assign({}, this.optionProps)
     },
@@ -43,26 +70,103 @@ export default {
     optValueField () {
       return this.optOptions.value || 'name'
     },
+    selectLabel () {
+      const province = this.province || (this.value ? this.value[0] : '')
+      const city = this.city || (this.value ? this.value[1] : '')
+      const provinceItem = this.provinceList.find(item => item[this.optValueField] === province)
+      const cityItem = provinceItem && provinceItem.children? provinceItem.children.find(item => item[this.optValueField] === city) : null
+      if (provinceItem) {
+        return [provinceItem ? provinceItem[this.optLabelField] : '', cityItem ? cityItem[this.optLabelField] : ''].join(' / ')
+      }
+      return ''
+    },
+    provinceList () {
+      if (this.isAll) {
+        return [{ name: '全部', code: '' }].concat(provinceCity)
+      }
+      return provinceCity
+    },
+    selectProvince () {
+      return this.provinceList[this.selectVals[0] || 0]
+    },
     cityList () {
-      return [{ [`${this.optLabelField}`]: '全部', [`${this.optValueField}`]: '' }].concat(provinceCity)
+      return (this.selectProvince ? this.selectProvince.children : []) || []
+    },
+    selectCity () {
+      return this.cityList[this.selectVals[1] || 0]
+    },
+  },
+  watch: {
+    selectProvince () {
+      this.selectVals[1] = 0
     }
   },
   methods: {
+    closePopup () {
+      this.showPopup = false
+    },
+    openPopup () {
+      this.showPopup = true
+    },
     changeEvent (e) {
-      const value = e.detail.value.map(item => item.value)
-      const province = value ? value[0] : ''
-      this.$emit('update:province', province)
-      this.$emit('update:city', province ? value[1] : '')
+      this.selectVals = e.detail.value
+    },
+    confirmEvent () {
+      const { selectProvince, selectCity } = this
+      const value = [selectProvince ? selectProvince[this.optValueField] : '', selectCity ? selectCity[this.optValueField] : '']
+      this.$emit('update:province', value[0])
+      this.$emit('update:city', value[1])
       this.$emit('input', value)
       this.$emit('change', { value })
+      this.closePopup()
     }
   }
 }
 </script>
 
 <style lang="scss">
-.ml-region-picker {
-  display: inline-block;
-	width: 100%;
+.ml-province-city-picker-readonly-content {
+  padding: 20rpx;
+}
+.ml-province-city-picker {
+  width: 100%;
+  &.is-border {
+    border: 1px solid #e5e5e5;
+    background: #fff;
+  }
+}
+.ml-province-city-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 20rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
+  .ml-province-city-picker-text {
+    flex-grow: 1;
+    padding-right: 10rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-province-city-picker-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-province-city-picker-icon {
+    width: 60rpx;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: #6a6a6a;
+  }
 }
-</style>
+</style>

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

@@ -2,13 +2,16 @@
 	<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" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
-    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border}]">
+  <picker v-else class="ml-select-picker" mode="selector" :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">
         <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-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-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-picker-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/components/ml-year-picker/ml-year-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <picker :value="value" class="ml-year-picker"  mode="date" fields="year" @change="changeEvent">
+  <picker :value="value" class="ml-year-picker" mode="date" fields="year" @change="changeEvent">
 		<view class="ml-year-picker-warpper" :class="[className || '', {'is-border': border}]">
       <view class="ml-year-picker-text">{{ value || '请选择' }}</view>
       <ml-icon class="ml-year-picker-icon" name="arrow-down"></ml-icon>

package/package.json

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