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

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.ts

@@ -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/hooks/useBreakpoint.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/useConfigInject.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/useFlexGapSupport.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/usePrefixCls.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;
+};

components/_util/hooks/useRef.ts

@@ -0,0 +1,14 @@
+import { onBeforeUpdate, ref, Ref } from 'vue';
+
+export type UseRef = [(el: any, key: string | number) => void, Ref<any>];
+
+export const useRef = (): UseRef => {
+  const refs = ref<any>({});
+  const setRef = (el: any, key: string | number) => {
+    refs.value[key] = el;
+  };
+  onBeforeUpdate(() => {
+    refs.value = {};
+  });
+  return [setRef, refs];
+};

components/_util/hooks/useSize.ts

@@ -0,0 +1,28 @@
+import { computed, ComputedRef, inject, provide, UnwrapRef } from 'vue';
+import { ConfigProviderProps, defaultConfigProvider, SizeType } from '../../config-provider';
+
+const sizeProvider = Symbol('SizeProvider');
+
+const useProvideSize = <T = SizeType>(props: Record<any, any>): ComputedRef<T> => {
+  const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
+    'configProvider',
+    defaultConfigProvider,
+  );
+  const size = computed<T>(() => props.size || configProvider.componentSize);
+  provide(sizeProvider, size);
+  return size;
+};
+
+const useInjectSize = <T = SizeType>(props?: Record<any, any>): ComputedRef<T> => {
+  const size: ComputedRef<T> = props
+    ? computed(() => props.size)
+    : inject(
+        sizeProvider,
+        computed(() => ('default' as unknown) as T),
+      );
+  return size;
+};
+
+export { useInjectSize, sizeProvider, useProvideSize };
+
+export default useProvideSize;

components/_util/props-util/index.js

@@ -116,7 +116,7 @@ const getSlotOptions = () => {
   throw Error('使用 .type 直接取值');
 };
 const findDOMNode = instance => {
-  let node = instance && (instance.$el || instance);
+  let node = instance?.vnode?.el || (instance && (instance.$el || instance));
   while (node && !node.tagName) {
     node = node.nextSibling;
   }
@@ -394,7 +394,7 @@ function isValidElement(element) {
 }
 
 function getPropsSlot(slots, props, prop = 'default') {
-  return slots[prop]?.() ?? props[prop];
+  return props[prop] ?? slots[prop]?.();
 }
 
 export {

components/_util/responsiveObserve.ts

@@ -1,6 +1,7 @@
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type BreakpointMap = Partial<Record<Breakpoint, string>>;
+export type BreakpointMap = Record<Breakpoint, string>;
 export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
+export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
 
 export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 
@@ -43,15 +44,15 @@ const responsiveObserve = {
   },
   unregister() {
     Object.keys(responsiveMap).forEach((screen: string) => {
-      const matchMediaQuery = responsiveMap[screen]!;
+      const matchMediaQuery = responsiveMap[screen];
       const handler = this.matchHandlers[matchMediaQuery];
       handler?.mql.removeListener(handler?.listener);
     });
     subscribers.clear();
   },
   register() {
     Object.keys(responsiveMap).forEach((screen: string) => {
-      const matchMediaQuery = responsiveMap[screen]!;
+      const matchMediaQuery = responsiveMap[screen];
       const listener = ({ matches }: { matches: boolean }) => {
         this.dispatch({
           ...screens,

components/_util/scrollTo.ts

@@ -1,9 +1,10 @@
-import getScroll from './getScroll';
+import raf from './raf';
+import getScroll, { isWindow } from './getScroll';
 import { easeInOutCubic } from './easings';
 
 interface ScrollToOptions {
   /** Scroll container, default as window */
-  getContainer?: () => HTMLElement | Window;
+  getContainer?: () => HTMLElement | Window | Document;
   /** Scroll end callback */
   callback?: () => any;
   /** Animation duration, default as 450 */
@@ -12,7 +13,6 @@ interface ScrollToOptions {
 
 export default function scrollTo(y: number, options: ScrollToOptions = {}) {
   const { getContainer = () => window, callback, duration = 450 } = options;
-
   const container = getContainer();
   const scrollTop = getScroll(container, true);
   const startTime = Date.now();
@@ -21,16 +21,18 @@ export default function scrollTo(y: number, options: ScrollToOptions = {}) {
     const timestamp = Date.now();
     const time = timestamp - startTime;
     const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
-    if (container === window) {
-      window.scrollTo(window.pageXOffset, nextScrollTop);
+    if (isWindow(container)) {
+      (container as Window).scrollTo(window.pageXOffset, nextScrollTop);
+    } else if (container instanceof HTMLDocument || container.constructor.name === 'HTMLDocument') {
+      (container as HTMLDocument).documentElement.scrollTop = nextScrollTop;
     } else {
       (container as HTMLElement).scrollTop = nextScrollTop;
     }
     if (time < duration) {
-      requestAnimationFrame(frameFunc);
+      raf(frameFunc);
     } else if (typeof callback === 'function') {
       callback();
     }
   };
-  requestAnimationFrame(frameFunc);
+  raf(frameFunc);
 }