github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: merge main

pull/5820/head
tangjinzhou 2022-06-13 11:07:06 +08:00
parent 9280b418d7 87121e2632
commit bb4b86a82e
53 changed files with 240 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
CHANGELOG.en-US.md
View File

@ -12,7 +12,7 @@
## 3.3.0-beta.1 ## 3.3.0-beta.1
`2022-05-22` `2022-06-13`
- 💄 优化部分组件箭头样式。 - 💄 优化部分组件箭头样式。
@ -44,6 +44,34 @@
- 💄 优化 Upload 操作按钮的样式细节。 - 💄 优化 Upload 操作按钮的样式细节。
- 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。 - 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。
## 3.2.7
`2022-06-13`
- 🌟 `Checkbox` supports adding extra properties [#5678](https://github.com/vueComponent/ant-design-vue/issues/5678)
- 🌟 `RadioGroup` support global size [#5690](https://github.com/vueComponent/ant-design-vue/issues/5690)
- 🌟 `Table` expandedRowKeys support v-model [#5695](https://github.com/vueComponent/ant-design-vue/issues/5695)
- 🐞 Fix global Form message not taking effect [#5693](https://github.com/vueComponent/ant-design-vue/issues/5693)
- 🐞 Fix `Typography` Enter key triggers end event twice, end is no longer triggered when blur [#5696](https://github.com/vueComponent/ant-design-vue/issues/5696)
## 3.2.6
`2022-06-07`
- 🌟 `Cascader` custom trigger supports custom components [#5677](https://github.com/vueComponent/ant-design-vue/issues/5677)
- 🐞 Fix `DateRangePicker` `TimeRangePicker` arrow not following the movement issue [#71c619](https://github.com/vueComponent/ant-design-vue/commit/71c6195771c0b9ddffadd294ce01f7515c5adc40)
- 🐞 Fix `TimeRangePicker` minSteps, hourSteps, secondStep not taking effect [#5671](https://github.com/vueComponent/ant-design-vue/issues/5671)
## 3.2.5
`2022-05-26`
- 🌟 Image Added left and right arrow switching function [#5642](https://github.com/vueComponent/ant-design-vue/issues/5642)
- 🐞 Fix Steps progressDot slot failure [#5648](https://github.com/vueComponent/ant-design-vue/issues/5648)
- 🐞 Fix Tooltip global getPopupContainer invalid problem [#5636](https://github.com/vueComponent/ant-design-vue/issues/5636)
- 🐞 Fix useForm help style issue [#5635](https://github.com/vueComponent/ant-design-vue/issues/5635)
- 🐞 Fix Table, Tree drag and drop style conflict [#5644](https://github.com/vueComponent/ant-design-vue/issues/5644)
## 3.2.4 ## 3.2.4
`2022-05-23` `2022-05-23`
@ -588,7 +616,7 @@ Github：[https://github.com/surely-vue/table]
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages: You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages:
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` and call the corresponding method. 1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` and call the corresponding method.
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example, 2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example,
@ -610,7 +638,7 @@ Github：[https://github.com/surely-vue/table]
</a-form-item> </a-form-item>
``` ```
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component, It is equivalent to merging multiple form items into one. The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
```html ```html
<script> <script>
@ -619,7 +647,7 @@ Github：[https://github.com/surely-vue/table]
export default { export default {
name: 'custom-name', name: 'custom-name',
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>

36
CHANGELOG.zh-CN.md
View File

@ -12,7 +12,7 @@
## 3.3.0-beta.1 ## 3.3.0-beta.1
`2022-05-22` `2022-06-13`
- 💄 优化部分组件箭头样式。 - 💄 优化部分组件箭头样式。
@ -44,6 +44,34 @@
- 💄 优化 Upload 操作按钮的样式细节。 - 💄 优化 Upload 操作按钮的样式细节。
- 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。 - 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。
## 3.2.7
`2022-06-13`
- 🌟 `Checkbox` 支持添加额外属性 [#5678](https://github.com/vueComponent/ant-design-vue/issues/5678)
- 🌟 `RadioGroup` 支持全局 size [#5690](https://github.com/vueComponent/ant-design-vue/issues/5690)
- 🌟 `Table` expandedRowKeys 支持 v-model [#5695](https://github.com/vueComponent/ant-design-vue/issues/5695)
- 🐞 修复全局 Form message 未生效问题 [#5693](https://github.com/vueComponent/ant-design-vue/issues/5693)
- 🐞 修复 `Typography` 回车键触发两次 end 事件问题，blur 时不再触发 end [#5696](https://github.com/vueComponent/ant-design-vue/issues/5696)
## 3.2.6
`2022-06-07`
- 🌟 `Cascader` 自定义 trigger 支持自定义组件 [#5677](https://github.com/vueComponent/ant-design-vue/issues/5677)
- 🐞 修复 `DateRangePicker` `TimeRangePicker` 箭头没有跟随移动问题 [#71c619](https://github.com/vueComponent/ant-design-vue/commit/71c6195771c0b9ddffadd294ce01f7515c5adc40)
- 🐞 修复 `TimeRangePicker` minSteps、hourSteps、secondStep 未生效问题 [#5671](https://github.com/vueComponent/ant-design-vue/issues/5671)
## 3.2.5
`2022-05-26`
- 🌟 Image 新增左右箭头切换功能 [#5642](https://github.com/vueComponent/ant-design-vue/issues/5642)
- 🐞 修复 Steps progressDot 插槽失效问题 [#5648](https://github.com/vueComponent/ant-design-vue/issues/5648)
- 🐞 修复 Tooltip 全局 getPopupContainer 失效问题 [#5636](https://github.com/vueComponent/ant-design-vue/issues/5636)
- 🐞 修复 useForm help 样式问题 [#5635](https://github.com/vueComponent/ant-design-vue/issues/5635)
- 🐞 修复 Table、Tree 拖拽样式冲突问题 [#5644](https://github.com/vueComponent/ant-design-vue/issues/5644)
## 3.2.4 ## 3.2.4
`2022-05-23` `2022-05-23`
@ -585,7 +613,7 @@ Github：[https://github.com/surely-vue/table]
- 自 3.0 版本以后，Form.Item 不再劫持子元素，而是通过 provider / inject 依赖注入的方式进行自动校验，这种方式可以提高组件性能，子元素也不会限制个数，同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)，但它同样会有一些缺点： - 自 3.0 版本以后，Form.Item 不再劫持子元素，而是通过 provider / inject 依赖注入的方式进行自动校验，这种方式可以提高组件性能，子元素也不会限制个数，同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)，但它同样会有一些缺点：
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入，并调用相应的方法。 1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 注入，并调用相应的方法。
2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱。例如： 2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱。例如：
@ -607,7 +635,7 @@ Github：[https://github.com/surely-vue/table]
</a-form-item> </a-form-item>
``` ```
第二种，使用自定义组件包裹，并在自定义组件中调用 `useFormItemContext`，相当于把多个表单项合并成了一个。 第二种，使用自定义组件包裹，并在自定义组件中调用 `useInjectFormItemContext`，相当于把多个表单项合并成了一个。
```html ```html
<script> <script>
@ -615,7 +643,7 @@ Github：[https://github.com/surely-vue/table]
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
export default { export default {
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>

2
components/button/__tests__/__snapshots__/demo.test.js.snap
View File

@ -228,7 +228,7 @@ exports[`renders ./components/button/demo/multiple.vue correctly 1`] = `
`; `;
exports[`renders ./components/button/demo/size.vue correctly 1`] = ` exports[`renders ./components/button/demo/size.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
<br> <br>
<br> <br>
<button class="ant-btn ant-btn-primary ant-btn-lg" type="button"> <button class="ant-btn ant-btn-primary ant-btn-lg" type="button">

6
components/calendar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -21,7 +21,7 @@ exports[`renders ./components/calendar/demo/basic.vue correctly 1`] = `
<!----></span> <!----></span>
<!----> <!---->
</div> </div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div> <div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div> </div>
<div tabindex="0" class="ant-picker-panel"> <div tabindex="0" class="ant-picker-panel">
<div class="ant-picker-date-panel"> <div class="ant-picker-date-panel">
@ -1225,7 +1225,7 @@ exports[`renders ./components/calendar/demo/notice-calendar.vue correctly 1`] =
<!----></span> <!----></span>
<!----> <!---->
</div> </div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div> <div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div> </div>
<div tabindex="0" class="ant-picker-panel"> <div tabindex="0" class="ant-picker-panel">
<div class="ant-picker-date-panel"> <div class="ant-picker-date-panel">
@ -1651,7 +1651,7 @@ exports[`renders ./components/calendar/demo/select.vue correctly 1`] = `
<!----></span> <!----></span>
<!----> <!---->
</div> </div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div> <div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
</div> </div>
<div tabindex="0" class="ant-picker-panel"> <div tabindex="0" class="ant-picker-panel">
<div class="ant-picker-date-panel"> <div class="ant-picker-date-panel">

2
components/calendar/__tests__/__snapshots__/index.test.js.snap
View File

@ -21,7 +21,7 @@ exports[`Calendar Calendar should support locale 1`] = `
<!----></span> <!----></span>
<!----> <!---->
</div> </div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div> <div class="ant-radio-group ant-radio-group-outline ant-picker-calendar-mode-switch"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div>
</div> </div>
<div tabindex="0" class="ant-picker-panel"> <div tabindex="0" class="ant-picker-panel">
<div class="ant-picker-date-panel"> <div class="ant-picker-date-panel">

2
components/carousel/__tests__/__snapshots__/demo.test.js.snap
View File

@ -356,7 +356,7 @@ exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
`; `;
exports[`renders ./components/carousel/demo/position.vue correctly 1`] = ` exports[`renders ./components/carousel/demo/position.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>Bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>Right</span></label></div>
<div class="ant-carousel"> <div class="ant-carousel">
<div class="slick-slider slick-initialized" dir="ltr"> <div class="slick-slider slick-initialized" dir="ltr">
<!----> <!---->

3
components/carousel/demo/customPaging.vue
View File

@ -24,7 +24,7 @@ Custom paging display
</a> </a>
</template> </template>
<div v-for="item in 4" :key="item"> <div v-for="item in 4" :key="item">
<img :src="baseUrl + 'abstract0' + item + '.jpg'" /> <img :src="getImgUrl(item - 1)" />
</div> </div>
</a-carousel> </a-carousel>
</template> </template>
@ -39,7 +39,6 @@ export default defineComponent({
return `${baseUrl}abstract0${i + 1}.jpg`; return `${baseUrl}abstract0${i + 1}.jpg`;
}; };
return { return {
baseUrl,
getImgUrl, getImgUrl,
}; };
}, },

2
components/checkbox/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders ./components/checkbox/demo/basic.vue correctly 1`] = `<label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Checkbox</span></label>`; exports[`renders ./components/checkbox/demo/basic.vue correctly 1`] = `<label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span>Checkbox</span></label>`;
exports[`renders ./components/checkbox/demo/check-all.vue correctly 1`] = ` exports[`renders ./components/checkbox/demo/check-all.vue correctly 1`] = `
<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span><span> Check all </span></label></div> <div><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input" aria-checked="mixed"><span class="ant-checkbox-inner"></span></span><span> Check all </span></label></div>
<div class="ant-divider ant-divider-horizontal" role="separator"> <div class="ant-divider ant-divider-horizontal" role="separator">
<!----> <!---->
</div> </div>

4
components/config-provider/context.ts
View File

@ -1,5 +1,5 @@
import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue'; import type { ExtractPropTypes, InjectionKey, PropType, Ref } from 'vue';
import { inject, provide } from 'vue'; import { computed, inject, provide } from 'vue';
import type { ValidateMessages } from '../form/interface'; import type { ValidateMessages } from '../form/interface';
import type { RequiredMark } from '../form/Form'; import type { RequiredMark } from '../form/Form';
import type { RenderEmptyHandler } from './renderEmpty'; import type { RenderEmptyHandler } from './renderEmpty';
@ -20,7 +20,7 @@ export const useProvideGlobalForm = (state: GlobalFormCOntextProps) => {
}; };
export const useInjectGlobalForm = () => { export const useInjectGlobalForm = () => {
return inject(GlobalFormContextKey, {}); return inject(GlobalFormContextKey, { validateMessages: computed(() => undefined) });
}; };
export const GlobalConfigContextKey: InjectionKey<GlobalFormCOntextProps> = export const GlobalConfigContextKey: InjectionKey<GlobalFormCOntextProps> =

4
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -429,7 +429,7 @@ exports[`renders ./components/date-picker/demo/mode.vue correctly 1`] = `
`; `;
exports[`renders ./components/date-picker/demo/placement.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/placement.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div>
<br> <br>
<br> <br>
<div class="ant-space ant-space-vertical"> <div class="ant-space ant-space-vertical">
@ -567,7 +567,7 @@ exports[`renders ./components/date-picker/demo/select-in-range.vue correctly 1`]
exports[`renders ./components/date-picker/demo/size.vue correctly 1`] = ` exports[`renders ./components/date-picker/demo/size.vue correctly 1`] = `
<div class="ant-space ant-space-vertical"> <div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 12px;"> <div class="ant-space-item" style="margin-bottom: 12px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
</div> </div>
<!----> <!---->
<div class="ant-space-item" style="margin-bottom: 12px;"> <div class="ant-space-item" style="margin-bottom: 12px;">

7
components/date-picker/generatePicker/props.ts
View File

@ -87,6 +87,13 @@ function commonProps<DateType = any>() {
valueFormat: String, valueFormat: String,
placement: String as PropType<DataPickerPlacement>, placement: String as PropType<DataPickerPlacement>,
status: String as PropType<InputStatus>, status: String as PropType<InputStatus>,
/** @deprecated Please use `disabledTime` instead. */
disabledHours: Function as PropType<DisabledTimes['disabledHours']>,
/** @deprecated Please use `disabledTime` instead. */
disabledMinutes: Function as PropType<DisabledTimes['disabledMinutes']>,
/** @deprecated Please use `disabledTime` instead. */
disabledSeconds: Function as PropType<DisabledTimes['disabledSeconds']>,
}; };
} }

2
components/descriptions/__tests__/__snapshots__/demo.test.js.snap
View File

@ -208,7 +208,7 @@ exports[`renders ./components/descriptions/demo/responsive.vue correctly 1`] = `
exports[`renders ./components/descriptions/demo/size.vue correctly 1`] = ` exports[`renders ./components/descriptions/demo/size.vue correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="default"><span class="ant-radio-inner"></span></span><span>default</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="middle"><span class="ant-radio-inner"></span></span><span>middle</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="small"><span class="ant-radio-inner"></span></span><span>small</span></label></div><br><br> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="default"><span class="ant-radio-inner"></span></span><span>default</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="middle"><span class="ant-radio-inner"></span></span><span>middle</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="small"><span class="ant-radio-inner"></span></span><span>small</span></label></div><br><br>
<div class="ant-descriptions ant-descriptions-bordered"> <div class="ant-descriptions ant-descriptions-bordered">
<div class="ant-descriptions-header"> <div class="ant-descriptions-header">
<div class="ant-descriptions-title">Custom Size</div> <div class="ant-descriptions-title">Custom Size</div>

4
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -7,7 +7,7 @@ exports[`renders ./components/drawer/demo/basic.vue correctly 1`] = `
`; `;
exports[`renders ./components/drawer/demo/extra.vue correctly 1`] = ` exports[`renders ./components/drawer/demo/extra.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div>
<button class="ant-btn ant-btn-primary" type="button"> <button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open</span> <!----><span>Open</span>
</button> </button>
@ -22,7 +22,7 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.vue correctly 1`] =
`; `;
exports[`renders ./components/drawer/demo/placement.vue correctly 1`] = ` exports[`renders ./components/drawer/demo/placement.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin-right: 8px;"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="top"><span class="ant-radio-inner"></span></span><span>top</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="bottom"><span class="ant-radio-inner"></span></span><span>bottom</span></label><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>left</span></label></div>
<button class="ant-btn ant-btn-primary" type="button"> <button class="ant-btn ant-btn-primary" type="button">
<!----><span>Open</span> <!----><span>Open</span>
</button> </button>

4
components/form/Form.tsx
View File

@ -30,6 +30,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
import { useProvideForm } from './context'; import { useProvideForm } from './context';
import type { SizeType } from '../config-provider'; import type { SizeType } from '../config-provider';
import useForm from './useForm'; import useForm from './useForm';
import { useInjectGlobalForm } from '../config-provider/context';
export type RequiredMark = boolean | 'optional'; export type RequiredMark = boolean | 'optional';
export type FormLayout = 'horizontal' | 'inline' | 'vertical'; export type FormLayout = 'horizontal' | 'inline' | 'vertical';
@ -127,10 +128,11 @@ const Form = defineComponent({
return true; return true;
}); });
const mergedColon = computed(() => props.colon ?? contextForm.value?.colon); const mergedColon = computed(() => props.colon ?? contextForm.value?.colon);
const { validateMessages: globalValidateMessages } = useInjectGlobalForm();
const validateMessages = computed(() => { const validateMessages = computed(() => {
return { return {
...defaultValidateMessages, ...defaultValidateMessages,
...contextForm.value?.validateMessages, ...globalValidateMessages.value,
...props.validateMessages, ...props.validateMessages,
}; };
}); });

10
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -660,7 +660,7 @@ exports[`renders ./components/form/demo/lable-width.vue correctly 1`] = `
<div class="ant-col ant-col-14 ant-form-item-control"> <div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Sponsor</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Venue</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Sponsor</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Venue</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->
@ -705,7 +705,7 @@ exports[`renders ./components/form/demo/layout.vue correctly 1`] = `
<div class="ant-col ant-col-14 ant-form-item-control"> <div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>Inline</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>Inline</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->
@ -1375,7 +1375,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-col ant-col-14 ant-form-item-control"> <div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="validate_other_radio-group"><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>item 1</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>item 2</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>item 3</span></label></div> <div class="ant-radio-group ant-radio-group-outline" id="validate_other_radio-group"><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>item 1</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>item 2</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>item 3</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->
@ -1389,7 +1389,7 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
<div class="ant-col ant-col-14 ant-form-item-control"> <div class="ant-col ant-col-14 ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="validate_other_radio-button"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>item 1</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>item 2</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>item 3</span></label></div> <div class="ant-radio-group ant-radio-group-outline" id="validate_other_radio-button"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>item 1</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>item 2</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>item 3</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->
@ -1964,7 +1964,7 @@ exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
<div class="ant-col ant-col-13 ant-form-item-control"> <div class="ant-col ant-col-13 ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" id="form_item_resource"><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Sponsor</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Venue</span></label></div> <div class="ant-radio-group ant-radio-group-outline" id="form_item_resource"><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Sponsor</span></label><label class="ant-radio-wrapper ant-radio-wrapper-in-form-item"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Venue</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->

6
components/form/index.en-US.md
View File

@ -100,7 +100,7 @@ You can reference [Customized Form Controls](#components-form-demo-customized-fo
But it also has some disadvantages: But it also has some disadvantages:
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` and call the corresponding method. 1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` and call the corresponding method.
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example, 2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example,
@ -122,7 +122,7 @@ The first is to use multiple `a-form-item`:
</a-form-item> </a-form-item>
``` ```
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component, It is equivalent to merging multiple form items into one. The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
```html ```html
<script> <script>
@ -131,7 +131,7 @@ The second way is to wrap it with a custom component and call `useFormItemContex
export default { export default {
name: 'custom-name', name: 'custom-name',
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>

6
components/form/index.zh-CN.md
View File

@ -99,7 +99,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
但它同样会有一些缺点： 但它同样会有一些缺点：
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入，并调用相应的方法。 1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 注入，并调用相应的方法。
2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱，例如， 2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱，例如，
@ -121,7 +121,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
</a-form-item> </a-form-item>
``` ```
第二种，使用自定义组件包裹，并在自定义组件中调用 `useFormItemContext`，相当于把多个表单项合并成了一个 第二种，使用自定义组件包裹，并在自定义组件中调用 `useInjectFormItemContext`，相当于把多个表单项合并成了一个
```html ```html
<script> <script>
@ -129,7 +129,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
export default { export default {
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>

4
components/form/useForm.ts
View File

@ -252,7 +252,7 @@ function useForm(
if (validateInfos[name].validateStatus === 'validating') { if (validateInfos[name].validateStatus === 'validating') {
const res = results.filter(result => result && result.errors.length); const res = results.filter(result => result && result.errors.length);
validateInfos[name].validateStatus = res.length ? 'error' : 'success'; validateInfos[name].validateStatus = res.length ? 'error' : 'success';
validateInfos[name].help = res.length ? res.map(r => r.errors) : ''; validateInfos[name].help = res.length ? res.map(r => r.errors) : null;
options?.onValidate?.( options?.onValidate?.(
name, name,
!res.length, !res.length,
@ -293,7 +293,7 @@ function useForm(
validateInfos[key] && validateInfos[key] &&
Object.assign(validateInfos[key], { Object.assign(validateInfos[key], {
validateStatus: '', validateStatus: '',
help: '', help: null,
}); });
}); });
}; };

2
components/radio/Group.tsx
View File

@ -24,7 +24,7 @@ export type RadioGroupChildOption = {
export const radioGroupProps = () => ({ export const radioGroupProps = () => ({
prefixCls: String, prefixCls: String,
value: PropTypes.any, value: PropTypes.any,
size: PropTypes.oneOf(RadioGroupSizeTypes).def('default'), size: PropTypes.oneOf(RadioGroupSizeTypes),
options: { options: {
type: Array as PropType<Array<string | RadioGroupChildOption | number>>, type: Array as PropType<Array<string | RadioGroupChildOption | number>>,
}, },

30
components/radio/__tests__/__snapshots__/demo.test.js.snap
View File

@ -13,13 +13,13 @@ exports[`renders ./components/radio/demo/disabled.vue correctly 1`] = `
exports[`renders ./components/radio/demo/radioButton.vue correctly 1`] = ` exports[`renders ./components/radio/demo/radioButton.vue correctly 1`] = `
<div> <div>
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
</div> </div>
`; `;
@ -27,52 +27,52 @@ exports[`renders ./components/radio/demo/radioButton.vue correctly 1`] = `
exports[`renders ./components/radio/demo/radioButton-solid.vue correctly 1`] = ` exports[`renders ./components/radio/demo/radioButton-solid.vue correctly 1`] = `
<div> <div>
<div> <div>
<div class="ant-radio-group ant-radio-group-solid ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-solid"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
<div class="ant-radio-group ant-radio-group-solid ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-solid"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
</div> </div>
`; `;
exports[`renders ./components/radio/demo/radioGroup.vue correctly 1`] = ` exports[`renders ./components/radio/demo/radioGroup.vue correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>C</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span>D</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>C</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span>D</span></label></div>
</div> </div>
`; `;
exports[`renders ./components/radio/demo/radioGroup-more.vue correctly 1`] = `<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Option A</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Option B</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>Option C</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span> More... <!--v-if--></span></label></div>`; exports[`renders ./components/radio/demo/radioGroup-more.vue correctly 1`] = `<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>Option A</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>Option B</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>Option C</span></label><label class="ant-radio-wrapper" style="display: flex; height: 30px; line-height: 30px;"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span> More... <!--v-if--></span></label></div>`;
exports[`renders ./components/radio/demo/radioGroup-options.vue correctly 1`] = ` exports[`renders ./components/radio/demo/radioGroup-options.vue correctly 1`] = `
<div class="ant-space ant-space-vertical"> <div class="ant-space ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;"> <div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div>
</div> </div>
<!----> <!---->
<div class="ant-space-item" style="margin-bottom: 8px;"> <div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div>
</div> </div>
<!----> <!---->
<div class="ant-space-item" style="margin-bottom: 8px;"> <div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-checked ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Apple"><span class="ant-radio-inner"></span></span><span>Apple</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Pear"><span class="ant-radio-inner"></span></span><span>Pear</span></label><label class="ant-radio-wrapper ant-radio-wrapper-disabled"><span class="ant-radio ant-radio-disabled"><input type="radio" disabled="" class="ant-radio-input" value="Orange"><span class="ant-radio-inner"></span></span><span>Orange</span></label></div>
</div> </div>
<!----> <!---->
<div class="ant-space-item" style="margin-bottom: 8px;"> <div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div>
</div> </div>
<!----> <!---->
<div class="ant-space-item" style="margin-bottom: 8px;"> <div class="ant-space-item" style="margin-bottom: 8px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div>
</div> </div>
<!----> <!---->
<div class="ant-space-item"> <div class="ant-space-item">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-checked ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Apple"><span class="ant-radio-button-inner"></span></span><span>Apple</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Pear"><span class="ant-radio-button-inner"></span></span><span>Pear</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-disabled"><span class="ant-radio-button ant-radio-button-disabled"><input type="radio" disabled="" class="ant-radio-button-input" value="Orange"><span class="ant-radio-button-inner"></span></span><span>Orange</span></label></div>
</div> </div>
<!----> <!---->
</div> </div>
`; `;
exports[`renders ./components/radio/demo/radioGroup-with-name.vue correctly 1`] = `<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input name="radioGroup" type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>C</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span>D</span></label></div>`; exports[`renders ./components/radio/demo/radioGroup-with-name.vue correctly 1`] = `<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input name="radioGroup" type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input" value="3"><span class="ant-radio-inner"></span></span><span>C</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radioGroup" type="radio" class="ant-radio-input" value="4"><span class="ant-radio-inner"></span></span><span>D</span></label></div>`;
exports[`renders ./components/radio/demo/size.vue correctly 1`] = ` exports[`renders ./components/radio/demo/size.vue correctly 1`] = `
<div> <div>
@ -80,7 +80,7 @@ exports[`renders ./components/radio/demo/size.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-large"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-outline ant-radio-group-large"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>
</div> </div>
<div style="margin-top: 16px;"> <div style="margin-top: 16px;">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div> <div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>Hangzhou</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>Shanghai</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>Beijing</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="d"><span class="ant-radio-button-inner"></span></span><span>Chengdu</span></label></div>

8
components/radio/__tests__/__snapshots__/group.test.js.snap
View File

@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Radio all children should have a name property 1`] = `<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input" value="A"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input" value="B"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input" value="C"><span class="ant-radio-inner"></span></span><span>C</span></label></div>`; exports[`Radio all children should have a name property 1`] = `<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input" value="A"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input" value="B"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input" value="C"><span class="ant-radio-inner"></span></span><span>C</span></label></div>`;
exports[`Radio fire change events when value changes 1`] = `<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="A"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="B"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="C"><span class="ant-radio-inner"></span></span><span>C</span></label></div>`; exports[`Radio fire change events when value changes 1`] = `<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="A"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="B"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="C"><span class="ant-radio-inner"></span></span><span>C</span></label></div>`;
exports[`Radio fire change events when value changes 2`] = `<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="A"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="B"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="C"><span class="ant-radio-inner"></span></span><span>C</span></label></div>`; exports[`Radio fire change events when value changes 2`] = `<div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="A"><span class="ant-radio-inner"></span></span><span>A</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="B"><span class="ant-radio-inner"></span></span><span>B</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="C"><span class="ant-radio-inner"></span></span><span>C</span></label></div>`;
exports[`Radio passes prefixCls down to radio 1`] = `<div class="my-radio-group my-radio-group-outline my-radio-group-default"><label class="my-radio-wrapper"><span class="my-radio"><input type="radio" class="my-radio-input" value="Apple"><span class="my-radio-inner"></span></span><span>Apple</span></label><label class="my-radio-wrapper"><span class="my-radio"><input type="radio" class="my-radio-input" value="Orange"><span class="my-radio-inner"></span></span><span>Orange</span></label></div>`; exports[`Radio passes prefixCls down to radio 1`] = `<div class="my-radio-group my-radio-group-outline"><label class="my-radio-wrapper"><span class="my-radio"><input type="radio" class="my-radio-input" value="Apple"><span class="my-radio-inner"></span></span><span>Apple</span></label><label class="my-radio-wrapper"><span class="my-radio"><input type="radio" class="my-radio-input" value="Orange"><span class="my-radio-inner"></span></span><span>Orange</span></label></div>`;

4
components/select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -330,7 +330,7 @@ exports[`renders ./components/select/demo/option-label-prop.vue correctly 1`] =
`; `;
exports[`renders ./components/select/demo/placement.vue correctly 1`] = ` exports[`renders ./components/select/demo/placement.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div>
<br> <br>
<br> <br>
<div style="width: 120px;" class="ant-select ant-select-single ant-select-show-arrow"> <div style="width: 120px;" class="ant-select ant-select-single ant-select-show-arrow">
@ -498,7 +498,7 @@ exports[`renders ./components/select/demo/select-users.vue correctly 1`] = `
`; `;
exports[`renders ./components/select/demo/size.vue correctly 1`] = ` exports[`renders ./components/select/demo/size.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="middle"><span class="ant-radio-button-inner"></span></span><span>Middle</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="middle"><span class="ant-radio-button-inner"></span></span><span>Middle</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
<br> <br>
<br> <br>
<div class="ant-space ant-space-vertical"> <div class="ant-space ant-space-vertical">

6
components/skeleton/__tests__/__snapshots__/demo.test.js.snap
View File

@ -122,7 +122,7 @@ exports[`renders ./components/skeleton/demo/element.vue correctly 1`] = `
<div class="ant-col ant-form-item-control"> <div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->
@ -136,7 +136,7 @@ exports[`renders ./components/skeleton/demo/element.vue correctly 1`] = `
<div class="ant-col ant-form-item-control"> <div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="round"><span class="ant-radio-button-inner"></span></span><span>Round</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="circle"><span class="ant-radio-button-inner"></span></span><span>Circle</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="round"><span class="ant-radio-button-inner"></span></span><span>Round</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="circle"><span class="ant-radio-button-inner"></span></span><span>Circle</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->
@ -150,7 +150,7 @@ exports[`renders ./components/skeleton/demo/element.vue correctly 1`] = `
<div class="ant-col ant-form-item-control"> <div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input"> <div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content"> <div class="ant-form-item-control-input-content">
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="square"><span class="ant-radio-button-inner"></span></span><span>Square</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="circle"><span class="ant-radio-button-inner"></span></span><span>Circle</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="square"><span class="ant-radio-button-inner"></span></span><span>Square</span></label><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked ant-radio-button-wrapper-in-form-item"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="circle"><span class="ant-radio-button-inner"></span></span><span>Circle</span></label></div>
</div> </div>
</div> </div>
<!----> <!---->

2
components/space/__tests__/__snapshots__/demo.test.js.snap
View File

@ -109,7 +109,7 @@ exports[`renders ./components/space/demo/customize.vue correctly 1`] = `
exports[`renders ./components/space/demo/size.vue correctly 1`] = ` exports[`renders ./components/space/demo/size.vue correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="small"><span class="ant-radio-inner"></span></span><span>Small</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="middle"><span class="ant-radio-inner"></span></span><span>Middle</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="large"><span class="ant-radio-inner"></span></span><span>Large</span></label></div><br><br> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="small"><span class="ant-radio-inner"></span></span><span>Small</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="middle"><span class="ant-radio-inner"></span></span><span>Middle</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="large"><span class="ant-radio-inner"></span></span><span>Large</span></label></div><br><br>
<div class="ant-space ant-space-horizontal ant-space-align-center"> <div class="ant-space ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button"> <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn ant-btn-primary" type="button">
<!----><span>Primary</span> <!----><span>Primary</span>

10
components/steps/__tests__/__snapshots__/demo.test.js.snap
View File

@ -98,13 +98,13 @@ exports[`renders ./components/steps/demo/clickable.vue correctly 1`] = `
exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1`] = ` exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1`] = `
<div> <div>
<div class="ant-steps ant-steps-vertical"> <div class="ant-steps ant-steps-vertical ant-steps-dot">
<div class="ant-steps-item ant-steps-item-finish"> <div class="ant-steps-item ant-steps-item-finish">
<div role="button" tabindex="0" class="ant-steps-item-container"> <div role="button" tabindex="0" class="ant-steps-item-container">
<div class="ant-steps-item-tail"> <div class="ant-steps-item-tail">
<!----> <!---->
</div> </div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon"><span role="img" aria-label="check" class="anticon anticon-check [object Object]-finish-icon"><svg focusable="false" class="" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></span></span></div> <div class="ant-steps-item-icon"><span class="ant-steps-icon"><!----><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content"> <div class="ant-steps-item-content">
<div class="ant-steps-item-title">Finished <div class="ant-steps-item-title">Finished
<!----> <!---->
@ -118,7 +118,7 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
<div class="ant-steps-item-tail"> <div class="ant-steps-item-tail">
<!----> <!---->
</div> </div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">2</span></div> <div class="ant-steps-item-icon"><span class="ant-steps-icon"><!----><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content"> <div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress <div class="ant-steps-item-title">In Progress
<!----> <!---->
@ -132,7 +132,7 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
<div class="ant-steps-item-tail"> <div class="ant-steps-item-tail">
<!----> <!---->
</div> </div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">3</span></div> <div class="ant-steps-item-icon"><span class="ant-steps-icon"><!----><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content"> <div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting <div class="ant-steps-item-title">Waiting
<!----> <!---->
@ -146,7 +146,7 @@ exports[`renders ./components/steps/demo/customized-progress-dot.vue correctly 1
<div class="ant-steps-item-tail"> <div class="ant-steps-item-tail">
<!----> <!---->
</div> </div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon">4</span></div> <div class="ant-steps-item-icon"><span class="ant-steps-icon"><!----><span class="ant-steps-icon-dot"></span></span></div>
<div class="ant-steps-item-content"> <div class="ant-steps-item-content">
<div class="ant-steps-item-title">Waiting <div class="ant-steps-item-title">Waiting
<!----> <!---->

4
components/table/Table.tsx
View File

@ -156,6 +156,10 @@ export const tableProps = () => {
type: Function as PropType<TableProps['onExpandedRowsChange']>, type: Function as PropType<TableProps['onExpandedRowsChange']>,
default: undefined, default: undefined,
}, },
'onUpdate:expandedRowKeys': {
type: Function as PropType<TableProps['onExpandedRowsChange']>,
default: undefined,
},
defaultExpandAllRows: { defaultExpandAllRows: {
type: Boolean as PropType<TableProps['defaultExpandAllRows']>, type: Boolean as PropType<TableProps['defaultExpandAllRows']>,
default: undefined, default: undefined,

2
components/table/index.en-US.md
View File

@ -82,7 +82,7 @@ Specify `dataSource` of Table as an array of data.
| defaultExpandAllRows | Expand all rows initially | boolean | `false` | | | defaultExpandAllRows | Expand all rows initially | boolean | `false` | |
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | | | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | |
| emptyText | Customize the display content when empty data | v-slot:emptyText | - | 3.0 | | emptyText | Customize the display content when empty data | v-slot:emptyText | - | 3.0 |
| expandedRowKeys | Current expanded row keys | string\[] | - | | | expandedRowKeys(v-model) | Current expanded row keys | string\[] | - | |
| expandedRowRender | Expanded container render for each row | Function({record, index, indent, expanded}):VNode\|v-slot | - | | | expandedRowRender | Expanded container render for each row | Function({record, index, indent, expanded}):VNode\|v-slot | - | |
| expandFixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | 3.0 | | expandFixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | 3.0 |
| expandIcon | Customize row expand Icon. | Function(props):VNode \| v-slot:expandIcon="props" | - | | | expandIcon | Customize row expand Icon. | Function(props):VNode \| v-slot:expandIcon="props" | - | |

2
components/table/index.zh-CN.md
View File

@ -87,7 +87,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | | | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - | | | defaultExpandedRowKeys | 默认展开的行 | string\[] | - | |
| emptyText | 自定义空数据时的显示内容 | v-slot:emptyText | - | 3.0 | | emptyText | 自定义空数据时的显示内容 | v-slot:emptyText | - | 3.0 |
| expandedRowKeys | 展开的行，控制属性 | string\[] | - | | | expandedRowKeys(v-model) | 展开的行，控制属性 | string\[] | - | |
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):VNode \| v-slot:expandedRowRender="{record, index, indent, expanded}" | - | | | expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):VNode \| v-slot:expandedRowRender="{record, index, indent, expanded}" | - | |
| expandFixed | 控制展开图标是否固定，可选 true `left` `right` | boolean \| string | false | 3.0 | | expandFixed | 控制展开图标是否固定，可选 true `left` `right` | boolean \| string | false | 3.0 |
| expandIcon | 自定义展开图标 | Function(props):VNode \| v-slot:expandIcon="props" | - | | | expandIcon | 自定义展开图标 | Function(props):VNode \| v-slot:expandIcon="props" | - | |

2
components/table/style/resize.less
View File

@ -23,7 +23,7 @@
} }
} }
.dragging { .@{table-prefix-cls}-resize-handle.dragging {
.@{table-prefix-cls}-resize-handle-line { .@{table-prefix-cls}-resize-handle-line {
opacity: 1; opacity: 1;
} }

6
components/tabs/__tests__/__snapshots__/demo.test.js.snap
View File

@ -422,7 +422,7 @@ exports[`renders ./components/tabs/demo/icon.vue correctly 1`] = `
`; `;
exports[`renders ./components/tabs/demo/position.vue correctly 1`] = ` exports[`renders ./components/tabs/demo/position.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>right</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>top</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottom"><span class="ant-radio-button-inner"></span></span><span>bottom</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>left</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="right"><span class="ant-radio-button-inner"></span></span><span>right</span></label></div>
<div class="ant-tabs ant-tabs-top"> <div class="ant-tabs ant-tabs-top">
<div role="tablist" class="ant-tabs-nav"> <div role="tablist" class="ant-tabs-nav">
<!----> <!---->
@ -467,7 +467,7 @@ exports[`renders ./components/tabs/demo/position.vue correctly 1`] = `
exports[`renders ./components/tabs/demo/size.vue correctly 1`] = ` exports[`renders ./components/tabs/demo/size.vue correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 16px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin-bottom: 16px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label></div>
<div class="ant-tabs ant-tabs-top ant-tabs-small"> <div class="ant-tabs ant-tabs-top ant-tabs-small">
<div role="tablist" class="ant-tabs-nav"> <div role="tablist" class="ant-tabs-nav">
<!----> <!---->
@ -513,7 +513,7 @@ exports[`renders ./components/tabs/demo/size.vue correctly 1`] = `
exports[`renders ./components/tabs/demo/slide.vue correctly 1`] = ` exports[`renders ./components/tabs/demo/slide.vue correctly 1`] = `
<div> <div>
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin-bottom: 8px;"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="top"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="left"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label></div>
<div style="height: 200px;" class="ant-tabs ant-tabs-top"> <div style="height: 200px;" class="ant-tabs ant-tabs-top">
<div role="tablist" class="ant-tabs-nav"> <div role="tablist" class="ant-tabs-nav">
<!----> <!---->

2
components/time-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -140,7 +140,7 @@ exports[`renders ./components/time-picker/demo/interval-options.vue correctly 1`
`; `;
exports[`renders ./components/time-picker/demo/placement.vue correctly 1`] = ` exports[`renders ./components/time-picker/demo/placement.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div>
<br> <br>
<br> <br>
<div class="ant-space ant-space-vertical"> <div class="ant-space ant-space-vertical">

2
components/timeline/__tests__/__snapshots__/demo.test.js.snap
View File

@ -199,7 +199,7 @@ exports[`renders ./components/timeline/demo/custom.vue correctly 1`] = `
`; `;
exports[`renders ./components/timeline/demo/label.vue correctly 1`] = ` exports[`renders ./components/timeline/demo/label.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" style="margin-bottom: 20px;"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>Left</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>Right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="alternate"><span class="ant-radio-inner"></span></span><span>Alternate</span></label></div> <div class="ant-radio-group ant-radio-group-outline" style="margin-bottom: 20px;"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="left"><span class="ant-radio-inner"></span></span><span>Left</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="right"><span class="ant-radio-inner"></span></span><span>Right</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="alternate"><span class="ant-radio-inner"></span></span><span>Alternate</span></label></div>
<ul class="ant-timeline ant-timeline-label"> <ul class="ant-timeline ant-timeline-label">
<li class="ant-timeline-item ant-timeline-item-left"> <li class="ant-timeline-item ant-timeline-item-left">
<div class="ant-timeline-item-label">2015-09-01</div> <div class="ant-timeline-item-label">2015-09-01</div>

7
components/tooltip/Tooltip.tsx
View File

@ -75,7 +75,7 @@ export default defineComponent({
slots: ['title'], slots: ['title'],
// emits: ['update:visible', 'visibleChange'], // emits: ['update:visible', 'visibleChange'],
setup(props, { slots, emit, attrs, expose }) { setup(props, { slots, emit, attrs, expose }) {
const { prefixCls, getTargetContainer } = useConfigInject('tooltip', props); const { prefixCls, getPopupContainer } = useConfigInject('tooltip', props);
const visible = ref(firstNotUndefined([props.visible, props.defaultVisible])); const visible = ref(firstNotUndefined([props.visible, props.defaultVisible]));
@ -217,7 +217,7 @@ export default defineComponent({
}; };
return () => { return () => {
const { openClassName, getPopupContainer, color, overlayClassName } = props; const { openClassName, color, overlayClassName } = props;
let children = filterEmpty(slots.default?.()) ?? null; let children = filterEmpty(slots.default?.()) ?? null;
children = children.length === 1 ? children[0] : children; children = children.length === 1 ? children[0] : children;
@ -245,12 +245,11 @@ export default defineComponent({
formattedOverlayInnerStyle = { backgroundColor: color }; formattedOverlayInnerStyle = { backgroundColor: color };
arrowContentStyle = { '--antd-arrow-background-color': color }; arrowContentStyle = { '--antd-arrow-background-color': color };
} }
const vcTooltipProps = { const vcTooltipProps = {
...attrs, ...attrs,
...(props as TooltipProps), ...(props as TooltipProps),
prefixCls: prefixCls.value, prefixCls: prefixCls.value,
getTooltipContainer: getPopupContainer || getTargetContainer.value, getPopupContainer: getPopupContainer.value,
builtinPlacements: tooltipPlacements.value, builtinPlacements: tooltipPlacements.value,
visible: tempVisible, visible: tempVisible,
ref: tooltip, ref: tooltip,

4
components/transfer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -104,7 +104,7 @@ exports[`renders ./components/transfer/demo/basic.vue correctly 1`] = `
<div> <div>
<div class="ant-transfer"> <div class="ant-transfer">
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input" aria-checked="mixed"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
<!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>2/14 items</span><span class="ant-transfer-list-header-title">Source</span></span> <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>2/14 items</span><span class="ant-transfer-list-header-title">Source</span></span>
@ -310,7 +310,7 @@ exports[`renders ./components/transfer/demo/oneway.vue correctly 1`] = `
<div> <div>
<div class="ant-transfer"> <div class="ant-transfer">
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input" aria-checked="mixed"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
<!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>2/20 items</span><span class="ant-transfer-list-header-title">Source</span></span> <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>2/20 items</span><span class="ant-transfer-list-header-title">Source</span></span>

2
components/transfer/__tests__/__snapshots__/list.test.js.snap
View File

@ -2,7 +2,7 @@
exports[`List should render correctly 1`] = ` exports[`List should render correctly 1`] = `
<div class="ant-transfer-list"> <div class="ant-transfer-list">
<div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input"><span class="ant-checkbox-inner"></span></span> <div class="ant-transfer-list-header"><label class="ant-checkbox-wrapper ant-transfer-list-checkbox"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input" aria-checked="mixed"><span class="ant-checkbox-inner"></span></span>
<!----> <!---->
</label> </label>
<!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>1/3 <!----></span><span class="ant-transfer-list-header-title"><!----></span></span> <!----><span role="img" aria-label="down" tabindex="-1" class="anticon anticon-down ant-dropdown-trigger ant-transfer-list-header-dropdown"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span><span class="ant-transfer-list-header-selected"><span>1/3 <!----></span><span class="ant-transfer-list-header-title"><!----></span></span>

2
components/tree-select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -95,7 +95,7 @@ exports[`renders ./components/tree-select/demo/multiple.vue correctly 1`] = `
`; `;
exports[`renders ./components/tree-select/demo/placement.vue correctly 1`] = ` exports[`renders ./components/tree-select/demo/placement.vue correctly 1`] = `
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="topLeft"><span class="ant-radio-button-inner"></span></span><span>topLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="topRight"><span class="ant-radio-button-inner"></span></span><span>topRight</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomLeft"><span class="ant-radio-button-inner"></span></span><span>bottomLeft</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="bottomRight"><span class="ant-radio-button-inner"></span></span><span>bottomRight</span></label></div>
<br> <br>
<br> <br>
<div class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search" customslots="[object Object]"> <div class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search" customslots="[object Object]">

1
components/typography/Editable.tsx
View File

@ -103,7 +103,6 @@ const Editable = defineComponent({
function onBlur() { function onBlur() {
confirmChange(); confirmChange();
emit('end');
} }
function confirmChange() { function confirmChange() {

2
components/typography/__tests__/__snapshots__/demo.test.js.snap
View File

@ -103,7 +103,7 @@ exports[`renders ./components/typography/demo/interactive.vue correctly 1`] = `
<div role="button" tabindex="0" class="ant-typography-edit" aria-label="" style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"><span role="img" aria-label="highlight" class="anticon anticon-highlight"><svg focusable="false" class="" data-icon="highlight" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"></path></svg></span></div> <div role="button" tabindex="0" class="ant-typography-edit" aria-label="" style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-block;"><span role="img" aria-label="highlight" class="anticon anticon-highlight"><svg focusable="false" class="" data-icon="highlight" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M957.6 507.4L603.2 158.2a7.9 7.9 0 00-11.2 0L353.3 393.4a8.03 8.03 0 00-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 00-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0011.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0011.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.2H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.2l68.6-67.6 171.4 168.9-68.6 67.6zM713.1 658L450.3 399.1 597.6 254l262.8 259-147.3 145z"></path></svg></span></div>
</div> </div>
Trigger edit with:   Trigger edit with:  
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="icon"><span class="ant-radio-inner"></span></span><span>icon</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="text"><span class="ant-radio-inner"></span></span><span>text</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="both"><span class="ant-radio-inner"></span></span><span>both</span></label></div> <div class="ant-radio-group ant-radio-group-outline"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="icon"><span class="ant-radio-inner"></span></span><span>icon</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="text"><span class="ant-radio-inner"></span></span><span>text</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="both"><span class="ant-radio-inner"></span></span><span>both</span></label></div>
<div class="ant-typography">Text or icon as trigger - click to start editing. <div class="ant-typography">Text or icon as trigger - click to start editing.
<!----> <!---->
<!----> <!---->

5
components/vc-checkbox/Checkbox.tsx
View File

@ -113,9 +113,10 @@ export default defineComponent({
onKeypress, onKeypress,
onKeyup, onKeyup,
} = attrs as HTMLAttributes; } = attrs as HTMLAttributes;
const globalProps = Object.keys({ ...others, ...attrs }).reduce((prev, key) => { const othersAndAttrs = { ...others, ...attrs };
const globalProps = Object.keys(othersAndAttrs).reduce((prev, key) => {
if (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') { if (key.startsWith('data-') || key.startsWith('aria-') || key === 'role') {
prev[key] = others[key]; prev[key] = othersAndAttrs[key];
} }
return prev; return prev;
}, {}); }, {});

30
components/vc-image/src/Preview.tsx
View File

@ -15,6 +15,7 @@ import Dialog from '../../vc-dialog';
import { type IDialogChildProps, dialogPropTypes } from '../../vc-dialog/IDialogPropTypes'; import { type IDialogChildProps, dialogPropTypes } from '../../vc-dialog/IDialogPropTypes';
import { getOffset } from '../../vc-util/Dom/css'; import { getOffset } from '../../vc-util/Dom/css';
import addEventListener from '../../vc-util/Dom/addEventListener'; import addEventListener from '../../vc-util/Dom/addEventListener';
import KeyCode from '../../_util/KeyCode';
import { warning } from '../../vc-util/warning'; import { warning } from '../../vc-util/warning';
import useFrameSetState from './hooks/useFrameSetState'; import useFrameSetState from './hooks/useFrameSetState';
import getFixScaleEleTransPosition from './getFixScaleEleTransPosition'; import getFixScaleEleTransPosition from './getFixScaleEleTransPosition';
@ -221,6 +222,32 @@ const Preview = defineComponent({
lastWheelZoomDirection.value = { wheelDirection }; lastWheelZoomDirection.value = { wheelDirection };
}; };
const onKeyDown = (event: KeyboardEvent) => {
if (!props.visible || !showLeftOrRightSwitches.value) return;
event.preventDefault();
if (event.keyCode === KeyCode.LEFT) {
if (currentPreviewIndex.value > 0) {
setCurrent(previewUrlsKeys.value[currentPreviewIndex.value - 1]);
}
} else if (event.keyCode === KeyCode.RIGHT) {
if (currentPreviewIndex.value < previewGroupCount.value - 1) {
setCurrent(previewUrlsKeys.value[currentPreviewIndex.value + 1]);
}
}
};
const onDoubleClick = () => {
if (props.visible) {
if (scale.value !== 1) {
scale.value = 1;
}
if (position.x !== initialPosition.x || position.y !== initialPosition.y) {
setPosition(initialPosition);
}
}
};
let removeListeners = () => {}; let removeListeners = () => {};
onMounted(() => { onMounted(() => {
watch( watch(
@ -235,6 +262,7 @@ const Preview = defineComponent({
const onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, { const onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, {
passive: false, passive: false,
}); });
const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false);
try { try {
// Resolve if in iframe lost event // Resolve if in iframe lost event
@ -257,6 +285,7 @@ const Preview = defineComponent({
onMouseUpListener.remove(); onMouseUpListener.remove();
onMouseMoveListener.remove(); onMouseMoveListener.remove();
onScrollWheelListener.remove(); onScrollWheelListener.remove();
onKeyDownListener.remove();
/* istanbul ignore next */ /* istanbul ignore next */
if (onTopMouseUpListener) onTopMouseUpListener.remove(); if (onTopMouseUpListener) onTopMouseUpListener.remove();
@ -310,6 +339,7 @@ const Preview = defineComponent({
> >
<img <img
onMousedown={onMouseDown} onMousedown={onMouseDown}
onDblclick={onDoubleClick}
ref={imgRef} ref={imgRef}
class={`${props.prefixCls}-img`} class={`${props.prefixCls}-img`}
src={combinationSrc.value} src={combinationSrc.value}

4
components/vc-picker/Picker.tsx
View File

@ -187,6 +187,10 @@ function Picker<DateType>() {
'showToday', 'showToday',
'renderExtraFooter', 'renderExtraFooter',
'dateRender', 'dateRender',
'minuteStep',
'hourStep',
'secondStep',
'hideDisabledOptions',
] as any, ] as any,
// slots: [ // slots: [
// 'suffixIcon', // 'suffixIcon',

11
components/vc-picker/RangePicker.tsx
View File

@ -232,6 +232,11 @@ function RangerPicker<DateType>() {
'direction', 'direction',
'activePickerIndex', 'activePickerIndex',
'autocomplete', 'autocomplete',
'minuteStep',
'hourStep',
'secondStep',
'hideDisabledOptions',
'disabledMinutes',
] as any, ] as any,
setup(props, { attrs, expose }) { setup(props, { attrs, expose }) {
const needConfirmButton = computed( const needConfirmButton = computed(
@ -986,7 +991,6 @@ function RangerPicker<DateType>() {
) { ) {
// Arrow offset // Arrow offset
arrowLeft = startInputDivRef.value.offsetWidth + separatorRef.value.offsetWidth; arrowLeft = startInputDivRef.value.offsetWidth + separatorRef.value.offsetWidth;
if ( if (
panelDivRef.value.offsetWidth && panelDivRef.value.offsetWidth &&
arrowRef.value.offsetWidth && arrowRef.value.offsetWidth &&
@ -1001,7 +1005,8 @@ function RangerPicker<DateType>() {
} }
} }
const arrowPositionStyle = direction === 'rtl' ? { right: arrowLeft } : { left: arrowLeft }; const arrowPositionStyle =
direction === 'rtl' ? { right: `${arrowLeft}px` } : { left: `${arrowLeft}px` };
function renderPanels() { function renderPanels() {
let panels: VueNode; let panels: VueNode;
@ -1092,7 +1097,7 @@ function RangerPicker<DateType>() {
return ( return (
<div <div
class={`${prefixCls}-panel-container`} class={`${prefixCls}-panel-container`}
style={{ marginLeft: panelLeft }} style={{ marginLeft: `${panelLeft}px` }}
ref={panelDivRef} ref={panelDivRef}
onMousedown={e => { onMousedown={e => {
e.preventDefault(); e.preventDefault();

16
components/vc-picker/hooks/usePickerInput.ts
View File

@ -1,5 +1,5 @@
import type { ComputedRef, HTMLAttributes, Ref } from 'vue'; import type { ComputedRef, HTMLAttributes, Ref } from 'vue';
import { onBeforeUnmount, watchEffect, watch, ref, computed } from 'vue'; import { onBeforeUnmount, onMounted, watch, ref, computed } from 'vue';
import type { FocusEventHandler } from '../../_util/EventInterface'; import type { FocusEventHandler } from '../../_util/EventInterface';
import KeyCode from '../../_util/KeyCode'; import KeyCode from '../../_util/KeyCode';
import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil'; import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil';
@ -148,14 +148,11 @@ export default function usePickerInput({
}); });
const globalMousedownEvent = ref(); const globalMousedownEvent = ref();
// Global click handler // Global click handler
watchEffect( onMounted(() => {
() => globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
globalMousedownEvent.value &&
globalMousedownEvent.value()(
(globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
const target = getTargetFromEvent(e); const target = getTargetFromEvent(e);
if (open) { if (open.value) {
const clickedOutside = isClickOutside(target); const clickedOutside = isClickOutside(target);
if (!clickedOutside) { if (!clickedOutside) {
@ -169,9 +166,8 @@ export default function usePickerInput({
triggerOpen(false); triggerOpen(false);
} }
} }
})), });
), });
);
onBeforeUnmount(() => { onBeforeUnmount(() => {
globalMousedownEvent.value && globalMousedownEvent.value(); globalMousedownEvent.value && globalMousedownEvent.value();
}); });

1
components/vc-picker/panels/TimePanel/TimeBody.tsx
View File

@ -205,7 +205,6 @@ const TimeBody = defineComponent({
hideDisabledOptions, hideDisabledOptions,
onSelect, onSelect,
} = props; } = props;
const columns: { const columns: {
node: VueNode; node: VueNode;
value: number; value: number;

2
components/vc-steps/Steps.tsx
View File

@ -31,7 +31,7 @@ export default defineComponent({
labelPlacement: PropTypes.string.def('horizontal'), labelPlacement: PropTypes.string.def('horizontal'),
status: PropTypes.string.def('process'), status: PropTypes.string.def('process'),
size: PropTypes.string.def(''), size: PropTypes.string.def(''),
progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(false), progressDot: PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func]).def(undefined),
initial: PropTypes.number.def(0), initial: PropTypes.number.def(0),
current: PropTypes.number.def(0), current: PropTypes.number.def(0),
icons: PropTypes.shape({ icons: PropTypes.shape({

4
components/vc-table/Table.tsx
View File

@ -177,6 +177,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
'expandIcon', 'expandIcon',
'onExpand', 'onExpand',
'onExpandedRowsChange', 'onExpandedRowsChange',
'onUpdate:expandedRowKeys',
'defaultExpandAllRows', 'defaultExpandAllRows',
'indentSize', 'indentSize',
'expandIconColumnIndex', 'expandIconColumnIndex',
@ -192,7 +193,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
'transformCellText', 'transformCellText',
] as any, ] as any,
slots: ['title', 'footer', 'summary', 'emptyText'], slots: ['title', 'footer', 'summary', 'emptyText'],
emits: ['expand', 'expandedRowsChange', 'updateInternalRefs'], emits: ['expand', 'expandedRowsChange', 'updateInternalRefs', 'update:expandedRowKeys'],
setup(props, { attrs, slots, emit }) { setup(props, { attrs, slots, emit }) {
const mergedData = computed(() => props.data || EMPTY_DATA); const mergedData = computed(() => props.data || EMPTY_DATA);
const hasData = computed(() => !!mergedData.value.length); const hasData = computed(() => !!mergedData.value.length);
@ -289,6 +290,7 @@ export default defineComponent<TableProps<DefaultRecordType>>({
innerExpandedKeys.value = newExpandedKeys; innerExpandedKeys.value = newExpandedKeys;
emit('expand', !hasKey, record); emit('expand', !hasKey, record);
emit('update:expandedRowKeys', newExpandedKeys);
emit('expandedRowsChange', newExpandedKeys); emit('expandedRowsChange', newExpandedKeys);
}; };

4
components/vc-tooltip/src/Tooltip.tsx
View File

@ -22,7 +22,7 @@ export default defineComponent({
prefixCls: PropTypes.string.def('rc-tooltip'), prefixCls: PropTypes.string.def('rc-tooltip'),
mouseEnterDelay: PropTypes.number.def(0.1), mouseEnterDelay: PropTypes.number.def(0.1),
mouseLeaveDelay: PropTypes.number.def(0.1), mouseLeaveDelay: PropTypes.number.def(0.1),
getTooltipContainer: Function, getPopupContainer: Function as PropType<(triggerNode?: HTMLElement) => HTMLElement>,
destroyTooltipOnHide: { type: Boolean, default: false }, destroyTooltipOnHide: { type: Boolean, default: false },
align: PropTypes.object.def(() => ({})), align: PropTypes.object.def(() => ({})),
arrowContent: PropTypes.any.def(null), arrowContent: PropTypes.any.def(null),
@ -94,7 +94,6 @@ export default defineComponent({
align, align,
destroyTooltipOnHide, destroyTooltipOnHide,
defaultVisible, defaultVisible,
getTooltipContainer,
...restProps ...restProps
} = props; } = props;
const extraProps = { ...restProps }; const extraProps = { ...restProps };
@ -109,7 +108,6 @@ export default defineComponent({
builtinPlacements: placements, builtinPlacements: placements,
popupPlacement: placement, popupPlacement: placement,
popupAlign: align, popupAlign: align,
getPopupContainer: getTooltipContainer,
afterPopupVisibleChange: afterVisibleChange, afterPopupVisibleChange: afterVisibleChange,
popupTransitionName: transitionName, popupTransitionName: transitionName,
popupAnimation: animation, popupAnimation: animation,

3
components/vc-trigger/Trigger.tsx
View File

@ -390,7 +390,8 @@ export default defineComponent({
getRootDomNode() { getRootDomNode() {
const { getTriggerDOMNode } = this.$props; const { getTriggerDOMNode } = this.$props;
if (getTriggerDOMNode) { if (getTriggerDOMNode) {
return getTriggerDOMNode(this.triggerRef); const domNode = findDOMNode(this.triggerRef);
return findDOMNode(getTriggerDOMNode(domNode));
} }
try { try {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ant-design-vue", "name": "ant-design-vue",
"version": "3.2.4", "version": "3.3.0-beta.1",
"title": "Ant Design Vue", "title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation", "description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [ "keywords": [

8
plugin/md/markdown/plugins/link.ts
View File

@ -45,10 +45,10 @@ export const linkPlugin = (md: MarkdownIt, externalAttrs: Record<string, string>
if (cleanUrl.endsWith('.md')) { if (cleanUrl.endsWith('.md')) {
cleanUrl = cleanUrl.replace(/\.md$/, '.html'); cleanUrl = cleanUrl.replace(/\.md$/, '.html');
} }
// ./foo -> ./foo.html // // ./foo -> ./foo.html
if (!cleanUrl.endsWith('.html') && !cleanUrl.endsWith('/')) { // if (!cleanUrl.endsWith('.html') && !cleanUrl.endsWith('/')) {
cleanUrl += '.html'; // cleanUrl += '.html';
} // }
const parsed = new URL(url, 'http://a.com'); const parsed = new URL(url, 'http://a.com');
url = cleanUrl + parsed.search + parsed.hash; url = cleanUrl + parsed.search + parsed.hash;
} }

2
site/src/theme/static/footer.less
View File

@ -7,7 +7,7 @@
font-size: 14px; font-size: 14px;
background-color: #000; background-color: #000;
position: relative; position: relative;
z-index: 100; z-index: 8;
margin-left: -1px; margin-left: -1px;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);

10
site/src/vueDocs/migration-v3.en-US.md
View File

@ -28,7 +28,7 @@ The 2.x version is a compatible version developed for compatibility with Vue 3.
- Deprecated `replaceFields`, use `fieldNames` instead. - Deprecated `replaceFields`, use `fieldNames` instead.
- `Table` - `Table`
- Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom). - Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon`. - Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon`.
#### Component refactoring #### Component refactoring
@ -49,7 +49,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
- `Table` - `Table`
- Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom). - Removed the `rowSelection.hideDefaultSelections` property of Table, please use `SELECTION_ALL` and `SELECTION_INVERT` in `rowSelection.selections` instead, [custom options](/components/table/#components-table-demo- row-selection-custom).
- Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts. - Removed Column slots and replaced them with `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` to improve ease of use , To avoid slot configuration expansion, but also to avoid the problem of slot conflicts.
- Added expandFixed to control whether the expanded icon is fixed. - Added expandFixed to control whether the expanded icon is fixed.
- Added the showSorterTooltip header whether to display the tooltip for the next sort. - Added the showSorterTooltip header whether to display the tooltip for the next sort.
- Added sticky for setting sticky head and scroll bar. - Added sticky for setting sticky head and scroll bar.
@ -72,7 +72,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages: You can reference [Customized Form Controls](#components-form-demo-customized-form-controls), but it also has some disadvantages:
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` and call the corresponding method. 1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` and call the corresponding method.
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example: 2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion. For example:
@ -94,7 +94,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
</a-form-item> </a-form-item>
``` ```
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component, It is equivalent to merging multiple form items into one. The second way is to wrap it with a custom component and call `useInjectFormItemContext` in the custom component, It is equivalent to merging multiple form items into one.
```html ```html
<script> <script>
@ -103,7 +103,7 @@ Major updates after the 3.0 version refactoring include `Tree` `TreeSelect` `Dat
export default { export default {
name: 'custom-name', name: 'custom-name',
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>

10
site/src/vueDocs/migration-v3.zh-CN.md
View File

@ -29,7 +29,7 @@
- 废弃 `replaceFields` , 使用 `fieldNames` 替换。 - 废弃 `replaceFields` , 使用 `fieldNames` 替换。
- `Table` - `Table`
- 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性，请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代，[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。 - 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性，请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代，[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。
- 移除了 Column slots，分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换。 - 移除了 Column slots，分别使用 `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换。
#### 组件重构 #### 组件重构
@ -50,7 +50,7 @@
- `Table` - `Table`
- 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性，请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代，[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。 - 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性，请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代，[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。
- 移除了 Column slots，分别使用 `v-slot:headerCell` `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换，提升易用性，避免插槽配置膨胀，同时也避免了插槽冲突问题。 - 移除了 Column slots，分别使用 `v-slot:headerCell` `v-slot:bodyCell` `v-slot:customFilterDropdown` `v-slot:customFilterIcon` 替换，提升易用性，避免插槽配置膨胀，同时也避免了插槽冲突问题。
- 新增 expandFixed 控制展开图标是否固定。 - 新增 expandFixed 控制展开图标是否固定。
- 新增 showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。 - 新增 showSorterTooltip 表头是否显示下一次排序的 tooltip 提示。
- 新增 sticky 用于设置粘性头部和滚动条。 - 新增 sticky 用于设置粘性头部和滚动条。
@ -71,7 +71,7 @@
- 自 3.0 版本以后，Form.Item 不再劫持子元素，而是通过 provider / inject 依赖注入的方式进行自动校验，这种方式可以提高组件性能，子元素也不会限制个数，同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)，但它同样会有一些缺点： - 自 3.0 版本以后，Form.Item 不再劫持子元素，而是通过 provider / inject 依赖注入的方式进行自动校验，这种方式可以提高组件性能，子元素也不会限制个数，同样子元素也可以是进一步封装的高级组件。你可以参考[自定义表单控件示例](#components-form-demo-customized-form-controls)，但它同样会有一些缺点：
1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useFormItemContext()` 注入，并调用相应的方法。 1、自定义组件如果希望 Form.Item 进行校验展示，你需要 `const {id, onFieldChange, onFieldBlur} = useInjectFormItemContext()` 注入，并调用相应的方法。
2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱。例如： 2、一个 Form.Item 只能收集一个表单项的数据，如果有多个表单项，会导致收集错乱。例如：
@ -93,7 +93,7 @@
</a-form-item> </a-form-item>
``` ```
第二种，使用自定义组件包裹，并在自定义组件中调用 `useFormItemContext`，相当于把多个表单项合并成了一个。 第二种，使用自定义组件包裹，并在自定义组件中调用 `useInjectFormItemContext`，相当于把多个表单项合并成了一个。
```html ```html
<script> <script>
@ -101,7 +101,7 @@
import { Form } from 'ant-design-vue'; import { Form } from 'ant-design-vue';
export default { export default {
setup() { setup() {
const formItemContext = Form.useFormItemContext(); const formItemContext = Form.useInjectFormItemContext();
}, },
}; };
</script> </script>