uview-plus 3.8.39 → 3.8.49

package/components/u-signature/u-signature.vue

@@ -364,6 +364,17 @@
 				
 				this.canvasInstance.clearCanvas();
 			},
+
+			// 对外暴露的清空方法（供工具栏与ref调用）
+			clear() {
+				this.pathStack = []
+				this.currentPath = []
+				this.lastPoint = null
+				this.isDrawing = false
+				this.isEmpty = true
+				this.clearCanvas()
+				this.$emit('clear')
+			},
 			
 			// 导出签名图片
 			async exportSignature() {

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

@@ -435,8 +435,8 @@
 		z-index: 1;
 	}
 
-	.u-tabbar-item__icon--mid-button .u-icon,
-	.u-tabbar-item__icon--mid-button .u-badge {
+	.u-tabbar-item__icon--mid-button :deep(.u-icon),
+	.u-tabbar-item__icon--mid-button :deep(.u-badge) {
 		position: relative;
 		z-index: 2;
 	}

package/components/u-tabs/props.js

@@ -63,9 +63,14 @@ export const props = defineMixin({
 			default: () => defProps.tabs.keyName
 		},
         // 左侧图标样式
-        iconStyle: {
-            type: [String, Object],
-            default: () => defProps.tabs.iconStyle
-        }
-    }
-})
+        iconStyle: {
+            type: [String, Object],
+            default: () => defProps.tabs.iconStyle
+        },
+        // 形态模式，可选：capsule/card/pill-arrow/tag
+        shapeMode: {
+            type: String,
+            default: () => defProps.tabs.shapeMode
+        }
+    }
+})

package/components/u-tabs/tabs.js

@@ -25,9 +25,10 @@ export default {
         itemStyle: {
             height: '44px'
         },
-        scrollable: true,
-		current: 0,
-		keyName: 'name',
-        iconStyle: {}
-    }
-}
+        scrollable: true,
+		current: 0,
+		keyName: 'name',
+        iconStyle: {},
+        shapeMode: ''
+    }
+}

package/components/u-tabs/u-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="u-tabs" :class="[customClass]">
+	<view class="u-tabs" :class="[customClass, shapeModeClass]">
 		<view class="u-tabs__wrapper">
 			<slot name="left" />
 			<view class="u-tabs__wrapper__scroll-view-wrapper">
@@ -9,7 +9,8 @@
 						<view class="u-tabs__wrapper__nav__item" v-for="(item, index) in tabList" :key="index"
 							@tap="clickHandler(item, index)" @longpress="longPressHandler(item,index)"
 							:ref="`u-tabs__wrapper__nav__item-${index}`"
-							:style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
+							:style="[itemComputedStyle, {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
+								shapeMode && `u-tabs__wrapper__nav__item--${shapeMode}`,
 								item.disabled && 'u-tabs__wrapper__nav__item--disabled',
 								innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']">
 							<slot v-if="$slots.icon" name="icon" :item="item" :keyName="keyName" :index="index" />
@@ -36,6 +37,12 @@
 								:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
 								:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
 								customStyle="margin-left: 4px;"></u-badge>
+							<view
+								v-if="shapeMode === 'card' && innerCurrent == index && index < tabList.length - 1"
+								class="u-tabs__wrapper__nav__item__card-corner"></view>
+							<view
+								v-if="shapeMode === 'pill-arrow' && innerCurrent == index"
+								class="u-tabs__wrapper__nav__item__active-arrow"></view>
 						</view>
 						<!-- #ifdef APP-NVUE -->
 						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
@@ -43,6 +50,7 @@
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
+								display: showLine ? 'block' : 'none'
 							}]">
 						</view>
 						<!-- #endif -->
@@ -55,7 +63,7 @@
 								height: addUnit(lineHeight),
 								background: lineColor,
 								backgroundSize: lineBgSize,
-								display: lineShow ? 'block': 'none'
+								display: showLine ? 'block': 'none'
 							}]">
 						</view>
 						<!-- #endif -->
