@ecolovo/uniapp-components 1.0.10 → 2.0.1

package/components/uploader/uploader copy.vue

@@ -1,547 +0,0 @@
-<template>
-	<view :class="[componentClassNames, isCardView ? $style['Uploader--card'] : $style['Uploader--list']]">
-		<template v-if="isCardView">
-			<!-- 附件列表 -->
-			<view
-				v-for="(item, index) in currentValue"
-				:key="index"
-				:class="$style['Uploader--file']"
-				@click="previewFile(item)"
-			>
-				<view
-					v-if="!computedReadonly && item.uploadStatus !== 'uploading'"
-					:class="$style['Uploader--icon-close']"
-					@click.stop="deleteFile(item)"
-				>
-				</view>
-				<image
-					v-if="item.fileType === FILE_TYPE_IMAGE"
-					:class="$style['Uploader--image']"
-					mode="aspectFill"
-					:src="item.fileUrl"
-				/>
-				<video
-					v-if="item.fileType === FILE_TYPE_VIDEO"
-					:id="'video_' + item.fileId"
-					: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']]"
-					@click.stop.prevent="previewVideo(item)"
-					@fullscreenchange="stopPreviewVideo"
-				></video>
-				<view v-if="item.uploadStatus === 'error'" :class="$style['Uploader--error']">
-					<view>上传</view>
-					<view>失败</view>
-				</view>
-				<view v-else-if="item.uploadStatus === 'uploading'" :class="$style['Uploader--uploading']">
-					<icon-cpn icon="loading" :class="$style['Uploader--icon-loading']" />
-					上传中
-				</view>
-			</view>
-			<view
-				v-if="!computedReadonly && (max <= 0 || currentValue.length < max)"
-				:class="$style['Uploader--file']"
-				@click="beforeChoose"
-			>
-				<icon-cpn icon="add-photo" :class="$style['Uploader--uploader-icon']" />
-				<view :class="$style['Uploader--uploader-text']">
-					<slot>添加图片</slot>
-				</view>
-			</view>
-		</template>
-		<template v-else>
-			<button-cpn
-				v-if="!computedReadonly && (max <= 0 || currentValue.length < max)"
-				plain
-				:class="$style['Uploader--uploader']"
-				@click="beforeChoose"
-			>
-				<icon-cpn icon="plus-circle" />
-				上传附件
-			</button-cpn>
-			<!-- 附件列表 -->
-			<view v-for="(item, index) in currentValue" :key="index">
-				<view :class="$style['Uploader--file']" @click="previewFile(item)">
-					<icon-cpn icon="attachment" :class="$style['Uploader--icon-attachment']" />
-					<view :class="$style['Uploader--file-name']">{{ item.fileName || item.name }}</view>
-					<icon-cpn
-						v-if="!computedReadonly && item.uploadStatus !== 'uploading'"
-						icon="close-circle-filled"
-						expand-tap-area
-						:class="$style['Uploader--icon-close']"
-						@click.native.stop="deleteFile(item)"
-					/>
-					<view v-else-if="item.uploadStatus === 'uploading'" :class="$style['Uploader--uploading']">
-						<icon-cpn icon="loading" />
-					</view>
-				</view>
-				<view v-if="item.uploadStatus === 'error'" :class="$style['Uploader--error']">上传失败</view>
-			</view>
-		</template>
-
-		<popup-cpn v-if="isSelectTypeVisible" ref="popup" v-model="isSelectTypeVisible" :confirm="false">
-			<button-cpn :class="$style['Uploader--button']" @click="choose('file')">从聊天记录选择文件</button-cpn>
-			<button-cpn :class="$style['Uploader--button']" @click="choose()">
-				拍摄或从相册选择{{ mediaTypeName }}
-			</button-cpn>
-		</popup-cpn>
-
-		<dialog-cpn v-if="isShowVideoPreview" v-model="isShowVideoPreview">
-			<template #custom>
-				<view :class="$style['Uploader--preview-video-wrapper']">
-					<video
-						:src="previewVideoUrl"
-						:autoplay="true"
-						:muted="true"
-						show-mute-btn
-						:class="$style['Uploader--preview-video']"
-					></video>
-					<icon-cpn
-						icon="clear"
-						:class="$style['Uploader--preview-video-close']"
-						@click="isShowVideoPreview = false"
-					></icon-cpn>
-				</view>
-			</template>
-		</dialog-cpn>
-	</view>
-</template>
-
-<script>
-import componentName from '../../mixins/componentName';
-import ButtonCpn from '../button/button.vue';
-import DialogCpn from '../dialog/dialog.vue';
-import IconCpn from '../icon/icon.vue';
-import PopupCpn from '../popup/popup.vue';
-import {
-	FILE_TYPE_IMAGE,
-	FILE_TYPE_VIDEO,
-	FILE_TYPE_FILE,
-	typeStringValidator,
-	typeStringToArr,
-	chooseFile,
-	isImage,
-	isVideo,
-} from './files';
-import { openDocument } from './uni';
-
-export default {
-	name: 'Uploader',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { ButtonCpn, DialogCpn, IconCpn, PopupCpn },
-	mixins: [componentName],
-	inject: {
-		injectReadonly: {
-			from: 'readonly',
-			default: false,
-		},
-	},
-	props: {
-		/** 绑定值 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-		/** 最大上传数量 */
-		max: {
-			type: Number,
-			default: 9,
-		},
-		/** 是否使用卡片样式，不设置的话，如果 type 不包含文件类型，也会使用卡片样式 */
-		card: {
-			type: Boolean,
-			default: null,
-		},
-		/** 上传文件类型 */
-		type: {
-			type: String,
-			validator: typeStringValidator,
-			default: 'all',
-		},
-		/** 选择文件时限制文件类型，仅 type 为 file 或 all 时有效 */
-		selectExtension: {
-			type: String,
-			default: '',
-		},
-		/** 选中文件后文件类型限制 */
-		allowedExtension: {
-			type: String,
-			default: '',
-		},
-		/** 是否只读 */
-		readonly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			FILE_TYPE_IMAGE,
-			FILE_TYPE_VIDEO,
-			/** 是否显示选择文件类型弹窗 */
-			isSelectTypeVisible: false,
-			isShowVideoPreview: false,
-			previewVideoUrl: '',
-		};
-	},
-	computed: {
-		currentValue: {
-			get: function () {
-				return this.value === null ? this.innerValue : this.value;
-			},
-			set: function (value) {
-				this.$emit('input', value);
-				this.innerValue = value;
-				this.$emit('change', value);
-			},
-		},
-		computedReadonly() {
-			return this.readonly || this.injectReadonly;
-		},
-		/** 上传文件类型数组 */
-		typeList() {
-			return typeStringToArr(this.type);
-		},
-		/** 是否可以选择图片类型 */
-		isImageType() {
-			return this.typeList.includes(FILE_TYPE_IMAGE);
-		},
-		/** 是否可以选择视频类型 */
-		isVideoType() {
-			return this.typeList.includes(FILE_TYPE_VIDEO);
-		},
-		/** 是否可以选择文件类型 */
-		isFileType() {
-			return this.typeList.includes(FILE_TYPE_FILE);
-		},
-		/** 是否使用卡片样式 */
-		isCardView() {
-			return typeof this.card === 'boolean' ? this.card : this.isFileType ? false : true;
-		},
-		/** 媒体文件类型 */
-		mediaType() {
-			return [...(this.isImageType ? [FILE_TYPE_IMAGE] : []), ...(this.isVideoType ? [FILE_TYPE_VIDEO] : [])];
-		},
-		/** 媒体文件类型中文文本 */
-		mediaTypeName() {
-			return [...(this.isImageType ? ['图片'] : []), ...(this.isVideoType ? ['视频'] : [])].join('、');
-		},
-		/** 选择文件时过滤的文件后缀数组 */
-		selectExtensionList() {
-			return this.selectExtension ? this.selectExtension.split(',') : undefined;
-		},
-		/** 选择文件后过滤的文件后缀数组 */
-		allowedExtensionList() {
-			return this.allowedExtension ? this.allowedExtension.split(',') : undefined;
-		},
-		/** 图片预览列表 */
-		previewImageList() {
-			return this.currentValue
-				.filter((item) => item.fileType === FILE_TYPE_IMAGE)
-				.map((item) => item.path || item.fileUrl);
-		},
-	},
-	created() {
-		// 处理初始值
-		this.currentValue = (this.value || []).map((item) => {
-			item = { ...item, filePreviewUrl: item.filePreviewUrl || item.fileUrl };
-			if (!item.fileType) {
-				item.fileType = isImage(item.fileExt || item.fileName || item.fileUrl.split('?').shift())
-					? FILE_TYPE_IMAGE
-					: isVideo(item.fileExt || item.fileName || item.fileUrl.split('?').shift())
-					? FILE_TYPE_VIDEO
-					: FILE_TYPE_FILE;
-			}
-			return item;
-		});
-	},
-	methods: {
-		/** 选择前判断文件类型 */
-		async beforeChoose() {
-			// 包含选择文件，且包含图片或视频，需要提示用户选择
-			if (this.isFileType && this.mediaType.length > 0) {
-				this.isSelectTypeVisible = true;
-				return;
-			}
-
-			this.choose(this.isFileType ? 'file' : 'media');
-		},
-		/** 选择文件 */
-		async choose(type = 'media') {
-			this.$refs.popup?.close();
-
-			if (type === 'file') {
-				type = ['file'];
-			} else {
-				type = this.mediaType;
-			}
-
-			const { files, invalidFiles } = await chooseFile({
-				max: this.max <= 0 ? 9 : this.max - this.currentValue.length,
-				type: type,
-				selectExtension: this.selectExtensionList,
-				allowedExtension: this.allowedExtensionList,
-			});
-			if (invalidFiles.length > 0) {
-				this.$toast('已剔除不符合格式的文件');
-			}
-			this.currentValue = this.currentValue.concat(files.map((item) => ({ ...item, uploadStatus: 'uploading' })));
-			if (this.max > 0 && this.currentValue.length >= this.max) {
-				this.$toast(`最多只能上传${this.max}个文件`);
-				this.currentValue = this.currentValue.slice(0, this.max);
-			}
-			this.upload(files);
-		},
-		/** 上传文件 */
-		upload(files) {
-			files.map(async (file) => {
-				try {
-					const res = null;
-					// const res = await httpUpload({ url: apis.common.uploadFile.url, file });
-					const index = this.currentValue.findIndex((item) => item.path === file.path);
-					if (index < 0) {
-						return;
-					}
-					const currentValue = [...this.currentValue];
-					currentValue.splice(index, 1, {
-						fileId: res.fileId,
-						fileName: res.fileName,
-						filePreviewUrl: res.filePreviewUrl,
-						fileUrl: res.fileUrl,
-						fileType: file.type,
-					});
-					this.currentValue = currentValue;
-					return this.currentValue[index];
-				} catch {
-					const index = this.currentValue.findIndex((item) => item.path === file.path);
-					if (index < 0) {
-						return;
-					}
-					const currentValue = [...this.currentValue];
-					currentValue.splice(index, 1, { ...file, uploadStatus: 'error' });
-					this.currentValue = currentValue;
-				}
-			});
-		},
-		/** 删除文件 */
-		deleteFile(file) {
-			const index = this.currentValue.findIndex((item) => file === item);
-			if (index >= 0) {
-				const currentValue = [...this.currentValue];
-				currentValue.splice(index, 1);
-				this.currentValue = currentValue;
-			}
-		},
-		/**
-		 * @param {UploadFile} file 文件
-		 */
-		previewFile(file) {
-			if (file.fileType === FILE_TYPE_IMAGE) {
-				this.previewImage(this.previewImageList.findIndex((item) => item === file.fileUrl));
-			}
-			if (file.fileType === FILE_TYPE_FILE) {
-				openDocument(file.fileUrl, file.fileName).catch((err) => {
-					this.$toast(err);
-				});
-			}
-		},
-		/** 预览图片 */
-		previewImage(index) {
-			uni.previewImage({
-				current: index,
-				urls: this.previewImageList,
-			});
-		},
-		/** 预览视频 */
-		previewVideo(file) {
-			this.isShowVideoPreview = true;
-			this.previewVideoUrl = file.fileUrl;
-		},
-	},
-};
-</script>
-
-<style lang="scss" module>
-@use '../../styles/index' as *;
-
-:host {
-	display: block;
-}
-:host(.display-inline) {
-	display: inline;
-}
-
-.Uploader {
-	width: 100%;
-	position: relative;
-}
-
-.Uploader--card {
-	display: flex;
-	flex-wrap: wrap;
-	text-align: center;
-	margin: 0 calc(-1 * #{get-value('size-l')}) calc(-1 * #{get-value('size-l')}) 0;
-
-	.Uploader--file {
-		position: relative;
-		width: 160rpx;
-		height: 160rpx;
-		margin: 0 get-value('size-l') get-value('size-l') 0;
-		background: get-value('color-background');
-		border-radius: get-value('size-radius-xxs');
-		color: get-value('color-info');
-		font-size: get-value('size-font-s');
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		z-index: 0;
-	}
-	.Uploader--image {
-		width: 100%;
-		height: 100%;
-		border-radius: get-value('size-radius-xxs');
-	}
-	// .Uploader--icon-close {
-	//   position: absolute;
-	//   top: 0;
-	//   right: 0;
-	//   transform: translate(30%, -30%);
-	//   color: get-value('color-danger');
-	//   font-size: get-value('size-font-l');
-	//   z-index: 1;
-	// }
-	.Uploader--icon-close {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: 1;
-		transform: translate(25%, -25%);
-		width: get-value('size-xxxl');
-		height: get-value('size-xxxl');
-		background: red;
-		border-radius: 50%;
-		&:before,
-		&:after {
-			content: '';
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			height: 70%;
-			width: 10%;
-			background: #fff;
-		}
-		&:before {
-			transform: translate(-50%, -50%) rotate(45deg);
-		}
-		&:after {
-			transform: translate(-50%, -50%) rotate(-45deg);
-		}
-	}
-	.Uploader--uploader-icon {
-		font-size: 48rpx;
-		color: get-value('color-info-6');
-	}
-	.Uploader--uploading {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-	.Uploader--icon-loading {
-		font-size: get-value('size-font-l');
-	}
-	.Uploader--error {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		width: 70%;
-		height: 70%;
-		transform: translate(-50%, -50%);
-		border-radius: 50%;
-		background: rgba(255, 255, 255, 0.75);
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-}
-
-.Uploader--list {
-	.Uploader--uploader {
-		#{UTILS__VAR_NAME(height, button)}: 88rpx;
-		#{UTILS__VAR_NAME(border-style, button)}: dashed;
-	}
-	.Uploader--file {
-		position: relative;
-		margin-top: get-value('size-s');
-		width: 100%;
-		height: 88rpx;
-		padding: 0 get-value('size-s');
-		display: flex;
-		justify-content: start;
-		align-items: center;
-		background: get-value('color-background');
-		border-radius: get-value('size-radius-xxs');
-	}
-	.Uploader--file-name {
-		flex: 1;
-		@include UTILS__ELLIPSIS();
-	}
-	.Uploader--icon-attachment {
-		font-size: get-value('size-font-l');
-		color: get-value('color-primary');
-		margin-right: get-value('size-xxs');
-	}
-	.Uploader--uploading,
-	.Uploader--icon-close {
-		position: relative;
-		font-size: get-value('size-font-l');
-		color: get-value('color-info');
-		#{UTILS__VAR_NAME(tap-size, icon)}: 200rpx;
-	}
-	.Uploader--error {
-		color: get-value('color-danger');
-		font-size: get-value('size-font-s');
-		margin: get-value('size-xxs') 0 get-value('size-s') get-value('size-s');
-	}
-	.Uploader--button {
-		margin-bottom: get-value('size-m');
-	}
-}
-
-.Uploader--preview-video-wrapper {
-	width: 80vw;
-	height: 75vh;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-.Uploader--preview-video {
-	width: 100%;
-	height: 100%;
-}
-.Uploader--preview-video-close {
-	position: absolute;
-	color: get-value('color-white');
-	bottom: -20rpx;
-	left: 50%;
-	transform: translate(-50%, 100%);
-	font-size: 80rpx;
-}
-</style>

package/components/uploader/uploader.vue

@@ -1,117 +0,0 @@
-<template>
-	<view :class="componentClassNames">
-		<view v-if="card" :class="$style['Uploader--card-list']" :style="{ '--columns': columns }">
-			<!-- 已上传文件列表 -->
-			<aspect-cpn v-for="img in value" :key="img" :class="$style['Uploader--card-item']" :style="styleWidth">
-				<image-cpn
-					:src="img"
-					:preview-list="value"
-					:class="$style['Uploader--card-image']"
-					:style="styleSize"
-					mode="aspectFill"
-				>
-				</image-cpn>
-			</aspect-cpn>
-			<!-- 上传按钮 -->
-			<aspect-cpn :class="$style['Uploader--card-item']" :style="styleWidth">
-				<button-cpn plain :class="$style['Uploader--card-uploader']">
-					<view style="line-height: 1.3em">
-						<view>上传</view>
-						<view>图片</view>
-					</view>
-				</button-cpn>
-			</aspect-cpn>
-		</view>
-		<view v-else :class="$style['Uploader--list-view']">
-			<view>
-				<button-cpn>上传</button-cpn>
-			</view>
-			<view>
-				<view v-for="file in value" :key="file" :class="$style['Uploader--file-item']">{{ file }}</view>
-			</view>
-		</view>
-	</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';
-
-export default {
-	name: 'Uploader',
-	options: {
-		virtualHost: true,
-		styleIsolation: 'shared',
-	},
-	components: { AspectCpn, ButtonCpn, ImageCpn },
-	mixins: [componentName],
-	props: {
-		/** 文件列表 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-		/** 是否使用卡片样式，不设置的话，如果 type 不包含文件类型，也会使用卡片样式 */
-		card: {
-			type: Boolean,
-			default: false,
-		},
-		/** 显示宽度 */
-		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};`;
-		},
-	},
-	methods: {},
-};
-</script>
-
-<style lang="scss" module>
-.Uploader {
-	width: 100%;
-}
-
-.Uploader--card-uploader {
-	height: 100%;
-	border-color: #ccc;
-	border-radius: 16rpx;
-}
-.Uploader--card-list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 12rpx;
-}
-.Uploader--card-item {
-	width: calc(100% / var(--columns) - 12rpx * (var(--columns) - 1) / var(--columns));
-}
-.Uploader--card-image {
-	border-radius: 16rpx;
-}
-.Uploader--list-view {
-	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/mixins/componentName.js

@@ -1,32 +0,0 @@
-import { kebabCase, pascalCase } from 'case-anything';
-import { componentPrefix } from '../configs';
-
-export default {
-	/* #ifdef MP */
-	data() {
-		return {
-			// 添加 $style 属性，否则在 wxml 中无法使用
-			$style: {},
-		};
-	},
-	/* #endif */
-	computed: {
-		/** 组件公共前缀，大驼峰模式 */
-		componentPrefix() {
-			return pascalCase(componentPrefix);
-		},
-		/** 添加前缀后的组件名-大驼峰模式 */
-		componentClass() {
-			return this.componentPrefix + this.$options.name;
-		},
-		/** 添加前缀后的组件名-短横线模式 */
-		componentKebabClass() {
-			return kebabCase(this.componentClass);
-		},
-		/** 合并后的组件类名 */
-		componentClassNames() {
-			const baseClass = this.$style?.[this.$options.name];
-			return [...(baseClass ? [baseClass] : []), this.componentClass, this.componentKebabClass];
-		},
-	},
-};

package/mixins/listPage.js

@@ -1 +0,0 @@
-export { pulldownRefreshMixin } from '../components/list-page/list-page';

package/mixins/windowInfo.js

@@ -1 +0,0 @@
-export { windowInfoMixin as default } from '../utils/windowInfo';