Merge remote-tracking branch 'origin/main' into feat-v4

2023-04-05 10:05:59 +08:00 · 2023-04-05 10:05:59 +08:00 · 48ab5a2f99
parent ae27d430e5 1977074a7e
commit 48ab5a2f99
30 changed files with 239 additions and 131 deletions
--- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
@ -1,8 +1,8 @@
 首先，感谢你的贡献！ 😄

-新特性请提交至 feature 分支，其余可提交至 master 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息，谢谢！~
+新特性请提交至 feature 分支，其余可提交至 main 分支。在一个维护者审核通过后合并。请确保填写以下 pull request 的信息，谢谢！~

-[[English Template / 英文模板](?expand=1)]
+[[English Template / 英文模板](./pr_en.md)]

 ### 这个变动的性质是

--- a/.github/PULL_REQUEST_TEMPLATE/pr_en.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_en.md
@ -1,8 +1,8 @@
 First of all, thank you for your contribution! 😄

-New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!
+New feature please send pull request to feature branch, and rest to main branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!

-[[中文版模板 / Chinese template](https://github.com/vueComponent/ant-design-vue/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
+[[中文版模板 / Chinese template](./pr_cn.md)]

 ### This is a ...

--- a/.github/workflows/translate.yml
+++ b/.github/workflows/translate.yml
@ -1,23 +0,0 @@
-name: Translation Helper
-
-on:
-  pull_request_target:
-    types: [opened]
-  issues:
-    types: [opened]
-
-jobs:
-  translate:
-    runs-on: ubuntu-latest
-    steps:
-      - name: issue
-        if: github.event_name == 'issues'
-        uses: actions-cool/translation-helper@v1.1.1
-        with: 
-          translate-body: false
-
-      - name: pr
-        if: github.event_name == 'pull_request_target'
-        uses: actions-cool/translation-helper@v1.1.1
-        with: 
-          translate-body: false
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -57,6 +57,23 @@
  - 💄 优化 Upload 操作按钮的样式细节。
 - 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。

+## 3.2.17
+
+`2023-04-04`
+
+- 🐞 revert [#6324](https://github.com/vueComponent/ant-design-vue/issues/6324)，fix table filter hidden error [#6400](https://github.com/vueComponent/ant-design-vue/issues/6400)
+
+## 3.2.16
+
+`2023-03-23`
+
+- 🐞 Fix notification close event triggered multiple times [#6150](https://github.com/vueComponent/ant-design-vue/issues/6150)
+- 🐞 Fix the carousel map responsive change problem [#6100](https://github.com/vueComponent/ant-design-vue/issues/6100)
+- 🐞 Fix Table ceiling scroll bar style error [#6169](https://github.com/vueComponent/ant-design-vue/issues/6169)
+- 🐞 Fix DatePicker disabledMinutes parameter error [#6233](https://github.com/vueComponent/ant-design-vue/issues/6233)
+- 🐞 Fix the problem that the visibleChange event is not triggered when the Popup is closed [#6324](https://github.com/vueComponent/ant-design-vue/issues/6324)
+- 🐞 Fix Image preview image error [#6331](https://github.com/vueComponent/ant-design-vue/issues/6331)
+
 ## 3.2.15

 `2022-11-10`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -57,6 +57,23 @@
  - 💄 优化 Upload 操作按钮的样式细节。
 - 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。

+## 3.2.17
+
+`2023-04-04`
+
+- 🐞 回滚 [#6324](https://github.com/vueComponent/ant-design-vue/issues/6324)，解决引起的 Table 过滤器隐藏问题 [#6400](https://github.com/vueComponent/ant-design-vue/issues/6400)
+
+## 3.2.16
+
+`2023-03-23`
+
+- 🐞 修复 notification close 事件多次触发问题 [#6150](https://github.com/vueComponent/ant-design-vue/issues/6150)
+- 🐞 修复轮播图响应式变化问题 [#6100](https://github.com/vueComponent/ant-design-vue/issues/6100)
+- 🐞 修复 Table 吸顶滚动条样式错误问题 [#6169](https://github.com/vueComponent/ant-design-vue/issues/6169)
+- 🐞 修复 DatePicker disabledMinutes 参数错误 [#6233](https://github.com/vueComponent/ant-design-vue/issues/6233)
+- 🐞 修复 Popup 关闭时没有触发 visibleChange 事件问题 [#6324](https://github.com/vueComponent/ant-design-vue/issues/6324)
+- 🐞 修复 Image 预览图片错误问题 [#6331](https://github.com/vueComponent/ant-design-vue/issues/6331)
+
 ## 3.2.15

 `2022-11-10`
--- a/components/date-picker/tests/QuarterPicker.test.js
+++ b/components/date-picker/tests/QuarterPicker.test.js
@ -6,7 +6,7 @@ const { QuarterPicker } = DatePicker;
 jest.mock('../../_util/Portal');
 describe('QuarterPicker', () => {
  focusTest(QuarterPicker);
-  fit('reset select item when popup close', async () => {
+  it('reset select item when popup close', async () => {
    const wrapper = mount(DatePicker, {
      props: { style: { width: '400px' }, picker: 'quarter' },
      sync: false,
@ -14,4 +14,20 @@ describe('QuarterPicker', () => {
    });
    expect(wrapper.html()).toMatchSnapshot();
  });
+
+  it('test QuarterPicker valueFormat', async () => {
+    const case1 = '2023-1';
+    const wrapper = mount(DatePicker, {
+      props: {
+        picker: 'quarter',
+        format: 'YYYY-Q',
+        valueFormat: 'YYYY-Q',
+        value: case1,
+      },
+      sync: false,
+      attachTo: 'body',
+    });
+    const input = wrapper.find('input');
+    expect(input.element.value).toBe(case1);
+  });
 });
--- a/components/date-picker/tests/RangePicker.test.js
+++ b/components/date-picker/tests/RangePicker.test.js
@ -69,4 +69,25 @@ describe('RangePicker', () => {
    await sleep();
    expect(wrapper.html()).toMatchSnapshot();
  });
+
+  fit('test WeekPicker valueFormat', async () => {
+    const case1 = ['2023-22', '2023-24'];
+    const case2 = ['2023-27', '2023-28'];
+    const wrapper = mount(RangePicker, {
+      props: {
+        picker: 'week',
+        format: 'YYYY-ww',
+        valueFormat: 'YYYY-ww',
+        value: case1,
+      },
+      sync: false,
+      attachTo: 'body',
+    });
+    const inputs = wrapper.findAll('input');
+    expect((inputs[0].element.value, inputs[1].element.value)).toBe((case1[0], case1[1]));
+    await asyncExpect(() => {
+      wrapper.setProps({ value: case2 });
+    });
+    expect((inputs[0].element.value, inputs[1].element.value)).toBe((case2[0], case2[1]));
+  });
 });
--- a/components/date-picker/tests/snapshots/QuarterPicker.test.js.snap
+++ b/components/date-picker/tests/snapshots/QuarterPicker.test.js.snap
@ -14,7 +14,7 @@ exports[`QuarterPicker reset select item when popup close 1`] = `
          <div class="ant-picker-quarter-panel">
            <div class="ant-picker-header"><button type="button" tabindex="-1" class="ant-picker-header-super-prev-btn"><span class="ant-picker-super-prev-icon"></span></button>
              <!---->
-              <div class="ant-picker-header-view"><button type="button" class="ant-picker-year-btn">2022</button></div>
+              <div class="ant-picker-header-view"><button type="button" class="ant-picker-year-btn">2023</button></div>
              <!----><button type="button" tabindex="-1" class="ant-picker-header-super-next-btn"><span class="ant-picker-super-next-icon"></span></button>
            </div>
            <div class="ant-picker-body">
@ -22,16 +22,16 @@ exports[`QuarterPicker reset select item when popup close 1`] = `
                <!---->
                <tbody>
                  <tr>
-                    <td title="2022-Q1" class="ant-picker-cell ant-picker-cell-in-view">
+                    <td title="2023-Q1" class="ant-picker-cell ant-picker-cell-in-view">
                      <div class="ant-picker-cell-inner">Q1</div>
                    </td>
-                    <td title="2022-Q2" class="ant-picker-cell ant-picker-cell-in-view">
+                    <td title="2023-Q2" class="ant-picker-cell ant-picker-cell-in-view">
                      <div class="ant-picker-cell-inner">Q2</div>
                    </td>
-                    <td title="2022-Q3" class="ant-picker-cell ant-picker-cell-in-view">
+                    <td title="2023-Q3" class="ant-picker-cell ant-picker-cell-in-view">
                      <div class="ant-picker-cell-inner">Q3</div>
                    </td>
-                    <td title="2022-Q4" class="ant-picker-cell ant-picker-cell-in-view">
+                    <td title="2023-Q4" class="ant-picker-cell ant-picker-cell-in-view">
                      <div class="ant-picker-cell-inner">Q4</div>
                    </td>
                  </tr>
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -86,7 +86,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
      const maybeToStrings = (dates: DateType[]) => {
        return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates;
      };
-      const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => {
+      const onChange = (dates: RangeValue<DateType>, dateStrings: [string, string]) => {
        const values = maybeToStrings(dates);
        emit('update:value', values);
        emit('change', values, dateStrings);
--- a/components/date-picker/generatePicker/props.ts
+++ b/components/date-picker/generatePicker/props.ts
@ -53,6 +53,11 @@ function commonProps<DateType = any>() {
    defaultOpen: booleanType(),
    /** Make input readOnly to avoid popup keyboard in mobile */
    inputReadOnly: booleanType(),
+    format: someType<string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]>([
+      String,
+      Function,
+      Array,
+    ]),
    // Value
    // format:  string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
    // Render
@ -125,6 +130,7 @@ export interface CommonProps<DateType> {
  open?: boolean;
  defaultOpen?: boolean;
  inputReadOnly?: boolean;
+  format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
  suffixIcon?: VueNode;
  clearIcon?: VueNode;
  prevIcon?: VueNode;
@ -171,11 +177,6 @@ function datePickerProps<DateType = any>() {
    defaultValue: someType<DateType | string>([Object, String]),
    value: someType<DateType | string>([Object, String]),
    disabledTime: functionType<DisabledTime<DateType>>(),
-    format: someType<string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]>([
-      String,
-      Function,
-      Array,
-    ]),
    renderExtraFooter: functionType<(mode: PanelMode) => VueNode>(),
    showNow: booleanType(),
    monthCellRender: functionType<MonthCellRender<DateType>>(),
@ -189,7 +190,6 @@ export interface DatePickerProps<DateType> {
  defaultValue?: DateType | string;
  value?: DateType | string;
  disabledTime?: DisabledTime<DateType>;
-  format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
  renderExtraFooter?: (mode: PanelMode) => VueNode;
  showNow?: boolean;
  monthCellRender?: MonthCellRender<DateType>;
@ -206,7 +206,6 @@ function rangePickerProps<DateType>() {
    value: arrayType<RangeValue<DateType> | RangeValue<string>>(),
    disabledTime: functionType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>(),
    disabled: someType<boolean | [boolean, boolean]>([Boolean, Array]),
-    format: String,
    renderExtraFooter: functionType<() => VueNode>(),
    separator: { type: String },
    showTime: someType<boolean | RangeShowTimeObject<DateType>>([Boolean, Object]),
@ -252,7 +251,6 @@ export interface RangePickerProps<DateType> {
  value?: RangeValue<DateType> | RangeValue<string>;
  disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
  disabled?: [boolean, boolean];
-  format?: string;
  renderExtraFooter?: () => VueNode;
  separator?: string;
  showTime?: boolean | RangeShowTimeObject<DateType>;
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -84,6 +84,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | dateRender | Custom rendering function for date cells | v-slot:dateRender="{current, today}" | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | [formatType](#formatType) | `YYYY-MM-DD` |  |
 | dropdownClassName | To customize the className of the popup calendar | string | - |  |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
 | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
@ -123,7 +124,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-MM-DD` |  |
 | renderExtraFooter | Render extra footer in panel | v-slot:renderExtraFooter="mode" | - |  |
 | showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
@ -142,26 +143,26 @@ The following APIs are shared by DatePicker, RangePicker.

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY` |  |

 ### DatePicker\[picker=quarter]

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-\QQ` |  |

 ### DatePicker\[picker=month]

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-MM` |  |
 | monthCellRender | Custom month cell content render method | v-slot:monthCellRender="{current, locale}" | - |  |

 ### DatePicker\[picker=week]

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-wo` |  |

 ### RangePicker

@ -172,7 +173,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | [formatType](#formatType) | `YYYY-MM-DD HH:mm:ss` |  |
 | ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - |  |
 | renderExtraFooter | Render extra footer in panel | v-slot:renderExtraFooter="mode" | - |  |
 | separator | Set separator between inputs | string \| v-slot:separator | `<SwapRightOutlined />` |  |
@ -188,6 +189,17 @@ The following APIs are shared by DatePicker, RangePicker.
 | change | a callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string]) |  |  |
 | ok | callback when click ok button | function(dates: \[dayjs, dayjs] \| \[string, string]) |  |  |

+#### formatType
+
+```typescript
+import type { Dayjs } from 'dayjs';
+
+type Generic = string;
+type GenericFn = (value: Dayjs) => string;
+
+export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
+```
+
 ## FAQ

 ### How to use DatePicker with customize date library（like moment.js \| dayjs \| date-fns）？
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -85,6 +85,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
 | dateRender | 自定义日期单元格的内容 | v-slot:dateRender="{current, today}" | - |  |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format)，支持[自定义格式](#components-date-picker-demo-format) | [formatType](#formatType) | `YYYY-MM-DD` |  |
 | dropdownClassName | 额外的弹出日历 className | string | - |  |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
@ -124,7 +125,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
 | disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-MM-DD` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | v-slot:renderExtraFooter="mode" | - |  |
 | showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - |  |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
@ -143,26 +144,26 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY` |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY` |  |

 ### DatePicker\[picker=quarter]

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY-\QQ` |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-\QQ` |  |

 ### DatePicker\[picker=month]

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY-MM` |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-MM` |  |
 | monthCellRender | 自定义的月份内容渲染方法 | v-slot:monthCellRender="{current, locale}" | - |  |

 ### DatePicker\[picker=week]

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | `YYYY-wo` |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format) | [formatType](#formatType) | `YYYY-wo` |  |

 ### RangePicker

@ -173,7 +174,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
 | disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - |  |
-| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
+| format | 展示的日期格式 | [formatType](#formatType) | `YYYY-MM-DD HH:mm:ss` |  |
 | ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | v-slot:renderExtraFooter="mode" | - |  |
 | separator | 设置分隔符 | string \| v-slot:separator | `<SwapRightOutlined />` |  |
@ -189,6 +190,17 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA
 | change | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string]) |
 | ok | 点击确定按钮的回调 | function(dates: \[dayjs, dayjs] \| \[string, string]) |

+#### formatType
+
+```typescript
+import type { Dayjs } from 'dayjs';
+
+type Generic = string;
+type GenericFn = (value: Dayjs) => string;
+
+export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
+```
+
 ## FAQ

 ### 如何在 DatePicker 中使用自定义日期库（如 moment.js \| dayjs \| date-fns）？
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@ -45,9 +45,6 @@ import { useProviderDisabled } from '../config-provider/DisabledContext';
 export type RequiredMark = boolean | 'optional';
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';

-/** @deprecated Will warning in future branch. Pls use `Rule` instead. */
-export type ValidationRule = Rule;
-
 export const formProps = () => ({
  layout: PropTypes.oneOf(tuple('horizontal', 'inline', 'vertical')),
  labelCol: objectType<ColProps & HTMLAttributes>(),
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@ -45,7 +45,6 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { useInjectForm } from './context';
 import FormItemLabel from './FormItemLabel';
 import FormItemInput from './FormItemInput';
-import type { ValidationRule } from './Form';
 import type { FormItemStatusContextProps } from './FormItemContext';
 import { FormItemInputContext, useProvideFormItemContext } from './FormItemContext';
 import useDebounce from './utils/useDebounce';
@ -62,7 +61,7 @@ export interface FieldExpose {
  resetField: () => void;
  clearValidate: () => void;
  namePath: ComputedRef<InternalNamePath>;
-  rules?: ComputedRef<ValidationRule[]>;
+  rules?: ComputedRef<Rule[]>;
  validateRules: (options: ValidateOptions) => Promise<void> | Promise<RuleError[]>;
 }

@ -198,7 +197,7 @@ export default defineComponent({
      validateTrigger = validateTrigger === undefined ? 'change' : validateTrigger;
      return toArray(validateTrigger);
    });
-    const rulesRef = computed<ValidationRule[]>(() => {
+    const rulesRef = computed<Rule[]>(() => {
      let formRules = formContext.rules.value;
      const selfRules = props.rules;
      const requiredRule =
--- a/components/form/context.ts
+++ b/components/form/context.ts
@ -1,9 +1,9 @@
 import type { InjectionKey, ComputedRef } from 'vue';
 import { inject, provide, computed } from 'vue';
 import type { ColProps } from '../grid';
-import type { RequiredMark, ValidationRule } from './Form';
+import type { RequiredMark } from './Form';
 import type { ValidateStatus, FieldExpose } from './FormItem';
-import type { FormLabelAlign, ValidateMessages } from './interface';
+import type { FormLabelAlign, Rule, ValidateMessages } from './interface';
 import { defaultValidateMessages } from './utils/messages';

 export interface FormContextProps {
@ -20,7 +20,7 @@ export interface FormContextProps {
  addField: (eventKey: string, field: FieldExpose) => void;
  removeField: (eventKey: string) => void;
  validateTrigger?: ComputedRef<string | string[]>;
-  rules?: ComputedRef<{ [k: string]: ValidationRule[] | ValidationRule }>;
+  rules?: ComputedRef<{ [k: string]: Rule[] | Rule }>;
  onValidate: (
    name: string | number | Array<string | number>,
    status: boolean,
--- a/components/input-number/src/utils/MiniDecimal.ts
+++ b/components/input-number/src/utils/MiniDecimal.ts
@ -5,6 +5,10 @@ import { supportBigInt } from './supportUtil';

 export type ValueType = string | number;

+function isEmpty(value: ValueType) {
+  return (!value && value !== 0 && !Number.isNaN(value)) || !String(value).trim();
+}
+
 export interface DecimalClass {
  add: (value: ValueType) => DecimalClass;

@ -38,7 +42,7 @@ export class NumberDecimal implements DecimalClass {
  empty: boolean;

  constructor(value: ValueType) {
-    if ((!value && value !== 0) || !String(value).trim()) {
+    if (isEmpty(value)) {
      this.empty = true;
      return;
    }
@ -125,7 +129,7 @@ export class BigIntDecimal implements DecimalClass {
  nan: boolean;

  constructor(value: string | number) {
-    if ((!value && value !== 0) || !String(value).trim()) {
+    if (isEmpty(value)) {
      this.empty = true;
      return;
    }
@ -133,7 +137,7 @@ export class BigIntDecimal implements DecimalClass {
    this.origin = String(value);

    // Act like Number convert
-    if (value === '-') {
+    if (value === '-' || Number.isNaN(value)) {
      this.nan = true;
      return;
    }
@ -265,32 +269,10 @@ export default function getMiniDecimal(value: ValueType): DecimalClass {
 }

 /**
- * round up an unsigned number str, like: 1.4 -> 2, 1.5 -> 2
+ * Align the logic of toFixed to around like 1.5 => 2.
+ * If set `cutOnly`, will just remove the over decimal part.
 */
-export function roundUpUnsignedDecimal(numStr: string, precision: number) {
-  const { integerStr, decimalStr } = trimNumber(numStr);
-  const advancedDecimal = getMiniDecimal(integerStr + '.' + decimalStr).add(
-    `0.${'0'.repeat(precision)}${5}`,
-  );
-  return toFixed(advancedDecimal.toString(), '.', precision);
-}
-
-/**
- * round up an unsigned number str, like: 1.4 -> 1, 1.5 -> 1
- */
-export function roundDownUnsignedDecimal(numStr: string, precision: number) {
-  const { negativeStr, integerStr, decimalStr } = trimNumber(numStr);
-  const numberWithoutDecimal = `${negativeStr}${integerStr}`;
-  if (precision === 0) {
-    return integerStr;
-  }
-  return `${numberWithoutDecimal}.${decimalStr.padEnd(precision, '0').slice(0, precision)}`;
-}
-
-/**
- * Align the logic of toFixed to around like 1.5 => 2
- */
-export function toFixed(numStr: string, separatorStr: string, precision?: number) {
+export function toFixed(numStr: string, separatorStr: string, precision?: number, cutOnly = false) {
  if (numStr === '') {
    return '';
  }
@ -303,11 +285,11 @@ export function toFixed(numStr: string, separatorStr: string, precision?: number
    // We will get last + 1 number to check if need advanced number
    const advancedNum = Number(decimalStr[precision]);

-    if (advancedNum >= 5) {
+    if (advancedNum >= 5 && !cutOnly) {
      const advancedDecimal = getMiniDecimal(numStr).add(
        `${negativeStr}0.${'0'.repeat(precision)}${10 - advancedNum}`,
      );
-      return toFixed(advancedDecimal.toString(), separatorStr, precision);
+      return toFixed(advancedDecimal.toString(), separatorStr, precision, cutOnly);
    }

    if (precision === 0) {
--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/components/input/tests/snapshots/demo.test.js.snap
@ -146,7 +146,7 @@ exports[`renders ./components/input/demo/textarea.vue correctly 1`] = `
 <textarea placeholder="Basic usage" rows="4" class="ant-input"></textarea>
 <br>
 <br>
-<textarea rows="4" placeholder="maxLength is 6" class="ant-input"></textarea>
+<textarea rows="4" placeholder="maxlength is 6" class="ant-input"></textarea>
 `;

 exports[`renders ./components/input/demo/tooltip.vue correctly 1`] = `<input placeholder="Input a number" type="text" max-length="25" style="width: 120px;" class="ant-input">`;
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@ -25,7 +25,7 @@ import devWarning from '../vc-util/devWarning';

 export type SliderValue = number | [number, number];

-interface SliderMarks {
+export interface SliderMarks {
  [key: number]:
    | VueNode
    | {
@ -39,7 +39,7 @@ interface HandleGeneratorInfo {
  dragging?: boolean;
  index: number;
 }
-interface SliderRange {
+export interface SliderRange {
  draggableTrack?: boolean;
 }
 export type HandleGeneratorFn = (config: {
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -408,7 +408,7 @@ export default defineComponent({
                class={`${prefixCls.value}-btn`}
                v-slots={slots}
              >
-                <div class={`${prefixCls}-drag-container`}>{slots.default?.()}</div>
+                <div class={`${prefixCls.value}-drag-container`}>{slots.default?.()}</div>
              </VcUpload>
            </div>
            {renderUploadList()}
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -25,7 +25,6 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. | (file, fileList) => `boolean` \| `Promise` | - |  |
 | customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | function | - |  |  |
 | data | Uploading params or function which can return uploading params. | object\|function(file) | - |  |  |
-| directory | support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false |  |  |
 | directory | Support upload whole directory（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | 3.0 |  |
 | disabled | disable upload button | boolean | false |  |  |
 | downloadIcon | custom download icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 |  |
--- a/components/vc-dropdown/Dropdown.tsx
+++ b/components/vc-dropdown/Dropdown.tsx
@ -55,8 +55,6 @@ export default defineComponent({
      if (props.visible === undefined) {
        triggerVisible.value = false;
      }
-
-      emit('visibleChange', false);
      emit('overlayClick', e);
    };

--- a/components/vc-picker/generate/dayjs.ts
+++ b/components/vc-picker/generate/dayjs.ts
@ -4,6 +4,7 @@ import weekday from 'dayjs/plugin/weekday';
 import localeData from 'dayjs/plugin/localeData';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import weekYear from 'dayjs/plugin/weekYear';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import type { GenerateConfig } from '.';
@ -15,6 +16,7 @@ dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(weekOfYear);
 dayjs.extend(weekYear);
+dayjs.extend(quarterOfYear);

 dayjs.extend((_o, c) => {
  // todo support Wo (ISO week)
@ -105,6 +107,58 @@ const parseNoMatchNotice = () => {
  noteOnce(false, 'Not match any format. Please help to fire a issue about this.');
 };

+const advancedFormatRegex = /\[([^\]]+)]|Q|wo|ww|w|WW|W|zzz|z|gggg|GGGG|k{1,2}|S/g;
+
+function findTargetStr(val: string, index: number, segmentation: string) {
+  const items = [...new Set(val.split(segmentation))];
+  let idx = 0;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    idx += item.length;
+    if (idx > index) {
+      return item;
+    }
+    idx += segmentation.length;
+  }
+}
+
+const toDateWithValueFormat = (val: string | Dayjs, valueFormat: string) => {
+  if (dayjs.isDayjs(val)) {
+    return val;
+  }
+  const matchs = valueFormat.matchAll(advancedFormatRegex);
+  let baseDate = dayjs(val, valueFormat);
+  if (matchs === null) {
+    return baseDate;
+  }
+  for (const match of matchs) {
+    const origin = match[0];
+    const index = match['index'];
+
+    if (origin === 'Q') {
+      const segmentation = val.slice(index - 1, index);
+      const quarterStr = findTargetStr(val, index, segmentation).match(/\d+/)[0];
+      baseDate = baseDate.quarter(parseInt(quarterStr));
+    }
+
+    if (origin.toLowerCase() === 'wo') {
+      const segmentation = val.slice(index - 1, index);
+      const weekStr = findTargetStr(val, index, segmentation).match(/\d+/)[0];
+      baseDate = baseDate.week(parseInt(weekStr));
+    }
+
+    if (origin.toLowerCase() === 'ww') {
+      baseDate = baseDate.week(parseInt(val.slice(index, index + origin.length)));
+    }
+
+    if (origin.toLowerCase() === 'w') {
+      baseDate = baseDate.week(parseInt(val.slice(index, index + origin.length + 1)));
+    }
+  }
+
+  return baseDate;
+};
+
 const generateConfig: GenerateConfig<Dayjs> = {
  // get
  getNow: () => dayjs(),
@ -177,13 +231,9 @@ const generateConfig: GenerateConfig<Dayjs> = {

  toDate: (value, valueFormat) => {
    if (Array.isArray(value)) {
-      return value.map((val: any) =>
-        typeof val === 'string' && val ? dayjs(val, valueFormat) : val || null,
-      ) as Dayjs[];
+      return value.map((val: any) => toDateWithValueFormat(val, valueFormat)) as Dayjs[];
    } else {
-      return (
-        typeof value === 'string' && value ? dayjs(value, valueFormat) : value || null
-      ) as Dayjs;
+      return toDateWithValueFormat(value, valueFormat) as Dayjs;
    }
  },
  toString: (value, valueFormat) => {
--- a/site/index.html
+++ b/site/index.html
@ -63,21 +63,19 @@
      class="surveybyantdv"
      data-sf-id="63ad5912f3e10066"
      data-sf-mode="popover"
-      data-sf-button-color="#1890ff"
+      data-sf-button-color="#3a3939"
      data-sf-text-color="#ffffff"
-      data-sf-font-size="18"
-      data-sf-button-text=""
-      data-sf-button-radius="50%"
-      data-sf-button-icon="like-outlined"
+      data-sf-button-radius="50"
+      data-sf-button-icon="form-outlined"
      data-sf-default-open="false"
      data-sf-allow-repeat-submit="true"
      data-sf-close-after-submit="false"
      data-sf-hide-after-submit="false"
      data-sf-delay-visible="false"
-      data-sf-width="350px"
-      data-sf-height="450px"
      data-sf-preload="true"
-    ></div> -->
-    <script async src="//aliyuncdn.antdv.com/form/static/embed/v1.js"></script>
+      data-sf-width="368px"
+      data-sf-height="407px"
+    ></div>
+    <script async src="https://aliyuncdn.antdv.com/form/static/embed/runtime.js"></script> -->
  </body>
 </html>
--- a/site/src/layouts/header/Ecosystem.vue
+++ b/site/src/layouts/header/Ecosystem.vue
@ -35,7 +35,10 @@
        <a>QQ 1群(217490093) 已满</a>
      </a-menu-item>
      <a-menu-item key="qq2">
-        <a>QQ 2群(809774695)</a>
+        <a>QQ 2群(809774695) 已满</a>
+      </a-menu-item>
+      <a-menu-item key="qq3">
+        <a>QQ 3群(927828249)</a>
      </a-menu-item>
    </a-menu-item-group>
  </a-menu>
--- a/site/src/layouts/header/Menu.vue
+++ b/site/src/layouts/header/Menu.vue
@ -13,6 +13,7 @@
    >
      <a-select-option :value="antdVersion">{{ antdVersion }}</a-select-option>
      <a-select-option value="3.x" @click="changeVersion('3x')">3.x</a-select-option>
+      <a-select-option value="next" @click="changeVersion('next')">4.x (Next)</a-select-option>
      <a-select-option value="2.x" @click="changeVersion('2x')">
        2.x (Not Recommended)
      </a-select-option>
--- a/site/src/layouts/header/index.vue
+++ b/site/src/layouts/header/index.vue
@ -1,6 +1,6 @@
 <template>
  <header id="header" :class="headerClassName">
-    <div v-if="visibleAdblockBanner" class="adblock-banner">
+    <!-- <div v-if="visibleAdblockBanner" class="adblock-banner">
      <template v-if="isZhCN">
        我们检测到你可能使用了 AdBlock 或 Adblock
        Plus，它会影响到正常功能的使用（如复制、展开代码等）。
@ -15,9 +15,9 @@
      </template>

      <CloseOutlined class="close-icon" @click="visibleAdblockBanner = false" />
-    </div>
+    </div> -->
    <div v-if="visibleAlertBanner && isZhCN" class="alert-banner">
-      Surely Form 2.0 发布，快速搭建在线问卷，无缝嵌入各种系统
+      Surely Form 2.0 发布，快速定制自己的问卷平台 &nbsp;&nbsp;
      <a href="https://form.antdv.com">立即体验</a>

      <CloseOutlined class="close-icon" @click="visibleAlertBanner = false" />
@ -128,10 +128,10 @@ export default defineComponent({
    watch(globalConfig?.blocked, val => {
      visibleAdblockBanner.value = val;
    });
-    const visibleAlertBanner = ref(!localStorage.getItem('surelyform2'));
+    const visibleAlertBanner = ref(!localStorage.getItem('surelyform_v2'));
    watch(visibleAlertBanner, () => {
      if (!visibleAlertBanner.value) {
-        localStorage.setItem('surelyform2', version);
+        localStorage.setItem('surelyform_v2', version);
      }
    });
    return {
--- a/site/src/main.js
+++ b/site/src/main.js
@ -54,3 +54,14 @@ app.use(i18n);
 app.config.globalProperties.$i18n = i18n;

 app.mount('#app');
+
+// setTimeout(() => {
+//   const clicked = localStorage.getItem('surveybyantdv_22_03_14');
+//   if (!clicked) {
+//     const btn = document.getElementsByClassName('surveybyantdv-launch-button')?.[0];
+//     if (btn) {
+//       btn.click();
+//       localStorage.setItem('surveybyantdv_22_03_14', true);
+//     }
+//   }
+// }, 3000);
--- a/site/src/vueDocs/introduce.en-US.md
+++ b/site/src/vueDocs/introduce.en-US.md
@ -144,7 +144,7 @@ import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

 - [Home Page](https://www.antdv.com/)
 - [Ant Design Of React](https://ant.design/)
- [Components](https://www.antdv.com/docs/vue/introduce)
+- [Components](https://www.antdv.com/components/overview)
 - [Change Log](/docs/vue/changelog)
 - [CodeSandbox template](https://codesandbox.io/s/agitated-franklin-1w72v) for bug reports
 - [Customize Theme](/docs/vue/customize-theme)
--- a/site/src/vueDocs/introduce.zh-CN.md
+++ b/site/src/vueDocs/introduce.zh-CN.md
@ -146,7 +146,7 @@ import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

 - [首页](https://www.antdv.com/)
 - [Ant Design Of React](https://ant.design/)
- [组件库](https://www.antdv.com/docs/vue/introduce-cn)
+- [组件库](https://www.antdv.com/components/overview-cn)
 - [更新日志](/docs/vue/changelog-cn)
 - [CodeSandbox 模板](https://codesandbox.io/s/agitated-franklin-1w72v) for bug reports
 - [定制主题](/docs/vue/customize-theme-cn)
--- a/webpack.build.conf.js
+++ b/webpack.build.conf.js
@ -1,5 +1,5 @@
 // This config is for building dist files
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
 const getWebpackConfig = require('./antd-tools/getWebpackConfig');
@ -74,13 +74,13 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
        css: true,
      });
    }
-    config.plugins.push(
-      new BundleAnalyzerPlugin({
-        analyzerMode: 'static',
-        openAnalyzer: false,
-        reportFilename: '../report.html',
-      }),
-    );
+    // config.plugins.push(
+    //   new BundleAnalyzerPlugin({
+    //     analyzerMode: 'static',
+    //     openAnalyzer: false,
+    //     reportFilename: '../report.html',
+    //   }),
+    // );

    if (!process.env.NO_DUP_CHECK) {
      config.plugins.push(