@wot-ui/ui 2.0.7 → 2.1.0

package/components/wd-config-provider/wd-config-provider.vue

@@ -22,21 +22,22 @@ import { computed, inject } from 'vue'
 import { configProviderProps, CONFIG_PROVIDER_KEY, type ConfigProviderProvide } from './types'
 import { objToStyle } from '../../common/util'
 import { useChildren } from '../../composables/useChildren'
+import { useParent } from '../../composables/useParent'
 import { mapThemeVarsToCSSVars } from '../../composables/useConfigProvider'
 import { USE_CONFIG_PROVIDER_KEY } from '../../composables/useConfigProvider'
+import { mergeConfig, type ConfigProviderInput, type GlobalConfig } from './global-config'
 
 const None = Symbol('None')
 const hooksProvider = inject<ConfigProviderProvide | typeof None>(USE_CONFIG_PROVIDER_KEY, None)
 const props = defineProps(configProviderProps)
 
 const { linkChildren } = useChildren(CONFIG_PROVIDER_KEY)
+const { parent: parentConfigProvider } = useParent(CONFIG_PROVIDER_KEY)
 
 const themeClass = computed(() => {
   return `wot-theme-${props.theme} ${props.customClass}`
 })
 
-const themeValue = computed(() => props.theme)
-
 const themeStyle = computed(() => {
   if (hooksProvider !== None) {
     return hooksProvider.themeStyle.value
@@ -50,9 +51,19 @@ const rootStyle = computed(() => {
   return style
 })
 
+const globalConfig = computed<GlobalConfig>(() => {
+  const parentGlobalConfig = parentConfigProvider.value?.globalConfig.value || null
+  return mergeConfig(parentGlobalConfig, {
+    theme: props.theme,
+    themeVars: props.themeVars,
+    button: props.button,
+    tag: props.tag
+  } as ConfigProviderInput)
+})
+
 linkChildren({
-  theme: themeValue,
-  themeStyle
+  themeStyle,
+  globalConfig
 })
 </script>
 

package/components/wd-dialog/wd-dialog.vue

@@ -136,6 +136,7 @@ export default {
 <script lang="ts" setup>
 import wdPopup from '../wd-popup/wd-popup.vue'
 import wdButton from '../wd-button/wd-button.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
 import wdInput from '../wd-input/wd-input.vue'
 import wdTextarea from '../wd-textarea/wd-textarea.vue'
 import { computed, inject, reactive, ref, watch } from 'vue'

package/components/wd-drop-menu/wd-drop-menu.vue

@@ -53,6 +53,7 @@ import { getRect, getSystemInfo, uuid } from '../../common/util'
 import { useChildren } from '../../composables/useChildren'
 import { DROP_MENU_KEY, dropMenuProps } from './types'
 import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
 
 const props = defineProps(dropMenuProps)
 const queue = inject<Queue | null>(queueKey, null)

package/components/wd-grid/wd-grid.vue

@@ -32,8 +32,6 @@ const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.gutter)) {
     style.paddingLeft = addUnit(props.gutter)
-    console.log(props.square)
-
     if (props.square) {
       style.marginBottom = addUnit(-props.gutter)
     }

package/components/wd-icon/wd-icon.vue

@@ -61,8 +61,8 @@ const rootStyle = computed(() => {
   if (props.size) {
     const sizeValue = addUnit(props.size)
     style['font-size'] = sizeValue
-    // CSS 图标模式下，同步设置 width/height
-    if (props.cssIcon) {
+    // CSS 图标和图片模式下，同步设置 width/height
+    if (props.cssIcon || isImage.value) {
       style['width'] = sizeValue
       style['height'] = sizeValue
     }

package/components/wd-img/wd-img.vue

@@ -36,6 +36,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, ref } from 'vue'
 import { addUnit, isDef, objToStyle } from '../../common/util'
 import { imgProps } from './types'

package/components/wd-index-anchor/index.scss

@@ -1,11 +1,11 @@
 @use '../../styles/mixin/mixin.scss' as *;
 @use '../../styles/variable.scss' as *;
 
-$index-anchor-bg: var(--wot-index-anchor-bg, $filled-bottom) !default;
-$index-anchor-padding: var(--wot-index-anchor-padding, $padding-main) !default;
-$index-anchor-font-size: var(--wot-index-anchor-font-size, $typography-body-size-main) !default;
-$index-anchor-color: var(--wot-index-anchor-color, $text-main) !default;
-$index-anchor-z-index: var(--wot-index-anchor-z-index, 1) !default;
+$index-anchor-bg: var(--wot-index-anchor-bg, $filled-bottom) !default; // 索引锚点背景色
+$index-anchor-padding: var(--wot-index-anchor-padding, $padding-main) !default; // 索引锚点内边距
+$index-anchor-font-size: var(--wot-index-anchor-font-size, $typography-body-size-main) !default; // 索引锚点文字字号
+$index-anchor-color: var(--wot-index-anchor-color, $text-main) !default; // 索引锚点文字颜色
+$index-anchor-z-index: var(--wot-index-anchor-z-index, 1) !default; // 索引锚点吸顶层级
 
 // #ifdef MP-DINGTALK
 @include b(index-anchor-ding) {

package/components/wd-index-bar/index.scss

@@ -1,20 +1,20 @@
 @use '../../styles/mixin/mixin.scss' as *;
 @use '../../styles/variable.scss' as *;
 
-$index-bar-sidebar-right: var(--wot-index-bar-sidebar-right, $spacing-super-tight) !default;
-$index-bar-index-font-size: var(--wot-index-bar-index-font-size, $typography-label-size-main) !default;
-$index-bar-index-width: var(--wot-index-bar-index-width, $typography-label-line-height-size-main) !default;
-$index-bar-index-height: var(--wot-index-bar-index-height, $typography-label-line-height-size-main) !default;
-$index-bar-index-font-weight: var(--wot-index-bar-index-font-weight, $font-weight-medium) !default;
-$index-bar-index-color: var(--wot-index-bar-index-color, $text-auxiliary) !default;
-$index-bar-index-border-radius: var(--wot-index-bar-index-border-radius, $radius-full) !default;
-$index-bar-index-color-active: var(--wot-index-bar-index-color-active, $text-white) !default;
-$index-bar-index-bg-active: var(--wot-index-bar-index-bg-active, $primary-6) !default;
-$index-bar-current-index-size: var(--wot-index-bar-current-index-size, $n-56) !default;
-$index-bar-current-index-bg: var(--wot-index-bar-current-index-bg, $primary-6) !default;
-$index-bar-current-index-color: var(--wot-index-bar-current-index-color, $text-white) !default;
-$index-bar-current-index-font-size: var(--wot-index-bar-current-index-font-size, $typography-title-size-extra-large) !default;
-$index-bar-current-index-z-index: var(--wot-index-bar-current-index-z-index, 10) !default;
+$index-bar-sidebar-right: var(--wot-index-bar-sidebar-right, $spacing-super-tight) !default; // 索引侧边栏右侧偏移
+$index-bar-index-font-size: var(--wot-index-bar-index-font-size, $typography-label-size-main) !default; // 索引项文字字号
+$index-bar-index-width: var(--wot-index-bar-index-width, $typography-label-line-height-size-main) !default; // 索引项宽度
+$index-bar-index-height: var(--wot-index-bar-index-height, $typography-label-line-height-size-main) !default; // 索引项高度
+$index-bar-index-font-weight: var(--wot-index-bar-index-font-weight, $font-weight-medium) !default; // 索引项字重
+$index-bar-index-color: var(--wot-index-bar-index-color, $text-auxiliary) !default; // 索引项文字颜色
+$index-bar-index-border-radius: var(--wot-index-bar-index-border-radius, $radius-full) !default; // 索引项圆角
+$index-bar-index-color-active: var(--wot-index-bar-index-color-active, $text-white) !default; // 激活索引项文字颜色
+$index-bar-index-bg-active: var(--wot-index-bar-index-bg-active, $primary-6) !default; // 激活索引项背景色
+$index-bar-current-index-size: var(--wot-index-bar-current-index-size, $n-56) !default; // 当前索引提示尺寸
+$index-bar-current-index-bg: var(--wot-index-bar-current-index-bg, $primary-6) !default; // 当前索引提示背景色
+$index-bar-current-index-color: var(--wot-index-bar-current-index-color, $text-white) !default; // 当前索引提示文字颜色
+$index-bar-current-index-font-size: var(--wot-index-bar-current-index-font-size, $typography-title-size-extra-large) !default; // 当前索引提示文字字号
+$index-bar-current-index-z-index: var(--wot-index-bar-current-index-z-index, 10) !default; // 当前索引提示层级
 
 @include b(index-bar) {
   position: relative;

package/components/wd-keyboard/key/index.vue

@@ -32,6 +32,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import wdLoading from '../../wd-loading/wd-loading.vue'
+import wdIcon from '../../wd-icon/wd-icon.vue'
 import { computed, ref } from 'vue'
 import { useTouch } from '../../../composables/useTouch'
 import { keyProps } from './types'

package/components/wd-notify/wd-notify.vue

@@ -49,6 +49,7 @@ export default {
 
 <script lang="ts" setup>
 import wdPopup from '../wd-popup/wd-popup.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { inject, computed, watch, ref, type CSSProperties } from 'vue'
 import { notifyProps, type NotifyProps } from './types'
 import { getNotifyOptionKey } from '.'

package/components/wd-picker-view/useSelection.ts

@@ -108,7 +108,9 @@ export function useSelection(valueKey: string, labelKey: string, childrenKey: st
    * @returns {string[]} label数组
    */
   const selectedLabels = computed(() => {
-    return selectedIndex.value.map((row, col) => String(formatColumns.value[col][row][labelKey] ?? ''))
+    return selectedIndex.value.map((row, col) =>
+      String(isDef(formatColumns.value[col][row][labelKey]) ? formatColumns.value[col][row][labelKey] : '')
+    )
   })
 
   /**

package/components/wd-root-portal/wd-root-portal.vue

@@ -53,7 +53,7 @@ const configProviderStyle = computed(() => {
 })
 
 const themeClass = computed(() => {
-  const theme = hooksProvider !== None ? hooksProvider.theme?.value : configProvider.value?.theme?.value
+  const theme = hooksProvider !== None ? hooksProvider.globalConfig?.value.theme : configProvider.value?.globalConfig?.value.theme
   return theme ? `wot-theme-${theme}` : 'wot-theme-light'
 })
 </script>

package/components/wd-select-picker/wd-select-picker.vue

@@ -109,6 +109,7 @@ import wdRadio from '../wd-radio/wd-radio.vue'
 import wdRadioGroup from '../wd-radio-group/wd-radio-group.vue'
 import wdButton from '../wd-button/wd-button.vue'
 import wdLoading from '../wd-loading/wd-loading.vue'
+import wdSearch from '../wd-search/wd-search.vue'
 
 import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
 import { getRect, isArray, isDef, isFunction, pause } from '../../common/util'

package/components/wd-signature/wd-signature.vue

@@ -72,6 +72,7 @@ export default {
 }
 </script>
 <script lang="ts" setup>
+import wdButton from '../wd-button/wd-button.vue'
 import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
 import { addUnit, getRect, getSystemInfo, isDef, objToStyle, uuid } from '../../common/util'
 import { signatureProps, type SignatureExpose, type SignatureResult, type Point, type Line } from './types'

package/components/wd-slider/index.scss

@@ -4,64 +4,64 @@
 /* ================================ 组件SCSS变量 ================================ */
 
 /* 轨道 (Track) */
-$slider-bar-height: var(--wot-slider-bar-height, $n-2) !default;
-$slider-bar-height-capsule: var(--wot-slider-bar-height-capsule, $n-24) !default;
-$slider-bar-bg: var(--wot-slider-bar-bg, $filled-strong) !default;
-$slider-bar-radius: var(--wot-slider-bar-radius, $radius-full) !default;
-$slider-bar-height-vertical: var(--wot-slider-bar-height-vertical, $n-248) !default;
+$slider-bar-height: var(--wot-slider-bar-height, $n-2) !default; // 轨道高度
+$slider-bar-height-capsule: var(--wot-slider-bar-height-capsule, $n-24) !default; // 胶囊轨道高度
+$slider-bar-bg: var(--wot-slider-bar-bg, $filled-strong) !default; // 轨道背景色
+$slider-bar-radius: var(--wot-slider-bar-radius, $radius-full) !default; // 轨道圆角
+$slider-bar-height-vertical: var(--wot-slider-bar-height-vertical, $n-248) !default; // 垂直轨道高度
 
 /* 进度条 (Range) */
-$slider-line-bg: var(--wot-slider-line-bg, $primary-6) !default;
-$slider-line-height: var(--wot-slider-line-height, $n-2) !default;
-$slider-line-height-capsule: var(--wot-slider-line-height-capsule, $n-18) !default;
+$slider-line-bg: var(--wot-slider-line-bg, $primary-6) !default; // 进度条背景色
+$slider-line-height: var(--wot-slider-line-height, $n-2) !default; // 进度条高度
+$slider-line-height-capsule: var(--wot-slider-line-height-capsule, $n-18) !default; // 胶囊进度条高度
 
 /* 滑块 (Thumb) */
-$slider-dot-size: var(--wot-slider-dot-size, $n-24) !default;
-$slider-dot-bg: var(--wot-slider-dot-bg, $filled-oppo) !default;
-$slider-dot-shadow: var(--wot-slider-dot-shadow, 0 2px 8px 0 rgba(0, 0, 0, 0.1)) !default;
+$slider-dot-size: var(--wot-slider-dot-size, $n-24) !default; // 滑块尺寸
+$slider-dot-bg: var(--wot-slider-dot-bg, $filled-oppo) !default; // 滑块背景色
+$slider-dot-shadow: var(--wot-slider-dot-shadow, 0 2px 8px 0 rgba(0, 0, 0, 0.1)) !default; // 滑块阴影
 
 /* 气泡提示 (Popover) */
-$slider-dot-popover-bg: var(--wot-slider-dot-popover-bg, $opacfilled-tooltip-toast-cover) !default;
-$slider-dot-popover-color: var(--wot-slider-dot-popover-color, $text-white) !default;
-$slider-dot-popover-radius: var(--wot-slider-dot-popover-radius, $radius-main) !default;
-$slider-dot-popover-padding: var(--wot-slider-dot-popover-padding, $padding-extra-tight $padding-loose) !default;
-$slider-dot-popover-font-size: var(--wot-slider-dot-popover-font-size, $typography-body-size-main) !default;
-$slider-dot-popover-line-height: var(--wot-slider-dot-popover-line-height, $typography-body-line-height-size-main) !default;
-$slider-dot-popover-gap: var(--wot-slider-dot-popover-gap, $n-3) !default;
-$slider-dot-popover-arrow-width: var(--wot-slider-dot-popover-arrow-width, $n-12) !default;
-$slider-dot-popover-arrow-height: var(--wot-slider-dot-popover-arrow-height, $n-6) !default;
-$slider-dot-popover-duration-exit: var(--wot-slider-dot-popover-duration-exit, 100ms) !default;
-$slider-dot-popover-easing-exit: var(--wot-slider-dot-popover-easing-exit, cubic-bezier(0.4, 0, 1, 1)) !default;
-$slider-dot-popover-duration-enter: var(--wot-slider-dot-popover-duration-enter, 200ms) !default;
-$slider-dot-popover-easing-enter: var(--wot-slider-dot-popover-easing-enter, cubic-bezier(0.34, 1.56, 0.64, 1)) !default;
+$slider-dot-popover-bg: var(--wot-slider-dot-popover-bg, $opacfilled-tooltip-toast-cover) !default; // 气泡提示背景色
+$slider-dot-popover-color: var(--wot-slider-dot-popover-color, $text-white) !default; // 气泡提示文字颜色
+$slider-dot-popover-radius: var(--wot-slider-dot-popover-radius, $radius-main) !default; // 气泡提示圆角
+$slider-dot-popover-padding: var(--wot-slider-dot-popover-padding, $padding-extra-tight $padding-loose) !default; // 气泡提示内边距
+$slider-dot-popover-font-size: var(--wot-slider-dot-popover-font-size, $typography-body-size-main) !default; // 气泡提示文字字号
+$slider-dot-popover-line-height: var(--wot-slider-dot-popover-line-height, $typography-body-line-height-size-main) !default; // 气泡提示行高
+$slider-dot-popover-gap: var(--wot-slider-dot-popover-gap, $n-3) !default; // 气泡提示与滑块间距
+$slider-dot-popover-arrow-width: var(--wot-slider-dot-popover-arrow-width, $n-12) !default; // 气泡提示箭头宽度
+$slider-dot-popover-arrow-height: var(--wot-slider-dot-popover-arrow-height, $n-6) !default; // 气泡提示箭头高度
+$slider-dot-popover-duration-exit: var(--wot-slider-dot-popover-duration-exit, 100ms) !default; // 气泡提示离场动画时长
+$slider-dot-popover-easing-exit: var(--wot-slider-dot-popover-easing-exit, cubic-bezier(0.4, 0, 1, 1)) !default; // 气泡提示离场动画缓动
+$slider-dot-popover-duration-enter: var(--wot-slider-dot-popover-duration-enter, 200ms) !default; // 气泡提示入场动画时长
+$slider-dot-popover-easing-enter: var(--wot-slider-dot-popover-easing-enter, cubic-bezier(0.34, 1.56, 0.64, 1)) !default; // 气泡提示入场动画缓动
 
 /* 刻度 (Scale) */
-$slider-scale-size: var(--wot-slider-scale-size, $n-6) !default;
-$slider-scale-border-radius: var(--wot-slider-scale-border-radius, $radius-full) !default;
-$slider-scale-bg: var(--wot-slider-scale-bg, $filled-strong) !default;
-$slider-scale-bg-active: var(--wot-slider-scale-bg-active, $primary-6) !default;
-$slider-scale-capsule-bg: var(--wot-slider-scale-capsule-bg, $filled-strong) !default;
-$slider-scale-capsule-width: var(--wot-slider-scale-capsule-width, $n-2) !default;
-$slider-scale-capsule-border-radius: var(--wot-slider-scale-capsule-border-radius, $radius-zero) !default;
-$slider-scale-desc-font-size: var(--wot-slider-scale-desc-font-size, $typography-body-size-main) !default;
-$slider-scale-desc-line-height: var(--wot-slider-scale-desc-line-height, $typography-body-line-height-size-main) !default;
-$slider-scale-desc-color: var(--wot-slider-scale-desc-color, $text-main) !default;
-$slider-scale-desc-spacing: var(--wot-slider-scale-desc-spacing, $spacing-tight) !default;
-$slider-marks-desc-spacing: var(--wot-slider-marks-desc-spacing, calc($slider-dot-size / 2 + $spacing-tight)) !default;
-$slider-marks-desc-capsule-spacing: var(--wot-slider-marks-desc-capsule-spacing, calc($slider-dot-size + $spacing-super-tight)) !default;
-$slider-marks-extra-padding: var(--wot-slider-marks-extra-padding, $padding-super-loose) !default;
-$slider-marks-extra-capsule-padding: var(--wot-slider-marks-extra-capsule-padding, $padding-ultra-loose) !default;
+$slider-scale-size: var(--wot-slider-scale-size, $n-6) !default; // 刻度尺寸
+$slider-scale-border-radius: var(--wot-slider-scale-border-radius, $radius-full) !default; // 刻度圆角
+$slider-scale-bg: var(--wot-slider-scale-bg, $filled-strong) !default; // 刻度背景色
+$slider-scale-bg-active: var(--wot-slider-scale-bg-active, $primary-6) !default; // 激活刻度背景色
+$slider-scale-capsule-bg: var(--wot-slider-scale-capsule-bg, $filled-strong) !default; // 胶囊刻度背景色
+$slider-scale-capsule-width: var(--wot-slider-scale-capsule-width, $n-2) !default; // 胶囊刻度宽度
+$slider-scale-capsule-border-radius: var(--wot-slider-scale-capsule-border-radius, $radius-zero) !default; // 胶囊刻度圆角
+$slider-scale-desc-font-size: var(--wot-slider-scale-desc-font-size, $typography-body-size-main) !default; // 刻度描述文字字号
+$slider-scale-desc-line-height: var(--wot-slider-scale-desc-line-height, $typography-body-line-height-size-main) !default; // 刻度描述行高
+$slider-scale-desc-color: var(--wot-slider-scale-desc-color, $text-main) !default; // 刻度描述文字颜色
+$slider-scale-desc-spacing: var(--wot-slider-scale-desc-spacing, $spacing-tight) !default; // 刻度描述间距
+$slider-marks-desc-spacing: var(--wot-slider-marks-desc-spacing, calc($slider-dot-size / 2 + $spacing-tight)) !default; // 标记描述间距
+$slider-marks-desc-capsule-spacing: var(--wot-slider-marks-desc-capsule-spacing, calc($slider-dot-size + $spacing-super-tight)) !default; // 胶囊标记描述间距
+$slider-marks-extra-padding: var(--wot-slider-marks-extra-padding, $padding-super-loose) !default; // 标记额外内边距
+$slider-marks-extra-capsule-padding: var(--wot-slider-marks-extra-capsule-padding, $padding-ultra-loose) !default; // 胶囊标记额外内边距
 
 /* 布局 (Layout) */
-$slider-capsule-track-inset: var(--wot-slider-capsule-track-inset, $n-3) !default;
-$slider-extreme-spacing: var(--wot-slider-extreme-spacing, $spacing-loose) !default;
+$slider-capsule-track-inset: var(--wot-slider-capsule-track-inset, $n-3) !default; // 胶囊轨道内缩距离
+$slider-extreme-spacing: var(--wot-slider-extreme-spacing, $spacing-loose) !default; // 极值文字与轨道间距
 
 /* 极值文字 (Extreme Value) */
-$slider-value-font-size: var(--wot-slider-value-font-size, $typography-body-size-main) !default;
-$slider-value-color: var(--wot-slider-value-color, $text-secondary) !default;
+$slider-value-font-size: var(--wot-slider-value-font-size, $typography-body-size-main) !default; // 极值文字字号
+$slider-value-color: var(--wot-slider-value-color, $text-secondary) !default; // 极值文字颜色
 
 /* 状态 (States) */
-$slider-opacity-disabled: var(--wot-slider-opacity-disabled, $opacity-disabled) !default;
+$slider-opacity-disabled: var(--wot-slider-opacity-disabled, $opacity-disabled) !default; // 禁用态透明度
 
 @include b(slider) {
   display: flex;
@@ -482,4 +482,4 @@ $slider-opacity-disabled: var(--wot-slider-opacity-disabled, $opacity-disabled)
     opacity: $slider-opacity-disabled;
     pointer-events: none;
   }
-}
+}

package/components/wd-slider/wd-slider.vue

@@ -304,8 +304,24 @@ function initSlider() {
  */
 function getPointerPosition(event: any): number {
   return props.vertical
-    ? Number(event.detail?.y ?? event.clientY ?? event.touches?.[0]?.clientY ?? 0)
-    : Number(event.detail?.x ?? event.clientX ?? event.touches?.[0]?.clientX ?? 0)
+    ? Number(
+        isDef(event.detail?.y)
+          ? event.detail?.y
+          : isDef(event.clientY)
+          ? event.clientY
+          : isDef(event.touches?.[0]?.clientY)
+          ? event.touches?.[0]?.clientY
+          : 0
+      )
+    : Number(
+        isDef(event.detail?.x)
+          ? event.detail?.x
+          : isDef(event.clientX)
+          ? event.clientX
+          : isDef(event.touches?.[0]?.clientX)
+          ? event.touches?.[0]?.clientX
+          : 0
+      )
 }
 
 /**
@@ -413,7 +429,7 @@ function dotDisplayValue(index: number): number {
     return modelValue.value as number
   }
   const values = currentValue.value
-  return values[index] ?? values[0]
+  return isDef(values[index]) ? values[index] : values[0]
 }
 
 /**

package/components/wd-switch/wd-switch.vue

@@ -36,6 +36,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
 import { computed, type CSSProperties, onBeforeMount } from 'vue'
 import { callInterceptor } from '../../common/interceptor'
 import { addUnit, isDef, isUndefined, objToStyle, omitBy } from '../../common/util'

package/components/wd-tabs/wd-tabs.vue

@@ -140,6 +140,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
+import wdBadge from '../wd-badge/wd-badge.vue'
 import wdSticky from '../wd-sticky/wd-sticky.vue'
 import wdStickyBox from '../wd-sticky-box/wd-sticky-box.vue'
 import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'

package/components/wd-tag/index.scss

@@ -127,6 +127,7 @@ $tag-extra-large-round-padding: var(--wot-tag-extra-large-round-padding, $n-3 $p
 // 超大尺寸图标尺寸
 $tag-extra-large-icon-size: var(--wot-tag-extra-large-icon-size, $n-12) !default;
 
+// 这里的顺序决定了生成的 CSS 优先级，default 必须放在首位以确保其他尺寸可以覆盖它
 $tag-types: (
   "default": (
     "color": $tag-info-color,
@@ -181,6 +182,13 @@ $tag-types: (
 );
 
 $tag-sizes: (
+  "default": (
+    "font-size": $tag-default-font-size,
+    "line-height": $tag-default-line-height,
+    "padding": $tag-default-padding,
+    "round-padding": $tag-default-round-padding,
+    "icon-size": $tag-default-icon-size
+  ),
   "small": (
     "font-size": $tag-small-font-size,
     "line-height": $tag-small-line-height,
@@ -195,13 +203,6 @@ $tag-sizes: (
     "round-padding": $tag-medium-round-padding,
     "icon-size": $tag-medium-icon-size
   ),
-  "default": (
-    "font-size": $tag-default-font-size,
-    "line-height": $tag-default-line-height,
-    "padding": $tag-default-padding,
-    "round-padding": $tag-default-round-padding,
-    "icon-size": $tag-default-icon-size
-  ),
   "large": (
     "font-size": $tag-large-font-size,
     "line-height": $tag-large-line-height,

package/components/wd-tag/types.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
 
 /**
@@ -26,9 +26,9 @@ export const tagProps = {
    * 标签尺寸
    * 类型: TagSize
    * 可选值: 'small' | 'medium' | 'large' | 'extra-large' | 'default'
-   * 默认值: 'default'
+   * 不传则继承全局配置
    */
-  size: makeStringProp<TagSize>('default'),
+  size: String as PropType<TagSize>,
   /**
    * 标签类型
    * 类型: TagType
@@ -69,9 +69,12 @@ export const tagProps = {
   /**
    * 圆角类型
    * 类型: boolean
-   * 默认值: false
+   * 不传则继承全局配置
    */
-  round: makeBooleanProp(false),
+  round: {
+    type: Boolean,
+    default: void 0
+  },
   /**
    * 标记类型
    * 类型: boolean
@@ -82,9 +85,9 @@ export const tagProps = {
    * 标签变体
    * 类型: TagVariant
    * 可选值: 'light' | 'dark' | 'plain' | 'dashed' | 'text'
-   * 默认值: 'dark'
+   * 不传则继承全局配置
    */
-  variant: makeStringProp<TagVariant>('dark')
+  variant: String as PropType<TagVariant>
 }
 
 export type TagProps = ExtractPropTypes<typeof tagProps>

package/components/wd-tag/wd-tag.vue

@@ -46,15 +46,32 @@ export default {
 </script>
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
-import { objToStyle } from '../../common/util'
+import { objToStyle, isUndefined } from '../../common/util'
 import { computed, ref } from 'vue'
 import { useTranslate } from '../../composables/useTranslate'
 import { tagProps } from './types'
+import { useGlobalConfig } from '../../composables/useGlobalConfig'
 
 const props = defineProps(tagProps)
 const emit = defineEmits(['click', 'close', 'confirm'])
 
 const { translate } = useTranslate('tag')
+const globalConfig = useGlobalConfig()
+
+const effectiveSize = computed(() => {
+  return props.size || globalConfig.value.tag?.size || 'default'
+})
+
+const effectiveVariant = computed(() => {
+  return props.variant || globalConfig.value.tag?.variant || 'dark'
+})
+
+const effectiveRound = computed(() => {
+  if (isUndefined(props.round)) {
+    return isUndefined(globalConfig.value.tag?.round) ? false : globalConfig.value.tag?.round
+  }
+  return props.round
+})
 
 const dynamicValue = ref<string>('')
 const dynamicInput = ref<boolean>(false)
@@ -63,12 +80,12 @@ const dynamicInput = ref<boolean>(false)
  * 根节点类名
  */
 const rootClass = computed<string>(() => {
-  const { type, variant, size, round, mark, customClass } = props
+  const { type, mark, customClass } = props
   const classList: string[] = []
   type && classList.push(`is-${type}`)
-  variant && classList.push(`is-${variant}`)
-  size && classList.push(`is-${size}`)
-  round && classList.push('is-round')
+  effectiveVariant.value && classList.push(`is-${effectiveVariant.value}`)
+  effectiveSize.value && classList.push(`is-${effectiveSize.value}`)
+  effectiveRound.value && classList.push('is-round')
   mark && classList.push('is-mark')
   return `wd-tag ${customClass} ${classList.join(' ')}`
 })
@@ -78,7 +95,7 @@ const rootClass = computed<string>(() => {
  */
 const rootStyle = computed<string>(() => {
   const rootStyle: Record<string, any> = {}
-  if (props.variant !== 'plain' && props.variant !== 'dashed' && props.variant !== 'text' && props.bgColor) {
+  if (effectiveVariant.value !== 'plain' && effectiveVariant.value !== 'dashed' && effectiveVariant.value !== 'text' && props.bgColor) {
     rootStyle['background'] = props.bgColor
   }
   if (props.bgColor) {

package/components/wd-toast/wd-toast.vue

@@ -16,6 +16,7 @@
         :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
         :size="iconSize"
         :class-prefix="classPrefix"
+        :color="iconColor"
         :name="toastIcon[iconName]"
       ></wd-icon>
       <wd-icon
@@ -23,6 +24,7 @@
         :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
         :size="iconSize"
         :class-prefix="classPrefix"
+        :color="iconColor"
         :name="iconClass"
         :css-icon="cssIcon"
       ></wd-icon>
@@ -65,6 +67,7 @@ const zIndex = ref<number>(100)
 const loadingType = ref<ToastLoadingType>('circular')
 const loadingColor = ref<string>('#fff')
 const iconSize = ref<string>() // 图标大小
+const iconColor = ref<string>() // 图标颜色
 const loadingSize = ref<string>() // loading大小
 const cover = ref<boolean>(false) // 是否存在遮罩层
 const classPrefix = ref<string>('wd-icon') // 图标前缀
@@ -148,6 +151,7 @@ function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
   loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
   loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
   iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
+  iconColor.value = isDef(option.iconColor!) ? option.iconColor! : props.iconColor
   loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
   cover.value = isDef(option.cover!) ? option.cover! : props.cover
   classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix

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/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
   })
 }