fusions-ui 1.2.4 → 1.2.6

package/components/fu-tag/fu-tag.vue

@@ -12,14 +12,14 @@
 					plain && plainFill && `fu-tag--${type}--plain--fill`
 				]"
 				:style="[{
-					marginRight: closable&& closePlace=='right-top' ? '10px' : 0,
-					marginTop: closable && closePlace=='right-top' ? '10px' : 0,
+					marginRight: closable && closePlace =='right-top'? '10px': 0,
+					marginTop: closable && closePlace =='right-top'? '10px': 0,
 				}, style, $fu.addStyle(customStyle)]" 
 				@tap="handleClick">
 				<slot name="icon">
 					<view class="fu-tag__icon" v-if="icon">
 						<image :src="icon" :style="[imgStyle]" v-if="$fu.isImage(icon)"></image>
-						<fu-icons :name="icon" :size="iconSize" :color="elIconColor" v-else></fu-icons>
+						<fu-icon :name="icon" :size="iconSize" :color="elIconColor" v-else />
 					</view>
 				</slot>
 				<text 
@@ -37,16 +37,16 @@
 					:class="[`fu-tag__close--${size}`,`fu-tag__close--${closePlace}`]"
 					:style="{backgroundColor: closeColor}"
 					@tap.stop="handleClose"
-					v-if="closable && closePlace=='right'">
-					<fu-icons name="cancel" :size="closeSize" color="#ffffff"></fu-icons>
+					v-if="closable && closePlace =='right'">
+					<fu-icon name="cancel" :size="closeSize" color="#ffffff" />
 				</view>
 			</view>
 			<view 
 				class="fu-tag__close" 
 				:class="[`fu-tag__close--${size}`,`fu-tag__close--${closePlace}`]"
 				:style="{backgroundColor: closeColor}"
-				v-if="closable && closePlace=='right-top'" @tap.stop="handleClose">
-				<fu-icons name="cancel" :size="closeSize" color="#ffffff"></fu-icons>
+				v-if="closable && closePlace =='right-top'" @tap.stop="handleClose">
+				<fu-icon name="cancel" :size="closeSize" color="#ffffff" />
 			</view>
 		</view>
 	</fu-transition>
@@ -75,31 +75,34 @@
 	 * @property {String} bgColor 背景颜色，默认为空字符串，即不处理
 	 * @property {String} color 标签字体颜色，默认为空字符串，即不处理
 	 * @property {String} borderColor 镂空形式标签的边框颜色
-	 * @property {String} closeColor 关闭按钮图标的颜色（默认 #C6C7CB）
 	 * @property {Boolean} plainFill = [true|false] 镂空时是否填充背景色（默认 false）
 	 * @property {Boolean} plain = [true|false] 是否镂空（默认 false ）
 	 * @property {Boolean} closable = [true|false] 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认 false ）
+	 * @property {String} closeColor 关闭按钮图标的颜色（默认 #C6C7CB）
+	 * @property {String} closePlace = [right|right-top] 关闭按钮图标的位置（默认 'right-top'）
 	 * @property {String} icon 内置图标，或绝对路径的图片
 	 * @property {String} iconColor 内置图标颜色
