fusions-ui 1.2.7 → 1.2.8

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

@@ -0,0 +1,251 @@
+import { ref, watch, nextTick, type SetupContext } from 'vue';
+import type { TransitionProps, TransitionEmits } from '../transition';
+import { createAnimation, type AnimationCtx } from './createAnimation';
+
+export const useTransition = (props: TransitionProps, $emit: SetupContext<TransitionEmits>['emit']) => {
+	const ani = ref();
+	const timerRef = ref<any>(null);
+	const isShow = ref(false);
+	const transform = ref('');
+	const opacity = ref<any>(1);
+	const animationData = ref<any>({});
+	const durationTime = ref(300);
+	let animation: any = null;
+	// animation base config
+	let config = {
+		duration: props.duration,
+		timingFunction: 'ease',
+		transformOrigin: '50% 50%',
+		delay: 0
+	};
+	// 构建动画上下文
+	const buildCtx = (): AnimationCtx => ({
+		targetRef: ani,
+		animationDataRef: animationData,
+		durationTimeRef: durationTime,
+		timerRef,
+	});
+	
+	/**
+	 *  ref 触发 初始化动画
+	 */
+	const init = (obj: Record<string, any> = {}) => {
+		if (obj.duration) {
+			durationTime.value = obj.duration;
+		}
+		animation = createAnimation(Object.assign({}, config, obj), buildCtx())
+	};
+	
+	/**
+	 * ref 触发 动画分组
+	 * @param {Object} obj
+	 */
+	const step = (obj: Record<string, any>, config: Record<string, any> = {}) => {
+		if (!animation) return
+		for (let i in obj) {
+			try {
+				const v = obj[i];
+				if (typeof v === 'object') {
+					(animation as any)[i](...(Array.isArray(v)? v: [v]))
+				} else {
+					(animation as any)[i](v)
+				}
+			} catch (e) {
+				console.error(`方法 ${i} 不存在`)
+			}
+		}
+		
+		animation.step(config)
+		
+		return { step, run }
+	};
+	
+	/**
+	 *  ref 触发 执行动画
+	 */
+	const run = (fn?: () => void) => {
+		if (!animation) return
+		animation.run(fn)
+	};
+	
+	/**
+	 * 开始过度动画
+	 */
+	const open = () => {
+		clearTimeout(timerRef.value)
+		transform.value = '';
+		isShow.value = true;
+		let { opacity: op, transform: tr } = styleInit(false);
+		if (typeof opacity !== 'undefined') opacity.value = op as any;
+		transform.value = tr;
+		// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
+		nextTick(() => {
+			// 定时器保证动画完全执行，目前有些问题，后面会取消定时器
+			timerRef.value = setTimeout(() => {
+				animation = createAnimation(config, buildCtx())
+				tranfromInit(false).step()
+				animation.run(() => {
+					// #ifdef APP-NVUE
+					transform.value = styleInit(false).transform || ''
+					opacity.value = styleInit(false).opacity || 1
+					// #endif
+					// #ifndef APP-NVUE
+					transform.value = ''
+					opacity.value = styleInit(false).opacity || 1
+					// #endif
+					$emit('change', {
+						detail: isShow.value
+					})
+				})
+			}, 20)
+		})
+	};
+			
+	/**
+	 * 关闭过度动画
+	 */
+	const close = (type?: any) => {
+		if (!animation) return
+		tranfromInit(true).step().run(() => {
+			isShow.value = false;
+			animationData.value = null;
+			animation = null;
+			let { opacity: op, transform: tr } = styleInit(false);
+			opacity.value = op || 1;
+			transform.value = tr;
+			$emit('change', {
+				detail: isShow.value
+			})
+		})
+	};
+	
+	/**
+	 * 处理动画开始前的默认样式
+	 */
+	const styleInit = (type: boolean) => {
+		let style: Record<string, any> = {
+			transform: ''
+		};
+		let buildStyle = (type: boolean, mode: string) => {
+			if (mode === 'fade') {
+				style.opacity = animationType(type)[mode];
+			} else {
+				style.transform += animationType(type)[mode] + ' ';
+			}
+		}
+		if (typeof props.mode === 'string') {
+			buildStyle(type, props.mode as string)
+		} else {
+			(props.mode as string[]).forEach(mode => {
+				buildStyle(type, mode)
+			})
+		}
+		return style
+	};
+	
+	/**
+	 * 处理内置组合动画
+	 */
+	const tranfromInit = (type: boolean) => {
+		let buildTranfrom = (type: boolean, mode: string) => {
+			let aniNum = null;
+			if (mode === 'fade') {
+				aniNum = type ? 0 : 1;
+			} else {
+				aniNum = type ? '-100%' : '0';
+				if (mode === 'zoom-in') {
+					aniNum = type ? 0.8 : 1;
+				}
+				if (mode === 'zoom-out') {
+					aniNum = type ? 1.2 : 1;
+				}
+				if (mode === 'slide-right') {
+					aniNum = type ? '100%' : '0';
+				}
+				if (mode === 'slide-bottom') {
+					aniNum = type ? '100%' : '0';
+				}
+			}
+			(animation as any)[animationMode()[mode]](aniNum)
+		}
+		
+		if (typeof props.mode === 'string') {
+			buildTranfrom(type, props.mode as string)
+		} else {
+			(props.mode as string[]).forEach(mode => {
+				buildTranfrom(type, mode)
+			})
+		}
+	
+		return animation
+	};
+			
+	/**
+	 * 处理动画类型
+	 */
+	const animationType = (type: boolean) => {
+		return {
+			fade: type ? 1 : 0,
+			'slide-top': `translateY(${type ? '0' : '-100%'})`,
+			'slide-right': `translateX(${type ? '0' : '100%'})`,
+			'slide-bottom': `translateY(${type ? '0' : '100%'})`,
+			'slide-left': `translateX(${type ? '0' : '-100%'})`,
+			'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
+			'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
+		} as Record<string, any>
+	};
+			
+	/**
+	 * 内置动画类型与实际动画对应字典
+	 */
+	const animationMode = () => {
+		return {
+			fade: 'opacity',
+			'slide-top': 'translateY',
+			'slide-right': 'translateX',
+			'slide-bottom': 'translateY',
+			'slide-left': 'translateX',
+			'zoom-in': 'scale',
+			'zoom-out': 'scale'
+		} as Record<string, any>
+	};
+			
+	/**
+	 * 驼峰转中横线
+	 */
+	const toLine = (name: string) => {
+		return name.replace(/([A-Z])/g, '-$1').toLowerCase()
+	};
+	
+	const handleClick = (isShow: boolean) => {
+		$emit('click', {
+			detail: isShow
+		});
+	}
+	
+	// watch监听事件
+	watch(() => props.show, (newVal) => {
+		if (newVal) {
+			open()
+		} else {
+			// 避免上来就执行 close,导致动画错乱
+			if (isShow.value) {
+				close()
+			}
+		}
+	}, { immediate: true });
+	
+	return {
+		ani,
+		isShow,
+		transform,
+		opacity,
+		animationData,
+		init,
+		step,
+		run,
+		open,
+		close,
+		handleClick
+	}
+};

