fusions-ui 1.2.6 → 1.2.8

package/components/fu-sign-board/props.js

@@ -1,34 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 是否显示
-		 * @default false
-		 */
-		show: {
-			type: Boolean,
-			default: false
-		},
-		/**
-		 * @description 可选签名颜色
-		 */
-		signSelectColor: {
-			type: Array,
-			default: () => (['#060606', '#ec3930'])
-		},
-		/**
-		 * @description 是否旋转输出图片
-		 * @default true
-		 */
-		rotate: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 自定义顶栏的高度
-		 */
-		customBarHeight: {
-			type: [Number,String],
-			default: 0
-		}
-	}
-}

package/components/fu-skeleton/fu-skeleton.vue

@@ -1,238 +0,0 @@
-<template>
-	<view class="fu-skeleton">
-		<view v-if="loading">
-			<view v-for="(item, index) in elements" :key="index">
-				<!-- 横向并列布局 -->
-				<view class="fu-skeleton__group" :style="[style(item)]" v-if="item.type=='flex'">
-					<view :class="[item2.classs]" :style="[style(item2)]" v-for="(item2,index2) in item.children" :key="index2">
-						<view v-for="(item3,index3) in item2.elements" :key="index3">
-							<!-- 垂直高度占位 -->
-							<view :style="{height: $fu.addUnit(item3.height, 'rpx')}" v-if="item3.type=='gap'"></view>
-							<!-- 基本单位 -->
-							<view ref="skeleton" :class="[item3.classs, roundClass, animateClass]" :style="[style(item3)]" v-else></view>
-						</view>
-					</view>
-				</view>
-				<!-- 自定义骨架屏内容 -->
-				<view ref="skeleton" :class="[item.classs, animateClass]" :style="[style(item)]" v-else-if="item.type == 'custom'"></view>
-				<!-- 垂直高度占位 -->
-				<view :style="{height: $fu.addUnit(item.height, 'rpx')}" v-else-if="item.type=='gap'"></view>
-				<!-- 其他基本单位 -->
-				<view ref="skeleton" :class="[item.classs, roundClass, animateClass]" :style="[style(item)]" v-else>
-				</view>
-			</view>
-		</view>
-		<view v-else>
-			<slot />
-		</view>
-	</view>
-</template>
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	// #ifdef APP-NVUE
-	const animation = weex.requireModule('animation');
-	// #endif
-	/**
-	 * Skeleton 骨架屏
-	 * @description 
-	 */
-	export default {
-		name: 'FuASkeleton',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				elements: [],
-				opacity: 0.5,
-				duration: 500
-			}
-		},
-		computed: {
-			animateClass() {
-				return this.animate ? 'fu-skeleton--animation' : 'fu-skeleton--static';
-			},
-			roundClass() {
-				return this.round ? 'fu-skeleton--round' : 'fu-skeleton--radius';
-			},
-			style(item) {
-				return item => {
-					const style = {};
-					return this.$fu.deepMerge(style, this.$fu.addStyle(item.style));
-				}
-			}
-		},
-		created() {
-			this.init();
-			// #ifdef APP-NVUE
-			if (this.loading && this.animate) {
-				this.$fu.sleep(50).then(res => {
-					this.createAnimation(this.opacity);
-				})
-			}
-			// #endif
-		},
-		methods: {
-			// 初始化数据
-			init() {
-				let elements = [];
-				if (!this.$fu.isArray(this.skeleton)) return this.$fu.error('skeleton参数必须为数组形式，参考文档示例：');
-				this.skeleton.forEach(item => {
-					const elClass = this.getElCounts(item);
-					elements = elements.concat(elClass);
-				})
-				this.elements = [...elements];
-			},
-			
-			/**
-			 * 处理骨架屏参数内容
-			 * @param {Object} e 每项数据
-			 */
-			getElCounts(e) {
-				let elements = [];
-				let children = [];
-				if (this.$fu.checkNumber(e)) return [{ type: 'gap', height: e }];
-				const type = e.type || 'line';
-				const num = e.num || 1;
-				const style = e.style || {};
-				const styleIsArray = this.$fu.isArray(style);
-				const gap = e.gap || '20rpx';
-				const child = e.children || [];
-				for (let i = 0; i < child.length; i++) {
-					children[i] = {
-						classs: child[i].type.indexOf('avatar') > -1 || child[i].type.indexOf('custom') > -1 ? '' :
-							'fu-skeleton__group__sub',
-						elements: this.getElCounts(child[i])
-					};
-				}
-				for (let i = 0; i < num; i++) {
-					if (gap && i < num && i > 0) {
-						elements.push({
-							type: 'gap',
-							height: gap
-						});
-					}
-					elements.push({
-						classs: `fu-skeleton__${type}`,
-						type,
-						style: styleIsArray ? style[i] : style,
-						gap,
-						children
-					});
-				}
-				return elements;
-			},
-			
-			// 创建动画
-			createAnimation(opacity = 1) {
-				// loading结束之后或未开启动画不执行
-				if (!this.loading || !this.animate) return;
-				const skeletons = this.$refs.skeleton;
-				const total = skeletons.length;
-				let completed = 0;
-				skeletons.forEach(item => {
-					animation.transition(item, {
-						styles: {
-							opacity: opacity,
-						},
-						duration: this.duration
-					}, () => {
-						if (++completed >= total) {
-							setTimeout(() => {
-								this.createAnimation(opacity < 1 ? 1 : this.opacity);
-							}, 200)
-						}
-					});
-				})
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	$avatar: 100rpx;
-	$avatarSm: 50rpx;
-	$avatarLg: 200rpx;
-	$marginBottom: 30rpx;
-
-	@mixin background {
-		/* #ifdef APP-NVUE */
-		background-color: #eeeeee;
-		/* #endif */
-		/* #ifndef APP-NVUE */
-		background: linear-gradient(90deg, #eff0f1 25%, #e1e1e1 37%, #eff0f1 50%);
-		background-size: 400% 100%;
-		/* #endif */
-	}
-
-	.fu-skeleton__line {
-		height: 32rpx;
-	}
-
-	.fu-skeleton__line--sm {
-		height: 24rpx;
-		margin-bottom: $marginBottom;
-	}
-
-	.fu-skeleton__line--lg {
-		height: 48rpx;
-		margin-bottom: $marginBottom;
-	}
-
-	.fu-skeleton--static {
-		@include background;
-	}
-
-	.fu-skeleton--radius {
-		border-radius: 8rpx;
-	}
-
-	.fu-skeleton--round {
-		border-radius: 30rpx;
-	}
-
-	.fu-skeleton__avatar {
-		width: $avatar;
-		height: $avatar;
-		border-radius: 50rpx;
-	}
-
-	.fu-skeleton__avatar--sm {
-		width: $avatarSm;
-		height: $avatarSm;
-		border-radius: 25rpx;
-	}
-
-	.fu-skeleton__avatar--lg {
-		width: $avatarLg;
-		height: $avatarLg;
-		border-radius: 100rpx;
-	}
-
-	.fu-skeleton__group {
-		@include flex;
-
-		&__sub {
-			flex: 1;
-		}
-	}
-
-	.fu-skeleton--animation {
-		@include background;
-		/* #ifndef APP-NVUE */
-		animation: skeleton 2s ease infinite
-		/* #endif */
-	}
-
-	/* #ifndef APP-NVUE */
-	@keyframes skeleton {
-		0% {
-			background-position: 100% 50%
-		}
-
-		100% {
-			background-position: 0 50%
-		}
-	}
-	/* #endif */
-</style>

package/components/fu-skeleton/props.js

@@ -1,35 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 是否显示骨架
-		 * @default true
-		 */
-		loading: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 骨架内容 具体说明参考文档：
-		 */
-		skeleton: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		 * @description 是否开启动画效果
-		 * @default true
-		 */
-		animate: {
-			type: Boolean,
-			default: true
-		},
-		/**
-		 * @description 是否圆角骨架风格
-		 * @default false
-		 */
-		round: {
-			type: Boolean,
-			default: false
-		}
-	}
-}

package/components/fu-steps/fu-steps.vue

@@ -1,81 +0,0 @@
-<template>
-	<view :class="['fu-steps', `fu-steps--${direction}`]" :style="[$fu.addStyle(customStyle)]">
-		<slot></slot>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	/**
-	 * Steps 步骤条
-	 * @description 此组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
-	 * @property {String} direction = [row|column] 排列方向 (默认 'row' )
-	 * 	@value row 横向
-	 * 	@value column 竖向
-	 * @property {String,Number} current 设置当前处于第几步 (默认 0 )
-	 * @property {String} activeColor 激活状态颜色 (默认 '#2979ff' )
-	 * @property {String} inactiveColor	未激活状态颜色 (默认 '#969799' )
-	 * @property {String} activeIcon 激活状态的图标
-	 * @property {String} inactiveIcon 未激活状态图标 
-	 * @property {Boolean} dot 是否显示点类型 (默认 false )
-	 * 
-	 * @example <fu-steps current="0"><fu-steps-item title="已出库" desc="10:35" ></fu-steps-item></fu-steps>
-	 */
-	export default {
-		name: 'FuSteps',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-			}
-		},
-		created() {
-			this.children = []
-		},
-		computed: {
-			// 监听参数的变化，通过watch中，手动去更新子组件的数据，否则子组件不会自动变化
-			parentData() {
-				return [this.current, this.direction, this.activeColor, this.inactiveColor, this.activeIcon, this.inactiveIcon, this.dot]
-			}
-		},
-		methods: {
-			// 更新子组件的数据
-			updateChildData() {
-				this.children.map(child => {
-					// 先判断子组件是否存在对应的方法
-					this.$fu.isFunc((child || {}).updateFromParent()) && child.updateFromParent()
-				})
-			},
-			// 接受子组件的通知，去修改其他子组件的数据
-			updateFromChild() {
-				this.updateChildData()
-			}
-		},
-		watch: {
-			children() {
-				this.updateChildData()
-			},
-			parentData() {
-				this.updateChildData()
-			}
-		},
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-
-	.fu-steps {
-		@include flex;
-
-		&--column {
-			flex-direction: column
-		}
-
-		&--row {
-			flex-direction: row;
-			flex: 1;
-		}
-	}
-</style>

