@wot-ui/ui 2.0.8 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +11 -11
  2. package/attributes.json +1 -1
  3. package/changelog.md +24 -0
  4. package/components/wd-avatar/wd-avatar.vue +1 -1
  5. package/components/wd-button/types.ts +11 -8
  6. package/components/wd-button/wd-button.vue +26 -4
  7. package/components/wd-calendar-view/monthPanel/month-panel.vue +1 -0
  8. package/components/wd-calendar-view/yearPanel/year-panel.vue +1 -0
  9. package/components/wd-cell/index.scss +12 -1
  10. package/components/wd-config-provider/global-config.ts +50 -0
  11. package/components/wd-config-provider/theme-vars.ts +2073 -0
  12. package/components/wd-config-provider/types.ts +20 -2071
  13. package/components/wd-config-provider/wd-config-provider.vue +15 -4
  14. package/components/wd-dialog/wd-dialog.vue +1 -0
  15. package/components/wd-drop-menu/wd-drop-menu.vue +1 -0
  16. package/components/wd-grid/wd-grid.vue +0 -2
  17. package/components/wd-icon/wd-icon.vue +2 -2
  18. package/components/wd-img/wd-img.vue +1 -0
  19. package/components/wd-index-anchor/index.scss +5 -5
  20. package/components/wd-index-bar/index.scss +14 -14
  21. package/components/wd-keyboard/key/index.vue +2 -0
  22. package/components/wd-notify/wd-notify.vue +1 -0
  23. package/components/wd-picker-view/useSelection.ts +3 -1
  24. package/components/wd-root-portal/wd-root-portal.vue +1 -1
  25. package/components/wd-select-picker/wd-select-picker.vue +1 -0
  26. package/components/wd-signature/wd-signature.vue +1 -0
  27. package/components/wd-slider/index.scss +45 -45
  28. package/components/wd-slider/wd-slider.vue +19 -3
  29. package/components/wd-switch/wd-switch.vue +2 -0
  30. package/components/wd-tabs/wd-tabs.vue +1 -0
  31. package/components/wd-tag/index.scss +8 -7
  32. package/components/wd-tag/types.ts +10 -7
  33. package/components/wd-tag/wd-tag.vue +23 -6
  34. package/components/wd-toast/wd-toast.vue +4 -0
  35. package/composables/index.ts +2 -0
  36. package/composables/useConfigProvider.ts +27 -12
  37. package/composables/useGlobalConfig.ts +9 -0
  38. package/index.ts +1 -1
  39. package/package.json +1 -1
  40. package/styles/variable.scss +381 -381
  41. package/tags.json +1 -1
  42. package/web-types.json +1 -1
package/changelog.md CHANGED
@@ -1,6 +1,30 @@
1
1
  # 更新日志
2
2
 
3
3
 
