fusions-ui 1.2.7 → 1.2.8

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 www.fusions.com
+Copyright (c) 2025 www.fusions.top
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/changelog.md

@@ -0,0 +1,2 @@
+## 1.3.0（2026-05-01）
+- 升级vue3，后续不再兼容vue2版本，与npm版本同步，如需vue2版本，请指定安装1.2.7版本

package/components/avatar/index.ts

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

package/components/avatar/src/avatar.ts

@@ -0,0 +1,131 @@
+import type { ExtractPropTypes } from 'vue';
+import check from '../../../utils/check';
+import { componentProps, componentShapes, componentImages } from '../../../constants';
+
+export const avatarProps = {
+	/**
+	 * @description 头像图片路径(不能为相对路径)
+	 */
+	src: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 头像形状
+	 * @values 'circle' - 圆形, 'square' - 方形
+	 * @default 'circle'
+	 */
+	shape: {
+		type: String,
+		values: componentShapes,
+		default: 'circle'
+	},
+	/**
+	 * @description 头像尺寸
+	 * @default 40
+	 */
+	size: {
+		type: [String, Number],
+		default: 40
+	},
+	/**
+	 * @description 裁剪模式
+	 * @default 'aspectFill'
+	 */
+	mode: {
+		type: String,
+		values: componentImages,
+		default: 'aspectFill'
+	},
+	/**
+	 * @description 显示的文字
+	 */
+	text: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 背景颜色
+	 * @default '#c4c8d0'
+	 */
+	bgColor: {
+		type: String,
+		default: '#c4c8d0'
+	},
+	/**
+	 * @description 文字颜色
+	 * @default '#ffffff'
+	 */
+	color: {
+		type: String,
+		default: '#ffffff'
+	},
+	/**
+	 * @description 文字大小
+	 * @default 18
+	 */
+	fontSize: {
+		type: [String, Number],
+		default: 18
+	},
+	/**
+	 * @description 显示的图标
+	 */
+	icon: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 显示小程序头像，只对百度，微信，QQ小程序有效
+	 * @default false
+	 */
+	mpAvatar: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否使用随机背景色
+	 * @default false
+	 */
+	randomBgColor: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 加载失败的默认头像(组件有内置默认图片)
+	 */
+	defaultUrl: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 如果配置了randomBgColor=true时，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+	 */
+	colorIndex: {
+		type: [String, Number],
+		// 校验参数规则，索引在0-19之间
+		validator(n: string | number) {
+			if (n === '') return true
+			return check.checkRange(n, [0, 19])
+		},
+		default: ''
+	},
+	/**
+	 * @description 组件标识符
+	 */
+	name: {
+		type: String,
+		default: ''
+	},
+	...componentProps
+};
+
+export const avatarEmits = {
+	/**
+	 * @description 点击组件时触发
+	 */
+	click: (_e: any) => true
+};
+
+export type AvatarProps = ExtractPropTypes<typeof avatarProps>;
+export type AvatarEmits = typeof avatarEmits;

package/components/avatar/src/avatar.vue

