fusions-ui 1.2.7 → 1.2.8

package/components/steps/src/steps.vue

@@ -0,0 +1,46 @@
+<template>
+	<view :class="['fu-steps', `fu-steps--${direction}`]" :style="[$fu.addStyle(customStyle)]">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Steps 步骤条
+	 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
+	 * @tutorial http://www.fusions.top/components/steps.html
+	 * @property {String} direction row-横向，column-竖向 (默认 'row')
+	 * @property {String | Number} current 设置当前处于第几步 (默认 0)
+	 * @property {String} activeColor 激活状态颜色 (默认 '#3c9cff')
+	 * @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>
+	 */
+	import { stepsProps } from './steps';
+	import { useSteps } from './composables';
+
+	defineOptions({ name: 'FuSteps' });
+
+	const props = defineProps(stepsProps);
+	
+	useSteps(props)
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+
+	.fu-steps {
+		@include components.flex;
+
+		&--column {
+			flex-direction: column;
+		}
+
+		&--row {
+			flex-direction: row;
+			flex: 1;
+		}
+	}
+</style>

package/components/steps-item/index.ts

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

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

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

package/components/steps-item/src/composables/steps-item-custom.ts

@@ -0,0 +1,81 @@
+import { Ref, computed, inject } from 'vue';
+import type { StepsItemProps } from '../steps-item';
+
+export const useStepsCustomStyle = (
+	props: StepsItemProps, 
+	index: Ref<number>, 
+	size: Ref<any>
+) => {
+	const steps = inject<any>('stepsContext', null);
+
+	const currentValue = computed(() => {
+		return Number(steps.current)
+	});
+	
+	const iconColor = computed(() => {
+		const isActive = index.value <= currentValue.value;
+		return isActive? steps.activeColor: steps.inactiveColor
+	});
+	
+	const lineStyle = computed(() => {
+		const isRow = steps.direction === 'row';
+		const { width, height } = size.value;
+		const isNextError = steps.children.value?.[index.value + 1]?.props.error;
+		
+		const bgColor = isNextError? '#f56c6c': index.value < currentValue.value? steps.activeColor: steps.inactiveColor;
+		
+		const positionStyle = isRow && width
+			? { width: uni.$fu.addUnit(width), left: uni.$fu.addUnit(width / 2) }
+			: !isRow && height? { height: uni.$fu.addUnit(size.value.height) }: {}
+
+		return { backgroundColor: bgColor, ...positionStyle };
+	});
+	
+	const statusClass = computed(() => {
+		if (currentValue.value == index.value) {
+			return props.error === true ? 'error' : 'process';
+		} else if (props.error) {
+			return 'error';
+		} else if (currentValue.value > index.value) {
+			return 'finish';
+		} else {
+			return 'wait';
+		}
+	});
+	
+	const statusColor = computed(() => {
+		const { activeColor, inactiveColor, dot } = steps;
+
+		switch (statusClass.value) {
+			case 'finish':
+				return activeColor;
+			case 'error':
+				return '#f56c6c';
+			case 'process':
+				return dot? activeColor: 'transparent';
+			default:
+				return inactiveColor;
+		}
+	});
+	
+	const contentStyle = computed(() => {
+		const isColumn = steps.direction === 'column';
+		const isDot = steps.dot;
+		
+		const marginLeft = isColumn? (isDot? '2px': '6px'): (isDot? '2px': '6px');
+		const marginTop = isColumn? (isDot? '0px': '6px'): (isDot? '2px': '6px');
+		
+		return {
+			marginLeft,
+			marginTop
+		};
+	});
+	
+	return {
+		iconColor,
+		lineStyle,
+		statusClass,
+		statusColor,
+		contentStyle
+	}
+}

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