package/components/transition/src/transition.ts

@@ -0,0 +1,64 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+/**
+ * 动画mode有效值
+ */
+export const transitionModes = [
+	'fade',
+	'slide-top',
+	'slide-right',
+	'slide-bottom',
+	'slide-left',
+	'zoom-in',
+	'zoom-out'
+] as const;
+
+export const transitionProps = {
+	/**
+	 * @description 是否展示组件
+	 * @default false
+	 * @example <transition :show="true"></transition>
+	 */
+	show: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 使用的动画模式
+	 * @values 'fade' - 渐隐渐出过渡, 'slide-top' - 由上至下过渡, 'slide-right' - 由右至左过渡, 'slide-bottom' - 由下至上过渡, 'slide-left' - 由左至右过渡, 'zoom-in' - 由小到大过渡, 'zoom-out' - 由大到小过渡
+	 * @default 'fade'
+	 * @example <transition mode="slide-top"></transition>
+	 */
+	mode: {
+		type: [Array, String],
+		values: transitionModes,
+		default() {
+			return 'fade'
+		}
+	},
+	/**
+	 * @description 动画的执行时间，单位ms
+	 * @default 300
+	 * @example <transition :duration="1000"></transition>
+	 */
+	duration: {
+		type: Number,
+		default: 300
+	},
+	...componentProps
+};
+
+export const transitionEmits = {
+	/**
+	 * @description 动画点击事件
+	 */
+	click: (_e: any) => true,
+	/**
+	 * @description 组件改变时触发
+	 */
+	change: (_e: any) => true
+}
+
+export type TransitionProps = ExtractPropTypes<typeof transitionProps>
+export type TransitionEmits = typeof transitionEmits;