@@ -0,0 +1,104 @@
+<template>
+	<view
+		class="fu-avatar"
+		:class="[`fu-avatar--${shape}`]"
+		:style="[{
+			backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : $fu.random(0, 19)] : bgColor) : 'transparent',
+			width: $fu.addUnit(size),
+			height: $fu.addUnit(size),
+		}, $fu.addStyle(customStyle)]"
+		@tap="handleClick">
+		<slot>
+			<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU  -->
+			<open-data type="userAvatarUrl" :style="[{width: $fu.addUnit(size), height: $fu.addUnit(size)}]" v-if="mpAvatar && allowMp" />
+			<!-- #endif -->
+			<!-- #ifndef MP-WEIXIN && MP-QQ && MP-BAIDU  -->
+			<template v-if="mpAvatar && allowMp"></template>
+			<!-- #endif -->
+			<fu-icon :name="icon" :size="fontSize" :color="color" v-else-if="icon"></fu-icon>
+			<fu-text :text="text" :size="fontSize" :color="color" align="center" v-else-if="text"></fu-text>
+			<image 
+				class="fu-avatar__image" 
+				:class="[`fu-avatar__image--${shape}`]" 
+				:src="avatarUrl || defaultUrl"
+				:mode="mode" 
+				@error="errorHandler"
+				:style="[{
+					width: $fu.addUnit(size),
+					height: $fu.addUnit(size)
+				}]" v-else></image>
+		</slot>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Avatar 头像
+	 * @description 此组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
+	 * @tutorial http://www.fusions.top/components/avatar.html
+	 * @property {String} src 头像路径，如加载失败，将会显示默认头像(不能为相对路径)
+	 * @property {String} shape = [circle|square] 头像形状（默认circle）
+	 * 	@value circle 圆形
+	 * 	@value square 圆角方形
+	 * @property {String | Number} size = [large|default|mini] 头像尺寸，可以为指定字符串(large, default, mini)，或者数值（默认 40 ）
+	 * @property {String} mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值（默认 'aspectFill' ）
+	 * @property {String} text 用文字替代图片，级别优先于src
+	 * @property {String} bgColor 背景颜色，一般显示文字时用（默认 '#c4c8d0' ）
+	 * @property {String} color 文字颜色 （默认 '#ffffff' ）
+	 * @property {String | Number} fontSize 文字大小（默认 18 ）
+	 * @property {String} icon 显示的图标
+	 * @property {Boolean} mpAvatar = [true|false] 显示小程序头像，只对百度，微信，QQ小程序有效（默认 false ）
+	 * @property {Boolean} randomBgColor = [true|false] 是否使用随机背景色（默认 false ）
+	 * @property {String} defaultUrl 加载失败的默认头像(组件有内置默认图片)
+	 * @property {String | Number} colorIndex 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
+	 * @property {String} name 组件标识符（默认 'level' ）
+	 * @property {Object | String} customStyle 定义需要用到的外部样式
+	 * 
+	 * @event {Function} click 点击组件时触发 index: 用户传递的标识符
+	 * @example <fu-avatar :src="src" mode="square"></fu-avatar>
+	 */
+	import { avatarEmits, avatarProps } from './avatar';
+	import { useAvatar } from './composables';
+	
+	defineOptions({ name: 'FuAvatar', options: { virtualHost: true } });
+	
+	const props = defineProps(avatarProps);
+	const $emit = defineEmits(avatarEmits);
+	
+	const {
+		colors,
+		avatarUrl,
+		handleClick,
+		allowMp,
+		errorHandler
+	} = useAvatar(props, $emit);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+
+	.fu-avatar {
+		@include components.flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+
+		&--circle {
+			border-radius: 100px;
+		}
+
+		&--square {
+			border-radius: 4px;
+		}
+
+		&__image {
+			&--circle {
+				border-radius: 100px;
+			}
+
+			&--square {
+				border-radius: 4px;
+			}
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,61 @@
+import { ref, watch, type SetupContext, onMounted } from 'vue';
+import type { AvatarProps, AvatarEmits } from '../avatar';
+
+export const useAvatar = (props: AvatarProps, $emit: SetupContext<AvatarEmits>['emit']) => {
+	const base64Avatar = "data:image/png;base64,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";
+	// 如果配置randomBgColor参数为true，在图标或者文字的模式下，会随机从中取出一个颜色值当做背景色
+	const colors = [
+	  '#FF6B6B', '#FF9E9E', '#FFD6A5', '#FDFFB6', '#CAFFBF',
+	  '#9BF6FF', '#A0C4FF', '#BDB2FF', '#FFADAD', '#F9C74F',
+	  '#90BE6D', '#43AA8B', '#4D908E', '#577590', '#277DA1',
+	  '#F8961E', '#E76F51', '#2A9D8F', '#264653', '#6A4C93'
+	];
+	const avatarUrl = ref(props.src);
+	const allowMp = ref(false);
+	
+	const init = () => {
+		// 目前只有这几个小程序平台具有open-data标签
+		// 其他平台可以通过uni.getUserInfo类似接口获取信息，但是需要弹窗授权(首次)，不合符组件逻辑
+		// 故目前自动获取小程序头像只支持这几个平台
+		// #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU
+		allowMp.value = true
+		// #endif
+	};
+	
+	// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
+	const isImg = () => {
+		return props.src.indexOf('/') !== -1
+	};
+	
+	// 图片加载时失败时触发
+	const errorHandler = () => {
+		avatarUrl.value = props.defaultUrl || base64Avatar
+	};
+	
+	const handleClick = () => {
+		$emit('click', props.name)
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		init()
+	});
+	
+	// watch监听事件
+	// 监听头像src的变化，赋值给内部的avatarUrl变量，因为图片加载失败时，需要修改图片的src为默认值
+	watch(() => props.src, (newVal) => {
+		avatarUrl.value = newVal
+		// 如果没有传src，则主动触发error事件，用于显示默认的头像，否则src为''空字符等的时候，会无内容展示
+		if(!newVal) {
+			errorHandler()
+		}
+	}, { immediate: true })
+	
+	return {
+		colors,
+		avatarUrl,
+		handleClick,
+		allowMp,
+		errorHandler
+	}
+}

package/components/avatar-group/index.ts

@@ -0,0 +1 @@
+export * from './src/avatar-group';

package/components/avatar-group/src/avatar-group.ts

@@ -0,0 +1,86 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentProps } from '../../../constants';
+
+export const avatarGroupProps = {
+	/**
+	 * @description 头像图片组
+	 */
+	urls: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 最多展示的头像数量
+	 */
+	maxCount: {
+		type: [String, Number],
+		default: 5
+	},
+	/**
+	 * @description 头像形状
+	 */
+	shape: {
+		type: String,
+		default: 'circle'
+	},
+	/**
+	 * @description 图片裁剪模式
+	 * @default 'aspectFill'
+	 */
+	mode: {
+		type: String,
+		default: 'aspectFill'
+	},
+	/**
+	 * @description 超出maxCount时是否显示查看更多的提示
+	 * @default true
+	 */
+	showMore: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 头像大小
+	 * @default 40
+	 */
+	size: {
+		type: [String, Number],
+		default: 40
+	},
+	/**
+	 * @description 指定从数组的对象元素中读取哪个属性作为图片地址
+	 */
+	keyName: {
+		type: String,
+		default: ''
+	},
+	/**
+	 * @description 头像之间的遮挡比例
+	 * @default 0.5
+	 */
+	gap: {
+		type: [String, Number],
+		validator(value : string | number) {
+			return Number(value) >= 0 && Number(value) <= 1
+		},
+		default: 0.5
+	},
+	/**
+	 * @description 需额外显示的值
+	 */
+	extraValue: {
+		type: [String, Number],
+		default: 0
+	},
+	...componentProps
+};
+
+export const avatarGroupEmits = {
+	/**
+	 * @description 头像组更多点击
+	 */
+	showMore: () => true
+};
+
+export type AvatarGroupProps = ExtractPropTypes<typeof avatarGroupProps>;
+export type AvatarGroupEmits = typeof avatarGroupEmits;

