Skip to content

Commit

Permalink
[Upload] some features (#3566)
Browse files Browse the repository at this point in the history 
* feat(image-viewer): support closeOnEscKeydown

* feat(Upload): support imageViewerProps

* feat(upload): image Upload support size limit tips

* docs(upload): add docs explanation

* fix(upload): max=1 and multiple=false

* feat(upload): add more params to fileListDisplay

* test: update snapshots

* feat(upload): support cancelUploadButton/uploadButton/showImageFileName

* feat(upload): image viewer

* feat(upload): update api docs

* feat(_common): update commmon
  • Loading branch information
@chaishi
chaishi authored Nov 6, 2023
1 parent 353d5fa commit b3dd066
Show file tree
Hide file tree
Showing 25 changed files with 966 additions and 159 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 2 files
+14 −4 js/upload/main.ts
+1 −1 js/upload/types.ts
10 changes: 6 additions & 4 deletions src/image-viewer/image-viewer.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 5 additions & 3 deletions src/image-viewer/image-viewer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion src/image-viewer/image-viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 6 additions & 0 deletions src/image-viewer/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` 时，默认允许拖拽 */
Expand All @@ -37,6 +42,7 @@ export default {
/** 当前预览图片所在的下标，非受控属性 */
defaultIndex: {
type: Number,
default: 0,
},
/** 模态预览（modal）和非模态预览（modeless) */
mode: {
Expand Down
9 changes: 8 additions & 1 deletion src/image-viewer/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ export interface TdImageViewerProps {
* @default true
*/
closeBtn?: boolean | TNode;
/**
* 按下 ESC 时是否触发图片预览器关闭事件
* @default true
*/
closeOnEscKeydown?: boolean;
/**
* 是否在点击遮罩层时，触发预览关闭
*/
Expand All @@ -31,10 +36,12 @@ export interface TdImageViewerProps {
images?: Array<string | File | ImageInfo>;
/**
* 当前预览图片所在的下标
* @default 0
*/
index?: number;
/**
* 当前预览图片所在的下标，非受控属性
* @default 0
*/
defaultIndex?: number;
/**
Expand All @@ -58,7 +65,7 @@ export interface TdImageViewerProps {
/**
* 触发图片预览的元素，可能是一个预览按钮，可能是一张缩略图，完全自定义
*/
trigger?: string | TNode<{ open: () => void }>;
trigger?: TNode | TNode<{ open: () => void }>;
/**
* 限制预览器缩放的最小宽度和最小高度，仅 `mode=modeless` 时有效
*/
Expand Down
2 changes: 1 addition & 1 deletion src/image-viewer/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[] => {
Expand Down
105 changes: 53 additions & 52 deletions src/upload/__tests__/__snapshots__/vitest-upload.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, fail
<!---->
<!---->
<!---->
</div>
`;

Expand Down Expand Up @@ -326,6 +327,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, progr
<!---->
<!---->
<!---->
</div>
`;

Expand Down Expand Up @@ -488,6 +490,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
<!---->
<!---->
<!---->
</div>
`;

Expand Down Expand Up @@ -650,6 +653,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, succe
<!---->
<!---->
<!---->
</div>
`;

Expand Down Expand Up @@ -783,6 +787,7 @@ exports[`Upload Component > props.draggable: theme=image & draggable=true, waiti
<!---->
<!---->
<!---->
</div>
`;

Expand Down Expand Up @@ -1084,6 +1089,7 @@ exports[`Upload Component > props.theme: theme=file-flow works fine 1`] = `
</div>
<!---->
<!---->
</div>
`;

Expand Down Expand Up @@ -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"
>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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"
>
Expand All @@ -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>
Expand Down Expand Up @@ -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"
>
Expand All @@ -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>
Expand All @@ -1621,5 +1621,6 @@ exports[`Upload Component > props.theme: theme=image-flow works fine 1`] = `
</div>
<!---->
<!---->
</div>
`;
8 changes: 8 additions & 0 deletions src/upload/_example/file-flow-list.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Loading

0 comments on commit b3dd066

Please sign in to comment.