fusions-ui 1.2.7 → 1.2.8

package/components/index-anchor/src/composables/use-index-anchor.ts

@@ -0,0 +1,44 @@
+import { getCurrentInstance, inject, nextTick, onMounted, reactive } from 'vue';
+import type { IndexAnchorProps } from '../index-anchor';
+
+export const useIndexAnchor = (props: IndexAnchorProps) => {
+	const instance = getCurrentInstance();
+	const parentData = reactive({
+		sticky: true
+	});
+	const indexList = inject<any>('indexListContext', null);
+	const indexListItem = inject<any>('indexListItemContext', null);
+	
+	const init = () => {
+		// 此处会活动父组件实例，并赋值给实例的parent属性
+		if (!indexList) { 
+			return uni.$fu.error('fu-index-anchor必须要搭配fu-index-list组件使用')
+		}
+		parentData.sticky = indexList.sticky;
+		// 将当前实例放入到fu-index-list中
+		indexList.anchors.value.push({
+			text: props.text,
+			height: 0,
+			instance
+		})
+		// #ifndef APP-NVUE
+		// 只有在非nvue下，fu-index-anchor才是嵌套在fu-index-item中的
+		if (!indexListItem) {
+			return uni.$fu.error('fu-index-anchor必须要搭配fu-index-item组件使用')
+		}
+		// 设置fu-index-item的id为anchor的text标识符，因为非nvue下滚动列表需要依赖scroll-view滚动到元素的特性
+		indexListItem.id.value = String(props.text).charCodeAt(0);
+		// #endif
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		nextTick(() => {
+			init()
+		})
+	});
+	
+	return {
+		parentData
+	}
+}

package/components/index-anchor/src/index-anchor.ts

@@ -0,0 +1,45 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const indexAnchorProps = {
+	/**
+	 * @description 列表锚点文本内容
+	 */
+	text: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 列表锚点文字颜色
+	 * @default '#606266'
+	 */
+	color: {
+		type: String,
+		default: '#606266'
+	},
+	/**
+	 * @description 列表锚点文字大小
+	 * @default 14
+	 */
+	size: {
+		type: [String, Number],
+		default: 14
+	},
+	/**
+	 * @description 列表锚点背景颜色
+	 * @default '#f6f6f6'
+	 */
+	bgColor: {
+		type: String,
+		default: '#f6f6f6'
+	},
+	/**
+	 * @description 列表锚点高度
+	 * @default 32
+	 */
+	height: {
+		type: [String, Number],
+		default: 32
+	}
+};
+
+export type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>;

package/components/index-anchor/src/index-anchor.vue

@@ -0,0 +1,60 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<header>
+	<!-- #endif -->
+		<view 
+			:ref="`fu-index-anchor-${text}`" 
+			:class="['fu-index-anchor', {'fu-index-anchor-sticky': parentData.sticky}]"
+			:style="{
+				height: $fu.addUnit(height),
+				backgroundColor: bgColor
+			}">
+			<text class="fu-index-anchor__text" :style="{ fontSize: $fu.addUnit(size), color: color }">{{ text }}</text>
+		</view>
+	<!-- #ifdef APP-NVUE -->
+	</header>
+	<!-- #endif -->
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * IndexAnchor 列表锚点
+	 * @description 此组件需配合fu-index-list组件一起使用
+	 * @property {String | Number} text 列表锚点文本内容
+	 * @property {String} color 列表锚点文字颜色 (默认 '#606266')
+	 * @property {String | Number} size 列表锚点文字大小 (默认 14)
+	 * @property {String} bgColor 列表锚点背景颜色 (默认 '#f6f6f6')
+	 * @property {String | Number} height 列表锚点高度 (默认 32)
+	 * 
+	 * @example <fu-index-anchor :text="indexList[index]"></fu-index-anchor>
+	 */
+	import { indexAnchorProps } from './index-anchor';
+	import { useIndexAnchor } from './composables';
+	
+	defineOptions({ name: 'FuIndexAnchor', options: { virtualHost: true } });
+	
+	const props = defineProps(indexAnchorProps);
+	
+	const {
+		parentData
+	} = useIndexAnchor(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+
+	.fu-index-anchor {
+		@include components.flex;
+		align-items: center;
+		padding-left: 15px;
+		z-index: 1;
+		&-sticky {
+			position: sticky;
+			top: 0;
+		}
+		&__text {
+			@include components.flex;
+			align-items: center;
+		}
+	}
+</style>

package/components/index-item/index.ts

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

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

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

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

@@ -0,0 +1,75 @@
+import { getCurrentInstance, ref, inject, onMounted, provide, nextTick } from 'vue';
+import type { IndexItemProps } from '../index-item';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+export const useIndexItem = (props: IndexItemProps) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	const top = ref(0);
+	const height = ref(0);
+	const id = ref(props.index || uni.$fu.uuid());
+	const indexList = inject<any>('indexListContext', null);
+
+	const init = () => {
+		if (!indexList) {
+			return uni.$fu.error('fu-index-item必须要搭配fu-index-list组件使用')
+		}
+		
+		const childData = {
+			top,
+			height,
+			id: id.value,
+			instance: instance
+		};
+		
+		const exists = indexList.children.value?.some((item: any) => item.id === id.value);
+		if(!exists) {
+			indexList.children.value.push(childData);
+		}
+		
+		uni.$fu.sleep().then(() =>{
+			getIndexItemRect().then((size: any) => {
+				// 由于对象的引用特性，此处会同时生效到父组件的children数组中，供父组件判断读取
+				top.value = Math.ceil(size.top);
+				height.value = Math.ceil(size.height);
+			})
+		})
+	};
+
+	const getIndexItemRect = () => {
+		return new Promise(resolve => {
+			// #ifndef APP-NVUE
+			getRect('.fu-index-item').then(size => {
+				resolve(size)
+			})
+			// #endif
+
+			// #ifdef APP-NVUE
+			const ref = instance?.proxy?.$refs?.['fu-index-item'];
+			dom.getComponentRect(ref, (res : any) => {
+				resolve(res.size)
+			})
+			// #endif
+		})
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		nextTick(() => {
+			init()
+		})
+	});
+	
+	// 提供上下文给子组件
+	provide('indexListItemContext', {
+		id
+	});
+
+	return {
+		id
+	}
+}

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

