refactor: Anchor、Alert、Avatar、Badge、BackTop、Col、Form、Layout、Menu、Space、Spin、Switch、Row、Result、Rate (#4171)

* chore: remove  resize-observer-polyfill

* refactor: align

* refactor(v3/avatar): refactor using composition api  (#4052)

* refactor(avatar): refactor using composition api

* refactor: update props define

* fix: avatar src scale not update

* refactor: resizeObserver

* refactor: divider

* refactor: localeProvider

* refactor(v3/back-top): use composition api (#4060)

* refactor: backtop

* refactor: empty

* refactor: transButton

* feat(v3/avatar): add avatar group (#4062)

* feat(avatar): add avatar group

* refactor: update

* refactor: update

Co-authored-by: tangjinzhou <415800467@qq.com>

* refactor: avatar

* refactor: avatar

* style: rename useProvide

* refactor:  menu (#4110)

* fix: menu

* refactor: menu

* refactor: remove rc-menu

* fix: menu rtl error

* style: lint

* refactor(Anchor): use composition api (#4054)

* refactor: anchor

* refactor: anchor

* refactor: anchor

* feat: update

* fix: icon class lose

* refactor(v3/badge): use composition api (#4076)

* refactor: badge

* fix: badge inheritAttrs

* refactor: grid

* refactor: layout

* fix: menu not close

* refactor: space

* refactor: result

* refactor: affix

* refactor: comment

* refactor: form

* feat: spin add rtl

* feat: export spin type

* refactor: pageHeader

* refactor: page-header

* refactor: skeleton

* refactor: typography

* refactor(v3/rate): use composition api

* fix: add useRef hook

* refactor: form

* fix: menu not update

* refactor: form

* refactor: form

* fix: slide animate not work

* fix: menu mode error

* fix: menu icon

* refactor: rate

* perf: remove rate

* feat: add vc-overflow

* refactor: menu

* fix: remove flex check (#4165)

* fix: dist locale file lose #3684

* release 2.2.0-beta.1

* dcos: update changelog

* chore: update type

* docs: update changelog

Co-authored-by: John <John60676@qq.com>
Co-authored-by: 言肆 <18x@loacg.com>
Co-authored-by: zkwolf <chenhao5866@gmail.com>

Author: 4 people

CHANGELOG.en-US.md

@@ -10,6 +10,37 @@
 
 ---
 
+## 2.2.0-beta.1
+
+`2021-06-17`
+
+- 🔥🔥🔥 Virtual Table independent library released https://www.npmjs.com/package/@surely-vue/table, this component is an independent library, the document example is not yet complete, it is a completely ts-developed component , There are good type hints, there are API documents on npm, those who are in a hurry can explore and use it, here is an online experience example, https://store.antdv.com/pro/preview/list/big- table-list
+- 🔥🔥🔥 Refactored a large number of components, the source code is more readable, the performance is better, and the ts type is more comprehensive -Refactored components in this version Anchor, Alert, Avatar, Badge, BackTop, Col, Form, Layout, Menu, Space, Spin, Switch, Row, Result, Rate
+- 🎉 Menu
+
+  - Better performance [#3300](https://github.com/vueComponent/ant-design-vue/issues/3300)
+  - Fix the problem of incorrect highlighting [#4053](https://github.com/vueComponent/ant-design-vue/issues/4053)
+  - Fix console invalid warning [#4169](https://github.com/vueComponent/ant-design-vue/issues/4169)
+  - Easier to use, simpler to use single file recursion [#4133](https://github.com/vueComponent/ant-design-vue/issues/4133)
+  - 💄 icon icon needs to be passed through slot
+
+- Skeleton
+
+  - 🌟 Support Skeleton.Avatar placeholder component.
+  - 🌟 Support Skeleton.Button placeholder component.
+  - 🌟 Support Skeleton.Input placeholder component.
+
+- 💄 Destructive update
+
+  - The `a-menu-item` and `a-sub-menu` icons need to be passed through the slot, and the icon is not automatically obtained through the sub-node
+  - row gutter supports row-wrap, no need to use multiple rows to divide col
+  - `Menu` removes `defaultOpenKeys` and `defaultSelectedKeys`; `Switch` removes `defaultChecked`; `Rate` removes `defaultValue`; Please be cautious to use the defaultXxx-named attributes of other unrefactored components, and they will be removed in future versions.
+
+- 🌟 Added Avatar.Group component
+- 🐞 Fix AutoComplete filterOptions not taking effect [#4170](https://github.com/vueComponent/ant-design-vue/issues/4170)
+- 🐞 Fix Select automatic width invalidation problem [#4118](https://github.com/vueComponent/ant-design-vue/issues/4118)
+- 🐞 Fix the lack of internationalized files in dist [#3684](https://github.com/vueComponent/ant-design-vue/issues/3684)
+
 ## 2.1.6
 
 `2021-05-13`

CHANGELOG.zh-CN.md

@@ -10,6 +10,38 @@
 
 ---
 
+## 2.2.0-beta.1
+
+`2021-06-17`
+
+- 🔥🔥🔥 虚拟 Table 独立库发布 https://www.npmjs.com/package/@surely-vue/table , 该组件是一个独立的库，目前文档示例尚未完善，他是一个完全 ts 开发的组件，有较好的类型提示，npm 上已有 API 文档，着急使用的的可以摸索着用起来了，这里有个在线体验示例，https://store.antdv.com/pro/preview/list/big-table-list
+- 🔥🔥🔥 重构大量组件，源码更加易读，性能更优，ts 类型更加全面
+  - 本版本重构组件 Anchor、Alert、Avatar、Badge、BackTop、Col、Form、Layout、Menu、Space、Spin、Switch、Row、Result、Rate
+- 🎉 Menu
+
+  - 性能更优 [#3300](https://github.com/vueComponent/ant-design-vue/issues/3300)
+  - 修复高亮不正确问题 [#4053](https://github.com/vueComponent/ant-design-vue/issues/4053)
+  - 修复控制台无效 warning [#4169](https://github.com/vueComponent/ant-design-vue/issues/4169)
+  - 更加易用，更加简单的使用单文件递归 [#4133](https://github.com/vueComponent/ant-design-vue/issues/4133)
+  - 💄 图标 icon 需要通过 slot 传递
+
+- Skeleton
+
+  - 🌟 支持 Skeleton.Avatar 占位组件。
+  - 🌟 支持 Skeleton.Button 占位组件。
+  - 🌟 支持 Skeleton.Input 占位组件。
+
+- 💄 破坏性更新
+
+  - `a-menu-item`、`a-sub-menu` 图标需要通过 slot 传递，不在通过子节点自动获取图标
+  - row gutter 支持 row-wrap， 无需使用多个 row 划分 col
+  - Menu 移除 defaultOpenKeys、defaultSelectedKeys; Switch 移除 defaultChecked; Rate 移除 defaultValue; 其它未重构组件的 defaultXxx 命名的属性请谨慎使用，在未来的版本中也会被移除。
+
+- 🌟 新增 Avatar.Group 组件
+- 🐞 修复 AutoComplete filterOptions 不生效问题 [#4170](https://github.com/vueComponent/ant-design-vue/issues/4170)
+- 🐞 修复 Select 自动宽度失效问题 [#4118](https://github.com/vueComponent/ant-design-vue/issues/4118)
+- 🐞 修复 dist 缺少国际化文件问题 [#3684](https://github.com/vueComponent/ant-design-vue/issues/3684)
+
 ## 2.1.6
 
 `2021-05-13`

antd-tools/gulpfile.js

@@ -294,7 +294,7 @@ gulp.task(
 
 function publish(tagString, done) {
   let args = ['publish', '--with-antd-tools'];
-  args = args.concat(['--tag', 'next']);
+  // args = args.concat(['--tag', 'next']);
   if (tagString) {
     args = args.concat(['--tag', tagString]);
   }

components/_util/canUseDom.ts

@@ -0,0 +1,5 @@
+function canUseDom() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+
+export default canUseDom;

components/_util/getScroll.js

@@ -0,0 +1,27 @@
+export function isWindow(obj: any) {
+  return obj !== null && obj !== undefined && obj === obj.window;
+}
+
+export default function getScroll(
+  target: HTMLElement | Window | Document | null,
+  top: boolean,
+): number {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  const method = top ? 'scrollTop' : 'scrollLeft';
+  let result = 0;
+  if (isWindow(target)) {
+    result = (target as Window)[top ? 'pageYOffset' : 'pageXOffset'];
+  } else if (target instanceof Document) {
+    result = target.documentElement[method];
+  } else if (target) {
+    result = (target as HTMLElement)[method];
+  }
+  if (target && !isWindow(target) && typeof result !== 'number') {
+    result = ((target as HTMLElement).ownerDocument || (target as Document)).documentElement?.[
+      method
+    ];
+  }
+  return result;
+}

components/_util/getScroll.ts

@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted, Ref, ref } from 'vue';
+import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
+
+function useBreakpoint(): Ref<ScreenMap> {
+  const screens = ref<ScreenMap>({});
+  let token = null;
+
+  onMounted(() => {
+    token = ResponsiveObserve.subscribe(supportScreens => {
+      screens.value = supportScreens;
+    });
+  });
+
+  onUnmounted(() => {
+    ResponsiveObserve.unsubscribe(token);
+  });
+
+  return screens;
+}
+
+export default useBreakpoint;

components/_util/hooks/useBreakpoint.ts

@@ -1,8 +1,46 @@
-import { computed, inject } from 'vue';
-import { defaultConfigProvider } from '../../config-provider';
+import { RequiredMark } from '../../form/Form';
+import { computed, ComputedRef, inject, UnwrapRef } from 'vue';
+import {
+  ConfigProviderProps,
+  defaultConfigProvider,
+  Direction,
+  SizeType,
+} from '../../config-provider';
 
-export default (name: string, props: Record<any, any>) => {
-  const configProvider = inject('configProvider', defaultConfigProvider);
+export default (
+  name: string,
+  props: Record<any, any>,
+): {
+  configProvider: UnwrapRef<ConfigProviderProps>;
+  prefixCls: ComputedRef<string>;
+  direction: ComputedRef<Direction>;
+  size: ComputedRef<SizeType>;
+  getTargetContainer: ComputedRef<() => HTMLElement>;
+  space: ComputedRef<{ size: SizeType | number }>;
+  pageHeader: ComputedRef<{ ghost: boolean }>;
+  form?: ComputedRef<{
+    requiredMark?: RequiredMark;
+  }>;
+} => {
+  const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
+    'configProvider',
+    defaultConfigProvider,
+  );
   const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
-  return { configProvider, prefixCls };
+  const direction = computed(() => configProvider.direction);
+  const space = computed(() => configProvider.space);
+  const pageHeader = computed(() => configProvider.pageHeader);
+  const form = computed(() => configProvider.form);
+  const size = computed(() => props.size || configProvider.componentSize);
+  const getTargetContainer = computed(() => props.getTargetContainer);
+  return {
+    configProvider,
+    prefixCls,
+    direction,
+    size,
+    getTargetContainer,
+    space,
+    pageHeader,
+    form,
+  };
 };

components/_util/hooks/useConfigInject.ts

@@ -0,0 +1,11 @@
+import { onMounted, ref } from 'vue';
+import { detectFlexGapSupported } from '../styleChecker';
+
+export default () => {
+  const flexible = ref(false);
+  onMounted(() => {
+    flexible.value = detectFlexGapSupported();
+  });
+
+  return flexible;
+};

components/_util/hooks/useFlexGapSupport.ts

@@ -0,0 +1,8 @@
+import { computed, ComputedRef, inject } from 'vue';
+import { defaultConfigProvider } from '../../config-provider';
+
+export default (name: string, props: Record<any, any>): ComputedRef<string> => {
+  const configProvider = inject('configProvider', defaultConfigProvider);
+  const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
+  return prefixCls;
+};