fusions-ui 1.2.7 → 1.2.9

package/components/fu-waterfall/fu-waterfall.vue

@@ -1,238 +0,0 @@
-<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="{ 'margin-right': 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>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js'
-	/**
-	 * @description Waterfall 瀑布流
-	 * @property {Array} value/modelValue 瀑布流数组数据，仅vue生效 （默认 [] ）
-	 * @property {String} idKey 数据的id值，根据id值对数据执行删除操作
-	 * @property {String} idPrefix 前置标识
-	 * @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>
-	 */
-	export default {
-		name: 'FuWaterfall',
-		mixins: [mpMixin, mixin, props],
-		emits: ['changeList', 'finish', 'update:modelValue', 'input', 'clear', 'remove', 'scrolltolower'],
-		data() {
-			return {
-				colunmList: [],
-				// 临时列表
-				tempList: []
-			};
-		},
-		created() {
-			this.calculateColumn(this.columnCount)
-		},
-		computed: {
-			// 破坏value变量引用，否则数据会保持不变
-			copyValue() {
-				// #ifdef VUE2
-				return this.$fu.deepClone(this.value)
-				// #endif
-				// #ifdef VUE3
-				return this.$fu.deepClone(this.modelValue)
-				// #endif
-			},
-			nvueWaterfallStyle() {
-				const style = {};
-				if (this.width != 0) style.width = this.$fu.addUnit(this.width)
-				if (this.height != 0) style.height = this.$fu.addUnit(this.height)
-				// 如果没有定义列表高度，则默认使用屏幕高度
-				if (!style.width) style.width = this.$fu.addUnit(this.$fu.sys().windowWidth, 'px')
-				if (!style.height) style.height = this.$fu.addUnit(this.$fu.sys().windowHeight, 'px')
-				return this.$fu.deepMerge(style, this.$fu.addStyle(this.customStyle))
-			}
-		},
-		mounted() {
-			// #ifndef APP-NVUE
-			this.tempList = this.$fu.deepClone(this.copyValue)
-			this.splitData()
-			// #endif
-		},
-		methods: {
-			// 滚动到底部触发事件
-			scrolltolower(e) {
-				this.$fu.sleep(30).then(() => {
-					this.$emit('scrolltolower')
-				})
-			},
-			
-			/**
-			 * 计算列
-			 * @param {Object} size 列数
-			 * @param {Object} isCreate 是否初始化创建(created生命周期)
-			 */
-			calculateColumn: function(size) {
-				this.colunmList = [];
-				for (let i = 1; i <= size; i++) {
-					let obj = {};
-					obj.id = this.idPrefix + i;
-					obj.keyVal = `list${i}`;
-					obj.index = i;
-					obj[`list${i}`] = [];
-					this.colunmList.push(obj);
-				}
-			},
-			
-			// 拆分数据
-			async splitData() {
-				let rectArr = [];
-				let emitList = {};
-				if (!this.tempList.length) return
-				for (let i = 1; i <= this.columnCount; i++) {
-					const rect = await this.$fuGetRect(`#${this.idPrefix}${i}`);
-					rectArr.push({ ...rect, name: i });
-				}
-				const minCol = this.getMin(rectArr);
-				if(!minCol) return
-				const topIndex = this.colunmList.findIndex(obj => obj.id === minCol.id);
-				const item = this.tempList.shift();
-				if(!item) return
-				item.width = minCol.width;
-				this.colunmList[topIndex][`list${minCol.name}`].push(item);
-				this.$emit('changeList', { name: `list${minCol.name}`, value: item });
-				if(this.tempList.length) {
-					await this.$fu.sleep(Math.max(this.addTime, 200));
-					this.splitData()
-				} else {
-					this.$emit('finish')
-				}
-			},
-			
-			getMin(arr) {
-				const zeroHeightItems = arr.filter(item => item.height === 0);
-				if(zeroHeightItems.length > 0) {
-					return zeroHeightItems.reduce((min, item) => {
-						const topIndex = this.colunmList.findIndex(obj => obj.id === item.id);
-						const len = this.colunmList[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);
-			},
-			
-			// 清空数据列表
-			async clear() {
-				// 清除数据
-				for (let i = 0; i < this.columnCount; i++) {
-					this.colunmList[i][`list${i+1}`] = [];
-				}
-				
-				// #ifdef VUE2
-				this.$emit('input', [])
-				// #endif
-				// #ifdef VUE3
-				this.$emit('update:modelValue', [])
-				// #endif
-				this.tempList = []
-				await this.$fu.sleep(300);
-				this.$emit('clear');
-			},
-			
-			// 清除指定的某一条数据，根据id来实现
-			remove(id) {
-				let index = -1
-				// 删除组件数据
-				for (let i = 1; i <= this.columnCount; i++) {
-					index = this.colunmList[i - 1][`list${i}`].findIndex(item => item[this.idKey] == id)
-					if (index != -1) {
-						this.colunmList[i - 1][`list${i}`].splice(index, 1)
-					}
-				}
-				// 同时删除父组件对应的数据
-				// #ifdef VUE2
-				index = this.value.findIndex(item => item[this.idKey] == id)
-				if (index != -1) this.$emit('input', this.value.splice(index, 1))
-				// #endif
-				// #ifdef VUE3
-				index = this.modelValue.findIndex(item => item[this.idKey] == id)
-				if (index != -1) this.$emit('update:modelValue', this.modelValue.splice(index, 1))
-				// #endif
-				this.$emit('remove', id);
-			}
-		},
-		watch: {
-			copyValue(nVal, oVal) {
-				// #ifndef APP-NVUE
-				if (nVal.length != 0) {
-					// 取出数组发生变化的部分
-					let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0
-					// 拼接原有数据
-					this.tempList = this.tempList.concat(this.$fu.deepClone(nVal.slice(startIndex)))
-					this.splitData()
-				}
-				// #endif
-			}
-		}
-	};
-</script>
-
-<style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
-	
-	/* 瀑布流最外层 */
-	.fu-waterfall {
-		@include 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/components/fu-waterfall/props.js

@@ -1,85 +0,0 @@
-export default {
-	props: {
-		/**
-		 * @description 瀑布流数据
-		 */
-		value: {
-			type: Array,
-			default: () => []
-		},
-		modelValue: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		 * @description 数据的id值，根据id值对数据执行删除操作, 如数据为：{id: 1, name: 'fusions-ui'}，那么该值设置为id
-		 * @default 'id'
-		 */
-		idKey: {
-			type: String,
-			default: 'id'
-		},
-		/**
-		 * @description 前置标识
-		 * @default 'waterfall-flow-'
-		 */
-		idPrefix: {
-			type: String,
-			default: 'waterfall-flow-'
-		},
-		/**
-		 * @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: ''
-		}
-	}
-}

package/index.js

@@ -1,71 +0,0 @@
-/**
- * 示例：
- * import FusionsUI from 'fusions-ui'
- * Vue.use(FusionsUI)
- */
-
-// 工具函数
-import * as common from './libs/function/common.js'
-
-// 配置信息
-import config from './libs/config/config.js'
-
-// 规则校验
-import check from './libs/function/check.js'
-
-/**
- * 防抖方法 debounce
- * 节流方法 throttle
- */
-import { debounce, throttle } from './libs/function/applyEven.js'
-
-// 内置路由管理
-import minRouteConfig from './libs/route/min.route.config.js'
-import routeConfig from './libs/route/route.config.js'
-
-// 消息工具
-import message from './libs/function/message.js'
-
-// 定义全局挂在对象
-const $fu = {
-	config,
-	version: config.version,
-	debounce,
-	throttle,
-	...common,
-	...check,
-	...message,
-};
-
-// 将$fu挂载到 uni 对象上
-uni.$fu = $fu;
-
-const install = (Vue, options = {}) => {
-	// #ifdef MP
-	if(options.mpShare) {
-		// 全局混入小程序分享
-		Vue.mixin(mpShare)
-	}
-	// #endif
-	
-	// 内置路由
-	if(options.openRouter) {
-		Vue.use(minRouteConfig, routeConfig)
-	}
-	
-	// #ifdef VUE2
-	// 同时挂载到uni和Vue.prototype中
-	// #ifndef APP-NVUE
-	// 只有vue，挂载到Vue.prototype才有意义，因为nvue中全局Vue.prototype和Vue.mixin是无效的
-	Vue.prototype.$fu = $fu;
-	// #endif
-	// #endif
-	
-	// #ifdef VUE3
-	Vue.config.globalProperties.$fu = $fu;
-	// #endif
-};
-
-export default {
-	install
-}

package/libs/function/check.js

@@ -1,215 +0,0 @@
-/*
- * 校验类：常用数据校验工具
- * Util - v1.0.0 (2025/05/01, 10:10:00 AM)
- */
-
-/**
- * @description 校验手机号码格式
- * @param {String|Number} mobile 手机号
- * @returns {Boolean} 如果正确返回 true，否则返回 false（手机号格式不正确）
- */
-export function checkMobile(mobile) {
-	return RegExp(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/).test(mobile);
-}
-
-/**
- * @description 校验邮箱格式
- * @param {String|Number} value 电子邮箱
- * @returns {Boolean} 如果正确返回 true，否则返回 false（邮箱格式不正确）
- */
-export function checkEmail(value) {
-	return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)
-}
-
-/**
- * @description 校验身份证号
- * @param {String|Number} card 身份证号
- * @returns {Boolean} 如果正确返回 true，否则返回 false（身份证号格式不正确）
- */
-export function checkIDNumber(card) {
-	// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
-	var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
-	if (reg.test(card) === false) {
-		// alert("身份证输入不合法");
-		return false;
-	} else {
-		return true;
-	}
-}
-
-/**
- * @description 验证一个值范围[min, max]
- * @param {Number} 校验的值
- * @param {Array} param 校验范围，如：[0, 9]
- */
-export function checkRange(value, param) {
-    return value >= param[0] && value <= param[1]
-}
-
-/**
- * @description 校验验证码
- * @param {String} value 验证码字符串（要求为数字）
- * @param {Number} len 验证码长度，默认为6
- */
-export function checkCode(value, len = 6) {
-    return new RegExp(`^\\d{${len}}$`).test(value)
-}
-
-/**
- * @description 验证日期格式
- */
-export function checkDate(value) {
-    if (!value) return false
-    // 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
-    if (checkNumber(value)) value = +value
-    return !/Invalid|NaN/.test(new Date(value).toString())
-}
-
-/**
- * @description 校验是否为整数
- */
-export function checkInteger(value) {
-	return /^\d+$/.test(value)
-}
-
-/**
- * @description 校验旧车牌号和新能源类型的车牌号
- */
-export function checkCarNo(value) {
-	// 新能源车牌
-	const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
-	// 旧车牌
-	const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
-	if (value.length === 7) {
-	    return creg.test(value)
-	} if (value.length === 8) {
-	    return xreg.test(value)
-	}
-	return false
-}
-
-/**
- * @description 校验十进制数字
- */
-export function checkNumber(value) {
-	return /^[\+-]?(\d+\.?\d*|\.\d+|\d\.\d+e\+\d+)$/.test(value)
-}
-
-/**
- * @description 校验是否json字符串
- */
-export function isJsonString(value) {
-	if(typeof value == 'string') {
-		try {
-			var obj = JSON.parse(value);
-			if(typeof obj == 'object' && obj) {
-				return true
-			} else {
-				return false
-			}
-		} catch {
-			return false
-		}
-	}
-	return false
-}
-
-/**
- * @description 是否数组
- */
-export function isArray(value) {
-    if (typeof Array.isArray === 'function') {
-        return Array.isArray(value)
-    }
-    return Object.prototype.toString.call(value) === '[object Array]'
-}
-
-/**
- * 是否对象
- */
-export function isObject(value) {
-  return Object.prototype.toString.call(value) === '[object Object]'
-}
-
-/**
- * @description 校验是否为空
- * @param {String} value 校验值
- * @returns 如果为空返回true 否则返回false（非空）
- */
-export function isNull(value) {
-	switch (typeof value) {
-		case 'undefined':
-			return true
-		case 'string':
-			if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true
-			break
-		case 'boolean':
-			if (!value) return true
-			break
-		case 'number':
-			if (value === 0 || isNaN(value)) return true
-			break
-		case 'object':
-			if (value === null || value.length === 0) return true
-			for (const i in value) {
-				return false
-			}
-			return true
-	}
-	return false
-}
-
-/** 
- * @description 是否图片格式
- * @param {Object} value
- */
-export function isImage(value) {
-	const newValue = value.split('?')[0]
-	const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i
-	return IMAGE_REGEXP.test(newValue)
-}
-
-/**
- * @description 是否视频格式
- * @param {Object} value
- */
-export function isVideo(value) {
-	const VIDEO_REGEXP = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|m3u8)/i
-	return VIDEO_REGEXP.test(value)
-}
-
-/**
- * @description 验证URL格式
- * @param value 校验的URL
- */
-export function isUrl(value) {
-    return /^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/.test(value)
-}
-
-/**
- * @description 是否函数方法
- * @param {Object} value
- */
-export function isFunc(value) {
-    return typeof(value) === 'function'
-}
-
-export default {
-	checkMobile,
-	checkEmail,
-	checkIDNumber,
-	checkRange,
-	checkCode,
-	checkDate,
-	checkInteger,
-	checkCarNo,
-	checkNumber,
-	isJsonString,
-	isArray,
-	isObject,
-	isNull,
-	isImage,
-	isVideo,
-	isUrl,
-	isFunc
-}