fusions-ui 1.2.2 → 1.2.4

package/components/fu-button/fu-button.vue

@@ -124,6 +124,7 @@
 	 * @property {String} lang = [zh_CN|zh_TW|en] 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
 	 * @property {String} customClass 自定义外部class样式
 	 * @property {Object,String} customStyle 自定义外部样式
+	 * @property {Object,String} customTextStyle 自定义按钮文本样式
 	 * @event {Function} click 非禁止并且非加载中，才能点击
 	 * @event {Function} tap 非禁止并且非加载中，才能点击
 	 * @event {Function} getphonenumber	open-type="getPhoneNumber"时有效

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

@@ -199,18 +199,22 @@
 	/**
 	 * DatePicker 时间选择器
 	 * @description 同时支持 PC 和移动端使用日历选择日期和日期范围
-	 * @property {String} type = [date|daterange|datetime|datetimerange] 选择器类型
+	 * @property {String} mode = [date|daterange|datetime|datetimerange] 选择器类型
 	 * 	@value date 日期
 	 * 	@value daterange 日期范围
 	 * 	@value datetime 日期时间
 	 * 	@value datetimerange 日期时间范围
 	 * @property {String|Number|Array|Date} value 绑定值
 	 * @property {String} placeholder 单选择时的占位内容
-	 * @property {String} start 起始时间
+	 * @property {String} start 最小值，可以使用日期的字符串(String)、时间戳(Number)
 	 * @property {String} end 终止时间
-	 * @property {String} start-placeholder 范围选择时开始日期的占位内容
-	 * @property {String} end-placeholder 范围选择时结束日期的占位内容
-	 * @property {String} range-separator 选择范围时的分隔符
+	 * @property {String} returnType 返回值格式（默认 string）
+	 * 	@value timestamp 时间戳格式
+	 * 	@value string 字符串格式
+	 * 	@value date 日期格式
+	 * @property {String} startPlaceholder 范围选择时开始日期的占位内容
+	 * @property {String} endPlaceholder 范围选择时结束日期的占位内容
+	 * @property {String} rangeSeparator 选择范围时的分隔符
 	 * @property {Boolean} border = [true|false] 是否有边框
 	 * @property {Boolean} disabled = [true|false] 是否禁用
 	 * @property {Boolean} clearIcon = [true|false] 是否显示清除按钮（仅PC端适用）
@@ -274,59 +278,6 @@
 				i18nT: () => {}
 			}
 		},
-		watch: {
-			type: {
-				immediate: true,
-				handler(newVal) {
-					this.hasTime = newVal.indexOf('time') !== -1;
-					this.isRange = newVal.indexOf('range') !== -1;
-				}
-			},
-			// #ifndef VUE3
-			value: {
-				immediate: true,
-				handler(newVal) {
-					if (this.isEmitValue) {
-						this.isEmitValue = false;
-						return
-					}
-					this.initPicker(newVal)
-				}
-			},
-			// #endif
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(newVal) {
-					if (this.isEmitValue) {
-						this.isEmitValue = false;
-						return
-					}
-					this.initPicker(newVal)
-				}
-			},
-			// #endif
-			start: {
-				immediate: true,
-				handler(newVal) {
-					if (!newVal) return
-					this.calendarRange.startDate = getDate(newVal);
-					if (this.hasTime) {
-						this.calendarRange.startTime = getTime(newVal);
-					}
-				}
-			},
-			end: {
-				immediate: true,
-				handler(newVal) {
-					if (!newVal) return
-					this.calendarRange.endDate = getDate(newVal);
-					if (this.hasTime) {
-						this.calendarRange.endTime = getTime(newVal, this.hideSecond);
-					}
-				}
-			},
-		},
 		computed: {
 			timepickerStartTime() {
 				const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate;
@@ -356,7 +307,7 @@
 			 * for i18n
 			 */
 			singlePlaceholderText() {
-				return this.placeholder || (this.type === 'date' ? this.selectDateText : this.selectDateTimeText)
+				return this.placeholder || (this.mode === 'date' ? this.selectDateText : this.selectDateTimeText)
 			},
 			startPlaceholderText() {
 				return this.startPlaceholder || this.startDateText
@@ -779,10 +730,10 @@
 			handleStartAndEnd(before, after, temp = false) {
 				if (!(before && after)) return
 
-				const type = temp ? 'tempRange' : 'range'
+				const mode = temp ? 'tempRange' : 'range'
 				const isStartEarlierEnd = dateCompare(before, after)
-				this[type].startDate = isStartEarlierEnd ? before : after;
-				this[type].endDate = isStartEarlierEnd ? after : before;
+				this[mode].startDate = isStartEarlierEnd ? before : after;
+				this[mode].endDate = isStartEarlierEnd ? after : before;
 			},
 			
 			/**
@@ -844,6 +795,59 @@
 					}
 				}
 			}
+		},
+		watch: {
+			mode: {
+				immediate: true,
+				handler(newVal) {
+					this.hasTime = newVal.indexOf('time') !== -1;
+					this.isRange = newVal.indexOf('range') !== -1;
+				}
+			},
+			// #ifndef VUE3
+			value: {
+				immediate: true,
+				handler(newVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false;
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			// #ifdef VUE3
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					if (this.isEmitValue) {
+						this.isEmitValue = false;
+						return
+					}
+					this.initPicker(newVal)
+				}
+			},
+			// #endif
+			start: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) return
+					this.calendarRange.startDate = getDate(newVal);
+					if (this.hasTime) {
+						this.calendarRange.startTime = getTime(newVal);
+					}
+				}
+			},
+			end: {
+				immediate: true,
+				handler(newVal) {
+					if (!newVal) return
+					this.calendarRange.endDate = getDate(newVal);
+					if (this.hasTime) {
+						this.calendarRange.endTime = getTime(newVal, this.hideSecond);
+					}
+				}
+			},
 		}
 	}
 </script>

package/components/fu-date-picker/props.js

@@ -1,6 +1,6 @@
 export default {
 	props: {
-		type: {
+		mode: {
 			type: String,
 			default: 'datetime'
 		},

package/components/fu-date-picker/time-picker.vue

@@ -4,9 +4,9 @@
 			<slot>
 				<view class="fu-datetime-picker-timebox-pointer"
 					:class="{'fu-datetime-picker-disabled': disabled, 'fu-datetime-picker-timebox': border}">
-					<text class="fu-datetime-picker-text">{{time}}</text>
+					<text class="fu-datetime-picker-text">{{ time }}</text>
 					<view v-if="!time" class="fu-datetime-picker-time">
-						<text class="fu-datetime-picker-text">{{selectTimeText}}</text>
+						<text class="fu-datetime-picker-text">{{ selectTimeText }}</text>
 					</view>
 				</view>
 			</slot>
@@ -15,24 +15,24 @@
 		<view v-if="visible" class="fu-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
 			:style="fixNvueBug">
 			<view class="fu-title">
-				<text class="fu-datetime-picker-text">{{selectTimeText}}</text>
+				<text class="fu-datetime-picker-text">{{ selectTimeText }}</text>
 			</view>
 			<view v-if="dateShow" class="fu-datetime-picker__container-box">
 				<picker-view class="fu-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
 					@change="bindDateChange">
 					<picker-view-column>
 						<view class="fu-datetime-picker-item" v-for="(item,index) in years" :key="index">
-							<text class="fu-datetime-picker-item">{{lessThanTen(item)}}</text>
+							<text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
 						</view>
 					</picker-view-column>
 					<picker-view-column>
 						<view class="fu-datetime-picker-item" v-for="(item,index) in months" :key="index">
-							<text class="fu-datetime-picker-item">{{lessThanTen(item)}}</text>
+							<text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
 						</view>
 					</picker-view-column>
 					<picker-view-column>
 						<view class="fu-datetime-picker-item" v-for="(item,index) in days" :key="index">
-							<text class="fu-datetime-picker-item">{{lessThanTen(item)}}</text>
+							<text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
 						</view>
 					</picker-view-column>
 				</picker-view>
@@ -45,17 +45,17 @@
 					:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
 					<picker-view-column>
 						<view class="fu-datetime-picker-item" v-for="(item,index) in hours" :key="index">
-							<text class="fu-datetime-picker-item">{{lessThanTen(item)}}</text>
+							<text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
 						</view>
 					</picker-view-column>
 					<picker-view-column>
 						<view class="fu-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
-							<text class="fu-datetime-picker-item">{{lessThanTen(item)}}</text>
+							<text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
 						</view>
 					</picker-view-column>
 					<picker-view-column v-if="!hideSecond">
 						<view class="fu-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
-							<text class="fu-datetime-picker-item">{{lessThanTen(item)}}</text>
+							<text class="fu-datetime-picker-item">{{ lessThanTen(item) }}</text>
 						</view>
 					</picker-view-column>
 				</picker-view>
@@ -65,14 +65,14 @@
 			</view>
 			<view class="fu-datetime-picker-btn">
 				<view @click="clearTime">
-					<text class="fu-datetime-picker-btn-text">{{clearText}}</text>
+					<text class="fu-datetime-picker-btn-text">{{ clearText }}</text>
 				</view>
 				<view class="fu-datetime-picker-btn-group">
 					<view class="fu-datetime-picker-cancel" @click="tiggerTimePicker">
-						<text class="fu-datetime-picker-btn-text">{{cancelText}}</text>
+						<text class="fu-datetime-picker-btn-text">{{ cancelText }}</text>
 					</view>
 					<view @click="setTime">
-						<text class="fu-datetime-picker-btn-text">{{okText}}</text>
+						<text class="fu-datetime-picker-btn-text">{{ okText }}</text>
 					</view>
 				</view>
 			</view>
@@ -98,7 +98,7 @@
 	 */
 	export default {
 		name: 'FuTimePicker',
-		emits: ['change', 'input'],
+		emits: ['change', 'input', 'update:modelValue'],
 		data() {
 			return {
 				indicatorStyle: `height: 50px;`,

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

@@ -1,26 +1,26 @@
 <template>
-	<view class="fu-forms-item"
-		:class="['is-direction-' + localLabelPos , border?'fu-forms-item--border': '' , border && isFirstBorder? 'is-first-border': '']">
+	<view class="fu-form-item"
+		:class="['is-direction-' + localLabelPos , border?'fu-form-item--border': '' , border && isFirstBorder? 'is-first-border': '']">
 		<slot name="label">
-			<view class="fu-forms-item__label" :class="{'no-label': !label && !required}" :style="{width: localLabelWidth, justifyContent: localLabelAlign}">
+			<view class="fu-form-item__label" :class="{'no-label': !label && !required}" :style="{width: localLabelWidth, justifyContent: localLabelAlign}">
 				<text v-if="required" class="is-required">*</text>
 				<text>{{ label }}</text>
 			</view>
 		</slot>
 		<!-- #ifndef APP-NVUE -->
-		<view class="fu-forms-item__content">
+		<view class="fu-form-item__content">
 			<slot></slot>
-			<view class="fu-forms-item__error" :class="{'msg--active': msg}">
+			<view class="fu-form-item__error" :class="{'msg--active': msg}">
 				<text>{{ msg }}</text>
 			</view>
 		</view>
 		<!-- #endif -->
 		<!-- #ifdef APP-NVUE -->
-		<view class="fu-forms-item__nuve-content">
-			<view class="fu-forms-item__content">
+		<view class="fu-form-item__nuve-content">
+			<view class="fu-form-item__content">
 				<slot></slot>
 			</view>
-			<view class="fu-forms-item__error" :class="{'msg--active': msg}">
+			<view class="fu-form-item__error" :class="{'msg--active': msg}">
 				<text class="error-text">{{ msg }}</text>
 			</view>
 		</view>
@@ -43,7 +43,7 @@
 	 * 	@value right	label 右侧对齐
 	 * @property {String } message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 	 * @property {String } prop 表单域的属性名，在使用校验规则时必填
-	 * @property {String } 	labelPosition = [top|left] label的文字的位置（默认left）
+	 * @property {String } labelPosition = [top|left] label的文字的位置，优先级高于fu-form组件中的labelPosition
 	 * 	@value top	顶部显示 label
 	 * 	@value left	左侧显示 label
 	 */
@@ -222,7 +222,7 @@
 				// 宽度
 				this.localLabelWidth = this._labelWidthUnit(labelWidth);
 				// 标签位置
-				this.localLabelPos = this._labelPosition();
+				this.localLabelPos = this.labelPosition || this._labelPosition();
 				// 将需要校验的子组件加入form 队列
 				this.form && type && childrens.push(this)
 		
@@ -367,17 +367,18 @@
 			},
 			'form.labelPosition'(val) {
 				// 标签位置
-				this.localLabelPos = this._labelPosition()
+				this.localLabelPos = this.labelPosition || this._labelPosition()
 			},
 			'form.labelAlign'(val) {
-		
+				// 标签对齐方式
+				this.localLabelAlign = this._justifyContent();
 			}
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.fu-forms-item {
+	.fu-form-item {
 		position: relative;
 		display: flex;
 		/* #ifdef APP-NVUE */
@@ -434,7 +435,7 @@
 			/* #endif */
 		}
 	
-		& .fu-forms-item__nuve-content {
+		& .fu-form-item__nuve-content {
 			display: flex;
 			flex-direction: column;
 			flex: 1;
@@ -478,7 +479,7 @@
 		&.is-direction-top {
 			flex-direction: column;
 	
-			.fu-forms-item__label {
+			.fu-form-item__label {
 				padding: 0 0 8px;
 				line-height: 1.5715;
 				text-align: left;
@@ -489,40 +490,37 @@
 		}
 	
 		.is-required {
-			// color: $fu-color-error;
 			color: #dd524d;
 			font-weight: bold;
 		}
 	}
 	
 	
-	.fu-forms-item--border {
+	.fu-form-item--border {
 		margin-bottom: 0;
 		padding: 10px 0;
-		// padding-bottom: 0;
 		border-top: 1px #eee solid;
 	
 		/* #ifndef APP-NVUE */
-		.fu-forms-item__content {
+		.fu-form-item__content {
 			flex-direction: column;
 			justify-content: flex-start;
 			align-items: flex-start;
 	
-			.fu-forms-item__error {
+			.fu-form-item__error {
 				position: relative;
 				top: 5px;
 				left: 0;
 				padding-top: 0;
 			}
 		}
-	
 		/* #endif */
 	
 		/* #ifdef APP-NVUE */
 		display: flex;
 		flex-direction: column;
 	
-		.fu-forms-item__error {
+		.fu-form-item__error {
 			position: relative;
 			top: 0px;
 			left: 0;
@@ -531,7 +529,6 @@
 		}
 	
 		/* #endif */
-	
 	}
 	
 	.is-first-border {

package/components/fu-form-item/props.js

@@ -34,6 +34,11 @@ export default {
 		message: {
 			type: [String, Boolean],
 			default: ''
+		},
+		// label的文字的位置，优先级高于fu-form组件中的labelPosition
+		labelPosition: {
+			type: String,
+			default: ''
 		}
 	},
 }

package/components/fu-popup/fu-popup.vue

@@ -149,7 +149,7 @@
 		  this.setH5Visible(true);
 		},
 		created() {
-			this.mkclick = this.isMaskClick || true;
+			this.mkclick = this.isMaskClick || false;
 			if (this.animation) {
 				this.duration = this.duration
 			} else {

package/components/fu-section/fu-section.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="fu-section" :class="customClass" :style="[customStyle]">
 		<view class="fu-section-header" @click="onClick">
-			<view class="fu-section-header__decoration" :class="type" v-if="type" />
+			<view class="fu-section-header__decoration" :class="mode" v-if="mode" />
 			<slot v-else name="decoration"></slot>
 
 			<view class="fu-section-header__content">
@@ -29,7 +29,7 @@
 	/**
 	 * Section 标题栏
 	 * @description 标题栏
-	 * @property {String} type = [line|circle|square] 标题装饰类型
+	 * @property {String} mode = [line|circle|square] 标题装饰类型
 	 * 	@value line 竖线
 	 * 	@value circle 圆形
 	 * 	@value square 正方形
@@ -41,6 +41,7 @@
 	 * @property {String} subTitleColor 副标题字体颜色
 	 * @property {String} customClass 自定义class
 	 * @property {Object,String} customStyle 自定义样式
+	 * @event {Function} click 点击标题栏触发
 	 */
 	export default {
 		name: 'FuSection',

package/components/fu-section/props.js

@@ -1,6 +1,6 @@
 export default {
 	props: {
-		type: {
+		mode: {
 			type: String,
 			default: ''
 		},
@@ -15,7 +15,7 @@ export default {
 		},
 		titleColor: {
 			type: String,
-			default: '#333'
+			default: '#333333'
 		},
 		subTitle: {
 			type: String,
@@ -27,7 +27,7 @@ export default {
 		},
 		subTitleColor: {
 			type: String,
-			default: '#999'
+			default: '#999999'
 		}
 	}
 }

package/components/fu-swiper/fu-swiper.vue

@@ -102,7 +102,7 @@
 	 * @property {Number} current 初始化时，默认显示第几项
 	 * @property {String,Number} height 高度 (默认 125)
 	 * @property {String} bgColor 背景色 (默认 #f2f3f4)
-	 * @property {String} keyName 图片的属性名 (默认 image)
+	 * @property {String} nameKey 图片的属性名 (默认 image)
 	 * @property {Boolean} showTitle = [true|false] 是否显示标题（默认 false）
 	 * @property {String} keyTitle 标题的属性名
 	 * @property {Object} titleStyle 自定义标题样式
@@ -180,7 +180,7 @@
 		methods: {
 			getItemType(e) {
 				if (typeof e === 'string') return this.$fu.isVideo(this.getSource(e)) ? 'video' : 'image'
-				if (typeof e === 'object' && this.keyName) {
+				if (typeof e === 'object' && this.nameKey) {
 					if (!e.type) return this.$fu.isVideo(this.getSource(e)) ? 'video' : 'image'
 					if (e.type === 'image') return 'image'
 					if (e.type === 'video') return 'video'
@@ -190,7 +190,7 @@
 
 			getSource(e) {
 				if (typeof e === 'string') return e
-				if (typeof e === 'object' && this.keyName) return e[this.keyName]
+				if (typeof e === 'object' && this.nameKey) return e[this.nameKey]
 				else this.$fu.error('请按格式传递列表参数')
 				return ''
 			},

package/components/fu-swiper/props.js

@@ -27,7 +27,7 @@ export default {
 			default: '#f2f3f4'
 		},
 		// 图片的属性名
-		keyName: {
+		nameKey: {
 			type: String,
 			default: 'image'
 		},

package/components/fu-vtabs/fu-vtabs.vue

@@ -26,6 +26,21 @@
 				<text :class="['fu-vtabs__bar-item--value', index == activeIndex && 'fu-vtabs__bar-item-active--value']" :style="[itemStyle(index),textStyle(index)]">{{item[keyName]}}</text>
 				<view class="fu-vtabs__bar-item--badge" :style="[$fu.addStyle(barItemBadgeStyle)]" v-if="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))">
 					<!-- 标记 -->
+					<fu-badge
+						:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))" 
+						:isDot="item.badge && item.badge.isDot || propsBadge.isDot" 
+						:value="item.badge && item.badge.value || propsBadge.value" 
+						:max="item.badge && item.badge.max || propsBadge.max"
+						:type="item.badge && item.badge.type || propsBadge.type"
+						:showZero="item.badge && item.badge.showZero || propsBadge.showZero"
+						:bgColor="item.badge && item.badge.bgColor || propsBadge.bgColor"
+						:color="item.badge && item.badge.color || propsBadge.color"
+						:shape="item.badge && item.badge.shape || propsBadge.shape"
+						:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
+						:offset="item.badge && item.badge.offset || propsBadge.offset"
+						:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
+						:absolute="item.badge && item.badge.absolute || propsBadge.absolute"
+					></fu-badge>
 				</view>
 			</view>
 		</scroll-view>
@@ -62,6 +77,7 @@
 	import mpMixin from '../../libs/mixin/mpMixin.js'
 	import mixin from '../../libs/mixin/mixin.js'
 	import props from './props.js';
+	import fuBadgeProps from '../fu-badge/props.js'
 	// #ifdef APP-NVUE
 	const dom = uni.requireNativePlugin('dom')
 	// #endif
@@ -160,6 +176,9 @@
 				const style = {};
 				style.height = this.getHeight();
 				return style;
+			},
+			propsBadge() {
+				return fuBadgeProps
 			}
 		},
 		methods: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fusions-ui",
-	"version": "1.2.2",
+	"version": "1.2.4",
 	"description": "FusionsUI Component library",
 	"main": "index.js",
 	"scripts": {