mali-applet-ui 0.0.33 → 0.0.36

package/README.md

@@ -1,32 +1,32 @@
-# mali-applet-ui
-
-Mali-Applet-UI 码里云小程序组件库  
-
-## 安装
-
-```bash
-# npm方式安装
-npm install mali-applet-ui
-```
-
-## 按需引入
-
-1. `pages.json`配置easycom规则(按需引入)
-
-```js
-// pages.json
-{
-  "easycom": {
-    "autoscan": true,
-    "custom": {
-      "^ml-(.*)": "mali-applet-ui/components/ml-$1/ml-$1.vue"
-    }
-  },
-	// 此为本身已有的内容
-  "pages": [
-    // ......
-  ]
-}
-```
-
-深圳叮当科技技术有限公司
+# mali-applet-ui
+
+Mali-Applet-UI 码里云小程序组件库  
+
+## 安装
+
+```bash
+# npm方式安装
+npm install mali-applet-ui
+```
+
+## 按需引入
+
+1. `pages.json`配置easycom规则(按需引入)
+
+```js
+// pages.json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^ml-(.*)": "mali-applet-ui/components/ml-$1/ml-$1.vue"
+    }
+  },
+  // 此为本身已有的内容
+  "pages": [
+    // ......
+  ]
+}
+```
+
+深圳叮当科技技术有限公司

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,5 +1,5 @@
 <template>
-	<view class="ml-checkbox" :class="[className, {'is-checked': checked, 'is-disabled': disabled}]" @tap="tapEvent">
+	<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">
       <slot>

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: 70rpx;
+    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,73 @@
+<template>
+  <view class="ml-chunk-item" :class="[className || '', span && !width ? `span-${span}` : '', align ? `align-${align}` : '', {'is-fixed': width, 'is-vertical': isVertical}]" :style="styles">
+    <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};` : '' 
+    }
+  }
+}
+</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}` : '', width ? 'is-fixed' : '']" :style="styles">
     <slot></slot>
   </view>
 </template>

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-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>

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

@@ -0,0 +1,128 @@
+<template>
+  <view class="ml-list-menu-item" :class="className" @click="clickEvent" @tap="tapEvent">
+    <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">
+      <slot>
+        <text>{{ name }}</text>
+      </slot>
+    </view>
+    <view v-if="showDot" class="ml-list-menu-item-dot">
+      <text class="ml-list-menu-item-dot-num" :class="[dotStatus ? `status-${dotStatus}` : '']">{{ getDotNum(dotNum) }}</text>
+    </view>
+    <view v-if="suffixIcon && suffixIcon !== 'none'" class="ml-list-menu-item-right-icon">
+      <ml-icon :className="suffixIcon"></ml-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlListMenuItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    name: String,
+		prefixIcon: String,
+		suffixIcon: {
+      type: String,
+      default: 'mlicon-arrow-right'
+    },
+    url: String,
+    redirect: Boolean,
+    className: String,
+    showDot: Boolean,
+    dotStatus: String,
+    dotNum: [String, Number]
+  },
+  methods: {
+    getDotNum (num) {
+      return num > 99 ? '99+' : num
+    },
+    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-menu-item {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #e5e5e5;
+  line-height: 90rpx;
+  font-size: 30rpx;
+  padding: 0 20rpx;
+  background: #ffffff;
+  &:first-child {
+    border-top: 1px solid #e5e5e5;
+  }
+  .ml-list-menu-item-content {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ml-list-menu-item-dot {
+    position: relative;
+    flex-shrink: 0;
+    .ml-list-menu-item-dot-num {
+      background-color: #f56c6c;
+      color: #fff;
+      border-radius: 40rpx;
+      padding: 0 10rpx;
+      vertical-align: middle;
+      display: inline-block;
+      min-width: 40rpx;
+      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,
+  .ml-list-menu-item-right-icon {
+    flex-shrink: 0;
+    padding: 0 10rpx;
+  }
+  .ml-list-menu-item-left-icon {
+    font-size: 38rpx;
+  }
+  .ml-list-menu-item-right-icon {
+    font-size: 30rpx;
+  }
+}
+</style>

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

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>

package/components/ml-row/ml-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-row" :class="[className, {'is-vertical': vertical}]">
+  <view class="ml-row" :class="[className || '', {'is-vertical': vertical}]">
     <slot></slot>
   </view>
 </template>