uview-plus 3.8.55 → 3.8.106

package/components/u-swipe-action-item/u-swipe-action-item.vue

@@ -32,14 +32,14 @@
 		</view>
 		<!-- #ifdef APP-VUE || MP-WEIXIN || MP-QQ || H5  -->
 		<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
-			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
+			@touchend="wxs.touchend" @touchcancel="wxs.touchcancel" :status="status" :change:status="wxs.statusChange" :size="size"
 			:change:size="wxs.sizeChange">
 			<slot></slot>
 		</view>
 		<!-- #endif -->
 		<!-- #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO-->
 		<view class="u-swipe-action-item__content" @click="clickHandler" @touchstart="touchstart" @touchmove="touchmove"
-			@touchend="touchend" :style="sliderStyle">
+			@touchend="touchend" @touchcancel="touchcancel" :style="sliderStyle">
 			<slot></slot>
 		</view>
 		<!-- <view class="u-swipe-action-item__content" @touchstart="mysjs.touchstart" @touchmove="mysjs.touchmove"
@@ -81,16 +81,18 @@
 	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
 	 * @property {Boolean}			disabled		是否禁用（默认 false ）
 	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
+	 * @property {Boolean}			scrolling		是否正在横向滑动，可用于v-model:scrolling暂停外部滚动（默认 false ）
 	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
 	 * @property {Array}			options			右侧按钮内容
 	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
+	 * @event {Function(value)}	scrolling	横向滑动状态变化时触发，参数为Boolean
 	 * @event {Function(index)}	open	组件打开时触发
 	 * @event {Function(index)}	close	组件关闭时触发
 	 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
 	 */
 	export default {
 		name: 'u-swipe-action-item',
-		emits: ['click', 'update:show'],
+		emits: ['click', 'update:show', 'update:scrolling', 'scrolling'],
 		mixins: [
 			mpMixin,
 			mixin,
@@ -118,7 +120,9 @@
 				},
 				// 当前状态，open-打开，close-关闭
 				status: '',
-				sliderStyle: {}
+				sliderStyle: {},
+				// 内部缓存横向滑动状态，避免一次手势重复触发相同事件
+				innerScrolling: this.scrolling
 			}
 		},
 		watch: {
@@ -142,6 +146,14 @@
 				} else {
 					this.status = 'close'
 				}
+			},
+			scrolling(newValue) {
+				this.innerScrolling = !!newValue
+			},
+			disabled(newValue) {
+				if (newValue) {
+					this.setScrolling(false)
+				}
 			}
 		},
 		computed: {
@@ -160,6 +172,11 @@
 		},
 		beforeUmount() {
 			this.closeHandler()
+			this.setScrolling(false)
+		},
+		beforeUnmount() {
+			this.closeHandler()
+			this.setScrolling(false)
 		},
 		methods: {
 			addUnit,
@@ -177,6 +194,13 @@
 				// 此方法在mixin中
 				this.getParentData('u-swipe-action')
 			},
