fusions-ui 1.2.7 → 1.2.8

package/components/sign-board/src/sign-board.vue

@@ -0,0 +1,191 @@
+<template>
+	<view class="fu-sign-board-class fu-sign-board" :style="{top: `${customBarHeight}px`, height: `calc(100% - ${customBarHeight}px)`}" v-if="show">
+		<!-- 签名canvas -->
+		<view class="fu-sign-board__content">
+			<view class="fu-sign-board__content__wrapper">
+				<canvas 
+					:id="canvasId"
+					:canvas-id="canvasId" 
+					class="fu-sign-board__content__canvas" 
+					disableScroll
+					@touchstart="onTouchStart" 
+					@touchmove="onTouchMove" 
+					@touchend="onTouchEnd">
+				</canvas>
+			</view>
+		</view>
+
+		<!-- 底部工具栏 -->
+		<view class="fu-sign-board__tools">
+			<!-- 可选颜色 -->
+			<view class="fu-sign-board__tools__color">
+				<view 
+					class="fu-sign-board__tools__color__item"
+					:class="[{'fu-sign-board__tools__color__item--active': currentSelectColor === item}]"
+					:style="{backgroundColor: (item as string)}" 
+					v-for="(item, index) in signSelectColor" :key="index"
+					@tap="colorSwitch(item as string)">
+				</view>
+			</view>
+
+			<!-- 按钮 -->
+			<view class="fu-sign-board__tools__button">
+				<view class="fu-sign-board__tools__button__item fu-bg-red" @tap="resetDraw">清除</view>
+				<view class="fu-sign-board__tools__button__item fu-bg-blue" @tap="handleSave">保存</view>
+				<view class="fu-sign-board__tools__button__item fu-bg-indigo" @tap="previewImage">预览</view>
+				<view class="fu-sign-board__tools__button__item fu-bg-orange" @tap="closeBoard">关闭</view>
+			</view>
+		</view>
+
+		<!-- 伪全屏生成旋转图片canvas容器，不在页面上展示 -->
+		<view style="position: fixed; left: -2000px; width: 0; height: 0; overflow: hidden;">
+			<canvas 
+				id="temp-fu-sign-canvas" 
+				canvas-id="temp-fu-sign-canvas" 
+				:style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}">
+			</canvas>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * @description SignBoard签名板
+	 * @tutorial http://www.fusions.top/components/signBoard.html
+	 * @property {Boolean} show = [true|false] 是否显示（默认 false）
+	 * @property {Array} signSelectColor 可选签名颜色（默认 ['#060606', '#ec3930']）
+	 * @property {Boolean} rotate 是否旋转输出图片（默认 true）
+	 * @property {String | Number} customBarHeight 自定义顶栏的高度（默认 0）
+	 * 
+	 * @event {Function} save 保存时触发
+	 * @event {Function} close 关闭时触发
+	 */
+	import { signBoardEmits, signBoardProps } from './sign-board';
+	import { useSignBoard } from './composables';
+	
+	defineOptions({ name: 'FuSignBoard', options: { virtualHost: true } });
+	
+	const props = defineProps(signBoardProps);
+	const $emit = defineEmits(signBoardEmits);
+	
+	const {
+		canvasId,
+		canvasWidth,
+		canvasHeight,
+		currentSelectColor,
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		resetDraw,
+		handleSave,
+		previewImage,
+		closeBoard,
+		colorSwitch
+	} = useSignBoard(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	.fu-sign-board {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 100%;
+		height: 100%;
+		background-color: #E6E6E6;
+		z-index: 997;
+		display: flex;
+		flex-direction: row-reverse;
+
+		&__content {
+			width: 84%;
+			height: 100%;
+
+			&__wrapper {
+				width: calc(100% - 60rpx);
+				height: calc(100% - 60rpx);
+				margin: 30rpx;
+				border-radius: 20rpx;
+				border: 2rpx dotted #AAAAAA;
+				overflow: hidden;
+			}
+
+			&__canvas {
+				width: 100%;
+				height: 100%;
+				background-color: #FFFFFF;
+			}
+		}
+
+		&__tools {
+			width: 16%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+
+			&__color {
+				margin-top: 30rpx;
+
+				&__item {
+					width: 70rpx;
+					height: 70rpx;
+					border-radius: 100rpx;
+					margin: 20rpx auto;
+
+					&--active {
+						position: relative;
+
+						&::after {
+							content: '';
+							position: absolute;
+							top: 50%;
+							left: 50%;
+							width: 40%;
+							height: 40%;
+							border-radius: 100rpx;
+							background-color: #FFFFFF;
+							transform: translate(-50%, -50%);
+						}
+					}
+				}
+			}
+
+			&__button {
+				margin-bottom: 30rpx;
+				display: flex;
+				flex-direction: column;
+
+				&__item {
+					width: 130rpx;
+					height: 60rpx;
+					line-height: 60rpx;
+					text-align: center;
+					margin: 60rpx auto;
+					border-radius: 10rpx;
+					color: #FFFFFF;
+					transform-origin: center center;
+					transform: rotateZ(90deg);
+				}
+			}
+		}
+	}
+
+	.fu-bg-red {
+		background-color: #E83A30;
+	}
+
+	.fu-bg-blue {
+		background-color: #3D7EFF;
+	}
+
+	.fu-bg-indigo {
+		background-color: #31C9E8;
+	}
+
+	.fu-bg-orange {
+		background-color: #FFA726;
+	}
+</style>

package/components/skeleton/index.ts

@@ -0,0 +1 @@
+export * from './src/skeleton'

package/components/skeleton/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './skeleton-custom'
+export * from './use-skeleton'

package/components/skeleton/src/composables/skeleton-custom.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import type { SkeletonProps } from '../skeleton';
+
+export const useSkeletonCustomStyle = (props: SkeletonProps) => {
+	const animateClass = computed(() => {
+		return props.animate ? 'fu-skeleton--animation' : 'fu-skeleton--static';
+	});
+	
+	const roundClass = computed(() => {
+		return props.round ? 'fu-skeleton--round' : 'fu-skeleton--radius';
+	});
+	
+	const getItemStyle = (item: any) => {
+		let style: Record<string, any> = {};
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(item.style));
+	};
+	
+	return {
+		animateClass,
+		roundClass,
+		getItemStyle
+	}
+}

