fusions-ui 1.2.3 → 1.2.6

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

@@ -1,26 +1,26 @@
 <template>
-	<view class="fu-forms-item"
-		:class="['is-direction-' + localLabelPos , border?'fu-forms-item--border': '' , border && isFirstBorder? 'is-first-border': '']">
+	<view class="fu-form-item"
+		:class="['is-direction-' + localLabelPos , border?'fu-form-item--border': '' , border && isFirstBorder? 'is-first-border': '']">
 		<slot name="label">
-			<view class="fu-forms-item__label" :class="{'no-label': !label && !required}" :style="{width: localLabelWidth, justifyContent: localLabelAlign}">
+			<view class="fu-form-item__label" :class="{'no-label': !label && !required}" :style="{width: localLabelWidth, justifyContent: localLabelAlign}">
 				<text v-if="required" class="is-required">*</text>
 				<text>{{ label }}</text>
 			</view>
 		</slot>
 		<!-- #ifndef APP-NVUE -->
-		<view class="fu-forms-item__content">
+		<view class="fu-form-item__content">
 			<slot></slot>
-			<view class="fu-forms-item__error" :class="{'msg--active': msg}">
+			<view class="fu-form-item__error" :class="{'msg--active': msg}">
 				<text>{{ msg }}</text>
 			</view>
 		</view>
 		<!-- #endif -->
 		<!-- #ifdef APP-NVUE -->
-		<view class="fu-forms-item__nuve-content">
-			<view class="fu-forms-item__content">
+		<view class="fu-form-item__nuve-content">
+			<view class="fu-form-item__content">
 				<slot></slot>
 			</view>
-			<view class="fu-forms-item__error" :class="{'msg--active': msg}">
+			<view class="fu-form-item__error" :class="{'msg--active': msg}">
 				<text class="error-text">{{ msg }}</text>
 			</view>
 		</view>
@@ -38,12 +38,12 @@
 	 * @property {String } label 输入框左边的文字提示
 	 * @property {Number } labelWidth label的宽度，单位px（默认70）
 	 * @property {String } labelAlign = [left|center|right] label的文字对齐方式（默认left）
-	 * 	@value left		label 左侧显示
-	 * 	@value center	label 居中
-	 * 	@value right	label 右侧对齐
+	 * 	@value left label 左侧显示
+	 * 	@value center label 居中
+	 * 	@value right label 右侧对齐
 	 * @property {String } message 显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 	 * @property {String } prop 表单域的属性名，在使用校验规则时必填
-	 * @property {String } 	labelPosition = [top|left] label的文字的位置（默认left）
+	 * @property {String } labelPosition = [top|left] label的文字的位置，优先级高于fu-form组件中的labelPosition
 	 * 	@value top	顶部显示 label
 	 * 	@value left	左侧显示 label
 	 */
@@ -106,18 +106,6 @@
 			}
 		
 		},