+			setScrolling(value) {
+				const next = !!value
+				if (this.innerScrolling === next) return
+				this.innerScrolling = next
+				this.$emit('update:scrolling', next)
+				this.$emit('scrolling', next)
+			},
 			// #ifndef APP-NVUE
 			// 查询节点
 			queryRect() {
@@ -214,11 +238,23 @@
 		/* #ifndef APP-NVUE || MP-WEIXIN */
 		touch-action: pan-y;
 		/* #endif */
+		/* #ifndef APP-NVUE */
+		// 触发独立合成层，避免 H5 下 overflow 裁剪失效导致右侧按钮露边
+		transform: translateZ(0);
+		/* #endif */
 
 		&__content {
+			position: relative;
+			// 保证内容层始终铺满整行，避免关闭态右侧露出删除按钮底色
+			width: 100%;
             transform: translateX(0px); // 修复某些情况下默认右侧按钮是展开的问题
 			background-color: var(--up-card-bg-color, #FFFFFF);
 			z-index: 10;
+			/* #ifndef APP-NVUE */
+			// 覆盖 H5 亚像素渲染时内容层与容器之间的 1px 缝隙
+			box-shadow: 1px 0 0 var(--up-card-bg-color, #FFFFFF);
+			box-sizing: border-box;
+			/* #endif */
 		}
 
 		&__right {
@@ -226,6 +262,8 @@
 			top: 0;
 			bottom: 0;
 			right: 0;
+			height: 100%;
+			z-index: 1;
 			@include flex;
 
 			&__button {

package/components/u-swiper/props.js

@@ -1,5 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import SwiperDefaultProps from './swiper'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(SwiperDefaultProps)
 export const props = defineMixin({
     props: {
         // 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
@@ -62,6 +65,11 @@ export const props = defineMixin({
             type: Boolean,
             default: () => defProps.swiper.circular
         },
+        // 滑动方向是否为纵向
+        vertical: {
+            type: Boolean,
+            default: () => defProps.swiper.vertical
+        },
         // 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
         previousMargin: {
             type: [String, Number],

package/components/u-swiper/swiper.js

@@ -22,6 +22,7 @@ export default {
         interval: 3000,
         duration: 300,
         circular: false,
+        vertical: false,
         previousMargin: 0,
         nextMargin: 0,
         acceleration: false,

package/components/u-swiper/u-swiper.vue

@@ -27,6 +27,7 @@
 			:autoplay="autoplay"
 			:current="current"
 			:currentItemId="currentItemId"
+			:vertical="vertical"
 			:previousMargin="addUnit(previousMargin)"
 			:nextMargin="addUnit(nextMargin)"
 			:acceleration="acceleration"
@@ -113,6 +114,7 @@
 	 * @property {String | Number}	interval				滑块自动切换时间间隔（ms）（默认 3000 ）
 	 * @property {String | Number}	duration				滑块切换过程所需时间（ms）（默认 300 ）
 	 * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 false ）
+	 * @property {Boolean}			vertical				滑动方向是否为纵向（默认 false ）
 	 * @property {String | Number}	previousMargin			前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
 	 * @property {String | Number}	nextMargin				后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
 	 * @property {Boolean}			acceleration			当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）

package/components/u-swiper-indicator/props.js

@@ -1,5 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import SwiperIndicatorDefaultProps from './swipterIndicator'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(SwiperIndicatorDefaultProps)
 export const props = defineMixin({
     props: {
         // 轮播的长度

package/components/u-switch/props.js

@@ -1,5 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import SwitchDefaultProps from './switch'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(SwitchDefaultProps)
 export const props = defineMixin({
     props: {
         // 是否为加载中状态

package/components/u-switch/u-switch.vue

@@ -212,7 +212,7 @@
 		border-style: solid;
 		justify-content: flex-end;
 		align-items: center;
-		// 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
+		// 由于weex bug奇多，这必须要写这一行，
 		// 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
 		overflow: hidden;
 

package/components/u-tabbar/props.js

@@ -1,6 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import TabbarDefaultProps from './tabbar'
+import { registerComponentProps } from '../../libs/config/props.js'
 
+const defProps = registerComponentProps(TabbarDefaultProps)
 export const props = defineMixin({
     props: {
         // 当前匹配项的name

package/components/u-tabbar/u-tabbar.vue

@@ -98,7 +98,8 @@
 					this.inactiveBackgroundColor,
 					this.itemShape,
 					this.iconScale,
-					this.textMode
+					this.textMode,
+					this.borderColor
 				]
 			},
 			updatePlaceholder() {

package/components/u-tabbar-item/props.js

@@ -1,5 +1,8 @@
 import { defineMixin } from '../../libs/vue'
-import defProps from '../../libs/config/props.js'
+import TabbarItemDefaultProps from './tabbarItem'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(TabbarItemDefaultProps)
 export const props = defineMixin({
     props: {
         // item标签的名称，作为与u-tabbar的value参数匹配的标识符

package/components/u-tabbar-item/u-tabbar-item.vue

@@ -11,10 +11,8 @@
 					class="u-tabbar-item__icon"
 					:class="iconClassNames"
 				>
-					<view v-if="isMidButton" class="u-tabbar-item__mid-button-arc">
-						<svg viewBox="0 0 72 72" preserveAspectRatio="none">
-							<path d="M 4 36 A 32 32 0 0 1 68 36"></path>
-						</svg>
+					<view v-if="isMidButton" class="u-tabbar-item__mid-button-border">
+						<view class="u-tabbar-item__mid-button-border-circle" :style="midButtonBorderCircleStyle"></view>
 					</view>
 					<view v-if="isMidButton" class="u-tabbar-item__mid-button-inner"></view>
 					<up-icon
@@ -22,6 +20,7 @@
 						:name="resolvedIconName"
 						:color="isMidButton ? resolvedMidButtonIconColor : (isActive ? resolvedActiveColor : resolvedInactiveColor)"
 						:size="isMidButton ? midButtonIconSize : 24"
+						:customStyle="midButtonIconStyle"
 					></up-icon>
 					<template v-else>
 						<slot
@@ -94,7 +93,8 @@
 					inactiveBackgroundColor: '',
 					itemShape: 'default',
 					iconScale: 1.1,
-					textMode: 'always'
+					textMode: 'always',
+					borderColor: ''
 				}
 			}
 		},
@@ -135,10 +135,41 @@
 				if (this.midButtonIconColor) return this.midButtonIconColor
 				return this.isMidButton ? '#3c9cff' : this.resolvedActiveColor
 			},
+			midButtonIconStyle() {
+				return this.isMidButton
+					? {
+						position: 'relative',
+						zIndex: 2
+					}
+					: {}
+			},
+			hasMidButtonText() {
+				return !!this.$slots.text || String(this.text || '').length > 0
+			},
+			resolvedMidButtonOffsetY() {
+				const offset = Number.parseFloat(this.midButtonOffsetY)
+				return Number.isFinite(offset) ? offset : -10
+			},
+			midButtonTranslateY() {
+				return `${this.resolvedMidButtonOffsetY}px`
+			},
+			midButtonBorderClipHeight() {
+				const clipBaseHeight = this.hasMidButtonText ? 15.5 : 7
+				const clipHeight = clipBaseHeight - this.resolvedMidButtonOffsetY
+				return `${Math.min(Math.max(clipHeight, 0), 64)}px`
+			},
+			midButtonBorderCircleStyle() {
+				return this.isMidButton && this.parentData.borderColor
+					? {
+						borderColor: this.parentData.borderColor
+					}
+					: {}
+			},
 			itemClassNames() {
 				return [
 					this.isActive ? 'u-tabbar-item--active' : 'u-tabbar-item--inactive',
 					this.isMidButton ? 'u-tabbar-item--mid-button' : '',
+					this.isMidButton && !this.hasMidButtonText ? 'u-tabbar-item--mid-button-no-text' : '',
 					`u-tabbar-item--${this.resolvedStyleType}`,
 					this.resolvedAnimationType !== 'none' && this.isActive ? `u-tabbar-item--anim-${this.resolvedAnimationType}` : '',
 					this.resolvedItemShape !== 'default' ? `u-tabbar-item--shape-${this.resolvedItemShape}` : '',
@@ -276,6 +307,11 @@
 
 			&--mid-button {
 				justify-content: center;
+				position: relative;
+				z-index: 1;
+				/* #ifndef APP-NVUE */
+				transform: translateY(v-bind('midButtonTranslateY'));
+				/* #endif */
 			}
 		}
 
@@ -381,9 +417,6 @@
 	
 	// 中间按钮样式
 	.u-tabbar-item--mid-button {
-		/* #ifndef APP-NVUE */
-		transform: translateY(v-bind('`${midButtonOffsetY}px`'));
-		/* #endif */
 		z-index: 2;
 		flex: 1;
 	}
@@ -401,26 +434,36 @@
 		overflow: visible;
 	}
 
-	.u-tabbar-item__mid-button-arc {
+	.u-tabbar-item__mid-button-border {
 		position: absolute;
-		left: -4px;
-		top: -4px;
-		width: calc(100% + 8px);
-		height: calc(100% + 8px);
+		left: 0;
+		top: 0;
+		width: 64px;
+		height: v-bind('midButtonBorderClipHeight');
+		box-sizing: border-box;
+		background: transparent;
+		overflow: hidden;
 		pointer-events: none;
 		z-index: 0;
 	}
 
-	.u-tabbar-item__mid-button-arc svg {
-		width: 100%;
-		height: 100%;
+	/* #ifdef APP-NVUE */
+	.u-tabbar-item__mid-button-border {
+		height: 15.5px;
 	}
 
-	.u-tabbar-item__mid-button-arc path {
-		fill: none;
-		stroke: none;
-		stroke-width: 0;
-		stroke-linecap: round;
+	.u-tabbar-item--mid-button-no-text .u-tabbar-item__mid-button-border {
+		height: 7px;
+	}
+	/* #endif */
+
+	.u-tabbar-item__mid-button-border-circle {
+		width: 64px;
+		height: 64px;
+		box-sizing: border-box;
+		background: transparent;
+		border: 1px solid var(--up-border-color, rgba(0, 0, 0, 0.08));
+		border-radius: 999px;
 	}
 
 	.u-tabbar-item__mid-button-inner {

package/components/u-table/props.js

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