@@ -98,6 +106,7 @@
 	 * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
 	 * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
 	 * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
+	 * @property {String}	shapeMode 标签形态模式，可选capsule/card/pill-arrow/tag（默认 '' ）
 	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
 	 * @event {Function(index)} longPress 长按标签时触发 index: 点击了第几个tab，索引从0开始
@@ -151,6 +160,31 @@
 			}
 		},
 		computed: {
+			shapeModeClass() {
+				return this.shapeMode ? `u-tabs--shape-${this.shapeMode}` : ''
+			},
+			showLine() {
+				return this.lineShow && !['capsule', 'pill-arrow', 'tag'].includes(this.shapeMode)
+			},
+			itemComputedStyle() {
+				const style = addStyle(this.itemStyle) || {}
+				if (this.upHasProp('itemStyle')) {
+					return style
+				}
+				const defaultModeHeights = {
+					capsule: '30px',
+					card: '34px',
+					'pill-arrow': '32px',
+					tag: '28px'
+				}
+				const height = defaultModeHeights[this.shapeMode]
+				if (!height) {
+					return style
+				}
+				return deepMerge(style, {
+					height
+				})
+			},
 			textStyle() {
 				return index => {
 					const style = {}
@@ -165,10 +199,14 @@
 						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultActiveColor)
 					const isInactiveStyleOverridden = this.upHasProp('inactiveStyle')
 						|| (customeStyle && customeStyle.color && customeStyle.color !== defaultInactiveColor)
-					if (isActive && !isActiveStyleOverridden) {
+					if (isActive && ['pill-arrow', 'tag'].includes(this.shapeMode) && !isActiveStyleOverridden) {
+						style.color = '#ffffff'
+					} else if (isActive && !isActiveStyleOverridden) {
 						style.color = this.upThemeVar('--up-main-color', this.$u.color.mainColor || defaultActiveColor)
 					}
-					if (!isActive && !isInactiveStyleOverridden) {
+					if (!isActive && ['pill-arrow', 'tag'].includes(this.shapeMode) && !isInactiveStyleOverridden) {
+						style.color = '#606266'
+					} else if (!isActive && !isInactiveStyleOverridden) {
 						style.color = this.upThemeVar('--up-content-color', this.$u.color.contentColor || defaultInactiveColor)
 					}
 					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
@@ -375,6 +413,7 @@
 				&__item {
 					padding: 0 11px;
 					@include flex;
+					position: relative;
 					align-items: center;
 					justify-content: center;
 					/* #ifdef H5 */
@@ -396,6 +435,30 @@
 							color: $u-disabled-color !important;
 						}
 					}
+
+					&__card-corner {
+						position: absolute;
+						top: 0;
+						right: -10px;
+						width: 20px;
+						height: 100%;
+						background-color: inherit;
+						transform: skewX(25deg);
+						border-top-right-radius: 10px;
+						z-index: 1;
+					}
+
+					&__active-arrow {
+						position: absolute;
+						left: 50%;
+						bottom: -6px;
+						width: 0;
+						height: 0;
+						border-left: 6px solid transparent;
+						border-right: 6px solid transparent;
+						border-top: 6px solid #ff3b30;
+						transform: translateX(-50%);
+					}
 				}
 
 				&__line {
@@ -410,5 +473,82 @@
 				}
 			}
 		}
