mali-applet-ui 0.0.32 → 0.0.33

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

@@ -3,7 +3,7 @@
 		class="ml-amount-input"
 		v-model="inpVal"
 		type="text"
-		:class="{'is-right': align === 'right', 'is-border': border}"
+		:class="[{'is-right': align === 'right', 'is-border': border}, className]"
 		autocomplete="off"
 		:placeholder="placeholder"
 		:maxlength="maxLength"
@@ -44,7 +44,8 @@ export default {
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+    className: String
 	},
 	data () {
 		return {

package/components/ml-amount-text/ml-amount-text.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-amount-text">
+	<view class="ml-amount-text" :class="className">
 		<slot name="symbol">
 			<view v-if="symbol" class="amount-flag">￥</view>
 		</slot>
@@ -31,6 +31,7 @@ export default {
 			type: Boolean,
 			default: false
 		},
+		className: String
 	},
 	computed: {
 		amountUnit () {

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

@@ -1,5 +1,5 @@
 <template>
-  <button class="ml-button" :class="[`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>
@@ -17,7 +17,8 @@ export default {
     type: {
       type: String,
       default: 'button'
-    }
+    },
+    className: String
   },
   methods: {
     tapEvent () {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-checkbox" :class="{'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>
@@ -23,7 +23,8 @@ export default {
     },
     indeterminate: Boolean,
     disabled: Boolean,
-    content: String
+    content: String,
+    className: String
 	},
   computed: {
     checked () {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-group" :class="{'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>
@@ -16,7 +16,8 @@ export default {
 		value: Array,
     options: Array,
     disabled: Boolean,
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
 	},
 	methods: {
 		changeEvent ({ label, checked }) {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-col" :class="[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>
@@ -13,11 +13,12 @@ export default {
 	props: {
     span: [String, Number],
     align: String,
-    width: String
+    width: String,
+    className: String
 	},
   computed: {
     styles () {
-      return this.width ? `${this.width}` : '' 
+      return this.width ? `width: ${this.width};` : '' 
     }
   }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectVal" type="date" :start="start" :end="end" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectVal" type="date" :start="start" :end="end" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,6 +13,7 @@ export default {
     border: Boolean,
     start: [String, Number],
     end: [String, Number],
+    className: String
   },
   data () {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectDates" type="daterange" :start="start" :end="end" @change="changeEvent" :border="border" :clear-icon="clear"/>
+  <uni-datetime-picker :class="className" v-model="selectDates" type="daterange" :start="start" :end="end" @change="changeEvent" :border="border" :clear-icon="clear"/>
 </template>
 
 <script>
@@ -17,7 +17,8 @@ export default {
     clear: {
       type: Boolean,
       default: true
-    }
+    },
+    className: String
   },
   data () { 
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectVal" type="datetime" :start="start" :end="end" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectVal" type="datetime" :start="start" :end="end" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,6 +13,7 @@ export default {
     border: Boolean,
     start: [String, Number],
     end: [String, Number],
+    className: String
   },
   data () {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-datetime-picker v-model="selectDates" type="datetimerange" :start="start" :end="end" @change="changeEvent" :border="border"/>
+  <uni-datetime-picker :class="className" v-model="selectDates" type="datetimerange" :start="start" :end="end" @change="changeEvent" :border="border"/>
 </template>
 
 <script>
@@ -13,7 +13,8 @@ export default {
     startDate: String,
     endDate: String,
     start: [String, Number],
-    end: [String, Number]
+    end: [String, Number],
+    className: String
   },
   data () {
     return {

package/components/ml-echarts/ml-echarts.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-echarts" :style="{height: height || '400rpx', width: width || '100%'}">
+	<view class="ml-echarts" :class="className" :style="{height: height || '400rpx', width: width || '100%'}">
 		<canvas type="2d" class="ml-canvas" :canvas-id="canvasId" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
 	</view>
 </template>
@@ -44,7 +44,8 @@ export default {
 		height:String,
 		width: String,
 		lazyLoad:Boolean,
-		forceUseOldCanvas: Boolean
+		forceUseOldCanvas: Boolean,
+		className: String
 	},
 	data() {
 		return {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-form" :class="{'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>
@@ -18,7 +18,8 @@ export default {
     data: Object,
     items: Array,
     rules: Object,
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
   },
   data () {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <uni-forms-item :label="title" :name="field">
+  <uni-forms-item :class="className" :label="title" :name="field">
     <slot></slot>
   </uni-forms-item>
 </template>
@@ -12,7 +12,8 @@ export default {
   },
   props: {
     title: String,
-    field: String
+    field: String,
+    className: String
   }
 }
 </script>

package/components/ml-full-watermark/ml-full-watermark.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-full-watermark">
+	<view class="ml-full-watermark" :class="className">
 		<view class="ml-full-watermark-text" v-for="index in 40" :key="index">{{ content }}</view>
 	</view>
 </template>
@@ -7,11 +7,9 @@
 <script>
 export default {
 	name: 'MlFullWatermark',
-  options: {
-    virtualHost: true
-  },
 	props: {
-		content: String
+		content: String,
+		className: String
 	}
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <text class="ml-icon" :class="[name ? `${prefix}${name}` : '', className]" @click="clickEvent"></text>
+  <text class="ml-icon" :class="[className, name ? `${prefix}${name}` : '']" @click="clickEvent"></text>
 </template>
 
 <script>

package/components/ml-image-swiper/ml-image-swiper.vue

@@ -1,33 +1,66 @@
 <template>
-  <view class="ml-image-swiper">
-    <swiper :autoplay="autoplay" :interval="interval" :style="{height: height || '400rpx'}" circular indicator-dots>
-      <swiper-item v-for="(item, index) in options" :key="index">
-        <image class="ml-image-swiper-img" mode="widthFix" :src="item.url"></image>
-      </swiper-item>
-    </swiper>
-  </view>
+  <swiper class="ml-image-swiper" :current="current" :class="className" :style="styles" :autoplay="autoplay" :interval="interval" circular indicator-dots @change="changeEvent">
+    <swiper-item v-for="(item, index) in options" :key="index">
+      <image class="ml-image-swiper-img" mode="aspectFill" :src="item.url"></image>
+    </swiper-item>
+  </swiper>
 </template>
 
 <script>
+import XEUtils from 'xe-utils'
 export default {
 	name: 'MlImageSwiper',
   options: {
     virtualHost: true
   },
 	props: {
-    value: Number,
+    value: [Number, String],
     options: Array,
     autoplay: Boolean,
     interval: Number,
-    width: String,
-    height: String
-	}
+    height: String,
+    className: String
+	},
+  data () {
+    return {
+      current: 0
+    }
+  },
+  computed: {
+    styles () {
+      return this.height ? `height: ${this.height};` : '' 
+    }
+  },
+  watch: {
+    value () {
+      this.updateActive()
+    }
+  },
+  created () {
+    this.updateActive()
+  },
+  methods: {
+    updateActive () {
+      const index = XEUtils.findIndexOf(this.options, item => item.value === this.value)
+      this.current = index > -1 ? index : 0
+    },
+    changeEvent (e) {
+      const index = e.detail.current
+      const option = this.options[index]
+      this.current = index
+      const value = option ? option.value : 0
+      this.$emit('input', value)
+      this.$emit('change', { value, option })
+    }
+  }
 }
 </script>
 
 <style lang="scss">
 .ml-image-swiper {
+  height: 100%;
   .ml-image-swiper-img {
+    height: 100%;
     width: 100%;
   }
 }

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

@@ -1,7 +1,7 @@
 <template>
-	<view class="ml-input" :class="{'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" :className="prefixIcon"></ml-icon>
+			<ml-icon v-if="prefixIcon" :class="prefixIcon"></ml-icon>
 			<ml-icon v-else name="search"></ml-icon>
 		</view>
 		<input
@@ -12,7 +12,7 @@
 			:placeholder="placeholder"
 			@input="inputEvent" />
 		<view v-if="suffixIcon" class="ml-input-suffix-icon">
-			<ml-icon :className="suffixIcon"></ml-icon>
+			<ml-icon :class="suffixIcon"></ml-icon>
 		</view>
 	</view>
 </template>
@@ -34,7 +34,8 @@ export default {
 		placeholder: {
 			type: String,
 			default: '请输入'
-		}
+		},
+		className: String
 	},
 	data () {
 		return {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-list-menu" @click="clickEvent" @tap="tapEvent">
+  <view class="ml-list-menu" :class="className" @click="clickEvent" @tap="tapEvent">
     <view v-if="prefixIcon" class="ml-list-menu-left-icon">
       <ml-icon :className="prefixIcon"></ml-icon>
     </view>
@@ -25,7 +25,8 @@ export default {
 		prefixIcon: String,
 		suffixIcon: String,
     url: String,
-    redirect: Boolean
+    redirect: Boolean,
+    className: String
   },
   methods: {
     clickEvent () {

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

@@ -1,5 +1,5 @@
 <template>
-  <picker :value="value" class="ml-month-picker" :class="{'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>
@@ -15,7 +15,8 @@ export default {
   },
   props: {
 		value: String,
-    border: Boolean
+    border: Boolean,
+    className: String
   },
   methods: {
     changeEvent (e) {

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

@@ -3,7 +3,7 @@
 		class="ml-number-input"
 		v-model="inpVal"
 		type="text"
-		:class="{'is-right': align === 'right', 'is-border': border}"
+		:class="[className, {'is-right': align === 'right', 'is-border': border}]"
 		autocomplete="off"
 		:placeholder="placeholder"
 		:maxlength="maxLength"
@@ -32,7 +32,8 @@ export default {
 		disabled: {
 			type: Boolean,
 			default: false
-		}
+		},
+    className: String
 	},
 	data () {
 		return {

package/components/ml-progress-bar/ml-progress-bar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-progress-bar">
+  <view class="ml-progress-bar" :class="className">
     <view class="progress-bar-header">
       <slot name="header">
         <view v-if="title !== null" class="progress-bar-title" :class="{underline: titleUnderline}">{{ title }}</view>
@@ -52,7 +52,8 @@ export default {
     },
     backgroundColor: String,
     showNum: Boolean,
-    unit: String
+    unit: String,
+    className: String
   },
   computed: {
     percNum () {

package/components/ml-province-city-picker/ml-province-city-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-region-picker" :style="{width: width || '160rpx'}">
+  <view class="ml-region-picker" :class="className" :style="{width: width || '160rpx'}">
     <uni-data-picker
       v-model="selectVals"
       popup-title="请选择城市"
@@ -26,6 +26,7 @@ export default {
     city: String,
     width: String,
     optionProps: Object,
+    className: String
   },
   data () {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio" :class="{'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>
@@ -22,7 +22,8 @@ export default {
       default: false
     },
     disabled: Boolean,
-    content: String
+    content: String,
+    className: String
 	},
   computed: {
     checked () {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-button" :class="{'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>
@@ -13,7 +13,8 @@ export default {
 	props: {
 		value: [Boolean, Number, String],
     options: Array,
-    disabled: Boolean
+    disabled: Boolean,
+    className: String
 	},
 	methods: {
 		changeEvent (option) {

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-radio-group" :class="{'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>
@@ -16,7 +16,8 @@ export default {
 		value: [Boolean, Number, String],
     options: Array,
     disabled: Boolean,
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
 	},
 	methods: {
 		changeEvent ({ value }) {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-row" :class="{'is-vertical': vertical}">
+  <view class="ml-row" :class="[className, {'is-vertical': vertical}]">
     <slot></slot>
   </view>
 </template>
@@ -11,7 +11,8 @@ export default {
     virtualHost: true
   },
 	props: {
-    vertical: Boolean
+    vertical: Boolean,
+    className: String
 	}
 }
 </script>

package/components/ml-section/ml-section.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-section" :class="[type ? `type-${type}` : '']">
+  <view class="ml-section" :class="[className, type ? `type-${type}` : '']">
     <view v-if="title || $slots.header" class="ml-section-header">
       <slot name="header">
         <text class="ml-section-header-title">{{ title }}</text>
@@ -19,7 +19,8 @@ export default {
   },
 	props: {
     title: String,
-    type: String
+    type: String,
+    className: String
 	}
 }
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <picker class="ml-select-picker" :class="{'is-border': border}" :range="optionList" :range-key="optLabelField" @change="changeEvent">
+  <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">
         <text v-if="value !== null">{{ selectName }}</text>
@@ -26,7 +26,8 @@ export default {
     options: Array,
     optionProps: Object,
     width: String,
-    isAll: Boolean
+    isAll: Boolean,
+    className: String
   },
   data () {
     return {

package/components/ml-tabbar/ml-tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-tabbar">
+  <view class="ml-tabbar" :class="className">
     <view class="ml-tabbar-item" v-for="(item) in options" :key="item.value" :class="{'is-active': value == item.value}" @tap="tapEvent(item)">
       <view class="ml-tabbar-icon">
         <ml-icon class="icon" :name="value == item.value ? item.activeIcon : item.icon"></ml-icon>
@@ -15,7 +15,8 @@ export default {
   name: 'MlTabbar',
   props: {
     value: [String, Number],
-    options: Array
+    options: Array,
+    className: String
   },
   data() {
     return {

package/components/ml-table/ml-table.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-table" :style="{height: height ? (isNaN(height) ? height : `${height}rpx`) : ''}">
+  <view class="ml-table" :class="className" :style="{height: height ? (isNaN(height) ? height : `${height}rpx`) : ''}">
     <view class="table-header">
       <view class="table-column-header">
         <view class="table-tr">
@@ -75,6 +75,7 @@ export default {
   },
   props: {
     loading: Boolean,
+    className: String,
     height: [Number, String],
     headerData: Array,
     data: Array,

package/components/ml-tabs/ml-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-tabs">
+  <view class="ml-tabs" :class="className">
     <scroll-view scroll-x>
       <view class="ml-tabs-navs">
         <view class="ml-tabs-nav-item" v-for="(item, index) in options" :key="index" :class="{'is-active': value === item.value}" @tap="changeEvent(item)">{{ item.label }}</view>
@@ -16,7 +16,8 @@ export default {
   },
   props: {
     value: [String, Number],
-    options: Array
+    options: Array,
+    className: String
   },
   data () {
     return {}

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

@@ -1,5 +1,5 @@
 <template>
-	<view class="ml-textarea" :class="{'is-border': border}">
+	<view class="ml-textarea" :class="[className, {'is-border': border}]">
 		<view v-if="readonly" class="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>
@@ -49,7 +49,8 @@ export default {
       default: false
     },
 		showVoice: Boolean,
-    fontColor: String
+    fontColor: String,
+    className: String
   },
   data () {
     return {

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

@@ -1,5 +1,5 @@
 <template>
-  <picker :value="value" class="ml-year-picker" :class="{'is-border': border}" mode="date" fields="year" @change="changeEvent">
+  <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>
@@ -15,7 +15,8 @@ export default {
   },
   props: {
 		value: String,
-    border: Boolean
+    border: Boolean,
+    className: String
   },
   methods: {
     changeEvent (e) {

package/package.json

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