4
+ ## [2.1.0](https://github.com/wot-ui/wot-ui/compare/v2.0.8...v2.1.0) (2026-06-10)
5
+
6
+
7
+ ### ✨ Features | 新功能
8
+
9
+ * ✨ config-provider 新增全局配置能力并接入 button 与 tag ([#62](https://github.com/wot-ui/wot-ui/issues/62)) ([f451ba8](https://github.com/wot-ui/wot-ui/commit/f451ba8e22d4672ace475d807451347b6668e153)), closes [#13](https://github.com/wot-ui/wot-ui/issues/13)
10
+
11
+
12
+ ### 🐛 Bug Fixes | Bug 修复
13
+
14
+ * 🐛 兼容性修复与类型补全 ([#43](https://github.com/wot-ui/wot-ui/issues/43)) ([953d164](https://github.com/wot-ui/wot-ui/commit/953d164642f2a2179c89dce3a64496fc5412e750))
15
+ * 🐛 将 FAB 组件示例中的错误按钮类型更改为危险按钮 ([#65](https://github.com/wot-ui/wot-ui/issues/65)) ([ed16d5f](https://github.com/wot-ui/wot-ui/commit/ed16d5f9457c2e603f4447b52bc8751b30112269)), closes [#5](https://github.com/wot-ui/wot-ui/issues/5)
16
+ * 🐛 修复 Cell 组件的 title 和 label 纯数字和英文场景不换行的问题 ([#64](https://github.com/wot-ui/wot-ui/issues/64)) ([b9d748f](https://github.com/wot-ui/wot-ui/commit/b9d748f29e9d88cdaebd8818b8565b52b5b959a6)), closes [#47](https://github.com/wot-ui/wot-ui/issues/47)
17
+ * 🐛 修复 size 属性在 image 和 cssIcon 模式下的无效问题 ([#45](https://github.com/wot-ui/wot-ui/issues/45)) ([ddcc89e](https://github.com/wot-ui/wot-ui/commit/ddcc89e5d232320b2214d4f5db4febd64c899b2e))
18
+ * 🐛 修复 toast 不支持自定义 icon 颜色 ([#54](https://github.com/wot-ui/wot-ui/issues/54)) ([3718cf4](https://github.com/wot-ui/wot-ui/commit/3718cf42140fbeefc4551e8f0540b599a0007d4e))
19
+ * 🐛 修复 useVideoPreview 没有被导出的问题 ([#52](https://github.com/wot-ui/wot-ui/issues/52)) ([3617c07](https://github.com/wot-ui/wot-ui/commit/3617c078f55a4c13463308e429ed57c785d10580))
20
+ * 🐛 修复不传 type 时 size 样式被默认类型覆盖的问题 ([#44](https://github.com/wot-ui/wot-ui/issues/44)) ([f811e7f](https://github.com/wot-ui/wot-ui/commit/f811e7f6c9e0aa33f968e73030e115d41ef0e511))
21
+
22
+
23
+ ### ✏️ Documentation | 文档
24
+
25
+ * ✏️ 补全 form-item 文档 value-align 属性 ([#67](https://github.com/wot-ui/wot-ui/issues/67)) ([a7cf766](https://github.com/wot-ui/wot-ui/commit/a7cf7666b5cba5e0d347b15f4b8d5e6db3af5b0a))
26
+ * ✏️ 更新所有文档中的链接,替换为新的域名 ([b6d2e4f](https://github.com/wot-ui/wot-ui/commit/b6d2e4f1799f2576fff9e7f4705a8c8efb292e4b))
27
+
4
28
  ### [2.0.8](https://github.com/wot-ui/wot-ui/compare/v2.0.7...v2.0.8) (2026-05-12)
5
29
 
6
30
  ### [2.0.7](https://github.com/wot-ui/wot-ui/compare/v2.0.6...v2.0.7) (2026-05-12)
@@ -136,7 +136,7 @@ const rootStyle = computed(() => {
136
136
  } else if (cascading === 'right-up') {
137
137
  // 右侧在上,越前面越大
138
138
  const maxCount = avatarGroup.value.props.maxCount
139
- let count = avatarGroup.value.children?.length ?? 0
139
+ let count = avatarGroup.value.children ? avatarGroup.value.children.length : 0
140
140
 
141
141
  if (isDef(maxCount)) {
142
142
  const parsedCount = typeof maxCount === 'number' ? maxCount : parseInt(maxCount, 10)
@@ -69,9 +69,12 @@ export const buttonProps = {
69
69
  ...baseProps,
70
70
  /**
71
71
  * 圆角按钮
72
- * 默认值: false
72
+ * 不传则继承全局配置
73
73
  */
74
- round: makeBooleanProp(false),
74
+ round: {
75
+ type: Boolean,
76
+ default: void 0
77
+ },
75
78
  /**
76
79
  * 禁用按钮
77
80
  * 默认值: false
@@ -91,16 +94,16 @@ export const buttonProps = {
91
94
  * 按钮类型
92
95
  * 类型: ButtonType
93
96
  * 可选值: 'primary' | 'success' | 'info' | 'warning' | 'danger'
94
- * 默认值: 'primary'
97
+ * 不传则继承全局配置
95
98
  */
96
- type: makeStringProp<ButtonType>('primary'),
99
+ type: String as PropType<ButtonType>,
97
100
  /**
98
101
  * 按钮尺寸
99
102
  * 类型: ButtonSize
100
103
  * 可选值: 'mini' | 'small' | 'medium' | 'large'
101
- * 默认值: 'medium'
104
+ * 不传则继承全局配置
102
105
  */
103
- size: makeStringProp<ButtonSize>('medium'),
106
+ size: String as PropType<ButtonSize>,
104
107
  /**
105
108
  * 图标类名
106
109
  */
@@ -202,9 +205,9 @@ export const buttonProps = {
202
205
  * 按钮变体
203
206
  * 类型: ButtonVariant
204
207
  * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'text'
205
- * 默认值: 'base'
208
+ * 不传则继承全局配置
206
209
  */
207
- variant: makeStringProp<ButtonVariant>('base')
210
+ variant: String as PropType<ButtonVariant>
208
211
  }
209
212
 
210
213
  /**
@@ -5,12 +5,12 @@
5
5
  :style="customStyle"
6
6
  :class="[
7
7
  'wd-button',
8
- 'is-' + type,
9
- 'is-' + size,
8
+ 'is-' + effectiveType,
9
+ 'is-' + effectiveSize,
10
10
  isIcon ? 'is-icon' : '',
11
- round ? 'is-round' : '',
11
+ effectiveRound ? 'is-round' : '',
12
12
  hairline ? 'is-hairline' : '',
13
- variant !== 'base' ? 'is-' + variant : '',
13
+ effectiveVariant !== 'base' ? 'is-' + effectiveVariant : '',
14
14
  disabled ? 'is-disabled' : '',
15
15
  block ? 'is-block' : '',
16
16
  loading ? 'is-loading' : '',
@@ -65,14 +65,36 @@ export default {
65
65
 
66
66
  <script lang="ts" setup>
67
67
  import wdIcon from '../wd-icon/wd-icon.vue'
68
+ import wdLoading from '../wd-loading/wd-loading.vue'
68
69
  import { computed, useSlots } from 'vue'
69
70
  import { buttonProps } from './types'
70
71
  import { isDef, omitBy, isUndefined } from '../../common/util'
71
72
  import { type LoadingProps } from '../wd-loading/types'
73
+ import { useGlobalConfig } from '../../composables/useGlobalConfig'
72
74
 
73
75
  const slots = useSlots()
74
76
 
75
77
  const props = defineProps(buttonProps)
78
+ const globalConfig = useGlobalConfig()
79
+
80
+ const effectiveSize = computed(() => {
81
+ return props.size || globalConfig.value.button?.size || 'medium'
82
+ })
83
+
84
+ const effectiveVariant = computed(() => {
85
+ return props.variant || globalConfig.value.button?.variant || 'base'
86
+ })
87
+
88
+ const effectiveType = computed(() => {
89
+ return props.type || globalConfig.value.button?.type || 'primary'
90
+ })
91
+
92
+ const effectiveRound = computed(() => {
93
+ if (isUndefined(props.round)) {
94
+ return isUndefined(globalConfig.value.button?.round) ? false : globalConfig.value.button?.round
95
+ }
96
+ return props.round
97
+ })
76
98
  const emit = defineEmits<{
77
99
  (e: 'click', event: any): void
78
100
  (e: 'getuserinfo', event: any): void
@@ -102,6 +102,7 @@ export default {
102
102
  </script>
103
103
 
104
104
  <script lang="ts" setup>
105
+ import wdIcon from '../../wd-icon/wd-icon.vue'
105
106
  import wdDatetimePickerView from '../../wd-datetime-picker-view/wd-datetime-picker-view.vue'
106
107
  import { computed, ref, watch, onMounted, type CSSProperties } from 'vue'
107
108
  import { debounce, isArray, isEqual, isNumber, pause, padZero, addUnit, objToStyle } from '../../../common/util'
@@ -61,6 +61,7 @@ export default {
61
61
  </script>
62
62
 
63
63
  <script lang="ts" setup>
64
+ import wdIcon from '../../wd-icon/wd-icon.vue'
64
65
  import { computed, ref, onMounted } from 'vue'
65
66
  import { compareYear, formatYearTitle, getYears } from '../utils'
66
67
  import { isArray, isNumber, pause } from '../../../common/util'
@@ -121,6 +121,7 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
121
121
  @include e(left) {
122
122
  position: relative;
123
123
  flex: 1;
124
+ min-width: 0;
124
125
  display: flex;
125
126
  text-align: left;
126
127
  font-size: $cell-title-font-size;
@@ -135,9 +136,13 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
135
136
  }
136
137
 
137
138
  @include e(title) {
139
+ min-width: 0;
138
140
  font-size: $cell-title-font-size;
139
141
  line-height: $cell-title-line-height;
140
142
  color: $cell-title-color;
143
+ white-space: normal;
144
+ word-wrap: break-word;
145
+ overflow-wrap: break-word;
141
146
  }
142
147
 
143
148
  @include e(required) {
@@ -157,6 +162,9 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
157
162
  font-size: $cell-label-font-size;
158
163
  line-height: $cell-label-line-height;
159
164
  color: $cell-label-color;
165
+ white-space: normal;
166
+ word-wrap: break-word;
167
+ overflow-wrap: break-word;
160
168
  }
161
169
 
162
170
  @include edeep(prefix) {
@@ -175,11 +183,14 @@ $cell-border-margin-horizontal: var(--wot-cell-border-margin-horizontal, $spacin
175
183
  @include e(value) {
176
184
  position: relative;
177
185
  flex: 1;
186
+ min-width: 0;
178
187
  font-size: $cell-value-font-size;
179
188
  line-height: $cell-value-line-height;
180
189
  color: $cell-value-color;
181
190
  vertical-align: middle;
182
- word-break: break-all;
191
+ white-space: normal;
192
+ word-wrap: break-word;
193
+ overflow-wrap: break-word;
183
194
 
184
195
  @include m(left) {
185
196
  text-align: left;
@@ -0,0 +1,50 @@
1
+ import { isUndefined, omitBy } from '../../common/util'
2
+ import type { ButtonSize, ButtonType, ButtonVariant } from '../wd-button/types'
3
+ import type { TagSize, TagVariant } from '../wd-tag/types'
4
+ import type { ConfigProviderThemeVars } from './theme-vars'
5
+
6
+ export interface ButtonConfig {
7
+ size?: ButtonSize
8
+ variant?: ButtonVariant
9
+ type?: ButtonType
10
+ round?: boolean
11
+ }
12
+
13
+ export interface TagConfig {
14
+ size?: TagSize
15
+ variant?: TagVariant
16
+ round?: boolean
17
+ }
18
+
19
+ export interface GlobalConfig {
20
+ theme: string
21
+ themeVars: ConfigProviderThemeVars
22
+ button: ButtonConfig
23
+ tag: TagConfig
24
+ }
25
+
26
+ export type ConfigProviderInput = Partial<GlobalConfig>
27
+
28
+ export const DEFAULT_GLOBAL_CONFIG: GlobalConfig = Object.freeze({
29
+ theme: 'light',
30
+ themeVars: {},
31
+ button: {},
32
+ tag: {}
33
+ }) as GlobalConfig
34
+
35
+ export function mergeConfig(parent: GlobalConfig | null, input: ConfigProviderInput): GlobalConfig {
36
+ const base = parent || DEFAULT_GLOBAL_CONFIG
37
+ const cleaned = omitBy(input, isUndefined) as ConfigProviderInput
38
+ return {
39
+ theme: cleaned.theme || base.theme,
40
+ themeVars: mergeBucket(base.themeVars, cleaned.themeVars),
41
+ button: mergeBucket(base.button, cleaned.button),
42
+ tag: mergeBucket(base.tag, cleaned.tag)
43
+ }
44
+ }
45
+
46
+ // 剔除 override 自身的 undefined 键,避免 `:button="{ size: undefined }"` 抹掉外层已有的值
47
+ function mergeBucket<T extends object>(base: T, override?: T): T {
48
+ if (!override) return base
49
+ return { ...base, ...(omitBy(override as Record<string, unknown>, isUndefined) as T) }
50
+ }