uview-ultra-plus 1.0.0

package/uview-ultra/components/up-gap/up-gap.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="up-gap" :style="[gapStyle]"></view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
+	/**
+	 * gap 间隔槽
+	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+	 * @tutorial https://ijry.github.io/uview-plus/components/gap.html
+	 * @property {String}			bgColor			背景颜色 （默认 'transparent' ）
+	 * @property {String | Number}	height			分割槽高度，单位px （默认 20 ）
+	 * @property {String | Number}	marginTop		与前一个组件的距离，单位px（ 默认 0 ）
+	 * @property {String | Number}	marginBottom	与后一个组件的距离，单位px （默认 0 ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @example <up-gap height="80" bg-color="#bbb"></up-gap>
+	 */
+	export default {
+		name: "up-gap",
+		mixins: [props],
+		computed: {
+			gapStyle() {
+				const style = {
+					backgroundColor: this.bgColor,
+					height: addUnit(this.height),
+					marginTop: addUnit(this.marginTop),
+					marginBottom: addUnit(this.marginBottom),
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>

package/uview-ultra/components/up-grid/grid.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/grid.js
+ */
+export default {
+    // grid组件
+    grid: {
+        col: 3,
+        border: false,
+        align: 'left'
+    }
+}

package/uview-ultra/components/up-grid/grid.uts

@@ -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/grid.js
+ */
+export default {
+    // grid组件
+    grid: {
+        col: 3,
+        border: false,
+        align: 'left'
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-grid/props.js

@@ -0,0 +1,28 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 分成几列
+        col: {
+            type: [String, Number],
+            default: () => defProps.grid.col
+        },
+        // 是否显示边框
+        border: {
+            type: Boolean,
+            default: () => defProps.grid.border
+            // default: crtProp['border']
+        },
+        // 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
+        align: {
+            type: String,
+            default: () => defProps.grid.align
+            // default: crtProp['align']
+        },
+        // 间隔
+        gap: {
+            type: String,
+            default: '0px'
+        }
+    }
+})

package/uview-ultra/components/up-grid/props.uts

@@ -0,0 +1,37 @@
+/*
+ * @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/grid
+ */
+import { defineMixin } from '../../libs/vue'
+import defProps from './grid.uts'
+let crtProp = defProps['grid'] as UTSJSONObject
+
+export const propsGrid = defineMixin({
+    props: {
+        // 分成几列
+        col: {
+            type: [String, Number],
+            default: crtProp['col']
+        },
+        // 是否显示边框
+        border: {
+            type: Boolean,
+            default: crtProp['border']
+        },
+        // 宫格对齐方式，表现为数量少的时候，靠左，居中，还是靠右
+        align: {
+            type: String,
+            default: crtProp['align']
+        },
+        // 间隔
+        gap: {
+            type: String,
+            default: '0px'
+        }
+    }
+})

package/uview-ultra/components/up-grid/up-grid.uvue

@@ -0,0 +1,145 @@
+<template>
+	<view
+	    class="up-grid"
+		ref='up-grid'
+	    :style="[gridStyle]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script setup lang="uts">
+	import type { PropType } from 'vue';
+	import { ref, computed, onMounted, watch, getCurrentInstance } from 'vue'
+	import { mpSharedMpOptions } from '../../libs/composable/useMp'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+	import { addStyle, deepMerge, upGetRect } from '../../libs/function/index'
+	import defProps from './grid.uts';
+	const { children, getChildren, addChild } = useUltraUI();
+	
+	const instance = getCurrentInstance()!.proxy!;
+	
+	// options
+	defineOptions({
+		name: 'up-grid'
+	});
+	
+	// props
+	const props = defineProps({
+		col: {
+			type: [String, Number],
+			default: defProps.getNumber('grid.col')
+		},
+		border: {
+			type: Boolean,
+			default: defProps.getBoolean('grid.border')
+		},
+		align: {
+			type: String,
+			default: defProps.getString('grid.align')
+		},
+	});
+	
+	// 定义事件
+	const emit = defineEmits<{
+		(e: 'click', name: any): void;
+	}>();
+	
+	// 定义响应式数据
+	const width = ref<number>(0);
+	
+	// 计算父组件的值是否发生变化
+	const parentDataCpu = computed(() => {
+		return {
+			col: props.col,
+			border: props.border,
+			align: props.align
+		}
+	});
+	
+	// 宫格对齐方式
+	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({}));
+	});
+	
+	// 获取父元素的尺寸
+	const getWidth = () => {
+		// @ts-ignore
+		upGetRect(`.up-grid`, false, instance).then((size: NodeInfo) => {
+			if (size.width != null) {
+				width.value = size.width;
+			}
+		});
+	};
+	
+	// 此方法由up-grid-item触发，用于在up-grid发出事件
+	const childClick = (name: any) => {
+		emit('click', name);
+	};
+	
+	// 监听props变化，当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+	watch(parentDataCpu, () => {
+		if (children.value.length > 0) {
+			// console.log('^^^^^^^^^^^^^^^^^^^^');
+			children.value.map((child: ComponentPublicInstance) => {
+				// 判断子组件(up-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+				//if (typeof(child.updateParentData) == 'function') {
+					// child.updateParentData()
+					// @ts-ignore
+					child.$callMethod('updateParentData', instance);
+				//}
+			});
+		}
+	});
+	
+	onMounted(() => {
+		getWidth();
+	});
+
+	const getProps = function(): UTSJSONObject {
+		return parentDataCpu.value
+	}
+	const getRefs = function() {
+		return {
+			width: width.value
+		}
+	}
+	
+	defineExpose({
+		childClick,
+		getChildren,
+		addChild,
+		children,
+		getProps,
+		getRefs
+	});
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+    $up-grid-width:100% !default;
+	.up-grid {
+		width: $up-grid-width;
+		position: relative;
+		box-sizing: border-box;
+		overflow: hidden;
+		justify-content: center;
+		@include flex;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+	<view
+	    class="up-grid"
+		ref='up-grid'
+	    :style="[gridStyle]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+	import { props } from './props.js';
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.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>
+	 */
+	export default {
+		name: 'up-grid',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				index: 0,
+				width: 0
+			}
+		},
+		watch: {
+			// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
+			parentData() {
+				if (this.children.length) {
+					this.children.map(child => {
+						// 判断子组件(up-radio)如果有updateParentData方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
+						typeof(child.updateParentData) == 'function' && child.updateParentData();
+					})
+				}
+			},
+		},
+		created() {
+			// 如果将children定义在data中，在微信小程序会造成循环引用而报错
+			this.children = []
+		},
+		computed: {
+			// 计算父组件的值是否发生变化
+			parentData() {
+				return [this.hoverClass, this.col, this.size, this.border];
+			},
+			// 宫格对齐方式
+			gridStyle() {
+				let style = {};
+				switch (this.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(this.customStyle));
+			}
+		},
+		emits: ['click'], // 防止事件执行两次
+		// 20240409发现抖音小程序如果开启virtualHost会出现严重问题，几乎所有事件包括created等生命周期事件全部失效。
+		// #ifdef MP-WEIXIN
+		options: {
+		    // virtualHost: true ,//将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
+		},
+		// #endif
+		methods: {
+			// 此方法由up-grid-item触发，用于在up-grid发出事件
+			childClick(name) {
+				this.$emit('click', name)
+			}
+		}
+	};
+</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/uview-ultra/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/uview-ultra/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/uview-ultra/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/uview-ultra/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/uview-ultra/components/up-grid-item/up-grid-item.uvue

@@ -0,0 +1,211 @@
+<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 { mpSharedMpOptions } from '../../libs/composable/useMp'
+	import { addStyle, deepMerge } from '../../libs/function/index'
+	import defProps from './gridItem.uts'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI'
+	const { parent, parentData, getParentData } = useUltraUI({
+		col: 0, // 父组件划分的宫格数
+		border: true, // 是否显示边框，根据父组件决定
+		width: 0,
+	})
+	const instance = getCurrentInstance()!.proxy!
+	
+	// options
+	defineOptions({
+		name: "up-grid-item"
+	});
+	
+	// props
+	const props = defineProps({
+		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相等，找出当前组件的索引
+		// @ts-ignore
+		const children: ComponentPublicInstance[] = parent.value?.$data['children'] as ComponentPublicInstance[];
+		if(props.name === null) {
+			// @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>