package/components/transition/src/transition.vue

@@ -0,0 +1,70 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyle" @click="handleClick(isShow)">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyle" @click="handleClick(isShow)">
+		<slot></slot>
+	</view>
+	<!-- #endif -->
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Transition 过渡动画
+	 * @description 此组件为过渡动画
+	 * @tutorial http://www.fusions.top/components/transition.html
+	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+	 * @property {Array|String} mode = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+	 *  @value fade 渐隐渐出过渡
+	 *  @value slide-top 由上至下过渡
+	 *  @value slide-right 由右至左过渡
+	 *  @value slide-bottom 由下至上过渡
+	 *  @value slide-left 由左至右过渡
+	 *  @value zoom-in 由小到大过渡
+	 *  @value zoom-out 由大到小过渡
+	 * @property {Number} duration 过渡动画持续时间
+	 * @property {String} customClass 定义需要用到的外部类
+	 * @property {String|Object} customStyle 定义需要用到的外部样式
+	 */
+	import { transitionEmits, transitionProps } from './transition';
+	import { useTransition, useTransitionCustomStyle } from './composables';
+		
+	defineOptions({ name: 'FuTransition', options: { virtualHost: true } })
+	
+	const props = defineProps(transitionProps);
+	const $emit = defineEmits(transitionEmits);
+	
+	const {
+		ani,
+		isShow,
+		transform,
+		opacity,
+		animationData,
+		init,
+		step,
+		run,
+		open,
+		close,
+		handleClick
+	} = useTransition(props, $emit);
+	
+	const {
+		 transformStyle
+	} = useTransitionCustomStyle(props, transform, opacity)
+	
+	// 暴露方法给父组件
+	defineExpose({
+		init,
+		step,
+		run,
+		open,
+		close
+	});
+</script>
+
+<style>
+
+</style>

package/components/upload/index.ts

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

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

@@ -0,0 +1,5 @@
+export * from './upload-file-custom'
+export * from './upload-image-custom'
+export * from './use-upload-file'
+export * from './use-upload-image'
+export * from './use-upload'

package/components/upload/src/composables/upload-file-custom.ts

@@ -0,0 +1,68 @@
+import { computed } from 'vue';
+import type { UploadFileProps } from '../upload-file';
+
+export const useUploadFileCustomStyle = (props: UploadFileProps) => {
+	const styles = computed(() => {
+		let styles = {
+			border: true,
+			dividline: true,
+			'border-style': {}
+		};
+		return uni.$fu.deepMerge(styles, uni.$fu.addStyle(props.listStyles))
+	});
+	
+	const borderStyle = computed(() => {
+		let { border } = styles.value;
+		let obj: Record<string, any> = {};
+		if (!border) {
+			obj.border = 'none';
+		} else {
+			const { width = 1, radius = 5, style = 'solid', color = '#eeeeee' } = border || {};
+			const borderWidth = value2px(width);
+			const borderRadius = value2px(radius);
+			obj = {
+				'border-width': borderWidth,
+				'border-style': style,
+				'border-color': color,
+				'border-radius': borderRadius
+			};
+		}
+		
+		return uni.$fu.addStyle(obj, 'string')
+	});
+	
+	const borderLineStyle = computed(() => {
+		let obj: Record<string, any> = {};
+		let { borderStyle } = styles.value;
+		if (borderStyle && borderStyle.color) {
+			obj['border-color'] = borderStyle.color;
+		}
+		if (borderStyle && borderStyle.width) {
+			let width = borderStyle && borderStyle.width || 1;
+			let style = borderStyle && borderStyle.style || 0;
+			obj['border-width'] = value2px(width);
+			obj['border-top-style'] = value2px(style);
+		}
+	
+		return uni.$fu.addStyle(obj, 'string')
+	});
+	
+	const value2px = (value: string | number): string => {
+		let result: string = String(value);
+		
+		if (typeof value === 'number') {
+			result = value + 'px';
+		}
+		if (result.indexOf('%') === -1 && result.indexOf('px') === -1) {
+			result = value + 'px';
+		}
+		
+		return result
+	};
+			
+	return {
+		styles,
+		borderStyle,
+		borderLineStyle
+	}
+}

