@ecolovo/uniapp-components 1.0.4 → 1.0.5

package/components/aspect/aspect.vue

@@ -1,7 +1,7 @@
 <template>
 	<view :class="componentClassNames">
 		<view :class="$style['Aspect--content-wrapper']" :style="{ paddingTop: 100 / ratio + '%' }">
-			<view :class="$style['Aspect--content']">
+			<view :class="$style['Aspect--content']" @click="$emit('click')">
 				<slot></slot>
 			</view>
 		</view>

package/components/button/button.vue

@@ -21,7 +21,7 @@
 		]"
 		:hover-class="disabled ? 'none' : $style['Button--active']"
 		:style="buttonTheme"
-		@click.stop="onClick"
+		@click="onClick"
 		@getphonenumber="onOpenType('getphonenumber', $event)"
 		@agreeprivacyauthorization="onOpenType('agreeprivacyauthorization', $event)"
 	>

package/components/checkbox/checkbox.vue

@@ -1,6 +1,7 @@
 <template>
 	<view :class="componentClassNames" @click="toggle()">
 		<icon-cpn
+			v-if="checkboxGroupProps.icon"
 			:icon="usingIcon || ''"
 			tap-size="50rpx"
 			:class="[$style['Checkbox--icon'], { [$style['Checkbox--checked']]: isChecked }]"
