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

README.md

@@ -86,3 +86,5 @@ Become a sponsor and get your logo on our README on Github with a link to your s
 ## [More Sponsor (From Patreon、alipay、wechat、paypal...)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
 
 [![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/104172832)
+
+This project is tested with BrowserStack.

components/image/PreviewGroup.tsx

@@ -1,5 +1,6 @@
 import type { PreviewGroupPreview } from '../vc-image/src/PreviewGroup';
 import PreviewGroup from '../vc-image/src/PreviewGroup';
+import type { ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 
@@ -22,12 +23,17 @@ export const icons = {
   left: <LeftOutlined />,
   right: <RightOutlined />,
 };
+const previewGroupProps = () => ({
+  previewPrefixCls: String,
+  preview: anyType<boolean | PreviewGroupPreview>(),
+});
+export type ImageGroupProps = Partial<ExtractPropTypes<ReturnType<typeof previewGroupProps>>>;
 
 const InternalPreviewGroup = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AImagePreviewGroup',
   inheritAttrs: false,
-  props: { previewPrefixCls: String, preview: anyType<boolean | PreviewGroupPreview>() },
+  props: previewGroupProps(),
   setup(props, { attrs, slots }) {
     const { prefixCls } = useConfigInject('image', props);
     const previewPrefixCls = computed(() => `${prefixCls.value}-preview`);

components/tree-select/demo/basic.vue

@@ -26,10 +26,11 @@ The most basic usage.
     allow-clear
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ label }}</template>
     </template>
   </a-tree-select>
 </template>
@@ -39,25 +40,35 @@ import type { TreeSelectProps } from 'ant-design-vue';
 const value = ref<string>();
 const treeData = ref<TreeSelectProps['treeData']>([
   {
-    title: 'parent 1',
+    label: 'parent 1',
     value: 'parent 1',
     children: [
       {
-        title: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            label: 'parent 1-0',
             value: 'parent 1-0',
             children: [
               {
-            title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
               },
               {
-            title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
               },
             ],
           },
           {
-        title: 'parent 1-1',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+      {
+        label: 'parent 1-1',
         value: 'parent 1-1',
       },
     ],

components/tree-select/demo/checkable.vue

@@ -24,6 +24,7 @@ Multiple and checkable.
     allow-clear
     :show-checked-strategy="SHOW_PARENT"
     placeholder="Please select"
+    tree-node-filter-prop="label"
   />
 </template>
 <script lang="ts" setup>
@@ -34,31 +35,31 @@ const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
 const treeData: TreeSelectProps['treeData'] = [
   {
-    title: 'Node1',
+    label: 'Node1',
     value: '0-0',
     children: [
       {
-        title: 'Child Node1',
+        label: 'Child Node1',
         value: '0-0-0',
       },
     ],
   },
   {
-    title: 'Node2',
+    label: 'Node2',
     value: '0-1',
 
     children: [
       {
-        title: 'Child Node3',
+        label: 'Child Node3',
         value: '0-1-0',
         disabled: true,
       },
       {
-        title: 'Child Node4',
+        label: 'Child Node4',
         value: '0-1-1',
       },
       {
-        title: 'Child Node5',
+        label: 'Child Node5',
         value: '0-1-2',
       },
     ],

components/tree-select/demo/custom-tag-render.vue

@@ -28,15 +28,16 @@ Allows for custom rendering of tags.
     :show-checked-strategy="SHOW_ALL"
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
     <template #tagRender="{ label, closable, onClose, option }">
       <a-tag :closable="closable" :color="option.color" style="margin-right: 3px" @close="onClose">
         {{ label }}&nbsp;&nbsp;
       </a-tag>
     </template>
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ label }}</template>
     </template>
   </a-tree-select>
 </template>
@@ -48,29 +49,41 @@ const SHOW_ALL = TreeSelect.SHOW_ALL;
 const value = ref<string[]>(['parent 1', 'parent 1-0', 'leaf1']);
 const treeData = ref<TreeSelectProps['treeData']>([
   {
-    title: 'parent 1',
+    label: 'parent 1',
     value: 'parent 1',
     color: 'pink',
     children: [
       {
-        title: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
+        color: 'pink',
+        children: [
+          {
+            label: 'parent 1-0',
             value: 'parent 1-0',
             color: 'orange',
             children: [
               {
-            title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
                 color: 'green',
               },
               {
-            title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
                 color: 'cyan',
               },
             ],
           },
           {
-        title: 'parent 1-1',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
+            color: 'blue',
+          },
+        ],
+      },
+      {
+        label: 'parent 1-1',
         value: 'parent 1-1',
         color: 'blue',
       },

components/tree-select/demo/highlight.vue

@@ -27,12 +27,13 @@ Search Value Hightlight
     allow-clear
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
       <template v-else>
         <template
-          v-for="(fragment, i) in title
+          v-for="(fragment, i) in label
             .toString()
             .split(new RegExp(`(?<=${searchValue})|(?=${searchValue})`, 'i'))"
         >
@@ -55,25 +56,35 @@ import { ref, watch } from 'vue';
 const value = ref<string>();
 const treeData = ref<TreeSelectProps['treeData']>([
   {
-    title: 'parent 1',
+    label: 'parent 1',
     value: 'parent 1',
     children: [
       {
-        title: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            label: 'parent 1-0',
             value: 'parent 1-0',
             children: [
               {
-            title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
               },
               {
-            title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
               },
             ],
           },
           {
-        title: 'parent 1-1',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+      {
+        label: 'parent 1-1',
         value: 'parent 1-1',
       },
     ],

components/tree-select/demo/multiple.vue

@@ -27,10 +27,11 @@ Multiple selection usage.
     multiple
     tree-default-expand-all
     :tree-data="treeData"
+    tree-node-filter-prop="label"
   >
-    <template #title="{ value: val, title }">
+    <template #title="{ value: val, label }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">{{ val }}</b>
-      <template v-else>{{ title }}</template>
+      <template v-else>{{ label }}</template>
     </template>
   </a-tree-select>
 </template>
@@ -41,25 +42,35 @@ import type { TreeSelectProps } from 'ant-design-vue';
 const value = ref<string[]>([]);
 const treeData = ref<TreeSelectProps['treeData']>([
   {
-    title: 'parent 1',
+    label: 'parent 1',
     value: 'parent 1',
     children: [
       {
-        title: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
+        children: [
+          {
+            label: 'parent 1-0',
             value: 'parent 1-0',
             children: [
               {
-            title: 'my leaf',
+                label: 'my leaf',
                 value: 'leaf1',
               },
               {
-            title: 'your leaf',
+                label: 'your leaf',
                 value: 'leaf2',
               },
             ],
           },
           {
-        title: 'parent 1-1',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
+          },
+        ],
+      },
+      {
+        label: 'parent 1-1',
         value: 'parent 1-1',
       },
     ],

components/tree-select/demo/placement.vue

@@ -35,6 +35,7 @@ You can manually specify the position of the popup via `placement`.
     :tree-data="treeData"
     :placement="placement"
     :dropdown-match-select-width="false"
+    tree-node-filter-prop="label"
   >
     <template #title="{ value: val, title }">
       <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
@@ -49,25 +50,25 @@ const placement = ref('topLeft' as const);
 const value = ref<string>();
 const treeData = ref<TreeSelectProps['treeData']>([
   {
-    title: 'parent 1',
+    label: 'parent 1',
     value: 'parent 1',
     children: [
       {
-        title: 'parent 1-0',
+        label: 'parent 1-0',
         value: 'parent 1-0',
         children: [
           {
-            title: 'my leaf',
+            label: 'my leaf',
             value: 'leaf1',
           },
           {
-            title: 'your leaf',
+            label: 'your leaf',
             value: 'leaf2',
           },
         ],
       },
       {
-        title: 'parent 1-1',
+        label: 'parent 1-1',
         value: 'parent 1-1',
       },
     ],

components/tree-select/demo/replaceFields.vue

@@ -31,6 +31,7 @@ Replace the title,key and children fields in treeNode with the corresponding fie
       label: 'name',
       value: 'value',
     }"
+    tree-node-filter-prop="name"
   ></a-tree-select>
 </template>
 <script lang="ts" setup>

components/tree-select/demo/suffix.vue

@@ -27,6 +27,12 @@ The most basic usage.
       allow-clear
       tree-default-expand-all
       :tree-data="treeData"
+      :field-names="{
+        children: 'children',
+        value: 'value',
+        label: 'title',
+      }"
+      tree-node-filter-prop="title"
     >
       <template #suffixIcon><SmileOutlined /></template>
     </a-tree-select>
@@ -42,6 +48,12 @@ The most basic usage.
       show-arrow
       tree-default-expand-all
       :tree-data="treeData"
+      :field-names="{
+        children: 'children',
+        value: 'value',
+        label: 'title',
+      }"
+      tree-node-filter-prop="title"
     >
       <template #suffixIcon><SmileOutlined /></template>
     </a-tree-select>

components/tree-select/demo/tree-line.vue

@@ -35,6 +35,7 @@ Use `treeLine` to show the line style.
       placeholder="Please select"
       :tree-line="treeLine && { showLeafIcon }"
       :tree-data="treeData"
+      tree-node-filter-prop="title"
     >
       <template #title="{ value: val, title }">
         <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>

components/tree-select/demo/virtual-scroll.vue

@@ -25,6 +25,7 @@ Use virtual list through `height` prop.
     :height="233"
     :tree-data="treeData"
     :max-tag-count="10"
+    tree-node-filter-prop="title"
   >
     <template #title="{ title, value }">
       <span v-if="value === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>

components/tree-select/index.en-US.md

@@ -24,7 +24,7 @@ Tree selection control.
 | popupClassName | className of dropdown menu | string | - |  | 4.0 |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |  |
 | dropdownStyle | To set the style of the dropdown menu | object | - |  |  |
-| fieldNames | Replace the label,value, key and children fields in treeNode with the corresponding fields in treeData | object | {children:'children', label:'title', key:'key', value: 'value' } |  | 3.0.0 |
+| fieldNames | Replace the label,value and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', label:'title', value:'value' } |  | 3.0.0 |
 | filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function |  |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | () => document.body |  |  |
 | labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: VNode, halfChecked: string[]}` | boolean | false |  |  |

components/tree-select/index.tsx

@@ -109,6 +109,8 @@ const TreeSelect = defineComponent({
     notFoundContent?: any;
     default?: any;
     leafIcon?: any;
+    tagRender?: any;
+    suffixIcon?: any;
   }>,
   setup(props, { attrs, slots, expose, emit }) {
     warning(

components/tree-select/index.zh-CN.md

@@ -25,7 +25,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y5pcQLplFu4AAA
 | popupClassName | 下拉菜单的 className 属性 | string | - |  | 4.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |  |
 | dropdownStyle | 下拉菜单的样式 | object | - |  |  |
-| fieldNames | 替换 treeNode 中 label,value,key,children 字段为 treeData 中对应的字段 | object | {children:'children', label:'title', value: 'value' } |  | 3.0.0 |
+| fieldNames | 替换 treeNode 中 label,value,children 字段为 treeData 中对应的字段 | object | {children:'children', label:'title', value: 'value' } |  | 3.0.0 |
 | filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function |  |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body |  |  |
 | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false |  |  |

components/vc-image/src/PreviewGroup.tsx

@@ -66,11 +66,7 @@ export const context = {
   },
 };
 
-const Group = defineComponent({
+export const imageGroupProps = () => ({
-  compatConfig: { MODE: 3 },
-  name: 'PreviewGroup',
-  inheritAttrs: false,
-  props: {
   previewPrefixCls: String,
   preview: {
     type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
@@ -80,7 +76,13 @@ const Group = defineComponent({
     type: Object as PropType<PreviewProps['icons']>,
     default: () => ({}),
   },
-  },
+});
+
+const Group = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'PreviewGroup',
+  inheritAttrs: false,
+  props: imageGroupProps(),
   setup(props, { slots }) {
     const preview = computed<PreviewGroupPreview>(() => {
       const defaultValues = {