package/components/skeleton/src/composables/use-skeleton.ts

@@ -0,0 +1,102 @@
+import { ref, onMounted } from 'vue';
+import type { SkeletonProps } from '../skeleton';
+// #ifdef APP-NVUE
+// @ts-ignore
+const animation = weex.requireModule('animation');
+// #endif
+
+export const useSkeleton = (props: SkeletonProps) => {
+	const skeleton = ref();
+	const elements = ref([]);
+	const opacity = ref(0.5);
+	const duration = ref(500);
+	
+	// 初始化骨架屏数据
+	const init = () => {
+		let result = [];
+		if (!uni.$fu.isArray(props.skeleton)) return uni.$fu.error('skeleton参数必须为数组形式，参考文档示例：');
+		props.skeleton.forEach(item => {
+			const elClass = getElCounts(item);
+			result = result.concat(elClass);
+		})
+		elements.value = [...result];
+	};
+	
+	/**
+	 * 处理骨架屏参数内容
+	 * @param {Object} e 每项数据
+	 */
+	const getElCounts = (e: any) => {
+		let elements = [];
+		let children = [];
+		if (uni.$fu.checkNumber(e)) return [{ type: 'gap', height: e }];
+		const type = e.type || 'line';
+		const num = e.num || 1;
+		const style = e.style || {};
+		const styleIsArray = uni.$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: 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;
+	};
+	
+	// 创建动画
+	const createAnimation = (opacitys: number = 1) => {
+		// loading结束之后或未开启动画不执行
+		if (!props.loading || !props.animate) return;
+		const skeletons = skeleton.value;
+		const total = skeletons.length;
+		let completed = 0;
+		skeletons.forEach((item: any) => {
+			animation.transition(item, {
+				styles: {
+					opacity: opacitys,
+				},
+				duration: duration.value
+			}, () => {
+				if (++completed >= total) {
+					setTimeout(() => {
+						createAnimation(opacitys < 1 ? 1 : opacity.value);
+					}, 200)
+				}
+			});
+		})
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+		// #ifdef APP-NVUE
+		if (props.loading && props.animate) {
+			uni.$fu.sleep(50).then(() => {
+				createAnimation(opacity.value);
+			})
+		}
+		// #endif
+	});
+	
+	return {
+		skeleton,
+		elements
+	}
+}

package/components/skeleton/src/skeleton.ts

