Merge remote-tracking branch 'origin/next' into feat-update-ts

CHANGELOG.en-US.md

@@ -10,6 +10,32 @@
 
 ---
 
+## 3.1.0-rc.4
+
+`2022-03-25`
+
+### 🔥🔥🔥 The official version is expected to be released at the end of March or early April, when 3.x will become the default version, and the documentation will also point to the 3.x documentation by default 🔥🔥🔥
+
+- 🐞 Fix `Select` options do not support push and other variant methods [#5398](https://github.com/vueComponent/ant-design-vue/issues/5398)
+- 🐞 Fix `MenuItem` custom icon, the original icon class name is lost [#5390](https://github.com/vueComponent/ant-design-vue/issues/5390)
+
+## 3.1.0-rc.3
+
+`2022-03-24`
+
+### 🔥🔥🔥 The official version is expected to be released at the end of March or early April, when 3.x will become the default version, and the documentation will also point to the 3.x documentation by default 🔥🔥🔥
+
+- 🌟 Optimize the search and click performance of `Tree` `TreeSelect` [#5365](https://github.com/vueComponent/ant-design-vue/issues/5365)
+- 🌟 `Menu` selectedKeys, openKeys support depth watch [7bf1e0](https://github.com/vueComponent/ant-design-vue/commit/7bf1e0dda1fe8f70f6c8b17ba90b217df2a75bd4)
+- 🐞 Fix `Checkbox` `Radio` triggering two `click` events for one click [#5363](https://github.com/vueComponent/ant-design-vue/issues/5363) [#5389](https://github.com/vueComponent/ant-design-vue/issues/5389)
+- 🐞 Fix `FormItem` `htmlFor` property invalid issue [#5384](https://github.com/vueComponent/ant-design-vue/issues/5384)
+- 🐞 Fix `Upload` limit the number, the last upload is abort issue [#5385](https://github.com/vueComponent/ant-design-vue/issues/5385)
+- 🐞 Fix `RangePicker` `showTime`, disabled does not consider time issue [#5286](https://github.com/vueComponent/ant-design-vue/issues/5286)
+- 🐞 Fix `Layout.Sidebar` cannot be expanded after responsive collapse [#5373](https://github.com/vueComponent/ant-design-vue/issues/5373)
+- 🐞 Fix `AutoComplete` custom children's class not mounted [414e7a](https://github.com/vueComponent/ant-design-vue/commit/414e7a1c56455017dbc3780ce7b1b4abd0f1c4d7)
+- 🐞 Fix `TimeRangePicker` disabledTime not taking effect [#5387](https://github.com/vueComponent/ant-design-vue/issues/5387)
+- 🐞 Fix `Dropdown` automatic correction of pop-up window position is invalid [#5391](https://github.com/vueComponent/ant-design-vue/issues/5391)
+
 ## 3.1.0-rc.2
 
 `2022-03-19`

CHANGELOG.zh-CN.md

@@ -10,6 +10,32 @@
 
 ---
 
+## 3.1.0-rc.4
+
+`2022-03-25`
+
+### 🔥🔥🔥 预计 3 月底或 4 月初发布正式版，届时 3.x 将成为默认版本，文档也将默认指向 3.x 文档 🔥🔥🔥
+
+- 🐞 修复 `Select` options 不支持 push 等变种方法 [#5398](https://github.com/vueComponent/ant-design-vue/issues/5398)
+- 🐞 修复 `MenuItem` 自定义 icon 时，icon 原始类名丢失 [#5390](https://github.com/vueComponent/ant-design-vue/issues/5390)
+
+## 3.1.0-rc.3
+
+`2022-03-24`
+
+### 🔥🔥🔥 预计 3 月底或 4 月初发布正式版，届时 3.x 将成为默认版本，文档也将默认指向 3.x 文档 🔥🔥🔥
+
+- 🌟 优化 `Tree` `TreeSelect` 的搜索、点击性能 [#5365](https://github.com/vueComponent/ant-design-vue/issues/5365)
+- 🌟 `Menu` selectedKeys、openKeys 支持深度 watch [7bf1e0](https://github.com/vueComponent/ant-design-vue/commit/7bf1e0dda1fe8f70f6c8b17ba90b217df2a75bd4)
+- 🐞 修复 `Checkbox` `Radio` 一次点击触发两次 `click` 事件问题 [#5363](https://github.com/vueComponent/ant-design-vue/issues/5363) [#5389](https://github.com/vueComponent/ant-design-vue/issues/5389)
+- 🐞 修复 `FormItem` `htmlFor` 属性失效问题 [#5384](https://github.com/vueComponent/ant-design-vue/issues/5384)
+- 🐞 修复 `Upload` 限制数量时，最后一个上传被 abort 问题 [#5385](https://github.com/vueComponent/ant-design-vue/issues/5385)
+- 🐞 修复 `RangePicker` `showTime`时， disabled 未考虑 time 问题 [#5286](https://github.com/vueComponent/ant-design-vue/issues/5286)
+- 🐞 修复 `Layout.Sidebar` 响应式折叠后，无法展开问题 [#5373](https://github.com/vueComponent/ant-design-vue/issues/5373)
+- 🐞 修复 `AutoComplete` 自定义 children 的 class 未挂载问题 [414e7a](https://github.com/vueComponent/ant-design-vue/commit/414e7a1c56455017dbc3780ce7b1b4abd0f1c4d7)
+- 🐞 修复 `TimeRangePicker` disabledTime 未生效问题 [#5387](https://github.com/vueComponent/ant-design-vue/issues/5387)
+- 🐞 修复 `Dropdown` 自动修正弹窗位置失效问题 [#5391](https://github.com/vueComponent/ant-design-vue/issues/5391)
+
 ## 3.1.0-rc.2
 
 `2022-03-19`

components/dropdown/dropdown.tsx

@@ -136,6 +136,7 @@ const Dropdown = defineComponent({
 
       const builtinPlacements = getPlacements({
         arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
+        autoAdjustOverflow: true,
       });
       const dropdownProps = omit(
         {

components/menu/src/MenuItem.tsx

@@ -233,9 +233,13 @@ export default defineComponent({
             onFocus={onInternalFocus}
             title={typeof title === 'string' ? title : undefined}
           >
-            {cloneElement(icon, {
+            {cloneElement(
+              icon,
+              {
                 class: `${prefixCls.value}-item-icon`,
-            })}
+              },
+              false,
+            )}
             {renderItemChildren(icon, children)}
           </Overflow.Item>
         </Tooltip>

components/radio/Radio.tsx

@@ -61,12 +61,7 @@ export default defineComponent({
 
     return () => {
       const radioGroup = radioGroupContext;
-      const {
+      const { prefixCls: customizePrefixCls, id = formItemContext.id.value, ...restProps } = props;
-        prefixCls: customizePrefixCls,
-        id = formItemContext.id.value,
-        onClick,
-        ...restProps
-      } = props;
 
       const rProps: RadioProps = {
         prefixCls: prefixCls.value,
@@ -90,7 +85,7 @@ export default defineComponent({
       });
 
       return (
-        <label class={wrapperClassString} onClick={onClick}>
+        <label class={wrapperClassString}>
           <VcCheckbox {...rProps} type="radio" ref={vcCheckbox} />
           {slots.default && <span>{slots.default()}</span>}
         </label>

components/style/themes/variable.less

@@ -9,9 +9,9 @@
 // An override for the html selector for theme prefixes
 @html-selector: html;
 
-html {
+@base-primary: @blue-6;
-  @base-primary: @blue-6;
 
+html {
   // ========= Primary Color =========
   --@{ant-prefix}-primary-color: @base-primary;
   --@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `);

components/vc-select/Select.tsx

@@ -42,7 +42,7 @@ import { toArray } from './utils/commonUtil';
 import useFilterOptions from './hooks/useFilterOptions';
 import useCache from './hooks/useCache';
 import type { Key, VueNode } from '../_util/type';
-import { computed, defineComponent, ref, toRef, watchEffect } from 'vue';
+import { computed, defineComponent, ref, shallowRef, toRef, watchEffect } from 'vue';
 import type { ExtractPropTypes, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps } from '../_util/props-util';
@@ -314,13 +314,15 @@ export default defineComponent({
     };
 
     // Fill tag as option if mode is `tags`
-    const filledTagOptions = computed(() => {
+    const filledTagOptions = shallowRef();
+    watchEffect(() => {
       if (props.mode !== 'tags') {
-        return mergedOptions.value;
+        filledTagOptions.value = mergedOptions.value;
+        return;
       }
 
       // >>> Tag mode
-      const cloneOptions = [...mergedOptions.value];
+      const cloneOptions = mergedOptions.value.slice();
 
       // Check if value exist in options (include new patch item)
       const existOptions = (val: RawValueType) => valueOptions.value.has(val);
@@ -336,7 +338,7 @@ export default defineComponent({
           }
         });
 
-      return cloneOptions;
+      filledTagOptions.value = cloneOptions;
     });
 
     const filteredOptions = useFilterOptions(

components/vc-select/hooks/useFilterOptions.ts

@@ -7,15 +7,15 @@ import type {
   BaseOptionType,
 } from '../Select';
 import { injectPropsWithOption } from '../utils/valueUtil';
-import type { Ref } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
-import { toRaw, computed } from 'vue';
+import { computed } from 'vue';
 
 function includes(test: any, search: string) {
   return toArray(test).join('').toUpperCase().includes(search);
 }
 
 export default (
-  options: Ref<DefaultOptionType[]>,
+  options: ShallowRef<DefaultOptionType[]>,
   fieldNames: Ref<FieldNames>,
   searchValue?: Ref<string>,
   filterOption?: Ref<SelectProps['filterOption']>,
@@ -55,7 +55,7 @@ export default (
       ? opt => injectPropsWithOption(opt)
       : opt => opt;
 
-    toRaw(options.value).forEach(item => {
+    options.value.forEach(item => {
       // Group should check child options
       if (item[fieldOptions]) {
         // Check group first

components/vc-select/hooks/useOptions.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { toRaw, shallowRef, watchEffect } from 'vue';
+import { toRaw, shallowRef, watchEffect, watch } from 'vue';
 import type { FieldNames, RawValueType } from '../Select';
 import { convertChildrenToData } from '../utils/legacyUtil';
 
@@ -15,13 +15,20 @@ export default function useOptions<OptionType>(
   const mergedOptions = shallowRef();
   const valueOptions = shallowRef();
   const labelOptions = shallowRef();
-  watchEffect(() => {
+  const tempMergedOptions = shallowRef([]);
-    let newOptions = toRaw(options.value);
+  watch(
-    const childrenAsData = !options.value;
+    [options, children],
-
+    () => {
-    if (childrenAsData) {
+      if (options.value) {
-      newOptions = convertChildrenToData(children.value);
+        tempMergedOptions.value = toRaw(options.value).slice();
+      } else {
+        tempMergedOptions.value = convertChildrenToData(children.value);
       }
+    },
+    { immediate: true, deep: true },
+  );
+  watchEffect(() => {
+    const newOptions = tempMergedOptions.value;
 
     const newValueOptions = new Map<RawValueType, OptionType>();
     const newLabelOptions = new Map<any, OptionType>();

components/vc-tree-select/OptionList.tsx

@@ -98,7 +98,7 @@ export default defineComponent({
     );
     const mergedExpandedKeys = computed(() => {
       if (legacyContext.treeExpandedKeys) {
-        return toRaw(legacyContext.treeExpandedKeys).slice();
+        return legacyContext.treeExpandedKeys.slice();
       }
       return baseProps.searchValue ? searchExpandedKeys.value : expandedKeys.value;
     });

components/vc-tree-select/hooks/useCache.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
-import { toRaw, computed, shallowRef } from 'vue';
+import { watch, toRaw, computed, shallowRef } from 'vue';
 import type { LabeledValueType, RawValueType } from '../TreeSelect';
 
 /**
@@ -10,12 +10,19 @@ export default (values: Ref<LabeledValueType[]>): [Ref<LabeledValueType[]>] => {
   const cacheRef = shallowRef({
     valueLabels: new Map<RawValueType, any>(),
   });
-
+  const mergedValues = shallowRef();
+  watch(
+    values,
+    () => {
+      mergedValues.value = toRaw(values.value);
+    },
+    { immediate: true },
+  );
   const newFilledValues = computed(() => {
     const { valueLabels } = cacheRef.value;
     const valueLabelsCache = new Map<RawValueType, any>();
 
-    const filledValues = toRaw(values.value).map(item => {
+    const filledValues = mergedValues.value.map(item => {
       const { value } = item;
       const mergedLabel = item.label ?? valueLabels.get(value);
 

components/vc-tree-select/hooks/useCheckedKeys.ts

@@ -3,11 +3,11 @@ import type { DataEntity } from '../../vc-tree/interface';
 import { conductCheck } from '../../vc-tree/utils/conductUtil';
 import type { LabeledValueType, RawValueType } from '../TreeSelect';
 import type { Ref, ShallowRef } from 'vue';
-import { toRaw, shallowRef, watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 
 export default (
-  rawLabeledValues: Ref<LabeledValueType[]>,
+  rawLabeledValues: ShallowRef<LabeledValueType[]>,
-  rawHalfCheckedValues: Ref<LabeledValueType[]>,
+  rawHalfCheckedValues: ShallowRef<LabeledValueType[]>,
   treeConduction: Ref<boolean>,
   keyEntities: Ref<Record<Key, DataEntity>>,
   maxLevel: Ref<number>,
@@ -17,10 +17,8 @@ export default (
   const newRawHalfCheckedValues = shallowRef<RawValueType[]>([]);
 
   watchEffect(() => {
-    let checkedKeys: RawValueType[] = toRaw(rawLabeledValues.value).map(({ value }) => value);
+    let checkedKeys: RawValueType[] = rawLabeledValues.value.map(({ value }) => value);
-    let halfCheckedKeys: RawValueType[] = toRaw(rawHalfCheckedValues.value).map(
+    let halfCheckedKeys: RawValueType[] = rawHalfCheckedValues.value.map(({ value }) => value);
-      ({ value }) => value,
-    );
 
     const missingValues = checkedKeys.filter(key => !keyEntities.value[key]);
 

components/vc-tree-select/hooks/useDataEntities.ts

@@ -3,16 +3,16 @@ import type { DataEntity } from '../../vc-tree/interface';
 import type { FieldNames, RawValueType } from '../TreeSelect';
 
 import { isNil } from '../utils/valueUtil';
-import type { Ref } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
-import { toRaw, ref, watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 import { warning } from '../../vc-util/warning';
 
-export default (treeData: Ref<any>, fieldNames: Ref<FieldNames>) => {
+export default (treeData: ShallowRef<any>, fieldNames: Ref<FieldNames>) => {
-  const valueEntities = ref<Map<RawValueType, DataEntity>>(new Map());
+  const valueEntities = shallowRef<Map<RawValueType, DataEntity>>(new Map());
-  const keyEntities = ref<Record<string, DataEntity>>({});
+  const keyEntities = shallowRef<Record<string, DataEntity>>({});
   watchEffect(() => {
     const fieldNamesValue = fieldNames.value;
-    const collection = convertDataToEntities(toRaw(treeData.value), {
+    const collection = convertDataToEntities(treeData.value, {
       fieldNames: fieldNamesValue,
       initWrapper: wrapper => ({
         ...wrapper,

components/vc-tree-select/hooks/useFilterTreeData.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
-import { toRaw, computed } from 'vue';
+import { computed } from 'vue';
 import type { DefaultOptionType, InternalFieldName, TreeSelectProps } from '../TreeSelect';
 import { fillLegacyProps } from '../utils/legacyUtil';
 
@@ -7,7 +7,7 @@ type GetFuncType<T> = T extends boolean ? never : T;
 type FilterFn = GetFuncType<TreeSelectProps['filterTreeNode']>;
 
 export default (
-  treeData: Ref<DefaultOptionType[]>,
+  treeData: ShallowRef<DefaultOptionType[]>,
   searchValue: Ref<string>,
   {
     treeNodeFilterProp,
@@ -56,24 +56,8 @@ export default (
         }
       }
       return res;
-      // return list
-      //   .map(dataNode => {
-      //     const children = dataNode[fieldChildren];
-
-      //     const match = keepAll || filterOptionFunc(searchValueVal, fillLegacyProps(dataNode));
-      //     const childList = dig(children || [], match);
-
-      //     if (match || childList.length) {
-      //       return {
-      //         ...dataNode,
-      //         [fieldChildren]: childList,
-      //       };
-      //     }
-      //     return null;
-      //   })
-      //   .filter(node => node);
     }
 
-    return dig(toRaw(treeData.value));
+    return dig(treeData.value);
   });
 };

components/vc-tree-select/hooks/useTreeData.ts

@@ -1,5 +1,5 @@
-import type { Ref } from 'vue';
+import type { Ref, ShallowRef } from 'vue';
-import { toRaw, computed } from 'vue';
+import { shallowRef, watch, toRaw } from 'vue';
 import type { DataNode, SimpleModeConfig } from '../interface';
 import { convertChildrenToData } from '../utils/legacyUtil';
 import type { DefaultOptionType } from '../TreeSelect';
@@ -49,20 +49,26 @@ export default function useTreeData(
   treeData: Ref<DataNode[]>,
   children: Ref<VueNode[]>,
   simpleMode: Ref<boolean | SimpleModeConfig>,
-): Ref<DefaultOptionType[]> {
+): ShallowRef<DefaultOptionType[]> {
-  return computed(() => {
+  const mergedTreeData = shallowRef<DefaultOptionType[]>();
+  watch(
+    [simpleMode, treeData, children],
+    () => {
       const simpleModeValue = simpleMode.value;
       if (treeData.value) {
-      return simpleMode.value
+        mergedTreeData.value = simpleMode.value
           ? parseSimpleTreeData(toRaw(treeData.value), {
               id: 'id',
               pId: 'pId',
               rootPId: null,
               ...(simpleModeValue !== true ? simpleModeValue : {}),
             })
-        : treeData.value;
+          : toRaw(treeData.value);
+      } else {
+        mergedTreeData.value = convertChildrenToData(toRaw(children.value));
       }
-
+    },
-    return convertChildrenToData(toRaw(children.value));
+    { immediate: true, deep: true },
-  });
+  );
+  return mergedTreeData;
 }

components/vc-tree/Tree.tsx

@@ -104,12 +104,16 @@ export default defineComponent({
       dragOverNodeKey: null,
     });
     const treeData = shallowRef([]);
-    watchEffect(() => {
+    watch(
+      [() => props.treeData, () => props.children],
+      () => {
         treeData.value =
           props.treeData !== undefined
             ? toRaw(props.treeData)
             : convertTreeToData(toRaw(props.children));
-    });
+      },
+      { immediate: true, deep: true },
+    );
     const keyEntities = shallowRef({});
 
     const focused = ref(false);
@@ -143,7 +147,7 @@ export default defineComponent({
 
     watchEffect(() => {
       if (treeData.value) {
-        const entitiesMap = convertDataToEntities(toRaw(treeData.value), {
+        const entitiesMap = convertDataToEntities(treeData.value, {
           fieldNames: fieldNames.value,
         });
         keyEntities.value = {
@@ -190,19 +194,15 @@ export default defineComponent({
     // ================ flattenNodes =================
     const flattenNodes = shallowRef([]);
     watchEffect(() => {
-      flattenNodes.value = flattenTreeData(
+      flattenNodes.value = flattenTreeData(treeData.value, expandedKeys.value, fieldNames.value);
-        toRaw(treeData.value),
-        toRaw(expandedKeys.value),
-        fieldNames.value,
-      );
     });
     // ================ selectedKeys =================
     watchEffect(() => {
       if (props.selectable) {
         if (props.selectedKeys !== undefined) {
-          selectedKeys.value = calcSelectedKeys(toRaw(props.selectedKeys), props);
+          selectedKeys.value = calcSelectedKeys(props.selectedKeys, props);
         } else if (!init && props.defaultSelectedKeys) {
-          selectedKeys.value = calcSelectedKeys(toRaw(props.defaultSelectedKeys), props);
+          selectedKeys.value = calcSelectedKeys(props.defaultSelectedKeys, props);
         }
       }
     });
@@ -213,12 +213,12 @@ export default defineComponent({
         let checkedKeyEntity;
 
         if (props.checkedKeys !== undefined) {
-          checkedKeyEntity = parseCheckedKeys(toRaw(props.checkedKeys)) || {};
+          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {};
         } else if (!init && props.defaultCheckedKeys) {
-          checkedKeyEntity = parseCheckedKeys(toRaw(props.defaultCheckedKeys)) || {};
+          checkedKeyEntity = parseCheckedKeys(props.defaultCheckedKeys) || {};
         } else if (treeData.value) {
           // If `treeData` changed, we also need check it
-          checkedKeyEntity = parseCheckedKeys(toRaw(props.checkedKeys)) || {
+          checkedKeyEntity = parseCheckedKeys(props.checkedKeys) || {
             checkedKeys: checkedKeys.value,
             halfCheckedKeys: halfCheckedKeys.value,
           };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-vue",
-  "version": "3.1.0-rc.2",
+  "version": "3.1.0-rc.4",
   "title": "Ant Design Vue",
   "description": "An enterprise-class UI design language and Vue-based implementation",
   "keywords": [