Merge remote-tracking branch 'next' into v2.3

Author: tangjinzhou

.github/workflows/issue-reply.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - name: Need Reproduce
         if: github.event.label.name == '🤔 Need Reproduce'
-        uses: actions-cool/issues-helper@v1
+        uses: actions-cool/issues-helper@v1.2
         with:
           actions: 'create-comment'
           issue-number: ${{ github.event.issue.number }}
@@ -21,11 +21,23 @@ jobs:
       
       - name: help wanted
         if: github.event.label.name == 'help wanted'
-        uses: actions-cool/issues-helper@v1
+        uses: actions-cool/issues-helper@v1.2
         with:
           actions: 'create-comment'
           issue-number: ${{ github.event.issue.number }}
           body: |
             Hello @${{ github.event.issue.user.login }}. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch, fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!
 
             你好 @${{ github.event.issue.user.login }}，我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支，务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。
+
+      - name: Usage
+        if: github.event.label.name == 'Usage'
+        uses: actions-cool/[email protected]
+        with:
+          actions: 'create-comment, close-issue'
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}, we use GitHub issues to trace bugs or discuss plans of Ant Design Vue. So, please don't ask usage questions here. You can try to open a new discussion in [antdv discussions](https://github.com/vueComponent/ant-design-vue/discussions), select `Q&A` to ask questions, also can ask questions on [Stack Overflow](http://stackoverflow.com/questions/) or [Segment Fault](https://segmentfault.com).
+
+            你好 @${{ github.event.issue.user.login }}，Ant Design Vue Issue 板块是用于 bug 反馈与需求讨论的地方。请勿询问如何使用的问题，你可以试着在 [antdv discussions](https://github.com/vueComponent/ant-design-vue/discussions) 新开一个 discussion，选择 `Q&A` 类别进行提问，也可以在 [Stack Overflow](http://stackoverflow.com/questions/) 或者 [Segment Fault](https://segmentfault.com/) 中提问。
+            

.github/workflows/pr-labeled.yml

@@ -0,0 +1,20 @@
+name: PR Labeled
+
+on: 
+  pull_request_target:
+    types: [labeled]
+
+jobs:
+  reply:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Usage
+        if: github.event.label.name == 'Usage'
+        uses: actions-cool/[email protected]
+        with:
+          actions: 'create-comment, close-issue'
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            Hello @${{ github.event.pull_request.user.login }}, we use GitHub PR to build and perfect of Ant Design Vue. So, please don't ask usage questions here. You can try to open a new discussion in [antdv discussions](https://github.com/vueComponent/ant-design-vue/discussions), select `Q&A` to ask questions, also can ask questions on [Stack Overflow](http://stackoverflow.com/questions/) or [Segment Fault](https://segmentfault.com).
+
+            你好 @${{ github.event.pull_request.user.login }}，Ant Design Vue PR 是用于建设、完善项目的地方。请勿询问如何使用的问题，你可以试着在 [antdv discussions](https://github.com/vueComponent/ant-design-vue/discussions) 新开一个 discussion，选择 `Q&A` 类别进行提问，也可以在 [Stack Overflow](http://stackoverflow.com/questions/) 或者 [Segment Fault](https://segmentfault.com/) 中提问。

CHANGELOG.en-US.md

@@ -10,6 +10,20 @@
 
 ---
 
+## 2.2.3
+
+`2021-08-07`
+
+- 🌟 Use `position: sticky` for the fixed column of `Table` to improve performance and solve the problem of misalignment in some scenes [38569c](https://github.com/vueComponent/ant-design-vue/commit/38569c28c7eb4eaa34f2cc096982daea901062d4)
+- 🌟 `Collapse` supports number type key [#4405](https://github.com/vueComponent/ant-design-vue/issues/4405)
+- 🌟 Optimize the flickering problem of `Tabs` when selected under windows [#4241](https://github.com/vueComponent/ant-design-vue/issues/4241)
+- 🌟 `InputPassword` supports global setting prefixCls [#4430](https://github.com/vueComponent/ant-design-vue/issues/4430)
+- 🐞 Fix `Select` cannot scroll issue [#4396](https://github.com/vueComponent/ant-design-vue/issues/4396)
+- 🐞 Fix `Badge` error reporting under ssr [#4384](https://github.com/vueComponent/ant-design-vue/issues/4384)
+- 🐞 Fix the issue of invalid data fields in `Form` [#4435](https://github.com/vueComponent/ant-design-vue/issues/4435)
+- 🐞 Fix an error when the child element of `FormItem` is a native label [#4383](https://github.com/vueComponent/ant-design-vue/issues/4383)
+- 🐞 Fix the error when `TreeSelect` customize title through slot [#4459](https://github.com/vueComponent/ant-design-vue/issues/4459)
+
 ## 2.2.2
 
 `2021-07-11`

CHANGELOG.zh-CN.md

@@ -10,6 +10,20 @@
 
 ---
 
+## 2.2.3
+
+`2021-08-07`
+
+- 🌟 `Table` 固定列使用 `position: sticky` ， 提升性能，解决部分场景不对齐问题 [38569c](https://github.com/vueComponent/ant-design-vue/commit/38569c28c7eb4eaa34f2cc096982daea901062d4)
+- 🌟 `Collapse` 支持 number 类型 key [#4405](https://github.com/vueComponent/ant-design-vue/issues/4405)
+- 🌟 优化 `Tabs` 在 windows 下选中时闪动问题 [#4241](https://github.com/vueComponent/ant-design-vue/issues/4241)
+- 🌟 `InputPassword` 支持全局设置 prefixCls [#4430](https://github.com/vueComponent/ant-design-vue/issues/4430)
+- 🐞 修复 `Select` 无法滚动问题 [#4396](https://github.com/vueComponent/ant-design-vue/issues/4396)
+- 🐞 修复 `Badge` 在 ssr 下报错问题 [#4384](https://github.com/vueComponent/ant-design-vue/issues/4384)
+- 🐞 修复 `Form` 多出无效数据字段问题 [#4435](https://github.com/vueComponent/ant-design-vue/issues/4435)
+- 🐞 修复 `FormItem` 子元素是原生标签时报错问题 [#4383](https://github.com/vueComponent/ant-design-vue/issues/4383)
+- 🐞 修复 `TreeSelect` 通过 slot 自定义 title 时报错问题 [#4459](https://github.com/vueComponent/ant-design-vue/issues/4459)
+
 ## 2.2.2
 
 `2021-07-11`

components/_util/hooks/useLayoutState.ts

@@ -0,0 +1,41 @@
+import type { Ref } from 'vue';
+import { onBeforeUnmount, ref } from 'vue';
+import wrapperRaf from '../raf';
+
+export type Updater<State> = (prev: State) => State;
+/**
+ * Execute code before next frame but async
+ */
+export function useLayoutState<State>(
+  defaultState: State,
+): [Ref<State>, (updater: Updater<State>) => void] {
+  const stateRef = ref(defaultState);
+  let tempState = stateRef.value;
+
+  let updateBatchRef = [];
+  const rafRef = ref();
+  function setFrameState(updater: Updater<State>) {
+    wrapperRaf.cancel(rafRef.value);
+    updateBatchRef.push(updater);
+
+    rafRef.value = wrapperRaf(() => {
+      const prevBatch = updateBatchRef;
+      // const prevState = stateRef.value;
+      updateBatchRef = [];
+
+      prevBatch.forEach(batchUpdater => {
+        tempState = batchUpdater(tempState);
+      });
+
+      // if (tempState !== stateRef.value) {
+      stateRef.value = tempState;
+      // }
+    });
+  }
+
+  onBeforeUnmount(() => {
+    wrapperRaf.cancel(rafRef.value);
+  });
+
+  return [stateRef as Ref<State>, setFrameState];
+}

components/_util/pickAttrs.ts

@@ -15,7 +15,7 @@ const eventsName = `onCopy onCut onPaste onCompositionend onCompositionstart onC
     onKeypress onKeyup onFocus onBlur onChange onInput onSubmit onClick onContextmenu onDoubleclick onDblclick
     onDrag onDragend onDragenter onDragexit onDragleave onDragover onDragstart onDrop onMousedown
     onMouseenter onMouseleave onMousemove onMouseout onMouseover onMouseup onSelect onTouchcancel
-    onTouchend onTouchmove onTouchstart onScroll onWheel onAbort onCanplay onCanplaythrough
+    onTouchend onTouchmove onTouchstart onTouchstartPassive onTouchmovePassive onScroll onWheel onAbort onCanplay onCanplaythrough
     onDurationchange onEmptied onEncrypted onEnded onError onLoadeddata onLoadedmetadata
     onLoadstart onPause onPlay onPlaying onProgress onRatechange onSeeked onSeeking onStalled onSuspend onTimeupdate onVolumechange onWaiting onLoad onError`;
 

components/_util/props-util/index.js

@@ -339,9 +339,10 @@ export function isEmptyContent(c) {
 
 export function isEmptyElement(c) {
   return (
-    c.type === Comment ||
-    (c.type === Fragment && c.children.length === 0) ||
-    (c.type === Text && c.children.trim() === '')
+    c &&
+    (c.type === Comment ||
+      (c.type === Fragment && c.children.length === 0) ||
+      (c.type === Text && c.children.trim() === ''))
   );
 }
 

components/_util/type.ts

@@ -1,6 +1,5 @@
 import type { App, PropType, VNodeChild, Plugin } from 'vue';
 
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
 export const tuple = <T extends string[]>(...args: T) => args;
 

components/badge/Badge.tsx

@@ -114,7 +114,7 @@ export default defineComponent({
       [`${prefixCls.value}-count-sm`]: props.size === 'small',
       [`${prefixCls.value}-multiple-words`]:
         !isDotRef.value && displayCount.value && displayCount.value.toString().length > 1,
-      [`${prefixCls.value}-status-${status}`]: !!status,
+      [`${prefixCls.value}-status-${props.status}`]: !!props.status,
       [`${prefixCls.value}-status-${props.color}`]: isPresetColor(props.color),
     }));
 

components/breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,7 @@ import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
 import Menu from '../menu';
-import type { Omit, VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export interface Route {

components/form/FormItem.tsx

@@ -1,4 +1,5 @@
 import type { PropType, ExtractPropTypes, ComputedRef } from 'vue';
+import { watch } from 'vue';
 import { defineComponent, computed, nextTick, ref, watchEffect, onBeforeUnmount } from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';
@@ -271,16 +272,31 @@ export default defineComponent({
       clearValidate,
       resetField,
     });
-    formContext.addField(eventKey, {
-      fieldValue,
-      fieldId,
+    let registered = false;
+    watch(
       fieldName,
-      resetField,
-      clearValidate,
-      namePath,
-      validateRules,
-      rules: rulesRef,
-    });
+      val => {
+        if (val) {
+          if (!registered) {
+            registered = true;
+            formContext.addField(eventKey, {
+              fieldValue,
+              fieldId,
+              fieldName,
+              resetField,
+              clearValidate,
+              namePath,
+              validateRules,
+              rules: rulesRef,
+            });
+          }
+        } else {
+          registered = false;
+          formContext.removeField(eventKey);
+        }
+      },
+      { immediate: true },
+    );
     onBeforeUnmount(() => {
       formContext.removeField(eventKey);
     });
@@ -306,7 +322,7 @@ export default defineComponent({
       const children = flattenChildren(slots.default?.());
       let firstChildren = children[0];
       if (fieldName.value && props.autoLink && isValidElement(firstChildren)) {
-        const originalEvents = firstChildren.props;
+        const originalEvents = firstChildren.props || {};
         const originalBlur = originalEvents.onBlur;
         const originalChange = originalEvents.onChange;
         firstChildren = cloneElement(firstChildren, {

components/form/useForm.ts

@@ -108,9 +108,9 @@ function useForm(
   resetFields: (newValues?: Props) => void;
   validate: <T = any>(names?: namesType, option?: validateOptions) => Promise<T>;
   validateField: (
-    name?: string,
-    value?: any,
-    rules?: [Record<string, unknown>],
+    name: string,
+    value: any,
+    rules: Record<string, unknown>[],
     option?: validateOptions,
   ) => Promise<RuleError[]>;
   mergeValidateInfo: (items: ValidateInfo | ValidateInfo[]) => ValidateInfo;
@@ -236,8 +236,8 @@ function useForm(
   const validateField = (
     name: string,
     value: any,
-    rules: any,
-    option: validateOptions,
+    rules: Record<string, unknown>[],
+    option: validateOptions = {},
   ): Promise<RuleError[]> => {
     const promise = validateRules(
       [name],

components/input/Password.tsx

@@ -7,7 +7,8 @@ import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined';
 import inputProps from './inputProps';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-import { defineComponent } from 'vue';
+import { defineComponent, inject } from 'vue';
+import { defaultConfigProvider } from '../config-provider';
 
 const ActionMap = {
   click: 'onClick',
@@ -20,8 +21,8 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...inputProps,
-    prefixCls: PropTypes.string.def('ant-input-password'),
-    inputPrefixCls: PropTypes.string.def('ant-input'),
+    prefixCls: PropTypes.string,
+    inputPrefixCls: PropTypes.string,
     action: PropTypes.string.def('click'),
     visibilityToggle: PropTypes.looseBool.def(true),
     iconRender: PropTypes.func.def((visible: boolean) =>
@@ -31,6 +32,7 @@ export default defineComponent({
   setup() {
     return {
       input: null,
+      configProvider: inject('configProvider', defaultConfigProvider),
     };
   },
   data() {
@@ -56,8 +58,8 @@ export default defineComponent({
         visible: !this.visible,
       });
     },
-    getIcon() {
-      const { prefixCls, action } = this.$props;
+    getIcon(prefixCls) {
+      const { action } = this.$props;
       const iconTrigger = ActionMap[action] || '';
       const iconRender = this.$slots.iconRender || this.$props.iconRender;
       const icon = iconRender(this.visible);
@@ -81,8 +83,8 @@ export default defineComponent({
   },
   render() {
     const {
-      prefixCls,
-      inputPrefixCls,
+      prefixCls: customizePrefixCls,
+      inputPrefixCls: customizeInputPrefixCls,
       size,
       suffix,
       action,
@@ -91,7 +93,12 @@ export default defineComponent({
       ...restProps
     } = getOptionProps(this);
     const { class: className } = this.$attrs;
-    const suffixIcon = visibilityToggle && this.getIcon();
+
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+    const prefixCls = getPrefixCls('input-password', customizePrefixCls);
+
+    const suffixIcon = visibilityToggle && this.getIcon(prefixCls);
     const inputClassName = classNames(prefixCls, className, {
       [`${prefixCls}-${size}`]: !!size,
     });