Merge branch 'vueComponent:main' into feat/imagePreviewPlaceholder

Author: AhXianGL

.github/workflows/codecov.yml

@@ -10,7 +10,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: cache package-lock.json
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
@@ -27,7 +27,7 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -52,13 +52,13 @@ jobs:
       #     submodules: true
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v1
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
@@ -27,7 +27,7 @@ jobs:
 
       - name: cache node_modules
         id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -43,25 +43,25 @@ jobs:
         uses: actions/checkout@v2
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: cache lib
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: lib
           key: lib-${{ github.sha }}
 
       - name: cache es
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: es
           key: es-${{ github.sha }}
@@ -77,13 +77,13 @@ jobs:
         uses: actions/checkout@v2
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@@ -99,13 +99,13 @@ jobs:
         uses: actions/checkout@v2
 
       - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: package-temp-dir
           key: lock-${{ github.sha }}
 
       - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

components/button/demo/icon.vue

@@ -21,7 +21,7 @@ If you want specific control over the positioning and placement of the `Icon`, t
 
 <template>
   <a-space direction="vertical">
-    <a-space warp>
+    <a-space wrap>
       <a-tooltip title="search">
         <a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
       </a-tooltip>
@@ -32,7 +32,7 @@ If you want specific control over the positioning and placement of the `Icon`, t
       </a-tooltip>
       <a-button :icon="h(SearchOutlined)">Search</a-button>
     </a-space>
-    <a-space warp>
+    <a-space wrap>
       <a-tooltip title="search">
         <a-button shape="circle" :icon="h(SearchOutlined)" />
       </a-tooltip>

components/slider/style/index.tsx

@@ -182,6 +182,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = token => {
         borderRadius: '50%',
         cursor: 'pointer',
         transition: `border-color ${token.motionDurationSlow}`,
+        pointerEvents: 'auto',
 
         '&-active': {
           borderColor: token.colorPrimaryBorder,

components/vc-select/BaseSelect.tsx

@@ -840,6 +840,7 @@ export default defineComponent({
                     customizeRawInputElement,
                     {
                       ref: selectorDomRef,
+                      tabindex: 0,
                     },
                     false,
                     true,
@@ -877,7 +878,11 @@ export default defineComponent({
 
       // Render raw
       if (customizeRawInputElement) {
-        renderNode = selectorNode;
+        renderNode = (
+          <div onKeydown={onInternalKeyDown} onKeyup={onInternalKeyUp}>
+            {selectorNode}
+          </div>
+        );
       } else {
         renderNode = (
           <div

components/vc-select/Selector/MultipleSelector.tsx

@@ -151,7 +151,7 @@ const SelectSelector = defineComponent<SelectorProps>({
     ) {
       const onMouseDown = (e: MouseEvent) => {
         onPreventMouseDown(e);
-        props.onToggleOpen(!open);
+        props.onToggleOpen(!props.open);
       };
       let originData = option;
       // For TreeSelect

components/vc-select/utils/valueUtil.ts

@@ -2,11 +2,13 @@ import type { BaseOptionType, DefaultOptionType, RawValueType, FieldNames } from
 import { warning } from '../../vc-util/warning';
 import type { FlattenOptionData } from '../interface';
 
-function getKey(data: BaseOptionType, index: number) {
+function getKey(data: BaseOptionType, index: number, fieldNames?: FieldNames) {
   const { key } = data;
   let value: RawValueType;
 
-  if ('value' in data) {
+  if (fieldNames && fieldNames.value && data[fieldNames.value] !== undefined) {
+    ({ [fieldNames.value]: value } = data);
+  } else if ('value' in data) {
     ({ value } = data);
   }
 
@@ -54,7 +56,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
         const value = data[fieldValue];
         // Option
         flattenList.push({
-          key: getKey(data, flattenList.length),
+          key: getKey(data, flattenList.length, fieldNames),
           groupOption: isGroupOption,
           data,
           label,
@@ -67,7 +69,7 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
         }
         // Option Group
         flattenList.push({
-          key: getKey(data, flattenList.length),
+          key: getKey(data, flattenList.length, fieldNames),
           group: true,
           data,
           label: grpLabel,