fusions-ui 1.2.4 → 1.2.7

package/components/fu-scroll-list/fu-scroll-list.vue

@@ -28,7 +28,7 @@
 		<!-- #endif -->
 		
 		<!-- 指示灯 -->
-		<view class="fu-scroll-list__indicator" :style="[ledStyle]" v-show="indicator">
+		<view class="fu-scroll-list__indicator" v-show="indicator">
 			<view class="fu-scroll-list__indicator__line" :style="[lineStyle]">
 				<view ref="fu-scroll-list__indicator__line__bar" class="fu-scroll-list__indicator__line__bar" :style="[barStyle]"></view>
 			</view>
@@ -53,7 +53,6 @@
 	 * @property {Boolean} indicator = [true|false] 是否显示面板指示器 (默认 true )
 	 * @property {String} indicatorColor 指示器非激活颜色 (默认 '#f2f2f2' )
 	 * @property {String} indicatorActiveColor 指示器的激活颜色（默认 '#2979ff'）
-	 * @property {String,Object} indicatorStyle 指示器样式，可通过bottom，left，right进行定位
 	 */
 	export default {
 		name:"FuScrollList",
@@ -75,31 +74,28 @@
 		computed: {
 			// 指示器为线型的样式
 			barStyle() {
-				const style = {}
+				const style = {};
 				// #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
 				// 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
 				// 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
 				// 滑动距离(指示器的总宽度减去滑块宽度)的比值
 				const scrollLeft = this.scrollInfo.scrollLeft,
 					scrollWidth = this.scrollInfo.scrollWidth,
-					barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
-				const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
-				style.transform = `translateX(${ x }px)`
+					barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth;
+				const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth;
+				style.transform = `translateX(${ x }px)`;
 				// #endif
 				// 设置滑块的宽度和背景色，是每个平台都需要的
-				style.width = this.$fu.addUnit(this.indicatorBarWidth)
+				style.width = this.$fu.addUnit(this.indicatorBarWidth);
 				style.backgroundColor = this.indicatorActiveColor;
 				return style
 			},
+			// 指示器整体的样式，需要设置其宽度和背景色
 			lineStyle() {
-				const style = {}
-				// 指示器整体的样式，需要设置其宽度和背景色
-				style.width = this.$fu.addUnit(this.indicatorWidth)
-				style.backgroundColor = this.indicatorColor
-				return style
-			},
-			ledStyle() {
-				return this.$fu.addStyle(this.indicatorStyle)
+				return {
+					width: this.$fu.addUnit(this.indicatorWidth),
+					backgroundColor: this.indicatorColor
+				}
 			}
 		},
 		mounted() {
@@ -161,36 +157,22 @@
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/css/color.scss';
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 	
 	.fu-scroll-list {
 		padding-bottom: 10px;
 	
 		&__scroll-view {
-			/* #ifndef APP-NVUE */
-			display: flex;
-			/* #endif */
-			/* #ifdef APP-NVUE */
-			flex-direction: row;
-			/* #endif */
+			@include flex(row);
 	
 			&__content {
-				/* #ifndef APP-NVUE */
-				display: flex;
-				/* #endif */
-				/* #ifdef APP-NVUE */
-				flex-direction: row;
-				/* #endif */
+				@include flex(row);
 			}
 		}
 	
 		&__indicator {
-			/* #ifndef APP-NVUE */
-			display: flex;
-			/* #endif */
-			/* #ifdef APP-NVUE */
-			flex-direction: row;
-			/* #endif */
+			@include flex(row);
 			justify-content: center;
 			margin-top: 15px;
 	
@@ -198,7 +180,9 @@
 				width: 60px;
 				height: 4px;
 				border-radius: 100px;
+				/* #ifndef APP-NVUE */
 				overflow: hidden;
+				/* #endif */
 	
 				&__bar {
 					width: 20px;

package/components/fu-scroll-list/props.js

@@ -1,34 +1,43 @@
 export default {
 	props: {
-		// 指示器的整体宽度
+		/**
+		 * @description 指示器的整体宽度
+		 * @default 50
+		 */
 		indicatorWidth: {
 			type: [String, Number],
 			default: 50
 		},
-		// 滑块的宽度
+		/**
+		 * @description 滑块的宽度
+		 * @default 20
+		 */
 		indicatorBarWidth: {
 			type: [String, Number],
 			default: 20
 		},
-		// 是否显示面板指示器
+		/**
+		 * @description 是否显示面板指示器
+		 * @default true
+		 */
 		indicator: {
 			type: Boolean,
 			default: true
 		},
-		// 指示器非激活颜色
+		/**
+		 * @description 指示器非激活颜色
+		 * @default '#f2f2f2'
+		 */
 		indicatorColor: {
 			type: String,
 			default: '#f2f2f2'
 		},
-		// 指示器的激活颜色
+		/**
+		 * @description 指示器的激活颜色
+		 */
 		indicatorActiveColor: {
 			type: String,
 			default: ''
-		},
-		// 指示器样式，可通过bottom，left，right进行定位
-		indicatorStyle: {
-			type: [String, Object],
-			default: 'bottom'
 		}
 	}
 }

package/components/fu-search/fu-search.vue

@@ -3,7 +3,7 @@
 		<view class="fu-search__box" :style="[searchStyle]" @click="searchClick">
 			<view class="fu-search__box__icon-search">
 				<slot name="searchIcon">
-					<fu-icons :name="searchIcon" :color="searchIconColor" :size="searchIconSize" />
+					<fu-icon :name="searchIcon" :color="searchIconColor" :size="searchIconSize" />
 				</slot>
 			</view>
 			<input 
@@ -29,7 +29,7 @@
 			<text class="fu-search__text-placeholder" :style="[inputStyle]" v-else>{{ placeholder }}</text>
 			<view class="fu-search__box__icon-clear" v-if="show && (clearabled === 'always' || clearabled==='auto' && searchValue !=='') && !readonly" @click="clear">
 				<slot name="clearIcon">
-					<fu-icons name="close-fill" color="#c0c4cc" size="20" />
+					<fu-icon name="close-fill" color="#c0c4cc" size="20" />
 				</slot>
 			</view>
 		</view>
@@ -69,6 +69,7 @@
 	 * 	@value right 右对齐
 	 * @property {String,Number} height 高度（默认 36）
 	 * @property {String} color 输入框字体颜色
+	 * 
 	 * @event {Function} confirm fuSearch 的输入框 confirm 事件，返回参数为fuSearch的value，e={value:Number}
 	 * @event {Function} input fuSearch 的 value 改变时触发事件，返回参数为fuSearch的value，e=value
 	 * @event {Function} clear 点击清除按钮时触发事件，返回参数为fuSearch的value，e={value:Number}
@@ -76,6 +77,7 @@
 	 * @event {Function} focus input聚焦时触发事件
 	 * @event {Function} custom 用户点击右侧控件时触发
 	 * @event {Function} click readonly为true时，点击输入框，发出此事件，用于跳转搜索页
+	 * @example <fu-search></fu-search>
 	 */
 	export default {
 		name:"FuSearch",
@@ -122,7 +124,7 @@
 				this.$emit("clear", {
 					value: this.searchValue
 				})
-				this.searchValue = ""
+				this.searchValue = "";
 			},
 			
 			// 点击右边自定义按钮的事件
@@ -131,8 +133,8 @@
 				this.$emit("custom", {
 					value: this.searchValue
 				});
-				this.show = false
-				this.showFocus = false
+				this.show = false;
+				this.showFocus = false;
 				// #ifndef APP-PLUS
 				uni.hideKeyboard()
 				// #endif
@@ -215,33 +217,29 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
 	$fu-search-height: 36px;
 	
 	.fu-search {
+		@include flex(row);
 		flex: 1;
-		display: flex;
-		flex-direction: row;
 		position: relative;
 		align-items: center;
 		
 		&__box {
+			@include flex(row);
 			/* #ifndef APP-NVUE */
-			display: flex;
 			box-sizing: border-box;
-			/* #endif */
 			overflow: hidden;
+			/* #endif */
 			position: relative;
 			flex: 1;
 			justify-content: center;
-			flex-direction: row;
 			align-items: center;
 			height: $fu-search-height;
 			
 			&__icon-search {
-				/* #ifndef APP-NVUE */
-				display: flex;
-				/* #endif */
-				flex-direction: row;
+				@include flex(row);
 				padding: 0 8px;
 				justify-content: center;
 				align-items: center;
@@ -255,10 +253,7 @@
 			}
 			
 			&__icon-clear {
-				/* #ifndef APP-NVUE */
-				display: flex;
-				/* #endif */
-				flex-direction: row;
+				@include flex(row);
 				align-items: center;
 				padding: 0 8px;
 				/* #ifdef H5 */

package/components/fu-search/props.js

@@ -1,5 +1,8 @@
 export default {
 	props: {
+		/**
+		 * @description value / v-model 输入框初始值
+		 */
 		value: {
 			type: [String,Number],
 			default: ""
@@ -8,87 +11,136 @@ export default {
 			type: [String,Number],
 			default: ""
 		},
-		// 占位提示文字（默认 '搜索关键词'）
+		/**
+		 * @description 占位提示文字
+		 * @default '搜索关键词'
+		 */
 		placeholder: {
 			type: String,
 			default: "搜索关键词"
 		},
-		// 搜索栏圆角（默认 5）
+		/**
+		 * @description 搜索栏圆角
+		 * @default 5
+		 */
 		radius: {
 			type: [String,Number],
 			default: 5
 		},
-		// 输入最大长度（默认 150）
+		/**
+		 * @description 输入最大长度
+		 * @default 150
+		 */
 		maxlength: {
 			type: [String,Number],
 			default: 150
 		},
-		// 是否显示清除按钮 always 一直显示 auto 输入框不为空时显示 none 一直不显示（默认 'auto'）
+		/**
+		 * @description 是否显示清除按钮
+		 * @values 'always' - 一直显示, 'auto' - 输入框不为空时显示, 'none' - 一直不显示
+		 * @default 'auto'
+		 */
 		clearabled: {
 			type: String,
 			default: "auto"
 		},
-		// 输入框背景颜色
+		/**
+		 * @description 输入框背景颜色
+		 * @default '#F8F8F8'
+		 */
 		bgColor: {
 			type: String,
 			default: '#F8F8F8'
 		},
-		// 是否自动聚焦（默认 false）
+		/**
+		 * @description 是否自动聚焦
+		 * @default false
+		 */
 		focus: {
 			type: Boolean,
 			default: false
 		},
-		// 只读，不能有任何操作，只做展示（默认 false）
+		/**
+		 * @description 只读，不能有任何操作，只做展示
+		 * @default false
+		 */
 		readonly: {
 			type: Boolean,
 			default: false
 		},
-		// 是否显示右侧控件（默认 true ）
+		/**
+		 * @description 是否显示右侧控件
+		 * @default true
+		 */
 		showAction: {
 			type: Boolean,
 			default: true
 		},
-		// 右侧控件的样式，对象形式
+		/**
+		 * @description 右侧控件的样式，对象形式
+		 */
 		actionStyle: {
 			type: Object,
 			default: () => ({})
 		},
-		// 右侧控件文字（默认 '搜索' ）
+		/**
+		 * @description 右侧控件文字
+		 * @default '搜索'
+		 */
 		actionText: {
 			type: String,
 			default: '搜索'
 		},
-		// input输入框的样式，可以定义文字颜色，大小等，对象形式
+		/**
+		 * @description input输入框的样式，可以定义文字颜色，大小等，对象形式
+		 */
 		inputStyle: {
 			type: [String,Object],
 			default: () => ({})
 		},
-		// 左边的图标，可以为uyIcons图标名称（默认 'magnifier'）
+		/**
+		 * @description 左边的图标，可以为Icon图标名称
+		 * @default 'magnifier'
+		 */
 		searchIcon: {
 		    type: String,
 		    default: 'magnifier'
 		},
-		// 左边的图标大小（默认 18）
+		/**
+		 * @description 左边的图标大小
+		 * @default 18
+		 */
 		searchIconSize: {
 		    type: [String,Number],
 		    default: 18
 		},
-		// 左边图标的颜色（默认 '#c0c4cc'）
+		/**
+		 * @description 左边图标的颜色
+		 * @default '#c0c4cc'
+		 */
 		searchIconColor: {
 		    type: String,
 		    default: '#c0c4cc'
 		},
-		// 输入框对齐方式（默认 'center'）
+		/**
+		 * @description 输入框对齐方式
+		 * @default 'center'
+		 */
 		inputAlign: {
 			type: String,
 			default: 'center'
 		},
-		// 高度（默认 36）
+		/**
+		 * @description 设置高度
+		 * @default 36
+		 */
 		height: {
 			type: [String,Number],
 			default: 36
 		},
-		// 输入框字体颜色
+		/**
+		 * @description 输入框字体颜色
+		 */
 		color: {
 			type: String,
 			default: ''

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

@@ -1,6 +1,6 @@
 <template>
-	<view class="fu-section" :class="customClass" :style="[customStyle]">
-		<view class="fu-section-header" @click="onClick">
+	<view class="fu-section" :class="customClass" :style="[$fu.addStyle(customStyle)]">
+		<view class="fu-section-header" @click="handleClick">
 			<view class="fu-section-header__decoration" :class="mode" v-if="mode" />
 			<slot v-else name="decoration"></slot>
 
@@ -8,7 +8,7 @@
 				<text class="fu-section__content-title" 
 					:class="{'distraction': !subTitle}" 
 					:style="{'font-size': $fu.addUnit(titleSize), 'color': titleColor}">{{ title }}</text>
-				<text class="fu-section-header__content-sub" :style="{'font-size': $fu.addUnit(subTitleSize), 'color': subTitleColor}" v-if="subTitle">{{ subTitle }}</text>
+				<text class="fu-section-header__content-sub" :style="{fontSize: $fu.addUnit(subTitleSize), color: subTitleColor}" v-if="subTitle">{{ subTitle }}</text>
 			</view>
 
 			<view class="fu-section-header__slot-right">
@@ -34,44 +34,44 @@
 	 * 	@value circle 圆形
 	 * 	@value square 正方形
 	 * @property {String} title 主标题
-	 * @property {String} titleSize 主标题字体大小
+	 * @property {String,Number} titleSize 主标题字体大小
 	 * @property {String} titleColor 主标题字体颜色
 	 * @property {String} subTitle 副标题
-	 * @property {String} subTitleSize 副标题字体大小
+	 * @property {String,Number} subTitleSize 副标题字体大小
 	 * @property {String} subTitleColor 副标题字体颜色
-	 * @property {String} customClass 自定义class
-	 * @property {Object,String} customStyle 自定义样式
+	 * @property {String} customClass 定义需要用到的外部样式
+	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
 	 * @event {Function} click 点击标题栏触发
+	 * @example <fu-section title="标题"></fu-section>
 	 */
 	export default {
 		name: 'FuSection',
-		emits: ['click'],
 		mixins: [mpMixin, mixin, props],
+		emits: ['click'],
+		methods: {
+			handleClick() {
+				this.$emit('click')
+			}
+		},
 		watch: {
 			title(newVal) {
 				if (uni.report && newVal !== '') {
 					uni.report('title', newVal)
 				}
 			}
-		},
-		methods: {
-			onClick() {
-				this.$emit('click')
-			}
 		}
 	}
 </script>
 <style lang="scss" scoped>
-	$fu-primary: #2979ff !default;
+	@import '../../libs/style/components.scss';
+	@import '../../libs/style/color.scss';
 
 	.fu-section {
 
 		.fu-section-header {
+			@include flex(row);
 			position: relative;
-			/* #ifndef APP-NVUE */
-			display: flex;
-			/* #endif */
-			flex-direction: row;
 			align-items: center;
 			font-weight: normal;
 			padding: 12px 0;
@@ -102,10 +102,7 @@
 			}
 
 			&__content {
-				/* #ifndef APP-NVUE */
-				display: flex;
-				/* #endif */
-				flex-direction: column;
+				@include flex(column);
 				flex: 1;
 				color: #333;
 

package/components/fu-section/props.js

@@ -1,30 +1,56 @@
 export default {
 	props: {
+		/**
+		 * @description 标题装饰类型
+		 * @values 'line' - 竖线, 'circle' - 圆形, 'square' - 正方形
+		 */
 		mode: {
 			type: String,
 			default: ''
 		},
+		/**
+		 * @description 主标题
+		 */
 		title: {
 			type: String,
 			required: true,
 			default: ''
 		},
+		/**
+		 * @description 主标题字体大小
+		 * @default 14
+		 */
 		titleSize: {
-			type: String,
-			default: '13px'
+			type: [String,Number],
+			default: 14
 		},
+		/**
+		 * @description 主标题字体颜色
+		 * @default '#333333'
+		 */
 		titleColor: {
 			type: String,
 			default: '#333333'
 		},
+		/**
+		 * @description 副标题
+		 */
 		subTitle: {
 			type: String,
 			default: ''
 		},
+		/**
+		 * @description 副标题字体大小
+		 * @default 12
+		 */
 		subTitleSize: {
-			type: String,
-			default: '12px'
+			type: [String,Number],
+			default: 12
 		},
+		/**
+		 * @description 副标题字体颜色
+		 * @default '#999999'
+		 */
 		subTitleColor: {
 			type: String,
 			default: '#999999'