feat(1.4.7): weekly sync update to 2.7

CHANGELOG.md

@@ -5,6 +5,19 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.4.7 `2023-07-11` 
+### 🚀 Features
+- `Upload`: @chaishi ([#2568](https://github.com/Tencent/tdesign-vue/pull/2568))
+  - 新增组件实例方法，`uploadFilePercent` 用于更新文件上传进度
+  - `theme=image`，支持使用 `fileListDisplay` 自定义 UI 内容
+  - `theme=image`，支持点击名称打开新窗口访问图片，[issue#2338](https://github.com/Tencent/tdesign-vue/issues/2338) 
+  - 拖拽上传场景，支持 `accept` 文件类型限制，[issue#3075](https://github.com/Tencent/tdesign-vue-next/issues/3075)
+- `Dialog`: 为内容区域增加超长时滚动条样式实现 @liweijie0812 ([common#1523](https://github.com/Tencent/tdesign-common/pull/1523))
+### 🐞 Bug Fixes
+- `Alert`: 修复内部自定义元素透明度变化，意外导致 Alert 隐藏的问题 @xiaosansiji ([#2571](https://github.com/Tencent/tdesign-vue/pull/2571))
+- `Upload`: 自定义上传方法，修复未能正确返回上传成功或失败后的文件问题 @chaishi ([#2568](https://github.com/Tencent/tdesign-vue/pull/2568))
+- `Popup`: 修复 `trigger=hover` 时首次鼠标快速移动导致父级关闭的问题 @ikeq ([#2573](https://github.com/Tencent/tdesign-vue/pull/2573))
+
 ## 🌈 1.4.6 `2023-07-04` 
 ### 🚀 Features
 - `DatePicker`: 新增 `onConfirm` 事件 @liweijie0812 ([#2545](https://github.com/Tencent/tdesign-vue/pull/2545))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.4.6-naruto",
+  "version": "1.4.7-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -105,14 +105,14 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",
-    "@babel/core": "~7.16.0",
+    "@babel/core": "~7.22.5",
     "@babel/eslint-parser": "~7.19.1",
     "@babel/plugin-transform-class-properties": "^7.22.3",
     "@babel/plugin-transform-modules-commonjs": "^7.9.6",
     "@babel/plugin-transform-object-assign": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/preset-env": "^7.5.5",
-    "@commitlint/cli": "~17.4.4",
+    "@commitlint/cli": "~17.6.6",
     "@commitlint/config-conventional": "~17.6.5",
     "@rollup/plugin-babel": "^5.1.0",
     "@rollup/plugin-commonjs": "^18.0.0",

src/alert/alert.tsx

@@ -160,7 +160,8 @@ export default mixins(getConfigReceiverMixins<Vue, AlertConfig>('alert'), getGlo
     },
 
     handleCloseEnd(e: TransitionEvent) {
-      if (e.propertyName === 'opacity') {
+      // 只有当前 Alert DOM 元素 opacity 变化时才触发，防止自定义子元素影响
+      if (e.propertyName === 'opacity' && e.target === this.$el) {
         this.visible = false;
         this.$emit('closed', { e });
         if (this.onClosed) {

src/popup/popup.tsx

@@ -305,7 +305,7 @@ export default mixins(classPrefixMixins).extend({
       });
     },
     emitPopVisible(visible: boolean, context: PopupVisibleChangeContext) {
-      if (this.disabled || visible === this.visible) return;
+      if (this.disabled || visible === !!this.visible) return;
       if (!visible && this.visibleState > 1) return;
       if (visible && this.mouseInRange) return;
       this.$emit('visible-change', visible, context);

src/upload/_example/image.vue

@@ -29,7 +29,12 @@
         theme="image"
         tips="请选择单张图片文件上传（上传成功状态演示）"
         accept="image/*"
-      ></t-upload>
+      >
+        <!-- custom UI -->
+        <!-- <template #fileListDisplay="{ files }">
+          <div>{{ JSON.stringify(files) }}</div>
+        </template> -->
+      </t-upload>
 
       <t-upload
         ref="uploadRef2"
@@ -57,6 +62,7 @@
       :formatResponse="formatImgResponse"
     ></t-upload>
 
+    <!-- if you want to hide image name, set .t-upload__card-name { display: none } -->
     <t-upload
       ref="uploadRef4"
       action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"

src/upload/_example/request-method.vue

@@ -7,7 +7,12 @@
       </t-radio-group>
     </div>
 
-    <t-upload v-model="files" :requestMethod="requestMethod" tips="自定义上传方法需要返回成功或失败信息"></t-upload>
+    <t-upload
+      ref="uploadRef"
+      v-model="files"
+      :requestMethod="requestMethod"
+      tips="自定义上传方法需要返回成功或失败信息"
+    ></t-upload>
   </div>
 </template>
 <script>
@@ -35,15 +40,24 @@ export default {
     requestSuccessMethod(file /** UploadFile */) {
       console.log(file, file.raw);
       return new Promise((resolve) => {
-        // file.percent 用于控制上传进度，如果不希望显示上传进度，则不对 file.percent 设置值即可。
-        // 如果代码规范不能设置 file.percent，也可以设置 this.files
-        file.percent = 0;
+        // 控制上传进度
+        let percent = 0;
+        const percentTimer = setInterval(() => {
+          if (percent + 10 < 99) {
+            percent += 10;
+            this.$refs.uploadRef.uploadFilePercent({ file, percent });
+          } else {
+            clearInterval(percentTimer);
+          }
+        }, 100);
+
         const timer = setTimeout(() => {
           // resolve 参数为关键代码
           resolve({ status: 'success', response: { url: 'https://tdesign.gtimg.com/site/avatar.jpg' } });
-          file.percent = 100;
+
           clearTimeout(timer);
-        }, 500);
+          clearInterval(percentTimer);
+        }, 800);
       });
     },
     requestFailMethod(file /** UploadFile */) {

src/upload/constants.ts

@@ -2,6 +2,7 @@ import { PropType } from 'vue';
 import { CommonDisplayFileProps } from './interface';
 
 export const commonProps = {
+  accept: String,
   files: Array as PropType<CommonDisplayFileProps['files']>,
   toUploadFiles: Array as PropType<CommonDisplayFileProps['toUploadFiles']>,
   displayFiles: Array as PropType<CommonDisplayFileProps['displayFiles']>,

src/upload/hooks/useDrag.ts

@@ -1,22 +1,28 @@
-import { ref } from 'vue';
+import { Ref, ref } from 'vue';
+import { getFileList } from '../../_common/js/upload/utils';
 import { TdUploadProps } from '../type';
 
 export interface UploadDragEvents {
-  onDragFileChange?: (e: DragEvent) => void;
+  onDragFileChange?: (files: File[]) => void;
   onDragenter?: TdUploadProps['onDragenter'];
   onDragleave?: TdUploadProps['onDragleave'];
   onDrop?: TdUploadProps['onDrop'];
 }
 
-export default function useDrag(props: UploadDragEvents) {
+export default function useDrag(props: UploadDragEvents, accept: Ref<string>) {
   const target = ref(null);
   const dragActive = ref(false);
 
   const handleDrop = (event: DragEvent) => {
     event.preventDefault();
-    props.onDragFileChange?.(event);
-    props.onDrop?.({ e: event });
     dragActive.value = false;
+
+    const { files } = event.dataTransfer;
+    const dragFiles: File[] = getFileList(files, accept.value);
+    if (!dragFiles.length) return;
+
+    props.onDragFileChange?.(dragFiles);
+    props.onDrop?.({ e: event });
   };
 
   const handleDragenter = (event: DragEvent) => {

src/upload/hooks/useUpload.ts

@@ -19,7 +19,7 @@ import {
   getDisplayFiles,
   formatToUploadFile,
 } from '../../_common/js/upload/main';
-import { getFileUrlByFileRaw } from '../../_common/js/upload/utils';
+import { getFileUrlByFileRaw, getFileList } from '../../_common/js/upload/utils';
 import useVModel from '../../hooks/useVModel';
 import {
   InnerProgressContext,
@@ -88,6 +88,14 @@ export default function useUpload(props: TdUploadProps, context: SetupContext) {
     isBatchUpload: isBatchUpload.value,
   }));
 
+  const uploadFilePercent = (params: { file: UploadFile; percent: number }) => {
+    const { file, percent } = params;
+    const index = toUploadFiles.value.findIndex((item) => file.raw === item.raw);
+    const newFiles = [...toUploadFiles.value];
+    newFiles[index] = { ...newFiles[index], percent };
+    toUploadFiles.value = newFiles;
+  };
+
   const updateFilesProgress = () => {
     if (props.autoUpload) {
       toUploadFiles.value = [...toUploadFiles.value];
@@ -188,7 +196,7 @@ export default function useUpload(props: TdUploadProps, context: SetupContext) {
     toUploadFiles.value = [];
   };
 
-  const onFileChange = (files: FileList) => {
+  const onFileChange = (files: File[]) => {
     if (innerDisabled.value) return;
 
     const params = { currentSelectedFiles: formatToUploadFile([...files], props.format) };
@@ -197,7 +205,6 @@ export default function useUpload(props: TdUploadProps, context: SetupContext) {
 
     validateFile({
       uploadValue: uploadValue.value,
-      // @ts-ignore
       files: [...files],
       allowUploadDuplicateFile: props.allowUploadDuplicateFile,
       max: props.max,
@@ -266,11 +273,12 @@ export default function useUpload(props: TdUploadProps, context: SetupContext) {
   };
 
   const onNormalFileChange = (e: InputEvent) => {
-    onFileChange?.((e.target as HTMLInputElement).files);
+    const fileList = getFileList((e.target as HTMLInputElement).files);
+    onFileChange?.(fileList);
   };
 
-  function onDragFileChange(e: DragEvent) {
-    onFileChange?.(e.dataTransfer.files);
+  function onDragFileChange(files: File[]) {
+    onFileChange?.(files);
   }
 
   /**
@@ -453,6 +461,7 @@ export default function useUpload(props: TdUploadProps, context: SetupContext) {
     innerDisabled,
     xhrReq,
     uploadFiles,
+    uploadFilePercent,
     onFileChange,
     onNormalFileChange,
     onDragFileChange,

src/upload/interface.ts

@@ -3,6 +3,7 @@ import { GlobalConfigProvider } from '../config-provider/type';
 import { TNode } from '../common';
 
 export interface CommonDisplayFileProps {
+  accept: string;
   files: TdUploadProps['files'];
   toUploadFiles: TdUploadProps['files'];
   displayFiles: TdUploadProps['files'];

src/upload/props.ts

@@ -29,7 +29,7 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。<br/>如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示不触发文件变化 */
+  /** 如果是自动上传模式 `autoUpload=true`，表示全部文件上传之前的钩子函数，函数参数为上传的文件，函数返回值决定是否继续上传，若返回值为 `false` 则终止上传。<br/>如果是非自动上传模式 `autoUpload=false`，则函数返回值为 `false` 时表示本次选中的文件不会加入到文件列表中，即不触发 `onChange` 事件 */
   beforeAllFilesUpload: {
     type: Function as PropType<TdUploadProps['beforeAllFilesUpload']>,
   },
@@ -56,7 +56,7 @@ export default {
     type: Boolean,
     default: undefined,
   },
-  /** 用于完全自定义文件列表内容 */
+  /** 用于完全自定义文件列表界面内容(UI)，单文件和多文件均有效 */
   fileListDisplay: {
     type: Function as PropType<TdUploadProps['fileListDisplay']>,
   },
@@ -170,6 +170,8 @@ export default {
   },
   /** 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效 */
   uploadAllFilesInOneRequest: Boolean,
+  /** 是否允许粘贴上传剪贴板中的文件 */
+  uploadPastedFiles: Boolean,
   /** 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 */
   useMockProgress: {
     type: Boolean,
@@ -205,7 +207,7 @@ export default {
   onOneFileSuccess: Function as PropType<TdUploadProps['onOneFileSuccess']>,
   /** 点击图片预览时触发，文件没有预览 */
   onPreview: Function as PropType<TdUploadProps['onPreview']>,
-  /** 上传进度变化时触发，真实进度和模拟进度都会触发。`type=real` 表示真实上传进度，`type=mock` 表示模拟上传进度 */
+  /** 上传进度变化时触发，真实进度和模拟进度都会触发。<br/>⚠️ 原始上传请求，小文件的上传进度只有 0 和 100，故而不会触发 `progress` 事件；只有大文件才有真实的中间进度。如果你希望很小的文件也显示上传进度，保证 `useMockProgress=true` 的情况下，设置 `mockProgressDuration` 为更小的值。<br/>参数 `options.type=real` 表示真实上传进度，`options.type=mock` 表示模拟上传进度 */
   onProgress: Function as PropType<TdUploadProps['onProgress']>,
   /** 移除文件时触发 */
   onRemove: Function as PropType<TdUploadProps['onRemove']>,

src/upload/themes/custom-file.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, toRefs } from 'vue';
 import isFunction from 'lodash/isFunction';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
 import { CommonDisplayFileProps } from '../interface';
@@ -31,7 +31,9 @@ export default defineComponent({
   },
 
   setup(props) {
-    const drag = useDrag(props.dragEvents);
+    const { accept } = toRefs(props);
+
+    const drag = useDrag(props.dragEvents, accept);
     const { dragActive } = drag;
 
     return {

src/upload/themes/dragger-file.tsx

@@ -39,13 +39,13 @@ export default defineComponent({
   },
 
   setup(props) {
-    const { displayFiles } = toRefs(props);
+    const { displayFiles, accept } = toRefs(props);
     const locale = toRef(props, 'locale') as Ref<UploadConfig>;
 
     const { sizeClassNames } = useCommonClassName();
     const uploadPrefix = `${props.classPrefix}-upload`;
 
-    const drag = useDrag(props.dragEvents);
+    const drag = useDrag(props.dragEvents, accept);
     const { dragActive } = drag;
 
     const draggerFileRef = ref();

src/upload/themes/image-card.tsx

@@ -15,6 +15,8 @@ import { CommonDisplayFileProps } from '../interface';
 import { commonProps } from '../constants';
 import { TdUploadProps, UploadFile } from '../type';
 import { abridgeName } from '../../_common/js/upload/utils';
+import { renderTNodeJSX } from '../../utils/render-tnode';
+import Link from '../../link';
 
 export interface ImageCardUploadProps extends CommonDisplayFileProps {
   multiple: TdUploadProps['multiple'];
@@ -128,6 +130,14 @@ export default defineComponent({
   },
 
   render() {
+    // render custom UI with fileListDisplay
+    const customList = renderTNodeJSX(this, 'fileListDisplay', {
+      params: {
+        files: this.displayFiles,
+      },
+    });
+    if (customList) return customList;
+
     const cardItemClasses = `${this.classPrefix}-upload__card-item ${this.classPrefix}-is-background`;
     const { AddIcon } = this.icons;
 
@@ -137,12 +147,20 @@ export default defineComponent({
           {this.displayFiles?.map((file: UploadFile, index: number) => {
             const loadCard = `${this.classPrefix}-upload__card-container ${this.classPrefix}-upload__card-box`;
             const fileName = this.abridgeName ? abridgeName(file.name, ...this.abridgeName) : file.name;
+            const fileNameClassName = `${this.classPrefix}-upload__card-name`;
             return (
               <li class={cardItemClasses} key={index}>
                 {file.status === 'progress' && this.renderProgressFile(file, loadCard)}
                 {file.status === 'fail' && this.renderFailFile(file, index, loadCard)}
                 {!['progress', 'fail'].includes(file.status) && file.url && this.renderMainContent(file, index)}
-                <div class={`${this.classPrefix}-upload__card-name`}>{fileName}</div>
+                {fileName
+                  && (file.url ? (
+                    <Link href={file.url} class={fileNameClassName} target="_blank" hover="color" size="small">
+                      {fileName}
+                    </Link>
+                  ) : (
+                    <span class={fileNameClassName}>{fileName}</span>
+                  ))}
               </li>
             );
           })}

src/upload/themes/multiple-flow-list.tsx

@@ -46,7 +46,7 @@ export default defineComponent({
 
   setup(props) {
     // locale 已经在 useUpload 中统一处理优先级
-    const { uploading, classPrefix } = toRefs(props);
+    const { uploading, classPrefix, accept } = toRefs(props);
     const locale = toRef(props, 'locale') as Ref<UploadConfig>;
     const uploadPrefix = `${classPrefix.value}-upload`;
 
@@ -58,7 +58,7 @@ export default defineComponent({
       TimeFilledIcon: TdTimeFilledIcon,
     });
 
-    const drag = useDrag(props.dragEvents);
+    const drag = useDrag(props.dragEvents, accept);
 
     const uploadText = computed(() => {
       if (uploading.value) return `${locale.value.progress.uploadingText}`;