@@ -0,0 +1,13 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const indexItemProps = {
+	/**
+	 * @description 索引标识符，用于生成唯一的ID
+	 */
+	index: {
+		type: [Number, String],
+		default: 0
+	}
+};
+
+export type IndexItemProps = ExtractPropTypes<typeof indexItemProps>;

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

@@ -0,0 +1,32 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell ref="fu-index-item">
+	<!-- #endif -->
+		<view :id="`fu-index-item-${id}`" class="fu-index-item" :class="[`fu-index-item-${id}`]">
+			<slot />
+		</view>
+	<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * IndexItem 组件
+	 * @description 此组件需配合fu-index-list组件一起使用
+	 */
+	import { indexItemProps } from './index-item';
+	import { useIndexItem } from './composables';
+	
+	defineOptions({ name: 'FuIndexItem', options: { virtualHost: true } })
+	
+	const props = defineProps(indexItemProps);
+	
+	const {
+		id
+	} = useIndexItem(props)
+</script>
+
+<style>
+
+</style>

package/components/index-list/index.ts

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

package/components/index-list/src/composables/index.ts

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

package/components/index-list/src/composables/use-index-list.ts

@@ -0,0 +1,297 @@
+import { getCurrentInstance, computed, onMounted, ref, type SetupContext, nextTick, watch, provide } from 'vue';
+import type { IndexListProps, IndexListEmits } from '../index-list';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+const dom = uni.requireNativePlugin('dom')
+// #endif
+
+const generateIndexList = () => {
+	const indexList = [];
+	const charCodeOfA = 'A'.charCodeAt(0);
+	for (let i = 0; i < 26; i++) {
+		indexList.push(String.fromCharCode(charCodeOfA + i));
+	}
+	return indexList;
+}
+
+export const useIndexList = (props: IndexListProps, $emit: SetupContext<IndexListEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	// 当前正在被选中的字母索引
+	const activeIndex = ref(-1);
+	// 索引字母的信息
+	const letterInfo = ref({
+		height: 0,
+		itemHeight: 0,
+		top: 0
+	});
+	// 设置字母指示器的高度，后面为了让指示器跟随字母，并将尖角部分指向字母的中部，需要依赖此值
+	const indicatorHeight = ref(50);
+	// 当前是否正在被触摸状态
+	const touching = ref(false);
+	// 滚动条顶部top值
+	const scrollTop = ref(0);
+	// scroll-view的高度
+	const scrollViewHeight = ref(0);
+	// 系统信息
+	const sys = ref(uni.$fu.sys());
+	const scrolling = ref(false);
+	const scrollIntoView = ref('');
+	const hasHeight = ref(0);
+	const timer = ref<any>(0);
+	const disTap = ref(false);
+	const children = ref<any[]>([])
+	const anchors = ref<any[]>([])
+	
+	// 如果有传入外部的indexList锚点数组则使用，否则使用内部生成A-Z字母
+	const indexLetterList = computed(() => {
+		return props.indexList.length? props.indexList: generateIndexList()
+	});
+	
+	// 字母放大指示器的top值，为了让其指向当前激活的字母
+	const indicatorTop = computed(() => {
+		const { top, itemHeight } = letterInfo.value;
+		return Math.floor(top + itemHeight * activeIndex.value + itemHeight / 2 - indicatorHeight.value / 2) - 8
+	});
+	
+	// 初始化
+	const init = () => {
+		// 设置列表的高度为整个屏幕的高度
+		//减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
+		//解决当fu-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
+		scrollViewHeight.value = sys.value.windowHeight - uni.$fu.getPx(props.customNavHeight)
+	};
+	
+	// 获取索引列表的尺寸以及单个字符的尺寸信息
+	const getIndexListLetterRect = () => {
+		return new Promise(resolve => {
+			// 延时一定时间，以获取dom尺寸
+			// #ifndef APP-NVUE
+			getRect('.fu-index-list__letter').then(size => {
+				resolve(size)
+			})
+			// #endif
+
+			// #ifdef APP-NVUE
+			const ref = instance?.proxy?.$refs?.['fu-index-list__letter']
+			dom.getComponentRect(ref, (res: any) => {
+				resolve(res.size)
+			})
+			// #endif
+		})
+	};
+	
+	// 设置indexList索引的尺寸信息
+	const setIndexListLetterInfo = async () => {
+		const size: any = await getIndexListLetterRect();
+		const { height } = size;
+		const windowHeight = sys.value.windowHeight;
+		let customNavHeight = 0;
+		// 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
+		if (props.customNavHeight == 0) {
+			// #ifdef H5
+			customNavHeight = sys.value.windowTop;
+			// #endif
+			// #ifndef H5
+			// 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
+			customNavHeight = 0;
+			// #endif
+		} else {
+			customNavHeight = uni.$fu.getPx(props.customNavHeight);
+		}
+		letterInfo.value = {
+			height,
+			// 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
+			top: (windowHeight - height) / 2 + customNavHeight / 2,
+			itemHeight: Math.floor(height / indexLetterList.value.length)
+		};
+	};
+	
+	// 获取当前被触摸的索引字母
+	const getIndexListLetter = (pageY: number): number => {
+		const { top, height, itemHeight } = letterInfo.value;
+		// 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
+		// #ifdef H5
+		pageY += sys.value.windowTop;
+		// #endif
+		// #ifdef APP-NVUE
+		pageY += top;
+		// #endif
+		// 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
+		if (pageY < top) {
+			return 0
+		} else if (pageY >= top + height) {
+			// 如果超出了，取最后一个字母
+			return indexLetterList.value.length - 1
+		} else {
+			// 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
+			return Math.floor((pageY - top) / itemHeight);
+		}
+	};
+	
+	// 设置各项由触摸而导致变化的值
+	const setValueForTouch = (currentIndex: number) => {
+		// 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
+		if (currentIndex === activeIndex.value) return
+		activeIndex.value = currentIndex;
+		// #ifndef APP-NVUE || MP-WEIXIN || MP-QQ
+		// 在非nvue中，由于anchor和item都在fu-index-item中，所以需要对index-item进行偏移
+		scrollIntoView.value = `fu-index-item-${indexLetterList.value[currentIndex].charCodeAt(0)}`;
+		// #endif
+		// #ifdef MP-WEIXIN || MP-QQ
+		// 微信小程序、QQ小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
+		scrollTop.value = children.value[currentIndex].top;
+		// #endif
+		// #ifdef APP-NVUE
+		// 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
+		const anchor = `fu-index-anchor-${indexLetterList.value[currentIndex]}`;
+		dom.scrollToElement(anchors.value[currentIndex].$refs[anchor], {
+			offset: 0,
+			animated: false
+		})
+		// #endif
+	};
+	
+	// 索引列表被触摸
+	const touchStart = (e: any) => {
+		// 获取触摸点信息
+		const touchStart = e.changedTouches[0];
+		if (!touchStart || disTap.value) return
+		touching.value = true;
+		const { pageY } = touchStart;
+		// 根据当前触摸点的坐标，获取当前触摸的为第几个字母
+		const currentIndex = getIndexListLetter(pageY);
+		setValueForTouch(currentIndex)
+	};
+	
+	// 索引字母列表被触摸滑动中
+	const touchMove = (e: any) => {
+		// 获取触摸点信息
+		let touchMove = e.changedTouches[0];
+		if (!touchMove || disTap.value) return
+
+		// 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
+		if (!touching.value) {
+			touching.value = true;
+		}
+		const { pageY } = touchMove;
+		const currentIndex = getIndexListLetter(pageY);
+		setValueForTouch(currentIndex)
+	};
+	
+	// 触摸结束
+	const touchEnd = () => {
+		// 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换fu-transition的show带来的影响
+		uni.$fu.sleep(300).then(() => {
+			touching.value = false;
+		})
+		$emit('select', activeIndex.value);
+	};
+	
+	const getHeaderRect = () => {
+		// 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
+		return new Promise(resolve => {
+			dom.getComponentRect(instance?.refs?.header, (res: any) => {
+				resolve(res.size)
+			})
+		})
+	};
+	
+	// scroll-view的滚动事件
+	const scrollHandler = async (e: any) => {
+		if (touching.value || scrolling.value) return
+		
+		// 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
+		scrolling.value = true;
+		disTap.value = true;
+		clearTimeout(timer.value);
+		timer.value = setTimeout(() => {
+			disTap.value = false;
+		}, 200) as unknown as number
+		uni.$fu.sleep(30).then(() => {
+			scrolling.value = false;
+		})
+		let scrollTop = 0
+		const len = children.value.length;
+		let childrenData = children.value;
+		const anchorsData = anchors.value;
+		const customNavHeight = uni.$fu.getPx(props.customNavHeight);
+		
+		// #ifdef APP-NVUE
+		// nvue下获取的滚动条偏移为负数，需要转为正数
+		scrollTop = Math.abs(e.contentOffset.y)
+		// 获取header slot的尺寸信息
+		const header = await getHeaderRect();
+		// item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
+		let top: number = (header as any).height || 0;
+		// 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
+		childrenData = children.value.map((item, index) => {
+			if (item.height > 0) hasHeight.value = item.height;
+			item.height = item.height > 0? item.height: hasHeight.value;
+			const child = { height: item.height, top };
+			// 进行累加，给下一个item提供计算依据
+			top += item.height + anchorsData[index].height
+			return child
+		})
+		// #endif
+		// #ifndef APP-NVUE
+		// 非nvue通过detail获取滚动条位移
+		scrollTop = e.detail.scrollTop;
+		// #endif
+		for (let i = 0; i < len; i++) {
+			const item = childrenData[i], nextItem = childrenData[i + 1];
+			// 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
+			if (scrollTop + customNavHeight <= childrenData[0].top || scrollTop >= childrenData[len - 1].top + childrenData[len - 1].height) {
+				activeIndex.value = -1;
+				break
+			} else if (!nextItem) {
+				// 当不存在下一个item时，意味着历遍到了最后一个
+				activeIndex.value = len - 1;
+				break
+			} else if (scrollTop + customNavHeight > item.top && scrollTop + customNavHeight < nextItem.top) {
+				activeIndex.value = i;
+				break
+			}
+		}
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+		nextTick(() => {
+			setIndexListLetterInfo()
+		})
+	});
+	
+	// 监听事件
+	watch(() => indexLetterList.value, () => {
+		uni.$fu.sleep().then(() => {
+			setIndexListLetterInfo()
+		})
+	}, { immediate: true });
+	
+	// 提供上下文给子组件
+	provide('indexListContext', {
+		children,
+		anchors,
+		sticky: props.sticky,
+		customNavHeight: props.customNavHeight
+	});
+	
+	return {
+		activeIndex,
+		letterInfo,
+		touching,
+		scrollTop,
+		scrollViewHeight,
+		scrollIntoView,
+		indicatorHeight,
+		indexLetterList,
+		indicatorTop,
+		touchStart,
+		touchMove,
+		touchEnd,
+		scrollHandler
+	}
+}

package/components/index-list/src/index-list.ts

@@ -0,0 +1,52 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const indexListProps = {
+	/**
+	 * @description 右边锚点非激活的颜色
+	 * @default '#606266'
+	 */
+	inactiveColor: {
+		type: String,
+		default: '#606266'
+	},
+	/**
+	 * @description 右边锚点激活的颜色
+	 * @default '#2979ff'
+	 */
+	activeColor: {
+		type: String,
+		default: '#2979ff'
+	},
+	/**
+	 * @description 索引字符列表，数组形式
+	 */
+	indexList: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否开启锚点自动吸顶
+	 * @default true
+	 */
+	sticky: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 自定义导航栏的高度
+	 */
+	customNavHeight: {
+		type: [String, Number],
+		default: 0
+	}
+};
+
+export const indexListEmits = {
+	/**
+	 * @description 选中右边索引字符时触发
+	 */
+	select: (_e: any) => true
+};
+
+export type IndexListProps = ExtractPropTypes<typeof indexListProps>;
+export type IndexListEmits = typeof indexListEmits;