-	 * @event {Function(index)} click 点击标签时触发 index: 传递的index参数值
-	 * @event {Function(index)} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值	
+	 * @property {Boolean} cellChild nvue模式下 是否直接显示，在fu-list等cell下面使用就需要设置
+	 * 
+	 * @event {Function} click 点击标签时触发 index: 传递的index参数值
+	 * @event {Function} close closable为true时，点击标签关闭按钮触发 index: 传递的index参数值	
 	 * @example <fu-tag text="标签" type="error" plain plainFill></fu-tag>
 	 */
 	export default {
 		name: 'FuTag',
-		emits: ['click', 'close'],
 		mixins: [mpMixin, mixin, props],
+		emits: ['click', 'close'],
 		computed: {
 			style() {
 				const style = {}
 				if (this.bgColor) {
-					style.backgroundColor = this.bgColor
+					style.backgroundColor = this.bgColor;
 				}
 				if (this.color) {
-					style.color = this.color
+					style.color = this.color;
 				}
 				if (this.borderColor) {
-					style.borderColor = this.borderColor
+					style.borderColor = this.borderColor;
 				}
 				return style
 			},
@@ -107,12 +110,12 @@
 			textColor() {
 				const style = {}
 				if (this.color) {
-					style.color = this.color
+					style.color = this.color;
 				}
 				return style
 			},
 			imgStyle() {
-				const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px'
+				const width = this.size === 'large' ? '17px' : this.size === 'medium' ? '15px' : '13px';
 				return {
 					width,
 					height: width
@@ -120,17 +123,17 @@
 			},
 			// 文本的样式
 			closeSize() {
-				const size = this.size === 'large' ? 15 : this.size === 'medium' ? 13 : 12
+				const size = this.size === 'large' ? 15 : this.size === 'medium' ? 12 : 12;
 				return size
 			},
 			// 图标大小
 			iconSize() {
-				const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16
+				const size = this.size === 'large' ? 21 : this.size === 'medium' ? 19 : 16;
 				return size
 			},
 			// 图标颜色
 			elIconColor() {
-				return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff'
+				return this.iconColor ? this.iconColor : this.plain ? this.type : '#ffffff';
 			}
 		},
 		methods: {
@@ -148,8 +151,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-tag {
 		position: relative;

package/components/fu-tag/props.js

@@ -1,86 +1,132 @@
 export default {
 	props: {
-		// 序号，用于区分多个标签
+		/**
+		 * @description 序号，用于区分多个标签
+		 */
 		index: {
 		  type: [String,Number],
 		  default: ''
 		},
-		// 是否显示
+		/**
+		 * @description 是否显示
+		 * @default true
+		 */
 		show: {
 			type: Boolean,
 			default: true
 		},
-		// 标签类型、primary，error，success，warning，info
+		/**
+		 * @description 标签类型
+		 * @values 'primary' - 主色, 'error' - 错误, 'success' - 成功, 'warning' - 警告, 'info' - 信息
+		 * @default 'primary'
+		 */
 		type: {
 			type: String,
 			default: 'primary'
 		},
-		// 标签的大小，large，medium，mini
+		/**
+		 * @description 标签的大小
+		 * @default 'medium'
+		 */
 		size: {
 			type: String,
 			default: 'medium'
 		},
-		// tag的形状，circle（两边半圆形）, square（方形，带圆角）
+		/**
+		 * @description tag的形状
+		 * @values 'circle' - 两边半圆形, 'square' - 方形，带圆角
+		 * @default 'square'
+		 */
 		shape: {
 			type: String,
 			default: 'square'
 		},
-		// 标签文字
+		/**
+		 * @description 标签文字
+		 */
 		text: {
 			type: [String,Number],
 			default: ''
 		},
-		// 背景颜色，默认为空字符串，即不处理
+		/**
+		 * @description 背景颜色，默认为空字符串，即不处理
+		 */
 		bgColor: {
 			type: String,
 			default: ''
 		},
-		// 标签字体颜色，默认为空字符串，即不处理
+		/**
+		 * @description 标签字体颜色，默认为空字符串，即不处理
+		 */
 		color: {
 			type: String,
 			default: ''
 		},
-		// 标签的边框颜色
+		/**
+		 * @description 标签的边框颜色
+		 */
 		borderColor: {
 			type: String,
 			default: ''
 		},
-		// 镂空时是否填充背景色
+		/**
+		 * @description 镂空时是否填充背景色
+		 * @default false
+		 */
 		plainFill: {
 			type: Boolean,
 			default: false
 		},
-		// 是否镂空
+		/**
+		 * @description 是否镂空
+		 * @default false
+		 */
 		plain: {
 			type: Boolean,
 			default: false
 		},
-		// 是否可关闭
+		/**
+		 * @description 是否可关闭
+		 * @default false
+		 */
 		closable: {
 			type: Boolean,
 			default: false
 		},
-		// 关闭按钮图标的颜色
+		/**
+		 * @description 关闭按钮图标的颜色
+		 * @default '#C6C7CB'
+		 */
 		closeColor: {
 			type: String,
 			default: '#C6C7CB'
 		},
-		// 关闭按钮图标的位置 right（右边）right-top（右上） 默认right-top
+		/**
+		 * @description 关闭按钮图标的位置
+		 * @values 'right' - 右边, 'right-top' - 右上
+		 * @default 'right-top'
+		 */
 		closePlace: {
 			type: String,
 			default: 'right-top'
 		},
-		// 内置图标，或绝对路径的图片
+		/**
+		 * @description 内置图标，或绝对路径的图片
+		 */
 		icon: {
 			type: String,
 			default: ''
 		},
-		// 图标颜色
+		/**
+		 * @description 图标颜色
+		 */
 		iconColor: {
 			type: String,
 			default: ''
 		},
-		// nvue模式下 是否直接显示，在fu-list等cell下面使用就需要设置
+		/**
+		 * @description nvue模式下 是否直接显示，在fu-list等cell下面使用就需要设置
+		 */
 		cellChild: {
 			type: Boolean,
 			default: false

package/components/fu-text/fu-text.vue

@@ -1,26 +1,48 @@
 <template>
-	<view class="fu-text" :style="{margin: margin, justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'}" @tap="onClick" v-if="show">
+	<view 
+		class="fu-text" 
+		:class="[customClass]"
+		:style="{margin: margin, justifyContent: align === 'left' ? 'flex-start' : align === 'center' ? 'center' : 'flex-end'}" 
+		@tap="handleClick" 
+		v-if="show">
 		<text :class="['fu-text__price', type && `fu-text__value--${type}`]" :style="[valueStyle]" v-if="mode === 'price'">￥</text>
 		<view class="fu-text__prefix-icon" v-if="prefixIcon">
-			<fu-icons :name="prefixIcon" :color="iconColor" :size="iconSize"></fu-icons>
+			<fu-icon :name="prefixIcon" :color="iconColor" :size="iconSize"></fu-icon>
 		</view>
 		<fu-link :href="href" underLine v-if="mode === 'link'">
 			<slot>{{ value }}</slot>
 		</fu-link>
 		<template v-else-if="openType && isMp">
-			<button class="fu-reset-button fu-text__value" :class="[type && `fu-text__value--${type}`, lines && `fu-line-${lines}`]" :style="[valueStyle]" :openType="openType" :lang="lang"
-				:session-from="sessionFrom" :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
-				:send-message-img="sendMessageImg" :show-message-card="showMessageCard" :app-parameter="appParameter"
-				@getuserinfo="onGetUserInfo" @contact="onContact" @getphonenumber="onGetPhoneNumber" @error="onError"
-				@launchapp="onLaunchApp" @opensetting="onOpenSetting">
+			<button 
+				class="fu-reset-button fu-text__value" 
+				:class="[type && `fu-text__value--${type}`, lines && `fu-line-${lines}`]" 
+				:style="[valueStyle]" 
+				:openType="openType" 
+				:lang="lang"
+				:session-from="sessionFrom" 
+				:send-message-title="sendMessageTitle" 
+				:send-message-path="sendMessagePath"
+				:send-message-img="sendMessageImg" 
+				:show-message-card="showMessageCard" 
+				:app-parameter="appParameter"
+				@getuserinfo="onGetUserInfo" 
+				@contact="onContact" 
+				@getphonenumber="onGetPhoneNumber" 
+				@error="onError"
+				@launchapp="onLaunchApp" 
+				@opensetting="onOpenSetting">
 				<slot>{{ value }}</slot>
 			</button>
 		</template>
-		<text class="fu-text__value" :style="[valueStyle]" :class="[type && `fu-text__value--${type}`, lines && `fu-line-${lines}`]" v-else>
+		<text 
+			class="fu-text__value" 
+			:style="[valueStyle]" 
+			:class="[type && `fu-text__value--${type}`, lines && `fu-line-${lines}`]" 
+			v-else>
 			<slot>{{ value }}</slot>
 		</text>
 		<view class="fu-text__suffix-icon" v-if="suffixIcon">
-			<fu-icons :name="suffixIcon" :color="iconColor" :size="iconSize"></fu-icons>
+			<fu-icon :name="suffixIcon" :color="iconColor" :size="iconSize"></fu-icon>
 		</view>
 	</view>
 </template>
@@ -54,16 +76,16 @@
 	 * 	@value name 姓名
 	 * 	@value date 日期
 	 * 	@value link 超链接
-	 * @property {String} href mode=link 下，配置的链接
+	 * @property {String} href 配置的链接（仅mode=link时生效）
 	 * @property {String,Function} format 格式化规则
-	 * @property {Boolean} call mode=phone时，点击文本是否拨打电话（默认 false）
+	 * @property {Boolean} call 点击文本是否拨打电话（仅mode=phone时生效）（默认 false）
 	 * @property {String} openType 小程序的打开方式
-	 * @property {Boolean} bold 是否粗体（默认 false）
+	 * @property {String,Number} weight 控制文本粗细（默认 'normal'）
 	 * @property {Boolean} block 是否块状（默认 false）
 	 * @property {String,Number} lines 文本显示的行数，如果设置，超出此行数，将会显示省略号
 	 * @property {String} color 文本颜色
 	 * @property {String,Number} size 字体大小（默认 15）
-	 * @property {String} decoration = [none|underline|line-through] 文字装饰，下划线，中划线等，可选值 none|underline|line-through（默认 'none' ）
+	 * @property {String} decoration = [none|underline|line-through] 文字装饰（默认 'none' ）
 	 * 	@value none 无装饰
 	 * 	@value underline 下划线
 	 * 	@value line-through 中划线
@@ -73,12 +95,14 @@
 	 * 	@value left 左对齐
 	 * 	@value center 居中
 	 * 	@value right 右对齐
-	 * @property {String} wordWrap 文字换行，可选值break-word|normal|anywhere（默认 'normal' ）
+	 * @property {String} wordWrap = [break-word|normal|anywhere] 文字换行（默认 'normal' ）
 	 * 	@value break-word 在长单词或URL地址内部进行换行
 	 * 	@value normal 只在允许的断字点换行（浏览器保持默认处理）
 	 * 	@value anywhere 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。
-	 * @property {Object,String} customStyle 定义外部样式
-	 * @event {Function} click  点击触发事件
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {Object,String} customStyle 定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 点击触发事件
 	 * @example <fu-text text="愿重逢折扇青衣, 愿再见杨柳依依"></fu-text>
 	 */
 	export default {
@@ -97,53 +121,68 @@
 			valueStyle() {
 				const style = {
 					textDecoration: this.decoration,
-					fontWeight: this.bold ? 'bold' : 'normal',
+					fontWeight: this.weight || 'normal',
 					wordWrap: this.wordWrap,
 					fontSize: this.$fu.addUnit(this.size)
 				};
-				!this.type && (style.color = this.color);
-				this.isNvue && this.lines && (style.lines = this.lines);
-				if (this.isNvue && this.mode != 'price' && !this.prefixIcon && !this.suffixIcon) {
-					style.flex = 1;
-					style.textAlign = this.align === 'left' ? 'flex-start' : this.align === 'center' ? 'center' : 'right';
+				
+				if(!this.type) {
+					style.color = this.color
 				}
-				this.lineHeight && (style.lineHeight = this.$fu.addUnit(this.lineHeight));
-				!this.isNvue && this.block && (style.display = 'block');
+				
+				if(this.lineHeight) {
+					style.lineHeight = this.$fu.addUnit(this.lineHeight)
+				}
+				
+				if(this.isNvue) {
+					if(this.lines) {
+						style.lines = this.lines
+					}
+					
+					if(this.mode != 'price' && !this.prefixIcon && !this.suffixIcon) {
+						style.flex = 1;
+						style.textAlign = this.align === 'left' ? 'flex-start' : this.align === 'center' ? 'center' : 'right';
+					}
+				} else {
+					if(this.block) {
+						style.display = 'block'
+					}
+				}	
+				
 				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle));
 			},
 			isNvue() {
-				let nvue = false
+				let nvue = false;
 				// #ifdef APP-NVUE
-				nvue = true
+				nvue = true;
 				// #endif
 				return nvue
 			},
 			isMp() {
-				let mp = false
+				let mp = false;
 				// #ifdef MP
-				mp = true
+				mp = true;
 				// #endif
 				return mp
 			}
 		},
 		methods: {
-			onClick(e) {
+			handleClick() {
 				// 如果为手机号模式，拨打电话
 				if (this.call && this.mode === 'phone') {
 					uni.makePhoneCall({
 						phoneNumber: this.text
 					})
 				}
-				this.$emit('click', e)
+				this.$emit('click')
 			}
 		}
 	}
 </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-main-color: #333333;
 	$fu-content-color: #666666;
 	$fu-tips-color: #909193;

package/components/fu-text/props.js

@@ -1,112 +1,170 @@
 export default {
 	props: {
-		// 主题颜色、primary，error，success，warning，info
+		/**
+		 * @description 主题颜色
+		 * @values 'primary' - 主色， 'error' - 错误, 'success' - 成功, 'warning' - 警告, 'info' - 信息
+		 */
 		type: {
 			type: String,
 			default: ''
 		},
-		// 是否显示
+		/**
+		 * @description 是否显示
+		 * @default true
+		 */
 		show: {
 			type: Boolean,
 			default: true
 		},
-		// 显示的值
+		/**
+		 * @description 显示的值
+		 */
 		text: {
 			type: [String,Number],
 			default: ''
 		},
-		// 前置图标
+		/**
+		 * @description 前置图标
+		 */
 		prefixIcon: {
 			type: String,
 			default: ''
 		},
-		// 后置图标
+		/**
+		 * @description 后置图标
+		 */
 		suffixIcon: {
 			type: String,
 			default: ''
 		},
-		// 图标颜色
+		/**
+		 * @description 图标颜色
+		 */
 		iconColor: {
 			type: String,
 			default: ''
 		},
-		// 图标大小（默认 15）
+		/**
+		 * @description 图标大小
+		 * @default 15
+		 */
 		iconSize: {
 			type: [String,Number],
 			default: 15
 		},
-		// 文本处理的匹配模式
-		// text-普通文本，price-价格，phone-手机号，name-姓名，date-日期，link-超链接
+		/**
+		 * @description 文本处理的匹配模式
+		 * @values 'text' - 普通文本, 'price' - 价格, 'phone' - 手机号码, 'name' - 姓名, 'date' - 日期, 'link' - 超链接
+		 * @default 'text'
+		 */
 		mode: {
 			type: String,
-			default: ''
+			default: 'text'
 		},
-		// mode=link下，配置的链接
+		/**
+		 * @description 配置的链接（仅mode=link时生效）
+		 */
 		href: {
 			type: String,
 			default: ''
 		},
-		// 格式化规则
+		/**
+		 * 格式化规则
+		 */
 		format: {
 			type: [String,Function],
 			default: ''
 		},
-		// mode=phone时，点击文本是否拨打电话（默认 false）
+		/**
+		 * @description 点击文本是否拨打电话（仅mode=phone时生效）
+		 * @default false
+		 */
 		call: {
 			type: Boolean,
 			default: false
 		},
-		// 小程序的打开方式
+		/**
+		 * @description 小程序的打开方式
+		 */
 		openType: {
 			type: String,
 			default: ''
 		},
-		// 是否粗体，默认normal
-		bold: {
-			type: Boolean,
-			default: false
+		/**
+		 * @description 是否粗体
+		 * @default 'normal'
+		 */
+		weight: {
+			type: [String,Number],
+			default: 'normal'
 		},
-		// 是否块状
+		/**
+		 * @description 是否块状
+		 * @default true
+		 */
 		block: {
 			type: Boolean,
 			default: false
 		},
-		// 文本显示的行数，如果设置，超出此行数，将会显示省略号
+		/**
+		 * @description 文本显示的行数，如果设置，超出此行数，将会显示省略号
+		 */
 		lines: {
 			type: [String,Number],
 			default: ''
 		},
-		// 文本颜色
+		/**
+		 * @description 文本颜色
+		 */
 		color: {
 			type: String,
 			default: ''
 		},
-		// 字体大小
+		/**
+		 * @description 字体大小
+		 * @default 15
+		 */
 		size: {
 			type: [String,Number],
 			default: 15
 		},
-		// 文字装饰，下划线，中划线等，可选值 none|underline|line-through
+		/**
+		 * @description 文字装饰
+		 * @values 'none' - 无装饰, 'underline' - 下划线, 'line-through' - 中划线
+		 * @default 'none'
+		 */
 		decoration: {
 			type: String,
 			default: 'none'
 		},
-		// 外边距，对象、字符串，数值形式均可
+		/**
+		 * @description 外边距，对象、字符串，数值形式均可
+		 */
 		margin: {
 			type: [Object,String,Number],
 			default: 0
 		},
-		// 文本行高
+		/**
+		 * @description 文本行高
+		 */
 		lineHeight: {
 			type: [String,Number],
 			default: ''
 		},
-		// 文本对齐方式，可选值left|center|right
+		/**
+		 * @description 文本对齐方式
+		 * @values 'left' - 左对齐, 'center' - 居中, 'right' - 右对齐
+		 * @default 'left'
+		 */
 		align: {
 			type: String,
 			default: 'left'
 		},
-		// 文字换行，可选值break-word|normal|anywhere
+		/**
+		 * @description 文字换行
+		 * @values 'break-word' - 在长单词或URL地址内部进行换行, 'normal' - 只在允许的断字点换行（浏览器保持默认处理）, 'anywhere' - 为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。
+		 * @default 'normal'
+		 */
 		wordWrap: {
 			type: String,
 			default: 'normal'