mali-applet-ui 0.0.18 → 0.0.19

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

@@ -0,0 +1,36 @@
+<template>
+  <uni-datetime-picker v-model="selectVal" type="date" :start="start" :end="end" @change="changeEvent" :border="border"/>
+</template>
+
+<script>
+export default {
+  name: 'ml-date-picker',
+  props: {
+		value: String,
+    border: Boolean,
+    start: [String, Number],
+    end: [String, Number],
+  },
+  data () {
+    return {
+      selectVal: ''
+    }
+  },
+  watch: {
+    value (value) {
+      this.selectVal = value
+    }
+  },
+  created () {
+    if (this.value) {
+      this.selectVal = this.value
+    }
+  },
+  methods: {
+    changeEvent () {
+      this.$emit('input', this.selectVal)
+      this.$emit('change', { value: this.selectVal })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <uni-datetime-picker v-model="selectDates" type="daterange" :start="start" :end="end" @change="changeEvent" :border="border" :clear-icon="clear"/>
+</template>
+
+<script>
+export default {
+  name: 'ml-date-range-picker',
+  props: {
+    border: Boolean,
+    startDate: String,
+    endDate: String,
+    start: [String, Number],
+    end: [String, Number],
+    clear: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () { 
+    return {
+      selectDates: []
+    }
+  },
+  watch: {
+    startDate () {
+      this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
+    }
+  },
+  created () {
+    if (this.startDate) {
+      this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
+    }
+  },
+  methods: {
+    changeEvent (value) {
+      const [startDate, endDate] = value
+      this.$emit('update:startDate', startDate || '')
+      this.$emit('update:endDate', endDate || '')
+      this.$emit('change', { startDate, endDate })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <uni-datetime-picker v-model="selectVal" type="datetime" :start="start" :end="end" @change="changeEvent" :border="border"/>
+</template>
+
+<script>
+export default {
+  name: 'ml-date-picker',
+  props: {
+		value: String,
+    border: Boolean,
+    start: [String, Number],
+    end: [String, Number],
+  },
+  data () {
+    return {
+      selectVal: ''
+    }
+  },
+  watch: {
+    value (value) {
+      this.selectVal = value
+    }
+  },
+  created () {
+    if (this.value) {
+      this.selectVal = this.value
+    }
+  },
+  methods: {
+    changeEvent () {
+      this.$emit('input', this.selectVal)
+      this.$emit('change', { value: this.selectVal })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,39 @@
+<template>
+  <uni-datetime-picker v-model="selectDates" type="datetimerange" :start="start" :end="end" @change="changeEvent" :border="border"/>
+</template>
+
+<script>
+export default {
+  name: 'ml-datetime-range-picker',
+  props: {
+    border: Boolean,
+    startDate: String,
+    endDate: String,
+    start: [String, Number],
+    end: [String, Number]
+  },
+  data () {
+    return {
+      selectDates: []
+    }
+  },
+  watch: {
+    startDate () {
+      this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
+    }
+  },
+  created () {
+    if (this.startDate) {
+      this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
+    }
+  },
+  methods: {
+    changeEvent () {
+      const [startDate, endDate] = this.selectDates
+      this.$emit('update:startDate', startDate)
+      this.$emit('update:endDate', endDate)
+      this.$emit('change', { startDate, endDate })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <view class="ml-form">
+    <uni-forms ref="uniForm" :modelValue="data" :rules="formRules">
+      <slot></slot>
+    </uni-forms>
+  </view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+
+export default {
+  name: 'ml-form',
+  props: {
+    data: Object,
+    items: Array,
+    rules: Object
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    formRules () {
+      const rest = {}
+      XEUtils.each(this.rules, (rules, field) => {
+        rest[field] = {
+          rules: rules.map(item => {
+            return { ...item, errorMessage: item.message }
+          })
+        }
+      })
+      return rest
+    }
+  },
+  methods: {
+    matchComponent (item, name) {
+      return item.itemRender && item.itemRender.name === name
+    },
+    validate () {
+      debugger
+      return this.$refs.uniForm.validate().then(() => {
+        return null
+      }).catch(() => {
+        return {}
+      })
+    },
+    validateField (fields) {
+      return this.$refs.uniForm.validateField(fields).then(() => {
+        return null
+      }).catch(() => {
+        return {}
+      })
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <uni-forms-item :label="title" :name="field">
+    <slot></slot>
+  </uni-forms-item>
+</template>
+
+<script>
+export default {
+  name: 'ml-form-item',
+  props: {
+    title: String,
+    field: String
+  }
+}
+</script>

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

@@ -48,7 +48,9 @@ export default {
 <style lang="scss">
 .ml-input {
 	font-size: $uni-font-size-base;
-	padding: 0 10rpx;
+	.input-inp {
+		padding: 0 10rpx;
+	}
 	&.is-right {
 		.input-inp {
 			text-align: right;

package/package.json

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