uview-ultra 4.5.46

package/components/up-read-more/up-read-more.uvue

@@ -0,0 +1,252 @@
+<template>
+	<view class="up-read-more">
+		<view
+		    class="up-read-more__content"
+		    :style="contentStyle"
+		>
+			<view
+			    class="up-read-more__content__inner"
+			    ref="up-read-more__content__inner"
+			    :class="[elId]"
+			>
+				<slot></slot>
+			</view>
+		</view>
+		<view
+		    class="up-read-more__toggle"
+		    :style="innerShadowStyle"
+		    v-if="isLongContent"
+		>
+			<slot name="toggle">
+				<view
+				    class="up-read-more__toggle__text"
+				    @tap="toggleReadMore"
+				>
+					<up-text
+					    :text="status === 'close' ? closeText : openText"
+					    :color="color"
+					    :size="fontSize"
+					    :lineHeight="fontSize"
+					    margin="0 5px 0 0"
+					></up-text>
+					<view class="up-read-more__toggle__icon">
+						<up-icon
+						    :color="color"
+						    :size="iconSize"
+						    :name="status === 'close' ? 'arrow-down' : 'arrow-up'"
+						></up-icon>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref } from 'vue'
+	import defProps from './readMore'
+	import { addUnit, guid, getPx, sleep, upGetRect } from '../../libs/function/index'
+
+	function createShadowStyle(): UTSJSONObject {
+		return {
+			backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff)',
+			paddingTop: '100px',
+			marginTop: '-100px'
+		} as UTSJSONObject
+	}
+
+	/**
+	 * readMore 阅读更多
+	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/readMore.html
+	 * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
+	 * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
+	 * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
+	 * @property {String}			openText	展开时的提示文字（默认 '收起' ）
+	 * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
+	 * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
+	 * @property {Object}			shadowStyle	显示阴影的样式
+	 * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
+	 * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
+	 * @event {Function} open 内容被展开时触发
+	 * @event {Function} close 内容被收起时触发
+	 * @example <up-read-more><rich-text :nodes="content"></rich-text></up-read-more>
+	 */
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-read-more'
+	})
+
+	const props = defineProps({
+		// 默认的显示占位高度
+		showHeight: {
+			type: [String, Number],
+			default: defProps.getNumber('readMore.showHeight')
+		},
+		// 展开后是否显示"收起"按钮
+		toggle: {
+			type: Boolean,
+			default: defProps.getBoolean('readMore.toggle')
+		},
+		// 关闭时的提示文字
+		closeText: {
+			type: String,
+			default: defProps.getString('readMore.closeText')
+		},
+		// 展开时的提示文字
+		openText: {
+			type: String,
+			default: defProps.getString('readMore.openText')
+		},
+		// 提示的文字颜色
+		color: {
+			type: String,
+			default: defProps.getString('readMore.color')
+		},
+		// 提示文字的大小
+		fontSize: {
+			type: [String, Number],
+			default: defProps.getNumber('readMore.fontSize')
+		},
+		// 是否显示阴影
+		shadowStyle: {
+			type: Object,
+			default(): UTSJSONObject {
+				return {
+					backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0), #ffffff)',
+					paddingTop: '100px',
+					marginTop: '-100px'
+				} as UTSJSONObject
+			}
+		},
+		// 段落首行缩进的字符个数
+		textIndent: {
+			type: String,
+			default: defProps.getString('readMore.textIndent')
+		},
+		// open和close事件时，将此参数返回在回调参数中
+		name: {
+			type: [String, Number],
+			default: defProps.getString('readMore.name')
+		}
+	})
+
+	const emit = defineEmits(['open', 'close'])
+	const instance = getCurrentInstance()!.proxy!
+
+	const isLongContent = ref(false) // 是否需要隐藏一部分内容
+	const status = ref('close') // 当前隐藏与显示的状态，close-收起状态，open-展开状态
+	const elId = guid() // 生成唯一class
+	const contentHeight = ref(100) // 内容高度
+	const isUnmounted = ref(false)
+	const maxMeasureRetries = 10
+
+	const contentStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['height'] = isLongContent.value && status.value === 'close' ? addUnit(props.showHeight) : addUnit(contentHeight.value)
+		style['textIndent'] = props.textIndent
+		return style
+	})
+
+	// 展开后无需阴影，收起时才需要阴影样式
+	const innerShadowStyle = computed((): UTSJSONObject => {
+		if (status.value === 'open') return {} as UTSJSONObject
+		const shadowStyleValue = props.shadowStyle as UTSJSONObject | null
+		return shadowStyleValue == null ? createShadowStyle() : shadowStyleValue
+	})
+
+	const iconSize = computed((): number => {
+		return parseInt(getPx(props.fontSize)) + 2
+	})
+
+	const getContentHeight = (): Promise<NodeInfo | null> => {
+		return new Promise(resolve => {
+			upGetRect('.' + elId, false, instance).then((res: NodeInfo) => {
+				resolve(res)
+			})
+		})
+	}
+
+	function measureContent(attempt: number = 0): void {
+		if (isUnmounted.value) return
+		sleep(150).then(() => {
+			if (isUnmounted.value) return
+			getContentHeight().then((size: NodeInfo | null) => {
+				if (isUnmounted.value) return
+				if (size == null) {
+					if (attempt < maxMeasureRetries) {
+						sleep(200).then(() => {
+							if (!isUnmounted.value) measureContent(attempt + 1)
+						})
+					}
+					return
+				}
+				contentHeight.value = size.height ?? 0
+				if (contentHeight.value <= 0) {
+					// 安卓上可能还未渲染完，重试
+					if (attempt < maxMeasureRetries) {
+						sleep(200).then(() => {
+							if (!isUnmounted.value) measureContent(attempt + 1)
+						})
+					}
+					return
+				}
+				// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+				if (contentHeight.value > parseFloat(getPx(props.showHeight))) {
+					isLongContent.value = true
+					status.value = 'close'
+				} else {
+					// https://github.com/ijry/uview-plus/issues/270
+					isLongContent.value = false
+					status.value = 'close'
+				}
+			})
+		})
+	}
+
+	// 展开或者收起
+	const toggleReadMore = (): void => {
+		status.value = status.value === 'close' ? 'open' : 'close'
+		// 如果toggle为false，隐藏"收起"部分的内容
+		if (props.toggle == false) isLongContent.value = false
+		// 发出打开或者收起的事件
+		if (status.value == 'open') {
+			emit('open', props.name)
+		} else {
+			emit('close', props.name)
+		}
+	}
+
+	onMounted(() => {
+		measureContent()
+	})
+
+	onBeforeUnmount(() => {
+		isUnmounted.value = true
+	})
+</script>
+
+<style lang="scss" scoped>
+.up-read-more {
+
+	&__content {
+		overflow: hidden;
+		color: $up-content-color;
+		font-size: 15px;
+		text-align: left;
+	}
+
+	&__toggle {
+		@include flex;
+		justify-content: center;
+		position: relative;
+
+		&__text {
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 5px;
+		}
+	}
+}
+</style>