+
+		&--shape-capsule {
+			.u-tabs__wrapper__scroll-view-wrapper {
+				padding: 3px;
+				border-radius: 999px;
+				background-color: #edf0f5;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 30px;
+				padding: 0 14px;
+				border-radius: 999px;
+				transition: background-color 0.2s;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #ffffff;
+			}
+		}
+
+		&--shape-card {
+			.u-tabs__wrapper__scroll-view-wrapper {
+				padding: 0;
+				border-radius: 10px;
+				background-color: #9ccde5;
+				box-shadow: inset 0 0 0 1px rgba(96, 98, 102, 0.06);
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 34px;
+				padding: 0;
+				border-radius: 10px 10px 0 0;
+				transition: background-color 0.2s;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #f6f8fb;
+				box-shadow: inset 0 0 0 1px rgba(96, 98, 102, 0.06);
+				z-index: 2;
+			}
+		}
+
+		&--shape-pill-arrow {
+			.u-tabs__wrapper__nav {
+				padding-bottom: 6px;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 32px;
+				padding: 0 12px;
+				border-radius: 8px;
+				background-color: #e8e8e8;
+				margin-right: 8px;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background: linear-gradient(90deg, #ff6c57 0%, #ff3b30 100%);
+			}
+		}
+
+		&--shape-tag {
+			.u-tabs__wrapper__nav {
+				padding: 2px 0;
+			}
+
+			.u-tabs__wrapper__nav__item {
+				min-height: 28px;
+				padding: 0 14px;
+				border-radius: 999px;
+				background-color: #f3f4f6;
+				margin-right: 8px;
+			}
+
+			.u-tabs__wrapper__nav__item-active {
+				background-color: #2a6bf6;
+			}
+		}
 	}
 </style>

package/components/u-tooltip/props.js

@@ -71,6 +71,11 @@ export const props = defineMixin({
         forcePosition: {
             type: Object,
             default: () => defProps.tooltip.forcePosition
+        },
+        // 是否显示，triggerMode为manual时使用
+        show: {
+            type: Boolean,
+            default: () => defProps.tooltip.show
         }
     }
 })

package/components/u-tooltip/tooltip.js

@@ -23,6 +23,7 @@ export default {
         showToast: true,
         popupBgColor: '',
         triggerMode: 'longpress',
-        forcePosition: {}
+        forcePosition: {},
+        show: false
     }
 }

package/components/u-tooltip/u-tooltip.vue

@@ -164,6 +164,15 @@
 			async propsChange() {
 				await this.getElRect()
 				// this.getTooltipStyle();
+			},
+			show(val) {
+				if (this.triggerMode === 'manual') {
+					if (val) {
+						this.open()
+					} else {
+						this.close()
+					}
+				}
 			}
 		},
 		computed: {
@@ -231,7 +240,7 @@
 		mounted() {
 			this.init()
 		},
-		emits: ["click"],
+		emits: ["click", "open", "close"],
 		methods: {
 			addStyle,
 			addUnit,
@@ -241,27 +250,34 @@
 			},
 			// 点击触发事件
 			async clickHander() {
-				// this.getTooltipStyle();
 				if (this.triggerMode == 'click') {
-					this.tooltipTop = 0
-					this.showTooltip = true
+					this.open()
 				}
 			},
 			// 长按触发事件
 			async longpressHandler() {
-				// this.getTooltipStyle();
 				if (this.triggerMode == 'longpress') {
-					this.tooltipTop = 0
-					this.showTooltip = true
+					this.open()
 				}
 			},
+			// 打开tooltip
+			open() {
+				this.tooltipTop = 0
+				this.showTooltip = true
+				this.$emit('open')
+			},
+			// 关闭tooltip
+			close() {
+				this.showTooltip = false
+				this.$emit('close')
+			},
 			// 点击透明遮罩
 			overlayClickHandler() {
-				this.showTooltip = false
+				this.close()
 			},
 			// 点击弹出按钮
 			btnClickHandler(index) {
-				this.showTooltip = false
+				this.close()
 				// 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
 				this.$emit('click', this.showCopy ? index + 1 : index)
 			},
@@ -308,7 +324,7 @@
 			// 复制文本到粘贴板
 			setClipboardData() {
 				// 关闭组件
-				this.showTooltip = false
+				this.close()
 				this.$emit('click', 0)
 				uni.setClipboardData({
 					// 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
@@ -318,9 +334,6 @@
 					},
 					fail: () => {
 						this.showToast && toast('复制失败')
-					},
-					complete: () => {
-						this.showTooltip = false
 					}
 				})
 			}

package/libs/config/props.js

