[Upload] some features

src/image-viewer/image-viewer.en-US.md

@@ -6,19 +6,21 @@
 name | type | default | description | required
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
 imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-index | Number | - | `v-model:index` is supported | N
-defaultIndex | Number | - | uncontrolled property | N
+index | Number | 0 | `v-model:index` is supported | N
+defaultIndex | Number | 0 | uncontrolled property | N
 mode | String | modal | options: modal/modeless | N
 navigationArrow | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 showOverlay | Boolean | undefined | \- | N
 title | String / Slot / Function | - | preview title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-trigger | String / Slot / Function | - | trigger element。Typescript：`string \| TNode<{ open: () => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+trigger | String / Slot / Function | - | trigger element。Typescript：`TNode \| TNode<{ open: () => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 viewerScale | Object | - | Typescript：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
+visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N
+defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
 zIndex | Number | - | \- | N
 onClose | Function |  | Typescript：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`<br/> | N
 onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/> | N

src/image-viewer/image-viewer.md

@@ -34,19 +34,21 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
 imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
-index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
-defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N
+index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
+defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N
 mode | String | modal | 模态预览（modal）和非模态预览（modeless)。可选项：modal/modeless | N
 navigationArrow | Boolean / Slot / Function | true | 切换预览图片的左图标，可自定义。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 showOverlay | Boolean | undefined | 是否显示遮罩层。`mode=modal` 时，默认显示；`mode=modeless` 时，默认不显示 | N
 title | String / Slot / Function | - | 预览标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`string \| TNode<{ open: () => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+trigger | String / Slot / Function | - | 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义。TS 类型：`TNode \| TNode<{ open: () => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 viewerScale | Object | - | 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效。TS 类型：`ImageViewerScale` `interface ImageViewerScale { minWidth: number; minHeight: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/image-viewer/type.ts) | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
+defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
 zIndex | Number | - | 层级，默认为 2000 | N
 onClose | Function |  | TS 类型：`(context: { trigger: 'close-btn' \| 'overlay' \| 'esc'; e: MouseEvent \| KeyboardEvent }) => void`<br/>关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N
 onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N

src/image-viewer/image-viewer.tsx

@@ -110,7 +110,9 @@ export default defineComponent({
           onZoomOut();
           break;
         case EVENT_CODE.esc:
-          onClose({ e, trigger: 'esc' });
+          if (props.closeOnEscKeydown) {
+            onClose({ e, trigger: 'esc' });
+          }
           break;
         default:
           break;

src/image-viewer/props.ts

@@ -13,6 +13,11 @@ export default {
     type: [Boolean, Function] as PropType<TdImageViewerProps['closeBtn']>,
     default: true as TdImageViewerProps['closeBtn'],
   },
+  /** 按下 ESC 时是否触发图片预览器关闭事件 */
+  closeOnEscKeydown: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否在点击遮罩层时，触发预览关闭 */
   closeOnOverlay: Boolean,
   /** 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 */
@@ -37,6 +42,7 @@ export default {
   /** 当前预览图片所在的下标，非受控属性 */
   defaultIndex: {
     type: Number,
+    default: 0,
   },
   /** 模态预览（modal）和非模态预览（modeless) */
   mode: {

src/image-viewer/type.ts

@@ -12,6 +12,11 @@ export interface TdImageViewerProps {
    * @default true
    */
   closeBtn?: boolean | TNode;
+  /**
+   * 按下 ESC 时是否触发图片预览器关闭事件
+   * @default true
+   */
+  closeOnEscKeydown?: boolean;
   /**
    * 是否在点击遮罩层时，触发预览关闭
    */
@@ -31,10 +36,12 @@ export interface TdImageViewerProps {
   images?: Array<string | File | ImageInfo>;
   /**
    * 当前预览图片所在的下标
+   * @default 0
    */
   index?: number;
   /**
    * 当前预览图片所在的下标，非受控属性
+   * @default 0
    */
   defaultIndex?: number;
   /**
@@ -58,7 +65,7 @@ export interface TdImageViewerProps {
   /**
    * 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义
    */
-  trigger?: string | TNode<{ open: () => void }>;
+  trigger?: TNode | TNode<{ open: () => void }>;
   /**
    * 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效
    */

src/image-viewer/utils.ts

@@ -33,7 +33,7 @@ export const downloadFile = function (imgSrc: string) {
 };
 
 const isImageInfo = (image: string | File | ImageInfo): image is ImageInfo => {
-  return !isString(image) && !(image instanceof File);
+  return !!image && !isString(image) && !(image instanceof File);
 };
 
 export const formatImages = (images: TdImageViewerProps['images']): ImageInfo[] => {

src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap

@@ -159,6 +159,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, fail
   <!---->
   <!---->
   <!---->
+
 </div>
 `;
 
@@ -326,6 +327,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, progr
   <!---->
   <!---->
   <!---->
+
 </div>
 `;
 
@@ -488,6 +490,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
   <!---->
   <!---->
   <!---->
+
 </div>
 `;
 
@@ -650,6 +653,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
   <!---->
   <!---->
   <!---->
+
 </div>
 `;
 
@@ -783,6 +787,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, waiti
   <!---->
   <!---->
   <!---->
+
 </div>
 `;
 
@@ -1084,6 +1089,7 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
   </div>
   <!---->
   <!---->
+
 </div>
 `;
 
@@ -1206,7 +1212,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             <div
               class="t-upload__card-mask"
             >
-
+              <!---->
               <span
                 class="t-upload__card-mask-item t-upload__delete"
               >
@@ -1226,8 +1232,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <svg
+              class="t-icon t-icon-check-circle-filled"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
             img.txt
           </p>
         </li>
@@ -1331,8 +1349,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <svg
+              class="t-icon t-icon-check-circle-filled"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
             img1.txt
           </p>
         </li>
@@ -1436,8 +1466,20 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <svg
+              class="t-icon t-icon-time-filled"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 23a11 11 0 110-22 11 11 0 010 22zm1-17.5h-2v6.91l4 4L16.41 15 13 11.59V5.5z"
+                fill="currentColor"
+              />
+            </svg>
             img2.txt
           </p>
         </li>
@@ -1471,29 +1513,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             <div
               class="t-upload__card-mask"
             >
-              <span
-                class="t-upload__card-mask-item"
-              >
-                <svg
-                  class="t-icon t-icon-browse"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <g
-                    clipPath="url(#clip0_8726_7319)"
-                  >
-                    <path
-                      d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
-                      fill="currentColor"
-                    />
-                  </g>
-                </svg>
-                <span
-                  class="t-upload__card-mask-item-divider"
-                />
-              </span>
+              <!---->
               <span
                 class="t-upload__card-mask-item t-upload__delete"
               >
@@ -1513,8 +1533,9 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <!---->
             img3.txt
           </p>
         </li>
@@ -1561,29 +1582,7 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             <div
               class="t-upload__card-mask"
             >
-              <span
-                class="t-upload__card-mask-item"
-              >
-                <svg
-                  class="t-icon t-icon-browse"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <g
-                    clipPath="url(#clip0_8726_7319)"
-                  >
-                    <path
-                      d="M2.1 12a10.5 10.5 0 0019.8 0 10.5 10.5 0 00-19.8 0zm-2.01-.3a12.5 12.5 0 0123.82 0l.1.3-.1.3a12.5 12.5 0 01-23.82 0l-.1-.3.1-.3zM12 9a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0z"
-                      fill="currentColor"
-                    />
-                  </g>
-                </svg>
-                <span
-                  class="t-upload__card-mask-item-divider"
-                />
-              </span>
+              <!---->
               <span
                 class="t-upload__card-mask-item t-upload__delete"
               >
@@ -1603,8 +1602,9 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
             </div>
           </div>
           <p
-            class="t-upload__card-name"
+            class="t-upload__card-name t-upload__flow-status"
           >
+            <!---->
             img4.txt
           </p>
         </li>
@@ -1621,5 +1621,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
   </div>
   <!---->
   <!---->
+
 </div>
 `;

src/upload/_example/file-flow-list.vue

@@ -25,6 +25,7 @@
       :allow-upload-duplicate-file="allowUploadDuplicateFile"
       :is-batch-upload="isBatchUpload"
       :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
+      :format-response="formatResponse"
     ></t-upload>
   </t-space>
 </template>
@@ -41,4 +42,11 @@ const showThumbnail = ref(false);
 const allowUploadDuplicateFile = ref(false);
 const isBatchUpload = ref(false);
 const uploadAllFilesInOneRequest = ref(false);
+
+const formatResponse = (res) => {
+  if (!res) {
+    return { status: 'fail', error: '上传失败，原因：文件过大或网络不通' };
+  }
+  return res;
+};
 </script>