升级uni-ui到最新版本1.5.7

uni_modules/uni-data-checkbox/changelog.md

@@ -1,3 +1,9 @@
+## 1.0.6（2024-10-22）
+- 新增 当 multiple 为 false 且传递的 value 为 数组时，使用数组第一项用作反显
+## 1.0.5（2024-03-20）
+- 修复 单选模式下选中样式不生效的bug
+## 1.0.4（2024-01-27）
+- 修复 修复错别字chagne为change
 ## 1.0.3（2022-09-16）
 - 可以使用 uni-scss 控制主题色
 ## 1.0.2（2022-06-30）

uni_modules/uni-data-checkbox/components/uni-data-checkbox/clientdb.js

@@ -0,0 +1,316 @@
+
+const events = {
+	load: 'load',
+	error: 'error'
+}
+const pageMode = {
+	add: 'add',
+	replace: 'replace'
+}
+
+const attrs = [
+	'pageCurrent',
+	'pageSize',
+	'collection',
+	'action',
+	'field',
+	'getcount',
+	'orderby',
+	'where'
+]
+
+export default {
+	data() {
+		return {
+			loading: false,
+			listData: this.getone ? {} : [],
+			paginationInternal: {
+				current: this.pageCurrent,
+				size: this.pageSize,
+				count: 0
+			},
+			errorMessage: ''
+		}
+	},
+	created() {
+		let db = null;
+		let dbCmd = null;
+
+		if(this.collection){
+			this.db = uniCloud.database();
+			this.dbCmd = this.db.command;
+		}
+
+		this._isEnded = false
+
+		this.$watch(() => {
+			let al = []
+			attrs.forEach(key => {
+				al.push(this[key])
+			})
+			return al
+		}, (newValue, oldValue) => {
+			this.paginationInternal.pageSize = this.pageSize
+
+			let needReset = false
+			for (let i = 2; i < newValue.length; i++) {
+				if (newValue[i] != oldValue[i]) {
+					needReset = true
+					break
+				}
+			}
+			if (needReset) {
+				this.clear()
+				this.reset()
+			}
+			if (newValue[0] != oldValue[0]) {
+				this.paginationInternal.current = this.pageCurrent
+			}
+
+			this._execLoadData()
+		})
+
+		// #ifdef H5
+		if (process.env.NODE_ENV === 'development') {
+			this._debugDataList = []
+			if (!window.unidev) {
+				window.unidev = {
+					clientDB: {
+						data: []
+					}
+				}
+			}
+			unidev.clientDB.data.push(this._debugDataList)
+		}
+		// #endif
+
+		// #ifdef MP-TOUTIAO
+		let changeName
+		let events = this.$scope.dataset.eventOpts
+		for (let i = 0; i < events.length; i++) {
+			let event = events[i]
+			if (event[0].includes('^load')) {
+				changeName = event[1][0][0]
+			}
+		}
+		if (changeName) {
+			let parent = this.$parent
+			let maxDepth = 16
+			this._changeDataFunction = null
+			while (parent && maxDepth > 0) {
+				let fun = parent[changeName]
+				if (fun && typeof fun === 'function') {
+					this._changeDataFunction = fun
+					maxDepth = 0
+					break
+				}
+				parent = parent.$parent
+				maxDepth--;
+			}
+		}
+		// #endif
+
+		// if (!this.manual) {
+		// 	this.loadData()
+		// }
+	},
+	// #ifdef H5
+	beforeDestroy() {
+		if (process.env.NODE_ENV === 'development' && window.unidev) {
+			let cd = this._debugDataList
+			let dl = unidev.clientDB.data
+			for (let i = dl.length - 1; i >= 0; i--) {
+				if (dl[i] === cd) {
+					dl.splice(i, 1)
+					break
+				}
+			}
+		}
+	},
+	// #endif
+	methods: {
+		loadData(args1, args2) {
+			let callback = null
+			if (typeof args1 === 'object') {
+				if (args1.clear) {
+					this.clear()
+					this.reset()
+				}
+				if (args1.current !== undefined) {
+					this.paginationInternal.current = args1.current
+				}
+				if (typeof args2 === 'function') {
+					callback = args2
+				}
+			} else if (typeof args1 === 'function') {
+				callback = args1
+			}
+
+			this._execLoadData(callback)
+		},
+		loadMore() {
+			if (this._isEnded) {
+				return
+			}
+			this._execLoadData()
+		},
+		refresh() {
+			this.clear()
+			this._execLoadData()
+		},
+		clear() {
+			this._isEnded = false
+			this.listData = []
+		},
+		reset() {
+			this.paginationInternal.current = 1
+		},
+		remove(id, {
+			action,
+			callback,
+			confirmTitle,
+			confirmContent
+		} = {}) {
+			if (!id || !id.length) {
+				return
+			}
+			uni.showModal({
+				title: confirmTitle || '提示',
+				content: confirmContent || '是否删除该数据',
+				showCancel: true,
+				success: (res) => {
+					if (!res.confirm) {
+						return
+					}
+					this._execRemove(id, action, callback)
+				}
+			})
+		},
+		_execLoadData(callback) {
+			if (this.loading) {
+				return
+			}
+			this.loading = true
+			this.errorMessage = ''
+
+			this._getExec().then((res) => {
+				this.loading = false
+				const {
+					data,
+					count
+				} = res.result
+				this._isEnded = data.length < this.pageSize
+
+				callback && callback(data, this._isEnded)
+				this._dispatchEvent(events.load, data)
+
+				if (this.getone) {
+					this.listData = data.length ? data[0] : undefined
+				} else if (this.pageData === pageMode.add) {
+					this.listData.push(...data)
+					if (this.listData.length) {
+						this.paginationInternal.current++
+					}
+				} else if (this.pageData === pageMode.replace) {
+					this.listData = data
+					this.paginationInternal.count = count
+				}
+
+				// #ifdef H5
+				if (process.env.NODE_ENV === 'development') {
+					this._debugDataList.length = 0
+					this._debugDataList.push(...JSON.parse(JSON.stringify(this.listData)))
+				}
+				// #endif
+			}).catch((err) => {
+				this.loading = false
+				this.errorMessage = err
+				callback && callback()
+				this.$emit(events.error, err)
+			})
+		},
+		_getExec() {
+			let exec = this.db
+			if (this.action) {
+				exec = exec.action(this.action)
+			}
+
+			exec = exec.collection(this.collection)
+
+			if (!(!this.where || !Object.keys(this.where).length)) {
+				exec = exec.where(this.where)
+			}
+			if (this.field) {
+				exec = exec.field(this.field)
+			}
+			if (this.orderby) {
+				exec = exec.orderBy(this.orderby)
+			}
+
+			const {
+				current,
+				size
+			} = this.paginationInternal
+			exec = exec.skip(size * (current - 1)).limit(size).get({
+				getCount: this.getcount
+			})
+
+			return exec
+		},
+		_execRemove(id, action, callback) {
+			if (!this.collection || !id) {
+				return
+			}
+
+			const ids = Array.isArray(id) ? id : [id]
+			if (!ids.length) {
+				return
+			}
+
+			uni.showLoading({
+				mask: true
+			})
+
+			let exec = this.db
+			if (action) {
+				exec = exec.action(action)
+			}
+
+			exec.collection(this.collection).where({
+				_id: dbCmd.in(ids)
+			}).remove().then((res) => {
+				callback && callback(res.result)
+				if (this.pageData === pageMode.replace) {
+					this.refresh()
+				} else {
+					this.removeData(ids)
+				}
+			}).catch((err) => {
+				uni.showModal({
+					content: err.message,
+					showCancel: false
+				})
+			}).finally(() => {
+				uni.hideLoading()
+			})
+		},
+		removeData(ids) {
+			let il = ids.slice(0)
+			let dl = this.listData
+			for (let i = dl.length - 1; i >= 0; i--) {
+				let index = il.indexOf(dl[i]._id)
+				if (index >= 0) {
+					dl.splice(i, 1)
+					il.splice(index, 1)
+				}
+			}
+		},
+		_dispatchEvent(type, data) {
+			if (this._changeDataFunction) {
+				this._changeDataFunction(data, this._isEnded)
+			} else {
+				this.$emit(type, data, this._isEnded)
+			}
+		}
+	}
+}

uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue

@@ -2,16 +2,21 @@
 	<view class="uni-data-checklist" :style="{'margin-top':isTop+'px'}">
 		<template v-if="!isLocal">
 			<view class="uni-data-loading">
-				<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18" :content-text="contentText"></uni-load-more>
+				<uni-load-more v-if="!mixinDatacomErrorMessage" status="loading" iconType="snow" :iconSize="18"
+					:content-text="contentText"></uni-load-more>
 				<text v-else>{{mixinDatacomErrorMessage}}</text>
 			</view>
 		</template>
 		<template v-else>
-			<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}" @change="chagne">
-				<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
-				 :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
-					<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''" :checked="item.selected" />
-					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="checkbox__inner"  :style="item.styleIcon">
+			<checkbox-group v-if="multiple" class="checklist-group" :class="{'is-list':mode==='list' || wrap}"
+				@change="change">
+				<label class="checklist-box"
+					:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+					:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<checkbox class="hidden" hidden :disabled="disabled || !!item.disabled" :value="item[map.value]+''"
+						:checked="item.selected" />
+					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')"
+						class="checkbox__inner" :style="item.styleIcon">
 						<view class="checkbox__inner-icon"></view>
 					</view>
 					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
@@ -20,13 +25,14 @@
 					</view>
 				</label>
 			</checkbox-group>
