@wot-ui/ui 2.1.0 → 2.2.0

package/changelog.md

@@ -1,6 +1,22 @@
 # 更新日志 
 
 
+## [2.2.0](https://github.com/wot-ui/wot-ui/compare/v2.1.0...v2.2.0) (2026-06-30)
+
+
+### ✨ Features | 新功能
+
+* ✨ VideoPreview 支持预览时默认 video 铺满屏幕 ([#79](https://github.com/wot-ui/wot-ui/issues/79)) ([8e97be7](https://github.com/wot-ui/wot-ui/commit/8e97be72f25043bd2160e510f56bbddc5c77943f)), closes [#77](https://github.com/wot-ui/wot-ui/issues/77)
+* **button:** ✨ 新增 subtle 类型变体 ([#80](https://github.com/wot-ui/wot-ui/issues/80)) ([5c9e3d1](https://github.com/wot-ui/wot-ui/commit/5c9e3d1d12e29b926640fbc45fcb59586bea566b))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Toast 组件图标设置图标大小后行高异常的问题 ([#84](https://github.com/wot-ui/wot-ui/issues/84)) ([13585ff](https://github.com/wot-ui/wot-ui/commit/13585ffdf7f6dc181c39ff16e861a5bcf7273eb7))
+* 🐛 修复未渲染的表单项仍触发表单校验的问题 ([#78](https://github.com/wot-ui/wot-ui/issues/78)) ([01d08f1](https://github.com/wot-ui/wot-ui/commit/01d08f127ec786275af40b0b0515176173d57173)), closes [#73](https://github.com/wot-ui/wot-ui/issues/73)
+* 🐛 修复支付宝小程序 tabs 子组件渲染顺序错误的问题 ([#83](https://github.com/wot-ui/wot-ui/issues/83)) ([58c4c61](https://github.com/wot-ui/wot-ui/commit/58c4c618de497a066b058cc911c3c01e0fa7548b))
+* 修复文档中自动导入示例代码的问题 ([#75](https://github.com/wot-ui/wot-ui/issues/75)) ([be68ccd](https://github.com/wot-ui/wot-ui/commit/be68ccdede09476da833afd9583fbf97dc618291))
+
 ## [2.1.0](https://github.com/wot-ui/wot-ui/compare/v2.0.8...v2.1.0) (2026-06-10)
 
 

package/components/wd-button/index.scss

@@ -275,6 +275,7 @@ $button-variants: (
   "plain": ("show-border": true),
   "dashed": ("show-border": true, "border-style": dashed),
   "soft": ("hide-border": true, "soft-bg": true),
+  "subtle": ("show-border": true, "soft-bg": true),
   "text": ("hide-border": true)
 );
 

package/components/wd-button/types.ts

@@ -9,9 +9,9 @@ import { type LoadingProps } from '../wd-loading/types'
 export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'danger'
 /**
  * 按钮变体
- * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'text'
+ * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'subtle' | 'text'
  */
-export type ButtonVariant = 'base' | 'plain' | 'dashed' | 'soft' | 'text'
+export type ButtonVariant = 'base' | 'plain' | 'dashed' | 'soft' | 'subtle' | 'text'
 /**
  * 按钮尺寸
  * 可选值: 'mini' | 'small' | 'medium' | 'large'
@@ -204,7 +204,7 @@ export const buttonProps = {
   /**
    * 按钮变体
    * 类型: ButtonVariant
-   * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'text'
+   * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'subtle' | 'text'
    * 不传则继承全局配置
    */
   variant: String as PropType<ButtonVariant>

package/components/wd-form/wd-form.vue

@@ -57,12 +57,12 @@ async function validate(prop?: string | string[]): Promise<{ valid: boolean; err
       prop: issue.path.map((item) => String(item)).join('.'),
       message: issue.message
     }))
+  const childrenProps = getChildrenProps()
+  const visibleErrors = errors.filter((error) => getMatchedChildProp(error.prop, childrenProps))
   const filteredErrors =
     propsToValidate.length > 0
-      ? errors.filter((error) =>
-          propsToValidate.some((target) => error.prop === target || error.prop.startsWith(`${target}.`) || target.startsWith(`${error.prop}.`))
-        )
-      : errors
+      ? visibleErrors.filter((error) => propsToValidate.some((target) => isSameOrSubPath(error.prop, target)))
+      : visibleErrors
   const valid = filteredErrors.length === 0
 
   showMessage(filteredErrors)
@@ -81,9 +81,30 @@ async function validate(prop?: string | string[]): Promise<{ valid: boolean; err
   }
 }
 
+function getChildrenProps() {
+  return children.map((e) => e.prop).filter((prop): prop is string => Boolean(prop))
+}
+
+function isSameOrSubPath(prop: string, target: string) {
+  return prop === target || prop.startsWith(`${target}.`) || target.startsWith(`${prop}.`)
+}
+
+function getMatchedChildProp(prop: string, childrenProps: string[]) {
+  return childrenProps.find((target) => target === prop) || childrenProps.find((target) => isSameOrSubPath(prop, target))
+}
+
 function showMessage(errors: ErrorMessage[]) {
-  const childrenProps = children.map((e) => e.prop).filter(Boolean)
-  const messages = errors.filter((error) => error.message && childrenProps.includes(error.prop))
+  const childrenProps = getChildrenProps()
+  const messages = errors.reduce<ErrorMessage[]>((result, error) => {
+    const matchedProp = getMatchedChildProp(error.prop, childrenProps)
+    if (error.message && matchedProp) {
+      result.push({
+        prop: matchedProp,
+        message: error.message
+      })
+    }
+    return result
+  }, [])
   if (messages.length) {
     messages.sort((a, b) => {
       return childrenProps.indexOf(a.prop) - childrenProps.indexOf(b.prop)
@@ -100,7 +121,11 @@ function showMessage(errors: ErrorMessage[]) {
 
 function clearMessage(prop?: string) {
   if (prop) {
-    errorMessages[prop] = ''
+    Object.keys(errorMessages).forEach((key) => {
+      if (isSameOrSubPath(key, prop)) {
+        errorMessages[key] = ''
+      }
+    })
   } else {
     Object.keys(errorMessages).forEach((key) => {
       errorMessages[key] = ''

package/components/wd-toast/index.scss

@@ -54,7 +54,6 @@ $toast-loading-margin-bottom: var(--wot-toast-loading-margin-bottom, $spacing-ex
 
   @include edeep(icon) {
     font-size: $toast-icon-size;
-    line-height: $toast-icon-size;
     @include when(vertical) {
       margin-bottom: $toast-icon-margin-bottom;
     }

package/components/wd-video-preview/index.scss

@@ -33,6 +33,15 @@ $video-preview-close-z-index: var(--wot-video-preview-close-z-index, 10) !defaul
     width: 100%;
     height: $video-preview-video-height;
     transition: all 0.3s ease;
+
+    @include when(fullscreen) {
+      height: 100%;
+    }
+  }
+
+  @include e(video-player) {
+    width: 100%;
+    height: 100%;
   }
 
   @include e(close) {
@@ -42,8 +51,17 @@ $video-preview-close-z-index: var(--wot-video-preview-close-z-index, 10) !defaul
     justify-content: center;
     align-items: center;
     top: $video-preview-close-margin;
-    right: $video-preview-close-margin;
     cursor: pointer;
+
+    @include when(left-top) {
+      left: $video-preview-close-margin;
+      right: auto;
+    }
+
+    @include when(right-top) {
+      left: auto;
+      right: $video-preview-close-margin;
+    }
   }
 
   @include edeep(close-icon) {

package/components/wd-video-preview/types.ts

@@ -10,7 +10,9 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps } from '../../common/props'
 
-import { makeStringProp, makeNumberProp } from '../../common/props'
+import { makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+export type VideoPreviewClosePosition = 'left-top' | 'right-top'
 
 export const videoPreviewProps = {
   ...baseProps,
@@ -24,6 +26,19 @@ export const videoPreviewProps = {
    * 默认值: 1000
    */
   zIndex: makeNumberProp(1000),
+  /**
+   * 是否全屏预览
+   * 类型: boolean
+   * 默认值: false
+   */
+  fullScreen: makeBooleanProp(false),
+  /**
+   * 关闭按钮位置
+   * 类型: VideoPreviewClosePosition
+   * 可选值: 'left-top' | 'right-top'
+   * 默认值: 'left-top'
+   */
+  closePosition: makeStringProp<VideoPreviewClosePosition>('left-top'),
   /**
    * 打开时的回调
    */
@@ -45,6 +60,10 @@ export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
 export interface VideoPreviewOptions extends PreviewVideo {
   show?: boolean
   zIndex?: number
+  /** 是否全屏预览 */
+  fullScreen?: boolean
+  /** 关闭按钮位置 */
+  closePosition?: VideoPreviewClosePosition
   /** 打开时的回调 */
   onOpen?: () => void
   /** 关闭时的回调 */
@@ -58,7 +77,7 @@ export type VideoPreview = {
 
 export type VideoPreviewExpose = {
   /** 打开预览 */
-  open: (video: PreviewVideo) => void
+  open: (video: VideoPreviewOptions) => void
   /** 关闭预览 */
   close: () => void
 }

package/components/wd-video-preview/wd-video-preview.vue

@@ -1,31 +1,51 @@
 <template>
-  <wd-overlay
-    :show="state.show"
-    :z-index="options.zIndex"
-    :lock-scroll="true"
-    :custom-class="`wd-video-preview ${customClass}`"
-    :custom-style="customStyle"
-    @click="close"
-    @enter="handleEnter"
-    @after-leave="handleAfterLeave"
-  >
-    <view class="wd-video-preview__video" @click.stop="">
-      <video
-        class="wd-video-preview__video"
-        v-if="state.visible && previewVideo.url"
-        :controls="true"
-        :poster="previewVideo.poster"
-        :title="previewVideo.title"
-        play-btn-position="center"
-        :enableNative="true"
-        :src="previewVideo.url"
-        :enable-progress-gesture="false"
-      ></video>
-    </view>
-    <view class="wd-video-preview__close" @click.stop="close">
-      <wd-icon name="close" custom-class="wd-video-preview__close-icon" />
-    </view>
-  </wd-overlay>
+  <!-- #ifdef APP-PLUS -->
+  <view v-if="state.show" :class="`wd-video-preview ${customClass}`" :style="`z-index: ${options.zIndex}; ${customStyle}`" @click="close">
+    <!-- #endif -->
+    <!-- #ifndef APP-PLUS -->
+    <wd-overlay
+      :show="state.show"
+      :z-index="options.zIndex"
+      :lock-scroll="true"
+      :custom-class="`wd-video-preview ${customClass}`"
+      :custom-style="customStyle"
+      @click="close"
+      @enter="handleEnter"
+      @after-leave="handleAfterLeave"
+    >
+      <!-- #endif -->
+
+      <view :class="videoClass" @click.stop="">
+        <video
+          :id="videoId"
+          class="wd-video-preview__video-player"
+          v-if="state.visible && previewVideo.url"
+          :controls="true"
+          :poster="previewVideo.poster"
+          :title="previewVideo.title"
+          play-btn-position="center"
+          :enableNative="true"
+          :src="previewVideo.url"
+          :enable-progress-gesture="false"
+          @fullscreenchange="handleFullscreenChange"
+        ></video>
+      </view>
+      <!-- #ifndef APP-PLUS -->
+      <view :class="closeClass" @click.stop="close">
+        <wd-icon name="close" custom-class="wd-video-preview__close-icon" />
+      </view>
+      <!-- #endif -->
+      <!-- #ifdef APP-PLUS -->
+      <view v-if="!isFullScreen" :class="closeClass" @click.stop="close">
+        <wd-icon name="close" custom-class="wd-video-preview__close-icon" />
+      </view>
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS -->
+    </wd-overlay>
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS -->
+  </view>
+  <!-- #endif -->
 </template>
 
 <script lang="ts">
@@ -44,10 +64,10 @@ export default {
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
 import wdOverlay from '../wd-overlay/wd-overlay.vue'
-import { reactive, ref, inject, watch, computed } from 'vue'
+import { reactive, ref, inject, watch, computed, getCurrentInstance, nextTick } from 'vue'
 import { videoPreviewProps, type PreviewVideo, type VideoPreviewOptions, type VideoPreviewExpose } from './types'
 import { defaultOptions, getVideoPreviewOptionKey } from './index'
-import { isDef, isFunction } from '../../common/util'
+import { isDef, isFunction, uuid } from '../../common/util'
 
 const props = defineProps(videoPreviewProps)
 
@@ -62,6 +82,12 @@ const state = reactive({
 })
 
 const previewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+const fullScreenValue = ref<boolean | undefined>()
+const closePositionValue = ref<VideoPreviewOptions['closePosition']>()
+
+// App 端原生 video 走系统全屏，需要唯一 id 创建上下文
+const videoId = `wd-video-preview-${uuid()}`
+const { proxy } = getCurrentInstance() as any
 
 // 获取注入的选项
 const videoPreviewOptionKey = getVideoPreviewOptionKey(props.selector)
@@ -73,6 +99,21 @@ const options = computed(() => ({
   onClose: videoPreviewOption.value.onClose || props.onClose || null
 }))
 
+const isFullScreen = computed(() => {
+  const optionFullScreen = videoPreviewOption.value.fullScreen
+  if (isDef(optionFullScreen)) return optionFullScreen!
+  return isDef(fullScreenValue.value) ? fullScreenValue.value! : props.fullScreen
+})
+
+const closePosition = computed(() => {
+  const optionClosePosition = videoPreviewOption.value.closePosition
+  if (isDef(optionClosePosition)) return optionClosePosition!
+  return isDef(closePositionValue.value) ? closePositionValue.value! : props.closePosition
+})
+
+const videoClass = computed(() => ['wd-video-preview__video', isFullScreen.value ? 'is-fullscreen' : ''])
+const closeClass = computed(() => ['wd-video-preview__close', `is-${closePosition.value}`])
+
 // 监听选项变化
 watch(
   () => videoPreviewOption.value,
@@ -87,11 +128,23 @@ watch(
   () => state.show,
   (newVal, oldVal) => {
     if (newVal && !oldVal) {
+      // #ifdef APP-PLUS
+      // App 端不使用 overlay，直接驱动 video 渲染并进入系统全屏
+      state.visible = true
+      enterFullScreen()
+      // #endif
       emit('open')
       if (isFunction(options.value.onOpen)) {
         options.value.onOpen()
       }
     } else if (!newVal && oldVal) {
+      // #ifdef APP-PLUS
+      // App 端关闭时重置 video 渲染与预览数据
+      state.visible = false
+      previewVideo.url = ''
+      previewVideo.poster = ''
+      previewVideo.title = ''
+      // #endif
       emit('close')
       if (isFunction(options.value.onClose)) {
         options.value.onClose()
@@ -106,9 +159,12 @@ function reset(option: VideoPreviewOptions) {
     previewVideo.url = option.url
     previewVideo.poster = option.poster
     previewVideo.title = option.title
+    fullScreenValue.value = option.fullScreen
+    closePositionValue.value = option.closePosition
   }
 }
 
+// #ifndef APP-PLUS
 function handleEnter() {
   state.visible = true
 }
@@ -119,15 +175,38 @@ function handleAfterLeave() {
   previewVideo.poster = ''
   previewVideo.title = ''
 }
+// #endif
+
+// App 端全屏预览时进入原生全屏播放，规避原生 video 同层渲染遮挡自定义浮层的问题
+function enterFullScreen() {
+  // #ifdef APP-PLUS
+  if (!isFullScreen.value) return
+  nextTick(() => {
+    const videoContext = uni.createVideoContext(videoId, proxy)
+    videoContext && videoContext.requestFullScreen({ direction: 0 })
+  })
+  // #endif
+}
+
+// 监听原生全屏状态变化，全屏预览模式下退出全屏时关闭预览
+function handleFullscreenChange(event: any) {
+  // #ifdef APP-PLUS
+  if (isFullScreen.value && event && event.detail && !event.detail.fullScreen) {
+    close()
+  }
+  // #endif
+}
 
 function close() {
   state.show = false
 }
 
-function open(video: PreviewVideo) {
+function open(video: VideoPreviewOptions) {
   previewVideo.url = video.url
   previewVideo.poster = video.poster
   previewVideo.title = video.title
+  fullScreenValue.value = video.fullScreen
+  closePositionValue.value = video.closePosition
   state.show = true
 }
 

package/composables/useChildren.ts

@@ -80,14 +80,8 @@ export function useChildren<
     const link = (child: ComponentInternalInstance) => {
       if (child.proxy) {
         if (internalChildren.indexOf(child) === -1) {
-          // #ifdef MP-ALIPAY
-          internalChildren.unshift(child)
-          publicChildren.unshift(child.proxy as Child)
-          // #endif
-          // #ifndef MP-ALIPAY
           internalChildren.push(child)
           publicChildren.push(child.proxy as Child)
-          // #endif
           sortChildren(parent, publicChildren, internalChildren)
         }
       }

package/package.json

@@ -1 +1 @@
-{"id":"wot-ui","name":"@wot-ui/ui","displayName":"wot-ui 一个轻量、美观、AI友好的 uni-app 组件库","version":"2.1.0","license":"MIT","description":"wot-ui 一个轻量、美观、AI友好的 uni-app 组件库。","keywords":["wot-ui","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","repository":{"type":"git","url":"https://github.com/wot-ui/wot-ui.git"},"engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/@wot-ui/ui"},"vetur":{"tags":"tags.json","attributes":"attributes.json"},"web-types":"web-types.json","uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y","alipay":"n"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"n","app-uvue":"n"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"y","IE":"u","Edge":"y","Firefox":"y","Safari":"y"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"y","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}
+{"id":"wot-ui","name":"@wot-ui/ui","displayName":"wot-ui 一个轻量、美观、AI友好的 uni-app 组件库","version":"2.2.0","license":"MIT","description":"wot-ui 一个轻量、美观、AI友好的 uni-app 组件库。","keywords":["wot-ui","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","repository":{"type":"git","url":"https://github.com/wot-ui/wot-ui.git"},"engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/@wot-ui/ui"},"vetur":{"tags":"tags.json","attributes":"attributes.json"},"web-types":"web-types.json","uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y","alipay":"n"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"n","app-uvue":"n"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"y","IE":"u","Edge":"y","Firefox":"y","Safari":"y"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"y","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}