mali-applet-ui 0.0.37 → 0.0.40

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

@@ -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 () {

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

@@ -45,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}` : '', {'is-fixed': width || shrink}]" :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,7 @@ export default {
   },
 	props: {
     span: [String, Number],
+    flex: Boolean,
     shrink: Boolean,
     align: String,
     width: String,
@@ -30,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-date-picker/ml-date-picker.vue

@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      this.$emit('input', this.selectVal)
-      this.$emit('change', { value: this.selectVal })
+    changeEvent (value) {
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

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

@@ -31,9 +31,9 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      this.$emit('input', this.selectVal)
-      this.$emit('change', { value: this.selectVal })
+    changeEvent (value) {
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }

package/components/ml-datetime-range-picker/ml-datetime-range-picker.vue

@@ -32,8 +32,8 @@ export default {
     }
   },
   methods: {
-    changeEvent () {
-      const [startDate, endDate] = this.selectDates
+    changeEvent (value) {
+      const [startDate, endDate] = value
       this.$emit('update:startDate', startDate)
       this.$emit('update:endDate', endDate)
       this.$emit('change', { startDate, endDate })

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

@@ -1,7 +1,14 @@
 <template>
-  <view class="ml-form" :class="[className || '', {'is-vertical': vertical}]">
-    <uni-forms ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
-      <slot></slot>
+  <view class="ml-form" :class="[className || '']">
+    <uni-forms :key="fKey" ref="uniForm" :modelValue="data" :rules="formRules" :label-position="vertical ? 'top' : 'left'">
+      <slot>
+        <view v-for="(item, index) in items" :key="index">
+          <ml-form-group v-if="item.children && item.children.length">
+            <ml-form-item v-for="(cItem, cIndex) in item.children" :key="cIndex" :title="cItem.title" :field="cItem.field" :itemRender="cItem.itemRender" @modelvalue="updateModel"></ml-form-item>
+          </ml-form-group>
+          <ml-form-item v-else :title="item.title" :field="item.field" :itemRender="item.itemRender" @modelvalue="updateModel"></ml-form-item>
+        </view>
+      </slot>
     </uni-forms>
   </view>
 </template>
@@ -15,14 +22,23 @@ export default {
     virtualHost: true
   },
   props: {
+    value: Object,
     data: Object,
     items: Array,
     rules: Object,
+    readonly: Boolean,
     vertical: Boolean,
+    labelWidth: String,
     className: String
   },
+  provide() {
+    return {
+      mlForm: this
+    }
+  },
   data () {
     return {
+      fKey: 1
     }
   },
   computed: {
@@ -38,9 +54,14 @@ export default {
       return rest
     }
   },
+  created () {
+    this.$nextTick(() => {
+      this.fKey++
+    })
+  },
   methods: {
-    matchComponent (item, name) {
-      return item.itemRender && item.itemRender.name === name
+    getProp (item, prop, defultValue) {
+      return (item.itemRender.props ? item.itemRender.props[prop] : null) || defultValue
     },
     validate () {
       return this.$refs.uniForm.validate().then(() => {
@@ -55,6 +76,9 @@ export default {
       }).catch(() => {
         return {}
       })
+    },
+    updateModel ({ field, value}) {
+      this.$emit('input', { ...this.value, [field]: value })
     }
   }
 }

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

@@ -0,0 +1,26 @@
+<template>
+  <view class="ml-form-group" :class="className">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlFormItem',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    className: String
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-form-group {
+  margin: 10rpx 0;
+  padding: 20rpx;
+  border-radius: 10rpx;
+  background: #ffffff;
+}
+</style>

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

@@ -1,7 +1,21 @@
 <template>
-  <uni-forms-item :class="className" :label="title" :name="field">
-    <slot></slot>
-  </uni-forms-item>
+  <view class="ml-form-item">
+    <uni-forms-item
+      ref="uniFormItem"
+      :class="className"
+      :label="title"
+      :name="field"
+      :label-width="itemLabelWidth"
+      :label-position="itemVertical">
+      <slot>
+        <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-input>
+        <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
+        <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
+        <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" border @change="modelEvent"></ml-textarea>
+        <view v-else>{{ itemValue }}</view>
+      </slot>
+    </uni-forms-item>
+  </view>
 </template>
 
 <script>
@@ -13,7 +27,68 @@ export default {
   props: {
     title: String,
     field: String,
+    vertical: {
+      type: Boolean,
+       default: null
+    },
+    labelWidth: String,
+    itemRender: Object,
     className: String
+  },
+  inject: {
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+  computed: {
+    itemValue () {
+      return this.formData[this.field]
+    },
+    formData () {
+      return (this.form ? this.form.value : {}) || {}
+    },
+    renderOpts () {
+      return this.itemRender || {}
+    },
+    itemVertical () {
+      let vertical = this.vertical
+      if (!vertical) {
+        vertical = this.form ? this.form.vertical : ''
+      }
+      return vertical ? 'top' : 'left'
+    },
+    itemLabelWidth () {
+      let labelWidth = this.labelWidth
+      if (!labelWidth) {
+        labelWidth = this.form ? this.form.labelWidth : ''
+      }
+      if (labelWidth && !isNaN(labelWidth)) {
+        labelWidth = `${labelWidth}rpx`
+      }
+      return labelWidth
+    }
+  },
+  created () {
+    this.init()
+  },
+  watch: {
+    itemVertical () {
+      this.init()
+    }
+  },
+  methods: {
+    init () {
+      this.$nextTick(() => {
+        this.$refs.uniFormItem.localLabelPos = this.itemVertical
+      })
+    },
+    matchComponent (name) {
+      return this.renderOpts.name === name
+    },
+    modelEvent (params) {
+      this.$emit('modelvalue', { field: this.field, ...params })
+    }
   }
 }
-</script>
+</script>

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

@@ -1,7 +1,7 @@
 <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 v-if="prefixIcon || type === 'search'" class="ml-input-prefix-icon">
-			<ml-icon v-if="prefixIcon" :class="prefixIcon"></ml-icon>
+			<ml-icon v-if="prefixIcon" :className="prefixIcon"></ml-icon>
 			<ml-icon v-else name="search"></ml-icon>
 		</view>
 		<input
@@ -10,9 +10,10 @@
 			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>
+			<ml-icon :className="suffixIcon"></ml-icon>
 		</view>
 	</view>
 </template>
@@ -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-month-picker/ml-month-picker.vue

@@ -1,8 +1,8 @@
 <template>
-  <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>
+  <picker :value="value" class="ml-month-picker" mode="date" fields="month" @change="changeEvent">
+		<view class="ml-month-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-month-picker-text">{{ value || '请选择' }}</view>
+      <ml-icon class="ml-month-picker-icon" name="arrow-down"></ml-icon>
     </view>
 	</picker>
 </template>
@@ -30,34 +30,33 @@ export default {
 
 <style lang="scss">
 .ml-month-picker {
-  font-size: 14px;
+  display: inline-block;
+	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0 5px;
-  padding-left: 10px;
+  padding: 0;
   position: relative;
-  display: flex;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 35px;
-  width: 240rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-month-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 194rpx;
-  }
-  .picker-text {
-    flex-grow: 1;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-month-picker-text {
+  flex-grow: 1;
+}
+.ml-month-picker-icon {
+  color: #6a6a6a;
 }
 </style>

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

@@ -1,11 +1,13 @@
 <template>
-  <picker class="ml-select-picker" :class="[className || '', {'is-border': border}]" :range="optionList" :range-key="optLabelField" @change="changeEvent">
-    <view class="picker-warpper" :style="{width: width || '160rpx'}">
-      <view class="picker-text">
+  <picker class="ml-select-picker" :style="{width: width || '100%'}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
+    <view class="ml-select-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-select-picker-text">
         <text v-if="value !== null">{{ selectName }}</text>
         <text v-else class="picker-placeholder">{{ placeholder }}</text>
       </view>
-      <ml-icon class="picker-icon" name="arrow-down" />
+      <view class="ml-select-picker-icon">
+        <ml-icon name="arrow-down" />
+      </view>
     </view>
   </picker>
 </template>
@@ -76,35 +78,37 @@ export default {
 
 <style lang="scss">
 .ml-select-picker {
+  display: inline-block;
 	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 8rpx;
-  padding: 0 10rpx;
-  padding-left: 20rpx;
+  padding: 0;
   position: relative;
-  display: inline-flex;;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 70rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-select-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .picker-text {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-select-picker-text {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ml-select-picker-icon {
+  display: inline;
+  color: #6a6a6a;
 }
 </style>

package/components/ml-status-tag/ml-status-tag.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="ml-status-tag" :class="[className, status ? `status-${status}` : '']" :style="styles">
+    <slot>
+      <text>{{ content }}</text>
+    </slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MlStatusTag',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    color: String,
+    content: String,
+    status: String,
+    className: String
+  },
+  computed: {
+    styles () {
+      return this.color ? `background:${this.color};` : ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-status-tag {
+  display: inline-block;
+  color: #ffffff;
+  padding: 6rpx 18rpx;
+  border-radius: 10rpx;
+  font-size: 24rpx;
+  &.status-primary {
+    background: $uni-color-primary;
+  }
+  &.status-success {
+    background: $uni-color-success;
+  }
+  &.status-info {
+    background: #909399;
+  }
+  &.status-warning {
+    background: $uni-color-warning;
+  }
+  &.status-danger {
+    background: $uni-color-error;
+  }
+}
+</style>

package/components/ml-textarea/ml-textarea.vue

@@ -1,11 +1,11 @@
 <template>
 	<view class="ml-textarea" :class="[className || '', {'is-border': border}]">
-		<view v-if="readonly" class="content">{{ inpVal }}</view>
+		<view v-if="readonly" class="ml-textarea-content">{{ inpVal }}</view>
 		<view v-else>
-			<textarea class="textarea" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
-			<view v-if="showWordLimit" class="word-count">
-				<VoiceInput v-if="showVoice" class="word-voice" v-model="inpVal" @input="inputEvent"></VoiceInput>
-				<view class="word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
+			<textarea class="ml-textarea-inp" v-model="inpVal" :rows="rows" :maxlength="maxLength" :placeholder="placeholder" @input="inputEvent" :style="{color: fontColor, height: `${rows * 30}rpx`}"></textarea>
+			<view v-if="showWordLimit" class="ml-textarea-word-count">
+				<VoiceInput v-if="showVoice" v-model="inpVal" @input="inputEvent"></VoiceInput>
+				<view class="ml-textarea-word-numbers">{{ value ? value.length : 0 }}/{{ maxLength }}</view>
 			</view>
 		</view>
 	</view>
@@ -67,11 +67,12 @@ export default {
   },
   methods: {
     inputEvent () {
-      if (this.maxLength && this.inpVal && this.inpVal.length > this.maxLength) {
-        this.$emit('input', this.inpVal.slice(0, this.maxLength))
-      } else {
-        this.$emit('input', this.inpVal)
+      let value = this.inpVal
+      if (this.maxLength && value &&value.length > this.maxLength) {
+        value = value.slice(0, this.maxLength)
       }
+      this.$emit('input', value)
+      this.$emit('change', { value })
     }
   }
 }
@@ -80,26 +81,27 @@ export default {
 <style lang="scss">
 .ml-textarea {
 	font-size: $uni-font-size-base;
-  padding: 20rpx 10rpx 10rpx 30rpx;
+  padding: 20rpx 10rpx 10rpx 20rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
     border-radius: 10rpx;
   }
-  & > .content {
+  .ml-textarea-content {
     width: 100%;
     overflow: auto;
     word-break: break-all;
   }
-  .textarea {
+  .ml-textarea-inp {
     color: rgba(39, 42, 48, 0.4500);
     height: 280rpx;
     width: 100%;
+		font-size: $uni-font-size-base;
   }
-  .word-count {
+  .ml-textarea-word-count {
     padding-top: 10rpx;
     display: flex;
   }
-  .word-numbers {
+  .ml-textarea-word-numbers {
     flex-grow: 1;
     color: #999999;
     text-align: right;

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

@@ -1,8 +1,8 @@
 <template>
-  <picker :value="value" class="ml-year-picker" :class="[className || '', {'is-border': border}]" mode="date" fields="year" @change="changeEvent">
-		<view class="picker-warpper">
-      <view class="picker-text">{{ value || '请选择' }}</view>
-      <ml-icon class="picker-icon" name="arrow-down"></ml-icon>
+  <picker :value="value" class="ml-year-picker"  mode="date" fields="year" @change="changeEvent">
+		<view class="ml-year-picker-warpper" :class="[className || '', {'is-border': border}]">
+      <view class="ml-year-picker-text">{{ value || '请选择' }}</view>
+      <ml-icon class="ml-year-picker-icon" name="arrow-down"></ml-icon>
     </view>
 	</picker>
 </template>
@@ -30,34 +30,33 @@ export default {
 
 <style lang="scss">
 .ml-year-picker {
-  font-size: 14px;
+  display: inline-block;
+	font-size: $uni-font-size-base;
   box-sizing: border-box;
-  border-radius: 4px;
-  padding: 0 5px;
-  padding-left: 10px;
+  padding: 0;
   position: relative;
-  display: flex;
   user-select: none;
   flex-direction: row;
   align-items: center;
-  height: 35px;
-  width: 240rpx;
+  width: 100%;
   color: #6a6a6a;
+}
+.ml-year-picker-warpper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 10rpx;
+  height: 70rpx;
+  border-radius: 10rpx;
   &.is-border {
     border: 1px solid #e5e5e5;
   }
-  .picker-warpper {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: 194rpx;
-  }
-  .picker-text {
-    flex-grow: 1;
-  }
-  .picker-icon {
-    color: #6a6a6a;
-  }
+}
+.ml-year-picker-text {
+  flex-grow: 1;
+}
+.ml-year-picker-icon {
+  color: #6a6a6a;
 }
 </style>

package/package.json

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

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

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