mali-applet-ui 0.0.99 → 0.0.100

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-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.0.100",
   "description": "码里云小程序组件库",
   "files": [
     "components",