mali-applet-ui 0.0.39 → 0.0.40

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

@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      this.$emit('input', this.selectVal)
-      this.$emit('change', { value: this.selectVal })
+    changeEvent (value) {
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

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

@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      this.$emit('input', this.selectVal)
-      this.$emit('change', { value: this.selectVal })
+    changeEvent (value) {
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue

@@ -32,8 +32,8 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      const [startDate, endDate] = this.selectDates
+    changeEvent (value) {
+      const [startDate, endDate] = value
       this.$emit('update:startDate', startDate)
       this.$emit('update:endDate', endDate)
       this.$emit('change', { startDate, endDate })

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

@@ -1,7 +1,14 @@
 <template>
   <view class="ml-form" :class="[className || '']">
     <uni-forms :key="fKey" ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
-      <slot></slot>
+      <slot>
+        <view v-for="(item, index) in items" :key="index">
+          <ml-form-group v-if="item.children && item.children.length">
+            <ml-form-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :title="cItem.title" :field="cItem.field" :itemRender="cItem.itemRender" @modelvalue="updateModel"></ml-form-item>
+          </ml-form-group>
+          <ml-form-item v-else :title="item.title" :field="item.field" :itemRender="item.itemRender" @modelvalue="updateModel"></ml-form-item>
+        </view>
+      </slot>
     </uni-forms>
   </view>
 </template>
@@ -15,9 +22,11 @@ export default {
     virtualHost: true
   },
   props: {
+    value: Object,
     data: Object,
     items: Array,
     rules: Object,
+    readonly: Boolean,
     vertical: Boolean,
     labelWidth: String,
     className: String
@@ -51,8 +60,8 @@ export default {
     })
   },
   methods: {
-    matchComponent (item, name) {
-      return item.itemRender && item.itemRender.name === name
+    getProp (item, prop, defultValue) {
+      return (item.itemRender.props ? item.itemRender.props[prop] : null) || defultValue
     },
     validate () {
       return this.$refs.uniForm.validate().then(() => {
@@ -67,6 +76,9 @@ export default {
       }).catch(() => {
         return {}
       })
+    },
+    updateModel ({ field, value}) {
+      this.$emit('input', { ...this.value, [field]: value })
     }
   }
 }

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

@@ -1,13 +1,21 @@
 <template>
-  <uni-forms-item
-    ref="uniFormItem"
-    :class="className"
-    :label="title"
-    :name="field"
-    :label-width="itemLabelWidth"
-    :label-position="itemVertical">
-    <slot></slot>
-  </uni-forms-item>
+  <view class="ml-form-item">
+    <uni-forms-item
+      ref="uniFormItem"
+      :class="className"
+      :label="title"
+      :name="field"
+      :label-width="itemLabelWidth"
+      :label-position="itemVertical">
+      <slot>
+        <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-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" border @change="modelEvent"></ml-textarea>
+        <view v-else>{{ itemValue }}</view>
+      </slot>
+    </uni-forms-item>
+  </view>
 </template>
 
 <script>
@@ -24,6 +32,7 @@ export default {
        default: null
     },
     labelWidth: String,
+    itemRender: Object,
     className: String
   },
   inject: {
@@ -33,6 +42,15 @@ export default {
     }
   },
   computed: {
+    itemValue () {
+      return this.formData[this.field]
+    },
+    formData () {
+      return (this.form ? this.form.value : {}) || {}
+    },
+    renderOpts () {
+      return this.itemRender || {}
+    },
     itemVertical () {
       let vertical = this.vertical
       if (!vertical) {
@@ -64,7 +82,13 @@ export default {
       this.$nextTick(() => {
         this.$refs.uniFormItem.localLabelPos = this.itemVertical
       })
+    },
+    matchComponent (name) {
+      return this.renderOpts.name === name
+    },
+    modelEvent (params) {
+      this.$emit('modelvalue', { field: this.field, ...params })
     }
   }
 }
-</script>
+</script>

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

@@ -1,7 +1,7 @@
 <template>
 	<view 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-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
-			<ml-icon v-if="prefixIcon" :class="prefixIcon"></ml-icon>
+			<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
 			<ml-icon v-else name="search"></ml-icon>
 		</view>
 		<input
@@ -13,7 +13,7 @@
 			@input="inputEvent" 
 			@confirm="confirmEvent"/>
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
-			<ml-icon :class="suffixIcon"></ml-icon>
+			<ml-icon :className="suffixIcon"></ml-icon>
 		</view>
 	</view>
 </template>

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

@@ -67,11 +67,12 @@ export default {
   },
   methods: {
     inputEvent () {
-      if (this.maxLength && this.inpVal && this.inpVal.length > this.maxLength) {
-        this.$emit('input', this.inpVal.slice(0, this.maxLength))
-      } else {
-        this.$emit('input', this.inpVal)
+      let value = this.inpVal
+      if (this.maxLength && value &&value.length > this.maxLength) {
+        value = value.slice(0, this.maxLength)
       }
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

package/package.json

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