fix(components): upload photo-wall wrap

docs/en-US/component/upload.md

@@ -39,7 +39,7 @@ Use `list-type` to change the fileList style.
 
 :::demo
 
-upload/photo-album
+upload/photo-wall
 
 :::
 

docs/examples/upload/photo-wall.vue

@@ -28,6 +28,30 @@ const fileList = ref<UploadUserFile[]>([
     name: 'food2.jpeg',
     url: '/images/guide.png',
   },
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+  },
+  {
+    name: 'food2.jpeg',
+    url: '/images/guide.png',
+  },
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+  },
+  {
+    name: 'food2.jpeg',
+    url: '/images/guide.png',
+  },
+  {
+    name: 'food.jpeg',
+    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+  },
+  {
+    name: 'food2.jpeg',
+    url: '/images/guide.png',
+  },
 ])
 
 const dialogImageUrl = ref('')

packages/components/upload/src/upload-list.vue

@@ -99,6 +99,7 @@
         </span>
       </slot>
     </li>
+    <slot name="append"></slot>
   </transition-group>
 </template>
 <script lang="ts" setup>

packages/components/upload/src/upload.vue

@@ -11,38 +11,14 @@
       <template v-if="$slots.file" #default="{ file }">
         <slot name="file" :file="file"></slot>
       </template>
-    </upload-list>
-    <upload-content
-      ref="uploadRef"
-      :type="type"
-      :drag="drag"
-      :action="action"
-      :multiple="multiple"
-      :with-credentials="withCredentials"
-      :headers="headers"
-      :method="method"
-      :name="name"
-      :data="data"
-      :accept="accept"
-      :file-list="uploadFiles"
-      :auto-upload="autoUpload"
-      :list-type="listType"
-      :disabled="disabled"
-      :limit="limit"
-      :http-request="httpRequest"
-      :before-upload="beforeUpload"
-      :on-exceed="onExceed"
-      :on-start="handleStart"
-      :on-progress="handleProgress"
-      :on-success="handleSuccess"
-      :on-error="handleError"
-      :on-remove="handleRemove"
-    >
-      <template #default>
-        <slot v-if="$slots.trigger" name="trigger" />
-        <slot v-if="!$slots.trigger && $slots.default" />
+      <template #append>
+        <upload-content-with-props
+          v-if="listType === 'picture-card'"
+          :key="uploadFiles.length + 1"
+        />
       </template>
-    </upload-content>
+    </upload-list>
+    <upload-content-with-props v-if="listType !== 'picture-card'" />
     <slot v-if="$slots.trigger" />
     <slot name="tip" />
     <upload-list
@@ -60,7 +36,16 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, provide, onBeforeUnmount, toRef, shallowRef } from 'vue'
+import {
+  computed,
+  provide,
+  onBeforeUnmount,
+  toRef,
+  shallowRef,
+  h,
+  defineComponent,
+  useSlots,
+} from 'vue'
 import { uploadContextKey } from '@element-plus/tokens'
 import { useDisabled } from '@element-plus/hooks'
 
@@ -114,4 +99,49 @@ defineExpose({
   /** @description remove the file manually */
   handleRemove,
 })
+
+const slots = useSlots()
+
+const UploadContentWithProps = defineComponent({
+  render() {
+    return h(
+      UploadContent,
+      {
+        ref: 'uploadRef',
+        type: props.type,
+        drag: props.drag,
+        action: props.action,
+        multiple: props.multiple,
+        withCredentials: props.withCredentials,
+        headers: props.headers,
+        method: props.method,
+        name: props.name,
+        data: props.data,
+        accept: props.accept,
+        autoUpload: props.autoUpload,
+        listType: props.listType,
+        disabled: props.disabled,
+        limit: props.limit,
+        fileList: props.fileList,
+        httpRequest: props.httpRequest,
+        beforeUpload: props.beforeUpload,
+        onExceed: props.onExceed,
+        onStart: handleStart,
+        onProgress: handleProgress,
+        onSuccess: handleSuccess,
+        onError: handleError,
+        onRemove: handleRemove,
+      },
+      {
+        default: () => {
+          if (slots.trigger) {
+            return slots.trigger()
+          } else if (slots.default) {
+            return slots.default()
+          }
+        },
+      }
+    )
+  },
+})
 </script>

packages/theme-chalk/src/mixins/utils.scss

@@ -32,7 +32,7 @@
   white-space: nowrap;
 }
 
-@mixin utils-flex-center {
+@mixin utils-inline-flex-center {
   display: inline-flex;
   justify-content: center;
   align-items: center;

packages/theme-chalk/src/upload.scss

@@ -3,7 +3,7 @@
 @use 'common/var' as *;
 
 @include b(upload) {
-  @include utils-flex-center;
+  @include utils-inline-flex-center;
 
   cursor: pointer;
   outline: none;
@@ -39,9 +39,7 @@
     cursor: pointer;
     vertical-align: top;
 
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
+    @include utils-inline-flex-center;
 
     i {
       font-size: 28px;
@@ -293,8 +291,10 @@
     }
   }
 
+  // upload-list
   @include m(picture-card) {
     display: inline-flex;
+    flex-wrap: wrap;
 
     #{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;