fusions-ui 1.2.7 → 1.2.8

package/components/upload/src/upload-image.ts

@@ -0,0 +1,90 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const uploadImageProps = {
+	/**
+	 * @description 数组
+	 */
+	list: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否禁用预览
+	 * @default false
+	 */
+	disablePreview: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 最大限制数量
+	 * @default 9
+	 */
+	maxCount: {
+		type: [Number, String],
+		default: 9
+	},
+	/**
+	 * @description 自定义样式
+	 */
+	imageStyles: {
+		type: Object,
+		default() {
+			return {
+				width: 'auto',
+				height: 'auto',
+				border: {}
+			}
+		}
+	},
+	/**
+	 * @description 是否显示删除图标
+	 * @default true
+	 */
+	delIcon: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否只读
+	 * @default false
+	 */
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示已上传的文件列表
+	 * @default true
+	 */
+	showFileList: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const uploadImageEmits = {
+	/**
+	 * @description 选择图片
+	 */
+	choose: () => true,
+	/**
+	 * @description 上传文件
+	 */
+	uploadFiles: (_e: any) => true,
+	/**
+	 * @description 删除文件
+	 */
+	delFile: (_e: any) => true
+};
+
+export type UploadImageProps = ExtractPropTypes<typeof uploadImageProps>;
+export type UploadImageEmits = typeof uploadImageEmits;

package/components/upload/src/upload-image.vue

@@ -0,0 +1,158 @@
+<template>
+	<view class="fu-upload-image">
+		<block v-if="showFileList">
+			<view class="fu-upload-image__box" v-for="(item, index) in list" :key="index" :style="boxStyle">
+				<view class="fu-upload-image__box-content" :style="borderStyle">
+					<image class="fu-upload-image__image" :src="(item as any).url" mode="aspectFill" @click.stop="choosePrviewImage(item,index)"></image>
+					<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="chooseDelFile(index)">
+						<view class="icon-del"></view>
+						<view class="icon-del rotate"></view>
+					</view>
+					<view v-if="((item as any).progress && (item as any).progress !== 100) || (item as any).progress === 0 " class="fu-upload-image__progress">
+						<progress class="fu-upload-image__progress-item" :percent="(item as any).progress === -1? 0: (item as any).progress" stroke-width="4"
+						 :backgroundColor="(item as any).errMsg?'#fd595f':'#ececec'" />
+					</view>
+					<view v-if="(item as any).errMsg" class="fu-upload-image__mask" @click.stop="uploadFiles(item)">
+						点击重试
+					</view>
+				</view>
+			</view>
+		</block>
+		<view v-if="list.length < maxCount && !readonly" class="fu-upload-image__box" :style="boxStyle">
+			<view class="fu-upload-image__box-content add-wrap" :style="borderStyle" @click="chooseImage">
+				<slot></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * @property {Array} list 数组
+	 * @property {Boolean} disabled 是否禁用（默认 false）
+	 * @property {Boolean} disablePreview 是否禁用预览（默认 false）
+	 * @property {String | Number} maxCount 最大限制数量（默认 9）
+	 * @property {Object} imageStyles 自定义样式（默认 { width: 'auto', height: 'auto', border: {} }）
+	 * @property {Boolean} delIcon 是否显示删除图标（默认 true）
+	 * @property {Boolean} readonly 是否只读（默认 false）
+	 * @property {Boolean} showFileList 是否显示已上传的文件列表（默认 true）
+	 */
+	import { uploadImageEmits, uploadImageProps } from './upload-image';
+	import { useUploadImage, useUploadImageCustomStyle } from './composables';
+	
+	defineOptions({ name: 'UploadImage', options: { virtualHost: true } });
+	
+	const props = defineProps(uploadImageProps);
+	const $emit = defineEmits(uploadImageEmits);
+	
+	const {
+		uploadFiles,
+		chooseImage,
+		chooseDelFile,
+		choosePrviewImage
+	} = useUploadImage(props, $emit);
+	
+	const {
+		boxStyle,
+		borderStyle
+	} = useUploadImageCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-upload-image {
+		@include components.flex;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		/* #endif */
+		flex-wrap: wrap;
+		margin: -5px;
+		
+		&__box {
+			position: relative;
+			width: 33.3%;
+			height: 0;
+			padding-top: 33.33%;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			/* #endif */
+		}
+		
+		&__box-content {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			margin: 5px;
+			border: 1px #eeeeee solid;
+			border-radius: 5px;
+			overflow: hidden;
+		}
+		
+		&__progress {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 2;
+		}
+		
+		&__progress-item {
+			width: 100%;
+		}
+		
+		&__mask {
+			@include components.flex;
+			justify-content: center;
+			align-items: center;
+			position: absolute;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			color: #ffffff;
+			font-size: 12px;
+			background-color: rgba(0, 0, 0, 0.4);
+		}
+		
+		&__image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	
+	.add-wrap {
+		@include components.flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.rotate {
+		position: absolute;
+		transform: rotate(90deg);
+	}
+	
+	.icon-del-box {
+		@include components.flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 3px;
+		right: 3px;
+		height: 26px;
+		width: 26px;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 2;
+		transform: rotate(-45deg);
+	}
+	
+	.icon-del {
+		width: 15px;
+		height: 2px;
+		background-color: #ffffff;
+		border-radius: 2px;
+	}
+</style>

package/components/upload/src/upload.ts

@@ -0,0 +1,196 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const uploadProps = {
+	/**
+	 * @description 组件数据，通常用来回显 ,类型由return-type属性决定
+	 */
+	modelValue: {
+		type: [Array, Object],
+		default() {
+			return []
+		}
+	},
+	/**
+	 * @description 组件禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 禁用图片预览，仅mode为grid时生效
+	 * @default false
+	 */
+	disablePreview: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示删除按钮
+	 * @default true
+	 */
+	delIcon: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否自动上传，值为true则只触发@select，可自行上传
+	 * @default false
+	 */
+	autoUpload: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 最大选择个数，h5会自动忽略多选的部分
+	 * @default 9
+	 */
+	maxCount: {
+		type: [String, Number],
+		default: 9
+	},
+	/**
+	 * @description 选择文件类型，可选值：image/video/all
+	 * @default 'image'
+	 */
+	fileType: {
+		type: String,
+		default: 'image'
+	},
+	/**
+	 * @description 选择文件后的文件列表样式，可选值：grid/list
+	 * @default 'grid'
+	 */
+	mode: {
+		type: String,
+		default: 'grid'
+	},
+	/**
+	 * @description 选择文件后缀，根据 fileType 属性而不同
+	 */
+	fileExtname: {
+		type: [Array, String],
+		default() {
+			return []
+		}
+	},
+	/**
+	 * @description 定义列表样式，mode为list时的样式
+	 */
+	listStyles: {
+		type: Object,
+		default() {
+			return {
+				// 是否显示边框
+				border: true,
+				// 是否显示分隔线
+				dividline: true,
+				// 线条样式
+				borderStyle: {}
+			}
+		}
+	},
+	/**
+	 * @description 自定义图片样式 选择文件后缀，根据 fileType 属性而不同
+	 */
+	imageStyles: {
+		type: Object,
+		default() {
+			return {
+				width: 'auto',
+				height: 'auto'
+			}
+		}
+	},
+	/**
+	 * @description 是否只读
+	 * @default false
+	 */
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 返回类型数据格式，当为 object 时，只能单选，且会覆盖，可选值：array/object
+	 * @default 'array'
+	 */
+	returnType: {
+		type: String,
+		default: 'array'
+	},
+	/**
+	 * @description original原图，compressed 压缩图，默认二者都有
+	 */
+	sizeType: {
+		type: Array,
+		default() {
+			return ['original', 'compressed']
+		}
+	},
+	/**
+	 * @description album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+	 * 注意：sourceType 值在 H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册，部分浏览器也无法限制是否使用相机
+	 */
+	sourceType: {
+		type: Array,
+		default() {
+			return ['album', 'camera']
+		}
+	},
+	/**
+	 * @description 相机类型，仅fileType为video有效，可选值：front/back
+	 * @default 'back'
+	 */
+	camera: {
+		type: String,
+		default: 'back'
+	},
+	/**
+	 * @description 是否压缩所选视频源文件，仅fileType为video有效
+	 * @default true
+	 */
+	compressed: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 是否显示已上传的文件列表
+	 * @default true
+	 */
+	showFileList: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const uploadEmits = {
+	'update:modelValue': (_e : any) => true,
+	/**
+	 * @description 选择文件后触发
+	 */
+	select: (_e : any) => true,
+	/**
+	 * @description 文件上传时触发
+	 */
+	progress: (_e : any) => true,
+	/**
+	 * @description 上传成功触发
+	 */
+	success: (_e : any) => true,
+	/**
+	 * @description 上传失败触发
+	 */
+	fail: (_e : any) => true,
+	/**
+	 * @description 文件从列表移除时触发
+	 */
+	delete: (_e : any) => true,
+	/**
+	 * @description 输入事件
+	 */
+	input: (_e : any) => true
+};
+
+export type UploadProps = ExtractPropTypes<typeof uploadProps>;
+export type UploadEmits = typeof uploadEmits;

package/components/upload/src/upload.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="fu-upload">
+		<upload-image  
+			:readonly="readonly"
+			:imageStyles="imageStyles" 
+			:list="filesList" 
+			:disabled="disabled"
+			:disablePreview="disablePreview"
+			:delIcon="delIcon"
+			:showFileList="showFileList"
+			:maxCount="countLength"
+			@uploadFiles="uploadFiles" 
+			@choose="choose" 
+			@delFile="delFile" 
+			v-if="fileType === 'image' && showType === 'grid'">
+			<slot>
+				<view class="add-wrap">
+					<view class="add-wrap__icon-add"></view>
+					<view class="add-wrap__icon-add add-wrap__rotate"></view>
+				</view>
+			</slot>
+		</upload-image>
+		
+		<upload-file 
+			:readonly="readonly"
+			:listStyles="listStyles" 
+			:fileList="filesList" 
+			:delIcon="delIcon"
+			:maxCount="countLength"
+			:showFileList="showFileList"
+			@uploadFiles="uploadFiles" 
+			@choose="choose" 
+			@delFile="delFile" 
+			v-if="fileType !== 'image' || showType !== 'grid'">
+			<slot>
+				<button type="primary" size="mini">选择文件</button>
+			</slot>
+		</upload-file>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * Upload上传组件
+	 * @description Upload文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间
+	 * @tutorial http://www.fusions.top/components/upload.html
+	 * @property {Array | Object} modelValue 绑定数据，通常用来回显 ,类型由returnType属性决定
+	 * @property {Boolean} disabled = [true|false] 是否禁用（默认 false）
+	 * 	@value true 禁用
+	 * 	@value false 取消禁用
+	 * @property {Boolean} disablePreview = [true|false] 是否禁用图片预览功能，仅mode:grid时生效（默认 false）
+	 * 	@value true 禁用图片预览
+	 * 	@value false 取消禁用图片预览
+	 * @property {Boolean} delIcon = [true|false] 是否显示删除按钮（默认 true）
+	 * 	@value true 显示删除按钮
+	 * 	@value false 不显示删除按钮
+	 * @property {Boolean} autoUpload = [true|false] 是否自动上传，值为false则只触发@select，可自行上传（默认 false）
+	 * 	@value true 自动上传
+	 * 	@value false 取消自动上传
+	 * @property {String | Number} maxCount 最大选择个数，h5会自动忽略多选的部分（默认 9）
+	 * @property {String} fileType = [image|video|all] 选择文件类型，可选值：image/video/all；（默认 image）
+	 * 	@value image 只选择图片
+	 * 	@value video 只选择视频
+	 * 	@value all 选择所有文件
+	 * @property {String} mode = [list|grid] 选择文件后的文件列表样式，可选值：grid/list；（默认 grid）
+	 * 	@value list 列表显示
+	 * 	@value grid 宫格显示
+	 * @property {Array} fileExtname 选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 fileType 属性而不同
+	 * @property {Object} listStyles	定义列表样式，mode为list时的样式
+	 * @property {Object} imageStyles 自定义图片样式 选择文件后缀，根据 fileType 属性而不同
+	 * @property {Boolean} readonly = [true|false] 是否只读（默认 false）
+	 * @property {String} returnType = [array|object] 返回类型数据格式，当为 object 时，只能单选且会覆盖（默认 array）
+	 * 	@value object 对象
+	 * 	@value array 数组
+	 * @property {Array} sizeType original原图，compressed 压缩图，默认二者都有
+	 * @property {Array} sourceType album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项 
+	 * @property {String} camera = [front|back] 相机类型，仅fileType为video时生效，可选值：front/back；(默认 back)
+	 * 	@value front 前置
+	 * 	@value back 后置
+	 * @property {Boolean} compressed = [true|false] 是否压缩所选视频源文件，仅fileType为video时生效，(默认 true)
+	 * 	@value true 需要压缩
+	 * 	@value false 不需要压缩
+	 * @property {Boolean} showFileList = [true|false] 是否显示已上传的文件列表（默认 true）
+	 * 	@value true 显示列表
+	 * 	@value false 隐藏列表
+	 * 
+	 * @event {Function} select 选择文件后触发
+	 * @event {Function} progress 文件上传时触发
+	 * @event {Function} success 上传成功触发
+	 * @event {Function} fail 上传失败触发
+	 * @event {Function} delete 文件从列表移除时触发
+	 * @example <fu-upload></fu-upload>
+	 */
+	import { uploadEmits, uploadProps } from './upload';
+	import { useUpload } from './composables';
+	import uploadImage from './upload-image.vue';
+	import uploadFile from './upload-file.vue';
+	
+	defineOptions({ name: 'FuUpload', options: { virtualHost: true } });
+	
+	const props = defineProps(uploadProps);
+	const $emit = defineEmits(uploadEmits);
+	
+	const {
+		filesList,
+		showType,
+		countLength,
+		clearFiles,
+		upload,
+		uploadFiles,
+		choose,
+		delFile
+	} = useUpload(props, $emit);
+	
+	// 暴露方法
+	defineExpose({
+		clearFiles,
+		upload,
+	});
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-upload {
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		overflow: hidden;
+		width: 100%;
+		/* #endif */
+		flex: 1;
+	}
+	
+	.add-wrap {
+		@include components.flex;
+		align-items: center;
+		justify-content: center;
+		
+		&__icon-add {
+			width: 45px;
+			height: 4px;
+			background-color: #efefef;
+			border-radius: 2px;
+		}
+		
+		&__rotate {
+			position: absolute;
+			transform: rotate(90deg);
+		}
+	}
+</style>

package/components/{fu-upload/utils.js → upload/src/utils.ts}

@@ -2,7 +2,7 @@
  * 获取文件名和后缀
  * @param {String} name
  */
-export const getFileExt = (name) => {
+export const getFileExt = (name: string) => {
 	const last_len = name.lastIndexOf('.');
 	const len = name.length;
 	return {
@@ -15,20 +15,20 @@ export const getFileExt = (name) => {
  * 获取扩展名
  * @param {Array} fileExtname
  */
-export const getExtname = (fileExtname) => {
+export const getExtname = (fileExtname: string | string[]): string[] => {
+	if (!fileExtname) return []
+	
 	if (!Array.isArray(fileExtname)) {
 		let extname = fileExtname.replace(/(\[|\])/g, '');
 		return extname.split(',')
-	} else {
-		return fileExtname
 	}
-	return []
+	return fileExtname
 }
 
 /**
  * 获取文件和检测是否可选
  */
-export const getFilesAndIsMax = (res, _extname) => {
+export const getFilesAndIsMax = (res: any, _extname: string[]) => {
 	let filePaths = [];
 	let files = [];
 	if(!_extname || _extname.length === 0){
@@ -37,8 +37,8 @@ export const getFilesAndIsMax = (res, _extname) => {
 			files
 		}
 	}
-	res.tempFiles.forEach(item => {
-		let fileFullName = get_file_ext(item.name);
+	res.tempFiles.forEach((item: any) => {
+		let fileFullName = getFileExt(item.name);
 		const extname = fileFullName.ext.toLowerCase();
 		if (_extname.indexOf(extname) !== -1) {
 			files.push(item)
@@ -64,7 +64,7 @@ export const getFilesAndIsMax = (res, _extname) => {
  * 获取图片信息
  * @param {Object} filepath
  */
-export const getFileInfo = (filepath) => {
+export const getFileInfo = (filepath: string) => {
 	return new Promise((resolve, reject) => {
 		uni.getImageInfo({
 			src: filepath,
@@ -80,11 +80,11 @@ export const getFileInfo = (filepath) => {
 /**
  * 获取封装数据
  */
-export const getFileData = async (files, type = 'image') => {
+export const getFileData = async (files: any, type: string = 'image') => {
 	// 最终需要上传数据库的数据
 	let fileFullName = getFileExt(files.name)
 	const extname = fileFullName.ext.toLowerCase()
-	let filedata = {
+	let filedata: Record<string, any> = {
 		name: files.name,
 		uuid: files.uuid,
 		extname: extname || '',
@@ -97,7 +97,7 @@ export const getFileData = async (files, type = 'image') => {
 		video: {}
 	}
 	if (type === 'image') {
-		const imageinfo = await getFileInfo(files.path)
+		const imageinfo: any = await getFileInfo(files.path)
 		delete filedata.video
 		filedata.image.width = imageinfo.width
 		filedata.image.height = imageinfo.height

package/components/vtabs/index.ts

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

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

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