fusions-ui 1.2.4 → 1.2.6

package/components/fu-avatar/fu-avatar.vue

@@ -15,7 +15,7 @@
 			<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
 			<template v-if="mpAvatar && allowMp"></template>
 			<!-- #endif -->
-			<fu-icons :name="icon" :size="fontSize" :color="color" v-else-if="icon"></fu-icons>
+			<fu-icon :name="icon" :size="fontSize" :color="color" v-else-if="icon"></fu-icon>
 			<fu-text :text="text" :size="fontSize" :color="color" align="center" v-else-if="text"></fu-text>
 			<image 
 				class="fu-avatar__image" 
@@ -56,6 +56,7 @@
 	 * @property {String,Number} colorIndex 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
 	 * @property {String} name 组件标识符（默认 'level' ）
 	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
 	 * @event {Function} click 点击组件时触发 index: 用户传递的标识符
 	 * @example <fu-avatar :src="src" mode="square"></fu-avatar>
 	 */
@@ -127,12 +128,13 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 
 	.fu-avatar {
 		@include flex;
 		align-items: center;
 		justify-content: center;
+		flex: 0 0 auto;
 
 		&--circle {
 			border-radius: 100px;

package/components/fu-avatar/props.js

@@ -1,67 +1,102 @@
 import { checkRange } from '../../libs/function/check.js'
 export default {
 	props: {
-		// 头像图片路径(不能为相对路径)
+		/**
+		 * @description 头像图片路径(不能为相对路径)
+		 */
 		src: {
 			type: String,
 			default: ''
 		},
-		// 头像形状，circle-圆形，square-方形
+		/**
+		 * @description 头像形状
+		 * @values 'circle' - 圆形, 'square' - 方形
+		 * @default 'circle'
+		 */
 		shape: {
 			type: String,
 			default: 'circle'
 		},
-		// 头像尺寸
+		/**
+		 * @description 头像尺寸
+		 * @default 40
+		 */
 		size: {
 			type: [String,Number],
 			default: 40
 		},
-		// 裁剪模式
+		/**
+		 * @description 裁剪模式
+		 * @default 'aspectFill'
+		 */
 		mode: {
 			type: String,
 			default: 'aspectFill'
 		},
-		// 显示的文字
+		/**
+		 * @description 显示的文字
+		 */
 		text: {
 			type: String,
 			default: ''
 		},
-		// 背景色
+		/**
+		 * @description 背景颜色
+		 * @default '#c4c8d0'
+		 */
 		bgColor: {
 			type: String,
 			default: '#c4c8d0'
 		},
-		// 文字颜色
+		/**
+		 * @description 文字颜色
+		 * @default '#ffffff'
+		 */
 		color: {
 			type: String,
-			default: '#fff'
+			default: '#ffffff'
 		},
-		// 文字大小
+		/**
+		 * @description 文字大小
+		 * @default 18
+		 */
 		fontSize: {
 			type: [String,Number],
 			default: 18
 		},
-		// 显示的图标
+		/**
+		 * @description 显示的图标
+		 */
 		icon: {
 			type: String,
 			default: ''
 		},
-		// 显示小程序头像，只对百度，微信，QQ小程序有效
+		/**
+		 * @description 显示小程序头像，只对百度，微信，QQ小程序有效
+		 * @default false
+		 */
 		mpAvatar: {
 			type: Boolean,
 			default: false
 		},
-		// 是否使用随机背景色
+		/**
+		 * @description 是否使用随机背景色
+		 * @default false
+		 */
 		randomBgColor: {
 			type: Boolean,
 			default: false
 		},
-		// 加载失败的默认头像(组件有内置默认图片)
+		/**
+		 * @description 加载失败的默认头像(组件有内置默认图片)
+		 */
 		defaultUrl: {
 			type: String,
 			default: ''
 		},
-		// 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+		/**
+		 * @description 如果配置了randomBgColor=true时，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+		 */
 		colorIndex: {
 			type: [String,Number],
 			// 校验参数规则，索引在0-19之间
@@ -71,7 +106,9 @@ export default {
 			},
 			default: ''
 		},
-		// 组件标识符
+		/**
+		 * @description 组件标识符
+		 */
 		name: {
 			type: String,
 			default: ''

package/components/fu-avatar-group/fu-avatar-group.vue

@@ -8,7 +8,7 @@
 				:size="size" 
 				:shape="shape" 
 				:mode="mode" 
-				:src="$fu.object(item) ? keyName && item[keyName] || item.url : item">
+				:src="$fu.isObject(item) ? keyName && item[keyName] || item.url : item">
 			</fu-avatar>
 			<view 
 				class="fu-avatar-group__item__show-more" 
@@ -43,6 +43,7 @@
 	 * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址 
 	 * @property {String,Number} gap 头像之间的遮挡比例（0.4代表遮挡40%）（默认 0.5 ）
 	 * @property {String,Number} extraValue 需额外显示的值
+	 * 
 	 * @event {Function} showMore 头像组更多点击
 	 * @example <fu-avatar-group:urls="urls" size="35" gap="0.4" ></fu-avatar-group:urls=>
 	 */
@@ -67,7 +68,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
+	@import '../../libs/style/components.scss';
 
 	.fu-avatar-group {
 		@include flex;

package/components/fu-avatar-group/props.js

@@ -1,41 +1,61 @@
 export default {
 	props: {
-		// 头像图片组
+		/**
+		 * @description 头像图片组
+		 */
 		urls: {
 			type: Array,
 			default: () => []
 		},
-		// 最多展示的头像数量
+		/**
+		 * @description 最多展示的头像数量
+		 */
 		maxCount: {
 			type: [String,Number],
 			default: 5
 		},
-		// 头像形状
+		/**
+		 * @description 头像形状
+		 */
 		shape: {
 			type: String,
 			default: 'circle'
 		},
-		// 图片裁剪模式
+		/**
+		 * @description 图片裁剪模式
+		 * @default 'aspectFill'
+		 */
 		mode: {
 			type: String,
 			default: 'aspectFill'
 		},
-		// 超出maxCount时是否显示查看更多的提示
+		/**
+		 * @description 超出maxCount时是否显示查看更多的提示
+		 * @default true
+		 */
 		showMore: {
 			type: Boolean,
 			default: true
 		},
-		// 头像大小
+		/**
+		 * @description 头像大小
+		 * @default 40
+		 */
 		size: {
 			type: [String,Number],
 			default: 40
 		},
-		// 指定从数组的对象元素中读取哪个属性作为图片地址
+		/**
+		 * @description 指定从数组的对象元素中读取哪个属性作为图片地址
+		 */
 		keyName: {
 			type: String,
 			default: ''
 		},
-		// 头像之间的遮挡比例
+		/**
+		 * @description 头像之间的遮挡比例
+		 * @default 0.5
+		 */
 		gap: {
 			type: [String,Number],
 			validator(value) {
@@ -43,7 +63,9 @@ export default {
 			},
 			default: 0.5
 		},
-		// 需额外显示的值
+		/**
+		 * @description 需额外显示的值
+		 */
 		extraValue: {
 			type: [String,Number],
 			default: 0

package/components/fu-badge/fu-badge.vue

@@ -39,33 +39,28 @@
 	 * @property {Boolean} inverted = [true|false] 是否反转背景和字体颜色（默认 false ）
 	 * @property {Boolean} absolute = [true|false] 是否绝对定位（默认 false ）
 	 * @property {String,Object} customStyle 定义需要用到的外部样式
+	 * 
 	 * @example <fu-badge :type="type" :count="count"></fu-badge>
 	 */
 	export default {
 		name: 'fu-badge',
 		mixins: [mpMixin, mixin, props],
 		computed: {
-			// 是否将badge中心与父组件右上角重合
-			boxStyle() {
-				let style = {};
-				return style;
-			},
-			// 整个组件的样式
 			badgeStyle() {
 				const style = {}
 				if(this.color) {
-					style.color = this.color
+					style.color = this.color;
 				}
 				if (this.bgColor && !this.inverted) {
-					style.backgroundColor = this.bgColor
+					style.backgroundColor = this.bgColor;
 				}
 				if (this.absolute) {
-					style.position = 'absolute'
+					style.position = 'absolute';
 					// 如果有设置offset参数
 					if(this.offset.length) {
 						// top和right分为为offset的第一个和第二个值，如果没有第二个值，则right等于top
-						const top = this.offset[0]
-						const right = this.offset[1] || top
+						const top = this.offset[0];
+						const right = this.offset[1] || top;
 						style.top = this.$fu.addUnit(top)
 						style.right = this.$fu.addUnit(right)
 					}
@@ -96,9 +91,8 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
-	@import '../../libs/css/color.scss';
-	
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 	$fu-badge-primary: $fu-primary !default;
 	$fu-badge-error: $fu-error !default;
 	$fu-badge-success: $fu-success !default;

package/components/fu-badge/props.js

@@ -1,69 +1,109 @@
 export default {
 	props: {
-		// 是否显示
+		/**
+		 * @description 是否显示
+		 * @default true
+		 */
 		show: {
 			type: Boolean,
 			default: true
 		},
-		// 是否显示圆点
+		/**
+		 * @description 是否显示圆点
+		 * @default false
+		 */
 		isDot: {
 			type: Boolean,
 			default: false
 		},
-		// 显示的内容
+		/**
+		 * @description 显示的内容
+		 */
 		value: {
 			type: [Number, String],
 			default: ''
 		},
-		// 最大值，超过最大值会显示 '{max}+'
+		/**
+		 * @description 最大值，超过最大值会显示 '{max}+'
+		 * @default 999
+		 */
 		max: {
 			type: [Number, String],
 			default: 999
 		},
 		// 主题类型，error|warning|success|primary
+		/**
+		 * @description 主题类型
+		 * @values 'primary' - 主色, 'error' - 错误, 'success' - 成功, 'warning' - 警告, 'info' - 信息
+		 * @default 'error'
+		 */
 		type: {
 			type: [String,undefined,null],
 			default: 'error'
 		},
-		// 当数值为 0 时，是否展示 Badge
+		/**
+		 * @description 当数值为 0 时，是否展示 Badge
+		 * @default false
+		 */
 		showZero: {
 			type: Boolean,
 			default: false
 		},
-		// 背景颜色，优先级比type高，如设置，type参数会失效
+		/**
+		 * @description 背景颜色，优先级比type高，如设置，type参数会失效
+		 * @default null
+		 */
 		bgColor: {
-			type: [String, null],
+			type: [String],
 			default: null
 		},
-		// 字体颜色
+		/**
+		 * @description 字体颜色
+		 * @default null
+		 */
 		color: {
 			type: [String, null],
 			default: null
 		},
-		// 徽标形状，circle-四角均为圆角，horn-左下角为直角
+		/**
+		 * @description 徽标形状
+		 * @values 'circle' - 四角均为圆角，'horn' - 左下角为直角
+		 * @default 'circle'
+		 */
 		shape: {
 			type: [String,undefined,null],
 			default: 'circle'
 		},
-		// 设置数字的显示方式，overflow|ellipsis|limit
-		// overflow会根据max字段判断，超出显示`${max}+`
-		// ellipsis会根据max判断，超出显示`${max}...`
-		// limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
+		/**
+		 * @description 设置数字的显示方式，overflow|ellipsis|limit
+		 * overflow会根据max字段判断，超出显示`${max}+`
+		 * ellipsis会根据max判断，超出显示`${max}...`
+		 * limit会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
+		 * @default 'overflow'
+		 */
 		numberType: {
 			type: [String,undefined,null],
 			default: 'overflow'
 		},
-		// 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，absolute为true时有效
+		/**
+		 * @description 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值（仅absolute=true时有效）
+		 */
 		offset: {
 			type: Array,
 			default: () => []
 		},
-		// 是否反转背景和字体颜色
+		/**
+		 * @description 是否反转背景和字体颜色
+		 * @default false
+		 */
 		inverted: {
 			type: Boolean,
 			default: false
 		},
-		// 是否绝对定位
+		/**
+		 * @description 是否绝对定位
+		 * @default false
+		 */
 		absolute: {
 			type: Boolean,
 			default: false

package/components/fu-banner-arc/fu-banner-arc.vue

@@ -16,6 +16,7 @@
 	 * @property {String,Number} percent 圆弧元素宽度占banner宽度的百分比，用于调整弧度，最低值120  默认120
 	 * @property {String,Number} height  自定义高度（默认150）
 	 * @property {String,Number} zIndex  自定义层级（默认0）
+	 * 
 	 * @template <fu-banner-arc bgColor="red"></fu-banner-arc>
 	 */
 	export default {
@@ -31,7 +32,7 @@
 					height: this.$fu.addUnit(this.height),
 					zIndex: this.zIndex,
 					width: `${this.percent < 120? 120: this.percent}%`,
-					left: `-${(this.percent - 100) / 2}%`
+					left: `${(100 - this.percent) / 2}%`,
 				}
 			}
 		}
@@ -41,19 +42,17 @@
 <style lang="scss" scoped>
 	.fu-banner-arc {
 		position: relative;
-		overflow: hidden;
 		
 		&--box {
-			width: 120%;
 			padding-left: 10%;
 			padding-right: 10%;
-			left: -10%;
 			box-sizing: border-box;
 			position: absolute;
 			top: 0;
 			border-radius: 0 0 50% 50%;
+			/* #ifndef APP-NVUE */
 			overflow: hidden;
+			/* #endif */
 		}
-		
 	}
 </style>

package/components/fu-banner-arc/props.js

@@ -1,21 +1,32 @@
 export default {
 	props: {
-		// 自定义背景色
+		/**
+		 * @description 设置背景颜色
+		 * @default '-webkit-linear-gradient(top, rgb(84, 115, 255), rgb(109, 168, 255))'
+		 */
 		bgColor: {
 			type: String,
 			default: '-webkit-linear-gradient(top, rgb(84, 115, 255), rgb(109, 168, 255))'
 		},
-		// percent 圆弧元素宽度占banner宽度的百分比，用于调整弧度，最低值120  默认120
+		/**
+		 * @description percent 圆弧元素宽度占banner宽度的百分比，用于调整弧度，最低值120  默认120
+		 * @default 120
+		 */
 		percent: {
 			type: [String,Number],
 			default: 120
 		},
-		// height  自定义高度  默认150
+		/**
+		 * @description 设置高度
+		 * @default 200
+		 */
 		height: {
 			type: [String,Number],
 			default: 200
 		},
-		// 自定义层级  默认0 
+		/**
+		 * @description 设置层级
+		 */
 		zIndex: {
 			type: [String,Number],
 			default: 0

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

@@ -52,21 +52,19 @@
 			:send-message-img="sendMessageImg"
 			:show-message-card="showMessageCard"
 			:lang="lang" 
-			@tap.stop="handleClick">
+			@tap="handleClick">
 		<!-- #endif -->
-		<template v-if="loading">
-			<fu-loading :mode="loadingMode" :size="loadingSize * 1.5" :color="loadingColor"></fu-loading>
-			<text class="fu-button__loading-text"
-				:style="[{ fontSize: $fu.addUnit(textSize) }, $fu.addStyle(customTextStyle)]">{{ loadingText || text }}</text>
-		</template>
-		<template v-else>
-			<slot name="prefix"></slot>
-			<slot>
-				<text class="fu-button__text"
-					:style="[{ fontSize: $fu.addUnit(textSize) }, $fu.addStyle(customTextStyle)]">{{ text }}</text>
-			</slot>
-			<slot name="suffix"></slot>
-		</template>
+			<template v-if="loading">
+				<fu-loading :mode="loadingMode" :size="loadingSize * 1.5" :color="loadingColor"></fu-loading>
+				<text class="fu-button__loading-text" :style="[{ fontSize: $fu.addUnit(textSize) }, $fu.addStyle(customTextStyle)]">{{ loadingText || text }}</text>
+			</template>
+			<template v-else>
+				<slot name="prefix"></slot>
+				<slot>
+					<text class="fu-button__text" :style="[{ fontSize: $fu.addUnit(textSize) }, $fu.addStyle(customTextStyle)]">{{ text }}</text>
+				</slot>
+				<slot name="suffix"></slot>
+			</template>
 		</button>
 	</view>
 </template>
@@ -122,9 +120,10 @@
 	 * 	@value throttle 节流模式
 	 * @property {Number} sceneTime 防抖节流间隔时间单位毫秒（默认300）
 	 * @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 自定义按钮文本样式
+	 * @property {String} customClass 定义需要用到的外部样式类
+	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * @property {Object,String} customTextStyle 定义需要用到的外部按钮文本样式
+	 * 
 	 * @event {Function} click 非禁止并且非加载中，才能点击
 	 * @event {Function} tap 非禁止并且非加载中，才能点击
 	 * @event {Function} getphonenumber	open-type="getPhoneNumber"时有效
@@ -132,7 +131,7 @@
 	 * @event {Function} error 当使用开放能力时，发生错误的回调
 	 * @event {Function} chooseavatar open-type="chooseAvatar"时有效
 	 * @event {Function} contact open-type="contact"时有效
-	 * @example <fu-button>按钮</fu-button>
+	 * @example <fu-button text="按钮"></fu-button>
 	 */
 	export default {
 		name: "FuButton",
@@ -272,8 +271,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/color.scss';
-	
+	@import '../../libs/style/color.scss';
 	$fu-button-height: 40px !default;
 	$fu-button-loading-text-font-size: 15px !default;
 	$fu-button-loading-text-margin-left: 4px !default;