mali-applet-ui 0.0.46 → 0.0.47

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

@@ -1,6 +1,6 @@
 <template>
 	<view v-if="isFromReadonly" class="ml-amount-input is-readonly">
-		<view class="ml-amount-input-readonly-content">{{ amountLabel }}</view>
+		<view class="ml-amount-input-readonly-content">￥{{ amountLabel }}</view>
 	</view>
 	<input
 		v-else
@@ -146,6 +146,6 @@ export default {
 	}
 }
 .ml-amount-input-readonly-content {
-	padding: 20rpx;
+	padding: 20rpx 4rpx;
 }
 </style>

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

@@ -55,6 +55,6 @@ export default {
 
 <style lang="scss">
 .ml-date-picker-readonly-content {
-	padding: 20rpx;
+	padding: 20rpx 4rpx;
 }
 </style>

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

@@ -1,21 +1,17 @@
 <template>
-  <view class="ml-form" :class="[className || '']">
-    <uni-forms :key="fKey" ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
-      <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 class="ml-form" :class="[className || '', {'is-border': border}]">
+    <slot>
+      <view v-for="(item, index) in items" :key="index">
+        <ml-form-group v-if="item.children && item.children.length" :title="item.title">
+          <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>
   </view>
 </template>
 
 <script>
-import XEUtils from 'xe-utils'
-
 export default {
   name: 'MlForm',
   options: {
@@ -26,6 +22,9 @@ export default {
     data: Object,
     items: Array,
     rules: Object,
+		align: String,
+    titleAlign: String,
+    border: Boolean,
     readonly: Boolean,
     vertical: Boolean,
     labelWidth: String,
@@ -38,43 +37,17 @@ export default {
   },
   data () {
     return {
-      fKey: 1
-    }
-  },
-  computed: {
-    formRules () {
-      const rest = {}
-      XEUtils.each(this.rules, (rules, field) => {
-        rest[field] = {
-          rules: rules.map(item => {
-            return { ...item, errorMessage: item.message }
-          })
-        }
-      })
-      return rest
     }
   },
-  created () {
-    this.$nextTick(() => {
-      this.fKey++
-    })
-  },
   methods: {
-    getProp (item, prop, defultValue) {
-      return (item.itemRender.props ? item.itemRender.props[prop] : null) || defultValue
-    },
     validate () {
-      return this.$refs.uniForm.validate().then(() => {
-        return null
-      }).catch(() => {
-        return {}
+      return new  Promise(resolve => {
+        resolve()
       })
     },
     validateField (fields) {
-      return this.$refs.uniForm.validateField(fields).then(() => {
-        return null
-      }).catch(() => {
-        return {}
+      return new  Promise(resolve => {
+        resolve()
       })
     },
     updateModel ({ field, value }) {

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

@@ -1,6 +1,13 @@
 <template>
   <view class="ml-form-group" :class="className">
-    <slot></slot>
+    <view v-if="title || $slots.title" class="ml-form-group-title">
+      <slot name="title">
+        <text>{{ title }}</text>
+      </slot>
+    </view>
+    <view class="ml-form-group-content">
+      <slot></slot>
+    </view>
   </view>
 </template>
 
@@ -11,6 +18,7 @@ export default {
     virtualHost: true
   },
   props: {
+    title: String,
     className: String
   }
 }
@@ -18,9 +26,15 @@ export default {
 
 <style lang="scss">
 .ml-form-group {
-  margin: 10rpx 0;
-  padding: 20rpx;
+  margin: 20rpx 0;
   border-radius: 10rpx;
   background: #ffffff;
+  .ml-form-group-title {
+    display: flex;
+    align-items: center;
+    min-height: 80rpx;
+    padding: 0 20rpx;
+    border-bottom: 1px solid #e5e5e5;
+  }
 }
 </style>

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

@@ -1,23 +1,24 @@
 <template>
-  <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>
-        <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" @change="modelEvent"></ml-amount-input>
-        <ml-amount-text v-else-if="matchComponent('MlAmountText')" :value="itemValue" @change="modelEvent"></ml-amount-text>
-        <view v-else>{{ itemValue }}</view>
+  <view class="ml-form-item" :class="[className, '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical}]">
+    <view class="ml-form-item-title" :style="titleStyle">
+      <slot name="title">
+        <text>{{ title }}</text>
       </slot>
-    </uni-forms-item>
+    </view>
+    <view class="ml-form-item-content">
+      <view class="ml-form-item-content-warpper">
+        <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>
+          <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" @change="modelEvent"></ml-amount-input>
+          <ml-amount-text v-else-if="matchComponent('MlAmountText')" :value="itemValue" @change="modelEvent"></ml-amount-text>
+          <text v-else style="color:red">{{ itemValue }}</text>
+        </slot>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -30,10 +31,9 @@ export default {
   props: {
     title: String,
     field: String,
-    vertical: {
-      type: Boolean,
-       default: null
-    },
+		align: String,
+    titleAlign: String,
+    vertical: Boolean,
     labelWidth: String,
     itemRender: Object,
     className: String
@@ -45,10 +45,16 @@ export default {
     }
   },
   computed: {
+    titleStyle () {
+      return this.itemLabelWidth ? `width:${this.itemLabelWidth};` : ''
+    },
+    isFormBorder () {
+      return this.form ? this.form.border : false
+    },
     isRequired () {
-      if (this.form && this.form.formRules) {
-        const rules = this.form.formRules[this.field]
-        if (rules && rules.some(item => item.required)) {
+      if (this.form && this.form.rules) {
+        const currRules = this.form.rules[this.field]
+        if (currRules && currRules.some(item => item.required)) {
           return true
         }
       }
@@ -63,12 +69,23 @@ export default {
     renderOpts () {
       return this.itemRender || {}
     },
+    itemAlign () {
+      if (this.align) {
+        return this.align
+      }
+      return this.form ? this.form.align : ''
+    },
+    itemTitleAlign () {
+      if (this.titleAlign) {
+        return this.titleAlign
+      }
+      return this.form ? this.form.titleAlign : ''
+    },
     itemVertical () {
-      let vertical = this.vertical
-      if (!vertical) {
-        vertical = this.form ? this.form.vertical : ''
+      if (this.vertical) {
+        return true
       }
-      return vertical ? 'top' : 'left'
+      return this.form ? this.form.vertical : false
     },
     itemLabelWidth () {
       let labelWidth = this.labelWidth
@@ -84,18 +101,8 @@ export default {
   created () {
     this.init()
   },
-  watch: {
-    itemVertical () {
-      this.init()
-    }
-  },
   methods: {
     init () {
-      this.$nextTick(() => {
-        if (this.$refs.uniFormItem) {
-          this.$refs.uniFormItem.localLabelPos = this.itemVertical
-        }
-      })
     },
     matchComponent (name) {
       return this.renderOpts.name === name
@@ -106,3 +113,75 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.ml-form-item {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  font-size: $uni-font-size-base;
+  padding: 10rpx 20rpx;
+  &.is-border {
+    border-bottom: 1px solid #e5e5e5;
+    &:last-child {
+      border: 0;
+    }
+  }
+  .ml-form-item-title {
+    min-height: 70rpx;
+    color: rgba(0, 0, 0, 0.65);
+  }
+  &.is-vertical {
+    flex-direction: column;
+  }
+  &:not(.is-vertical) {
+    .ml-form-item-title {
+      flex-shrink: 0;
+    }
+  }
+  &.title-align-left {
+    .ml-form-item-title {
+      text-align: left;
+    }
+  }
+  &.title-align-center {
+    .ml-form-item-title {
+      text-align: center;
+    }
+  }
+  &.title-align-right {
+    .ml-form-item-title {
+      text-align: right;
+    }
+  }
+  &.align-left {
+    .ml-form-item-content {
+      text-align: left;
+    }
+  }
+  &.align-center {
+    .ml-form-item-content {
+      text-align: center;
+    }
+  }
+  &.align-right {
+    .ml-form-item-content {
+      text-align: right;
+    }
+  }
+  .ml-form-item-title {
+    display: flex;
+    align-items: center;
+    padding-right: 20rpx;
+  }
+}
+.ml-form-item-content {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+}
+.ml-form-item-content-warpper {
+  flex-grow: 1;
+  width: 100%;
+}
+</style>

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

@@ -81,10 +81,11 @@ export default {
 
 <style lang="scss">
 .ml-input {
+	flex-grow: 1;
 	display: flex;
 	flex-direction: row;
 	.ml-input-readonly-content {
-		padding: 20rpx;
+		padding: 20rpx 4rpx;
 	}
 	.ml-input-inp {
 		padding: 0 20rpx;

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

@@ -94,6 +94,8 @@ export default {
 
 <style lang="scss">
 .ml-textarea {
+  display: block;
+  width: 100%;
 	font-size: $uni-font-size-base;
   padding: 20rpx 10rpx 10rpx 20rpx;
   &.is-border {

package/package.json

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