mali-applet-ui 0.0.35 → 0.0.38

package/components/ml-approval-type/ml-approval-type.vue

@@ -0,0 +1,50 @@
+<template>
+  <view class="ml-approval-type" :class="className" :style="styles">{{ currLabel }}</view>
+</template>
+
+<script>
+export default {
+  name: 'MlApprovalType',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [String, Number],
+    className: String
+  },
+  data () {
+    return {
+      statusList: [
+        { value: 0, label: '起草中', color: '' },
+        { value: 1, label: '审批中', color: '#09B2FE' },
+        { value: 2, label: '已通过', color: '#42E38D' },
+        { value: 3, label: '已驳回', color: '#FF4A4A' },
+        { value: 4, label: '会签中', color: '#F4788E' },
+        { value: 5, label: '处理中', color: '#FFA500' },
+        { value: 6, label: '已完成', color: '#2497FF' }
+      ]
+    }
+  },
+  computed: {
+    selectItem () {
+      return this.statusList.find(item => String(item.value) === String(this.value))
+    },
+    currLabel () {
+      return this.selectItem ? this.selectItem.label : ''
+    },
+    styles () {
+      return this.selectItem && this.selectItem.color? `background:${this.selectItem.color};` : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-approval-type {
+  display: inline-block;
+  color: #ffffff;
+  padding: 6rpx 18rpx;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+}
+</style>

package/components/ml-button/ml-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="ml-button" :class="[className, `type-${type}`, status ? `status-${status}` : '', round ? 'is-round' : '']" @tap="tapEvent" @click="clickEvent">
+  <button class="ml-button" :class="[className || '', `type-${type}`, status ? `status-${status}` : '', round ? 'is-round' : '']" @tap="tapEvent" @click="clickEvent">
     <slot>{{ content }}</slot>
   </button>
 </template>
@@ -18,10 +18,23 @@ export default {
       type: String,
       default: 'button'
     },
+    redirect: Boolean,
+    url: String,
     className: String
   },
   methods: {
     tapEvent () {
+      if (this.url) {
+        if (this.redirect) {
+          uni.redirectTo({
+            url: this.url
+          })
+        } else {
+          uni.navigateTo({
+            url: this.url
+          })
+        }
+      }
       this.$emit('tap', {})
     },
     clickEvent () {
@@ -33,35 +46,59 @@ export default {
 
 <style lang="scss">
 .ml-button {
-  width: 100%;
-  margin: 0 10rpx;
+  &.type-text {
+    display: inline;
+    border: 0;
+    padding: 0 10rpx;
+    line-height: 1.5;
+    vertical-align: middle;
+    background: transparent;
+    &.status-primary {
+      color: $uni-color-primary;
+    }
+    &.status-success {
+      color: $uni-color-success;
+    }
+    &.status-info {
+      color: #909399;
+    }
+    &.status-warning {
+      color: $uni-color-warning;
+    }
+    &.status-danger {
+      color: $uni-color-error;
+    }
+  }
   &.type-button {
+    width: 100%;
+    margin: 0 10rpx;
+    padding: 0 20rpx;
     line-height: 80rpx;
     border: 1px solid #e5e5e5;
     border-radius: 10rpx;
+    &.status-primary {
+      color: #ffffff;
+      background: $uni-color-primary;
+    }
+    &.status-success {
+      color: #ffffff;
+      background: $uni-color-success;
+    }
+    &.status-info {
+      color: #ffffff;
+      background: #909399;
+    }
+    &.status-warning {
+      color: #ffffff;
+      background: $uni-color-warning;
+    }
+    &.status-danger {
+      color: #ffffff;
+      background: $uni-color-error;
+    }
   }
   &.is-round {
     border-radius: 40rpx;
   }
-  &.status-primary {
-    color: #ffffff;
-    background: $uni-color-primary;
-  }
-  &.status-success {
-    color: #ffffff;
-    background: $uni-color-success;
-  }
-  &.status-info {
-    color: #ffffff;
-    background: #909399;
-  }
-  &.status-warning {
-    color: #ffffff;
-    background: $uni-color-warning;
-  }
-  &.status-danger {
-    color: #ffffff;
-    background: $uni-color-error;
-  }
 }
 </style>

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

@@ -1,7 +1,9 @@
 <template>
-	<view class="ml-checkbox" :class="[className, {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
-    <ml-icon class="checkbox-icon" :name="checked ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
-    <text class="checkbox-content">
+	<view class="ml-checkbox" :class="[className || '', {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
+    <text class="ml-checkbox-icon">
+      <ml-icon :name="checked ? 'checkbox-checked' : (indeterminate ? 'checkbox-indeterminate' : 'checkbox-unchecked')"></ml-icon>
+    </text>
+    <text class="ml-checkbox-content">
       <slot>
         <text>{{ content }}</text>
       </slot>
@@ -56,7 +58,7 @@ export default {
   &.is-checked {
     color: $uni-color-primary;
   }
-  .checkbox-icon {
+  .ml-checkbox-icon {
     display: inline-block;
     width: 40rpx;
     margin-right: 5rpx;

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-group" :class="[className, {'is-disabled': disabled, 'is-vertical': vertical}]">
+	<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">
       <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>

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

@@ -1,9 +1,9 @@
 <template>
-  <view class="ml-chunk-group" :class="[className, status ? `status-${status}` : '', align ? `align-${align}` : '', {'is-vertical': vertical, 'is-header': title || $slots.title}]">
+  <view class="ml-chunk-group" :class="[className || '', status ? `status-${status}` : '', align ? `align-${align}` : '', {'is-vertical': vertical, 'is-header': title || $slots.title}]">
     <view v-if="title || $slots.title" class="ml-chunk-group-title">
       <slot name="title">
         <view v-if="prefixIcon" class="ml-chunk-group-left-icon">
-          <ml-icon :className="prefixIcon"></ml-icon>
+          <ml-icon :className="prefixIcon" :status="status"></ml-icon>
         </view>
         <text class="ml-chunk-group-title-content">{{ title }}</text>
       </slot>
@@ -47,7 +47,7 @@ export default {
     display: flex;
     flex-direction: row;
     align-items: center;
-    height: 70rpx;
+    height: 80rpx;
     padding: 0 20rpx ;
   }
   .ml-chunk-group-left-icon {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-chunk-item" :class="[className, span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles">
+  <view class="ml-chunk-item" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles" @click="clickEvent" @tap="tapEvent">
     <slot></slot>
   </view>
 </template>
@@ -29,6 +29,14 @@ export default {
     styles () {
       return this.width ? `width: ${this.width};` : '' 
     }
+  },
+  methods: {
+    clickEvent () {
+      this.$emit('click', {})
+    },
+    tapEvent () {
+      this.$emit('tap', {})
+    }
   }
 }
 </script>
@@ -37,7 +45,7 @@ export default {
 .ml-chunk-item {
   display: flex;
   flex-direction: column;
-  padding: 10rpx;
+  padding: 20rpx 10rpx;
   line-height: 50rpx;
   $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
           37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,

package/components/ml-col/ml-col.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-col" :class="[className, span && !width ? `span-${span}` : '', align ? `align-${align}` : '', width ? 'is-fixed' : '']" :style="styles">
+  <view class="ml-col" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-flex': flex,'is-fixed': width || shrink}]" :style="styles">
     <slot></slot>
   </view>
 </template>
@@ -12,6 +12,8 @@ export default {
   },
 	props: {
     span: [String, Number],
+    flex: Boolean,
+    shrink: Boolean,
     align: String,
     width: String,
     className: String
@@ -29,6 +31,19 @@ export default {
   $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
           37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
           70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
+  &.is-flex {
+    display: flex;
+    flex-direction: row;
+    &.align-left {
+      justify-content: left;
+    }
+    &.align-center {
+      justify-content: center;
+    }
+    &.align-right {
+      justify-content: right;
+    }
+  }
   &.align-left {
     text-align: left;
   }

package/components/ml-fixed-bottom/ml-fixed-bottom.vue

@@ -0,0 +1,33 @@
+<template>
+  <view class="ml-fixed-bottom" :class="[className || '']" :style="styles">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlFixedBottom',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    bottom: String,
+    className: String
+  },
+  computed: {
+    styles () {
+      return this.bottom ? `bottom:${this.bottom};` : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-fixed-bottom {
+  display: flex;
+  flex-direction: row;
+  position: fixed;
+  width: 100%;
+  bottom: 40rpx;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-form" :class="[className, {'is-vertical': vertical}]">
+  <view class="ml-form" :class="[className || '', {'is-vertical': vertical}]">
     <uni-forms ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
       <slot></slot>
     </uni-forms>

package/components/ml-icon/ml-icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <text class="ml-icon" :class="[className, name ? `${prefix}${name}` : '']" @click="clickEvent"></text>
+  <text class="ml-icon" :class="[className || '', status ? `status-${status}` : '', name ? `${prefix}${name}` : '']" @click="clickEvent"></text>
 </template>
 
 <script>
@@ -10,6 +10,7 @@ export default {
   },
   props: {
     name: String,
+    status: String,
     className: String
   },
   data () {
@@ -27,4 +28,22 @@ export default {
 
 <style lang="scss">
 @import '../../iconfont.css';
+
+.ml-icon {
+  &.status-primary {
+    color: $uni-color-primary;
+  }
+  &.status-success {
+    color: $uni-color-success;
+  }
+  &.status-info {
+    color: #909399;
+  }
+  &.status-warning {
+    color: $uni-color-warning;
+  }
+  &.status-danger {
+    color: $uni-color-error;
+  }
+}
 </style>

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

@@ -1,5 +1,5 @@
 <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 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-else name="search"></ml-icon>
@@ -10,7 +10,8 @@
 			class="ml-input-inp"
 			autocomplete="off"
 			:placeholder="placeholder"
-			@input="inputEvent" />
+			@input="inputEvent" 
+			@confirm="confirmEvent"/>
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
 			<ml-icon :class="suffixIcon"></ml-icon>
 		</view>
@@ -55,6 +56,10 @@ export default {
 			const value = this.inpVal
 			this.$emit('input', value)
 			this.$emit('change', { value })
+		},
+		confirmEvent () {
+			const value = this.inpVal
+			this.$emit('confirm', { value })
 		}
 	}
 }
@@ -64,11 +69,11 @@ export default {
 .ml-input {
 	display: flex;
 	flex-direction: row;
-	font-size: $uni-font-size-base;
 	.ml-input-inp {
 		padding: 0 20rpx;
 		height: 70rpx;
 		width: 100%;
+		font-size: $uni-font-size-base;
 	}
 	.ml-input-prefix-icon,
 	.ml-input-suffix-icon {
@@ -76,6 +81,7 @@ export default {
 		flex-shrink: 0;
     align-items: center;
     border: 1px solid #e5e5e5;
+		font-size: 30rpx;
 	}
 	.ml-input-prefix-icon {
 		padding-left: 20rpx;

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

@@ -0,0 +1,32 @@
+<template>
+  <view class="ml-list-group" :class="className">
+    <view class="ml-list-group-content">
+      <scroll-view scroll-y>
+        <slot></slot>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListGroup',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    title: String,
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-group {
+  padding: 0 10rpx;
+  .ml-list-group-content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <view class="ml-list-item" :class="className" @click="clickEvent" @tap="tapEvent">
+    <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-item-left-icon">
+      <ml-icon :className="prefixIcon"></ml-icon>
+    </view>
+    <view class="ml-list-item-content">
+      <slot>
+        <text>{{ name }}</text>
+      </slot>
+    </view>
+    <view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-list-item-right-icon">
+      <ml-icon :className="suffixIcon"></ml-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    name: String,
+		prefixIcon: String,
+		suffixIcon: {
+      type: String,
+      default: 'mlicon-arrow-right'
+    },
+    url: String,
+    redirect: Boolean,
+    className: String
+  },
+  methods: {
+    clickEvent () {
+      this.$emit('click', {})
+    },
+    tapEvent () {
+      if (this.url) {
+        if (this.redirect) {
+          uni.redirectTo({
+            url: this.url
+          })
+        } else {
+          uni.navigateTo({
+            url: this.url
+          })
+        }
+      }
+      this.$emit('tap', {})
+    }
+  }
+}
+</script>
+
+
+<style lang="scss">
+.ml-list-item {
+  display: flex;
+  flex-direction: row;
+  padding: 20rpx;
+  margin: 10rpx 0;
+  border-radius: 10rpx;
+  background: #ffffff;
+  .ml-list-item-content {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-list-item-left-icon,
+  .ml-list-item-right-icon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 0 10rpx;
+  }
+  .ml-list-item-left-icon {
+    font-size: 38rpx;
+  }
+  .ml-list-item-right-icon {
+    font-size: 30rpx;
+  }
+}
+</style>

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

@@ -1,10 +1,10 @@
 <template>
   <view class="ml-list-menu-group" :class="className">
     <view v-if="title || $slots.title" class="ml-list-menu-group-title">
+      <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-menu-group-left-icon">
+        <ml-icon :className="prefixIcon"></ml-icon>
+      </view>
       <slot name="title">
-        <view v-if="prefixIcon" class="ml-list-menu-group-left-icon">
-          <ml-icon :className="prefixIcon"></ml-icon>
-        </view>
         <text class="ml-list-menu-group-title-content">{{ title }}</text>
       </slot>
     </view>

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

@@ -1,6 +1,6 @@
 <template>
   <view class="ml-list-menu-item" :class="className" @click="clickEvent" @tap="tapEvent">
-    <view v-if="prefixIcon" class="ml-list-menu-item-left-icon">
+    <view v-if="prefixIcon && prefixIcon !== 'none'" class="ml-list-menu-item-left-icon">
       <ml-icon :className="prefixIcon"></ml-icon>
     </view>
     <view class="ml-list-menu-item-content">
@@ -9,10 +9,10 @@
       </slot>
     </view>
     <view v-if="showDot" class="ml-list-menu-item-dot">
-      <text class="ml-list-menu-item-dot-num">{{ getDotNum(dotNum) }}</text>
+      <text class="ml-list-menu-item-dot-num" :class="[dotStatus ? `status-${dotStatus}` : '']">{{ getDotNum(dotNum) }}</text>
     </view>
-    <view class="ml-list-menu-item-right-icon">
-      <ml-icon class="right-icon" name="arrow-right"></ml-icon>
+    <view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-list-menu-item-right-icon">
+      <ml-icon :className="suffixIcon"></ml-icon>
     </view>
   </view>
 </template>
@@ -26,11 +26,15 @@ export default {
   props: {
     name: String,
 		prefixIcon: String,
-		suffixIcon: String,
+		suffixIcon: {
+      type: String,
+      default: 'mlicon-arrow-right'
+    },
     url: String,
     redirect: Boolean,
     className: String,
     showDot: Boolean,
+    dotStatus: String,
     dotNum: [String, Number]
   },
   methods: {
@@ -71,6 +75,8 @@ export default {
     border-top: 1px solid #e5e5e5;
   }
   .ml-list-menu-item-content {
+    display: flex;
+    flex-direction: row;
     flex-grow: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -90,6 +96,21 @@ export default {
       text-align: center;
       font-size: 22rpx;
       line-height: 40rpx;
+      &.status-primary {
+        background-color: $uni-color-primary;
+      }
+      &.status-success {
+        background-color: $uni-color-success;
+      }
+      &.status-info {
+        background-color: #909399;
+      }
+      &.status-warning {
+        background-color: $uni-color-warning;
+      }
+      &.status-danger {
+        background-color: $uni-color-error;
+      }
     }
   }
   .ml-list-menu-item-left-icon,

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

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

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

@@ -3,7 +3,7 @@
 		class="ml-number-input"
 		v-model="inpVal"
 		type="text"
-		:class="[className, {'is-right': align === 'right', 'is-border': border}]"
+		:class="[className || '', {'is-right': align === 'right', 'is-border': border}]"
 		autocomplete="off"
 		:placeholder="placeholder"
 		:maxlength="maxLength"

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

@@ -1,7 +1,9 @@
 <template>
-	<view class="ml-radio" :class="[className, {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
-    <ml-icon class="radio-icon" :name="checked ? 'radio-checked' : 'radio-unchecked'"></ml-icon>
-    <text class="radio-content">
+	<view class="ml-radio" :class="[className || '', {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
+    <text class="ml-radio-icon">
+      <ml-icon :name="checked ? 'radio-checked' : 'radio-unchecked'"></ml-icon>
+    </text>
+    <text class="ml-radio-content">
       <slot>
         <text>{{ content }}</text>
       </slot>
@@ -47,7 +49,7 @@ export default {
   &.is-checked {
     color: $uni-color-primary;
   }
-  .radio-icon {
+  .ml-radio-icon {
     font-size: 1.1em;
     margin-right: 10rpx;
   }

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-button" :class="[className, {'is-disabled': disabled}]">
+	<view class="ml-radio-button" :class="[className || '', {'is-disabled': disabled}]">
     <view class="ml-radio-button-item" v-for="(item, index) in options" :class="{'is-active': value === item.value}" :key="index" @tap="changeEvent(item)">{{ item.label }}</view>
   </view>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-group" :class="[className, {'is-disabled': disabled, 'is-vertical': vertical}]">
+	<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">
       <ml-radio :value="value" :label="item.value" :content="item.label" :disabled="disabled || item.disabled" @change="changeEvent"></ml-radio>
     </view>