fusions-ui 1.2.4 → 1.2.7

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

@@ -40,7 +40,7 @@
 						 	fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
 						},textStyle(index,index1)]"
 						v-for="(item1, index1) in item" :key="index1" 
-						v-if="$fu.array(item)">{{ getItemText(item1) }}</text>
+						v-if="$fu.isArray(item)">{{ getItemText(item1) }}</text>
 				</picker-view-column>
 			</picker-view>
 		</view>
@@ -55,22 +55,22 @@
 	 * @description 此组件选择器用于单列、多列联动的的选择场景。
 	 * @property {String} bgColor 定义背景色  默认#FFFFFF
 	 * @property {String} title 定义标题  不传不显示
-	 * @property {String,Number} titleSize 标题字体大小 默认15  (注：不传单位，默认px)
+	 * @property {String,Number} titleSize 标题字体大（默认 15）
 	 * @property {String} titleColor 标题字体颜色
 	 * @property {String} confirmText 确认按钮文本
-	 * @property {String,Number} confirmSize 确认按钮字体大小 默认13  (注：不传单位，默认px)
+	 * @property {String,Number} confirmSize 确认按钮字体大小（默认 13）
 	 * @property {String} confirmColor 确认按钮文本颜色
 	 * @property {String} cancelText 取消按钮文本
-	 * @property {String,Number} cancelSize 取消按钮字体大小 默认13 (注：不传单位，默认px)
-	 * @property {String} cancelColor 取消按钮文本颜色 默认#888888
+	 * @property {String,Number} cancelSize 取消按钮字体大小（默认 13）
+	 * @property {String} cancelColor 取消按钮文本颜色（默认 '#888888'）
 	 * @property {Array} columns 对象数组，设置每一列的数据
-	 * @property {String} color 文字颜色（默认 '' ）
-	 * @property {String} activeColor 选中文字的颜色（默认 '' ）
-	 * @property {String,Number} visibleItemCount 每列中可见选项的数量  默认5
-	 * @property {String} keyName 选项对象中，需要展示的属性键名  默认value
-	 * @property {Array} defaultIndex  各列的默认索引 默认[]
-	 * @property {Boolean} maskClosable = [true|false]  是否允许点击遮罩关闭选择器 默认 true
-	 * @property {String,Number} itemHeight 各列中，单个选项的高度 默认44 (注：不传单位，默认px)
+	 * @property {String} color 文字颜色
+	 * @property {String} activeColor 选中文字的颜色
+	 * @property {String,Number} visibleItemCount 每列中可见选项的数量（默认 5）
+	 * @property {String} keyName 选项对象中，需要展示的属性键名（默认 'value'）
+	 * @property {Array} defaultIndex  各列的默认索引（默认[]）
+	 * @property {Boolean} maskClosable = [true|false]  是否允许点击遮罩关闭选择器（默认 true）
+	 * @property {String,Number} itemHeight 各列中，单个选项的高度（默认 44）
 	 * @property {Boolean} immediateChange = [true|false] 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
 	 * @event {Function} confirm 点击确定按钮时触发，返回当前选择的值
 	 * @event {Function} cancel 点击取消按钮时触发
