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

2023-06-15 11:05:14 +08:00 · 2023-06-15 11:05:14 +08:00 · 58f6d6ee28
parent 7270855ce8 8212237045
commit 58f6d6ee28
16 changed files with 143 additions and 68 deletions
--- a/README.md
+++ b/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.
--- a/components/image/PreviewGroup.tsx
+++ b/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`);
--- a/components/tree-select/demo/basic.vue
+++ b/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',
-        value: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
        children: [
          {
-            title: 'my leaf',
-            value: 'leaf1',
+            label: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                label: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                label: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
          },
          {
-            title: 'your leaf',
-            value: 'leaf2',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
          },
        ],
      },
      {
-        title: 'parent 1-1',
+        label: 'parent 1-1',
        value: 'parent 1-1',
      },
    ],
--- a/components/tree-select/demo/checkable.vue
+++ b/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',
      },
    ],
--- a/components/tree-select/demo/custom-tag-render.vue
+++ b/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',
-        value: 'parent 1-0',
-        color: 'orange',
+        label: 'parent 1',
+        value: 'parent 1',
+        color: 'pink',
        children: [
          {
-            title: 'my leaf',
-            value: 'leaf1',
-            color: 'green',
+            label: 'parent 1-0',
+            value: 'parent 1-0',
+            color: 'orange',
+            children: [
+              {
+                label: 'my leaf',
+                value: 'leaf1',
+                color: 'green',
+              },
+              {
+                label: 'your leaf',
+                value: 'leaf2',
+                color: 'cyan',
+              },
+            ],
          },
          {
-            title: 'your leaf',
-            value: 'leaf2',
-            color: 'cyan',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
+            color: 'blue',
          },
        ],
      },
      {
-        title: 'parent 1-1',
+        label: 'parent 1-1',
        value: 'parent 1-1',
        color: 'blue',
      },
--- a/components/tree-select/demo/highlight.vue
+++ b/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',
-        value: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
        children: [
          {
-            title: 'my leaf',
-            value: 'leaf1',
+            label: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                label: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                label: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
          },
          {
-            title: 'your leaf',
-            value: 'leaf2',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
          },
        ],
      },
      {
-        title: 'parent 1-1',
+        label: 'parent 1-1',
        value: 'parent 1-1',
      },
    ],
--- a/components/tree-select/demo/multiple.vue
+++ b/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',
-        value: 'parent 1-0',
+        label: 'parent 1',
+        value: 'parent 1',
        children: [
          {
-            title: 'my leaf',
-            value: 'leaf1',
+            label: 'parent 1-0',
+            value: 'parent 1-0',
+            children: [
+              {
+                label: 'my leaf',
+                value: 'leaf1',
+              },
+              {
+                label: 'your leaf',
+                value: 'leaf2',
+              },
+            ],
          },
          {
-            title: 'your leaf',
-            value: 'leaf2',
+            label: 'parent 1-1',
+            value: 'parent 1-1',
          },
        ],
      },
      {
-        title: 'parent 1-1',
+        label: 'parent 1-1',
        value: 'parent 1-1',
      },
    ],
--- a/components/tree-select/demo/placement.vue
+++ b/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',
      },
    ],
--- a/components/tree-select/demo/replaceFields.vue
+++ b/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>
--- a/components/tree-select/demo/suffix.vue
+++ b/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>
--- a/components/tree-select/demo/tree-line.vue
+++ b/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>
--- a/components/tree-select/demo/virtual-scroll.vue
+++ 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>
--- a/components/tree-select/index.en-US.md
+++ b/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 |  |  |
--- a/components/tree-select/index.tsx
+++ b/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(
--- a/components/tree-select/index.zh-CN.md
+++ b/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 |  |  |
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@ -66,21 +66,23 @@ export const context = {
  },
 };

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