package/components/fu-steps/props.js

@@ -1,55 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 排列方向
-		 * @values 'row' - 横向, 'column' - 竖向
-		 * @default 'row'
-		 */
-		direction: {
-			type: String,
-			default: 'row'
-		},
-		/**
-		 * @description 设置第几个步骤
-		 */
-		current: {
-			type: [String, Number],
-			default: 0
-		},
-		/**
-		 * @description 激活状态颜色
-		 */
-		activeColor: {
-			type: String,
-			default: '#2979ff'
-		},
-		/**
-		 * @description 未激活状态颜色
-		 */
-		inactiveColor: {
-			type: String,
-			default: '#969799'
-		},
-		/**
-		 * @description 激活状态的图标
-		 */
-		activeIcon: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 未激活状态图标
-		 */
-		inactiveIcon: {
-			type: String,
-			default: ''
-		},
-		/**
-		 * @description 是否显示点类型
-		 */
-		dot: {
-			type: Boolean,
-			default: false
-		}
-	}
-}

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

@@ -1,274 +0,0 @@
-<template>
-	<view class="fu-steps-item" ref="fu-steps-item" :class="[`fu-steps-item--${parentData.direction}`]" :style="[$fu.addStyle(customStyle)]">
-		<view class="fu-steps-item__line" :class="[`fu-steps-item__line--${parentData.direction}`]" :style="[lineStyle]" v-if="index + 1 < childLength"></view>
-		<view :class="[
-				'fu-steps-item__wrapper',
-				`fu-steps-item__wrapper--${parentData.direction}`, 
-				parentData.dot && `fu-steps-item__wrapper--${parentData.direction}--dot`
-			]">
-			<slot name="icon">
-				<view class="fu-steps-item__wrapper__dot" v-if="parentData.dot" :style="{ backgroundColor: statusColor }"></view>
-				<view class="fu-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
-					<fu-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon" :size="iconSize" :color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor" />
-				</view>
-				<view class="fu-steps-item__wrapper__circle" :style="{ backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent', borderColor: statusColor }" v-else>
-					<text class="fu-steps-item__wrapper__circle__text" :style="{ color: index == parentData.current ? '#ffffff' : parentData.inactiveColor }" v-if="statusClass === 'process' || statusClass === 'wait'">{{ index + 1}}</text>
-					<fu-icon :name="statusClass === 'error' ? 'cancel' : 'select'" size="12" :color="statusClass === 'error' ? '#f76c6c' : parentData.activeColor" v-else />
-				</view>
-			</slot>
-		</view>
-		<view :class="['fu-steps-item__content', `fu-steps-item__content--${parentData.direction}`]" :style="[contentStyle]">
-			<slot name="title">
-				<fu-text :text="title" :type="parentData.current == index ? 'main' : 'content'" lineHeight="20px" :size="parentData.current == index ? 14 : 13"></fu-text>
-			</slot>
-			<slot name="desc">
-				<fu-text :text="desc" type="tips" size="12"></fu-text>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
-	// #ifdef APP-NVUE
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	/**
-	 * StepsItem 步骤条的子组件
-	 * @description 此组件需要和fu-steps配合使用
-	 * @property {String} title 标题文字
-	 * @property {String} desc 描述文本
-	 * @property {String,Number} iconSize 图标大小  (默认 17 )
-	 * @property {Boolean} error = [true|false] 当前步骤是否处于失败状态  (默认 false )
-	 * @example <fu-steps current="0"><fu-steps-item title="已出库" desc="10:35" ></fu-steps-item></fu-steps>
-	 */
-	export default {
-		name: 'FuStepsItem',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				index: 0,
-				childLength: 0,
-				showLine: false,
-				size: {
-					height: 0,
-					width: 0
-				},
-				parentData: {
-					direction: 'row',
-					current: 0,
-					activeColor: '',
-					inactiveColor: '',
-					activeIcon: '',
-					inactiveIcon: '',
-					dot: false
-				}
-			}
-		},
-		created() {
-			this.init()
-		},
-		computed: {
-			lineStyle() {
-				const { parentData } = this;
-				const { width, height } = this.size;
-				const style = { 
-				    backgroundColor: this.parent.children?.[this.index + 1]?.error? '#f56c6c': this.index < parentData.current? parentData.activeColor: parentData.inactiveColor 
-				};
-				    
-				parentData.direction === 'row'? Object.assign(style, { 
-					width: `${width}px`, 
-					left: `${width / 2}px` 
-				}): style.height = `${height}px`;
-				    
-				return style;
-			},
-			statusClass() {
-				const { index, error } = this;
-				const { current } = this.parentData;
-				return current === index 
-				    ? error ? 'error' : 'process'
-				    : error ? 'error' 
-				    : current > index ? 'finish' 
-				    : 'wait'
-			},
-			statusColor() {
-				const colorMap = {
-				    finish: this.parentData.activeColor,
-				    error: '#f76c6c',
-				    process: this.parentData.dot ? this.parentData.activeColor : 'transparent',
-				    _default: this.parentData.inactiveColor
-				};
-				return colorMap[this.statusClass] || colorMap._default;
-			},
-			contentStyle() {
-				const { direction, dot } = this.parentData;
-				const baseMargin = dot ? '2px' : '6px';
-				const specialMargin = dot ? '0px' : '6px';
-				
-				return direction === 'column'? { marginLeft: baseMargin, marginTop: specialMargin }: { marginTop: baseMargin, marginLeft: baseMargin };
-			}
-		},
-		mounted() {
-			this.parent && this.parent.updateFromChild()
-			this.$fu.sleep().then(() => {
-				this.getStepsItemRect()
-			})
-		},
-		methods: {
-			init() {
-				// 初始化数据
-				this.updateParentData()
-				if (!this.parent) {
-					return this.$fu.error('fu-steps-item必须要搭配fu-steps组件使用')
-				}
-				this.index = this.parent.children.indexOf(this);
-				this.childLength = this.parent.children.length;
-			},
-			updateParentData() {
-				// 此方法在mixin中
-				this.getParentData('FuSteps')
-			},
-			// 父组件数据发生变化
-			updateFromParent() {
-				this.init()
-			},
-			// 获取组件的尺寸，用于设置横线的位置
-			getStepsItemRect() {
-				// #ifndef APP-NVUE
-				this.$fuGetRect('.fu-steps-item').then(size => {
-					this.size = size;
-				})
-				// #endif
-				// #ifdef APP-NVUE
-				dom.getComponentRect(this.$refs['fu-steps-item'], res => {
-					const { size } = res;
-					this.size = size;
-				})
-				// #endif
-			}
-		},
-		watch: {
-			'parentData'(newValue, oldValue) {}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	$fu-tips-color: #a7a8aa !default;
-	$fu-content-color: #77797e !default;
-
-	.fu-steps-item {
-		flex: 1;
-		@include flex;
-
-		&--row {
-			flex-direction: column;
-			align-items: center;
-			position: relative;
-		}
-
-		&--column {
-			position: relative;
-			flex-direction: row;
-			justify-content: flex-start;
-			padding-bottom: 5px;
-		}
-
-		&__wrapper {
-			@include flex;
-			justify-content: center;
-			align-items: center;
-			position: relative;
-			background-color: #fff;
-
-			&--column {
-				width: 20px;
-				height: 32px;
-
-				&--dot {
-					height: 20px;
-					width: 20px;
-				}
-			}
-
-			&--row {
-				width: 32px;
-				height: 20px;
-
-				&--dot {
-					width: 20px;
-					height: 20px;
-				}
-			}
-
-			&__circle {
-				width: 20px;
-				height: 20px;
-				/* #ifndef APP-NVUE */
-				box-sizing: border-box;
-				flex-shrink: 0;
-				/* #endif */
-				border-radius: 100px;
-				border-width: 1px;
-				border-color: $fu-tips-color;
-				border-style: solid;
-				@include flex(row);
-				align-items: center;
-				justify-content: center;
-				transition: background-color 0.3s;
-
-				&__text {
-					color: $fu-tips-color;
-					font-size: 11px;
-					@include flex(row);
-					align-items: center;
-					justify-content: center;
-					text-align: center;
-					line-height: 11px;
-				}
-			}
-
-			&__dot {
-				width: 10px;
-				height: 10px;
-				border-radius: 100px;
-				background-color: $fu-content-color;
-			}
-		}
-
-		&__content {
-			@include flex;
-			flex: 1;
-
-			&--row {
-				flex-direction: column;
-				align-items: center;
-			}
-
-			&--column {
-				flex-direction: column;
-				margin-left: 6px;
-			}
-		}
-
-		&__line {
-			position: absolute;
-			background: $fu-tips-color;
-
-			&--row {
-				top: 10px;
-				height: 1px;
-			}
-
-			&--column {
-				width: 1px;
-				left: 10px;
-			}
-		}
-	}
-</style>