@@ -0,0 +1,87 @@
+import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick, inject, computed } from 'vue';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const useStepsItem = () => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const stepsItemRef = ref();
+	const index = ref(null);
+	const childLength = ref(0);
+	const size = ref({ width: 0, height: 0 });
+	const steps = inject<any>('stepsContext', null);
+	
+	const iconName = computed(() => {
+		return index.value <= Number(steps.current)? (steps.activeIcon as string): (steps.inactiveIcon as string);
+	});
+	
+	const showLine = computed(() => {
+		return index.value + 1 < childLength.value;
+	});
+	
+	const init = () => {
+		// 初始化数据
+		if (!steps) {
+			return uni.$fu.error('必须要搭配fu-steps组件使用');
+		}
+		index.value = steps.children.value.findIndex(
+			(child : any) => child?.uid === instance?.uid
+		);
+		childLength.value = steps.children.value.length;
+	};
+	
+	// 获取组件的尺寸，用于设置横线的位置
+	const getStepsItemRect = async () => {
+		// #ifndef APP-NVUE
+		try {
+			const rect: any = await getRect('.fu-steps-item');
+			if (rect && rect.width > 0 && rect.height > 0) {
+				size.value = rect;
+			}
+		} catch (error) {
+			console.error('获取尺寸出错:', error);
+		}
+		// #endif
+		// #ifdef APP-NVUE
+		dom.getComponentRect(stepsItemRef.value, (res : any) => {
+			if (res && res.size) {
+				size.value = res.size;
+			}
+		});
+		// #endif
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		if (steps) {
+			steps.children.value.push(instance);
+			steps.updateChildData();
+		}
+		nextTick(() => {
+			getStepsItemRect();
+		});
+	});
+	
+	onUnmounted(() => {
+		// 卸载时移除实例
+		if (steps) {
+			const children = steps.children.value;
+			const index = children.findIndex((child : any) => child?.uid === instance?.uid);
+			if (index > -1) {
+				children.splice(index, 1);
+			}
+		}
+	});
+
+	return {
+		index,
+		size,
+		steps,
+		stepsItemRef,
+		iconName,
+		showLine,
+		init
+	}
+}

package/components/steps-item/src/steps-item.ts

@@ -0,0 +1,38 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const stepsItemProps = {
+	/**
+	 * @description 标题
+	 */
+	title: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 描述文本
+	 */
+	desc: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 图标大小
+	 * @default 18
+	 */
+	iconSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 当前步骤是否处于失败状态
+	 * @default false
+	 */
+	error: {
+		type: Boolean,
+		default: false
+	},
+	...componentProps
+};
+
+export type StepsItemProps = ExtractPropTypes<typeof stepsItemProps>;

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