@@ -0,0 +1,37 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const skeletonProps = {
+	/**
+	 * @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
+	}
+};
+
+export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>;

package/components/skeleton/src/skeleton.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="fu-skeleton">
+		<view v-if="loading">
+			<view v-for="(item, index) in elements" :key="index">
+				<!-- 横向并列布局 -->
+				<view class="fu-skeleton__group" :style="[getItemStyle(item)]" v-if="item.type=='flex'">
+					<view :class="[item2.classs]" :style="[getItemStyle(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="[getItemStyle(item3)]" v-else></view>
+						</view>
+					</view>
+				</view>
+				<!-- 自定义骨架屏内容 -->
+				<view ref="skeleton" :class="[item.classs, animateClass]" :style="[getItemStyle(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="[getItemStyle(item)]" v-else></view>
+			</view>
+		</view>
+		<view v-else>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Skeleton 骨架屏
+	 * @description 用于在页面加载数据期间显示占位图形，提升用户体验。
+	 * @tutorial http://www.fusions.top/components/skeleton.html
+	 * @property {Boolean} loading 是否显示骨架（默认 true）
+	 * @property {Array} skeleton 骨架内容 具体说明参考文档：
+	 * @property {Boolean} animate 是否开启动画效果（默认 true）
+	 * @property {Boolean} round 是否圆角骨架风格（默认 false）
+	 * 
+	 * @example <fu-skeleton :skeleton="skeletonConfig" :loading="true"></fu-skeleton>
+	 */
+	import { skeletonProps } from './skeleton';
+	import { useSkeleton, useSkeletonCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuSkeleton', options: { virtualHost: true } });
+	
+	const props = defineProps(skeletonProps);
+	
+	const {
+		skeleton,
+		elements
+	} = useSkeleton(props);
+	
+	const {
+		animateClass,
+		roundClass,
+		getItemStyle
+	} = useSkeletonCustomStyle(props);
+</script>
+<style lang="scss" scoped>
+	@use '../../../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 components.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/status-bar/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-status-bar'

package/components/status-bar/src/composables/use-status-bar.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+
+export const useStatusBar = () => {
+	const statusBarHeight = computed(() => {
+		const height = getStatusBarHeight();
+		return uni.$fu.addUnit(height, 'px')
+	});
+	
+	const getStatusBarHeight = (): number => {
+		let statusBarHeight: number;
+		
+		// #ifdef MP-WEIXIN
+		try {
+			statusBarHeight = uni.getWindowInfo().statusBarHeight;
+		} catch (e) {
+			statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+		}
+		// #endif
+		// #ifndef MP-WEIXIN
+		statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+		// #endif
+		
+		return statusBarHeight
+	};
+	
+	return {
+		statusBarHeight
+	}
+}

package/components/status-bar/src/status-bar.vue

@@ -0,0 +1,21 @@
+<template>
+	<view class="fu-status-bar" :style="{height: statusBarHeight}">
+		<slot />
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { useStatusBar } from './composables';
+	
+	defineOptions({ name: 'FuStatusBar', options: { virtualHost: true } });
+	
+	const {
+		statusBarHeight
+	} = useStatusBar()
+</script>
+
+<style lang="scss" >
+	.fu-status-bar {
+		height: 20px;
+	}
+</style>

package/components/steps/index.ts

@@ -0,0 +1 @@
+export * from './src/steps'

package/components/steps/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-steps'

package/components/steps/src/composables/use-steps.ts

@@ -0,0 +1,27 @@
+import { ref, provide } from 'vue';
+import type { StepsProps } from '../steps';
+
+export const useSteps = (props: StepsProps) => {
+	const children = ref([]);
+	
+	// 更新子组件的数据
+	const updateChildData = () => {
+		children.value.map(item => {
+			if (item && typeof item.exposed.init === 'function') {
+				item.exposed.init();
+			}
+		});
+	};
+
+	// 提供父组件上下文
+	provide('stepsContext', {
+		...props,
+		children,
+		updateChildData
+	});
+	
+	return {
+		children,
+		updateChildData
+	}
+}

package/components/steps/src/steps.ts

@@ -0,0 +1,65 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+/**
+ * 步骤条 direction 有效值
+ */
+export const stepsDirections = ['row', 'column'] as const;
+
+export const stepsProps = {
+	/**
+	 * @description 排列方向
+	 * @values 'row' - 横向, 'column' - 竖向
+	 * @default 'row'
+	 */
+	direction: {
+		type: String,
+		values: stepsDirections,
+		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
+	},
+	...componentProps
+};
+
+export type StepsProps = ExtractPropTypes<typeof stepsProps>;