uview-ultra 4.5.46

package/components/up-grid/up-grid.vue

@@ -0,0 +1,119 @@
+<template>
+	<view
+	    class="up-grid"
+		ref='up-grid'
+	    :style="[gridStyle]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script setup>
+	import { computed, toRefs, watch } from 'vue'
+	import { propsGrid } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { addStyle, deepMerge } from '../../libs/function/index.js'
+	/**
+	 * grid 宫格布局
+	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。
+	 * @tutorial https://ijry.github.io/uview-plus/components/grid.html
+	 * @property {String | Number}	col			宫格的列数（默认 3 ）
+	 * @property {Boolean}			border		是否显示宫格的边框（默认 false ）
+	 * @property {String}			align		宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右 （默认 'left' ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * @event {Function} click 点击宫格触发
+	 * @example <up-grid :col="3" @click="click"></up-grid>
+	 */
+	defineOptions({
+		name: 'up-grid'
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...propsGrid.props
+	})
+	const emit = defineEmits(['click'])
+	const { children } = useUltraUI(props)
+	const { col, border, align, gap } = toRefs(props)
+
+	// 宫格对齐方式
+	const gridStyle = computed(() => {
+		let style = {}
+		switch (props.align) {
+			case 'left':
+				style.justifyContent = 'flex-start'
+				break
+			case 'center':
+				style.justifyContent = 'center'
+				break
+			case 'right':
+				style.justifyContent = 'flex-end'
+				break
+			default:
+				style.justifyContent = 'flex-start'
+		}
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	function updateChildData() {
+		children.value.map(child => {
+			// 判断子组件如果有updateParentData方法的话，就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+			typeof child.updateParentData === 'function' && child.updateParentData()
+		})
+	}
+
+	function getProps() {
+		return {
+			col: props.col,
+			border: props.border,
+			align: props.align,
+			gap: props.gap
+		}
+	}
+
+	// 此方法由up-grid-item触发，用于在up-grid发出事件
+	function childClick(name) {
+		emit('click', name)
+	}
+
+	// 当父组件需要子组件共享的参数发生变化，手动通知子组件
+	watch(() => [props.col, props.border], () => {
+		updateChildData()
+	})
+
+	defineExpose({
+		children,
+		col,
+		border,
+		align,
+		gap,
+		childClick,
+		getProps,
+		updateChildData
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+    $up-grid-width:100% !default;
+	.up-grid {
+		/* #ifdef APP-NVUE */
+		width: $up-grid-width;
+		position: relative;
+		box-sizing: border-box;
+		overflow: hidden;
+		display: block;
+		/* #endif */
+		justify-content: center;
+		@include flex;
+		flex-wrap: wrap;
+		align-items: center;
+		// 在uni-app中应尽量避免使用flex布局以外的方式,因为nvue/uvue等方案都支持flex布局
+		// 这里使用grid布局使用为目前20240409uni-app在抖音小程序开启virtualHost时有bug，存在事件失效问题。
+		/* #ifndef APP-NVUE */
+		display: grid;
+		grid-gap: v-bind(gap);
+		grid-template-columns: repeat(v-bind(col), 1fr);
+		/* #endif */
+	}
+</style>

package/components/up-grid-item/gridItem.js

@@ -0,0 +1,16 @@
+/*
+ * @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/gridItem.js
+ */
+export default {
+    // grid-item组件
+    gridItem: {
+        name: null,
+        bgColor: 'transparent'
+    }
+}

package/components/up-grid-item/gridItem.uts

@@ -0,0 +1,16 @@
+/*
+ * @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/gridItem.js
+ */
+export default {
+    // grid-item组件
+    gridItem: {
+        name: null,
+        bgColor: 'transparent'
+    }
+} as UTSJSONObject

package/components/up-grid-item/props.js

@@ -0,0 +1,16 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 宫格的name
+        name: {
+            type: [String, Number, null],
+            default: () => defProps.gridItem.name
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.gridItem.bgColor
+        }
+    }
+})

package/components/up-grid-item/props.uts

@@ -0,0 +1,27 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-11-06 12:20:08
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-11-06 12:20:08
+ * @FilePath     : /uview-ultra/libs/config/props/countDown
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './gridItem.uts'
+let crtProp = defProps['gridItem'] as UTSJSONObject
+
+export const propsGridItem = defineMixin({
+    props: {
+        // 宫格的name
+        name: {
+            type: [String, Number, null],
+            default: crtProp['name']
+        },
+        // 背景颜色
+        bgColor: {
+            type: String,
+            default: crtProp['bgColor']
+        }
+    }
+})

package/components/up-grid-item/up-grid-item.uvue

@@ -0,0 +1,227 @@
+<template>
+	<view
+		v-if="parentCol > 0"
+	    class="up-grid-item"
+	    hover-class="up-grid-item--hover-class"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script setup lang="uts">
+	import type { PropType } from 'vue'
+	import { ref, nextTick, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue'
+	import { addStyle, deepMerge } from '../../libs/function/index'
+	import defProps from './gridItem.uts'
+	import { useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, parentData, getParentData } = useUltraUI({
+		col: 0, // 父组件划分的宫格数
+		border: true, // 是否显示边框，根据父组件决定
+		width: 0,
+	})
+	const instance = getCurrentInstance()!.proxy!
+	
+	// options
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: "up-grid-item"
+	});
+	
+	// props
+	const props = defineProps({
+	    customStyle: {
+	        type: [Object, String],
+	        default: () => ({})
+	    },
+	    customClass: {
+	        type: String,
+	        default: ''
+	    },
+	    url: {
+	        type: String,
+	        default: ''
+	    },
+	    linkType: {
+	        type: String,
+	        default: 'navigateTo'
+	    },
+		name: {
+			type: [String, Number],
+			default: defProps.getArray('grid-item.name')
+		},
+		bgColor: {
+			type: String,
+			default: defProps.getString('grid-item.bgColor')
+		}
+	})
+	
+	// 定义事件
+	const emit = defineEmits<{
+		(e: 'click', name: any): void;
+	}>()
+	
+	const width = ref<string>('');
+	const classes = ref<String | String[]>(''); // 类名集合，用于判断是否显示右边和下边框
+	
+	// 计算属性：父组件列数
+	const parentCol = computed<number>(() => {
+		if (parentData.value['col'] != null) {
+			return parseInt(parentData.value['col'].toString());
+		}
+		return 0;
+	})
+	
+	// 计算属性：项目样式
+	const itemStyle = computed(() => {
+		const style = {
+			background: props.bgColor
+		};
+		style['width'] = width.value;
+		return deepMerge(style, addStyle({}));
+	})
+	
+	// 点击处理
+	const clickHandler = () => {
+		let name = props.name;
+		// 如果没有设置name属性，历遍父组件的children数组，判断当前的元素是否和本实例this相等，找出当前组件的索引
+		if(props.name === null) {
+			// @ts-ignore
+			const children: ComponentPublicInstance[] = parent.value!.$callMethod('getChildren') as ComponentPublicInstance[];
+			// @ts-ignore
+			name = children.findIndex((child: ComponentPublicInstance) => child === instance);
+		}
+		// 调用父组件方法，发出事件
+		// @ts-ignore
+		parent.value!.$callMethod('childClick', name);
+		emit('click', name);
+	}
+	
+	// 获取项目宽度
+	const getItemWidth = (): void => {
+		// 如果是nvue，不能使用百分比，只能使用固定宽度
+		let widthVal = '';
+		if(parent.value != null) {
+			// 获取父组件宽度后，除以栅格数，得出每个item的宽度
+			// const parentWidth = await this.getParentWidth()
+			// @ts-ignore
+			// let parentProps = parent.value.$callMethod('getProps') as UTSJSONObject
+			let parentRefs = parent.value.$callMethod('getRefs') as UTSJSONObject
+			// @ts-ignore
+			const parentWidth = parseFloat(parentRefs['width'].toString());
+			// @ts-ignore
+			widthVal = (parentWidth / parseInt(parentData.value['col'].toString())).toString() + 'px';
+		}
+		width.value = widthVal;
+	};
+	
+	// 更新边框类
+	const gridItemClasses = () => {
+		if(parentData.value['border'] as boolean) {
+			let classList = [] as String[];
+			if (parent.value != null) {
+				// @ts-ignore
+				let childrenPat = parent.value.$callMethod('getChildren') as ComponentPublicInstance[];
+				childrenPat.map((
+					child: ComponentPublicInstance, index: number) =>{
+					// @ts-ignore
+					let parentCol = parseInt(parentData.value['col'].toString())
+					// @ts-ignore
+					if(instance === child && parentCol > 0) {
+						// @ts-ignore
+						const len = childrenPat.length;
+						// 贴近右边屏幕边沿的child，并且最后一个（比如只有横向2个的时候），无需右边框
+						if((index + 1) % parentCol != 0 && index + 1 != len) {
+							classList.push('up-border-right');
+						}
+						// 总的宫格数量对列数取余的值
+						// 如果取余后，值为0，则意味着要将最后一排的宫格，都不需要下边框
+						const lessNum = len % parentCol == 0 ? parentCol : len % parentCol;
+						// 最下面的一排child，无需下边框
+						if(index < len - lessNum) {
+							classList.push('up-border-bottom');
+						}
+					} else {
+						// console.log('parentCol is 0');
+					}
+				});
+			}
+			// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+			// #ifdef MP-ALIPAY || MP-TOUTIAO
+			classList = classList.join(' ');
+			// #endif
+			classes.value = classList;
+		}
+	};
+	
+	// 初始化
+	const init = () => {
+		// 用于在父组件up-grid的children中被添加入子组件时，
+		// 重新计算item的边框
+		// uni.$on('$upGridItem', () => {
+		// 	gridItemClasses();
+		// });
+		
+		// 父组件的实例
+		// @ts-ignore
+		getParentData('up-grid', instance, false);
+		
+		// 获取元素该有的长度，nvue下要延时才准确
+		nextTick(() => {
+			getItemWidth();
+		});
+		
+		// 发出事件，通知所有的grid-item都重新计算自己的边框
+		uni.$emit('$upGridItem');
+		gridItemClasses();
+	};
+	
+	onMounted(() => {
+		init();
+	});
+	
+	onUnmounted(() => {
+		// 移除事件监听，释放性能
+		uni.$off('$upGridItem');
+	});
+	
+	defineExpose({
+		gridItemClasses
+	});
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+      $up-grid-item-hover-class-opcatiy:.5 !default;
+      $up-grid-item-margin-top:1rpx !default;
+      $up-grid-item-border-right-width:0.5px !default;
+      $up-grid-item-border-bottom-width:0.5px !default;
+      $up-grid-item-border-right-color:$up-border-color !default;
+      $up-grid-item-border-bottom-color:$up-border-color !default;
+	.up-grid-item {
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+
+		/* #ifdef MP-WEIXIN */
+		margin-top:$up-grid-item-margin-top;
+		/* #endif */
+
+		&--hover-class {
+			opacity:$up-grid-item-hover-class-opcatiy;
+		}
+	}
+</style>

