mali-applet-ui 0.0.99 → 0.1.0

package/components/ml-checkbox/ml-checkbox.vue

@@ -5,7 +5,7 @@
     </view>
     <view class="ml-checkbox-content">
       <slot>
-        <text>{{ content }}</text>
+        <view>{{ content }}</view>
       </slot>
     </view>
   </view>
@@ -53,13 +53,13 @@ export default {
 
 <style lang="scss">
 .ml-checkbox {
-  display: inline-block;
+  display: inline-flex;
   margin-right: 20rpx;
+  align-items: center;
   &.is-checked {
     color: $uni-color-primary;
   }
   .ml-checkbox-icon {
-    display: inline-block;
     width: 40rpx;
     margin-right: 10rpx;
     text-align: center;
@@ -67,10 +67,9 @@ export default {
   }
   .ml-checkbox-icon,
   .ml-checkbox-content {
-    vertical-align: middle;
-  }
-  .ml-checkbox-content {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    flex-direction: row;
   }
 }
 </style>

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

@@ -1,6 +1,6 @@
 <template>
-	<view class="ml-radio-group" :class="[className || '', {'is-disabled': disabled, 'is-vertical': vertical}]">
-    <view class="ml-radio-group-item" v-for="(item, index) in options" :key="index">
+	<view class="ml-checkbox-group" :class="[className || '', {'is-disabled': disabled, 'is-vertical': vertical}]">
+    <view class="ml-checkbox-group-item" v-for="(item, index) in options" :key="index">
       <ml-checkbox :value="value.includes(item.value) ? item.value : null" :label="item.value" :content="item.label" :disabled="disabled || item.disabled" @change="changeEvent"></ml-checkbox>
     </view>
   </view>
@@ -33,12 +33,12 @@ export default {
 </script>
 
 <style lang="scss">
-.ml-radio-group {
+.ml-checkbox-group {
   display: inline-flex;
   &.is-vertical {
     width: 100%;
     flex-direction: column;
-    & > .ml-radio-group-item {
+    & > .ml-checkbox-group-item {
       margin: 4rpx 0;
     }
   }

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

@@ -26,7 +26,6 @@ export default {
   name: 'MlForm',
   props: {
     value: Object,
-    data: Object,
     items: Array,
     rules: Object,
 		align: String,
@@ -49,14 +48,58 @@ export default {
   },
   methods: {
     validate () {
-      return new  Promise(resolve => {
-        resolve()
-      })
+      let errMaps = null
+      for (let i = 0; i < this.itemList.length; i++) {
+        const item = this.itemList[i]
+        const errRule = this.validRule(item)
+        if (errRule) {
+          if (!errMaps) {
+            errMaps = {}
+          }
+          errMaps[item.field] = errRule
+          item.errRule = { field: item.field, message: errRule.message }
+        } else {
+          item.errRule = null
+        }
+      }
+      return errMaps ? Promise.resolve(errMaps) : Promise.resolve()
     },
-    validateField (fields) {
-      return new  Promise(resolve => {
-        resolve()
-      })
+    validateField (field) {
+      let errMaps = null
+      if (field) {
+        const item = this.itemList.find(item => item.field === field)
+        if (item) {
+          const errRule = this.validRule(item)
+          if (errRule) {
+            errMaps = { [field]: errRule }
+            item.errRule = { field, message: errRule.message }
+          } else {
+            item.errRule = null
+          }
+        }
+      }
+      return errMaps ? Promise.resolve(errMaps) : Promise.resolve()
+    },
+    validRule (item) {
+      const rules = item && this.rules ? this.rules[item.field] : null
+      const itemValue = item && this.value ? this.value[item.field] : null
+      let errRule = null
+      if (rules) {
+        for (let i = 0; i < rules.length; i++) {
+          const rule = rules[i]
+          if (rule.required) {
+            if (!itemValue) {
+              errRule = rule
+              break
+            }
+            if (rule.type === 'array' && !itemValue.length) {
+              errRule = rule
+              break
+            }
+          }
+        }
+      }
+      return errRule
     },
     updateModel ({ field, value }) {
       this.$emit('input', { ...this.value, [field]: value })

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-form-item" :class="[className, '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical, 'is-required': isRequired}]">
+  <view class="ml-form-item" :class="[className || '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical, 'is-required': isRequired, 'is-error': itemErrRule}]">
     <view class="ml-form-item-header" :style="titleStyle">
       <view v-if="isRequired" class="ml-form-item-header-asterisk">*</view>
       <view class="ml-form-item-header-title">
@@ -19,6 +19,7 @@
           <text v-else class="ml-form-item-default-content">{{ itemValue }}</text>
         </slot>
       </view>
+      <view class="ml-form-item-content-error">{{ itemErrRule.message }}</view>
     </view>
   </view>
 </template>
@@ -47,18 +48,31 @@ export default {
       default: null
     }
   },
+  provide() {
+    return {
+      mlFormItem: this
+    }
+  },
   data () {
     return {
       mId: XEUtils.uniqueId('mlFItem')
     }
   },
+  watch: {
+    itemValue () {
+      if (this.form) {
+        this.form.validateField(this.field)
+      }
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       if (this.form) {
         this.form.itemList.push({
           mId: this.mId,
           title: this.title,
-          field: this.field
+          field: this.field,
+          errRule: null
         })
       }
     })
@@ -84,6 +98,13 @@ export default {
       }
       return false
     },
+    itemErrRule () {
+      if (this.form) {
+        const item = this.form.itemList.find(item => item.mId === this.mId)
+        return item ? item.errRule : null
+      }
+      return null
+    },
     itemValue () {
       const value = this.formData[this.field]
       return XEUtils.eqNull(value) ? '' : value
@@ -147,6 +168,12 @@ export default {
       border: 0;
     }
   }
+  &.is-error {
+    .ml-form-item-content-error {
+      opacity: 1;
+      transform: scaleY(1);
+    }
+  }
   .ml-form-item-header {
     min-height: 70rpx;
     color: rgba(0, 0, 0, 0.65);
@@ -204,8 +231,10 @@ export default {
   }
 }
 .ml-form-item-content {
+  position: relative;
   display: flex;
   align-items: center;
+  flex-direction: column;
   flex-grow: 1;
 }
 .ml-form-item-content-warpper {
@@ -213,4 +242,17 @@ export default {
   width: 100%;
   padding: 10rpx 0;
 }
+.ml-form-item-content-error {
+  position: absolute;
+  left: 0;
+  bottom: -20rpx;
+  width: 100%;
+  color: $uni-color-error;
+  font-size: 24rpx;
+  text-align: left;
+  opacity: 0;
+  transform-origin: center top;
+  transform: scaleY(0);
+  transition: all 0.3s;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-list-group" :class="className">
+  <view class="ml-list-group" :class="[className || '']">
     <view class="ml-list-group-content" :style="contentStyle">
       <scroll-view scroll-y>
         <slot></slot>

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

@@ -74,12 +74,9 @@ export default {
   display: flex;
   flex-direction: row;
   padding: 20rpx;
-  margin: 20rpx 0;
+  margin-bottom: 20rpx;
   border-radius: 10rpx;
   background: #ffffff;
-  &:first-child {
-    margin-top: 0;
-  }
   &:last-child {
     margin-bottom: 0;
   }

package/components/ml-list-menu-item/ml-list-menu-item.vue

@@ -81,10 +81,11 @@ export default {
 .ml-list-menu-item {
   display: flex;
   flex-direction: row;
+  align-items: center;
   border-bottom: 1px solid #e5e5e5;
-  line-height: 90rpx;
+  min-height: 90rpx;
   font-size: 30rpx;
-  padding: 0 20rpx;
+  padding: 10rpx 20rpx;
   background: #ffffff;
   &:first-child {
     border-top: 1px solid #e5e5e5;

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

@@ -1,17 +1,19 @@
 <template>
-  <view class="ml-popup" :class="[className || '', {'is-visible': visible, 'is-animate': isAnimate}]">
-    <view v-if="visible" class="ml-popup-warpper">
+  <view class="ml-popup" :class="[className || '', {'is-visible': visible, 'is-animate': isAnimate}]" @tap="tapMaskEvent">
+    <view v-if="visible" class="ml-popup-warpper" @tap.stop>
       <view v-if="showHeader" class="ml-popup-header">
         <slot name="header">
           <view v-if="title" class="ml-popup-header-title">{{ title }}</view>
         </slot>
       </view>
       <view class="ml-popup-body" :style="bodyStyles">
-        <slot></slot>
+        <scroll-view scroll-y>
+          <slot></slot>
+        </scroll-view>
       </view>
       <view v-if="showConfirmButton || showCancelButton" class="ml-popup-footer">
-        <ml-button width="40%" round @click="cancelEvent">{{ cancelButtonText }}</ml-button>
-        <ml-button status="primary" width="40%" round @click="confirmEvent">{{ confirmButtonText }}</ml-button>
+        <ml-button v-if="showCancelButton" width="40%" round @click="cancelEvent">{{ cancelButtonText }}</ml-button>
+        <ml-button v-if="showConfirmButton" status="primary" width="40%" round @click="confirmEvent">{{ confirmButtonText }}</ml-button>
       </view>
     </view>
   </view>
@@ -28,6 +30,7 @@ export default {
       type: Boolean,
       default: true
     },
+    maskClosable: Boolean,
     showConfirmButton: Boolean,
     confirmButtonText: {
       type: String,
@@ -48,7 +51,8 @@ export default {
   data () {
     return {
       visible: false,
-      isAnimate: false
+      isAnimate: false,
+      animateTime: null
     }
   },
   computed: {
@@ -76,26 +80,41 @@ export default {
   },
   methods: {
     close () {
+      clearTimeout(this.animateTime)
+      this.isAnimate = true
       this.isAnimate = false
-      setTimeout(() => {
+      this.animateTime = setTimeout(() => {
         this.visible = false
+        this.$emit('input', false)
+        this.$emit('show', {})
       }, 300)
     },
     open () {
+      clearTimeout(this.animateTime)
+      this.isAnimate = false
       this.visible = true
-      this.$nextTick(() => {
+      this.animateTime = setTimeout(() => {
         this.isAnimate = true
-      })
+        this.$emit('hide', {})
+      }, 20)
+      this.$emit('input', true)
+    },
+    tapMaskEvent () {
+      if (this.maskClosable) {
+        this.close()
+      }
     },
     cancelEvent () {
       if (this.cancelClosable) {
         this.close()
       }
+      this.$emit('cancel', {})
     },
     confirmEvent () {
       if (this.confirmClosable) {
         this.close()
       }
+      this.$emit('confirm', {})
     }
   }
 }
@@ -125,22 +144,28 @@ export default {
   bottom: 0;
   left: 0;
   width: 100%;
+  padding-bottom: 20rpx;
   transform: translateY(100%);
-  transition: transform 300ms ease 0ms, transform 300ms ease 0ms;
+  transition: transform 0.3s ease, transform 0.3s ease;
   background: #fff;
 }
 .ml-popup-header-title {
   text-align: center;
   height: 70rpx;
   line-height: 70rpx;
+  font-size: $uni-font-size-base;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .ml-popup-body {
   padding: 20rpx;
   overflow: auto;
-  height: 600rpx;
+  height: 500rpx;
 }
 .ml-popup-footer {
   display: flex;
   flex-direction: row;
+  padding: 20rpx;
 }
 </style>

package/components/ml-radio/ml-radio.vue

@@ -5,7 +5,7 @@
     </view>
     <view class="ml-radio-content">
       <slot>
-        <text>{{ content }}</text>
+        <view>{{ content }}</view>
       </slot>
     </view>
   </view>
@@ -44,22 +44,21 @@ export default {
 
 <style lang="scss">
 .ml-radio {
-  display: inline-block;
+  display: inline-flex;
   margin-right: 20rpx;
+  align-items: center;
   &.is-checked {
     color: $uni-color-primary;
   }
   .ml-radio-icon {
-    display: inline-block;
     margin-right: 10rpx;
     font-size: 1.4em;
   }
   .ml-radio-icon,
   .ml-radio-content {
-    vertical-align: middle;
-  }
-  .ml-radio-content {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    flex-direction: row;
   }
 }
 </style>

package/package.json

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