uview-ultra-plus 1.0.0

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

@@ -0,0 +1,349 @@
+<template>
+	<view class="up-steps-item" ref="up-steps-item" :class="[`up-steps-item--${parentData.direction}`]">
+		<view class="up-steps-item__line" v-if="index + 1 < childLength"
+			:class="[`up-steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
+		<view class="up-steps-item__wrapper"
+			:class="[`up-steps-item__wrapper--${parentData.direction}`, parentData.dot && `up-steps-item__wrapper--${parentData.direction}--dot`]"
+			:style="[itemStyleInner]">
+			<slot name="icon">
+				<view class="up-steps-item__wrapper__dot" v-if="parentData.dot" :style="{
+						backgroundColor: statusColor
+					}">
+
+				</view>
+				<view class="up-steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
+					<up-icon :name="index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon"
+						:size="iconSize"
+						:color="index <= parentData.current ? parentData.activeColor : parentData.inactiveColor">
+					</up-icon>
+				</view>
+				<view v-else :style="{
+						backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
+						borderColor: statusColor
+					}" class="up-steps-item__wrapper__circle">
+					<text v-if="statusClass === 'process' || statusClass === 'wait'"
+						class="up-steps-item__wrapper__circle__text" :style="{
+							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
+						}">{{ index + 1}}</text>
+					<up-icon v-else :color="statusClass === 'error' ? 'error' : parentData.activeColor" size="12"
+						:name="statusClass === 'error' ? 'close' : 'checkmark'"></up-icon>
+				</view>
+			</slot>
+		</view>
+		<view class="up-steps-item__content" :class="[`up-steps-item__content--${parentData.direction}`,
+			parentData.current == index ? 'up-steps-item__content--current' : '']"
+			:style="[contentStyle]">
+			<slot name="content" :index="index">
+			</slot>
+			<template v-if="!$slots['content']">
+				<view class="up-steps-item__content__title">
+					<slot name="title">
+					</slot>
+					<up-text v-if="!$slots['title']" :text="title" lineHeight="20px"
+						:type="parentData.current == index ? 'main' : 'content'"
+						:size="parentData.current == index ? 14 : 13"></up-text>
+				</view>
+				<view class="up-steps-item__content__desc">
+					<slot name="desc">
+					</slot>
+					<up-text v-if="!$slots['desc']" :text="desc" type="tips" size="12"></up-text>
+				</view>
+			</template>
+		</view>
+		<!-- <view
+		    class="up-steps-item__line"
+		    v-if="showLine && parentData.direction === 'column'"
+			:class="[`up-steps-item__line--${parentData.direction}`]"
+		    :style="[lineStyle]"
+		></view> -->
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { sleep, error } from '../../libs/function/index';
+	import color from '../../libs/config/color';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * StepsItem 步骤条的子组件
+	 * @description 本组件需要和up-steps配合使用
+	 * @tutorial https://uview-plus.jiangruyi.com/components/steps.html
+	 * @property {String}			title			标题文字
+	 * @property {String}			current			描述文本
+	 * @property {String | Number}	iconSize		图标大小  (默认 17 )
+	 * @property {Boolean}			error			当前步骤是否处于失败状态  (默认 false )
+	 * @example <up-steps current="0"><up-steps-item title="已出库" desc="10:35" ></up-steps-item></up-steps>
+	 */
+	export default {
+		name: 'up-steps-item',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				index: 0,
+				childLength: 0,
+				showLine: false,
+				size: {
+					height: 0,
+					width: 0
+				},
+				parentData: {
+					direction: 'row',
+					current: 0,
+					activeColor: '',
+					inactiveColor: '',
+					activeIcon: '',
+					inactiveIcon: '',
+					dot: false
+				}
+			}
+		},
+		watch: {
+			'parentData'(newValue, oldValue) {
+			}
+		},
+		created() {
+			this.init()
+		},
+		// #ifdef MP-TOUTIAO
+		options: {
+			virtualHost: false
+		},
+		// #endif
+		computed: {
+			lineStyle() {
+				const style = {}
+				if (this.parentData.direction === 'row') {
+					style.width = this.size.width + 'px'
+					style.left = this.size.width / 2 + 'px'
+				} else {
+					style.height = this.size.height + 'px'
+					// style.top = this.size.height / 2 + 'px'
+				}
+				style.backgroundColor = this.parent.children?.[this.index + 1]?.error ? color.error : this.index <
+					this
+					.parentData
+					.current ? this.parentData.activeColor : this.parentData.inactiveColor
+				return style
+			},
+			itemStyleInner() {
+				return {
+					...this.itemStyle
+				}
+			},
+			statusClass() {
+				const {
+					index,
+					error
+				} = this
+				const {
+					current
+				} = this.parentData
+				if (current == index) {
+					return error === true ? 'error' : 'process'
+				} else if (error) {
+					return 'error'
+				} else if (current > index) {
+					return 'finish'
+				} else {
+					return 'wait'
+				}
+			},
+			statusColor() {
+				let colorTmp = ''
+				switch (this.statusClass) {
+					case 'finish':
+						colorTmp = this.parentData.activeColor
+						break
+					case 'error':
+						colorTmp = color.error
+						break
+					case 'process':
+						colorTmp = this.parentData.dot ? this.parentData.activeColor : 'transparent'
+						break
+					default:
+						colorTmp = this.parentData.inactiveColor
+						break
+				}
+				return colorTmp
+			},
+			contentStyle() {
+				const style = {}
+				if (this.parentData.direction === 'column') {
+					style.marginLeft = this.parentData.dot ? '2px' : '6px'
+					style.marginTop = this.parentData.dot ? '0px' : '6px'
+				} else {
+					style.marginTop = this.parentData.dot ? '2px' : '6px'
+					style.marginLeft = this.parentData.dot ? '2px' : '6px'
+				}
+
+				return style
+			}
+		},
+		mounted() {
+			this.parent && this.parent.updateFromChild()
+			sleep().then(() => {
+				this.getStepsItemRect()
+			})
+		},
+		methods: {
+			init() {
+				// 初始化数据
+				this.updateParentData()
+				if (!this.parent) {
+					return error('up-steps-item必须要搭配up-steps组件使用')
+				}
+				this.index = this.parent.children.indexOf(this)
+				this.childLength = this.parent.children.length
+			},
+			updateParentData() {
+				// 此方法在mixin中
+				this.getParentData('up-steps')
+			},
+			// 父组件数据发生变化
+			updateFromParent() {
+				this.init()
+			},
+			// 获取组件的尺寸，用于设置横线的位置
+			getStepsItemRect() {
+				// #ifndef APP-NVUE
+				this.$uGetRect('.up-steps-item').then(size => {
+					this.size = size
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['up-steps-item'], res => {
+					const {
+						size
+					} = res
+					this.size = size
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.up-steps-item {
+		flex: 1;
+		@include flex;
+
+		&--row {
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+		}
+
+		&--column {
+			position: relative;
+			flex-direction: row;
+			justify-content: flex-start;
+			padding-bottom: 5px;
+		}
+
+		&__wrapper {
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			background-color: #fff;
+			border-radius: 50px;
+
+			&--column {
+				width: 20px;
+				height: 20px;
+
+				&--dot {
+					height: 20px;
+					width: 20px;
+				}
+			}
+
+			&--row {
+				width: 20px;
+				height: 20px;
+
+				&--dot {
+					width: 20px;
+					height: 20px;
+				}
+			}
+
+			&__circle {
+				width: 20px;
+				height: 20px;
+				/* #ifndef APP-NVUE */
+				box-sizing: border-box;
+				flex-shrink: 0;
+				/* #endif */
+				border-radius: 100px;
+				border-width: 1px;
+				border-color: $up-tips-color;
+				border-style: solid;
+				@include flex(row);
+				align-items: center;
+				justify-content: center;
+				transition: background-color 0.3s;
+
+				&__text {
+					color: $up-tips-color;
+					font-size: 11px;
+					@include flex(row);
+					align-items: center;
+					justify-content: center;
+					text-align: center;
+					line-height: 11px;
+				}
+			}
+
+			&__dot {
+				width: 10px;
+				height: 10px;
+				border-radius: 100px;
+				background-color: $up-content-color;
+			}
+		}
+
+		&__content {
+			@include flex;
+			flex: 1;
+
+			&__title {
+				// #ifdef H5
+				cursor: pointer;
+				// #endif
+			}
+
+			&--row {
+				flex-direction: column;
+				align-items: center;
+			}
+
+			&--column {
+				flex-direction: column;
+				margin-left: 6px;
+			}
+		}
+
+		&__line {
+			position: absolute;
+			background: $up-tips-color;
+
+			&--row {
+				top: 10px;
+				height: 1px;
+			}
+
+			&--column {
+				width: 1px;
+				left: 10px;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,42 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+        offsetTop: {
+            type: [String, Number],
+            default: () => defProps.sticky.offsetTop
+        },
+        // 自定义导航栏的高度
+        customNavHeight: {
+            type: [String, Number],
+            // #ifdef H5
+            // H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
+            default: 44,
+            // #endif
+            // #ifndef H5
+            default: () => defProps.sticky.customNavHeight
+            // #endif
+        },
+        // 是否开启吸顶功能
+        disabled: {
+            type: Boolean,
+            default: () => defProps.sticky.disabled
+        },
+        // 吸顶区域的背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.sticky.bgColor
+        },
+        // z-index值
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.sticky.zIndex
+        },
+        // 列表中的索引值
+        index: {
+            type: [String, Number],
+            default: () => defProps.sticky.index
+        }
+    }
+})

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

@@ -0,0 +1,52 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2025-12-20 22:06:00
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-20 22:06:00
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './sticky.uts'
+let stickyProp = defProps['sticky'] as UTSJSONObject
+
+export const propsSticky = defineMixin({
+    props: {
+        // 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
+        offsetTop: {
+            type: [String, Number],
+            default: stickyProp['offsetTop']
+        },
+        // 自定义导航栏的高度
+        customNavHeight: {
+            type: [String, Number],
+            // #ifdef H5
+            // H5端的导航栏属于"自定义"导航栏的范畴，因为它是非原生的，与普通元素一致
+            default: 44,
+            // #endif
+            // #ifndef H5
+            default: stickyProp['customNavHeight']
+            // #endif
+        },
+        // 是否开启吸顶功能
+        disabled: {
+            type: Boolean,
+            default: stickyProp['disabled']
+        },
+        // 吸顶区域的背景颜色
+        bgColor: {
+            type: String,
+            default: stickyProp['bgColor']
+        },
+        // z-index值
+        zIndex: {
+            type: [String, Number],
+            default: stickyProp['zIndex']
+        },
+        // 列表中的索引值
+        index: {
+            type: [String, Number],
+            default: stickyProp['index']
+        }
+    }
+})

package/uview-ultra/components/up-sticky/sticky.js

@@ -0,0 +1,20 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-ultra/libs/config/props/sticky.js
+ */
+export default {
+    // sticky组件
+    sticky: {
+        offsetTop: 0,
+        customNavHeight: 0,
+        disabled: false,
+        bgColor: 'transparent',
+        zIndex: '',
+        index: ''
+    }
+}

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

@@ -0,0 +1,20 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2025-12-20 22:05:00
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-20 22:05:00
+ * @FilePath     : /uview-ultra/libs/config/props/sticky.uts
+ */
+export default {
+    // sticky组件
+    sticky: {
+        offsetTop: 0,
+        customNavHeight: 0,
+        disabled: false,
+        bgColor: 'transparent',
+        zIndex: '',
+        index: ''
+    }
+} as UTSJSONObject

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

@@ -0,0 +1,173 @@
+<template>
+	<view
+		class="up-sticky"
+		:style="[style]"
+	>
+		<view
+		:id="elId"
+			:style="[stickyContent]"
+			class="up-sticky__content"
+		>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	import { propsSticky } from './props.uts';
+	import { mpMixin } from '../../libs/mixin/mpMixin.uts';
+	import { mixin } from '../../libs/mixin/mixin.uts';
+	import { addUnit, addStyle, deepMerge, getPx, guid, getDeviceInfo, os } from '../../libs/function/index.uts';
+	import zIndex from '../../libs/config/zIndex.uts';
+	import { nextTick } from 'vue';
+	/**
+	 * sticky 吸顶
+	 * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/sticky.html
+	 * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
+	 * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+	 * @property {Boolean}			disabled		是否开启吸顶功能 （默认 false ）
+	 * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
+	 * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+	 * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * @event {Function} fixed		组件吸顶时触发
+	 * @event {Function} unfixed	组件取消吸顶时触发
+	 * @example <up-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></up-sticky>
+	 */
+	export default {
+		name: 'up-sticky',
+		mixins: [mpMixin, mixin, propsSticky],
+		data() {
+			return {
+				cssSticky: false, // 是否使用css的sticky实现
+				stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+				elId: guid(),
+				left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+				width: 'auto',
+				height: 'auto',
+				fixed: false, // js模式时，是否处于吸顶模式
+				// #ifdef H5 || MP
+				contentObserver: null as (IntersectionObserver|null), // 观察者实例
+				// #endif
+				rafId: 0 // requestAnimationFrame ID
+			}
+		},
+		computed: {
+			// 组件样式
+			style(): any {
+				const style = {}
+				if(!this.disabled) {
+					style['height'] = this.fixed ? this.height + 'px' : 'auto'
+				} else {
+					// 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+					style['position'] = 'relative'
+				}
+				style['backgroundColor'] = this.bgColor
+				return deepMerge(addStyle(this.customStyle), style)
+			},
+			// 吸顶内容的样式
+			stickyContent(): any {
+				const style = {}
+				if (!this.cssSticky) {
+					style['position'] = this.fixed ? 'fixed' : 'static'
+					style['top'] = this.stickyTop + 'px'
+					style['left'] = this.left + 'px'
+					style['width'] = this.width == 'auto' ? 'auto' : this.width + 'px'
+					style['zIndex'] = this.uZindex
+				}
+				return style
+			},
+			uZindex(): number {
+				return this.$props['zIndex'].toString() != '' ? (this.zIndex as number) : zIndex['sticky'] as number
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		watch: {
+			offsetTop(nval: string | number) {
+				this.getStickyTop()
+			}
+		},
+		methods: {
+			init() {
+				this.getStickyTop()
+				// 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+				if (!this.cssSticky) {
+					if (!this.disabled) {
+						this.initObserveContent()
+					}
+				}
+			},
+			initObserveContent() {
+				// 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+				// @ts-ignore
+				this.upGetRect('#' + this.elId).then((res: NodeInfo) => {
+					this.height = (res.height ?? '').toString()
+					this.left = res.left ?? 0
+					this.width = (res.width ?? '').toString()
+					nextTick(() => {
+						// todo等待uni-app-x官方实现createIntersectionObserver对APP的支持
+						// #ifdef H5 || MP
+						//this.observeContent()
+						// #endif
+						
+						// #ifdef APP
+						// todo
+						// #endif
+					})
+				})
+			},
+			observeContent() {
+				// #ifdef H5 || MP
+				// 先断掉之前的观察
+				this.disconnectObserver('contentObserver')
+				const contentObserver: IntersectionObserver = uni.createIntersectionObserver(this, {
+					// 检测的区间范围
+					thresholds: [0.95, 0.98, 1]
+				})
+				// 到屏幕顶部的高度时触发
+				contentObserver.relativeToViewport({
+					top: -this.stickyTop
+				})
+				// 绑定观察的元素
+				contentObserver.observe('#' + this.elId, (res: ObserveResult ) => {
+					this.setFixed(res.boundingClientRect.top)
+				})
+				this.contentObserver = contentObserver
+				// #endif
+			},
+			setFixed(top: number) {
+				// 判断是否出于吸顶条件范围
+				const fixed = top > this.stickyTop
+				this.fixed = fixed
+			},
+			disconnectObserver(observerName: string) {
+				// 断掉观察，释放资源
+				// #ifdef H5 || MP
+				const observer: IntersectionObserver = this.$data[observerName] as IntersectionObserver
+				if (observer != null) {
+					observer.disconnect()
+				}
+				// #endif
+			},
+			getStickyTop() {
+				this.stickyTop = (parseFloat(getPx(this.offsetTop)) + parseFloat(getPx(this.customNavHeight)) )
+			}
+		},
+		beforeUnmount() {
+			this.disconnectObserver('contentObserver')
+			// #ifdef APP
+			if (this.rafId != 0) {
+				cancelAnimationFrame(this.rafId)
+			}
+			// #endif
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-sticky {
+	}
+</style>