package/components/up-grid-item/up-grid-item.vue

@@ -0,0 +1,244 @@
+<template>
+	<!-- #ifndef APP-NVUE -->
+	<view
+		v-if="parentData.col > 0"
+	    class="up-grid-item"
+	    hover-class="up-grid-item--hover-class"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+	<!-- #endif -->
+	<!-- #ifdef APP-NVUE -->
+	<view
+	    class="up-grid-item"
+	    :hover-stay-time="200"
+	    @tap="clickHandler"
+	    :class="classes"
+	    :style="[itemStyle]"
+	>
+		<slot />
+	</view>
+	<!-- #endif -->
+</template>
+
+<script setup>
+	import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, reactive, ref, toRef } from 'vue'
+	import { props as gridItemProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { addStyle, deepMerge } from '../../libs/function/index.js'
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * gridItem 提示
+	 * @description 宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。搭配up-grid使用
+	 * @tutorial https://ijry.github.io/uview-plus/components/grid.html
+	 * @property {String | Number}	name		宫格的name ( 默认 null )
+	 * @property {String}			bgColor		宫格的背景颜色 （默认 'transparent' ）
+	 * @property {Object}			customStyle	自定义样式，对象形式
+	 * @event {Function} click 点击宫格触发
+	 * @example <up-grid-item></up-grid-item>
+	 */
+	defineOptions({
+		name: 'up-grid-item',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...gridItemProps.props
+	})
+	const emit = defineEmits(['click'])
+	const instance = getCurrentInstance()
+	const parentData = reactive({
+		col: 0, // 父组件划分的宫格数
+		border: true // 是否显示边框，根据父组件决定
+	})
+	const width = ref(0)
+	const classes = ref([]) // 类名集合，用于判断是否显示右边和下边框
+	const name = toRef(props, 'name')
+	const { parent, getParentData } = useUltraUI(props, parentData)
+
+	let gridItemEventBound = false
+
+	const itemStyle = computed(() => {
+		const style = {
+			background: props.bgColor
+		}
+		// #ifdef APP-NVUE
+		style.width = width.value
+		// #endif
+		// #ifndef APP-NVUE
+		style.width = '100%'
+		// #endif
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	function handleGridItemEvent() {
+		gridItemClasses()
+	}
+
+	function init() {
+		// 用于在父组件up-grid的children中被添加入子组件时，重新计算item的边框
+		if (!gridItemEventBound) {
+			uni.$on('$upGridItem', handleGridItemEvent)
+			gridItemEventBound = true
+		}
+		updateParentData()
+		// #ifdef APP-NVUE
+		// 获取元素该有的长度，nvue下要延时才准确
+		nextTick(() => {
+			getItemWidth()
+		})
+		// #endif
+		// 发出事件，通知所有的grid-item都重新计算自己的边框
+		uni.$emit('$upGridItem')
+		gridItemClasses()
+	}
+
+	// 获取父组件的参数
+	function updateParentData() {
+		getParentData('up-grid')
+		gridItemClasses()
+	}
+
+	function clickHandler() {
+		let itemName = props.name
+		// 如果没有设置name属性，历遍父组件的children数组，判断当前的元素是否和本实例相等，找出当前组件的索引
+		const children = parent.value?.children
+		if (children && props.name === null) {
+			itemName = children.findIndex(child => child === instance.proxy)
+		}
+		// 调用父组件方法，发出事件
+		parent.value && parent.value.childClick(itemName)
+		emit('click', itemName)
+	}
+
+	async function getItemWidth() {
+		// 如果是nvue，不能使用百分比，只能使用固定宽度
+		let itemWidth = 0
+		if (parent.value) {
+			// 获取父组件宽度后，除以栅格数，得出每个item的宽度
+			const parentWidth = await getParentWidth()
+			itemWidth = parentWidth / Number(parentData.col) + 'px'
+		}
+		width.value = itemWidth
+	}
+
+	// 获取父元素的尺寸
+	function getParentWidth() {
+		// #ifdef APP-NVUE
+		// 返回一个promise，让调用者可以用await同步获取
+		return new Promise(resolve => {
+			// 调用父组件的ref
+			dom.getComponentRect(parent.value.$refs['up-grid'], res => {
+				resolve(res.size.width)
+			})
+		})
+		// #endif
+	}
+
+	function gridItemClasses() {
+		if (!parent.value || !parentData.border) {
+			classes.value = []
+			return
+		}
+		let nextClasses = []
+		parent.value.children.map((child, index) => {
+			if (instance.proxy === child) {
+				const len = parent.value.children.length
+				// 贴近右边屏幕边沿的child，并且最后一个（比如只有横向2个的时候），无需右边框
+				if ((index + 1) % parentData.col !== 0 && index + 1 !== len) {
+					nextClasses.push('up-border-right')
+				}
+				// 总的宫格数量对列数取余的值
+				// 如果取余后，值为0，则意味着要将最后一排的宫格，都不需要下边框
+				const lessNum = len % parentData.col === 0 ? parentData.col : len % parentData.col
+				// 最下面的一排child，无需下边框
+				if (index < len - lessNum) {
+					nextClasses.push('up-border-bottom')
+				}
+			}
+		})
+		// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
+		// #ifdef MP-ALIPAY || MP-TOUTIAO
+		nextClasses = nextClasses.join(' ')
+		// #endif
+		classes.value = nextClasses
+	}
+
+	onMounted(() => {
+		init()
+	})
+
+	onBeforeUnmount(() => {
+		// 移除事件监听，释放性能
+		if (gridItemEventBound) {
+			uni.$off('$upGridItem', handleGridItemEvent)
+			gridItemEventBound = false
+		}
+	})
+
+	defineExpose({
+		name,
+		init,
+		updateParentData,
+		getItemWidth,
+		gridItemClasses
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+      $up-grid-item-hover-class-opcatiy:.5 !default;
+      $up-grid-item-margin-top:1rpx !default;
+      $up-grid-item-border-right-width:0.5px !default;
+      $up-grid-item-border-bottom-width:0.5px !default;
+      $up-grid-item-border-right-color:$up-border-color !default;
+      $up-grid-item-border-bottom-color:$up-border-color !default;
+	.up-grid-item {
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		flex-direction: column;
+		/* #ifndef APP-NVUE */
+		box-sizing: border-box;
+		display: flex;
+		/* #endif */
+
+		/* #ifdef MP */
+		position: relative;
+		float: left;
+		/* #endif */
+
+		/* #ifdef MP-WEIXIN */
+		margin-top:$up-grid-item-margin-top;
+		/* #endif */
+
+		&--hover-class {
+			opacity:$up-grid-item-hover-class-opcatiy;
+		}
+	}
+
+	/* #ifdef APP-NVUE */
+	// 由于nvue不支持组件内引入app.vue中再引入的样式，所以需要写在这里
+	.up-border-right {
+		border-right-width:$up-grid-item-border-right-width;
+		border-color: $up-grid-item-border-right-color;
+	}
+
+	.up-border-bottom {
+		border-bottom-width:$up-grid-item-border-bottom-width;
+		border-color:$up-grid-item-border-bottom-color;
+	}
+
+	/* #endif */
+</style>

package/components/up-guide/guide.js

@@ -0,0 +1,16 @@
+export default {
+    // guide 组件
+    guide: {
+        show: false,
+        list: [],
+        storageKey: 'up-guide-default',
+        once: true,
+        showSkip: true,
+        skipText: '跳过',
+        nextText: '下一步',
+        finishText: '立即体验',
+        indicator: true,
+        bgColor: '#111111',
+        zIndex: 10075
+    }
+}