@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/uploader/file-uploader.vue

@@ -1,52 +0,0 @@
-<template>
-	<view :class="componentClassNames">
-		<view>
-			<button-cpn>上传</button-cpn>
-		</view>
-		<view>
-			<view v-for="(file, idx) in currentValue" :key="idx" :class="$style['Uploader--file-item']">
-				{{ file.name || file.path }}
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import ButtonCpn from '../button/button.vue';
-import UploadMixin from './mixin';
-
-export default {
-	name: 'Uploader',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { ButtonCpn },
-	mixins: [componentName, UploadMixin],
-	props: {
-		/** 文件列表 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	methods: {},
-};
-</script>
-
-<style lang="scss" module>
-.Uploader {
-	width: 100%;
-}
-.Uploader--file-item {
-	&:first-child {
-		margin-top: 20rpx;
-	}
-	padding: 15rpx 0;
-	font-size: 28rpx;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-</style>

package/components/uploader/files.js

@@ -1,225 +0,0 @@
-export function randomInt(max = 100, min = 0, padStart = false) {
-	const v = Math.floor(Math.random() * max + min);
-	if (!padStart) return v;
-	const n = (max - 1).toString().length;
-	return v.toString().padStart(n, '0');
-}
-
-const FILE_TYPE_IMAGE = 'image';
-const FILE_TYPE_VIDEO = 'video';
-const FILE_TYPE_FILE = 'file';
-
-/**
- * 文件
- * @typedef {object} ChosenFile
- * @property {string} name 文件名
- * @property {number} size 文件大小
- * @property {string} path 路径
- * @property {string} type 类型
- */
-
-/**
- * 文件类型字符串是否有效
- * @param {string} type 文件类型字符串 'image' 、 'video' 、 'file' 的组合或 'all'
- * @returns {boolean} 是否有效
- */
-function typeStringValidator(type) {
-	if (type === 'all') return true;
-	const arr = typeStringToArr(type);
-	if (arr.length === 0) return false;
-	return arr.every((item) => [FILE_TYPE_IMAGE, FILE_TYPE_VIDEO, FILE_TYPE_FILE].includes(item));
-}
-
-/**
- * 将文件类型字符串转换为文件类型数组
- * @param {string} type 文件类型字符串 'image' 、 'video' 、 'file' 的组合或 'all'
- * @param {string} divider 分隔符
- * @returns {string[]} 文件类型数组
- */
-function typeStringToArr(type, divider = ',') {
-	if (Array.isArray(type)) return type;
-	if (type === 'all') return [FILE_TYPE_IMAGE, FILE_TYPE_VIDEO, FILE_TYPE_FILE];
-	return [...new Set(type.split(divider))];
-}
-
-/**
- * 将文件类型数组转换为 {@link uni.chooseMessageFile} 的 `type` 参数
- * @param {('image' | 'video' | 'file')[]} arr 文件类型，可选 'image' 、 'video' 、 'file' 组成的数组
- * @returns {'image' | 'video' | 'file' | 'all'}
- */
-function typeArrToChooseMessageFileType(arr) {
-	if (!arr || !Array.isArray(arr)) throw 'arr is invalid';
-
-	const image = arr.includes(FILE_TYPE_IMAGE);
-	const video = arr.includes(FILE_TYPE_VIDEO);
-	const file = arr.includes(FILE_TYPE_FILE);
-	if (image && video && file) return 'all';
-
-	if (file) return FILE_TYPE_FILE;
-	if (image) return FILE_TYPE_IMAGE;
-	if (video) return FILE_TYPE_VIDEO;
-	throw 'arr is invalid';
-}
-
-/**
- * 将文件类型数组转换为 {@link uni.chooseMessageFile} 的 `type` 参数
- * @param {('image' | 'video' | 'file')[] | undefined} arr 文件类型，可选 'image' 、 'video' 组成的数组
- * @returns {('image' | 'video')[]}
- */
-function typeArrToChooseMediaType(arr) {
-	if (!arr || !Array.isArray(arr)) throw 'arr is invalid';
-
-	const image = arr.includes(FILE_TYPE_IMAGE);
-	const video = arr.includes(FILE_TYPE_VIDEO);
-	if (image && video) return [FILE_TYPE_IMAGE, FILE_TYPE_VIDEO];
-
-	if (image) return [FILE_TYPE_IMAGE];
-	if (video) return [FILE_TYPE_VIDEO];
-	throw 'arr is invalid';
-}
-
-function getFileExt(filename) {
-	return filename.split('.').pop();
-}
-
-function isImage(filename) {
-	return ['jpg', 'jpeg', 'png'].includes(getFileExt(filename));
-}
-
-function isVideo(filename) {
-	return ['mp4', 'mov', 'mkv', 'wmv', 'avi', 'flv'].includes(getFileExt(filename));
-}
-
-/**
- * @typedef {object} chooseFileResult
- * @property {ChosenFile[]} files 有效的文件列表
- * @property {ChosenFile[]} invalidFiles 无效的文件列表
- */
-/**
- * 过滤文件
- * @param {ChosenFile[]} files 选择的文件列表
- * @param {ChosenFile[]} extensionList 限制的文件类型
- * @param {string} key 读取文件名的 key
- * @returns {chooseFileResult} 过滤后的结果
- */
-function filterFiles(files, extensionList, key = 'name') {
-	const invalidFiles = [];
-	if (extensionList && extensionList.length > 0) {
-		files = files.filter((item) => {
-			const ext = getFileExt(item[key]);
-			if (extensionList.includes(ext)) {
-				return item;
-			}
-			invalidFiles.push(item);
-		});
-	}
-	return { files, invalidFiles };
-}
-
-/**
- * @typedef {object} chooseFileParams
- * @property {number} max 最大上传数量，不能超过 9
- * @property {('image' | 'video' | 'file')[] | undefined} type 文件类型，可选 'image' 、 'video' 、 'file' 组成的数组
- * @property {string[]} selectExtension 选择文件时限制文件类型，不带 "."，仅 type 包含 file 时有效
- * @property {string[]} allowedExtension 选中文件后文件类型限制，不带 "."
- * @property {boolean} fromChat 是否从聊天文件中选择图片和视频
- */
-/** 选择文件
- * @param {chooseFileParams} param0
- * @return {Promise<chooseFileResult>} 选择的文件列表
- */
-function chooseFile({ max = 1, type, selectExtension, allowedExtension, fromChat = false } = {}) {
-	/* #ifdef MP-WEIXIN */
-
-	if (type.includes(FILE_TYPE_FILE) || fromChat) {
-		type = typeArrToChooseMessageFileType(type);
-
-		return new Promise((resolve, reject) => {
-			uni.chooseMessageFile({
-				count: Math.max(1, Math.min(max, 100)),
-				type: type,
-				extension: selectExtension,
-				success(res) {
-					resolve(filterFiles(res.tempFiles, allowedExtension));
-				},
-				fail(err) {
-					reject(err);
-				},
-			});
-		});
-	}
-	/* #endif */
-	type = typeArrToChooseMediaType(type);
-
-	return new Promise((resolve, reject) => {
-		uni.chooseMedia({
-			count: Math.max(1, Math.min(max, 20)),
-			mediaType: type,
-			sizeType: ['original', 'compressed'],
-			sourceType: ['album', 'camera'],
-			success(res) {
-				resolve(
-					filterFiles(
-						res.tempFiles.map((item) => ({
-							name:
-								(item.fileType === FILE_TYPE_IMAGE ? '图片' : '视频') +
-								'_' +
-								Date.now() +
-								randomInt(10000, 0, true) +
-								'.' +
-								getFileExt(item.tempFilePath),
-							size: item.size,
-							path: item.tempFilePath,
-							type: item.fileType,
-						})),
-						allowedExtension
-					)
-				);
-			},
-			fail(err) {
-				reject(err);
-			},
-		});
-	});
-}
-
-/**
- * 保存文件
- * @param {string} path 文件临时路径
- * @returns 保存后的路径
- */
-function saveFile(path, name) {
-	return new Promise((resolve, reject) => {
-		/* #ifdef MP-WEIXIN */
-		uni.getFileSystemManager().saveFile({
-			tempFilePath: path,
-			filePath: `${wx.env.USER_DATA_PATH}/${name}`,
-			success: function (res) {
-				resolve(res.savedFilePath);
-			},
-			fail: reject,
-		});
-		/* #endif */
-		/* #ifndef MP-WEIXIN */
-		uni.saveFile({
-			tempFilePath: path,
-			success: function (res) {
-				resolve(res.savedFilePath);
-			},
-			fail: reject,
-		});
-		/* #endif */
-	});
-}
-
-export {
-	FILE_TYPE_IMAGE,
-	FILE_TYPE_VIDEO,
-	FILE_TYPE_FILE,
-	typeStringToArr,
-	typeStringValidator,
-	chooseFile,
-	isImage,
-	isVideo,
-	saveFile,
-};

package/components/uploader/media-uploader.vue

@@ -1,189 +0,0 @@
-<template>
-	<view :class="componentClassNames" :style="{ '--columns': columns }">
-		<!-- 已上传文件列表 -->
-		<aspect-cpn v-for="(item, idx) in fileList" :key="idx" :class="$style['Uploader--item']" :style="styleWidth">
-			<!-- TODO: 视频文件支持 -->
-			<!-- <video
-				v-if="item.fileType === 'video'"
-				:muted="true"
-				:src="item.fileUrl"
-				:controls="false"
-				:show-progress="false"
-				:show-fullscreen-btn="false"
-				:show-play-btn="false"
-				:show-center-play-btn="false"
-				:show-loading="false"
-				:enable-progress-gesture="false"
-				object-fit="fill"
-				:class="[$style['Uploader--image'], $style['Uploader--video']]"
-			></video> -->
-			<image-cpn
-				:src="item.tempFilePath || item.url"
-				:preview-list="previewList"
-				:class="$style['Uploader--image']"
-				:style="styleSize"
-				mode="aspectFill"
-			/>
-			<loading-cpn
-				v-if="!isReadonly && item.uploadStatus === 'uploading'"
-				:class="$style['Uploader--upload-loading']"
-			/>
-			<view v-if="!isReadonly && item.uploadStatus === 'error'" :class="$style['Uploader--upload-error']">
-				上传失败
-			</view>
-			<view
-				v-if="!isReadonly && item.uploadStatus !== 'uploading'"
-				:class="$style['Uploader--icon-delete']"
-				@click.stop="deleteFile(idx)"
-			>
-			</view>
-		</aspect-cpn>
-		<!-- 上传按钮 -->
-		<aspect-cpn
-			v-if="!isReadonly && restCount > 0"
-			:class="$style['Uploader--item']"
-			:style="styleWidth"
-			@click="selectFile"
-		>
-			<slot>
-				<button-cpn plain :class="$style['Uploader--button']">
-					<view style="line-height: 1.3em">
-						<view>上传</view>
-						<view>图片</view>
-					</view>
-				</button-cpn>
-			</slot>
-		</aspect-cpn>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import AspectCpn from '../aspect/aspect.vue';
-import ButtonCpn from '../button/button.vue';
-import ImageCpn from '../image/image.vue';
-import LoadingCpn from '../loading/animations/loading-animation4.vue';
-import UploadMixin from './mixin';
-
-export default {
-	name: 'Uploader',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { AspectCpn, ButtonCpn, ImageCpn, LoadingCpn },
-	mixins: [componentName, UploadMixin],
-	props: {
-		/** 媒体类型，可选值：'image' | 'video' | 'image,video' */
-		type: {
-			type: String,
-			default: 'image',
-		},
-		/** 媒体来源，可选值：'album' | 'camera' | 'album,camera' */
-		source: {
-			type: String,
-			default: 'album',
-		},
-		/** 列数 */
-		columns: {
-			type: [String, Number],
-			default: 4,
-		},
-		/** 显示宽度 */
-		width: {
-			type: [String, Number],
-			default: '',
-		},
-	},
-	computed: {
-		styleWidth() {
-			if (!this.width) return '';
-			const width = typeof this.width === 'number' ? `${this.width}rpx` : this.width;
-			return `width: ${width};`;
-		},
-		/** 预览列表 */
-		previewList() {
-			return this.fileList.map((item) => item.tempFilePath || item.url);
-		},
-	},
-	methods: {
-		selectFile() {
-			uni.chooseMedia({
-				count: this.restCount,
-				mediaType: this.type.split(','),
-				sourceType: this.source.split(','),
-				success: (res) => {
-					const files = this.validateFiles(res.tempFiles);
-					if (this.autoUpload && files) {
-						this.upload();
-					}
-				},
-			});
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-.Uploader {
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12rpx;
-}
-
-.Uploader--item {
-	position: relative;
-	width: calc(100% / var(--columns) - 12rpx * (var(--columns) - 1) / var(--columns));
-}
-.Uploader--image {
-	border-radius: 16rpx;
-}
-.Uploader--upload-loading {
-	pointer-events: none;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	font-size: 2em;
-	color: #fff;
-	transform: translate(-50%, -50%);
-}
-.Uploader--upload-error {
-	pointer-events: none;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 2em;
-	height: 2em;
-	box-sizing: content-box;
-	transform: translate(-50%, -50%);
-	padding: 1.25em;
-	border-radius: 50%;
-	background-color: #00000080;
-	color: #fff;
-	font-size: 22rpx;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-.Uploader--button {
-	height: 100%;
-	border-color: #ccc;
-	border-radius: 16rpx;
-}
-
-.Uploader--icon-delete {
-	position: absolute;
-	top: 0;
-	right: 0;
-	z-index: 1;
-	transform-origin: 75%, 25%;
-	width: 36rpx;
-	height: 36rpx;
-	background: no-repeat top / 100% 45% linear-gradient(90deg, red 45%, transparent 45%, transparent 55%, red 55%),
-		no-repeat bottom / 100% 45% linear-gradient(90deg, red 45%, transparent 45%, transparent 55%, red 55%),
-		radial-gradient(transparent 50%, red 50%, red 100%);
-	transform: translate(25%, -25%) rotate(45deg);
-	border-radius: 50%;
-}
-</style>

package/components/uploader/mixin.js

@@ -1,171 +0,0 @@
-import { fileSize } from '../../utils/fileSize';
-import { isFormReadonly } from '../form/mixin';
-
-export default {
-	mixins: [isFormReadonly],
-	props: {
-		/** 绑定值，文件列表 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-		/** 最大上传文件数 */
-		max: {
-			type: Number,
-			default: 9,
-		},
-		/** 最大上传文件大小 */
-		maxSize: {
-			type: Number,
-			default: 1024 * 1024 * 10, // 10MB
-		},
-		/** 自动上传文件 */
-		autoUpload: {
-			type: Boolean,
-			default: true,
-		},
-		/** 上传文件方法
-		 *
-		 * 函数签名:
-		 * @param {UniApp.MediaFile} file - 待上传文件
-		 * @return {Promise<{url: string}>} - 上传后的文件信息
-		 */
-		uploadHandler: {
-			type: Function,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			innerValue: this.value,
-		};
-	},
-	computed: {
-		isReadonly() {
-			return this.readonly || this.isFormReadonly;
-		},
-		/** 剩余可上传文件数 */
-		restCount() {
-			if (this.max <= 0) return 9;
-			return this.max - this.currentValue.length;
-		},
-		currentValue: {
-			get: function () {
-				return this.innerValue;
-			},
-			set: function (val) {
-				this.innerValue = val;
-				this.$emit('input', val);
-				this.$emit('change', val);
-			},
-		},
-		fileList() {
-			return this.currentValue.map((item) =>
-				typeof item === 'string' ? { url: item, uploadStatus: 'success' } : { uploadStatus: 'success', ...item }
-			);
-		},
-		/** 当前是否有文件还在上传 */
-		isUploading() {
-			return this.currentValue.some((item) => item.uploadStatus === 'uploading');
-		},
-	},
-	watch: {
-		value: {
-			handler(val) {
-				this.innerValue = val || [];
-			},
-			immediate: true,
-			deep: true,
-		},
-	},
-	methods: {
-		/** 校验待上传文件 */
-		validateFiles(files) {
-			if (files.length === 0) return;
-
-			// 过滤大文件
-			const selectedFiles = files.filter((file) => file.size <= this.maxSize);
-			if (selectedFiles.length < files.length) {
-				uni.showToast({
-					icon: 'none',
-					title: `文件大小不能超过${fileSize(this.maxSize).formattedSize}`,
-					duration: 2000,
-				});
-			}
-			if (selectedFiles.length === 0) return;
-
-			// 校验数量
-			if (selectedFiles.length > this.restCount) {
-				uni.showToast({ icon: 'none', title: `最多只能上传${this.max}个文件`, duration: 2000 });
-			}
-
-			const validFiles = selectedFiles
-				.slice(0, this.restCount)
-				.map((file) => ({ ...file, uploadStatus: 'ready' }));
-			this.currentValue = this.fileList.concat(validFiles);
-
-			return validFiles;
-		},
-		/** 上传文件 */
-		upload() {
-			return Promise.all(
-				this.currentValue.map(async (file) => {
-					if (file.uploadStatus !== 'ready') return file;
-
-					try {
-						file.uploadStatus = 'uploading';
-						const res = await this.uploadHandler(file);
-
-						const index = this.currentValue.findIndex((item) => item.tempFilePath === file.tempFilePath);
-						if (index < 0) {
-							return null;
-						}
-
-						const currentValue = [...this.currentValue];
-						currentValue.splice(
-							index,
-							1,
-							res && res.url
-								? {
-										...file,
-										name: res.name,
-										url: res.url,
-										type: file.type,
-										uploadStatus: 'success',
-								  }
-								: {
-										...file,
-										uploadStatus: 'error',
-								  }
-						);
-						this.currentValue = currentValue;
-						return this.currentValue[index];
-					} catch {
-						const index = this.currentValue.findIndex((item) => item.tempFilePath === file.tempFilePath);
-						if (index < 0) {
-							return null;
-						}
-
-						const currentValue = [...this.currentValue];
-						currentValue.splice(index, 1, { ...file, uploadStatus: 'error' });
-						this.currentValue = currentValue;
-						return this.currentValue[index];
-					}
-				})
-			);
-		},
-		/** 删除文件 */
-		deleteFile(index) {
-			if (index >= 0 && index < this.currentValue.length) {
-				const currentValue = [...this.currentValue];
-				currentValue.splice(index, 1);
-				this.currentValue = currentValue;
-			}
-		},
-	},
-};

package/components/uploader/uni.js

@@ -1,38 +0,0 @@
-import { download } from './download';
-
-function canOpenDocument(filename) {
-	return ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'].includes(filename.split('.').pop());
-}
-
-/**
- * 新开页面打开文档，支持格式：doc, docx, xls, xlsx, ppt, pptx, pdf
- * @param {string} url 文件 url
- * @param {string} name 文件名
- */
-export function openDocument(url, name) {
-	return download(url, name)
-		.catch(() => {
-			return Promise.reject('文件下载失败');
-		})
-		.then((res) => {
-			var path = res.filePath;
-			if (!canOpenDocument(path)) {
-				return Promise.reject('该文件类型不支持预览');
-			}
-			return new Promise((resolve, reject) => {
-				uni.openDocument({
-					filePath: path,
-					showMenu: true,
-					success: resolve,
-					fail: reject,
-				});
-			});
-		});
-}
-
-/** 复制文本 */
-export function copy(text) {
-	uni.setClipboardData({
-		data: text,
-	});
-}

package/components/uploader/upload-button.vue

@@ -1,29 +0,0 @@
-<template>
-	<button-cpn plain :class="$style['Uploader--card-uploader']" @click="$emit('select')">
-		<slot>上传</slot>
-	</button-cpn>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import ButtonCpn from '../button/button.vue';
-
-export default {
-	name: 'UploadButton',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { ButtonCpn },
-	mixins: [componentName],
-	props: {
-		/** 文件列表 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	computed: {},
-	methods: {},
-};
-</script>