package/components/up-read-more/up-read-more.vue

@@ -0,0 +1,169 @@
+<template>
+	<view class="up-read-more">
+		<view
+		    class="up-read-more__content"
+		    :style="{
+				height: isLongContent && status === 'close' ? addUnit(showHeight) : addUnit(contentHeight),
+				textIndent: textIndent
+			}"
+		>
+			<view
+			    class="up-read-more__content__inner"
+			    ref="contentInnerRef"
+			    :class="[elId]"
+			>
+				<slot></slot>
+			</view>
+		</view>
+		<view
+		    class="up-read-more__toggle"
+		    :style="[innerShadowStyle]"
+		    v-if="isLongContent"
+		>
+			<slot name="toggle">
+				<view
+				    class="up-read-more__toggle__text"
+				    @tap="toggleReadMore"
+				>
+					<up-text
+					    :text="status === 'close' ? closeText : openText"
+					    :color="color"
+					    :size="fontSize"
+					    :lineHeight="fontSize"
+					    margin="0 5px 0 0"
+					></up-text>
+					<view class="up-read-more__toggle__icon">
+						<up-icon
+						    :color="color"
+						    :size="fontSize + 2"
+						    :name="status === 'close' ? 'arrow-down' : 'arrow-up'"
+						></up-icon>
+					</view>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom')
+// #endif
+import { computed, onMounted, ref } from 'vue'
+import { props as readMoreProps } from './props.js'
+import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+import { addUnit, guid, getPx, sleep } from '../../libs/function/index.js'
+/**
+ * readMore 阅读更多
+ * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @tutorial https://uview-plus.jiangruyi.com/components/readMore.html
+ * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
+ * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
+ * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
+ * @property {String}			openText	展开时的提示文字（默认 '收起' ）
+ * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
+ * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
+ * @property {Object}			shadowStyle	显示阴影的样式
+ * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
+ * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
+ * @event {Function} open 内容被展开时触发
+ * @event {Function} close 内容被收起时触发
+ * @example <up-read-more><rich-text :nodes="content"></rich-text></up-read-more>
+ */
+defineOptions({
+	name: 'up-read-more',
+	// #ifdef MP-WEIXIN
+	options: {
+		virtualHost: true
+	}
+	// #endif
+})
+
+const props = defineProps({
+	...commonProps,
+	...readMoreProps.props
+})
+const emit = defineEmits(['open', 'close'])
+const { $uGetRect } = useUltraUI(props)
+
+const isLongContent = ref(false)
+const status = ref('close')
+const elId = ref(guid())
+const contentHeight = ref(100)
+const contentInnerRef = ref(null)
+
+const innerShadowStyle = computed(() => {
+	if (status.value === 'open') return {}
+	return props.shadowStyle
+})
+
+onMounted(() => {
+	init()
+})
+
+async function init() {
+	const height = await getContentHeight()
+	contentHeight.value = height
+	if (height > getPx(props.showHeight)) {
+		isLongContent.value = true
+		status.value = 'close'
+	} else {
+		isLongContent.value = false
+		status.value = 'close'
+	}
+}
+
+async function getContentHeight() {
+	await sleep(30)
+	return new Promise((resolve) => {
+		// #ifndef APP-NVUE
+		$uGetRect('.' + elId.value).then((res) => {
+			resolve(res.height)
+		})
+		// #endif
+
+		// #ifdef APP-NVUE
+		const refNode = contentInnerRef.value
+		dom.getComponentRect(refNode, (res) => {
+			resolve(res.size.height)
+		})
+		// #endif
+	})
+}
+
+function toggleReadMore() {
+	status.value = status.value === 'close' ? 'open' : 'close'
+	if (props.toggle == false) isLongContent.value = false
+	emit(status.value, props.name)
+}
+
+defineExpose({
+	init
+})
+</script>
+
+
+<style lang="scss" scoped>
+.up-read-more {
+
+	&__content {
+		overflow: hidden;
+		color: $up-content-color;
+		font-size: 15px;
+		text-align: left;
+	}
+
+	&__toggle {
+		@include flex;
+		justify-content: center;
+		position: relative;
+
+		&__text {
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 5px;
+		}
+	}
+}
+</style>