@@ -123,14 +123,14 @@
 		methods: {
 			// 点击工具栏的取消按钮
 			cancel() {
-				this.$refs.popup.close()
+				this.close()
 				setTimeout(() => {
 					this.$emit('cancel')
 				}, 10)
 			},
 			// 点击工具栏的确定按钮
 			confirm() {
-				this.$refs.popup.close()
+				this.close()
 				// 在这里使用deepClone拷贝后，vue3会自动转换成原始对象，这样处理是因为cli项目可能出现不返回值的情况
 				this.$emit('confirm', this.$fu.deepClone({
 					indexs: this.innerIndex,
@@ -144,9 +144,14 @@
 				this.$refs.popup.open()
 			},
 			
+			// 关闭
+			close() {
+				this.$refs.popup.close()
+			},
+			
 			// 获取item需要显示的文字，判别为对象还是文本
 			getItemText(item) {
-				if (this.$fu.object(item)) {
+				if (this.$fu.isObject(item)) {
 					return item[this.keyName]
 				} else {
 					return item
@@ -272,8 +277,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-picker {
 		position: relative;

package/components/fu-picker/props.js

@@ -1,96 +1,147 @@
 export default {
 	props: {
-		// 定义背景色
+		/**
+		 * @description 背景颜色
+		 * @default '#FFFFFF'
+		 */
 		bgColor: {
 			type: String,
 			default: '#FFFFFF'
 		},
-		// 定义标题
+		/**
+		 * @description 标题
+		 */
 		title: {
 			type: String,
 			default: ''
 		},
-		// 标题字体大小 默认15  (注：不传单位，默认px)
+		/**
+		 * @description 标题字体大小
+		 * @default 15
+		 */
 		titleSize: {
 			type: [String,Number],
 			default: 15
 		},
-		// 标题字体颜色
+		/**
+		 * @description 标题字体颜色
+		 * @default '#333333'
+		 */
 		titleColor: {
 			type: String,
 			default: '#333333'
 		},
-		// 确认按钮文本
+		/**
+		 * @description 确定按钮文本
+		 * @default '确定'
+		 */
 		confirmText: {
 			type: String,
 			default: '确定'
 		},
-		// 确认按钮字体大小 默认13  (注：不传单位，默认px)
+		/**
+		 * @description 确定按钮字体大小
+		 * @default 13
+		 */
 		confirmSize: {
 			type: [String,Number],
 			default: 13
 		},
-		// 确认按钮文本颜色
+		/**
+		 * @description 确认按钮文本颜色
+		 */
 		confirmColor: {
 			type: String,
 			default: ''
 		},
-		// 取消按钮文本
+		/**
+		 * @description 取消按钮文本
+		 * @default '取消'
+		 */
 		cancelText: {
 			type: String,
 			default: '取消'
 		},
-		// 取消按钮字体大小 默认13 (注：不传单位，默认px)
+		/**
+		 * @description 取消按钮字体大小
+		 * @default 13
+		 */
 		cancelSize: {
 			type: [String,Number],
 			default: 13
 		},
-		// 取消按钮文本颜色
+		/**
+		 * @description 取消按钮文本颜色
+		 * @default '#888888'
+		 */
 		cancelColor: {
 			type: String,
 			default: '#888888'
 		},
-		// 各列中，单个选项的高度 默认88 单位rpx
+		/**
+		 * @description 各列中，单个选项的高度
+		 * @default 44
+		 */
 		itemHeight: {
 		    type: [String, Number],
 		    default: 44
 		},
-		// 对象数组，设置每一列的数据
+		/**
+		 * @description 对象数组，设置每一列的数据
+		 */
 		columns: {
 		    type: Array,
 		    default: () => []
 		},
-		// 文字颜色
+		/**
+		 * @description 文字颜色
+		 */
 		color: {
 			type: String,
 			default: ''
 		},
-		// 选中文字的颜色
+		/**
+		 * @description 选中文字的颜色
+		 */
 		activeColor: {
 			type: String,
 			default: ''
 		},
-		// 每列中可见选项的数量  默认5
+		/**
+		 * @description 每列中可见选项的数量
+		 * @default 5
+		 */
 		visibleItemCount: {
 			type: [String, Number],
 			default: 5
 		},
-		// 选项对象中，需要展示的属性键名  默认value
+		/**
+		 * @description 选项对象中，需要展示的属性键名
+		 * @default 'value'
+		 */
 		keyName: {
 		    type: String,
 		    default: 'value'
 		},
-		// 各列的默认索引 默认[]
+		/**
+		 * @description 各列的默认索引
+		 */
 		defaultIndex: {
 			type: Array,
 			default: () => []
 		},
-		// 是否允许点击遮罩关闭选择器 默认 true
+		/**
+		 * @description 是否允许点击遮罩关闭选择器
+		 * @default true
+		 */
 		maskClosable: {
 			type: Boolean,
 			default: true
 		},
-		// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
+		/**
+		 * @description 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
+		 * @default true
+		 */
 		immediateChange: {
 			type: Boolean,
 			default: true

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

@@ -1,13 +1,13 @@
 <template>
 	<view v-if="showPopup" class="fu-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" :style="{zIndex: zIndex}">
 		<view @touchstart="touchstart">
-			<fu-transition key="1" v-if="maskShow" name="mask" mode="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
-			<fu-transition key="2" :mode="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
+			<fu-transition key="1" v-if="maskShow" name="mask" mode="fade" :customStyle="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
+			<fu-transition key="2" :mode="ani" name="content" :customStyle="transClass" :duration="duration" :show="showTrans" @click="onTap">
 				<view class="fu-popup__wrapper" :style="[getStyle]" :class="[popupstyle]" @click="clear">
 					<slot />
 					<fu-safe-area mode="bottom" v-if="safeArea && direction == 'bottom'"></fu-safe-area>
 					<view class="fu-popup__wrapper__close" :class="['fu-popup__wrapper__close--' + closeIconPosition]" hover-class="fu-popup__wrapper__close--hover" hover-stay-time="150" @tap.stop="close" v-if="showClose">
-						<fu-icons name="cancel" color="#909399" size="18" bold></fu-icons>
+						<fu-icon name="cancel" color="#909399" size="18" bold></fu-icon>
 					</view>
 				</view>
 			</fu-transition>
@@ -32,8 +32,8 @@
 	 * 	@value top 顶部弹出
 	 * 	@value center 中间弹出
 	 * 	@value bottom 底部弹出
-	 * 	@value left		左侧弹出
-	 * 	@value right  右侧弹出
+	 * 	@value left 左侧弹出
+	 * 	@value right 右侧弹出
 	 * @property {Boolean} animation = [true|false] 是否开启动画
 	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
 	 * @property {String}  bgColor 主窗口背景色
@@ -47,8 +47,10 @@
 	 * 	@value bottom-left 左下角
 	 * 	@value bottom-right 右下角
 	 * @property {String,Number} radius 自定义圆角
+	 * 
 	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
 	 * @event {Function} maskClick 点击遮罩触发
+	 * @example <fu-popup>弹窗内容</fu-popup>
 	 */
 	export default {
 		name: 'FuPopup',
@@ -159,12 +161,12 @@
 			this.messageChild = null
 			// 解决头条冒泡的问题
 			this.clearPropagation = false
-			this.maskClass.backgroundColor = this.maskBgColor
+			this.maskClass.backgroundColor = this.maskBgColor;
 		},
 		methods: {
 			setH5Visible() {
 				// #ifdef H5
-				// fix by mehaotian 处理 h5 滚动穿透的问题
+				// 处理 h5 滚动穿透的问题
 				document.getElementsByTagName('body')[0].style.overflow = 'visible'
 				// #endif
 			},
@@ -185,7 +187,7 @@
 			
 			// 打开
 			open(direction) {
-				// fix by mehaotian 处理快速打开关闭的情况
+				// 处理快速打开关闭的情况
 				if (this.showPopup) {
 					return
 				}
@@ -211,29 +213,27 @@
 			
 			// 关闭
 			close(mode) {
-				this.showTrans = false
+				this.showTrans = false;
 				this.$emit('change', {
 					show: false,
 					mode: this.mode
 				})
 				clearTimeout(this.timer)
-				// // 自定义关闭事件
-				// this.customOpen && this.customClose()
 				this.timer = setTimeout(() => {
-					this.showPopup = false
+					this.showPopup = false;
 				}, 300)
 			},
 			
 			// 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
 			touchstart() {
-				this.clearPropagation = false
+				this.clearPropagation = false;
 			},
 			
 			// 点击遮罩触发
 			onTap() {
 				if (this.clearPropagation) {
 					// fix by mehaotian 兼容 nvue
-					this.clearPropagation = false
+					this.clearPropagation = false;
 					return
 				}
 				this.$emit('maskClick')
@@ -245,18 +245,17 @@
 			 * 顶部弹出样式处理
 			 */
 			top(mode) {
-				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
-				this.ani = ['slide-top']
+				this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top';
+				this.ani = ['slide-top'];
 				this.transClass = {
 					position: 'fixed',
 					left: 0,
 					right: 0,
 					...this.getStyle
-				}
-				// 兼容 mode 属性 ，后续会废弃
+				};
 				if (mode) return
-				this.showPopup = true
-				this.showTrans = true
+				this.showPopup = true;
+				this.showTrans = true;
 				this.$nextTick(() => {
 					if (this.messageChild && this.mode === 'message') {
 						this.messageChild.timerClose()
@@ -268,27 +267,26 @@
 			 * 底部弹出样式处理
 			 */
 			bottom(mode) {
-				this.popupstyle = 'bottom'
-				this.ani = ['slide-bottom']
+				this.popupstyle = 'bottom';
+				this.ani = ['slide-bottom'];
 				this.transClass = {
 					position: 'fixed',
 					left: 0,
 					right: 0,
 					bottom: 0,
 					...this.getStyle
-				}
-				// 兼容 mode 属性 ，后续会废弃
+				};
 				if (mode) return
-				this.showPopup = true
-				this.showTrans = true
+				this.showPopup = true;
+				this.showTrans = true;
 			},
 			
 			/**
 			 * 中间弹出样式处理
 			 */
 			center(mode) {
-				this.popupstyle = 'center'
-				this.ani = ['zoom-out', 'fade']
+				this.popupstyle = 'center';
+				this.ani = ['zoom-out', 'fade'];
 				this.transClass = {
 					position: 'fixed',
 					/* #ifndef APP-NVUE */
@@ -301,19 +299,18 @@
 					top: 0,
 					justifyContent: 'center',
 					alignItems: 'center'
-				}
-				// 兼容 mode 属性 ，后续会废弃
+				};
 				if (mode) return
-				this.showPopup = true
-				this.showTrans = true
+				this.showPopup = true;
+				this.showTrans = true;
 			},
 			
 			/**
 			 * 左侧弹出样式处理
 			 */
 			left(mode) {
-				this.popupstyle = 'left'
-				this.ani = ['slide-left']
+				this.popupstyle = 'left';
+				this.ani = ['slide-left'];
 				this.transClass = {
 					position: 'fixed',
 					left: 0,
@@ -324,18 +321,17 @@
 					display: 'flex',
 					flexDirection: 'column'
 					/* #endif */
-				}
-				// 兼容 mode 属性 ，后续会废弃
+				};
 				if (mode) return
-				this.showPopup = true
-				this.showTrans = true
+				this.showPopup = true;
+				this.showTrans = true;
 			},
 			
 			/**
 			 * 右侧弹出样式处理
 			 */
 			right(mode) {
-				this.popupstyle = 'right'
+				this.popupstyle = 'right';
 				this.ani = ['slide-right']
 				this.transClass = {
 					position: 'fixed',
@@ -347,11 +343,10 @@
 					display: 'flex',
 					flexDirection: 'column'
 					/* #endif */
-				}
-				// 兼容 mode 属性 ，后续会废弃
+				};
 				if (mode) return
-				this.showPopup = true
-				this.showTrans = true
+				this.showPopup = true;
+				this.showTrans = true;
 			}
 		},
 		watch: {

package/components/fu-popup/props.js

@@ -1,36 +1,54 @@
 export default {
 	props: {
-		// 是否开启动画
+		/**
+		 * @description 是否开启动画
+		 * @default true
+		 */
 		animation: {
 			type: Boolean,
 			default: true
 		},
-		// 弹出层方向
+		/**
+		 * @description 弹出层方向
+		 * @values 'top' - 顶部弹出, 'center' - 中间弹出, 'bottom' - 底部弹出, 'left' - 左侧弹出, 'right' - 右侧弹出
+		 * @default 'center'
+		 */
 		mode: {
 			type: String,
 			default: 'center'
 		},
-		// 蒙版点击是否关闭弹窗
+		/**
+		 * @description 蒙版点击是否关闭弹窗
+		 */
 		isMaskClick: {
 			type: Boolean,
 			default: null
 		},
-		// 主窗口背景色
+		/**
+		 * @description 主窗口背景色
+		 */
 		bgColor: {
 			type: String,
 			default: '#FFFFFF'
 		},
-		// 是否适配底部安全区（默认 true）
+		/**
+		 * @description 是否适配底部安全区（默认 true）
+		 * @default true
+		 */
 		safeArea: {
 			type: Boolean,
 			default: true
 		},
-		// 蒙版颜色
+		/**
+		 * @description 蒙版颜色
+		 */
 		maskBgColor: {
 			type: String,
 			default: 'rgba(0, 0, 0, 0.4)'
 		},
-		// 弹出层的层级
+		/**
+		 * @description 弹出层的层级
+		 */
 		zIndex: {
 			type: [String,Number],
 			// #ifdef H5
@@ -40,16 +58,23 @@ export default {
 			default: 10075
 			// #endif
 		},
-		// 是否显示关闭图标，默认false
+		/**
+		 * @description 是否显示关闭图标，默认false
+		 */
 		showClose: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		 * @description 设置关闭图标位置
+		 */
 		closeIconPos: {
 			type: String,
 			default: ''
 		},
-		// 自定义圆角，默认0
+		/**
+		 * @description 设置圆角
+		 */
 		radius: {
 			type: [String,Number],
 			default: 0

package/components/fu-progress/fu-progress.vue

@@ -57,6 +57,8 @@
 	 * @property {String,Number} size 进度条大小（仅mode = circle有效）
 	 * @property {String,Number} borderWidth 进度条圆环宽度（仅mode = circle有效）
 	 * @property {Number} duration 圆环执行动画的时间，单位 ms（仅mode = circle有效）
+	 * 
+	 * @example <fu-progress :percent="percent"></fu-progress>
 	 */
 	export default {
 		name: "FuProgress",
@@ -218,8 +220,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/component.scss';
-
+	@import '../../libs/style/components.scss';
 	$bg-color: #f0f0f0;
 
 	// 线形

package/components/fu-progress/props.js

@@ -1,46 +1,73 @@
 export default {
 	props: {
-		// 进度条类型  line线形  circle圆形
+		/**
+		 * @description 进度条类型
+		 * @values 'line' - 线形, 'circle' - 圆形
+		 * @default 'line'
+		 */
 		mode: {
 			type: String,
 			default: 'line'
 		},
-		// 激活部分的颜色
+		/**
+		 * @description 激活部分的颜色
+		 * @default '#2979ff'
+		 */
 		activeColor: {
 			type: String,
 			default: '#2979ff'
 		},
-		// 未激活部分的颜色
+		/**
+		 * @description 未激活部分的颜色
+		 * @default '#f0f0f0'
+		 */
 		inactiveColor: {
 			type: String,
 			default: '#f0f0f0'
 		},
-		// 进度百分比，数值
+		/**
+		 * @description 进度百分比，数值
+		 * @default 0
+		 */
 		percent: {
 			type: [String,Number],
 			default: 0
 		},
-		// 是否在进度条内部显示百分比的值
+		/**
+		 * @description 是否在进度条内部显示百分比的值
+		 * @default true
+		 */
 		showPercent: {
 			type: Boolean,
 			default: true
 		},
-		// 进度条的高度，单位px（仅mode = 有效）
+		/**
+		 * @description 进度条的高度（仅mode=line时生效）
+		 * @default 12
+		 */
 		height: {
 			type: [String,Number],
 			default: 12
 		},
-		// 进度条大小（仅mode = circle有效）
+		/**
+		 * @description 进度条大小（仅mode=circle时生效）
+		 * @default 200
+		 */ 
 		size: {
 			type: [String,Number],
 			default: 200
 		},
-		// 进度条圆环宽度（仅mode = circle有效）
+		/**
+		 * @description 进度条圆环宽度（仅mode=circle时生效）
+		 * @default 12
+		 */
 		borderWidth: {
 			type: [String,Number],
 			default: 14
 		},
-		// 圆环执行动画的时间，单位 ms（仅mode = circle有效）
+		/**
+		 * @description 圆环执行动画的时间，单位 ms（仅mode=circle时生效）
+		 */
 		duration: {
 			type: Number,
 			default: 1500