uview-ultra 4.5.46

package/components/up-collapse/up-collapse.vue

@@ -0,0 +1,116 @@
+<template>
+	<view class="up-collapse">
+		<up-line v-if="border"></up-line>
+		<slot />
+	</view>
+</template>
+
+<script setup>
+	import { toRefs, watch } from 'vue'
+	import { props as collapseProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	/**
+	 * collapse 折叠面板 
+	 * @description 通过折叠面板收纳内容区域
+	 * @tutorial https://ijry.github.io/uview-plus/components/collapse.html
+	 * @property {String | Number | Array}	value		当前展开面板的name，非手风琴模式：[<string | number>]，手风琴模式：string | number
+	 * @property {Boolean}					accordion	是否手风琴模式（ 默认 false ）
+	 * @property {Boolean}					border		是否显示外边框 ( 默认 true ）
+	 * @event {Function}	change 		当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array)
+	 * @example <up-collapse></up-collapse>
+	 */
+	defineOptions({
+		name: 'up-collapse',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...collapseProps.props
+	})
+	const emit = defineEmits(['open', 'close', 'change'])
+	const { children } = useUltraUI(props)
+	const {
+		value,
+		accordion,
+		border
+	} = toRefs(props)
+
+	// 重新初始化一次内部的所有子元素
+	function init() {
+		children.value.map(child => {
+			child.init()
+		})
+	}
+
+	function updateChildData() {
+		children.value.map(child => {
+			// 判断子组件如果有updateParentData方法的话，就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+			typeof child.updateParentData === 'function' && child.updateParentData()
+		})
+	}
+
+	/**
+	 * collapse-item被点击时触发，由collapse统一处理各子组件的状态
+	 * @param {Object} target 被操作的面板的实例
+	 */
+	function onChange(target) {
+		const changeArr = []
+		children.value.map((child, index) => {
+			// 如果是手风琴模式，将其他的折叠面板收起来
+			if (props.accordion) {
+				child.expanded = child === target ? !target.expanded : false
+				child.setContentAnimate()
+			} else {
+				if (child === target) {
+					child.expanded = !child.expanded
+					child.setContentAnimate()
+				}
+			}
+			// 拼接change事件中，数组元素的状态
+			changeArr.push({
+				// 如果没有定义name属性，则默认返回组件的index索引
+				name: child.name || index,
+				status: child.expanded ? 'open' : 'close'
+			})
+		})
+
+		emit('change', changeArr)
+		emit(target.expanded ? 'open' : 'close', target.name)
+	}
+
+	function getProps() {
+		return {
+			value: props.value,
+			accordion: props.accordion,
+			border: props.border
+		}
+	}
+
+	// 通过watch同时监听accordion和value值的变化，进行再一次的初始化
+	watch(() => [props.accordion, props.value], () => {
+		init()
+	})
+
+	watch(() => [props.accordion, props.border], () => {
+		updateChildData()
+	})
+
+	defineExpose({
+		children,
+		value,
+		accordion,
+		border,
+		init,
+		onChange,
+		getProps
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>

package/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/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/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/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/components/up-collapse-item/up-collapse-item.uvue

@@ -0,0 +1,294 @@
+<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: 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, addUnit } from '../../libs/function/index'
+	import { array as testArray } from '../../libs/function/test'
+	import { useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, parentData, getParentData } = useUltraUI()
+	const instance = getCurrentInstance()!.proxy!
+	
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: "up-collapse-item"
+	})
+	
+	// 定义 props
+	const props = defineProps({
+	    customStyle: {
+	        type: [Object, String],
+	        default: () => ({})
+	    },
+	    customClass: {
+	        type: String,
+	        default: ''
+	    },
+	    url: {
+	        type: String,
+	        default: ''
+	    },
+	    linkType: {
+	        type: String,
+	        default: 'navigateTo'
+	    },
+		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<any>(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)
+		// 收起前先把当前高度固定下来，否则从 auto 直接跳到 0 没有过渡起点
+		height.value = rect.height == null ? 0 : rect.height
+		animating.value = true
+		if (!expanded.value) {
+			height.value = 0
+		}
+	
+		// #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
+		if (expanded.value) {
+			// 展开结束后把高度交还给内容：内容里的图片、异步数据等在测量之后才变高时，
+			// 面板不会停留在过时的测量值上被 overflow:hidden 裁掉一截
+			height.value = 'auto'
+		}
+		// #endif
+	}
+	
+	// 初始化数据
+	const init = async function() {
+		getParentData('up-collapse', instance, false)
+		if (parent.value == null) {
+			return error('up-collapse-item必须要搭配up-collapse组件使用')
+		}
+		const rawValue = parentData.value['value']
+		// value 为 null/undefined 代表“未设置”，此时不重置已展开的状态，
+		// 否则外部把 value 清空会把已展开的面板全部收起
+		if (rawValue == null) return
+		let value = rawValue
+		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;
+				color: $up-content-color;
+				font-size: 14px;
+				line-height: 18px;
+			}
+		}
+	}
+</style>