package/components/up-refresh-virtual-list/up-refresh-virtual-list.uvue

@@ -0,0 +1,95 @@
+<template>
+  <up-pull-refresh
+    :refreshing="refreshing"
+    :threshold="50"
+    @refresh="handleRefresh"
+  >
+    <up-virtual-list
+      ref="virtualList"
+      :list-data="listData"
+      :item-height="itemHeight"
+      :height="height"
+      :buffer="buffer"
+      :key-field="keyField"
+      :scroll-top="scrollTop"
+      @scroll="handleScroll"
+    >
+      <template #default="{ item, index }">
+        <slot :item="item" :index="index"></slot>
+      </template>
+    </up-virtual-list>
+  </up-pull-refresh>
+</template>
+
+<script setup lang="uts">
+import type { PropType } from 'vue';
+import { ref } from 'vue';
+
+function createListData(): Array<UTSJSONObject> {
+  return [] as Array<UTSJSONObject>;
+}
+
+defineOptions({
+  styleIsolation: 'app-and-page',
+  name: 'up-refresh-virtual-list'
+})
+
+defineProps({
+  listData: {
+    type: Array as PropType<Array<UTSJSONObject>>,
+    default(): Array<UTSJSONObject> {
+      return [] as Array<UTSJSONObject>;
+    }
+  },
+  itemHeight: {
+    type: Number,
+    default: 50
+  },
+  height: {
+    type: [String, Number],
+    default: '100%'
+  },
+  buffer: {
+    type: Number,
+    default: 4
+  },
+  keyField: {
+    type: String,
+    default: 'id'
+  }
+})
+
+const emit = defineEmits(['refresh', 'scroll'])
+
+const refreshing = ref(false)
+const scrollTop = ref(0)
+
+const handleRefresh = (): void => {
+  refreshing.value = true
+  emit('refresh')
+}
+
+const handleScroll = (scrollTopValue: number): void => {
+  scrollTop.value = scrollTopValue
+  emit('scroll', scrollTopValue)
+}
+
+const finishRefresh = (): void => {
+  refreshing.value = false
+}
+
+const scrollTo = (top: number): void => {
+  scrollTop.value = top
+}
+
+const scrollToTop = (): void => {
+  scrollTo(0)
+}
+
+defineExpose({
+  finishRefresh,
+  scrollTo,
+  scrollToTop
+})
+</script>
+

