mali-applet-ui 0.0.34 → 0.0.37

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>
@@ -33,35 +33,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

@@ -0,0 +1,113 @@
+<template>
+  <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" :status="status"></ml-icon>
+        </view>
+        <text class="ml-chunk-group-title-content">{{ title }}</text>
+      </slot>
+    </view>
+    <view class="ml-chunk-group-body">
+      <view class="ml-chunk-group-content">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+	name: 'MlChunkGroup',
+  options: {
+    virtualHost: true
+  },
+	props: {
+    title: String,
+    prefixIcon: String,
+    vertical: Boolean,
+    status: String,
+    align: String,
+    className: String
+	},
+  provide() {
+    return {
+      mlChunk: this
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-chunk-group {
+  display: block;
+  border-radius: 10rpx;
+  background: #ffffff;
+  .ml-chunk-group-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 80rpx;
+    padding: 0 20rpx ;
+  }
+  .ml-chunk-group-left-icon {
+    font-size: 38rpx;
+    flex-shrink: 0;
+    padding-right: 10rpx;
+  }
+  .ml-chunk-group-content {
+    display: flex;
+    flex-direction: row;
+    border-radius: 10rpx;
+  }
+  &.is-header {
+    .ml-chunk-group-body {
+      padding: 0 20rpx;
+    }
+  }
+  &.is-vertical {
+    .ml-chunk-group-content {
+      flex-direction: column;
+    }
+  }
+  &.align-left {
+    text-align: left;
+  }
+  &.align-center {
+    text-align: center;
+  }
+  &.align-right {
+    text-align: right;
+  }
+  &.status-primary {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-primary;
+    }
+  }
+  &.status-success {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-success;
+    }
+  }
+  &.status-info {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: #909399;
+    }
+  }
+  &.status-warning {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-warning;
+    }
+  }
+  &.status-danger {
+    .ml-chunk-group-content {
+      color: #ffffff;
+      background: $uni-color-error;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,81 @@
+<template>
+  <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>
+
+<script>
+export default {
+	name: 'MlChunkItem',
+  options: {
+    virtualHost: true
+  },
+	props: {
+    span: [String, Number],
+    align: String,
+    width: String,
+    className: String
+	},
+  inject: {
+    chunk: {
+      from: 'mlChunk',
+      default: null
+    }
+  },
+  computed: {
+    isVertical () {
+      return this.chunk ? this.chunk.vertical : ''
+    },
+    styles () {
+      return this.width ? `width: ${this.width};` : '' 
+    }
+  },
+  methods: {
+    clickEvent () {
+      this.$emit('click', {})
+    },
+    tapEvent () {
+      this.$emit('tap', {})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-chunk-item {
+  display: flex;
+  flex-direction: column;
+  padding: 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%,
+          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
+  &.align-left {
+    text-align: left;
+  }
+  &.align-center {
+    text-align: center;
+  }
+  &.align-right {
+    text-align: right;
+  }
+  &:not(.is-fixed) {
+    flex-grow: 1;
+  }
+  @for $index from 0 to length($spans) {
+    &.span-#{$index + 1} {
+      width: nth($spans, $index + 1);
+    }
+  }
+  &:not(.is-vertical) {
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  &.is-vertical {
+    flex-direction: row;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  &:last-child {
+    border: 0;
+  }
+}
+</style>

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-fixed': width || shrink}]" :style="styles">
     <slot></slot>
   </view>
 </template>
@@ -12,6 +12,7 @@ export default {
   },
 	props: {
     span: [String, Number],
+    shrink: Boolean,
     align: String,
     width: String,
     className: String

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>

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-menu/ml-list-menu.vue → ml-list-item/ml-list-item.vue}

@@ -1,29 +1,32 @@
 <template>
-  <view class="ml-list-menu" :class="className" @click="clickEvent" @tap="tapEvent">
-    <view v-if="prefixIcon" class="ml-list-menu-left-icon">
+  <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-menu-content">
+    <view class="ml-list-item-content">
       <slot>
         <text>{{ name }}</text>
       </slot>
     </view>
-    <view class="ml-list-menu-right-icon">
-      <ml-icon class="right-icon" name="arrow-right"></ml-icon>
+    <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: 'MlListMenu',
+  name: 'MlListItem',
   options: {
     virtualHost: true
   },
   props: {
     name: String,
 		prefixIcon: String,
-		suffixIcon: String,
+		suffixIcon: {
+      type: String,
+      default: 'mlicon-arrow-right'
+    },
     url: String,
     redirect: Boolean,
     className: String
@@ -50,29 +53,35 @@ export default {
 }
 </script>
 
+
 <style lang="scss">
-.ml-list-menu {
+.ml-list-item {
   display: flex;
   flex-direction: row;
-  border-bottom: 1px solid #e5e5e5;
-  line-height: 90rpx;
-  font-size: 30rpx;
-  padding: 0 20rpx;
-  .ml-list-menu-content {
+  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-menu-left-icon,
-  .ml-list-menu-right-icon {
+  .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-menu-left-icon {
+  .ml-list-item-left-icon {
     font-size: 38rpx;
   }
-  .ml-list-menu-right-icon {
+  .ml-list-item-right-icon {
     font-size: 30rpx;
   }
 }

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

@@ -0,0 +1,51 @@
+<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">
+        <text class="ml-list-menu-group-title-content">{{ title }}</text>
+      </slot>
+    </view>
+    <view class="ml-list-menu-group-content">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListMenuGroup',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    title: String,
+    prefixIcon: String,
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-list-menu-group {
+  margin: 20rpx 0;
+  background: #ffffff;
+  .ml-list-menu-group-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 70rpx;
+  }
+  .ml-list-menu-group-left-icon {
+    font-size: 38rpx;
+    flex-shrink: 0;
+    padding: 0 10rpx;
+  }
+  .ml-list-menu-group-content {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>