fusions-ui 1.2.7 → 1.2.8

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

@@ -0,0 +1,60 @@
+import { getCurrentInstance, inject, onMounted, ref } from 'vue';
+import { useCommon } from '../../../../hooks';
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+
+export const useVtabsItem = () => {
+	const instance = getCurrentInstance();
+	const { getRect } = useCommon();
+	// 记录item的离顶部的距离
+	const top = ref(0);
+	// 记录item的高度
+	const height = ref(0);
+	const vtabs = inject<any>('vtabsContext', null);
+	
+	const init = async () => {
+		if (!vtabs) {
+			return uni.$fu.error('fu-vtabs必须要搭配fu-vtabs-item组件使用')
+		}
+		if(!vtabs.chain) return;
+		await uni.$fu.sleep();
+		getItemRect().then((size: any) => {
+			// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
+			top.value = size.top;
+			height.value = size.height;
+			if(vtabs.children.value) {
+				vtabs.children.value.push({
+					top: top.value,
+					height: height.value
+				})
+			}
+		});
+	};
+	
+	const getItemRect = () => {
+		return new Promise(resolve => {
+			// #ifndef APP-NVUE
+			// 组件内部一般用getRect，对外的为getRect，二者功能一致
+			getRect('.fu-vtabs-item').then(size => {
+				resolve(size)
+			})
+			// #endif
+			// #ifdef APP-NVUE
+			 const ref = instance?.proxy?.$refs?.['fu-vtabs-item']
+			dom.getComponentRect(ref, (res: any) => {
+				resolve(res.size)
+			})
+			// #endif
+		})
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	return {
+		
+	}
+}

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

@@ -0,0 +1,10 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const vtabsItemProps = {
+	index: {
+		type: [Number,String],
+		default: 0
+	}
+};
+
+export type VtabsItemProps = ExtractPropTypes<typeof vtabsItemProps>;

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

@@ -0,0 +1,20 @@
+<template>
+	<view ref="fu-vtabs-item" :id="`content_${index}`" class="fu-vtabs-item">
+		<slot />
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { vtabsItemProps } from './vtabs-item';
+	import { useVtabsItem } from './composables';
+	
+	defineOptions({ name: 'FuVtabsItem', options: { virtualHost: true } });
+	
+	defineProps(vtabsItemProps);
+	
+	const {} = useVtabsItem()
+</script>
+
+<style>
+	
+</style>

package/components/waterfall/index.ts

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

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

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

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

@@ -0,0 +1,139 @@
+import { ref, watch, onMounted, type SetupContext, onBeforeMount, computed, nextTick } from 'vue';
+import type { WaterfallProps, WaterfallEmits } from '../waterfall';
+import { useCommon } from '../../../../hooks';
+
+export const useWaterfall = (props: WaterfallProps, $emit: SetupContext<WaterfallEmits>['emit']) => {
+	const { getRect } = useCommon();
+	const colunmList = ref([]);
+	// 临时列表
+	const tempList = ref([]);
+	
+	// 破坏value变量引用，否则数据会保持不变
+	const copyValue = computed(() => {
+		return uni.$fu.deepClone(props.modelValue)
+	});
+	
+	/**
+	 * 计算列
+	 * @param {Object} size 列数
+	 */
+	const calculateColumn = (size: number) => {
+		colunmList.value = [];
+		for (let i = 1; i <= size; i++) {
+			let obj: Record<string, any> = {};
+			obj.id = props.idPrefix + i;
+			obj.keyVal = `list${i}`;
+			obj.index = i;
+			obj[`list${i}`] = [];
+			colunmList.value.push(obj);
+		}
+	};
+	
+	// 获取最小值
+	const getMin = (arr: any[]) => {
+		const zeroHeightItems = arr.filter(item => item.height === 0);
+		if(zeroHeightItems.length > 0) {
+			return zeroHeightItems.reduce((min, item) => {
+				const topIndex = colunmList.value.findIndex(obj => obj.id === item.id);
+				const len = colunmList.value[topIndex][`list${arr.indexOf(item) + 1}`].length;
+				return len < min.len? { len, item }: min;
+			}, { len: Infinity }).item;
+		}
+		return arr.reduce((min, item) => item.height < min.height? item: min);
+	};
+	
+	// 拆分数据
+	const splitData = async () => {
+		let rectArr: any[] = [];
+		if (!tempList.value.length) return
+		for (let i = 1; i <= Number(props.columnCount); i++) {
+			const rect = await getRect(`#${props.idPrefix}${i}`);
+			const rectObj = rect && typeof rect === 'object'? rect : {};
+			rectArr.push({ ...rectObj, name: i });
+		}
+		const minCol = getMin(rectArr);
+		if(!minCol) return
+		const topIndex = colunmList.value.findIndex(obj => obj.id === minCol.id);
+		const item = tempList.value.shift();
+		if(!item) return
+		item.width = minCol.width;
+		colunmList.value[topIndex][`list${minCol.name}`].push(item);
+		$emit('changeList', { name: `list${minCol.name}`, value: item });
+		if(tempList.value.length) {
+			await uni.$fu.sleep(Math.max(props.addTime, 200));
+			splitData()
+		} else {
+			$emit('finish')
+		}
+	};
+	
+	// 滚动到底部触发事件
+	const scrolltolower = () => {
+		uni.$fu.sleep(30).then(() => {
+			$emit('scrolltolower')
+		})
+	};
+	
+	// 清空数据列表
+	const clear = async () => {
+		// 清除数据
+		for (let i = 0; i < Number(props.columnCount); i++) {
+			colunmList.value[i][`list${i+1}`] = [];
+		}
+		$emit('input', [])
+		$emit('update:modelValue', [])
+		tempList.value = []
+		await uni.$fu.sleep(300);
+		$emit('clear');
+	};
+	
+	// 清除指定的某一条数据，根据id来实现
+	const remove = (id: string | number) => {
+		let index = -1
+		// 删除组件数据
+		for (let i = 1; i <= Number(props.columnCount); i++) {
+			index = colunmList.value[i - 1][`list${i}`].findIndex((item: any) => item[props.idKey] == id)
+			if (index != -1) {
+				colunmList.value[i - 1][`list${i}`].splice(index, 1)
+			}
+		}
+		// 同时删除父组件对应的数据
+		index = props.modelValue.findIndex(item => item[props.idKey] == id)
+		if (index != -1) $emit('update:modelValue', props.modelValue.splice(index, 1))
+		$emit('remove', id);
+	};
+	
+	// 生命周期
+	onMounted(() => {
+	    // #ifndef APP-NVUE
+	    nextTick(() => {
+			tempList.value = uni.$fu.deepClone(copyValue.value);
+			splitData()
+		})
+	    // #endif
+	});
+	
+	onBeforeMount(() => {
+		calculateColumn(Number(props.columnCount));
+	});
+	
+	// watch监听事件
+	watch(() => copyValue.value, (newVal, oldVal) => {
+		// #ifndef APP-NVUE
+		if (newVal && newVal.length > 0) {
+			// 取出数组发生变化的部分
+			let startIndex = Array.isArray(oldVal) && oldVal.length > 0 ? oldVal.length : 0;
+			// 拼接原有数据
+			tempList.value = tempList.value.concat(uni.$fu.deepClone(newVal.slice(startIndex)));
+			splitData()
+		}
+		// #endif
+	}, { deep: true });
+	
+	return {
+		colunmList,
+		scrolltolower,
+		clear,
+		remove
+	}
+}

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

@@ -0,0 +1,18 @@
+import { computed } from 'vue';
+import type { WaterfallProps } from '../waterfall';
+
+export const useWaterfallCustomStyle = (props: WaterfallProps) => {
+	const nvueWaterfallStyle = computed(() => {
+		const style: Record<string, any> = {};
+		if (props.width != 0) style.width = uni.$fu.addUnit(props.width)
+		if (props.height != 0) style.height = uni.$fu.addUnit(props.height)
+		// 如果没有定义列表高度，则默认使用屏幕高度
+		if (!style.width) style.width = uni.$fu.addUnit(uni.$fu.sys().windowWidth, 'px')
+		if (!style.height) style.height = uni.$fu.addUnit(uni.$fu.sys().windowHeight, 'px')
+		return uni.$fu.deepMerge(style, uni.$fu.addStyle(props.customStyle))
+	});
+	
+	return {
+		nvueWaterfallStyle
+	}
+}

package/components/waterfall/src/waterfall.ts

@@ -0,0 +1,114 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const waterfallProps = {
+	/**
+	 * @description 瀑布流数据
+	 */
+	modelValue: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 数据的id值，根据id值对数据执行删除操作, 如数据为：{id: 1, name: 'fusions-ui'}，那么该值设置为id
+	 * @default 'id'
+	 */
+	idKey: {
+		type: String,
+		default: 'id'
+	},
+	/**
+	 * @description 前置标识
+	 * @default 'fu-waterfall-'
+	 */
+	idPrefix: {
+		type: String,
+		default: 'fu-waterfall-'
+	},
+	/**
+	 * @description 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms
+	 * @default 200
+	 */
+	addTime: {
+		type: Number,
+		default: 200
+	},
+	/**
+	 * @description 瀑布流的列数
+	 * @default 2
+	 */
+	columnCount: {
+		type: [String, Number],
+		default: 2
+	},
+	/**
+	 * @description 列与列的间隙
+	 * @default 15
+	 */
+	columnGap: {
+		type: [String, Number],
+		default: 15
+	},
+	/**
+	 * @description 是否显示滚动条，仅nvue生效
+	 * @default false
+	 */
+	showScrollbar: {
+		type: [Boolean],
+		default: false
+	},
+	/**
+	 * @description 列宽，nvue生效
+	 * @default 'auto'
+	 */
+	columnWidth: {
+		type: [String, Number],
+		default: 'auto'
+	},
+	/**
+	 * @description 瀑布流的宽度，nvue生效
+	 */
+	width: {
+		type: [String, Number],
+		default: ''
+	},
+	/**
+	 * @description 瀑布流的高度，nvue生效
+	 */
+	height: {
+		type: [String, Number],
+		default: ''
+	},
+	...componentProps
+};
+
+export const waterfallEmits = {
+	'update:modelValue': (_e: any) => true,
+	/**
+	 * @description 处理数据时触发（仅vue生效）
+	 */
+	changeList: (_e: any) => true,
+	/**
+	 * @description 瀑布流加载完成触发事件（vue生效）
+	 */
+	finish: () => true,
+	/**
+	 * @description 输入事件
+	 */
+	input: (_e: any) => true,
+	/**
+	 * @description 清空数据列表触发事件（vue生效）
+	 */
+	clear: () => true,
+	/**
+	 * @description 删除列表中某条数据触发事件（vue生效）
+	 */
+	remove: (_e: any) => true,
+	/**
+	 * @description 滚动到底部触发事件（nvue生效）
+	 */
+	scrolltolower: () => true
+}
+
+export type WaterfallProps = ExtractPropTypes<typeof waterfallProps>;
+export type WaterfallEmits = typeof waterfallEmits;

package/components/waterfall/src/waterfall.vue

@@ -0,0 +1,104 @@
+<template>
+	<view class="fu-waterfall" 
+		<!-- #ifndef APP-NVUE -->
+		:style="{margin: columnGap + 'px'}"
+		<!-- #endif -->>
+		<!-- #ifndef APP-NVUE -->
+		<block v-for="(item, index) in colunmList" :key="index">
+			<view 
+				:id="item.id" 
+				class="fu-waterfall__column" 
+				:style="{marginRight: columnGap + 'px'}">
+				<slot :name="item.keyVal"></slot>
+			</view>
+		</block>
+		<!-- #endif -->
+		<!-- #ifdef APP-NVUE -->
+		<view class="waterfall-warapper">
+			<waterfall 
+				:style="[nvueWaterfallStyle]"
+				:column-count="columnCount" 
+				:show-scrollbar="false" 
+				column-width="auto" 
+				:column-gap="columnGap" 
+				:left-gap="columnGap" 
+				:right-gap="columnGap" 
+				:always-scrollable-vertical="true" 
+				@loadmore="scrolltolower">
+				<slot></slot>
+			</waterfall>
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * @description Waterfall 瀑布流
+	 * @tutorial http://www.fusions.top/components/waterfall.html
+	 * @property {Array} modelValue 瀑布流数组数据，仅vue生效 （默认 []）
+	 * @property {String} idKey 数据的id值，根据id值对数据执行删除操作
+	 * @property {String} idPrefix 前置标识（默认 'fu-waterfall-'）
+	 * @property {Number} addTime 每次插入数据的事件间隔，间隔越长能保证两列高度相近，但是用户体验不好，单位ms（默认 200）
+	 * @property {String | Number} columnCount 瀑布流的列数（默认2）
+	 * @property {String | Number} columnGap 列与列的间（默认 15）
+	 * @property {Boolean} showScrollbar = [true|false] 是否显示滚动条，仅nvue生效（默认 false）
+	 * @property {String | Number} columnWidth 列宽，单位px，仅nvue生效（默认 'auto'）
+	 * @property {String | Number} width 瀑布流的宽度，仅nvue生效 
+	 * @property {String | Number} height 瀑布流的高度，仅nvue生效
+	 * 
+	 * @event {Function} changeList 处理数据时触发，为了兼容某些端不支持插槽回传参数的情况（仅vue生效）例：列表数据，columnCount=2时、第一次返回{list1:{...}}，第二次返回{list2:{...}}...；返回后需要手动追加对应的列数据
+	 * @event {Function} finish 瀑布流加载完成触发事件（vue生效）
+	 * @event {Function} clear 清空数据列表触发事件（vue生效）
+	 * @event {Function} remove 删除列表中某条数据触发事件（vue生效）
+	 * @event {Function} scrolltolower 滚动到底部触发事件（nvue生效）
+	 * @example <fu-waterfall v-model="list"></fu-waterfall>
+	 */
+	import { waterfallEmits, waterfallProps } from './waterfall';
+	import { useWaterfall, useWaterfallCustomStyle } from './composables';
+	
+	defineOptions({ name: 'FuWaterfall', options: { virtualHost: true } });
+	
+	const props = defineProps(waterfallProps);
+	const $emit = defineEmits(waterfallEmits);
+	
+	const {
+		colunmList,
+		scrolltolower,
+		clear,
+		remove
+	} = useWaterfall(props, $emit);
+	
+	const {
+		nvueWaterfallStyle
+	} = useWaterfallCustomStyle(props);
+	
+	// 暴露方法
+	defineExpose({
+		clear,
+		remove
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	/* 瀑布流最外层 */
+	.fu-waterfall {
+		@include components.flex(row);
+		align-items: flex-start;
+		
+		&__column {
+			flex-direction: column;
+			flex: 1;
+			// #ifndef APP-NVUE
+			height: auto;
+			overflow: hidden;
+			// #endif
+		}
+	}
+	
+	.fu-waterfall .fu-waterfall__column:last-child {
+		margin-right: 0px !important;
+	}
+</style>

package/{libs/config/config.js → config/config.ts}

@@ -1,9 +1,9 @@
-import packageInfo from '../../package.json';
+import { version } from '../package.json';
 
-// 此版本发布于2026-10-10
-const version = packageInfo.version || '1.0.0';
-
-// 开发环境提示，生产环境不会提示
+/**
+ * 此版本发布于2026-10-10
+ * @description 开发环境提示，生产环境不会提示
+ */
 if (process.env.NODE_ENV === 'development') {
 	const t = `
 	            _ 
@@ -15,11 +15,17 @@ if (process.env.NODE_ENV === 'development') {
 	console.log("%c ".concat(t), "color: #2979ff;");
 }
 
-const config = {
+export interface Config {
+	v: string;
+	version: string;
+	unit: string;
+}
+
+const config: Config = {
 	v: version,
 	version,
 	// 默认单位,可以通过配置为rpx，在用于传入组件大小参数为数值时，就默认为rpx
 	unit: 'px'
-};
+}
 
 export default config

package/constants/images.ts

@@ -0,0 +1,18 @@
+export const componentImages = [
+  'scaleToFill',
+  'aspectFit',
+  'aspectFill',
+  'widthFix',
+  'heightFix',
+  'top',
+  'bottom',
+  'center',
+  'left',
+  'right',
+  'top left',
+  'top right',
+  'bottom left',
+  'bottom right'
+] as const
+
+export type ComponentImage = (typeof componentImages)[number]

package/constants/index.ts

@@ -0,0 +1,6 @@
+export * from './types'
+export * from './images'
+export * from './open-types'
+export * from './shapes'
+export * from './z-index'
+export * from './props'

package/constants/open-types.ts

@@ -0,0 +1,33 @@
+export const componentOpenTypes = [
+	'feedback',
+	'share',
+	'getUserInfo',
+	'contact',
+	'getPhoneNumber',
+	'launchApp',
+	'openSetting',
+	'chooseAvatar',
+	'agreePrivacyAuthorization',
+	'uploadDouyinVideo',
+	'im',
+	'getAuthorize',
+	'lifestyle',
+	'contactShare',
+	'openGroupProfile',
+	'openGuildProfile',
+	'openPublicProfile',
+	'shareMessageToFriend',
+	'addFriend',
+	'addColorSign',
+	'addGroupApp',
+	'addToFavorites',
+	'chooseAddress',
+	'chooseInvoiceTitle',
+	'login',
+	'subscribe',
+	'favorite',
+	'watchLater',
+	'openProfile'
+] as const;
+
+export type ComponentOpenType = (typeof componentOpenTypes)[number]

package/constants/props.ts

@@ -0,0 +1,18 @@
+import type { PropType } from 'vue';
+
+export const componentProps = {
+	/**
+	 * @description 定义需要用到的外部样式
+	 */
+	customStyle: {
+		type: [String,Object] as PropType<Record<string, any> | string>,
+		default: () => ({})
+	},
+	/**
+	 * @description 定义需要用到的外部类
+	 */
+	customClass: {
+		type: String,
+		default: ''
+	}
+};

package/constants/shapes.ts

@@ -0,0 +1,6 @@
+export const componentShapes = [
+	'square',
+	'circle'
+] as const;
+
+export type ComponentShape = (typeof componentShapes)[number]

package/constants/types.ts

@@ -0,0 +1,10 @@
+export const componentTypes = [
+  '',
+  'primary',
+  'success',
+  'warning',
+  'info',
+  'error',
+] as const
+
+export type ComponentType = (typeof componentTypes)[number]

package/constants/z-index.ts

@@ -0,0 +1,27 @@
+export const ZIndex: Record<string, number | (() => number)> = {
+	/**
+	 * popup 弹出层
+	 */
+	popup: () => {
+		let value: number;
+		// #ifdef H5
+		value = 997
+		// #endif
+		// #ifndef H5
+		value = 10065
+		// #endif
+		return value
+	},
+	/**
+	 * modal 询问框
+	 */
+	modal: 10066,
+	/**
+	 * 吸顶
+	 */
+	sticky: 10050,
+	/**
+	 * 键盘
+	 */
+	keyboard: 10075
+}