fusions-ui 1.2.4 → 1.2.6

package/components/fu-code-input/props.js

@@ -1,5 +1,8 @@
 export default {
 	props: {
+		/**
+		 * @description value / v-model 预置值
+		 */
 		value: {
 			type: [String,Number],
 			default: ''
@@ -8,77 +11,123 @@ export default {
 			type: [String,Number],
 			default: ''
 		},
-		// 键盘弹起时，是否自动上推页面
+		/**
+		 * @description 键盘弹起时，是否自动上推页面
+		 * @default true
+		 */
 		adjustPosition: {
 			type: Boolean,
 			default: true
 		},
-		// 最大输入长度
+		/**
+		 * @description 最大输入长度
+		 * @default 4
+		 */
 		maxlength: {
 			type: [String,Number],
 			default: 4
 		},
-		// 是否用圆点填充
+		/**
+		 * @description 是否用圆点填充
+		 * @default false
+		 */
 		dot: {
 			type: Boolean,
 			default: false
 		},
-		// 显示模式，box-盒子模式，line-底部横线模式
+		/**
+		 * @description 显示模式
+		 * @values 'box' - 盒子模式, 'line' - 底部横线模式
+		 * @default 'box'
+		 */
 		mode: {
 			type: String,
 			default: 'box'
 		},
-		// 是否细边框
+		/**
+		 * @description 是否细边框
+		 * @default false
+		 */
 		hairline: {
 			type: Boolean,
 			default: false
 		},
-		// 字符间的距离
+		/**
+		 * @description 字符间的距离
+		 * @default 10
+		 */
 		space: {
 			type: [String,Number],
 			default: 10
 		},
-		// 是否自动获取焦点
+		/**
+		 * @description 是否自动获取焦点
+		 * @default false
+		 */
 		focus: {
 			type: Boolean,
 			default: false
 		},
-		// 字体是否加粗
+		/**
+		 * @description 字体是否加粗
+		 * @default false
+		 */
 		bold: {
 			type: Boolean,
 			default: false
 		},
-		// 字体颜色
+		/**
+		 * @description 字体颜色
+		 * @default '#626468'
+		 */
 		color: {
 			type: String,
-			default: '#5c5e62'
+			default: '#626468'
 		},
-		// 字体大小
+		/**
+		 * @description 字体大小
+		 * @default 18
+		 */
 		fontSize: {
 			type: [String,Number],
 			default: 18
 		},
-		// 输入框的大小，宽等于高
+		/**
+		 * @description 输入框的大小，宽等于高
+		 * @default 35
+		 */
 		size: {
 			type: [String,Number],
 			default: 35
 		},
-		// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+		/**
+		 * @description 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+		 * @default false
+		 */
 		disabledKeyboard: {
 			type: Boolean,
 			default: false
 		},
-		// 边框和线条颜色
+		/**
+		 * @description 边框和线条颜色
+		 * @default '#cdcdce'
+		 */
 		borderColor: {
 			type: String,
-			default: '#c9cacb'
+			default: '#cdcdce'
 		},
-		// 是否禁止输入"."符号
+		/**
+		 * @description 是否禁止输入"."符号
+		 * @default true
+		 */
 		disabledDot: {
 			type: Boolean,
 			default: true
 		},
-		// 自定义圆角（默认 4）
+		/**
+		 * @description 设置圆角
+		 * @default 4
+		 */
 		radius: {
 			type: [String,Number],
 			default: 4

package/components/fu-code-verify/fu-code-verify.vue

@@ -1,5 +1,7 @@
 <template>
-	<view class="fu-code-verify" :style="[{
+	<view 
+		class="fu-code-verify" 
+		:style="[{
 			fontSize: $fu.addUnit(size),
 			background: bgColor,
 			color: color,
@@ -8,7 +10,8 @@
 			...($fu.addStyle(customStyle) || {}),
 			...(width && { width: $fu.addUnit(width)}),
 			...(height && { lineHeight: $fu.addUnit(height)})
-		}, opacity]" @tap="start()">
+		}, opacity]" 
+		@tap="handleStart">
 		<slot>{{text || ''}}</slot>
 	</view>
 </template>
@@ -38,6 +41,7 @@
 	 * @property {String} uniqueKey	为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
 	 * @property {Boolean} startState = [true|false] 是否默认倒计时状态  默认false
 	 * @property {Object,String} customStyle 自定义外部样式
+	 * 
 	 * @event {Function} send 点击按钮触发
 	 * @event {Function} start 开始倒计时触发
 	 * @event {Function} end 结束倒计时触发
@@ -101,7 +105,7 @@
 				}
 			},
 			
