uview-ultra-plus 1.0.0

package/uview-ultra/components/up-collapse-item/collapseItem.js

@@ -0,0 +1,26 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/collapseItem.js
+ */
+export default {
+    // collapseItem 组件
+    collapseItem: {
+        title: '',
+        value: '',
+        label: '',
+        disabled: false,
+        isLink: true,
+        clickable: true,
+        border: true,
+        align: 'left',
+        name: '',
+        icon: '',
+        duration: 300,
+        showRight: true
+    }
+}

package/uview-ultra/components/up-collapse-item/collapseItem.uts

@@ -0,0 +1,26 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-07-05 9:00:08
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-07-05 9:00:08
+ * @FilePath     : /uview-ultra/libs/config/props/collapseItem
+ */
+export default {
+    // collapseItem 组件
+    collapseItem: {
+        title: '',
+        value: '',
+        label: '',
+        disabled: false,
+        isLink: true,
+        clickable: true,
+        border: true,
+        align: 'left',
+        name: '',
+        icon: '',
+        duration: 300,
+        showRight: true
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-collapse-item/props.js

@@ -0,0 +1,66 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: () => defProps.collapseItem.title
+        },
+        // 标题右侧内容
+        value: {
+            type: String,
+            default: () => defProps.collapseItem.value
+        },
+        // 标题下方的描述信息
+        label: {
+            type: String,
+            default: () => defProps.collapseItem.label
+        },
+        // 是否禁用折叠面板
+        disabled: {
+            type: Boolean,
+            default: () => defProps.collapseItem.disabled
+        },
+        // 是否展示右侧箭头并开启点击反馈
+        isLink: {
+            type: Boolean,
+            default: () => defProps.collapseItem.isLink
+        },
+        // 是否开启点击反馈
+        clickable: {
+            type: Boolean,
+            default: () => defProps.collapseItem.clickable
+        },
+        // 是否显示内边框
+        border: {
+            type: Boolean,
+            default: () => defProps.collapseItem.border
+        },
+        // 标题的对齐方式
+        align: {
+            type: String,
+            default: () => defProps.collapseItem.align
+        },
+        // 唯一标识符
+        name: {
+            type: [String, Number],
+            default: () => defProps.collapseItem.name
+        },
+        // 标题左侧图片，可为绝对路径的图片或内置图标
+        icon: {
+            type: String,
+            default: () => defProps.collapseItem.icon
+        },
+        // 面板展开收起的过渡时间，单位ms
+        duration: {
+            type: Number,
+            default: () => defProps.collapseItem.duration
+        },
+        // 显示右侧图标
+        showRight: {
+            type: Boolean,
+            default: () => defProps.collapseItem.showRight
+        },
+    }
+})

package/uview-ultra/components/up-collapse-item/props.uts

@@ -0,0 +1,69 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './collapseItem.uts'
+let crtProp = defProps['collapseItem'] as UTSJSONObject
+
+export const propsCollapseItem = defineMixin({
+    props: {
+        // 标题
+        title: {
+            type: String,
+            default: crtProp['title']
+        },
+        // 标题右侧内容
+        value: {
+            type: String,
+            default: crtProp['value']
+        },
+        // 标题下方的描述信息
+        label: {
+            type: String,
+            default: crtProp['label']
+        },
+        // 是否禁用折叠面板
+        disabled: {
+            type: Boolean,
+            default: crtProp['disabled']
+        },
+        // 是否展示右侧箭头并开启点击反馈
+        isLink: {
+            type: Boolean,
+            default: crtProp['isLink']
+        },
+        // 是否开启点击反馈
+        clickable: {
+            type: Boolean,
+            default: crtProp['clickable']
+        },
+        // 是否显示内边框
+        border: {
+            type: Boolean,
+            default: crtProp['border']
+        },
+        // 标题的对齐方式
+        align: {
+            type: String,
+            default: crtProp['align']
+        },
+        // 唯一标识符
+        name: {
+            // type: [String, Number],
+			type: [String],
+            default: crtProp['name']
+        },
+        // 标题左侧图片，可为绝对路径的图片或内置图标
+        icon: {
+            type: String,
+            default: crtProp['icon']
+        },
+        // 面板展开收起的过渡时间，单位ms
+        duration: {
+            type: Number,
+            default: crtProp['duration']
+        },
+        // 显示右侧图标
+        showRight: {
+            type: Boolean,
+            default: crtProp['showRight']
+        },
+    }
+})

package/uview-ultra/components/up-collapse-item/up-collapse-item.uvue