package/components/{fu-avatar-group/fu-avatar-group.vue → avatar-group/src/avatar-group.vue}

@@ -1,5 +1,5 @@
 <template>
-	<view class="fu-avatar-group">
+	<view class="fu-avatar-group" :class="customClass" :style="$fu.addStyle(customStyle)">
 		<view 
 			class="fu-avatar-group__item" 
 			:style="{ marginLeft: index === 0 ? 0 : $fu.addUnit(-size * gap) }" 
@@ -8,7 +8,7 @@
 				:size="size" 
 				:shape="shape" 
 				:mode="mode" 
-				:src="$fu.isObject(item) ? keyName && item[keyName] || item.url : item">
+				:src="$fu.isObject(item)? keyName && item[keyName] || (item as any).url: item">
 			</fu-avatar>
 			<view 
 				class="fu-avatar-group__item__show-more" 
@@ -25,53 +25,46 @@
 	</view>
 </template>
 
-<script>
-	import mpMixin from '../../libs/mixin/mpMixin.js'
-	import mixin from '../../libs/mixin/mixin.js'
-	import props from './props.js';
+<script lang="ts" setup>
 	/**
 	 * AvatarGroup 头像组
 	 * @description 此组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
-	 * @property {Array} urls 头像图片组（默认 [] ）
-	 * @property {String,Number} maxCount 最多展示的头像数量（ 默认 5 ）
+	 * @property {Array} urls 头像图片组（默认 []）
+	 * @property {String | Number} maxCount 最多展示的头像数量（默认 5）
 	 * @property {String} shape = [circle|square] 头像形状（默认circle）
 	 * 	@value circle 圆形
 	 * 	@value square 圆角方形
-	 * @property {String} mode 图片裁剪模式（默认 'aspectFill' ）
-	 * @property {Boolean} showMore = [true|false] 超出maxCount时是否显示查看更多的提示 （默认 true ）
-	 * @property {String,Number} size 头像大小（默认 40 ）
+	 * @property {String} mode 图片裁剪模式（默认 'aspectFill'）
+	 * @property {Boolean} showMore = [true|false] 超出maxCount时是否显示查看更多的提示 （默认 true）
+	 * @property {String | Number} size 头像大小（默认 40）
 	 * @property {String} keyName 指定从数组的对象元素中读取哪个属性作为图片地址 
-	 * @property {String,Number} gap 头像之间的遮挡比例（0.4代表遮挡40%）（默认 0.5 ）
-	 * @property {String,Number} extraValue 需额外显示的值
+	 * @property {String | Number} gap 头像之间的遮挡比例（0.4代表遮挡40%）（默认 0.5）
+	 * @property {String | Number} extraValue 需额外显示的值
+	 * @property {String} customClass 定义需要用到的外部样式类
+	 * @property {String | Object} customStyle 定义需要用到的外部样式
 	 * 
 	 * @event {Function} showMore 头像组更多点击
 	 * @example <fu-avatar-group:urls="urls" size="35" gap="0.4" ></fu-avatar-group:urls=>
 	 */
