fusions-ui 1.2.7 → 1.2.8

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

@@ -0,0 +1,346 @@
+import { ref, computed, onBeforeUnmount, onMounted, watch, type SetupContext, CSSProperties } from 'vue';
+import type { PopupProps, PopupEmits } from '../popup';
+
+export const usePopup = (props: PopupProps, $emit: SetupContext<PopupEmits>['emit']) => {
+	const duration = ref(300);
+	const ani = ref([]);
+	const showPopup = ref(false);
+	const showTrans = ref(false);
+	const popupWidth = ref(0);
+	const popupHeight = ref(0);
+	const config = ref({
+		top: 'top',
+		bottom: 'bottom',
+		center: 'center',
+		left: 'left',
+		right: 'right'
+	});
+	const maskClass = ref({
+		position: 'fixed',
+		bottom: 0,
+		top: 0,
+		left: 0,
+		right: 0,
+		backgroundColor: 'rgba(0, 0, 0, 0.4)',
+	});
+	const transClass: Record<string, any> = ref({
+		position: 'fixed',
+		left: 0,
+		right: 0
+	});
+	const maskShow = ref(true);
+	const popupstyle = ref('');
+	const direction = ref(props.mode);
+	const mkclick = ref(true);
+	const clearPropagation = ref(false);
+	const closeIconPosition = ref('');
+	
+	const bg = computed(() => {
+		if (props.bgColor === '' || props.bgColor === 'none') {
+			return 'transparent'
+		}
+		
+		return props.bgColor
+	});
+	
+	const getStyle = computed<CSSProperties>(() => {
+		let style: Record<string, any> = {};
+		if (props.bgColor) {
+			style.backgroundColor = bg.value
+		}
+		if(props.radius) {
+			const value = uni.$fu.addUnit(props.radius);
+			const mode = direction.value? direction.value: props.mode;
+			style.backgroundColor = props.bgColor;
+			if(mode === 'top') {
+				style.borderBottomLeftRadius = value;
+				style.borderBottomRightRadius = value;
+			} else if(mode === 'bottom') {
+				style.borderTopLeftRadius = value;
+				style.borderTopRightRadius = value;
+			} else if(mode === 'center') {
+				style.borderRadius = value;
+			}
+		}
+		
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	const isDesktop = computed(() => {
+		return popupWidth.value >= 500 && popupHeight.value >= 500
+	});
+	
+	const closeIconPo = computed(() => {
+		return props.closeIconPos
+	});
+	
+	closeIconPosition.value = closeIconPo.value;
+	
+	const setH5Visible = () => {
+		// #ifdef H5
+		// 处理 h5 滚动穿透的问题
+		document.getElementsByTagName('body')[0].style.overflow = 'visible'
+		// #endif
+	};
+	
+	/**
+	 * 公用方法，不显示遮罩层
+	 */
+	const closeMask = () => {
+		mkclick.value = false;
+	};
+	
+	// Nvue 取消冒泡
+	const clear = (e: TouchEvent) => {
+		// #ifndef APP-NVUE
+		e.stopPropagation()
+		// #endif
+		clearPropagation.value = true;
+	};
+	
+	// 打开
+	const open = (mode?: string) => {
+		// 处理快速打开关闭的情况
+		if (showPopup.value) return
+		let innerMode = ['top', 'center', 'bottom', 'left', 'right'];
+		if (!(mode && innerMode.indexOf(mode) !== -1)) {
+			mode = props.mode;
+		} else {
+			direction.value = mode;
+		}
+		if(!props.closeIconPos) {
+			closeIconPosition.value = mode === 'top'? 'bottom-right': (mode === 'center' || mode === 'bottom' || mode === 'left')? 'top-right': mode === 'right'? 'top-left': ''
+		}
+		if (!config.value[mode]) {
+			console.error('缺少类型：', direction.value)
+			return
+		}
+		
+		const fn = config.value[mode];
+		switch(fn) {
+			case 'top':
+				top()
+				break
+			case 'center':
+				center()
+				break
+			case 'bottom':
+				bottom()
+				break
+			case 'left':
+				left()
+				break
+			case 'right':
+				right()
+				break
+		}
+		
+		$emit('change', {
+			show: true,
+			mode: direction.value
+		})
+	};
+	
+	// 关闭
+	const close = (mode?: string) => {
+		showTrans.value = false;
+		$emit('change', {
+			show: false,
+			mode: props.mode
+		})
+		uni.$fu.sleep(duration.value).then(() => {
+			showPopup.value = false;
+		})
+	};
+	
+	// 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
+	const touchstart = () => {
+		clearPropagation.value = false;
+	};
+	
+	// 点击遮罩触发
+	const onTap = () => {
+		if (clearPropagation.value) {
+			// fix by mehaotian 兼容 nvue
+			clearPropagation.value = false;
+			return
+		}
+		$emit('maskClick')
+		if (!mkclick.value) return
+		close()
+	};
+	
+	/**
+	 * 顶部弹出样式处理
+	 */
+	const top = (mode?: string | boolean) => {
+		popupstyle.value = isDesktop.value ? 'fixforpc-top' : 'top';
+		ani.value = ['slide-top'];
+		transClass.value = {
+			position: 'fixed',
+			left: 0,
+			right: 0,
+			...getStyle.value
+		};
+		if (mode) return
+		showPopup.value = true;
+		showTrans.value = true;
+	};
+	
+	/**
+	 * 底部弹出样式处理
+	 */
+	const bottom = (mode?: string | boolean) => {
+		popupstyle.value = 'bottom';
+		ani.value = ['slide-bottom'];
+		transClass.value = {
+			position: 'fixed',
+			left: 0,
+			right: 0,
+			bottom: 0,
+			...getStyle.value
+		};
+		if (mode) return
+		showPopup.value = true;
+		showTrans.value = true;
+	};
+	
+	/**
+	 * 中间弹出样式处理
+	 */
+	const center = (mode?: string | boolean) => {
+		popupstyle.value = 'center';
+		ani.value = ['zoom-out', 'fade'];
+		transClass.value = {
+			position: 'fixed',
+			/* #ifndef APP-NVUE */
+			display: 'flex',
+			flexDirection: 'column',
+			/* #endif */
+			bottom: 0,
+			left: 0,
+			right: 0,
+			top: 0,
+			justifyContent: 'center',
+			alignItems: 'center'
+		};
+		if (mode) return
+		showPopup.value = true;
+		showTrans.value = true;
+	};
+	
+	/**
+	 * 左侧弹出样式处理
+	 */
+	const left = (mode?: string | boolean) => {
+		popupstyle.value = 'left';
+		ani.value = ['slide-left'];
+		transClass.value = {
+			position: 'fixed',
+			left: 0,
+			bottom: 0,
+			top: 0,
+			...getStyle.value,
+			/* #ifndef APP-NVUE */
+			display: 'flex',
+			flexDirection: 'column'
+			/* #endif */
+		};
+		if (mode) return
+		showPopup.value = true;
+		showTrans.value = true;
+	};
+	
+	/**
+	 * 右侧弹出样式处理
+	 */
+	const right = (mode?: string | boolean) => {
+		popupstyle.value = 'right';
+		ani.value = ['slide-right']
+		transClass.value = {
+			position: 'fixed',
+			bottom: 0,
+			right: 0,
+			top: 0,
+			...getStyle.value,
+			/* #ifndef APP-NVUE */
+			display: 'flex',
+			flexDirection: 'column'
+			/* #endif */
+		};
+		if (mode) return
+		showPopup.value = true;
+		showTrans.value = true;
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		mkclick.value = props.isMaskClick || false;
+		if (props.animation) {
+			duration.value = 300;
+		} else {
+			duration.value = 0
+		}
+		// 解决头条冒泡的问题
+		clearPropagation.value = false
+		maskClass.value.backgroundColor = props.maskBgColor;
+	});
+	
+	onBeforeUnmount(() => {
+		setH5Visible()
+	});
+	
+	/**
+	 * 监听mode类型
+	 */
+	watch(() => props.mode, (newVal) => {
+		if (!config.value[newVal]) return
+		const fn = config.value[newVal];
+		if(fn === 'top') top(true)
+		else if(fn === 'center') center(true)
+		else if(fn === 'bottom') bottom(true)
+		else if(fn === 'left') left(true)
+		else if(fn === 'right') right(true)
+	}, { immediate: true });
+	
+	watch(() => isDesktop.value, () => {
+		if (!config.value[direction.value || props.mode]) return
+		const fn = config.value[direction.value || props.mode];
+		if(fn === 'top') top(true)
+		else if(fn === 'center') center(true)
+		else if(fn === 'bottom') bottom(true)
+		else if(fn === 'left') left(true)
+		else if(fn === 'right') right(true)
+	}, { immediate: true });
+	
+	watch(() => props.isMaskClick, (newVal) => {
+		mkclick.value = newVal;
+	}, { immediate: true });
+	
+	watch(() => showPopup.value, (newVal) => {
+		// #ifdef H5
+		// fix by mehaotian 处理 h5 滚动穿透的问题
+		document.getElementsByTagName('body')[0].style.overflow = newVal ? 'hidden' : 'visible'
+		// #endif
+	});
+	
+	return {
+		ani,
+		duration,
+		showTrans,
+		maskClass,
+		transClass,
+		showPopup,
+		maskShow,
+		popupstyle,
+		direction,
+		isDesktop,
+		closeIconPosition,
+		getStyle,
+		touchstart,
+		onTap,
+		clear,
+		open,
+		close
+	}
+}

package/components/popup/src/keypress.ts

@@ -0,0 +1,55 @@
+// #ifdef H5
+import { defineComponent, onMounted, onBeforeUnmount } from 'vue';
+
+const keyNames : Record<string, string | string[]> = {
+	esc: ['Esc', 'Escape'],
+	tab: 'Tab',
+	enter: 'Enter',
+	space: [' ', 'Spacebar'],
+	up: ['Up', 'ArrowUp'],
+	left: ['Left', 'ArrowLeft'],
+	right: ['Right', 'ArrowRight'],
+	down: ['Down', 'ArrowDown'],
+	delete: ['Backspace', 'Delete', 'Del']
+};
+
+export default defineComponent({
+	name: 'Keypress',
+	props: {
+		disable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ['esc', 'tab', 'enter', 'space', 'up', 'left', 'right', 'down', 'delete'],
+	setup(props, { emit }) {
+		const listener = ($event : KeyboardEvent) => {
+			if (props.disable) {
+				return
+			}
+			const keyName: any = Object.keys(keyNames).find(key => {
+				const keyName = $event.key
+				const value = keyNames[key]
+				return value === keyName || (Array.isArray(value) && value.includes(keyName))
+			})
+			if (keyName) {
+				// 避免和其他按键事件冲突
+				setTimeout(() => {
+					emit(keyName, {})
+				}, 0)
+			}
+		}
+		
+		// 生命周期
+		onMounted(() => {
+			document.addEventListener('keyup', listener);
+		});
+
+		onBeforeUnmount(() => {
+			document.removeEventListener('keyup', listener);
+		});
+
+		return () => null;
+	}
+})
+// #endif

package/components/popup/src/popup.ts

@@ -0,0 +1,101 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps, ZIndex } from '../../../constants';
+
+/**
+ * 弹出层mode有效值
+ */
+export const popupModes = ['top', 'center', 'bottom', 'left', 'right'] as const;
+
+export const popupProps = {
+	/**
+	 * @description 是否开启动画
+	 * @default true
+	 */
+	animation: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 弹出层方向
+	 * @values 'top' - 顶部弹出, 'center' - 中间弹出, 'bottom' - 底部弹出, 'left' - 左侧弹出, 'right' - 右侧弹出
+	 * @default 'center'
+	 */
+	mode: {
+		type: String,
+		values: popupModes,
+		default: 'center'
+	},
+	/**
+	 * @description 蒙版点击是否关闭弹窗
+	 */
+	isMaskClick: {
+		type: Boolean,
+		default: null
+	},
+	/**
+	 * @description 主窗口背景色
+	 */
+	bgColor: {
+		type: String,
+		default: '#FFFFFF'
+	},
+	/**
+	 * @description 是否适配底部安全区
+	 * @default true
+	 */
+	safeArea: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 蒙版颜色
+	 */
+	maskBgColor: {
+		type: String,
+		default: 'rgba(0, 0, 0, 0.4)'
+	},
+	/**
+	 * @description 弹出层的层级
+	 */
+	zIndex: {
+		type: [String,Number],
+		default: ZIndex.popup
+	},
+	/**
+	 * @description 是否显示关闭图标
+	 * @default false
+	 */
+	showClose: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 设置关闭图标位置
+	 */
+	closeIconPos: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 设置圆角
+	 */
+	radius: {
+		type: [String,Number],
+		default: 0
+	},
+	...componentProps
+};
+
+export const popupEmits = {
+	/**
+	 * @description 打开关闭弹窗触发
+	 */
+	change: (_e: any) => true,
+	/**
+	 * @description 点击遮罩触发
+	 */
+	maskClick: () => true
+};
+
+export type PopupProps = ExtractPropTypes<typeof popupProps>;
+export type PopupEmits = typeof popupEmits;

package/components/popup/src/popup.vue

@@ -0,0 +1,204 @@
+<template>
+	<view 
+		class="fu-popup" 
+		:class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" 
+		:style="{zIndex: zIndex}" 
+		v-if="showPopup">
+		<view @touchstart="touchstart">
+			<fu-transition 
+				key="1" 
+				name="mask" 
+				mode="fade" 
+				:customStyle="maskClass" 
+				:duration="duration" 
+				:show="showTrans" 
+				v-if="maskShow" 
+				@click="onTap" />
+			<fu-transition 
+				key="2" 
+				:mode="ani" 
+				name="content" 
+				:customStyle="transClass" 
+				:duration="duration" 
+				:show="showTrans" 
+				@click="onTap">
+				<view class="fu-popup__wrapper" :style="[getStyle]" :class="[popupstyle]" @click="clear">
+					<slot />
+					<fu-safe-bottom v-if="safeArea && direction == 'bottom'" />
+					<view 
+						class="fu-popup__wrapper__close" 
+						:class="['fu-popup__wrapper__close--' + closeIconPosition]" 
+						hover-class="fu-popup__wrapper__close--hover" 
+						hover-stay-time="150" 
+						@tap.stop="close" 
+						v-if="showClose">
+						<fu-icon name="cancel" color="#909399" size="18" bold></fu-icon>
+					</view>
+				</view>
+			</fu-transition>
+		</view>
+		<!-- #ifdef H5 -->
+		<keypress v-if="maskShow" @esc="onTap" />
+		<!-- #endif -->
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * PopUp 弹出层
+	 * @description 此组件弹出层，为了解决遮罩弹层的问题
+	 * @tutorial http://www.fusions.top/components/popup.html
+	 * @property {String} mode = [top|center|bottom|left|right] 弹出层方向
+	 * 	@value top 顶部弹出
+	 * 	@value center 中间弹出
+	 * 	@value bottom 底部弹出
+	 * 	@value left 左侧弹出
+	 * 	@value right 右侧弹出
+	 * @property {Boolean} animation = [true|false] 是否开启动画
+	 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
+	 * @property {String}  bgColor 主窗口背景色
+	 * @property {String}  maskBgColor 蒙版颜色
+	 * @property {Boolean} safeArea 是否适配底部安全区（默认 true）
+	 * @property {String | Number} zIndex 弹出层的层级 
+	 * @property {Boolean} showClose 是否显示关闭图标，默认false
+	 * @property {String} closeIconPos = [top-left|top-right|bottom-left|bottom-right] 自定义关闭图标位置
+	 * 	@value top-left 左上角
+	 * 	@value top-right 右上角
+	 * 	@value bottom-left 左下角
+	 * 	@value bottom-right 右下角
+	 * @property {String | Number} radius 自定义圆角
+	 * 
+	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
+	 * @event {Function} maskClick 点击遮罩触发
+	 * @example <fu-popup>弹窗内容</fu-popup>
+	 */
+	import { defineComponent } from 'vue';
+	import { popupEmits, popupProps }  from './popup';
+	import { usePopup } from './composables';
+	// #ifdef H5
+	import keypress from './keypress';
+	// #endif
+	
+	defineOptions({ name: 'FuPopup', options: { virtualHost: true } })
+	
+	defineComponent({
+		// #ifdef H5
+		keypress
+		// #endif
+	});
+	
+	const props = defineProps(popupProps);
+	const $emit = defineEmits(popupEmits);
+	
+	const {
+		ani,
+		duration,
+		showTrans,
+		maskClass,
+		transClass,
+		showPopup,
+		maskShow,
+		popupstyle,
+		direction,
+		isDesktop,
+		closeIconPosition,
+		getStyle,
+		touchstart,
+		onTap,
+		clear,
+		open,
+		close
+	} = usePopup(props, $emit);
+	
+	// 暴露方法给父组件
+	defineExpose({
+		open,
+		close
+	})
+</script>
+<style lang="scss" scoped>
+	.fu-popup {
+		position: fixed;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+		
+		&.top,
+		&.left,
+		&.right {
+			/* #ifdef H5 */
+			top: var(--window-top);
+			/* #endif */
+			/* #ifndef H5 */
+			top: 0;
+			/* #endif */
+		}
+
+		.fu-popup__wrapper {
+			/* #ifndef APP-NVUE */
+			display: block;
+			/* #endif */
+			position: relative;
+
+			/* iphonex 等安全区设置，底部安全区适配 */
+			/* #ifndef APP-NVUE */
+			// padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS 设备 */
+			// padding-bottom: env(safe-area-inset-bottom); /* 兼容IPhone X 及以上设备 */
+			/* #endif */
+			&.left,
+			&.right {
+				/* #ifdef H5 */
+				padding-top: var(--window-top);
+				/* #endif */
+				/* #ifndef H5 */
+				padding-top: 0;
+				/* #endif */
+				flex: 1;
+			}
+			
+			&.bottom {
+				/* #ifdef H5 */
+				padding-bottom: var(--window-bottom);
+				/* #endif */
+			}
+			
+			&__close {
+				position: absolute;
+			
+				&--hover {
+					opacity: 0.4;
+				}
+			}
+			
+			&__close--top-left {
+				top: 15px;
+				left: 15px;
+			}
+			
+			&__close--top-right {
+				top: 15px;
+				right: 15px;
+			}
+			
+			&__close--bottom-left {
+				bottom: 15px;
+				left: 15px;
+			}
+			
+			&__close--bottom-right {
+				right: 15px;
+				bottom: 15px;
+			}
+		}
+	}
+
+	.fixforpc-z-index {
+		/* #ifndef APP-NVUE */
+		z-index: 999;
+		/* #endif */
+	}
+
+	.fixforpc-top {
+		top: 0;
+	}
+</style>

package/components/progress/index.ts

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

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

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