@@ -0,0 +1,224 @@
+<template>
+	<view 
+		ref="stepsItemRef" 
+		class="fu-steps-item" 
+		:class="[`fu-steps-item--${steps.direction}`]"
+		:style="[$fu.addStyle(customStyle)]">
+		<view 
+			class="fu-steps-item__line" 
+			:class="[`fu-steps-item__line--${steps.direction}`]"
+			:style="[lineStyle]"
+			v-if="showLine">
+		</view>
+		<view :class="[
+            'fu-steps-item__wrapper',
+            `fu-steps-item__wrapper--${steps.direction}`,
+            steps.dot && `fu-steps-item__wrapper--${steps.direction}--dot`,
+         ]">
+			<slot name="icon">
+				<view 
+					class="fu-steps-item__wrapper__dot" 
+					:style="{backgroundColor: statusColor}"
+					v-if="steps.dot">
+				</view>
+				<view class="fu-steps-item__wrapper__icon" v-else-if="steps.activeIcon || steps.inactiveIcon">
+					<fu-icon 
+						:name="iconName" 
+						:size="iconSize" 
+						:color="iconColor">
+					</fu-icon>
+				</view>
+				<view 
+					class="fu-steps-item__wrapper__circle"
+					:style="{backgroundColor: statusClass === 'process'? steps.activeColor: 'transparent', borderColor: statusColor}"  
+					 v-else>
+					<text 
+						class="fu-steps-item__wrapper__circle__text" 
+						:style="{color: index == steps.current ? '#ffffff' : steps.inactiveColor}"
+						v-if="statusClass === 'process' || statusClass === 'wait'">
+						{{ index + 1 }}
+					</text>
+					<fu-icon 
+						:name="statusClass === 'error' ? 'cancel' : 'checkmark'"
+						:size="12"
+						:color="statusClass === 'error' ? statusColor: steps.activeColor" 
+						v-else>
+					</fu-icon>
+				</view>
+			</slot>
+		</view>
+		<view 
+			:class="['fu-steps-item__content', `fu-steps-item__content--${steps.direction}`]"
+			:style="[contentStyle]">
+			<slot name="title">
+				<fu-text 
+					:text="title" 
+					:type="steps.current == index ? 'main' : 'content'" 
+					lineHeight="20px"
+					:size="steps.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 lang="ts" setup>
+	/**
+	 * StepsItem 步骤项
+	 * @description steps组件的子组件
+	 * @property {String | Number} title 标题文字
+	 * @property {String | Number} desc 描述文本
+	 * @property {String | Number} iconSize 图标大小
+	 * @property {Boolean} error 当前步骤是否处于失败状态
+	 * 
+	 * @example <fu-steps-item title="运输中" desc="12:30"></fu-steps-item>
+	 */
+	import { stepsItemProps } from './steps-item';
+	import { useStepsItem, useStepsCustomStyle } from './composables';
+
+	defineOptions({ name: 'FuStepsItem', options: { virtualHost: true } });
+
+	const props = defineProps(stepsItemProps);
+	
+	const {
+		index,
+		size,
+		steps,
+		stepsItemRef,
+		iconName,
+		showLine,
+		init
+	} = useStepsItem();
+	
+	const {
+		iconColor,
+		lineStyle,
+		statusClass,
+		statusColor,
+		contentStyle
+	} = useStepsCustomStyle(props, index, size);
+
+	// 暴露方法
+	defineExpose({
+		init,
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	$fu-tips-color: #a7a8aa !default;
+	$fu-content-color: #77797e !default;
+
+	.fu-steps-item {
+		flex: 1;
+		@include components.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 components.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 components.flex(row);
+				align-items: center;
+				justify-content: center;
+				transition: background-color 0.3s;
+
+				&__text {
+					color: $fu-tips-color;
+					font-size: 11px;
+					@include components.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 components.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>

package/components/sticky/index.ts

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

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

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

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

@@ -0,0 +1,57 @@
+import { computed, Ref, type CSSProperties } from 'vue';
+import type { StickyProps } from '../sticky';
+
+export const useStickyCustomStyle = (
+	props: StickyProps, 
+	cssSticky: Ref<boolean>,
+	stickyTop: Ref<string | number>,
+	fixed: Ref<boolean>,
+	left: Ref<string | number>,
+	width: Ref<string | number>,
+	height: Ref<string | number>
+) => {
+	const stickyStyle = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {
+			backgroundColor: props.bgColor,
+			boxShadow: `0 -1px ${props.bgColor || '#ffffff'}`
+		};
+		if(!props.disabled) {
+			if (cssSticky.value) {
+				style.position = 'sticky';
+				style.zIndex = props.zIndex;
+				style.top = uni.$fu.addUnit(stickyTop.value);
+			} else {
+				style.height = fixed.value ? uni.$fu.addUnit(height.value) : 'auto';
+			}
+		} else {
+			// 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+			// #ifdef APP-NVUE
+			style.position = 'relative';
+			// #endif
+			// #ifndef APP-NVUE
+			style.position = 'static';
+			// #endif
+		}
+		
+		return uni.$fu.deepMerge(uni.$fu.addStyle(props.customStyle), style)
+	});
+	
+	// 吸顶内容的样式
+	const stickyContent = computed<CSSProperties>(() => {
+		const style: Record<string, any> = {};
+		if (!cssSticky.value) {
+			style.position = fixed.value? 'fixed' : 'static';
+			style.top = uni.$fu.addUnit(stickyTop.value);
+			style.left = uni.$fu.addUnit(left.value);
+			style.width = width.value == 'auto'? 'auto' : uni.$fu.addUnit(width.value);
+			style.zIndex = props.zIndex;
+		}
+		
+		return style
+	});
+	
+	return {
+		stickyStyle,
+		stickyContent
+	}
+}

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

@@ -0,0 +1,152 @@
+import { getCurrentInstance, ref, onUnmounted, nextTick, onMounted } from 'vue';
+import type { StickyProps } from '../sticky';
+import { useCommon } from '../../../../hooks';
+
+export const useSticky = (props: StickyProps) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const elId = uni.$fu.uuid();
+	const contentObserver = ref();
+	const cssSticky = ref(false); // 是否使用css的sticky实现
+	const stickyTop = ref(0); // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+	const left = ref(0); // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+	const width = ref('auto');
+	const height = ref('auto');
+	const fixed = ref(false); // js模式时，是否处于吸顶模式
+	
+	const init = () => {
+		getStickyTop()
+		// 判断使用的模式
+		checkSupportCssSticky()
+		// 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+		if (!cssSticky.value) {
+			!props.disabled && initObserveContent()
+		}
+	};
+	
+	const initObserveContent = () => {
+		// 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+		nextTick(() => {
+			getRect(`#${elId}`).then((res: any) => {
+				height.value = res.height;
+				left.value = res.left;
+				width.value = res.width;
+				observeContent()
+			})
+		})
+	};
+	
+	const observeContent = () => {
+		// 先断掉之前的观察
+		disconnectObserver('contentObserver')
+		const contentObserverInstance = uni.createIntersectionObserver({
+			// 检测的区间范围
+			thresholds: [0.95, 0.98, 1]
+		})
+		// 到屏幕顶部的高度时触发
+		contentObserverInstance.relativeToViewport({
+			top: -stickyTop.value
+		})
+		// 绑定观察的元素
+		contentObserverInstance.observe(`#${elId}`, res => {
+			setFixed(res.boundingClientRect.top)
+		})
+		contentObserver.value = contentObserverInstance;
+	};
+	
+	const setFixed = (top: number) => {
+		// 判断是否出于吸顶条件范围
+		const isFixed = top <= stickyTop.value;
+		fixed.value = isFixed;
+	};
+			
+	const disconnectObserver = (observerName: string) => {
+		// 断掉观察，释放资源
+		if(observerName === 'contentObserver' && contentObserver.value) {
+			contentObserver.value.disconnect();
+		}
+	};
+			
+	const getStickyTop = () => {
+		stickyTop.value = uni.$fu.getPx(props.offsetTop) + uni.$fu.getPx(props.customNavHeight);
+	};
+	
+	const checkSupportCssSticky = async () => {
+		// #ifdef H5
+		// H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
+		if (checkCssStickyForH5()) {
+			cssSticky.value = true;
+		}
+		// #endif
+
+		// 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
+		if (uni.$fu.os() === 'android' && Number(uni.$fu.sys().system) > 8) {
+			cssSticky.value = true;
+		}
+		// APP-Vue、微信平台和支付宝平台，通过computedStyle判断是否支持css sticky
+		// #ifdef APP-VUE || MP-WEIXIN || MP-ALIPAY || MP-QQ
+		cssSticky.value = await checkComputedStyle();
+		// #endif
+
+		// ios上，从ios6开始，都是支持css sticky的
+		if (uni.$fu.os() === 'ios') {
+			cssSticky.value = true;
+		}
+
+		// nvue，是支持css sticky的
+		// #ifdef APP-NVUE
+		cssSticky.value = true;
+		// #endif
+	};
+	
+	// 在APP、微信小程序和支付宝小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
+	const checkComputedStyle = (): Promise<boolean> => {
+		// 方法内进行判断，避免在其他平台生成无用代码
+		// #ifdef APP-VUE || MP-WEIXIN || MP-ALIPAY || MP-QQ
+		return new Promise(resolve => {
+			uni.createSelectorQuery().in(instance).select('.fu-sticky').fields({
+				computedStyle: ["position"]
+			}, () => {}).exec(e => {
+				resolve('sticky' === e[0].position)
+			})
+		})
+		// #endif
+	};
+	
+	// H5通过创建元素的形式嗅探是否支持css sticky
+	// 判断浏览器是否支持sticky属性
+	const checkCssStickyForH5 = () => {
+		// 方法内进行判断，避免在其他平台生成无用代码
+		// #ifdef H5
+		const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
+		const vendorListLength = vendorList.length;
+		const stickyElement = document.createElement('div');
+		for (let i = 0; i < vendorListLength; i++) {
+			stickyElement.style.position = vendorList[i] + 'sticky'
+			if (stickyElement.style.position !== '') {
+				return true
+			}
+		}
+		return false;
+		// #endif
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	onUnmounted(() => {
+		disconnectObserver('contentObserver')
+	});
+	
+	return {
+		elId,
+		cssSticky,
+		stickyTop,
+		left,
+		width,
+		height,
+		fixed,
+	}
+}