uview-ultra-plus 1.0.0

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

@@ -0,0 +1,61 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 需要显示的提示文字
+        text: {
+            type: [String, Number],
+            default: () => defProps.tooltip.text
+        },
+        // 点击复制按钮时，复制的文本，为空则使用text值
+        copyText: {
+            type: [String, Number],
+            default: () => defProps.tooltip.copyText
+        },
+        // 文本大小
+        size: {
+            type: [String, Number],
+            default: () => defProps.tooltip.size
+        },
+        // 字体颜色
+        color: {
+            type: String,
+            default: () => defProps.tooltip.color
+        },
+        // 弹出提示框时，文本的背景色
+        bgColor: {
+            type: String,
+            default: () => defProps.tooltip.bgColor
+        },
+        // 弹出提示的方向，top-上方，bottom-下方
+        direction: {
+            type: String,
+            default: () => defProps.tooltip.direction
+        },
+        // 弹出提示的z-index，nvue无效
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.tooltip.zIndex
+        },
+        // 是否显示复制按钮
+        showCopy: {
+            type: Boolean,
+            default: () => defProps.tooltip.showCopy
+        },
+        // 扩展的按钮组
+        buttons: {
+            type: Array,
+            default: () => defProps.tooltip.buttons
+        },
+        // 是否显示透明遮罩以防止触摸穿透
+        overlay: {
+            type: Boolean,
+            default: () => defProps.tooltip.overlay
+        },
+        // 是否显示复制成功或者失败的toast
+        showToast: {
+            type: Boolean,
+            default: () => defProps.tooltip.showToast
+        }
+    }
+})

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

@@ -0,0 +1,25 @@
+/*
+ * @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/tooltip.js
+ */
+export default {
+    // tooltip 组件
+    tooltip: {
+        text: '',
+        copyText: '',
+        size: 14,
+        color: '#606266',
+        bgColor: 'transparent',
+        direction: 'top',
+        zIndex: 10071,
+        showCopy: true,
+        buttons: [],
+        overlay: true,
+        showToast: true
+    }
+}

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