@@ -21,6 +21,7 @@ import Backtop from '../../components/u-back-top/backtop'
 import Badge from '../../components/u-badge/badge'
 import Button from '../../components/u-button/button'
 import Calendar from '../../components/u-calendar/calendar'
+import CalendarStrip from '../../components/u-calendar-strip/calendarStrip'
 import CarKeyboard from '../../components/u-car-keyboard/carKeyboard'
 import Card from '../../components/u-card/card'
 import Cell from '../../components/u-cell/cell'
@@ -42,6 +43,7 @@ import Empty from '../../components/u-empty/empty'
 import Form from '../../components/u-form/form'
 import FormItem from '../../components/u-form-item/formItem'
 import Gap from '../../components/u-gap/gap'
+import Guide from '../../components/u-guide/guide'
 import Grid from '../../components/u-grid/grid'
 import GridItem from '../../components/u-grid-item/gridItem'
 import Icon from '../../components/u-icon/icon'
@@ -112,6 +114,7 @@ const props = {
     ...Badge,
     ...Button,
     ...Calendar,
+    ...CalendarStrip,
     ...CarKeyboard,
     ...Card,
     ...Cell,
@@ -133,6 +136,7 @@ const props = {
     ...Form,
     ...FormItem,
     ...Gap,
+    ...Guide,
     ...Grid,
     ...GridItem,
     ...Icon,

package/package.json

@@ -2,7 +2,7 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.8.39",
+  "version": "3.8.49",
   "description": "零云®uview-plus已兼容vue3支持多语言，120+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名、Markdown等。",
   "keywords": [
     "uview",

package/types/comps/calendar.d.ts

@@ -124,6 +124,11 @@ declare interface CalendarProps {
    * @default false
    */
   allowSameDay?: boolean
+  /**
+   * 区间模式下确认返回值格式，`all`返回区间内所有日期，`boundary`仅返回起止日期
+   * @default "all"
+   */
+  rangeResultMode?: 'all' | 'boundary'
   /**
    * 圆角值，默认无圆角
    * @default 0

package/types/comps/calendarStrip.d.ts

@@ -0,0 +1,116 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface CalendarStripPayload {
+  date: string
+  month: string
+  scene: string
+}
+
+declare interface CalendarStripProps {
+  /**
+   * 当前选中日期
+   */
+  modelValue?: string | number | Date | null
+  /**
+   * 最小可选日期
+   * @default 0
+   */
+  minDate?: string | number
+  /**
+   * 最大可选日期
+   * @default 0
+   */
+  maxDate?: string | number
+  /**
+   * 主题色
+   * @default "#3c9cff"
+   */
+  color?: string
+  /**
+   * 星期文案（周一到周日）
+   */
+  weekText?: string[]
+  /**
+   * 是否支持下拉展开完整月历
+   * @default true
+   */
+  fullCalendar?: boolean
+  /**
+   * 透传给内嵌 up-calendar 的额外参数
+   */
+  fullCalendarProps?: Record<string, any>
+  /**
+   * 完整月历可浏览月份数（仅在未传 minDate/maxDate 时生效）
+   * @default 24
+   */
+  fullMonthNum?: string | number
+  /**
+   * 下拉/上拉手势触发阈值，单位 px
+   * @default 40
+   */
+  pullDownThreshold?: string | number
+  /**
+   * 在完整月历中选择日期后是否自动收起
+   * @default true
+   */
+  collapseAfterSelect?: boolean
+  /**
+   * 是否只读
+   * @default false
+   */
+  readonly?: boolean
+  /**
+   * 是否高亮今天
+   * @default true
+   */
+  showToday?: boolean
+  /**
+   * 顶部月份格式化模板，遵循 dayjs 格式
+   */
+  monthFormat?: string
+  /**
+   * 收起状态提示文案
+   * @default "下拉展开月历"
+   */
+  expandHint?: string
+  /**
+   * 展开状态提示文案
+   * @default "上拉收起月历"
+   */
+  collapseHint?: string
+  /**
+   * 日期变更时触发
+   */
+  onChange?: (payload: CalendarStripPayload) => any
+  /**
+   * 日期确认时触发
+   */
+  onConfirm?: (payload: CalendarStripPayload) => any
+  /**
+   * 月份变更时触发
+   */
+  onMonthChange?: (payload: { month: string; scene: string }) => any
+  /**
+   * 展开/收起完整月历时触发
+   */
+  onToggleFull?: (payload: { show: boolean; source: string }) => any
+}
+
+declare interface _CalendarStrip {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      CalendarStripProps
+  }
+}
+
+declare interface _CalendarStripRef {
+  prevMonth: () => void
+  nextMonth: () => void
+  toggleFull: () => void
+}
+
+export declare const CalendarStrip: _CalendarStrip
+
+export declare const CalendarStripRef: _CalendarStripRef
+

package/types/comps/datetimePicker.d.ts

@@ -23,7 +23,7 @@ declare interface DatetimePickerProps {
    * 展示格式
    * @default "datetime"
    */
-  mode?: 'datetime' | 'date' | 'time' | 'year-month'
+  mode?: 'datetime' | 'date' | 'time' | 'year-month' | 'datehour' | 'timesecond' | 'datetimesecond'
   /**
    * 可选的最大时间（时间戳毫秒）
    * @default 最大默认值为后10年
@@ -35,25 +35,35 @@ declare interface DatetimePickerProps {
    */
   minDate?: number
   /**
-   * 可选的最小小时，仅mode=time有效
+   * 可选的最小小时，仅mode=time/timesecond有效
    * @default 0
    */
   minHour?: number
   /**
-   * 可选的最大小时，仅mode=time有效
+   * 可选的最大小时，仅mode=time/timesecond有效
    * @default 23
    */
   maxHour?: number
   /**
-   * 可选的最小分钟，仅mode=time有效
+   * 可选的最小分钟，仅mode=time/timesecond有效
    * @default 0
    */
   minMinute?: number
   /**
-   * 可选的最大分钟，仅mode=time有效
+   * 可选的最大分钟，仅mode=time/timesecond有效
    * @default 59
    */
   maxMinute?: number
+  /**
+   * 可选的最小秒，仅mode=timesecond有效
+   * @default 0
+   */
+  minSecond?: number
+  /**
+   * 可选的最大秒，仅mode=timesecond有效
+   * @default 59
+   */
+  maxSecond?: number
   /**
    * 选项过滤函数
    * @default null

package/types/comps/guide.d.ts

@@ -0,0 +1,45 @@
+import { AllowedComponentProps, VNodeProps } from './_common'
+
+declare interface GuideItem {
+  image: string
+  title?: string
+  desc?: string
+  backgroundColor?: string
+}
+
+declare interface GuideProps {
+  show?: boolean
+  list?: GuideItem[]
+  storageKey?: string
+  once?: boolean
+  showSkip?: boolean
+  skipText?: string
+  nextText?: string
+  finishText?: string
+  indicator?: boolean
+  bgColor?: string
+  zIndex?: string | number
+  ['onUpdate:show']?: (value: boolean) => any
+  onChange?: (payload: { current: number }) => any
+  onSkip?: () => any
+  onFinish?: () => any
+  onClose?: () => any
+}
+
+declare interface _GuideRef {
+  open: () => void
+  close: (remember?: boolean) => void
+  reset: () => void
+}
+
+declare interface _Guide {
+  new (): {
+    $props: AllowedComponentProps &
+      VNodeProps &
+      GuideProps
+  }
+}
+
+export declare const Guide: _Guide
+
+export declare const GuideRef: _GuideRef

package/types/comps/tabs.d.ts

@@ -60,6 +60,11 @@ declare interface TabsProps {
    * @default "name"
    */
   keyName?: string
+  /**
+   * 标签形态模式，可选值：`capsule`/`card`/`pill-arrow`/`tag`
+   * @default ""
+   */
+  shapeMode?: string
   /**
    * 点击标签时触发
    * @param item 传入的其他值