-		// #ifndef VUE3
-		destroyed() {
-			if (this.__isUnmounted) return
-			this.fuInit()
-		},
-		// #endif
-		// #ifdef VUE3
-		unmounted() {
-			this.__isUnmounted = true;
-			this.fuInit()
-		},
-		// #endif
 		methods: {
 			/**
 			 * 外部调用方法
@@ -222,7 +210,7 @@
 				// 宽度
 				this.localLabelWidth = this._labelWidthUnit(labelWidth);
 				// 标签位置
-				this.localLabelPos = this._labelPosition();
+				this.localLabelPos = this.labelPosition || this._labelPosition();
 				// 将需要校验的子组件加入form 队列
 				this.form && type && childrens.push(this)
 		
@@ -367,19 +355,34 @@
 			},
 			'form.labelPosition'(val) {
 				// 标签位置
-				this.localLabelPos = this._labelPosition()
+				this.localLabelPos = this.labelPosition || this._labelPosition()
 			},
 			'form.labelAlign'(val) {
-		
+				// 标签对齐方式
+				this.localLabelAlign = this._justifyContent();
 			}
-		}
+		},
+		// #ifndef VUE3
+		destroyed() {
+			if (this.__isUnmounted) return
+			this.fuInit()
+		},
+		// #endif
+		// #ifdef VUE3
+		unmounted() {
+			this.__isUnmounted = true;
+			this.fuInit()
+		},
+		// #endif
 	}
 </script>
 
 <style lang="scss" scoped>
-	.fu-forms-item {
+	@import '../../libs/style/components.scss';
+	
+	.fu-form-item {
+		@include flex(row);
 		position: relative;
-		display: flex;
 		/* #ifdef APP-NVUE */
 		// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
 		padding-bottom: 22px;
@@ -387,26 +390,21 @@
 		/* #ifndef APP-NVUE */
 		margin-bottom: 22px;
 		/* #endif */
-		flex-direction: row;
 	
 		&__label {
-			display: flex;
-			flex-direction: row;
+			@include flex(row);
 			align-items: center;
 			text-align: left;
 			font-size: 14px;
 			color: #606266;
-			height: 36px;
+			height: 40px;
 			padding: 0 12px 0 0;
 			/* #ifndef APP-NVUE */
 			vertical-align: middle;
-			flex-shrink: 0;
-			/* #endif */
-	
-			/* #ifndef APP-NVUE */
+			flex: 0 0 auto;
 			box-sizing: border-box;
-	
 			/* #endif */
+			
 			&.no-label {
 				padding: 0;
 			}
@@ -434,9 +432,8 @@
 			/* #endif */
 		}
 	
-		& .fu-forms-item__nuve-content {
-			display: flex;
-			flex-direction: column;
+		& .fu-form-item__nuve-content {
+			@include flex(column);
 			flex: 1;
 		}
 	
@@ -478,9 +475,8 @@
 		&.is-direction-top {
 			flex-direction: column;
 	
-			.fu-forms-item__label {
+			.fu-form-item__label {
 				padding: 0 0 8px;
-				line-height: 1.5715;
 				text-align: left;
 				/* #ifndef APP-NVUE */
 				white-space: initial;
@@ -489,49 +485,43 @@
 		}
 	
 		.is-required {
-			// color: $fu-color-error;
 			color: #dd524d;
 			font-weight: bold;
 		}
 	}
 	
 	
-	.fu-forms-item--border {
+	.fu-form-item--border {
 		margin-bottom: 0;
 		padding: 10px 0;
-		// padding-bottom: 0;
-		border-top: 1px #eee solid;
+		border-top: 1px #eeeeee solid;
 	
 		/* #ifndef APP-NVUE */
-		.fu-forms-item__content {
+		.fu-form-item__content {
 			flex-direction: column;
 			justify-content: flex-start;
 			align-items: flex-start;
 	
-			.fu-forms-item__error {
+			.fu-form-item__error {
 				position: relative;
 				top: 5px;
 				left: 0;
 				padding-top: 0;
 			}
 		}
-	
 		/* #endif */
 	
 		/* #ifdef APP-NVUE */
-		display: flex;
-		flex-direction: column;
+		@include flex(column);
 	
-		.fu-forms-item__error {
+		.fu-form-item__error {
 			position: relative;
 			top: 0px;
 			left: 0;
 			padding-top: 0;
 			margin-top: 5px;
 		}
-	
 		/* #endif */
-	
 	}
 	
 	.is-first-border {

package/components/fu-form-item/props.js

@@ -1,39 +1,66 @@
 export default {
 	props: {
-		// 表单校验规则
+		/**
+		 * @description 表单校验规则
+		 * @default null
+		 */
 		rules: {
 			type: Array,
 			default () {
-				return null;
+				return null
 			}
 		},
-		// 表单域的属性名，在使用校验规则时必填
+		/**
+		 * @description 表单域的属性名，在使用校验规则时必填
+		 */
 		prop: {
 			type: [String, Array],
 			default: ''
 		},
+		/**
+		 * @description 是否必填，左边显示红色"*"号
+		 * @default false
+		 */
 		required: {
 			type: Boolean,
 			default: false
 		},
+		/**
+		 * @description 输入框左边的文字提示
+		 */
 		label: {
 			type: String,
 			default: ''
 		},
-		// label的宽度
+		/**
+		 * @description label的宽度
+		 */
 		labelWidth: {
 			type: [String, Number],
 			default: ''
 		},
-		// label 居中方式，默认 left 取值 left/center/right
+		/**
+		 * @description label 居中方式
+		 * @values 'left' - 左对齐， 'center' - 居中, 'right' - 右对齐
+		 * @default 'left'
+		 */
 		labelAlign: {
 			type: String,
-			default: ''
+			default: 'left'
 		},
-		// 强制显示错误信息
+		/**
+		 * @description 强制显示错误信息
+		 */
 		message: {
 			type: [String, Boolean],
 			default: ''
+		},
+		/**
+		 * @description label的文字的位置，优先级高于fu-form组件中的labelPosition
+		 */
+		labelPosition: {
+			type: String,
+			default: ''
 		}
 	},
 }

package/components/fu-grid/fu-grid.vue

@@ -1,6 +1,11 @@
 <template>
 	<view class="fu-grid-wrap">
-		<view :id="elId" ref="fu-grid" class="fu-grid" :class="{ 'fu-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
+		<view 
+			:id="elId" 
+			ref="fu-grid" 
+			class="fu-grid" 
+			:class="{ 'fu-grid--border': showBorder }" 
+			:style="{ 'border-left-color': borderColor}">
 			<slot />
 		</view>
 	</view>
@@ -43,17 +48,15 @@
 			this.children = [];
 		},
 		mounted() {
-			this.$nextTick(() => {
-				this.init()
-			})
+			this.init()
 		},
 		methods: {
 			init() {
-				setTimeout(() => {
+				this.$nextTick(() => {
 					this.getSize((width) => {
 						this.children.forEach(item => item.width = width)
 					})
-				}, 50)
+				})
 			},
 			
 			change(e) {
@@ -79,36 +82,32 @@
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	$border-color: #D2D2D2;
+	
 	.fu-grid-wrap {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
+		@include flex(column);
 		flex: 1;
-		flex-direction: column;
 		/* #ifdef H5 */
 		width: 100%;
 		/* #endif */
 	}
 
 	.fu-grid {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		/* #endif */
-		// flex: 1;
-		flex-direction: row;
+		@include flex(row);
 		flex-wrap: wrap;
 	}
 
 	.fu-grid--border {
 		position: relative;
 		/* #ifdef APP-NVUE */
-		border-left-color: #d6d6d6;
+		border-left-color: $border-color;
 		border-left-style: solid;
 		border-left-width: 0.5px;
 		/* #endif */
 		/* #ifndef APP-NVUE */
 		z-index: 1;
-		border-left: 1px #d6d6d6 solid;
+		border-left: 1px solid $border-color;
 		/* #endif */
 	}
 </style>

package/components/fu-grid/props.js

@@ -1,26 +1,41 @@
 export default {
 	props: {
-		// 每列显示个数
+		/**
+		 * @description 每列显示个数
+		 * @default 3
+		 */
 		column: {
 			type: [Number],
 			default: 3
 		},
-		// 是否显示边框（默认 true）
+		/**
+		 * @description 是否显示边框
+		 * @default true
+		 */
 		showBorder: {
 			type: Boolean,
 			default: true
 		},
-		// 边框颜色
+		/**
+		 * @description 边框颜色
+		 * @default '#d6d6d6'
+		 */
 		borderColor: {
 			type: String,
 			default: '#d6d6d6'
 		},
-		// 是否正方形显示（默认 true）
+		/**
+		 * @description 是否正方形显示
+		 * @default true
+		 */
 		square: {
 			type: Boolean,
 			default: true
 		},
-		// 点击背景是否高亮（默认 true）
+		/**
+		 * @description 点击背景是否高亮
+		 * @default true
+		 */
 		highlight: {
 			type: Boolean,
 			default: true

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

@@ -1,8 +1,10 @@
 <template>
 	<view class="fu-grid-item" v-if="width" :style="itemStyle">
-		<view :class="{ 'fu-grid-item--border': showBorder,  'fu-grid-item--border-top': showBorder && index < column, 'fu-highlight': highlight }"
-		 :style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
-		 class="fu-grid-item__box" @click="onClick">
+		<view 
+			class="fu-grid-item__box" 
+			:class="{ 'fu-grid-item--border': showBorder,  'fu-grid-item--border-top': showBorder && index < column, 'fu-highlight': highlight }"
+			:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
+			@click="onClick">
 			<slot />
 		</view>
 	</view>
@@ -33,40 +35,26 @@
 				showBorder: true,
 				square: true,
 				highlight: true,
-				left: 0,
-				top: 0,
 				openNum: 2,
-				width: 0,
-				borderColor: '#d6d6d6'
+				width: 0
 			}
 		},
 		created() {
-			this.column = this.grid.column
-			this.showBorder = this.grid.showBorder
-			this.square = this.grid.square
-			this.highlight = this.grid.highlight
-			this.top = this.hor === 0 ? this.grid.hor : this.hor
-			this.left = this.ver === 0 ? this.grid.ver : this.ver
-			this.borderColor = this.grid.borderColor
+			this.column = this.grid.column;
+			this.showBorder = this.grid.showBorder;
+			this.square = this.grid.square;
+			this.highlight = this.grid.highlight;
+			this.borderColor = this.grid.borderColor;
 			this.grid.children.push(this)
 			this.grid.init()
 			this.width = this.grid.width
 		},
-		beforeDestroy() {
-			this.grid.children.forEach((item, index) => {
-				if (item === this) {
-					this.grid.children.splice(index, 1)
-				}
-			})
-		},
 		computed: {
 			itemStyle() {
 				const style = {
-					width: this.width
+					width: this.width,
+					...(this.square && {height: this.width})
 				};
-				if(this.square) {
-					style.height = this.width;
-				}
 				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle))
 			}
 		},
@@ -78,15 +66,25 @@
 					}
 				})
 			}
+		},
+		beforeDestroy() {
+			this.grid.children.forEach((item, index) => {
+				if (item === this) {
+					this.grid.children.splice(index, 1)
+				}
+			})
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	$border-color: #D2D2D2;
+	
 	.fu-grid-item {
+		@include flex;
 		/* #ifndef APP-NVUE */
 		height: 100%;
-		display: flex;
 		/* #endif */
 		/* #ifdef H5 */
 		cursor: pointer;
@@ -94,46 +92,44 @@
 	}
 
 	.fu-grid-item__box {
+		@include flex(column);
 		/* #ifndef APP-NVUE */
-		display: flex;
 		width: 100%;
 		/* #endif */
 		position: relative;
 		flex: 1;
-		flex-direction: column;
 	}
 
 	.fu-grid-item--border {
 		position: relative;
 		/* #ifdef APP-NVUE */
-		border-bottom-color: #D2D2D2;
+		border-bottom-color: $border-color;
 		border-bottom-style: solid;
 		border-bottom-width: 0.5px;
-		border-right-color: #D2D2D2;
+		border-right-color: $border-color;
 		border-right-style: solid;
 		border-right-width: 0.5px;
 		/* #endif */
 		/* #ifndef APP-NVUE */
 		z-index: 0;
-		border-bottom: 1px #D2D2D2 solid;
-		border-right: 1px #D2D2D2 solid;
+		border-bottom: 1px solid $border-color;
+		border-right: 1px solid $border-color;
 		/* #endif */
 	}
 	
 	.fu-grid-item--border-top {
 		position: relative;
 		/* #ifdef APP-NVUE */
-		border-top-color: #D2D2D2;
+		border-top-color: $border-color;
 		border-top-style: solid;
 		border-top-width: 0.5px;
 		/* #endif */
 		/* #ifndef APP-NVUE */
-		border-top: 1px #D2D2D2 solid;
+		border-top: 1px solid $border-color;
 		z-index: 0;
 		/* #endif */
 	}
 
-
 	.fu-highlight:active {
 		background-color: #f1f1f1;
 	}

package/components/fu-grid-item/props.js

@@ -1,16 +1,24 @@
 export default {
 	props: {
-		// 是否有点击效果
+		/**
+		 * @description 是否有点击效果
+		 * @default true
+		 */
 		highlight: {
 			type: Boolean,
 			default: true
 		},
-		// 定义背景色（默认 transparent）
+		/**
+		 * @description 定义背景色
+		 * @default 'transparent'
+		 */
 		bgColor: {
 			type: String,
 			default: 'transparent'
 		},
-		// 索引
+		/**
+		 * @description 索引
+		 */
 		index: {
 			type: Number,
 			default: 0

package/components/fu-icon/fu-icon.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="fu-icon" @click="handleClick">
+		<image class="fu-icon__img" :src="name" :mode="imgMode" :style="[imgStyle]" v-if="isImg"></image>
+		
+		<!-- #ifdef APP-NVUE -->
+		<text class="fu-icon__icon" :style="iconStyle" v-else>{{ fucode }}</text>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<text class="fu-icon__icon" :style="iconStyle" :class="['fu-icon-' + name]" v-else>
+			<slot></slot>
+		</text>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import mpMixin from '../../libs/mixin/mpMixin.js'
+	import props from './props.js'
+	import icon from './icon.js'
+	// #ifdef APP-NVUE
+	var domModule = weex.requireModule('dom');
+	import iconUrl from './icon.ttf'
+	domModule.addRule('fontFace', {
+		'fontFamily': "fusionsicon",
+		'src': "url('" + iconUrl + "')"
+	});
+	// #endif
+	/**
+	 * Icon 图标
+	 * @description 此组件用于展示 icon 图标
+	 * @property {String} name 图标名称，参考示例
+	 * @property {String} color 图标颜色
+	 * @property {Number} size 图标大小（默认 16）
+	 * @property {String} fontFamily 自定义图标
+	 * 
+	 * @event {Function} click 点击图标触发
+	 * @example <fu-icon name="success" size="40" color="#ff0000"></fu-icon>
+	 */
+	export default {
+		name:"FuIcon",
+		emits:['click'],
+		mixins: [mpMixin, props],
+		data() {
+			return {
+				icon: icon.glyphs
+			}
+		},
+		computed: {
+			fucode() {
+				let code = this.icon.find(v => v.font_class === this.name)
+				if(code){
+					return unescape(`%u${code.unicode}`)
+				}
+				return ''
+			},
+			iconSize() {
+				return this.$fu.addUnit(this.size)
+			},
+			iconStyle() {
+				return {
+					color: this.color,
+					fontSize: this.iconSize,
+					...(this.fontFamily && {fontFamily: this.fontFamily})
+				}
+			},
+			// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+			isImg() {
+				return this.name.indexOf('/') !== -1
+			},
+			imgStyle() {
+				// 如果设置 width 和 height 属性，则优先使用，否则使用 size 属性
+				return {
+					width: this.width? this.$fu.addUnit(this.width): this.$fu.addUnit(this.size),
+					height: this.height? this.$fu.addUnit(this.height): this.$fu.addUnit(this.size)
+				}
+			}
+		},
+		methods: {
+			// 图标点击事件
+			handleClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '../../libs/style/components.scss';
+	/* #ifndef APP-NVUE */
+	@import './icon.css';
+	@font-face {
+		font-family: fusionsicon;
+		src: url('./icon.ttf') format('truetype');
+	}
+	/* #endif */
+	
+	.fu-icon {
+		@include flex;
+		align-items: center;
+		
+		&__icon {
+			font-family: fusionsicon;
+			text-decoration: none;
+			text-align: center;
+		}
+	}
+</style>