package/components/upload/src/composables/upload-image-custom.ts

@@ -0,0 +1,76 @@
+import { computed } from 'vue';
+import type { UploadImageProps } from '../upload-image';
+
+export const useUploadImageCustomStyle = (props: UploadImageProps) => {
+	const styles = computed(() => {
+		let style = {
+			width: 'auto',
+			height: 'auto',
+			border: {}
+		};
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.imageStyles))
+	});
+	
+	const boxStyle = computed(() => {
+		const { width = 'auto', height = 'auto', background } = styles.value;
+		let obj: Record<string, any> = { background };
+
+		if (height !== 'auto') {
+			obj.height = value2px(height);
+			obj['padding-top'] = 0;
+		} else if (width !== 'auto') {
+			obj.height = value2px(width);
+			obj['padding-top'] = 0;
+		} else {
+			obj.height = 0;
+		}
+		
+		if (width !== 'auto') {
+			obj.width = value2px(width);
+		} else if (height !== 'auto') {
+			obj.width = value2px(height);
+		} else {
+			obj.width = '33.3%';
+		}
+
+		return uni.$fu.addStyle(obj, 'string')
+	});
+	
+	const borderStyle = computed(() => {
+		let { border } = styles.value;
+		let obj: Record<string, any> = {};
+		if (typeof border === 'boolean') {
+			obj.border = border ? '1px #eeeeee solid' : 'none';
+		} else {
+			const { width = 1, radius = 3, style = 'solid', color = '#eeeeee' } = border || {};
+			const borderWidth = value2px(width);
+			const borderRadius = value2px(radius);
+			obj = {
+				'border-width': borderWidth,
+				'border-style': style,
+				'border-color': color,
+				'border-radius': borderRadius
+			};
+		}
+
+		return uni.$fu.addStyle(obj, 'string')
+	});
+	
+	const value2px = (value: string | number): string => {
+		let result: string = String(value);
+		
+		if (typeof value === 'number') {
+			result = value + 'px';
+		}
+		if (result.indexOf('%') === -1 && result.indexOf('px') === -1) {
+			result = value + 'px';
+		}
+		
+		return result
+	};
+	
+	return {
+		boxStyle,
+		borderStyle
+	}
+}

package/components/upload/src/composables/use-upload-file.ts

@@ -0,0 +1,27 @@
+import type { SetupContext } from 'vue';
+import type { UploadFileProps, UploadFileEmits } from '../upload-file';
+
+export const useUploadFile = (props: UploadFileProps, $emit: SetupContext<UploadFileEmits>['emit']) => {
+	const uploadFiles = (item: any, index: number) => {
+		$emit("uploadFiles", {
+			item,
+			index
+		})
+	};
+	
+	const chooseFile = () => {
+		if(!props.disabled) {
+			$emit("choose")
+		}
+	};
+	
+	const chooseDelFile = (index: number) => {
+		$emit('delFile', index)
+	};
+	
+	return {
+		uploadFiles,
+		chooseFile,
+		chooseDelFile
+	}
+}

package/components/upload/src/composables/use-upload-image.ts

@@ -0,0 +1,38 @@
+import type { SetupContext } from 'vue';
+import type { UploadImageProps, UploadImageEmits } from '../upload-image';
+
+export const useUploadImage = (props: UploadImageProps, $emit: SetupContext<UploadImageEmits>['emit']) => {
+	const uploadFiles = (item: any) => {
+		$emit("uploadFiles", item)
+	};
+	
+	const chooseImage = () => {
+		$emit("choose")
+	};
+	
+	const chooseDelFile = (index: number) => {
+		$emit('delFile', index)
+	};
+	
+	const choosePrviewImage = (index: number) => {
+		let urls = [];
+		if(Number(props.maxCount) === 1 && props.disablePreview && !props.disabled){
+			$emit("choose")
+		}
+		if(props.disablePreview) return
+		props.list.forEach(i => {
+			urls.push((i as any).url)
+		})
+		uni.previewImage({
+			urls: urls,
+			current: index
+		});
+	};
+		
+	return {
+		uploadFiles,
+		chooseImage,
+		chooseDelFile,
+		choosePrviewImage
+	}
+}