Merge remote-tracking branch 'origin/next' into v3

Author: tangjinzhou

CHANGELOG.en-US.md

@@ -10,6 +10,14 @@
 
 ---
 
+## 2.2.0-beta.2
+
+`2021-06-08`
+
+- 🐞 Fix PageHeader display extension problem [4de73](https://github.com/vueComponent/ant-design-vue/commit/4de7737907d485d3dd3be44b70e599cc53edb171)
+- 🐞 Fix the problem that some components cannot be rendered normally under Vue3.1[#4173](https://github.com/vueComponent/ant-design-vue/issues/4173)
+- 🐞 Fix Menu.Divider name error problem [6c5c84](https://github.com/vueComponent/ant-design-vue/commit/6c5c84a3fc4b8abcd7aed0922852a64e0ac293c7)
+
 ## 2.2.0-beta.1
 
 `2021-06-17`

CHANGELOG.zh-CN.md

@@ -10,9 +10,17 @@
 
 ---
 
+## 2.2.0-beta.2
+
+`2021-06-08`
+
+- 🐞 修复 PageHeader 显示多余字符问题 [4de773](https://github.com/vueComponent/ant-design-vue/commit/4de7737907d485d3dd3be44b70e599cc53edb171)
+- 🐞 修复部分组件不能在 Vue3.1 下不能正常渲染问题 [#4173](https://github.com/vueComponent/ant-design-vue/issues/4173)
+- 🐞 修复 Menu.Divider 名称错误问题 [6c5c84](https://github.com/vueComponent/ant-design-vue/commit/6c5c84a3fc4b8abcd7aed0922852a64e0ac293c7)
+
 ## 2.2.0-beta.1
 
-`2021-06-17`
+`2021-06-07`
 
 - 🔥🔥🔥 虚拟 Table 独立库发布 https://www.npmjs.com/package/@surely-vue/table , 该组件是一个独立的库，目前文档示例尚未完善，他是一个完全 ts 开发的组件，有较好的类型提示，npm 上已有 API 文档，着急使用的的可以摸索着用起来了，这里有个在线体验示例，https://store.antdv.com/pro/preview/list/big-table-list
 - 🔥🔥🔥 重构大量组件，源码更加易读，性能更优，ts 类型更加全面

components/auto-complete/index.tsx

@@ -42,7 +42,7 @@ const AutoComplete = defineComponent({
   OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
   setup(props, { slots }) {
     warning(
-      !('dataSource' in props || 'dataSource' in slots),
+      !(props.dataSource !== undefined || 'dataSource' in slots),
       'AutoComplete',
       '`dataSource` is deprecated, please use `options` instead.',
     );

components/form/Form.tsx

@@ -96,7 +96,7 @@ const Form = defineComponent({
   }),
   Item: FormItem,
   emits: ['finishFailed', 'submit', 'finish'],
-  setup(props, { emit, slots, expose }) {
+  setup(props, { emit, slots, expose, attrs }) {
     const size = useInjectSize(props);
     const { prefixCls, direction, form: contextForm } = useConfigInject('form', props);
     const requiredMark = computed(() => props.requiredMark === '' || props.requiredMark);
@@ -339,7 +339,7 @@ const Form = defineComponent({
 
     return () => {
       return (
-        <form onSubmit={handleSubmit} class={formClassName.value}>
+        <form {...attrs} onSubmit={handleSubmit} class={[formClassName.value, attrs.class]}>
           {slots.default?.()}
         </form>
       );

components/layout/layout.tsx

@@ -27,9 +27,9 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
         const { prefixCls } = useConfigInject(suffixCls, props);
         return () => {
           const basicComponentProps = {
+            ...props,
             prefixCls: prefixCls.value,
             tagName,
-            ...props,
           };
           return <BasicComponent {...basicComponentProps}>{slots.default?.()}</BasicComponent>;
         };

components/menu/src/Divider.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'Divider',
+  name: 'AMenuDivider',
   props: {
     prefixCls: String,
   },

components/menu/src/Menu.tsx

@@ -123,7 +123,7 @@ export default defineComponent({
       { immediate: true },
     );
     watchEffect(() => {
-      if ('activeKey' in props) {
+      if (props.activeKey !== undefined) {
         let keys = [];
         const menuInfo = props.activeKey
           ? (keyMapStore.value[props.activeKey] as UnwrapRef<StoreMenuInfo>)
@@ -194,7 +194,7 @@ export default defineComponent({
         selectedKeys: newSelectedKeys,
       };
       if (!shallowEqual(newSelectedKeys, mergedSelectedKeys.value)) {
-        if (!('selectedKeys' in props)) {
+        if (props.selectedKeys === undefined) {
           mergedSelectedKeys.value = newSelectedKeys;
         }
         emit('update:selectedKeys', newSelectedKeys);
@@ -223,11 +223,10 @@ export default defineComponent({
     );
 
     const changeActiveKeys = (keys: Key[]) => {
-      if ('activeKey' in props) {
-        emit('update:activeKey', keys[keys.length - 1]);
-      } else {
+      if (props.activeKey === undefined) {
         activeKeys.value = keys;
       }
+      emit('update:activeKey', keys[keys.length - 1]);
     };
     const disabled = computed(() => !!props.disabled);
     const isRtl = computed(() => direction.value === 'rtl');

components/page-header/index.tsx

@@ -145,7 +145,7 @@ const PageHeader = defineComponent({
           <div class={className}>
             {renderBreadcrumb()}
             {renderTitle()}
-            {children.length && renderChildren(children)}
+            {children.length ? renderChildren(children) : null}
             {renderFooter()}
           </div>
         </ResizeObserver>

components/switch/index.tsx

@@ -7,6 +7,7 @@ import {
   computed,
   onMounted,
   nextTick,
+  watch,
 } from 'vue';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import PropTypes from '../_util/vue-types';
@@ -27,7 +28,6 @@ const switchProps = {
   checkedChildren: PropTypes.any,
   unCheckedChildren: PropTypes.any,
   tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  defaultChecked: PropTypes.looseBool,
   autofocus: PropTypes.looseBool,
   loading: PropTypes.looseBool,
   checked: PropTypes.looseBool,
@@ -59,6 +59,14 @@ const Switch = defineComponent({
         '`value` is not validate prop, do you mean `checked`?',
       );
     });
+    const checked = ref(props.checked !== undefined ? !!props.checked : !!attrs.defaultChecked);
+
+    watch(
+      () => props.checked,
+      () => {
+        checked.value = !!props.checked;
+      },
+    );
 
     const configProvider = inject('configProvider', defaultConfigProvider);
     const { getPrefixCls } = configProvider;
@@ -75,9 +83,6 @@ const Switch = defineComponent({
     const prefixCls = computed(() => {
       return getPrefixCls('switch', props.prefixCls);
     });
-    const checked = computed(() => {
-      return 'checked' in props ? !!props.checked : !!props.defaultChecked;
-    });
 
     onMounted(() => {
       nextTick(() => {
@@ -91,6 +96,9 @@ const Switch = defineComponent({
       if (props.disabled) {
         return;
       }
+      if (props.checked === undefined) {
+        checked.value = check;
+      }
       emit('update:checked', check);
       emit('change', check, e);
     };

components/tag/index.tsx

@@ -44,6 +44,7 @@ export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<typeof tagProps
 
 const Tag = defineComponent({
   name: 'ATag',
+  props: tagProps,
   emits: ['update:visible', 'close'],
   setup(props: TagProps, { slots, emit, attrs }) {
     const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
@@ -137,8 +138,6 @@ const Tag = defineComponent({
   },
 });
 
-Tag.props = tagProps;
-
 Tag.CheckableTag = CheckableTag;
 
 Tag.install = function(app: App) {