chore: release 1.8.4-naruto

CHANGELOG.md

@@ -5,6 +5,29 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.8.4 `2024-01-02` 
+### 🚀 Features
+- `Upload`: 手动上传场景，支持进行粘贴上传 @chaishi ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))
+- `Card`: 支持传入`loadingProps`参数修改加载状态的展示 @iiimix ([#2959](https://github.com/Tencent/tdesign-vue/pull/2959))
+
+### 🐞 Bug Fixes
+- `Upload`: @chaishi 
+   - 修复手动上传时，无法更新上传进度问题 ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))
+    - 修复图片预览时，无法切换预览图片问题 ([#2991](https://github.com/Tencent/tdesign-vue/pull/2991))
+- `Table`: @chaishi 
+    - 横向滚动场景，修复吸顶表头在移动端无法跟随滚动的问题 [#2976](https://github.com/Tencent/tdesign-vue/issues/2976) ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+    - 横向滚动场景，修复横向滚动在有惯性滚动浏览器中的滚动的问题 ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+   -  横向滚动场景，修复在 Windows 场景中，按下鼠标（不松开鼠标）横向滚动时，表头没有跟随滚动的问题 ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+   -  修复可筛选表格，修复筛选值为 `0` 时，筛选图表没有高亮的问题，[#2987](https://github.com/Tencent/tdesign-vue/issues/2987)  ([#2990](https://github.com/Tencent/tdesign-vue/pull/2990))
+- `Pagination`: 将总数单位 `项` 改为 `条` , 保持内容一致性 @dinghuihua ([#2996](https://github.com/Tencent/tdesign-vue/pull/2996))
+- `Radio`: 处理选中状态也会触发 `change` 事件的问题 @betavs ([#3000](https://github.com/Tencent/tdesign-vue/pull/3000))
+- `Textarea`: 修复组件初始处于隐藏状态，可视后未做高度再计算的问题 @azx1573 ([#3003](https://github.com/Tencent/tdesign-vue/pull/3003))
+- `ImageViewer`: 添加defaultScale @sinbadmaster ([#3013](https://github.com/Tencent/tdesign-vue/pull/3013))
+- `Upload`: 修复 `Form` 的 `disabled` 属性没有作用到上传组件部分按钮的问题 @uyarn ([#3012](https://github.com/Tencent/tdesign-vue/pull/3012))
+- `Select`: 修复`naruto`版本`minCollapsedNum`与`disabled` API的功能异常问题  @uyarn
+### 🚧 Others
+- `Popup`: 丰富插件使用方式的使用示例 @uyarn ([#3014](https://github.com/Tencent/tdesign-vue/pull/3014))
+
 ## 🌈 1.8.3 `2023-12-15` 
 ### 🚀 Features
 - `Upload`: 新增支持 `uploadPastedFiles`，用于控制是否允许用户粘贴文件上传，默认允许 @chaishi ([#2966](https://github.com/Tencent/tdesign-vue/pull/2966))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.8.3-naruto",
+  "version": "1.8.4-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -125,7 +125,7 @@
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/experimental-utils": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@typescript-eslint/typescript-estree": "^5.4.0",
+    "@typescript-eslint/typescript-estree": "^6.16.0",
     "@vitejs/plugin-vue2-jsx": "^1.1.0",
     "@vitest/coverage-c8": "^0.28.3",
     "@vitest/ui": "^0.24.3",

site/docs/getting-started.md

@@ -192,4 +192,4 @@ Q: 为什么使用有些组件的时候会出现一些奇怪的错误？
 
 A: 使用组件的时候看到这类错误 `vue.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.` 说明虽然 `package.json` 中设置的版本号为 `^2.6.14`，但实际上安装了 Vue2.7 的版本，可以在 `node_modules` 目录中检查实际安装的版本号。
 
-由于 Vue2.7 和 Vue2.6 不兼容，请务必确保自己安装的版本号是 Vue2.6.x。如果您确实需要使用 Vue2.7 请安装 `tdesign-vue@naruto`
+由于 tdesign-vue 正常版本中使用的 `@vue/composition-api`，无法在 Vue2.7 中使用，使用 tdesign-vue 正常版本时，请确保自己安装的版本号是 Vue2.6.x。如果您确实需要使用 Vue2.7 请安装 `tdesign-vue@naruto`

src/card/_example/custom-loading-props.vue

@@ -0,0 +1,20 @@
+<template>
+  <t-card bordered :title="title" :loading="isLoading" :style="{ width: '400px' }" :loading-props="customProps">
+    {{ infoMessage }}
+  </t-card>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title: '自定义loadingProps Card',
+      isLoading: true,
+      customProps: {
+        text: 'TDesign努力加载中...',
+      },
+      infoMessage: '卡片内容，以描述性为主，可以是文字、图片或图文组合的形式。按业务需求进行自定义组合。',
+    };
+  },
+};
+</script>

src/card/card.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 name | type | default | description | required
@@ -17,9 +18,10 @@ header | String / Slot / Function | - | Typescript：`string \| TNode`。[see mo
 headerBordered | Boolean | false | \- | N
 hoverShadow | Boolean | false | \- | N
 loading | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+loadingProps | Object | - | Loading Component Props。Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | \- | N
-size | String | medium | options：medium/small | N
+size | String | medium | options: medium/small | N
 status | String | - | \- | N
 subtitle | String / Slot / Function | - | card subtitle。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-theme | String | normal | options：normal/poster1/poster2 | N
+theme | String | normal | options: normal/poster1/poster2 | N
 title | String / Slot / Function | - | card title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N

src/card/card.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Card Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -17,6 +18,7 @@ header | String / Slot / Function | - | 卡片顶部内容，优先级高于其
 headerBordered | Boolean | false | 头部是否带分割线，仅在有header时有效 | N
 hoverShadow | Boolean | false | hover时是否有阴影 | N
 loading | Boolean / Slot / Function | false | 加载状态，值为 true 会根据不同的布局显示不同的加载状态，值为 false 则表示非加载状态。也可以使用 Sketon 组件完全自定义加载态呈现内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+loadingProps | Object | - | 透传加载组件(Loading)全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/card/type.ts) | N
 shadow | Boolean | false | 是否显示卡片阴影，默认不显示 | N
 size | String | medium | 尺寸。可选项：medium/small | N
 status | String | - | 卡片状态内容，仅在操作区域不在顶部时有效（即 `theme=poster2` ） | N

src/card/card.tsx

@@ -136,16 +136,7 @@ export default defineComponent({
     },
   },
   render() {
-    if (this.loading) {
-      return renderTNodeJSX(this, 'loading', {
-        defaultNode: (
-          <TLoading>
-            <div class={this.baseCls}></div>
-          </TLoading>
-        ),
-      });
-    }
-    return (
+    const content = (
       <div class={this.baseCls}>
         {this.isHeaderRender ? this.renderHeader() : null}
         {this.showCover ? this.renderCover() : null}
@@ -158,5 +149,12 @@ export default defineComponent({
         )}
       </div>
     );
+
+    if (this.loading) {
+      return renderTNodeJSX(this, 'loading', {
+        defaultNode: <t-loading props={this.loadingProps}>{content}</t-loading>,
+      });
+    }
+    return content;
   },
 });

src/card/props.ts

@@ -54,6 +54,10 @@ export default {
     type: [Boolean, Function] as PropType<TdCardProps['loading']>,
     default: false,
   },
+  /** 透传加载组件(Loading)全部属性 */
+  loadingProps: {
+    type: Object as PropType<TdCardProps['loadingProps']>,
+  },
   /** 是否显示卡片阴影，默认不显示 */
   shadow: Boolean,
   /** 尺寸 */

src/card/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { LoadingProps } from '../loading';
 import { TNode } from '../common';
 
 export interface TdCardProps {
@@ -59,6 +60,10 @@ export interface TdCardProps {
    * @default false
    */
   loading?: boolean | TNode;
+  /**
+   * 透传加载组件(Loading)全部属性
+   */
+  loadingProps?: LoadingProps;
   /**
    * 是否显示卡片阴影，默认不显示
    * @default false

src/hooks/useVirtualScrollNew.ts

@@ -161,7 +161,7 @@ const useVirtualScroll = (container: Ref<HTMLElement>, params: UseVirtualScrollP
 
   // 固定高度场景，可直接通过数据长度计算出最大滚动高度
   watch(
-    () => [[...params.value.data, tScroll, isVirtualScroll, container]],
+    () => [[...params.value.data, tScroll.value, isVirtualScroll.value, container.value]],
     () => {
       if (!isVirtualScroll.value) return;
       const { data } = params.value;

src/image-viewer/const.ts

@@ -6,4 +6,11 @@ export const enum EVENT_CODE {
   esc = 'Escape',
 }
 
+export const DEFAULT_IMAGE_SCALE = {
+  max: 2,
+  min: 0.5,
+  step: 0.5,
+  defaultScale: 1,
+};
+
 export default EVENT_CODE;

src/image-viewer/hooks.ts

@@ -1,5 +1,6 @@
-import { ref } from 'vue';
+import { ref, ComputedRef } from 'vue';
 import { ImageScale } from './type';
+import { DEFAULT_IMAGE_SCALE } from './const';
 
 interface InitTransform {
   translateX: number;
@@ -47,20 +48,17 @@ export function useMirror() {
   return { mirror, onMirror, resetMirror };
 }
 
-export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5 }) {
-  const { max, min, step } = imageScale;
-  const scale = ref(1);
-  const onZoomIn = () => {
-    setScale(scale.value + step);
-  };
-  const onZoomOut = () => {
-    setScale(scale.value - step);
-  };
-  const resetScale = () => {
-    scale.value = 1;
-  };
+export function useScale(imageScale: ComputedRef<ImageScale>) {
+  const {
+    max = DEFAULT_IMAGE_SCALE.max,
+    min = DEFAULT_IMAGE_SCALE.min,
+    defaultScale = DEFAULT_IMAGE_SCALE.defaultScale,
+  } = imageScale.value;
+  const scaleVal = Math.min(Math.max(defaultScale, min), max);
+  const scale = ref(scaleVal);
 
   const setScale = (newScale: number) => {
+    const { max = DEFAULT_IMAGE_SCALE.max, min = DEFAULT_IMAGE_SCALE.min } = imageScale.value;
     let value = newScale;
     if (newScale < min) {
       value = min;
@@ -71,6 +69,18 @@ export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5
     scale.value = value;
   };
 
+  const onZoomIn = () => {
+    const { step = DEFAULT_IMAGE_SCALE.step } = imageScale.value;
+    setScale(scale.value + step);
+  };
+  const onZoomOut = () => {
+    const { step = DEFAULT_IMAGE_SCALE.step } = imageScale.value;
+    setScale(scale.value - step);
+  };
+  const resetScale = () => {
+    scale.value = scaleVal;
+  };
+
   return {
     scale,
     onZoomIn,

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

@@ -9,7 +9,7 @@ closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。
 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/tree/develop/src/image-viewer/type.ts) | N
+imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/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/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `.sync` is supported | N
 defaultIndex | Number | 0 | uncontrolled property | N

src/image-viewer/image-viewer.md

@@ -9,7 +9,7 @@ closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为
 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/tree/develop/src/image-viewer/type.ts) | N
+imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/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/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `.sync` | N
 defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N

src/image-viewer/image-viewer.tsx

@@ -16,7 +16,7 @@ import { setTransform } from '../utils/helper';
 import { TdImageViewerProps } from './type';
 import { useMirror, useRotate, useScale } from './hooks';
 import { formatImages, getOverlay } from './utils';
-import { EVENT_CODE } from './const';
+import { EVENT_CODE, DEFAULT_IMAGE_SCALE } from './const';
 import Image from '../image';
 
 export default defineComponent({
@@ -61,10 +61,11 @@ export default defineComponent({
       isExpand.value = !isExpand.value;
     };
 
+    const imageScaleRef = computed(() => props.imageScale ?? DEFAULT_IMAGE_SCALE);
     const { mirror, onMirror, resetMirror } = useMirror();
     const {
       scale, onZoomIn, onZoomOut, resetScale,
-    } = useScale(props.imageScale);
+    } = useScale(imageScaleRef);
     const { rotate, onRotate, resetRotate } = useRotate();
     const onRest = () => {
       resetMirror();
@@ -236,6 +237,7 @@ export default defineComponent({
                 >
                   <Image
                     alt=""
+                    error=""
                     src={image.thumbnail || image.mainImage}
                     class={`${this.COMPONENT_NAME}__header-img`}
                     onClick={() => this.onImgClick(index)}

src/image-viewer/type.ts

@@ -98,6 +98,7 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
 }
 
 export interface ImageInfo {

src/popup/_example/plugin.vue

@@ -1,8 +1,15 @@
 <template>
-  <t-space>
-    <t-button variant="outline" @click="handleElement1" class="trigger-element1">已渲染的节点1</t-button>
-    <t-button variant="outline" @click="handleElement2" class="trigger-element2">已渲染的节点2</t-button>
-    <t-button variant="outline" @click="handleElement3" class="trigger-element3">已渲染的节点3</t-button>
+  <t-space direction="vertical">
+    <t-button variant="outline" @click="handleElement1" class="trigger-element1">正常的方式打开</t-button>
+    <t-button variant="outline" @click="handleElement2" class="trigger-element2"
+    >通过Plugin打开，并修改不同浮层的配置</t-button
+    >
+    <div>
+      <span>这里是一个日志查询的例子，在很长的日志内容中，日志内容存在换行的情况，可以点击链接进行日志查询操作</span>
+      <a class="trigger-element3" style="color: var(--td-text-color-brand)" @click="handleCreatePopupOffset"
+      >点击此链接，会打开浮层进行跳转操作</a
+      >
+    </div>
   </t-space>
 </template>
 
@@ -12,27 +19,49 @@ import { PopupPlugin } from 'tdesign-vue';
 export default {
   methods: {
     handleElement1() {
-      this.$popup('.trigger-element1', '渲染文本内容', {
-        placement: 'bottom',
-        showArrow: true,
-        trigger: 'hover',
-        destroyOnClose: true,
-      });
+      this.$popup('.trigger-element1', '渲染文本的内容');
     },
     handleElement2() {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      this.$popup('.trigger-element2', (h) => <div>渲染的是DOM节点</div>, {
-        placement: 'top',
-        trigger: 'click',
+      PopupPlugin('.trigger-element2', '渲染文本的内容', {
+        placement: 'right',
+        showArrow: false,
       });
     },
-    handleElement3() {
-      PopupPlugin('.trigger-element3', '渲染文本内容', {
-        placement: 'right',
-        showArrow: true,
-        trigger: 'hover',
+    handleCreatePopupOffset() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      this.$popup('.trigger-element3', (h) => <div>透传popperOptions，在offset里控制节点位置</div>, {
+        placement: 'bottom',
+        popperOptions: {
+          modifiers: [
+            {
+              name: 'offset',
+              trigger: 'click',
+              options: {
+                offset: ({ reference }) => {
+                  const target = document.querySelector('.trigger-element2');
+                  let { lineHeight } = getComputedStyle(target);
+                  if (lineHeight === 'normal') {
+                    const temp = document.createElement('div');
+                    temp.innerText = 't';
+                    document.body.appendChild(temp);
+                    lineHeight = `${temp.offsetHeight}px`;
+                    document.body.removeChild(temp);
+                  }
+                  const isBreakLine = reference.height > parseInt(lineHeight, 10);
+                  return isBreakLine ? [reference.x, -reference.height + 10] : [0, 0];
+                },
+              },
+            },
+          ],
+        },
       });
     },
   },
 };
 </script>
+<style scoped>
+.trigger-element3 {
+  text-decoration: underline;
+  cursor: pointer;
+}
+</style>