@wot-ui/ui 2.0.8 → 2.2.0

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/index.ts

@@ -10,7 +10,9 @@ export { useTouch } from './useTouch'
 export { useTranslate } from './useTranslate'
 export { useUpload } from './useUpload'
 export { useConfigProvider } from './useConfigProvider'
+export { useGlobalConfig } from './useGlobalConfig'
 export { useToast } from '../components/wd-toast'
 export { useDialog } from '../components/wd-dialog'
 export { useImagePreview } from '../components/wd-image-preview'
+export { useVideoPreview } from '../components/wd-video-preview'
 export { useNotify, setNotifyDefaultOptions, resetNotifyDefaultOptions } from '../components/wd-notify'

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/composables/useConfigProvider.ts

@@ -1,6 +1,13 @@
-import { computed, provide, unref, type Ref } from 'vue'
-import { type ConfigProviderThemeVars } from '../components/wd-config-provider/types'
+import { computed, provide, unref, type MaybeRef } from 'vue'
+import { type ConfigProviderThemeVars } from '../components/wd-config-provider/theme-vars'
 import { objToStyle } from '../common/util'
+import {
+  mergeConfig,
+  type GlobalConfig,
+  type ConfigProviderInput,
+  type ButtonConfig,
+  type TagConfig
+} from '../components/wd-config-provider/global-config'
 
 export const USE_CONFIG_PROVIDER_KEY = '__CONFIG_PROVIDER__'
 
@@ -22,24 +29,32 @@ export const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
   return cssVars
 }
 
-export function useConfigProvider({
-  themeVars,
-  theme
-}: {
-  themeVars?: ConfigProviderThemeVars | Ref<ConfigProviderThemeVars>
-  theme?: string | Ref<string>
-}) {
+export interface UseConfigProviderOptions {
+  themeVars?: MaybeRef<ConfigProviderThemeVars>
+  theme?: MaybeRef<string>
+  button?: MaybeRef<ButtonConfig>
+  tag?: MaybeRef<TagConfig>
+}
+
+export function useConfigProvider(options: UseConfigProviderOptions = {}) {
+  const { themeVars, theme, button, tag } = options
+
   const themeStyle = computed(() => {
     const styleObj = mapThemeVarsToCSSVars(unref(themeVars) || {})
     return styleObj ? `${objToStyle(styleObj)}` : ''
   })
 
-  const themeValue = computed(() => {
-    return unref(theme) || 'light'
+  const globalConfig = computed<GlobalConfig>(() => {
+    return mergeConfig(null, {
+      theme: unref(theme) || 'light',
+      themeVars: unref(themeVars) || {},
+      button: unref(button) || {},
+      tag: unref(tag) || {}
+    } as ConfigProviderInput)
   })
 
   provide(USE_CONFIG_PROVIDER_KEY, {
     themeStyle,
-    theme: themeValue
+    globalConfig
   })
 }

package/composables/useGlobalConfig.ts

@@ -0,0 +1,9 @@
+import { computed, inject, type ComputedRef } from 'vue'
+import { CONFIG_PROVIDER_KEY, type ConfigProviderProvide } from '../components/wd-config-provider/types'
+import { DEFAULT_GLOBAL_CONFIG, type GlobalConfig } from '../components/wd-config-provider/global-config'
+
+export function useGlobalConfig(): ComputedRef<GlobalConfig> {
+  const injected = inject<ConfigProviderProvide | null>(CONFIG_PROVIDER_KEY, null)
+  if (injected) return injected.globalConfig
+  return computed(() => ({ ...DEFAULT_GLOBAL_CONFIG }))
+}

package/index.ts

@@ -3,4 +3,4 @@ export { zodAdapter } from './components/wd-form'
 export type { FormSchema, FormSchemaIssue, FormValidateEvent, FormValidateTrigger } from './components/wd-form'
 export * as CommonUtil from './common/util'
 export * from './locale'
-export type { ConfigProviderThemeVars } from './components/wd-config-provider/types'
+export type { ConfigProviderThemeVars } from './components/wd-config-provider/theme-vars'

package/package.json

@@ -1 +1 @@
-{"id":"wot-ui","name":"@wot-ui/ui","displayName":"wot-ui 一个轻量、美观、AI友好的 uni-app 组件库","version":"2.0.8","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"}}