-			start() {
+			handleStart() {
 				if(!this.secNum || this.timer) return
 				this.text = this.sendText || '';
 				this.opacity = `opacity: ${this.isOpacity? '.6': 1};`;
@@ -174,7 +178,7 @@
 			seconds: {
 				immediate: true,
 				handler(n) {
-					this.secNum = n
+					this.secNum = n;
 				}
 			},
 			successVal(val) {
@@ -204,7 +208,7 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/color.scss';
+	@import '../../libs/style/color.scss';
 	
 	.fu-code-verify {
 		width: fit-content;

package/components/fu-code-verify/props.js

@@ -1,86 +1,133 @@
 export default {
 	props: {
-		// 倒计时总秒数
+		/**
+		 * @description 倒计时总秒数
+		 * @default 60
+		 */
 		seconds: {
 			type: Number,
 			default: 60
 		},
-		// 发送前显示文本
+		/**
+		 * @description 发送前显示文本
+		 * @default '获取验证码'
+		 */
 		startText: {
 			type: String,
 			default: '获取验证码'
 		},
-		// 发送中显示文本
+		/**
+		 * @description 发送中显示文本
+		 * @default '请稍候...'
+		 */
 		sendText: {
 			type: String,
 			default: '请稍候...'
 		},
-		// 正在倒计时中的提示
+		/**
+		 * @description 正在倒计时中的提示
+		 * @default 'Xs后获取'
+		 */
 		changeText: {
 			type: String,
 			default: 'Xs后获取'
 		},
-		// 倒计时结束时的提示
+		/**
+		 * @description 倒计时结束时的提示
+		 * @default '重新获取'
+		 */
 		endText: {
 			type: String,
 			default: '重新获取'
 		},
-		// 按钮宽度
+		/**
+		 * @description 按钮宽度
+		 */
 		width: {
 			type: [String,Number],
 			default: ''
 		},
-		// 按钮高度
+		/**
+		 * @description 按钮高度
+		 */
 		height: {
 			type: [String,Number],
 			default: ''
 		},
-		// 按钮字体颜色
+		/**
+		 * @description 按钮字体颜色
+		 */
 		color: {
 			type: String,
 			default: ''
 		},
-		// 按钮字体大小
+		/**
+		 * @description 按钮字体大小
+		 * @default 14
+		 */
 		size: {
 			type: [String,Number],
 			default: 14
 		},
-		// 按钮背景颜色
+		/**
+		 * @description 按钮背景颜色
+		 * @default 'transparent'
+		 */
 		bgColor: {
 			type: String,
 			default: 'transparent'
 		},
-		// 按钮边框颜色
+		/**
+		 * @description 按钮边框颜色
+		 * @default 'transparent'
+		 */
 		borderColor: {
 			type: String,
 			default: 'transparent'
 		},
-		// 按钮圆角值
+		/**
+		 * @description 按钮圆角值
+		 * @default 4
+		 */
 		radius: {
 			type: [String,Number],
 			default: 4
 		},
-		// 倒计时的时候是否改变opacity值
+		/**
+		 * @description 倒计时的时候是否改变opacity值
+		 * @default true
+		 */
 		isOpacity: {
 			type: Boolean,
 			default: true
 		},
-		// 短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）	
+		/**
+		 * @description 短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
+		 * @default 0
+		 */	
 		successVal: {
 			type: Number,
 			default: 0
 		},
-		// 是否在H5刷新或各端返回再进入时继续倒计时
+		/**
+		 * @description 是否在H5刷新或各端返回再进入时继续倒计时
+		 * @default false
+		 */
 		keepRunning: {
 		    type: Boolean,
 		    default: false
 		},
-		// 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+		/**
+		 * @description 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
+		 */
 		uniqueKey: {
 		    type: String,
 		    default: ''
 		},
-		// 是否默认为倒计时状态  默认false
+		/**
+		 * @description 是否默认为倒计时状态
+		 * @default false
+		 */
 		startState: {
 			type: Boolean,
 			default: false

package/components/fu-collapse/fu-collapse.vue

@@ -13,7 +13,9 @@
 	 * @property {String,Array} value 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
 	 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
 	 * @property {String} bgColor  自定义背景色  默认（'#FFFFFF'） 透明色设置transparent
+	 * 
 	 * @event {Function} change 切换面板时触发，如果是手风琴模式，返回类型为string，否则为array
+	 * @example <fu-collapse></fu-collapse>
 	 */
 	export default {
 		name:"FuCollapse",
@@ -76,6 +78,7 @@
 				})
 				this.emit(val)
 			},
+			
 			setAccordion(self) {
 				if (!this.accordion) return
 				this.childrens.forEach((item, index) => {
@@ -84,6 +87,7 @@
 					}
 				})
 			},
+			
 			resize() {
 				this.childrens.forEach((item, index) => {
 					// #ifndef APP-NVUE
@@ -94,7 +98,8 @@
 					// #endif
 				})
 			},
-			onChange(isOpen, self) {
+			
+			handleChange(isOpen, self) {
 				let activeItem = []
 		
 				if (this.accordion) {
@@ -109,6 +114,7 @@
 				this.$emit('change', activeItem)
 				this.emit(activeItem)
 			},
+			
 			emit(val){
 				this.$emit('input', val)
 				this.$emit('update:modelValue', val)
@@ -123,14 +129,15 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-collapse {
+		@include flex(column);
 		/* #ifndef APP-NVUE */
 		width: 100%;
-		display: flex;
 		/* #endif */
 		/* #ifdef APP-NVUE */
 		flex: 1;
 		/* #endif */
-		flex-direction: column;
 	}
 </style>

package/components/fu-collapse/props.js

@@ -1,6 +1,8 @@
 export default {
 	props: {
-		// 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
+		/**
+		 * @description 当前激活面板改变时触发(如果是手风琴模式，参数类型为string，否则为array)
+		 */
 		value: {
 			type: [String,Array],
 			default: ''
@@ -9,12 +11,16 @@ export default {
 			type: [String,Array],
 			default: ''
 		},
-		// 是否开启手风琴效果是否开启手风琴效果
+		/**
+		 * @description 是否开启手风琴效果是否开启手风琴效果
+		 */
 		accordion: {
 			type: Boolean,
 			default: false
 		},
-		// 自定义背景色
+		/**
+		 * @description 自定义背景色
+		 */
 		bgColor: {
 			type: String,
 			default: '#FFFFFF'

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

@@ -1,7 +1,10 @@
 <template>
 	<view class="fu-collapse-item">
-		<view @click="onClick(!isOpen)" class="fu-collapse-item__title"
-			:class="{'is-open':isOpen &&titleBorder === 'auto' ,'fu-collapse-item-border':titleBorder !== 'none'}" :style="{background: bgColor}">
+		<view 
+			class="fu-collapse-item__title"
+			:class="{'is-open':isOpen &&titleBorder === 'auto' ,'fu-collapse-item-border':titleBorder !== 'none'}" 
+			:style="{background: bgColor}"
+			@click="handleClick(!isOpen)">
 			<view class="fu-collapse-item__title-wrap">
 				<slot name="title">
 					<view class="fu-collapse-item__title-box" :class="{'is-disabled':disabled}" :style="[{padding: padding}]">
@@ -14,12 +17,18 @@
 				class="fu-collapse-item__title-arrow" 
 				:class="{ 'fu-collapse-item__title-arrow-active': isOpen, 'fu-collapse-item--animation': showAnimation === true }"
 				v-if="showArrow">
-				<fu-icons :color="disabled?'#ddd':'#bbb'" size="15" name="down" />
+				<fu-icon :color="disabled?'#ddd':'#bbb'" size="15" name="down" />
 			</view>
 		</view>
-		<view class="fu-collapse-item__wrap" :class="{'is--transition':showAnimation}" :style="{height: (isOpen?height:0) +'px'}">
-			<view :id="elId" ref="collapse--hook" class="fu-collapse-item__wrap-content"
-				:class="{open:isheight,'fu-collapse-item--border':border&&isOpen}">
+		<view 
+			class="fu-collapse-item__wrap" 
+			:class="{'is--transition':showAnimation}" 
+			:style="{height: (isOpen? height: 0) + 'px'}">
+			<view 
+				:id="elId" 
+				ref="collapse--hook" 
+				class="fu-collapse-item__wrap-content"
+				:class="{open: isheight, 'fu-collapse-item--border': border && isOpen}">
 				<slot></slot>
 			</view>
 		</view>
@@ -44,8 +53,11 @@
 	 * @property {Boolean} disabled = [true|false] 是否展开面板  默认false
 	 * @property {Boolean} showAnimation = [true|false] 开启动画
 	 * @property {Boolean} showArrow = [true|false] 是否显示右侧箭头
-	 * @property {String} bgColor  自定义背景色  默认（'#FFFFFF'） 透明色设置transparent
+	 * @property {String} bgColor 背景颜色  默认（'#FFFFFF'） 透明色设置transparent
 	 * @property {String} padding 自定义内间距（默认 '0 30rpx'）
+	 * 
+	 * @event {Function} change 某个item被打开或者收起时触发
+	 * @example <fu-collapse-item :title="item.title" v-for="(item, index) in list" :key="index">{{ item.name }}</fu-collapse-item>
 	 */
 	export default {
 		name:"FuCollapseItem",
@@ -69,7 +81,7 @@
 		created() {
 			this.collapse = this.getCollapse();
 			this.oldHeight = 0;
-			this.onClick(this.open, 'init');
+			this.handleClick(this.open, 'init');
 		},
 		// #ifndef VUE3
 		destroyed() {
@@ -109,6 +121,7 @@
 				this.getNvueHwight(type)
 				// #endif
 			},
+			
 			uninstall() {
 				if (this.collapse) {
 					this.collapse.childrens.forEach((item, index) => {
@@ -123,16 +136,18 @@
 					})
 				}
 			},
-			onClick(isOpen, type) {
+			
+			handleClick(isOpen, type) {
 				if (this.disabled) return
 				this.isOpen = isOpen;
 				if (this.isOpen && this.collapse) {
 					this.collapse.setAccordion(this)
 				}
 				if (type !== 'init') {
-					this.collapse.onChange(isOpen, this)
+					this.collapse.handleChange(isOpen, this)
 				}
 			},
+			
 			getCollapseHeight(type, index = 0) {
 				const views = uni.createSelectorQuery().in(this)
 				views.select(`#${this.elId}`).fields({size: true}, data => {
@@ -144,31 +159,33 @@
 						return
 					}
 					// #ifdef APP-NVUE
-					this.height = data.height + 1
+					this.height = data.height + 1;
 					// #endif
 					// #ifndef APP-NVUE
-					this.height = data.height
+					this.height = data.height;
 					// #endif
-					this.isheight = true
+					this.isheight = true;
 					if (type) return
-					this.onClick(this.isOpen, 'init')
+					this.handleClick(this.isOpen, 'init')
 				}).exec()
 			},
+			
 			getNvueHwight(type) {
 				const result = dom.getComponentRect(this.$refs['collapse--hook'], option => {
 					if (option && option.result && option.size) {
 						// #ifdef APP-NVUE
-						this.height = option.size.height + 1
+						this.height = option.size.height + 1;
 						// #endif
 						// #ifndef APP-NVUE
-						this.height = option.size.height
+						this.height = option.size.height;
 						// #endif
-						this.isheight = true
+						this.isheight = true;
 						if (type) return
-						this.onClick(this.open, 'init')
+						this.handleClick(this.open, 'init')
 					}
 				})
 			},
+			
 			/**
 			 * 获取父元素实例
 			 */
@@ -186,25 +203,26 @@
 		watch: {
 			open(val) {
 				this.isOpen = val
-				this.onClick(val, 'init')
+				this.handleClick(val, 'init')
 			}
 		}
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	
 	.fu-collapse-item {
 		/* #ifndef APP-NVUE */
 		box-sizing: border-box;
-	
 		/* #endif */
+		
 		&__title {
+			@include flex(row);
 			/* #ifndef APP-NVUE */
-			display: flex;
 			width: 100%;
 			box-sizing: border-box;
 			/* #endif */
-			flex-direction: row;
 			align-items: center;
 			transition: border-bottom-color .3s;
 
@@ -214,13 +232,11 @@
 			}
 	
 			&-box {
-				// padding: 0 15px;
+				@include flex(row);
 				/* #ifndef APP-NVUE */
-				display: flex;
 				width: 100%;
 				box-sizing: border-box;
 				/* #endif */
-				flex-direction: row;
 				justify-content: space-between;
 				align-items: center;
 				height: 48px;
@@ -261,17 +277,17 @@
 				/* #ifndef APP-NVUE */
 				white-space: nowrap;
 				color: inherit;
+				overflow: hidden;
 				/* #endif */
 				/* #ifdef APP-NVUE */
 				lines: 1;
 				/* #endif */
-				overflow: hidden;
 				text-overflow: ellipsis;
 			}
 	
 			&-arrow {
+				@include flex;
 				/* #ifndef APP-NVUE */
-				display: flex;
 				box-sizing: border-box;
 				/* #endif */
 				align-items: center;
@@ -290,13 +306,12 @@
 			/* #ifndef APP-NVUE */
 			will-change: height;
 			box-sizing: border-box;
-			/* #endif */
 			overflow: hidden;
+			/* #endif */
 			position: relative;
 			height: 0;
 	
 			&.is--transition {
-				// transition: all 0.3s;
 				transition-property: height, border-bottom-width;
 				transition-duration: 0.3s;
 				/* #ifndef APP-NVUE */
@@ -308,7 +323,6 @@
 				position: absolute;
 				font-size: 13px;
 				color: #303133;
-				// transition: height 0.3s;
 				border-bottom-color: transparent;
 				border-bottom-style: solid;
 				border-bottom-width: 0;