@wot-ui/ui 2.0.7 → 2.1.0

package/components/wd-avatar/wd-avatar.vue

@@ -136,7 +136,7 @@ const rootStyle = computed(() => {
     } else if (cascading === 'right-up') {
       // 右侧在上，越前面越大
       const maxCount = avatarGroup.value.props.maxCount
-      let count = avatarGroup.value.children?.length ?? 0
+      let count = avatarGroup.value.children ? avatarGroup.value.children.length : 0
 
       if (isDef(maxCount)) {
         const parsedCount = typeof maxCount === 'number' ? maxCount : parseInt(maxCount, 10)

package/components/wd-button/types.ts

@@ -69,9 +69,12 @@ export const buttonProps = {
   ...baseProps,
   /**
    * 圆角按钮
-   * 默认值: false
+   * 不传则继承全局配置
    */
-  round: makeBooleanProp(false),
+  round: {
+    type: Boolean,
+    default: void 0
+  },
   /**
    * 禁用按钮
    * 默认值: false
@@ -91,16 +94,16 @@ export const buttonProps = {
    * 按钮类型
    * 类型: ButtonType
    * 可选值: 'primary' | 'success' | 'info' | 'warning' | 'danger'
-   * 默认值: 'primary'
+   * 不传则继承全局配置
    */
-  type: makeStringProp<ButtonType>('primary'),
+  type: String as PropType<ButtonType>,
   /**
    * 按钮尺寸
    * 类型: ButtonSize
    * 可选值: 'mini' | 'small' | 'medium' | 'large'
-   * 默认值: 'medium'
+   * 不传则继承全局配置
    */
-  size: makeStringProp<ButtonSize>('medium'),
+  size: String as PropType<ButtonSize>,
   /**
    * 图标类名
    */
@@ -202,9 +205,9 @@ export const buttonProps = {
    * 按钮变体
    * 类型: ButtonVariant
    * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'text'
-   * 默认值: 'base'
+   * 不传则继承全局配置
    */
-  variant: makeStringProp<ButtonVariant>('base')
+  variant: String as PropType<ButtonVariant>
 }
 
 /**

package/components/wd-button/wd-button.vue

@@ -5,12 +5,12 @@
     :style="customStyle"
     :class="[
       'wd-button',
-      'is-' + type,
-      'is-' + size,
+      'is-' + effectiveType,
+      'is-' + effectiveSize,
       isIcon ? 'is-icon' : '',
-      round ? 'is-round' : '',
+      effectiveRound ? 'is-round' : '',
       hairline ? 'is-hairline' : '',
-      variant !== 'base' ? 'is-' + variant : '',
+      effectiveVariant !== 'base' ? 'is-' + effectiveVariant : '',
       disabled ? 'is-disabled' : '',
       block ? 'is-block' : '',
       loading ? 'is-loading' : '',
@@ -65,14 +65,36 @@ export default {
 
 <script lang="ts" setup>
 import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
 import { computed, useSlots } from 'vue'
 import { buttonProps } from './types'
 import { isDef, omitBy, isUndefined } from '../../common/util'
 import { type LoadingProps } from '../wd-loading/types'
+import { useGlobalConfig } from '../../composables/useGlobalConfig'
 
 const slots = useSlots()
 
 const props = defineProps(buttonProps)
+const globalConfig = useGlobalConfig()
+
+const effectiveSize = computed(() => {
+  return props.size || globalConfig.value.button?.size || 'medium'
+})
+
+const effectiveVariant = computed(() => {
+  return props.variant || globalConfig.value.button?.variant || 'base'
+})
+
+const effectiveType = computed(() => {
+  return props.type || globalConfig.value.button?.type || 'primary'
+})
+
+const effectiveRound = computed(() => {
+  if (isUndefined(props.round)) {
+    return isUndefined(globalConfig.value.button?.round) ? false : globalConfig.value.button?.round
+  }
+  return props.round
+})
 const emit = defineEmits<{
   (e: 'click', event: any): void
   (e: 'getuserinfo', event: any): void

package/components/wd-calendar-view/monthPanel/month-panel.vue

@@ -102,6 +102,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../../wd-icon/wd-icon.vue'
 import wdDatetimePickerView from '../../wd-datetime-picker-view/wd-datetime-picker-view.vue'
 import { computed, ref, watch, onMounted, type CSSProperties } from 'vue'
 import { debounce, isArray, isEqual, isNumber, pause, padZero, addUnit, objToStyle } from '../../../common/util'

package/components/wd-calendar-view/yearPanel/year-panel.vue

@@ -61,6 +61,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../../wd-icon/wd-icon.vue'
 import { computed, ref, onMounted } from 'vue'
 import { compareYear, formatYearTitle, getYears } from '../utils'
 import { isArray, isNumber, pause } from '../../../common/util'

package/components/wd-cell/index.scss

@@ -121,6 +121,7 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
   @include e(left) {
     position: relative;
     flex: 1;
+    min-width: 0;
     display: flex;
     text-align: left;
     font-size: $cell-title-font-size;
@@ -135,9 +136,13 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
   }
 
   @include e(title) {
+    min-width: 0;
     font-size: $cell-title-font-size;
     line-height: $cell-title-line-height;
     color: $cell-title-color;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
   @include e(required) {
@@ -157,6 +162,9 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
     font-size: $cell-label-font-size;
     line-height: $cell-label-line-height;
     color: $cell-label-color;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
   @include edeep(prefix) {
@@ -175,11 +183,14 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
   @include e(value) {
     position: relative;
     flex: 1;
+    min-width: 0;
     font-size: $cell-value-font-size;
     line-height: $cell-value-line-height;
     color: $cell-value-color;
     vertical-align: middle;
-    word-break: break-all;
+    white-space: normal;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     @include m(left) {
       text-align: left;

package/components/wd-config-provider/global-config.ts

@@ -0,0 +1,50 @@
+import { isUndefined, omitBy } from '../../common/util'
+import type { ButtonSize, ButtonType, ButtonVariant } from '../wd-button/types'
+import type { TagSize, TagVariant } from '../wd-tag/types'
+import type { ConfigProviderThemeVars } from './theme-vars'
+
+export interface ButtonConfig {
+  size?: ButtonSize
+  variant?: ButtonVariant
+  type?: ButtonType
+  round?: boolean
+}
+
+export interface TagConfig {
+  size?: TagSize
+  variant?: TagVariant
+  round?: boolean
+}
+
+export interface GlobalConfig {
+  theme: string
+  themeVars: ConfigProviderThemeVars
+  button: ButtonConfig
+  tag: TagConfig
+}
+
+export type ConfigProviderInput = Partial<GlobalConfig>
+
+export const DEFAULT_GLOBAL_CONFIG: GlobalConfig = Object.freeze({
+  theme: 'light',
+  themeVars: {},
+  button: {},
+  tag: {}
+}) as GlobalConfig
+
+export function mergeConfig(parent: GlobalConfig | null, input: ConfigProviderInput): GlobalConfig {
+  const base = parent || DEFAULT_GLOBAL_CONFIG
+  const cleaned = omitBy(input, isUndefined) as ConfigProviderInput
+  return {
+    theme: cleaned.theme || base.theme,
+    themeVars: mergeBucket(base.themeVars, cleaned.themeVars),
+    button: mergeBucket(base.button, cleaned.button),
+    tag: mergeBucket(base.tag, cleaned.tag)
+  }
+}
+
+// 剔除 override 自身的 undefined 键，避免 `:button="{ size: undefined }"` 抹掉外层已有的值
+function mergeBucket<T extends object>(base: T, override?: T): T {
+  if (!override) return base
+  return { ...base, ...(omitBy(override as Record<string, unknown>, isUndefined) as T) }
+}