-			<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="chagne">
-				<!-- -->
-				<label class="checklist-box" :class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
-				 :style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
-					<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''" :checked="item.selected" />
+			<radio-group v-else class="checklist-group" :class="{'is-list':mode==='list','is-wrap':wrap}" @change="change">
+				<label class="checklist-box"
+					:class="['is--'+mode,item.selected?'is-checked':'',(disabled || !!item.disabled)?'is-disable':'',index!==0&&mode==='list'?'is-list-border':'']"
+					:style="item.styleBackgroud" v-for="(item,index) in dataList" :key="index">
+					<radio class="hidden" hidden :disabled="disabled || item.disabled" :value="item[map.value]+''"
+						:checked="item.selected" />
 					<view v-if="(mode !=='tag' && mode !== 'list') || ( mode === 'list' && icon === 'left')" class="radio__inner"
-					 :style="item.styleBackgroud">
+						:style="item.styleBackgroud">
 						<view class="radio__inner-icon" :style="item.styleIcon"></view>
 					</view>
 					<view class="checklist-content" :class="{'list-content':mode === 'list' && icon ==='left'}">
@@ -68,7 +74,7 @@
 	export default {
 		name: 'uniDataChecklist',
 		mixins: [uniCloud.mixinDatacom || {}],
-		emits:['input','update:modelValue','change'],
+		emits: ['input', 'update:modelValue', 'change'],
 		props: {
 			mode: {
 				type: String,
@@ -88,7 +94,7 @@
 			// TODO vue3
 			modelValue: {
 				type: [Array, String, Number],
-				default() {
+				default () {
 					return '';
 				}
 			},
@@ -122,20 +128,20 @@
 				type: String,
 				default: ''
 			},
-			emptyText:{
+			emptyText: {
 				type: String,
 				default: '暂无数据'
 			},
-			disabled:{
+			disabled: {
 				type: Boolean,
 				default: false
 			},
-			map:{
+			map: {
 				type: Object,
-				default(){
+				default () {
 					return {
-						text:'text',
-						value:'value'
+						text: 'text',
+						value: 'value'
 					}
 				}
 			}
@@ -177,18 +183,18 @@
 					contentrefresh: '加载中',
 					contentnomore: '没有更多'
 				},
-				isLocal:true,
+				isLocal: true,
 				styles: {
 					selectedColor: '#2979ff',
 					selectedTextColor: '#666',
 				},
-				isTop:0
+				isTop: 0
 			};
 		},
-		computed:{
-			dataValue(){
-				if(this.value === '')return this.modelValue
-				if(this.modelValue === '') return this.value
+		computed: {
+			dataValue() {
+				if (this.value === '') return this.modelValue
+				if (this.modelValue === '') return this.value
 				return this.value
 			}
 		},
@@ -223,15 +229,15 @@
 		},
 		methods: {
 			loadData() {
-				this.mixinDatacomGet().then(res=>{
+				this.mixinDatacomGet().then(res => {
 					this.mixinDatacomResData = res.result.data
-					if(this.mixinDatacomResData.length === 0){
+					if (this.mixinDatacomResData.length === 0) {
 						this.isLocal = false
 						this.mixinDatacomErrorMessage = this.emptyText
-					}else{
+					} else {
 						this.isLocal = true
 					}
-				}).catch(err=>{
+				}).catch(err => {
 					this.mixinDatacomErrorMessage = err.message
 				})
 			},
@@ -248,7 +254,7 @@
 				}
 				return parent;
 			},
-			chagne(e) {
+			change(e) {
 				const values = e.detail.value
 
 				let detail = {
@@ -303,6 +309,10 @@
 					if (!Array.isArray(value)) {
 						value = []
 					}
+				} else {
+					if (Array.isArray(value) && value.length) {
+						value = value[0]
+					}
 				}
 				dataList.forEach((item, index) => {
 					item.disabled = item.disable || item.disabled || false
@@ -383,13 +393,13 @@
 			 */
 			setStyleBackgroud(item) {
 				let styles = {}
-				let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+				let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
 				if (this.selectedColor) {
 					if (this.mode !== 'list') {
-						styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+						styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
 					}
 					if (this.mode === 'tag') {
-						styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
+						styles['background-color'] = item.selected ? selectedColor : '#f5f5f5'
 					}
 				}
 				let classles = ''
@@ -402,13 +412,13 @@
 				let styles = {}
 				let classles = ''
 				if (this.selectedColor) {
-					let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
-					styles['background-color'] = item.selected?selectedColor:'#fff'
-					styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
-					
-					if(!item.selected && item.disabled){
+					let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
+					styles['background-color'] = item.selected ? selectedColor : '#fff'
+					styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
+
+					if (!item.selected && item.disabled) {
 						styles['background-color'] = '#F2F6FC'
-						styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
+						styles['border-color'] = item.selected ? selectedColor : '#DCDFE6'
 					}
 				}
 				for (let i in styles) {
@@ -420,13 +430,13 @@
 				let styles = {}
 				let classles = ''
 				if (this.selectedColor) {
-					let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
+					let selectedColor = this.selectedColor ? this.selectedColor : '#2979ff'
 					if (this.mode === 'tag') {
-						styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
+						styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : '#fff') : '#666'
 					} else {
-						styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:selectedColor):'#666'
+						styles.color = item.selected ? (this.selectedTextColor ? this.selectedTextColor : selectedColor) : '#666'
 					}
-					if(!item.selected && item.disabled){
+					if (!item.selected && item.disabled) {
 						styles.color = '#999'
 					}
 				}
@@ -439,7 +449,7 @@
 				let styles = {}
 				let classles = ''
 				if (this.mode === 'list') {
-					styles['border-color'] = item.selected?this.styles.selectedColor:'#DCDFE6'
+					styles['border-color'] = item.selected ? this.styles.selectedColor : '#DCDFE6'
 				}
 				for (let i in styles) {
 					classles += `${i}:${styles[i]};`
@@ -454,7 +464,7 @@
 <style lang="scss">
 	$uni-primary: #2979ff !default;
 	$border-color: #DCDFE6;
-	$disable:0.4;
+	$disable: 0.4;
 
 	@mixin flex {
 		/* #ifndef APP-NVUE */
@@ -476,6 +486,7 @@
 		position: relative;
 		z-index: 0;
 		flex: 1;
+
 		// 多选样式
 		.checklist-group {
 			@include flex;
@@ -506,6 +517,7 @@
 					flex-direction: row;
 					align-items: center;
 					justify-content: space-between;
+
 					.checklist-text {
 						font-size: 14px;
 						color: #666;
@@ -517,7 +529,7 @@
 						border-right-width: 1px;
 						border-right-color: #007aff;
 						border-right-style: solid;
-						border-bottom-width:1px;
+						border-bottom-width: 1px;
 						border-bottom-color: #007aff;
 						border-bottom-style: solid;
 						height: 12px;
@@ -542,6 +554,7 @@
 					border-radius: 4px;
 					background-color: #fff;
 					z-index: 1;
+
 					.checkbox__inner-icon {
 						position: absolute;
 						/* #ifdef APP-NVUE */
@@ -556,7 +569,7 @@
 						border-right-width: 1px;
 						border-right-color: #fff;
 						border-right-style: solid;
-						border-bottom-width:1px ;
+						border-bottom-width: 1px;
 						border-bottom-color: #fff;
 						border-bottom-style: solid;
 						opacity: 0;
@@ -597,6 +610,7 @@
 					&.is-disable {
 						/* #ifdef H5 */
 						cursor: not-allowed;
+
 						/* #endif */
 						.checkbox__inner {
 							background-color: #F2F6FC;
@@ -610,6 +624,7 @@
 							background-color: #F2F6FC;
 							border-color: $border-color;
 						}
+
 						.checklist-text {
 							color: #999;
 						}
@@ -626,16 +641,20 @@
 								transform: rotate(45deg);
 							}
 						}
+
 						.radio__inner {
 							border-color: $uni-primary;
+
 							.radio__inner-icon {
 								opacity: 1;
 								background-color: $uni-primary;
 							}
 						}
+
 						.checklist-text {
 							color: $uni-primary;
 						}
+
 						// 选中禁用
 						&.is-disable {
 							.checkbox__inner {
@@ -645,6 +664,7 @@
 							.checklist-text {
 								opacity: $disable;
 							}
+
 							.radio__inner {
 								opacity: $disable;
 							}
@@ -667,6 +687,7 @@
 						/* #endif */
 						border: 1px #eee solid;
 						opacity: $disable;
+
 						.checkbox__inner {
 							background-color: #F2F6FC;
 							border-color: $border-color;
@@ -674,6 +695,7 @@
 							cursor: not-allowed;
 							/* #endif */
 						}
+
 						.radio__inner {
 							background-color: #F2F6FC;
 							border-color: $border-color;
@@ -681,6 +703,7 @@
 							cursor: not-allowed;
 							/* #endif */
 						}
+
 						.checklist-text {
 							color: #999;
 						}
@@ -688,9 +711,11 @@
 
 					&.is-checked {
 						border-color: $uni-primary;
+
 						.checkbox__inner {
 							border-color: $uni-primary;
 							background-color: $uni-primary;
+
 							.checkbox__inner-icon {
 								opacity: 1;
 								transform: rotate(45deg);
@@ -747,6 +772,7 @@
 						}
 					}
 				}
+
 				// 列表样式
 				&.is--list {
 					/* #ifndef APP-NVUE */
@@ -764,6 +790,7 @@
 					&.is-disable {
 						/* #ifdef H5 */
 						cursor: not-allowed;
+
 						/* #endif */
 						.checkbox__inner {
 							background-color: #F2F6FC;
@@ -772,6 +799,7 @@
 							cursor: not-allowed;
 							/* #endif */
 						}
+
 						.checklist-text {
 							color: #999;
 						}
@@ -787,11 +815,15 @@
 								transform: rotate(45deg);
 							}
 						}
+
 						.radio__inner {
+							border-color: $uni-primary;
 							.radio__inner-icon {
 								opacity: 1;
+								background-color: $uni-primary;
 							}
 						}
+
 						.checklist-text {
 							color: $uni-primary;
 						}

uni_modules/uni-data-checkbox/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-data-checkbox",
   "displayName": "uni-data-checkbox 数据选择器",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "通过数据驱动的单选框和复选框",
   "keywords": [
     "uni-ui",
@@ -43,12 +43,15 @@
     "platforms": {
       "cloud": {
         "tcb": "y",
-        "aliyun": "y"
+        "aliyun": "y",
+        "alipay": "n"
       },
       "client": {
         "App": {
-          "app-vue": "y",
-          "app-nvue": "y"
+            "app-vue": "y",
+            "app-nvue": "y",
+            "app-harmony": "u",
+            "app-uvue": "u"
         },
         "H5-mobile": {
           "Safari": "y",