package/components/up-refresh-virtual-list/up-refresh-virtual-list.vue

@@ -0,0 +1,100 @@
+<template>
+  <up-pull-refresh
+    :refreshing="refreshing"
+    :threshold="50"
+    @refresh="handleRefresh"
+  >
+    <up-virtual-list
+      ref="virtualList"
+      :list-data="listData"
+      :item-height="itemHeight"
+      :height="height"
+      :buffer="buffer"
+      :key-field="keyField"
+      :scroll-top="scrollTop"
+      @scroll="handleScroll"
+    >
+      <template #default="{ item, index }">
+        <slot :item="item" :index="index"></slot>
+      </template>
+    </up-virtual-list>
+  </up-pull-refresh>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { commonProps } from '../../libs/composable/useUltraUI.js'
+
+defineOptions({
+	name: 'up-refresh-virtual-list',
+	// #ifdef MP-WEIXIN
+	options: {
+		virtualHost: true
+	}
+	// #endif
+})
+
+const props = defineProps({
+	...commonProps,
+	// 数据源
+	listData: {
+		type: Array,
+		default: () => []
+	},
+	// 每项高度（固定高度模式）
+	itemHeight: {
+		type: Number,
+		default: 50
+	},
+	// 容器高度
+	height: {
+		type: [String, Number],
+		default: '100%'
+	},
+	// 缓冲区项数
+	buffer: {
+		type: Number,
+		default: 4
+	},
+	// 索引键名
+	keyField: {
+		type: String,
+		default: 'id'
+	}
+})
+const emit = defineEmits(['refresh', 'scroll'])
+
+const refreshing = ref(false)
+const scrollTop = ref(0)
+const virtualList = ref(null)
+
+function handleRefresh() {
+	refreshing.value = true
+	emit('refresh')
+}
+
+function handleScroll(top) {
+	scrollTop.value = top
+	emit('scroll', top)
+}
+
+function finishRefresh() {
+	refreshing.value = false
+}
+
+function scrollTo(top) {
+	scrollTop.value = top
+}
+
+function scrollToTop() {
+	scrollTo(0)
+}
+
+defineExpose({
+	finishRefresh,
+	scrollTo,
+	scrollToTop,
+	virtualList
+})
+</script>
+

package/components/up-root-toast-host/up-root-toast-host.vue

@@ -0,0 +1,12 @@
+<template>
+  <RootToastHost />
+</template>
+
+<script setup>
+import RootToastHost from '../../libs/root/root-toast-host.vue'
+
+defineOptions({
+	name: 'up-root-toast-host'
+})
+</script>
+

package/components/up-row/props.js

@@ -0,0 +1,22 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const propsRow = defineMixin({
+    props: {
+        // 给col添加间距，左右边距各占一半
+        gutter: {
+            type: [String, Number],
+            default: () => defProps.row.gutter
+        },
+        // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+        justify: {
+            type: String,
+            default: () => defProps.row.justify
+        },
+        // 垂直对齐方式，可选值为top、center、bottom
+        align: {
+            type: String,
+            default: () => defProps.row.align
+        }
+    }
+})

package/components/up-row/props.uts

@@ -0,0 +1,31 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './row'
+let crtProp = defProps['row'] as UTSJSONObject
+
+export const propsRow = defineMixin({
+    props: {
+        // 给col添加间距，左右边距各占一半
+        gutter: {
+            type: [String, Number],
+            default: crtProp['gutter']
+        },
+        // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+        justify: {
+            type: String,
+            default: crtProp['justify']
+        },
+        // 垂直对齐方式，可选值为top、center、bottom
+        align: {
+            type: String,
+            default: crtProp['align']
+        }
+    }
+})

package/components/up-row/row.js

@@ -0,0 +1,17 @@
+/*
+ * @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/row.js
+ */
+export default {
+    // row
+    row: {
+        gutter: 0,
+        justify: 'start',
+        align: 'center'
+    }
+}