@@ -0,0 +1,266 @@
+<template>
+	<view class="up-collapse-item">
+		<up-cell
+			:title="titleCpu"
+			:value="value"
+			:label="label"
+			:icon="icon"
+			:isLink="isLink"
+			:clickable="clickable"
+			:border="parentData['border'] != null && parentData['border'] as Boolean && showBorder"
+			@click="clickHandler"
+			:arrowDirection="expanded ? 'up' : 'down'"
+			:disabled="disabled"
+		>
+			<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" #title />的写法 -->
+			<template #title>
+				<slot name="title">
+					<text v-if="$slots['title'] != null && title !=''">
+						{{title}}
+					</text>
+				</slot>
+			</template>
+			<template #icon>
+				<slot name="icon">
+					<up-icon v-if="$slots['icon'] != null && icon != ''" :size="22"
+						:name="icon"></up-icon>
+				</slot>
+			</template>
+			<template #value>
+				<slot name="value">
+					<text v-if="$slots['value'] != null && value != ''">
+						{{value}}
+					</text>
+				</slot>
+			</template>
+			<template #right-icon>
+				<template v-if="showRight">
+					<up-icon v-if="$slots['right-icon'] != null" :size="16"
+						name="arrow-right"></up-icon>
+					<slot name="right-icon">
+					</slot>
+				</template>
+			</template>
+		</up-cell>
+		<view
+			class="up-collapse-item__content"
+			:style="{height: $up.addUnit(height)}"
+			:animation="animationData"
+			ref="animation"
+		>
+			<view
+				class="up-collapse-item__content__text content-class"
+				:id="elId"
+				:ref="elId"
+			><slot /></view>
+		</view>
+		<up-line v-if="parentData['border']"></up-line>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { nextTick, ref, watch, computed } from 'vue'
+	import defProps from './collapseItem.uts'
+	import { guid, sleep, upGetRect, error } from '../../libs/function/index'
+	import { array as testArray } from '../../libs/function/test'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, parentData, getParentData } = useUltraUI()
+	const instance = getCurrentInstance()!.proxy!
+	
+	defineOptions({
+		name: "up-collapse-item"
+	})
+	
+	// 定义 props
+	const props = defineProps({
+		title: {
+			type: [String],
+			default: defProps.getString('collapseItem.title')
+		},
+		value: {
+			type: [String],
+			default: defProps.getString('collapseItem.value')
+		},
+		label: {
+			type: [String],
+			default: defProps.getString('collapseItem.label')
+		},
+		disabled: {
+			type: [Boolean],
+			default: defProps.getBoolean('collapseItem.disabled')
+		},
+		isLink: {
+			type: [Boolean],
+			default: defProps.getBoolean('collapseItem.isLink')
+		},
+		clickable: {
+			type: [Boolean],
+			default: defProps.getBoolean('collapseItem.clickable')
+		},
+		border: {
+			type: [Boolean],
+			default: defProps.getBoolean('collapseItem.border')
+		},
+		align: {
+			type: [String],
+			default: defProps.getString('collapseItem.align')
+		},
+		name: {
+			type: [String, Number],
+			default: defProps.getString('collapseItem.name')
+		},
+		icon: {
+			type: [String],
+			default: defProps.getString('collapseItem.icon')
+		},
+		duration: {
+			type: [Number, String],
+			default: defProps.getNumber('collapseItem.duration')
+		},
+		showRight: {
+			type: [Boolean],
+			default: defProps.getBoolean('collapseItem.showRight')
+		}
+	})
+	
+	// 定义响应式数据
+	const timer = ref(0)
+	const elId = ref(guid())
+	const height = ref(0)
+	// uni.createAnimation的导出数据
+	const animationData = ref({})
+	// 是否展开状态
+	const expanded = ref(false)
+	// 根据expanded确定是否显示border，为了控制展开时，cell的下划线更好的显示效果，进行一定时间的延时
+	const showBorder = ref(false)
+	// 是否动画中，如果是则不允许继续触发点击
+	const animating = ref(false)
+	
+	// 监听 expanded 变化
+	watch(expanded, (n: boolean) => {
+		clearTimeout(timer.value)
+		timer.value = 0
+		// 这里根据expanded的值来进行一定的延时，是为了cell的下划线更好的显示效果
+		timer.value = setTimeout(() => {
+			showBorder.value = n
+		}, n ? 10 : 290)
+	})
+	
+	const titleCpu = computed((): string => {
+		if (instance?.$slots['title'] == null) {
+			return props.title.toString()
+		} else {
+			return ''
+		}
+	})
+	
+	const setContentAnimate = async function(expandedFrom: boolean) {
+		// 每次面板打开或者收起时，都查询元素尺寸
+		// 好处是，父组件从服务端获取内容后，变更折叠面板后可以获得最新的高度
+		expanded.value = expandedFrom
+		const rect: NodeInfo = await upGetRect(`#${elId.value}`, false, instance)
+		height.value = expanded.value ? (rect.height == null ? 0 : rect.height) : 0
+		animating.value = true
+	
+		// #ifndef APP-NVUE
+		// const animation = uni.createAnimation({
+		// 	timingFunction: 'ease-in-out',
+		// });
+		// animation
+		// 	.height(height)
+		// 	.step({
+		// 		duration: this.duration,
+		// 	})
+		// 	.step()
+		// // 导出动画数据给面板的animationData值
+		// this.animationData = animation.export()
+		// 标识动画结束
+		await sleep(parseInt(props.duration.toString()))
+		animating.value = false
+		// #endif
+	}
+	
+	// 初始化数据
+	const init = async function() {
+		getParentData('up-collapse', instance, false)
+		if (parent.value == null) {
+			return error('up-collapse-item必须要搭配up-collapse组件使用')
+		}
+		let value = parentData.value['value'] ?? ''
+		const accordion = parentData.value['accordion']
+
+		if (accordion != null && accordion as boolean) {
+			if (testArray(value)) {
+				return error('手风琴模式下，up-collapse组件的value参数不能为数组')
+			}
+			expanded.value = (props.name.toString() == value.toString())
+		} else {
+			if (!testArray(value) && value != '') {
+				console.log('#', value, '#')
+				return error('非手风琴模式下，up-collapse组件的value参数必须为数组')
+			}
+			// @ts-ignore
+			if (value == '') {
+				value = [] as string[]
+			}
+			const valueArr = value as string[]
+			const sameName = (element: string): boolean => element == props.name.toString()
+			expanded.value = valueArr.some(sameName)
+		}
+		// 设置组件的展开或收起状态
+		await nextTick()
+		setContentAnimate(expanded.value)
+	}
+	
+	// 点击collapsehead头部
+	const clickHandler = function() {
+		if (props.disabled || animating.value) return
+		// 设置本组件为相反的状态
+		if (parent.value != null ) {
+			parent.value.$callMethod('onChange', instance)
+		} else {
+			console.error('parent is null')
+		}
+	}
+	
+	// 在组件挂载时初始化
+	onMounted(() => {
+		init()
+		// console.log('$slots', this.$slots)
+	})
+	
+	const getInternalState = ():UTSJSONObject => {
+		return {
+			name: props.name,
+			expanded: expanded.value
+		}
+	}
+
+	defineExpose({
+		init,
+		setContentAnimate,
+		getInternalState
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-collapse-item {
+
+		&__content {
+			overflow: hidden;
+			height: 0;
+			transition: height 0.5s ease-out;
+
+			&__text {
+				padding: 12px 15px;
+				.text {
+					color: $up-content-color;
+					font-size: 14px;
+					line-height: 18px;
+				}
+			}
+		}
+	}
+</style>

package/uview-ultra/components/up-collapse-item/up-collapse-item.vue

@@ -0,0 +1,242 @@
+<template>
+	<view class="up-collapse-item">
+		<up-cell
+			:title="$slots.title ? '' : title"
+			:value="value"
+			:label="label"
+			:icon="icon"
+			:isLink="isLink"
+			:clickable="clickable"
+			:border="parentData.border && showBorder"
+			@click="clickHandler"
+			:arrowDirection="expanded ? 'up' : 'down'"
+			:disabled="disabled"
+		>
+			<!-- 微信小程序不支持，因为微信中不支持 <slot name="title" #title />的写法 -->
+			<template #title>
+				<slot name="title">
+					<text v-if="!$slots.title && title">
+						{{title}}
+					</text>
+				</slot>
+			</template>
+			<template #icon>
+				<slot name="icon">
+					<up-icon v-if="!$slots.icon && icon" :size="22" :name="icon"></up-icon>
+				</slot>
+			</template>
+			<template #value>
+				<slot name="value">
+					<text v-if="!$slots.value && value">
+						{{value}}
+					</text>
+				</slot>
+			</template>
+			<template #right-icon>
+				<template v-if="showRight">
+					<up-icon v-if="!$slots['right-icon']" :size="16" name="arrow-right"></up-icon>
+					<slot name="right-icon">
+					</slot>
+				</template>
+			</template>
+		</up-cell>
+		<view
+			class="up-collapse-item__content"
+			:animation="animationData"
+			ref="animation"
+		>
+			<view
+				class="up-collapse-item__content__text content-class"
+				:id="elId"
+				:ref="elId"
+			><slot /></view>
+		</view>
+		<up-line v-if="parentData.border"></up-line>
+	</view>
+</template>
+
+<script>
+	import { nextTick } from 'vue';
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { guid, sleep, error } from '../../libs/function/index.js';
+	import test from '../../libs/function/test.js';
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * collapseItem 折叠面板Item
+	 * @description 通过折叠面板收纳内容区域（搭配up-collapse使用）
+	 * @tutorial https://ijry.github.io/uview-plus/components/collapse.html
+	 * @property {String}			title 		标题
+	 * @property {String}			value 		标题右侧内容
+	 * @property {String}			label 		标题下方的描述信息
+	 * @property {Boolean}			disbled 	是否禁用折叠面板 ( 默认 false )
+	 * @property {Boolean}			isLink 		是否展示右侧箭头并开启点击反馈 ( 默认 true )
+	 * @property {Boolean}			clickable	是否开启点击反馈 ( 默认 true )
+	 * @property {Boolean}			border		是否显示内边框 ( 默认 true )
+	 * @property {String}			align		标题的对齐方式 ( 默认 'left' )
+	 * @property {String | Number}	name		唯一标识符
+	 * @property {String}			icon		标题左侧图片，可为绝对路径的图片或内置图标
+	 * @event {Function}			change 			某个item被打开或者收起时触发
+	 * @example <up-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">{{item.body}}</up-collapse-item>
+	 */
+	export default {
+		name: "up-collapse-item",
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				elId: guid(),
+				// uni.createAnimation的导出数据
+				animationData: {},
+				// 是否展开状态
+				expanded: false,
+				// 根据expanded确定是否显示border，为了控制展开时，cell的下划线更好的显示效果，进行一定时间的延时
+				showBorder: false,
+				// 是否动画中，如果是则不允许继续触发点击
+				animating: false,
+				// 父组件up-collapse的参数
+				parentData: {
+					accordion: false,
+					border: false
+				}
+			};
+		},
+		watch: {
+			expanded(n) {
+				clearTimeout(this.timer)
+				this.timer = null
+				// 这里根据expanded的值来进行一定的延时，是为了cell的下划线更好的显示效果
+				this.timer = setTimeout(() => {
+					this.showBorder = n
+				}, n ? 10 : 290)
+			}
+		},
+		mounted() {
+			this.init()
+			// console.log('$slots', this.$slots)
+		},
+		methods: {
+			// 异步获取内容，或者动态修改了内容时，需要重新初始化
+			async init() {
+				// 初始化数据
+				this.updateParentData()
+				if (!this.parent) {
+					return error('up-collapse-item必须要搭配up-collapse组件使用')
+				}
+				const {
+					value,
+					accordion,
+					children = []
+				} = this.parent
+
+				if (accordion) {
+					if (test.array(value)) {
+						return error('手风琴模式下，up-collapse组件的value参数不能为数组')
+					}
+					this.expanded = this.name == value
+				} else {
+					if (!test.array(value) && value !== null) {
+						return error('非手风琴模式下，up-collapse组件的value参数必须为数组')
+					}
+					this.expanded = (value || []).some(item => item == this.name)
+				}
+				// 设置组件的展开或收起状态
+				await nextTick()
+				this.setContentAnimate()
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('up-collapse')
+			},
+			async setContentAnimate() {
+				// 每次面板打开或者收起时，都查询元素尺寸
+				// 好处是，父组件从服务端获取内容后，变更折叠面板后可以获得最新的高度
+				const rect = await this.queryRect()
+				const height = this.expanded ? rect.height : 0
+				this.animating = true
+				// #ifdef APP-NVUE
+				const ref = this.$refs['animation'].ref
+				animation.transition(ref, {
+					styles: {
+						height: height + 'px'
+					},
+					duration: this.duration,
+					// 必须设置为true，否则会到面板收起或展开时，页面其他元素不会随之调整它们的布局
+					needLayout: true,
+					timingFunction: 'ease-in-out',
+				}, () => {
+					this.animating = false
+				})
+				// #endif
+
+				// #ifndef APP-NVUE
+				const animation = uni.createAnimation({
+					timingFunction: 'ease-in-out',
+				});
+				animation
+					.height(height)
+					.step({
+						duration: this.duration,
+					})
+					.step()
+				// 导出动画数据给面板的animationData值
+				this.animationData = animation.export()
+				// 标识动画结束
+				sleep(this.duration).then(() => {
+					this.animating = false
+				})
+				// #endif
+			},
+			// 点击collapsehead头部
+			clickHandler() {
+				if (this.disabled && this.animating) return
+				// 设置本组件为相反的状态
+				this.parent && this.parent.onChange(this)
+			},
+			// 查询内容高度
+			queryRect() {
+				// #ifndef APP-NVUE
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uGetRect(`#${this.elId}`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[this.elId], res => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			}
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-collapse-item {
+
+		&__content {
+			overflow: hidden;
+			height: 0;
+
+			&__text {
+				padding: 12px 15px;
+				color: $up-content-color;
+				font-size: 14px;
+				line-height: 18px;
+			}
+		}
+	}
+</style>