@@ -0,0 +1,342 @@
+<template>
+	<view
+		class="up-tooltip"
+		:style="[addStyle(customStyle)]"
+	>
+		<up-overlay
+			:show="showTooltip && tooltipTop !== -10000 && overlay"
+			customStyle="backgroundColor: rgba(0, 0, 0, 0)"
+			@click="overlayClickHandler"
+		></up-overlay>
+		<view class="up-tooltip__wrapper">
+			<text
+				class="up-tooltip__wrapper__text"
+				:id="textId"
+				:ref="textId"
+				:userSelect="false"
+				:selectable="false"
+				@longpress.stop="longpressHandler"
+				:style="{
+					color: color,
+					backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
+				}"
+			>{{ text }}</text>
+			<up-transition
+				mode="fade"
+				:show="showTooltip"
+				duration="300"
+				:customStyle="{
+					position: 'absolute', 
+					top: addUnit(tooltipTop),
+					zIndex: zIndex,
+					...tooltipStyle
+				}"
+			>
+				<view
+					class="up-tooltip__wrapper__popup"
+					:id="tooltipId"
+					:ref="tooltipId"
+				>
+					<view
+						class="up-tooltip__wrapper__popup__indicator"
+						hover-class="up-tooltip__wrapper__popup__indicator--hover"
+						v-if="showCopy || buttons.length"
+						:style="[indicatorStyle, {
+							width: addUnit(indicatorWidth),
+							height: addUnit(indicatorWidth),
+						}]"
+					>
+						<!-- 由于nvue不支持三角形绘制，这里就做一个四方形，再旋转45deg，得到露出的一个三角 -->
+					</view>
+					<view class="up-tooltip__wrapper__popup__list">
+						<view
+							v-if="showCopy"
+							class="up-tooltip__wrapper__popup__list__btn"
+							hover-class="up-tooltip__wrapper__popup__list__btn--hover"
+							@tap="setClipboardData"
+						>
+							<text
+								class="up-tooltip__wrapper__popup__list__btn__text"
+							>复制</text>
+						</view>
+						<up-line
+							direction="column"
+							color="#8d8e90"
+							v-if="showCopy && buttons.length > 0"
+							length="18"
+						></up-line>
+						<block v-for="(item , index) in buttons" :key="index">
+							<view
+								class="up-tooltip__wrapper__popup__list__btn"
+								hover-class="up-tooltip__wrapper__popup__list__btn--hover"
+							>
+								<text
+									class="up-tooltip__wrapper__popup__list__btn__text"
+									@tap="btnClickHandler(index)"
+								>{{ item }}</text>
+							</view>
+							<up-line
+								direction="column"
+								color="#8d8e90"
+								v-if="index < buttons.length - 1"
+								length="18"
+							></up-line>
+						</block>
+					</view>
+				</view>
+			</up-transition>
+		</view>
+	</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, getPx, guid, toast, sleep, sys } from '../../libs/function/index.js';
+	// #ifdef APP-NVUE 
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * Tooltip 
+	 * @description 
+	 * @tutorial https://ijry.github.io/uview-plus/components/tooltip.html
+	 * @property {String | Number}	text		需要显示的提示文字
+	 * @property {String | Number}	copyText	点击复制按钮时，复制的文本，为空则使用text值
+	 * @property {String | Number}	size		文本大小（默认 14 ）
+	 * @property {String}			color		字体颜色（默认 '#606266' ）
+	 * @property {String}			bgColor		弹出提示框时，文本的背景色（默认 'transparent' ）
+	 * @property {String}			direction	弹出提示的方向，top-上方，bottom-下方（默认 'top' ）
+	 * @property {String | Number}	zIndex		弹出提示的z-index，nvue无效（默认 10071 ）
+	 * @property {Boolean}			showCopy	是否显示复制按钮（默认 true ）
+	 * @property {Array}			buttons		扩展的按钮组
+	 * @property {Boolean}			overlay		是否显示透明遮罩以防止触摸穿透（默认 true ）
+	 * @property {Object}			customStyle	定义需要用到的外部样式
+	 * 
+	 * @event {Function} 
+	 * @example 
+	 */
+	export default {
+		name: 'up-tooltip',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				// 是否展示气泡
+				showTooltip: true,
+				// 生成唯一id，防止一个页面多个组件，造成干扰
+				textId: guid(),
+				tooltipId: guid(),
+				// 初始时甚至为很大的值，让其移到屏幕外面，为了计算元素的尺寸
+				tooltipTop: -10000,
+				// 气泡的位置信息
+				tooltipInfo: {
+					width: 0,
+					left: 0
+				},
+				// 文本的位置信息
+				textInfo: {
+					width: 0,
+					left: 0
+				},
+				// 三角形指示器的样式
+				indicatorStyle: {},
+				// 气泡在可能超出屏幕边沿范围时，重新定位后，距离屏幕边沿的距离
+				screenGap: 12,
+				// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
+				indicatorWidth: 14,
+			}
+		},
+		watch: {
+			propsChange() {
+				this.getElRect()
+			}
+		},
+		computed: {
+			// 特别处理H5的复制，因为H5浏览器是自带系统复制功能的，在H5环境
+			// 当一些依赖参数变化时，需要重新计算气泡和指示器的位置信息
+			propsChange() {
+				return [this.text, this.buttons]
+			},
+			// 计算气泡和指示器的位置信息
+			tooltipStyle() {
+				const style = {
+						transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
+					},
+					sysInfo = sys()
+				if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
+					this.indicatorStyle = {}
+					style.left = `-${addUnit(this.textInfo.left - this.screenGap)}`
+					this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this.indicatorWidth /
+						2)
+				} else if (this.tooltipInfo.width / 2 > sysInfo.windowWidth - this.textInfo.right + this.textInfo.width / 2 -
+					this.screenGap) {
+					this.indicatorStyle = {}
+					style.right = `-${addUnit(sysInfo.windowWidth - this.textInfo.right - this.screenGap)}`
+					this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this
+						.indicatorWidth / 2)
+				} else {
+					const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2)
+					style.left = this.textInfo.width > this.tooltipInfo.width ? addUnit(left) : -addUnit(left)
+					this.indicatorStyle = {}
+				}
+				if (this.direction === 'top') {
+					style.marginTop = '-10px'
+					this.indicatorStyle.bottom = '-4px'
+				} else {
+					style.marginBottom = '-10px'
+					this.indicatorStyle.top = '-4px'
+				}
+				return style
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		emits: ["click"],
+		methods: {
+			addStyle,
+			addUnit,
+			init() {
+				this.getElRect()
+			},
+			// 长按触发事件
+			async longpressHandler() {
+				this.tooltipTop = 0
+				this.showTooltip = true
+			},
+			// 点击透明遮罩
+			overlayClickHandler() {
+				this.showTooltip = false
+			},
+			// 点击弹出按钮
+			btnClickHandler(index) {
+				this.showTooltip = false
+				// 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
+				this.$emit('click', this.showCopy ? index + 1 : index)
+			},
+			// 查询内容高度
+			queryRect(ref) {
+				// #ifndef APP-NVUE
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uGetRect(`#${ref}`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[ref], res => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// 元素尺寸
+			getElRect() {
+				// 调用之前，先将指示器调整到屏幕外，方便获取尺寸
+				this.showTooltip = true
+				this.tooltipTop = -10000
+				sleep(500).then(() => {
+					this.queryRect(this.tooltipId).then(size => {
+						this.tooltipInfo = size
+						// 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
+						this.showTooltip = false
+					})
+					this.queryRect(this.textId).then(size => {
+						this.textInfo = size
+					})
+				})
+			},
+			// 复制文本到粘贴板
+			setClipboardData() {
+				// 关闭组件
+				this.showTooltip = false
+				this.$emit('click', 0)
+				uni.setClipboardData({
+					// 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
+					data: this.copyText || this.text,
+					success: () => {
+						this.showToast && toast('复制成功')
+					},
+					fail: () => {
+						this.showToast && toast('复制失败')
+					},
+					complete: () => {
+						this.showTooltip = false
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-tooltip {
+		position: relative;
+		@include flex;
+
+		&__wrapper {
+			@include flex;
+			justify-content: center;
+			/* #ifndef APP-NVUE */
+			white-space: nowrap;
+			/* #endif */
+
+			&__text {
+				font-size: 14px;
+			}
+
+			&__popup {
+				@include flex;
+				justify-content: center;
+
+				&__list {
+					background-color: #060607;
+					position: relative;
+					flex: 1;
+					border-radius: 5px;
+					padding: 0px 0;
+					@include flex(row);
+					align-items: center;
+					overflow: hidden;
+
+					&__btn {
+						padding: 11px 13px;
+
+						&--hover {
+							background-color: #58595B;
+						}
+
+						&__text {
+							line-height: 12px;
+							font-size: 13px;
+							color: #FFFFFF;
+						}
+					}
+				}
+
+				&__indicator {
+					position: absolute;
+					background-color: #060607;
+					width: 14px;
+					height: 14px;
+					bottom: -4px;
+					transform: rotate(45deg);
+					border-radius: 2px;
+					z-index: -1;
+
+					&--hover {
+						background-color: #58595B;
+					}
+				}
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+
+    }
+})

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

@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue'
+
+export const propsTr = defineMixin({
+    props: {
+
+    }
+})

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

@@ -0,0 +1,22 @@
+<template>
+	<view class="up-tr">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { propsTr } from './props'
+	import { mpMixin } from '../../libs/mixin/mpMixin'
+	import { mixin } from '../../libs/mixin/mixin'
+
+	// options
+	defineOptions({
+	  name: 'up-tr'
+	})
+</script>
+
+<style lang="scss" scoped>
+	.up-tr {
+		@include flex;
+	}
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+	<view class="up-tr">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	/**
+	 * Tr  
+	 * @description 
+	 * @tutorial url
+	 * @property {String}
+	 * @event {Function}
+	 * @example
+	 */
+	export default {
+		name: 'up-tr',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-tr {
+		@include flex;
+	}
+</style>

package/uview-ultra/components/up-transition/nvue-ani-map.js

@@ -0,0 +1,68 @@
+export default {
+    fade: {
+        enter: { opacity: 0 },
+        'enter-to': { opacity: 1 },
+        leave: { opacity: 1 },
+        'leave-to': { opacity: 0 }
+    },
+    'fade-up': {
+        enter: { opacity: 0, transform: 'translateY(100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateY(100%)' }
+    },
+    'fade-down': {
+        enter: { opacity: 0, transform: 'translateY(-100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateY(-100%)' }
+    },
+    'fade-left': {
+        enter: { opacity: 0, transform: 'translateX(-100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateX(-100%)' }
+    },
+    'fade-right': {
+        enter: { opacity: 0, transform: 'translateX(100%)' },
+        'enter-to': { opacity: 1, transform: 'translateY(0)' },
+        leave: { opacity: 1, transform: 'translateY(0)' },
+        'leave-to': { opacity: 0, transform: 'translateX(100%)' }
+    },
+    'slide-up': {
+        enter: { transform: 'translateY(100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateY(100%)' }
+    },
+    'slide-down': {
+        enter: { transform: 'translateY(-100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateY(-100%)' }
+    },
+    'slide-left': {
+        enter: { transform: 'translateX(-100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateX(-100%)' }
+    },
+    'slide-right': {
+        enter: { transform: 'translateX(100%)' },
+        'enter-to': { transform: 'translateY(0)' },
+        leave: { transform: 'translateY(0)' },
+        'leave-to': { transform: 'translateX(100%)' }
+    },
+    zoom: {
+        enter: { transform: 'scale(0.95)' },
+        'enter-to': { transform: 'scale(1)' },
+        leave: { transform: 'scale(1)' },
+        'leave-to': { transform: 'scale(0.95)' }
+    },
+    'fade-zoom': {
+        enter: { opacity: 0, transform: 'scale(0.95)' },
+        'enter-to': { opacity: 1, transform: 'scale(1)' },
+        leave: { opacity: 1, transform: 'scale(1)' },
+        'leave-to': { opacity: 0, transform: 'scale(0.95)' }
+    }
+}

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

@@ -0,0 +1,27 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+        // 是否展示组件
+        show: {
+            type: Boolean,
+            default: () => defProps.transition.show
+        },
+        // 使用的动画模式
+        mode: {
+            type: String,
+            default: () => defProps.transition.mode
+        },
+        // 动画的执行时间，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.transition.duration
+        },
+        // 使用的动画过渡函数
+        timingFunction: {
+            type: String,
+            default: () => defProps.transition.timingFunction
+        }
+    }
+})

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

@@ -0,0 +1,36 @@
+/*
+ * @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 './transition.uts'
+let crtProp = defProps['transition'] as UTSJSONObject
+
+export const propsTransition = defineMixin({
+    props: {
+        // 是否展示组件
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 使用的动画模式
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 动画的执行时间，单位ms
+        duration: {
+            type: [Number, String],
+            default: crtProp['duration']
+        },
+        // 使用的动画过渡函数
+        timingFunction: {
+            type: String,
+            default: crtProp['timingFunction']
+        }
+    }
+})

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

@@ -0,0 +1,18 @@
+/*
+ * @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/transition.js
+ */
+export default {
+    // transition动画组件的props
+    transition: {
+        show: false,
+        mode: 'fade',
+        duration: '300',
+        timingFunction: 'ease-out'
+    }
+}

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

@@ -0,0 +1,18 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 16:59:00
+ * @FilePath     : /uview-ultra/libs/config/props/transition.js
+ */
+export default {
+    // transition动画组件的props
+    transition: {
+        show: false,
+        mode: 'fade',
+        duration: 300,
+        timingFunction: 'ease-out'
+    } as UTSJSONObject
+}