-	export default {
-		name: 'fu-avatar-group',
-		emits: ['showMore'],
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {}
-		},
-		computed: {
-			showUrl() {
-				return this.urls.slice(0, this.maxCount)
-			}
-		},
-		methods: {
-			handleClick() {
-				this.$emit('showMore')
-			}
-		}
-	}
+	import { avatarGroupEmits, avatarGroupProps } from './avatar-group';
+	import { useAvatarGroup } from './composables';
+	
+	defineOptions({ name: 'FuAvatarGroup', options: { virtualHost: true } });
+	
+	const props = defineProps(avatarGroupProps);
+	const $emit = defineEmits(avatarGroupEmits);
+	
+	const {
+		showUrl,
+		handleClick
+	} = useAvatarGroup(props, $emit);
 </script>
 
 <style lang="scss" scoped>
-	@import '../../libs/style/components.scss';
+	@use '../../../style/components.scss';
 
 	.fu-avatar-group {
-		@include flex;
+		@include components.flex;
 
 		&__item {
 			margin-left: -10px;
@@ -89,7 +82,7 @@
 				left: 0;
 				right: 0;
 				background-color: rgba(0, 0, 0, 0.3);
-				@include flex;
+				@include components.flex;
 				align-items: center;
 				justify-content: center;
 				border-radius: 100px;

package/components/avatar-group/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './use-avatar-group'

package/components/avatar-group/src/composables/use-avatar-group.ts

@@ -0,0 +1,17 @@
+import { computed, type SetupContext } from 'vue';
+import type { AvatarGroupProps, AvatarGroupEmits } from '../avatar-group';
+
+export const useAvatarGroup = (props: AvatarGroupProps, $emit: SetupContext<AvatarGroupEmits>['emit']) => {
+	const showUrl = computed(() => {
+		return props.urls.slice(0, Number(props.maxCount))
+	});
+	
+	const handleClick = () => {
+		$emit('showMore')
+	}
+	
+	return {
+		showUrl,
+		handleClick
+	}
+}

package/components/badge/index.ts

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

package/components/badge/src/badge.ts

@@ -0,0 +1,126 @@
+import type { ExtractPropTypes } from 'vue';
+import { componentTypes, componentProps } from '../../../constants';
+
+/**
+ * 徽标 shape 有效值
+ */
+export const badgeShapes = ['circle', 'horn'] as const;
+
+/**
+ * 徽标 numberType 有效值
+ */
+export const badgeNumberType = ['overflow', 'ellipsis', 'limit'] as const;
+
+export const badgeProps = {
+	/**
+	 * @description 是否显示
+	 * @default true
+	 */
+	show: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示圆点
+	 * @default false
+	 */
+	isDot: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 显示的内容
+	 */
+	value: {
+		type: [Number, String],
+		default: ''
+	},
+	/**
+	 * @description 最大值，超过最大值会显示 '{max}+'
+	 * @default 999
+	 */
+	max: {
+		type: [Number, String],
+		default: 999
+	},
+	/**
+	 * @description 主题类型
+	 * @values 'primary' - 主色, 'error' - 错误, 'success' - 成功, 'warning' - 警告, 'info' - 信息
+	 * @default 'error'
+	 */
+	type: {
+		type: [String, undefined, null],
+		values: componentTypes,
+		default: 'error'
+	},
+	/**
+	 * @description 当数值为 0 时，是否展示 Badge
+	 * @default false
+	 */
+	showZero: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 背景颜色，优先级比type高，如设置，type参数会失效
+	 * @default null
+	 */
+	bgColor: {
+		type: [String, null],
+		default: null
+	},
+	/**
+	 * @description 字体颜色
+	 * @default null
+	 */
+	color: {
+		type: [String, null],
+		default: null
+	},
+	/**
+	 * @description 徽标形状
+	 * @values 'circle' - 四角均为圆角，'horn' - 左下角为直角
+	 * @default 'circle'
+	 */
+	shape: {
+		type: [String, undefined, null],
+		values: badgeShapes,
+		default: 'circle'
+	},
+	/**
+	 * @description 设置数字的显示方式
+	 * @values overflow - 会根据max字段判断，超出显示`${max}+`, ellipsis - 会根据max判断，超出显示`${max}...`, limit - 会依据1000作为判断条件，超出1000，显示`${value/1000}K`，比如2.2k、3.34w，最多保留2位小数
+	 * @default 'overflow'
+	 */
+	numberType: {
+		type: [String, undefined, null],
+		values: badgeNumberType,
+		default: 'overflow'
+	},
+	/**
+	 * @description 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值（仅absolute=true时有效）
+	 */
+	offset: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否反转背景和字体颜色
+	 * @default false
+	 */
+	inverted: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否绝对定位
+	 * @default false
+	 */
+	absolute: {
+		type: Boolean,
+		default: false
+	},
+	...componentProps
+};
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>;