@@ -42,7 +43,7 @@ export default {
 		},
 	},
 	props: {
-		/** 值 */
+		/** 当在 checkbox-group 中时，这个值用于选项值；否则用于 v-model ，只能是 boolean 类型 */
 		value: {
 			type: [Number, String, Boolean, null],
 			default: null,
@@ -114,16 +115,16 @@ export default {
 				}
 				return this.value === null ? this.innerChecked : this.value;
 			},
-			set(value) {
-				this.$emit('input', value);
-				this.innerChecked = value;
-				this.$emit('change', this.innerChecked);
+			set(val) {
+				this.$emit('input', val);
+				this.innerChecked = val;
+				this.$emit('change', val);
 			},
 		},
 	},
 	methods: {
 		/** 切换选择 */
-		toggle(isChecked) {
+		toggle(checked) {
 			if (this.isReadonly) return;
 
 			if (this.isInGroup) {
@@ -131,13 +132,13 @@ export default {
 				return;
 			}
 
-			if (isChecked === undefined || isChecked === null) {
+			if (checked === undefined || checked === null) {
 				this.isChecked = !this.isChecked;
 				return;
 			}
 
-			if (this.isChecked !== !!isChecked) {
-				this.isChecked = !!isChecked;
+			if (this.isChecked !== !!checked) {
+				this.isChecked = !!checked;
 			}
 		},
 	},
@@ -167,6 +168,7 @@ $component-vars: $checkbox;
 	}
 	.Checkbox--icon {
 		flex: none;
+		margin-right: 12rpx;
 		color: UTILS__LOCAL_VAR(unchecked-color);
 	}
 	.Checkbox--checked {
@@ -177,7 +179,6 @@ $component-vars: $checkbox;
 	}
 	.Checkbox--text {
 		flex: 0 1 auto;
-		margin-left: 12rpx;
 	}
 }
 </style>

package/components/checkbox-group/checkbox-group.vue

@@ -32,6 +32,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/** 是否显示勾选图标 */
+		icon: {
+			type: Boolean,
+			default: true,
+		},
 		/** 选中时的图标 */
 		checkedIcon: {
 			type: String,
@@ -53,37 +58,38 @@ export default {
 			get: function () {
 				return this.value === null ? this.checkedValue : this.value;
 			},
-			set: function (value) {
-				this.$emit('input', value);
-				this.checkedValue = value;
-				this.$emit('change', this.checkedValue);
+			set: function (val) {
+				this.$emit('input', val);
+				this.checkedValue = val;
+				this.$emit('change', val);
 			},
 		},
 	},
 	watch: {
 		value: {
-			handler: function (value) {
-				this.checkedValue = value;
+			handler: function (val) {
+				this.checkedValue = val;
 			},
 			immediate: true,
+			deep: true,
 		},
 	},
 	methods: {
-		check(value) {
+		check(val) {
 			if (this.radio) {
-				this.currentValue = value;
+				this.currentValue = val;
 				return;
 			}
 
 			if (!Array.isArray(this.currentValue)) {
-				this.currentValue = [value];
+				this.currentValue = [val];
 				return;
 			}
 
-			if (this.currentValue.includes(value)) {
-				this.currentValue = this.currentValue.filter((item) => item !== value);
+			if (this.currentValue.includes(val)) {
+				this.currentValue = this.currentValue.filter((item) => item !== val);
 			} else {
-				this.currentValue.push(value);
+				this.currentValue.push(val);
 			}
 		},
 	},

package/components/checkbox-group2/checkbox-group2.vue

@@ -4,6 +4,7 @@
 			v-for="(item, index) in options"
 			:key="index"
 			:value="radio ? item.value === currentValue : currentValue && currentValue.includes(item.value)"
+			:icon="icon"
 			:checked-icon="checkedIcon || (radio ? 'radio-checked' : 'checkbox-checked')"
 			:unchecked-icon="uncheckedIcon || (radio ? 'radio-unchecked' : 'checkbox-unchecked')"
 			:class="$style['CheckboxGroup2--item']"
@@ -42,6 +43,11 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		/** 是否显示勾选图标 */
+		icon: {
+			type: Boolean,
+			default: true,
+		},
 		/** 选中时的图标 */
 		checkedIcon: {
 			type: String,
@@ -63,10 +69,10 @@ export default {
 			get() {
 				return this.value === null ? this.checkedValue : this.value;
 			},
-			set(value) {
-				this.$emit('input', value);
-				this.checkedValue = value;
-				this.$emit('change', this.checkedValue);
+			set(val) {
+				this.$emit('input', val);
+				this.checkedValue = val;
+				this.$emit('change', val);
 			},
 		},
 		optionsValue() {
@@ -74,21 +80,21 @@ export default {
 		},
 	},
 	methods: {
-		check(value) {
+		check(val) {
 			if (this.radio) {
-				this.currentValue = value;
+				this.currentValue = val;
 				return;
 			}
 
 			if (!Array.isArray(this.currentValue)) {
-				this.currentValue = [value];
+				this.currentValue = [val];
 				return;
 			}
 
-			if (this.currentValue.includes(value)) {
-				this.currentValue = this.currentValue.filter((item) => item !== value);
+			if (this.currentValue.includes(val)) {
+				this.currentValue = this.currentValue.filter((item) => item !== val);
 			} else {
-				this.currentValue.push(value);
+				this.currentValue.push(val);
 			}
 		},
 		/** 切换全选

package/components/checkbox-group2/checkbox.vue

@@ -1,6 +1,7 @@
 <template>
 	<view :class="componentClassNames" @click="toggle()">
 		<icon-cpn
+			v-if="icon"
 			:icon="currentValue ? checkedIcon || 'checkbox-checked' : uncheckedIcon || 'checkbox-unchecked'"
 			tap-size="50rpx"
 			:class="[$style['Checkbox2--icon'], { [$style['Checkbox2--checked']]: currentValue }]"
@@ -29,6 +30,11 @@ export default {
 			type: [Boolean, null],
 			default: null,
 		},
+		/** 是否显示勾选图标 */
+		icon: {
+			type: Boolean,
+			default: true,
+		},
 		/** 选中时的图标 */
 		checkedIcon: {
 			type: String,
@@ -50,23 +56,23 @@ export default {
 			get: function () {
 				return this.value === null ? this.innerValue : this.value;
 			},
-			set: function (value) {
-				this.$emit('input', value);
-				this.innerValue = value;
-				this.$emit('change', this.innerValue);
+			set: function (val) {
+				this.$emit('input', val);
+				this.innerValue = val;
+				this.$emit('change', val);
 			},
 		},
 	},
 	methods: {
 		/** 切换选择 */
-		toggle(isSelected) {
-			if (isSelected === undefined || isSelected === null) {
+		toggle(checked) {
+			if (checked === undefined || checked === null) {
 				this.currentValue = !this.currentValue;
 				return;
 			}
 
-			if (this.currentValue !== !!isSelected) {
-				this.currentValue = !!isSelected;
+			if (this.currentValue !== !!checked) {
+				this.currentValue = !!checked;
 			}
 		},
 	},
@@ -90,6 +96,7 @@ $component-vars: $checkbox;
 
 	.Checkbox2--icon {
 		flex: none;
+		margin-right: 12rpx;
 		color: UTILS__LOCAL_VAR(unchecked-color);
 	}
 	.Checkbox2--checked {
@@ -97,7 +104,6 @@ $component-vars: $checkbox;
 	}
 	.Checkbox2--text {
 		flex: 0 1 auto;
-		margin-left: 12rpx;
 	}
 }
 </style>

package/components/uploader/media-uploader.vue

@@ -1,7 +1,7 @@
 <template>
 	<view :class="componentClassNames" :style="{ '--columns': columns }">
 		<!-- 已上传文件列表 -->
-		<aspect-cpn v-for="(item, idx) in assetsList" :key="idx" :class="$style['Uploader--item']" :style="styleWidth">
+		<aspect-cpn v-for="(item, idx) in fileList" :key="idx" :class="$style['Uploader--item']" :style="styleWidth">
 			<!-- TODO: 视频文件支持 -->
 			<!-- <video
 				v-if="item.fileType === 'video'"
@@ -24,21 +24,30 @@
 				: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="item.uploadStatus !== 'uploading'"
+				v-if="!isReadonly && item.uploadStatus !== 'uploading'"
 				:class="$style['Uploader--icon-delete']"
 				@click.stop="deleteFile(idx)"
 			>
 			</view>
 		</aspect-cpn>
 		<!-- 上传按钮 -->
-		<aspect-cpn :class="$style['Uploader--item']" :style="styleWidth">
-			<button-cpn plain :class="$style['Uploader--button']" @click="selectFile">
-				<view style="line-height: 1.3em">
-					<view>上传</view>
-					<view>图片</view>
-				</view>
-			</button-cpn>
+		<aspect-cpn v-if="!isReadonly" :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>
@@ -48,6 +57,7 @@ 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 {
@@ -56,7 +66,7 @@ export default {
 		virtualHost: true,
 		styleIsolation: 'shared',
 	},
-	components: { AspectCpn, ButtonCpn, ImageCpn },
+	components: { AspectCpn, ButtonCpn, ImageCpn, LoadingCpn },
 	mixins: [componentName, UploadMixin],
 	props: {
 		/** 显示宽度 */
@@ -78,7 +88,7 @@ export default {
 		},
 		/** 预览列表 */
 		previewList() {
-			return this.assetsList.map((item) => item.tempFilePath || item.url);
+			return this.fileList.map((item) => item.tempFilePath || item.url);
 		},
 	},
 	methods: {
@@ -88,7 +98,10 @@ export default {
 				mediaType: ['image', 'video'],
 				sourceType: ['album', 'camera'],
 				success: (res) => {
-					this.validateFiles(res.tempFiles);
+					const files = this.validateFiles(res.tempFiles);
+					if (this.autoUpload && files) {
+						this.upload();
+					}
 				},
 			});
 		},
@@ -105,11 +118,39 @@ export default {
 }
 
 .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;

package/components/uploader/mixin.js

@@ -1,18 +1,40 @@
+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,
@@ -20,79 +42,122 @@ export default {
 	},
 	data() {
 		return {
-			innerValue: [],
+			innerValue: this.value,
 		};
 	},
 	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);
-			},
+		isReadonly() {
+			return this.readonly || this.isFormReadonly;
 		},
+		/** 剩余可上传文件数 */
 		restCount() {
 			if (this.max <= 0) return 9;
 			return this.max - this.currentValue.length;
 		},
-		assetsList() {
+		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: {
 		/** 校验待上传文件 */
-		async validateFiles(files) {
+		validateFiles(files) {
 			if (files.length === 0) return;
 
 			// 过滤大文件
-			const validFiles = files.filter((file) => file.size <= this.maxSize);
-			if (validFiles.length < files.length) {
-				uni.showToast({ icon: 'none', title: '已过滤超出大小限制的文件', duration: 2000 });
+			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 (validFiles.length === 0) return;
+			if (selectedFiles.length === 0) return;
 
 			// 校验数量
-			if (validFiles.length > this.restCount) {
+			if (selectedFiles.length > this.restCount) {
 				uni.showToast({ icon: 'none', title: `最多只能上传${this.max}个文件`, duration: 2000 });
 			}
-			this.currentValue = this.currentValue.concat(
-				validFiles.slice(0, this.restCount).map((file) => ({ ...file, uploadStatus: 'ready' }))
-			);
+
+			const validFiles = selectedFiles
+				.slice(0, this.restCount)
+				.map((file) => ({ ...file, uploadStatus: 'ready' }));
+			this.currentValue = this.fileList.concat(validFiles);
+
+			return validFiles;
 		},
 		/** 上传文件 */
-		upload(files) {
-			files.map(async (file) => {
-				try {
-					const res = await this.uploadHandler(file);
-					const index = this.currentValue.findIndex((item) => item.tempFilePath === file.tempFilePath);
-					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.tempFilePath === file.tempFilePath);
-					if (index < 0) {
-						return;
+		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];
 					}
-					const currentValue = [...this.currentValue];
-					currentValue.splice(index, 1, { ...file, uploadStatus: 'error' });
-					this.currentValue = currentValue;
-				}
-			});
+				})
+			);
 		},
 		/** 删除文件 */
 		deleteFile(index) {

package/package.json

@@ -1,15 +1,16 @@
 {
-  "name": "@ecolovo/uniapp-components",
-  "version": "1.0.4",
-  "description": "Ecolovo UniApp 组件库",
-  "keywords": [
-    "uniapp",
-    "components"
-  ],
-  "author": "Yang",
-  "license": "ISC",
-  "dependencies": {
-    "case-anything": "3.1.2",
-    "lodash-es": "4.17.21"
-  }
-}
+	"name": "@ecolovo/uniapp-components",
+	"version": "1.0.5",
+	"description": "Ecolovo UniApp 组件库",
+	"keywords": [
+		"uniapp",
+		"components"
+	],
+	"author": "Yang",
+	"license": "ISC",
+	"packageManager": "pnpm@10.10.0",
+	"dependencies": {
+		"case-anything": "3.1.2",
+		"lodash-es": "4.17.21"
+	}
+}

package/utils/fileSize.js

@@ -0,0 +1,39 @@
+import { floor } from './floor';
+
+const ONE_KB = 1024;
+const ONE_MB = ONE_KB * 1024;
+const ONE_GB = ONE_MB * 1024;
+
+/**
+ * 格式化文件尺寸
+ * @param {number} size 文件大小 B
+ * @returns {{
+ *  size: number;
+ *  unit: 'B' | 'KB' | 'MB' | 'GB';
+ *  formattedSize: string;
+ * }} 格式化后的大小
+ */
+export function fileSize(size) {
+	if (size < 0) {
+		return { size: -1, unit: 'B', formattedSize: '' };
+	}
+	const rtnObj = {};
+	if (size < 100) {
+		rtnObj.size = size;
+		rtnObj.unit = 'B';
+	} else if (size < ONE_KB) {
+		rtnObj.size = floor(size / ONE_KB, 2);
+		rtnObj.unit = 'KB';
+	} else if (size < ONE_MB) {
+		rtnObj.size = floor(size / ONE_KB, 0);
+		rtnObj.unit = 'KB';
+	} else if (size < ONE_GB) {
+		rtnObj.size = floor(size / ONE_MB, 1);
+		rtnObj.unit = 'MB';
+	} else {
+		rtnObj.size = floor(size / ONE_GB, 1);
+		rtnObj.unit = 'GB';
+	}
+	rtnObj.formattedSize = `${rtnObj.size} ${rtnObj.unit}`;
+	return rtnObj;
+}