feat(1.5.2): weekly sync update to naruto

.github/workflows/auto-release.yml

@@ -58,7 +58,7 @@ jobs:
           BODY: ${{ github.event.comment.body }}
         run: |
           txt=$(cat CHANGELOG.md)
-          echo "${txt%%##*} $BODY ${txt##*---}" > CHANGELOG.md
+          echo "${txt%%##*}$BODY${txt##*---}" > CHANGELOG.md
           git add .
           git config --local user.email "github-actions[bot]@users.noreply.github.com"
           git config --local user.name "github-actions[bot]"

CHANGELOG.md

@@ -5,6 +5,25 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 1.5.2 `2023-08-01` 
+### 🚀 Features
+- `Table`:
+  - 可筛选表格，支持透传 attrs/style/classNames 属性、样式、类名等信息到自定义组件，[issue#2627](https://github.com/Tencent/tdesign-vue/issues/2627) @chaishi ([#2629](https://github.com/Tencent/tdesign-vue/pull/2629))
+  - 虚拟滚动场景，支持通过行唯一标识跳转到指定行（通过行下标跳转到指定行，以前的版本已支持） @chaishi ([#2643](https://github.com/Tencent/tdesign-vue/pull/2643))
+- `Upload`: 拖拽上传场景，支持 accept 限制可上传的文件类型 @chaishi ([common#1547](https://github.com/Tencent/tdesign-common/pull/1547))
+### 🐞 Bug Fixes
+- `Checkbox`: 支持 `value` 传入 `undefined` @chaishi ([#2623](https://github.com/Tencent/tdesign-vue/pull/2623))
+- `Table`:
+  - 可筛选表格场景，filterValue 透传优化，没有显示写明 value 值的筛选项，不再透传 `undefined` 到子组件，因有些组件的默认值不允许为 undefined @chaishi ([#2623](https://github.com/Tencent/tdesign-vue/pull/2623))
+  - 树形结构表格，修复选中行的值 `selectedRowKeys` 不在数据 `data` 中时，报错问题 @chaishi ([#2629](https://github.com/Tencent/tdesign-vue/pull/2629))
+  - 修复 1.5.0 版本空表格没有显示占位元素问题 @chaishi ([#2641](https://github.com/Tencent/tdesign-vue/pull/2641))
+  - 固定列空数据场景，元素显示错位问题 @chaishi ([#2641](https://github.com/Tencent/tdesign-vue/pull/2641))
+- `Input`: form表单disabled状态下input异常显示clear @sinbadmaster ([#2634](https://github.com/Tencent/tdesign-vue/pull/2634))
+- `Dialog`:
+  - 修复 dialog 初始化时没有执行移动相关的初始化逻辑,导致 image-viewer 小窗口图片查看器无法移动的问题 @yusongh ([#2622](https://github.com/Tencent/tdesign-vue/pull/2622))
+  - 反馈类对话框补齐body class @uyarn ([#2645](https://github.com/Tencent/tdesign-vue/pull/2645))
+- `TreeSelect`: 修复自定义标签，点击关闭异常的问题 @sinbadmaster ([#2631](https://github.com/Tencent/tdesign-vue/pull/2631)) 
+
 ## 🌈 1.5.0 `2023-07-25` 
 ### 🚀 Features
 - `Table`: 新增 `lazyLoad` 表格元素懒加载，当出现在可视区域时，再渲染表格第一屏数据 @chaishi ([#2605](https://github.com/Tencent/tdesign-vue/pull/2605))
@@ -36,7 +55,7 @@ docClass: timeline
   - 修复 `treeNodeModel` 实例未能同步 node 属性的问题
   - 优化节点状态更新时的性能 
 
- ## 🌈 1.4.8 `2023-07-18` 
+## 🌈 1.4.8 `2023-07-18` 
 ### 🚀 Features
 - `DatePicker`: 优化关闭浮层后重置默认选中区域 @honkinglin ([#2585](https://github.com/Tencent/tdesign-vue/pull/2585))
 - `Checkbox`: @chaishi ([#2583](https://github.com/Tencent/tdesign-vue/pull/2583)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.5.0-naruto",
+  "version": "1.5.2-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [
@@ -52,7 +52,7 @@
     "site:preview": "cd site && npm run build:preview",
     "site:intranet": "cd site && npm run build:intranet",
     "postsite:preview": "cp _site/index.html _site/404.html",
-    "prebuild": "rimraf es/* esm/* lib/* cjs/* dist/*",
+    "prebuild": "rimraf es/* esm/* lib/* cjs/* dist/* --glob",
     "build": "cross-env NODE_ENV=production rollup -c script/rollup.config.js && npm run build:tsc",
     "build:tsc": "run-p build:tsc-*",
     "build:tsc-es": "tsc --emitDeclarationOnly -d --outDir es/",
@@ -63,7 +63,7 @@
     "lint": "npm run lint:tsc && eslint --ext .vue,.js,.ts,.tsx ./ --max-warnings 0",
     "lint:tsc": "tsc --emitDeclarationOnly",
     "generate:usage": "node script/generate-usage/index.js",
-    "test": "npm run test:unit && npm run test:snap", 
+    "test": "npm run test:unit && npm run test:snap",
     "test:unit": "vitest run --config vitest.config.js",
     "test:update": "vitest run -u && npm run test:snap-update",
     "test:unit-dev": "vitest",
@@ -165,7 +165,7 @@
     "postcss": "^8.3.11",
     "prettier": "^2.6.2",
     "prismjs": "^1.25.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.1",
     "rollup": "^2.53.2",
     "rollup-plugin-analyzer": "^3.3.0",
     "rollup-plugin-esbuild": "^4.8.2",

script/utils/index.js

@@ -1,6 +1,6 @@
+const fs = require('fs');
 const path = require('path');
 const clc = require('cli-color');
-const fs = require('fs');
 
 function deleteFolderRecursive(path) {
   if (fs.existsSync(path)) {

src/checkbox/group.tsx

@@ -201,7 +201,7 @@ export default defineComponent({
           props={option}
           index={index}
           data={option}
-          checked={this.innerValue.includes(option.value)}
+          checked={this.innerValue?.includes(option.value) || false}
           storeKey={this.storeKey}
           scopedSlots={this.$scopedSlots}
         ></Checkbox>

src/common.ts

@@ -72,7 +72,7 @@ export interface KeysType {
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {
@@ -115,3 +115,7 @@ export interface ScrollToElementParams {
   time?: number;
   behavior?: 'auto' | 'smooth';
 }
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key: string | number;
+}

src/dialog/dialog.tsx

@@ -147,40 +147,47 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
   },
 
   watch: {
-    visible(value) {
-      if (value) {
-        this.animationEnd = false;
-        if ((this.isModal && !this.showInAttachedElement) || this.isFullScreen) {
-          if (this.preventScrollThrough) {
-            document.head.appendChild(this.styleEl);
-          }
+    visible: {
+      handler(value) {
+        if (value) {
+          this.animationEnd = false;
+          if ((this.isModal && !this.showInAttachedElement) || this.isFullScreen) {
+            if (this.preventScrollThrough) {
+              this.$nextTick(() => {
+                document.head.appendChild(this.styleEl);
+              });
+            }
 
+            this.$nextTick(() => {
+              const target = this.$refs.dialog as HTMLElement;
+              if (mousePosition && target) {
+                target.style.transformOrigin = `${mousePosition.x - target.offsetLeft}px ${
+                  mousePosition.y - target.offsetTop
+                }px`;
+              }
+            });
+          }
+          // 清除鼠标焦点 避免entry事件多次触发（按钮弹出弹窗 不移除焦点 立即按Entry按键 会造成弹窗关闭再弹出）
+          (document.activeElement as HTMLElement).blur();
+        } else {
+          this.clearStyleFunc();
+        }
+        // 多个dialog同时存在时使用esc关闭异常 (#1209)
+        this.storeUid(value);
+        this.addKeyboardEvent(value);
+        if (this.isModeLess && this.draggable) {
           this.$nextTick(() => {
-            const target = this.$refs.dialog as HTMLElement;
-            if (mousePosition && target) {
-              target.style.transformOrigin = `${mousePosition.x - target.offsetLeft}px ${
-                mousePosition.y - target.offsetTop
-              }px`;
-            }
+            this.initDragEvent(value);
           });
         }
-        // 清除鼠标焦点 避免entry事件多次触发（按钮弹出弹窗 不移除焦点 立即按Entry按键 会造成弹窗关闭再弹出）
-        (document.activeElement as HTMLElement).blur();
-      } else {
-        this.clearStyleFunc();
-      }
-      // 多个dialog同时存在时使用esc关闭异常 (#1209)
-      this.storeUid(value);
-      this.addKeyboardEvent(value);
-      if (this.isModeLess && this.draggable) {
-        this.initDragEvent(value);
-      }
-      // 父元素为 display: none 时，需要更新子元素，避免 Dialog 前套 Table 组件时，固定列等特性失效
-      if (value && !this.destroyOnClose && requestAnimationFrame) {
-        requestAnimationFrame(() => {
-          updateElement(this);
-        });
-      }
+        // 父元素为 display: none 时，需要更新子元素，避免 Dialog 前套 Table 组件时，固定列等特性失效
+        if (value && !this.destroyOnClose && requestAnimationFrame) {
+          requestAnimationFrame(() => {
+            updateElement(this);
+          });
+        }
+      },
+      immediate: true,
     },
   },
   mounted() {
@@ -433,7 +440,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins<Vue, DialogConfig>('d
       const closeClassName = this.isFullScreen
         ? [`${this.componentName}__close`, `${this.componentName}__close--fullscreen`]
         : `${this.componentName}__close`;
-      const bodyClassName = this.theme === 'default' ? [`${this.componentName}__body`] : [`${this.componentName}__body__icon`];
+      const bodyClassName = this.theme === 'default'
+        ? [`${this.componentName}__body`]
+        : [`${this.componentName}__body`, `${this.componentName}__body__icon`];
 
       const footerContent = renderTNodeJSX(this, 'footer', defaultFooter);
 

src/input/input.tsx

@@ -81,7 +81,7 @@ export default mixins(
     },
     showClear(): boolean {
       return (
-        ((this.value && !this.disabled && this.clearable && !this.readonly) || this.showClearIconOnEmpty)
+        ((this.value && !this.tDisabled && this.clearable && !this.readonly) || this.showClearIconOnEmpty)
         && this.isHover
       );
     },

src/menu/menu-item.tsx

@@ -24,6 +24,7 @@ export default defineComponent({
     const active = computed(() => menu.activeValue.value === props.value);
     const collapsed = computed(() => menu.collapsed?.value);
     const classPrefix = usePrefixClass();
+    const { proxy } = getCurrentInstance();
 
     const classes = computed(() => [
       `${classPrefix.value}-menu__item`,
@@ -44,8 +45,7 @@ export default defineComponent({
 
       if (props.href) {
         window.open(props.href, props.target);
-      } else if (props.to) {
-        const { proxy } = getCurrentInstance();
+      } else if (props.to || props.routerLink) {
         const router = props.router || (proxy as Record<string, any>).$router;
         const methods: string = props.replace ? 'replace' : 'push';
         router[methods](props.to || props.href).catch((err: Error) => {

src/table/_example/filter-controlled.vue

@@ -173,6 +173,11 @@ export default {
             props: {
               firstDayOfWeek: 7,
             },
+            attrs: {
+              'data-id': 'attribute-id-value',
+            },
+            classNames: 'custom-class-name',
+            styles: { fontSize: '14px' },
             // 是否显示重置取消按钮，一般情况不需要显示
             showConfirmAndReset: true,
             // 日期范围是一个组件，重置时需赋值为 []

src/table/_example/tree-select.vue

@@ -170,19 +170,32 @@ export default {
       MessagePlugin.success('获取成功，请打开控制台查看');
     },
 
+    // 虚拟滚动场景：滚动到指定行
     scrollToElement() {
       const { enhancedTableRef } = this.$refs;
-      const treeNodeData = enhancedTableRef.getData('first_level_150');
-      console.log(treeNodeData);
-      // 因为可能会存在前面的元素节点展开，或行展开，故而下标跟序号不一定一样，不一定是 150
-      enhancedTableRef.primaryTableRef.scrollToElement({
-        // 跳转元素下标（第 151 个元素位置）
-        index: treeNodeData.rowIndex - this.selectedRowKeys.length,
+
+      // 方式一：通过行唯一标识跳转到指定行
+      enhancedTableRef.scrollToElement({
+        // 滚动到指定元素
+        key: 'first_level_150',
+        // 如果元素没有被展开，则跳转到父元素所在位置
+        // key: 'second_level_1510',
         // 滚动元素距离顶部的距离（如表头高度）
         top: 47,
         // 高度动态变化场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒。（固定高度不需要这个）
         time: 60,
       });
+
+      // 方式二：通过行下标跳转到指定行（示例代码有效：勿删）
+      // const treeNodeData = enhancedTableRef.getData('first_level_150');
+      // enhancedTableRef.primaryTableRef.scrollToElement({
+      //   // 跳转元素下标（第 151 个元素位置）
+      //   index: treeNodeData.rowIndex - this.expandedRowKeys.length,
+      //   // 滚动元素距离顶部的距离（如表头高度）
+      //   top: 47,
+      //   // 高度动态变化场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒。（固定高度不需要这个）
+      //   time: 60,
+      // });
     },
 
     onRowClick(data) {

src/table/_example/virtual-scroll.vue

@@ -93,8 +93,10 @@ export default {
   methods: {
     scrollToElement() {
       this.$refs.tableRef.scrollToElement({
-        // 跳转元素下标（第 256 个元素位置）
-        index: 255,
+        // 方式一：使用下标跳转到指定行（第 256 个元素位置）
+        // index: 255,
+        // 方式二：使用行唯一标识跳转到指定行（id = 255）
+        key: 255,
         // 滚动元素距离顶部的距离（如表头高度）
         top: 47,
         // 行高度动态变化场景场景下，即 isFixedRowHeight = false。延迟设置元素位置，一般用于依赖不同高度异步渲染等场景，单位：毫秒。（固定高度不需要这个）

src/table/base-table.tsx

@@ -3,6 +3,7 @@ import {
 } from 'vue';
 import pick from 'lodash/pick';
 import isFunction from 'lodash/isFunction';
+import get from 'lodash/get';
 import props from './base-table-props';
 import useTableHeader from './hooks/useTableHeader';
 import useColumnResize from './hooks/useColumnResize';
@@ -24,7 +25,7 @@ import TFoot from './tfoot';
 import log from '../_common/js/log';
 import { getIEVersion } from '../_common/js/utils/helper';
 import { getAffixProps } from './utils';
-import { Styles } from '../common';
+import { ComponentScrollToElementParams, Styles } from '../common';
 import { BaseTableCol, TableRowData } from './type';
 
 export const BASE_TABLE_EVENTS = ['page-change', 'cell-click', 'scroll', 'scrollX', 'scrollY', 'column-resize-change'];
@@ -266,9 +267,26 @@ export default defineComponent({
       addTableResizeObserver(tableRef.value);
     });
 
+    const tableData = computed(() => (isPaginateData.value ? dataSource.value : props.data));
+
+    const scrollToElement = (params: ComponentScrollToElementParams) => {
+      let { index } = params;
+      if (!index && index !== 0) {
+        if (!params.key) {
+          log.error('Table', 'scrollToElement: one of `index` or `key` must exist.');
+          return;
+        }
+        index = tableData.value?.findIndex((item) => get(item, props.rowKey) === params.key);
+        if (index < 0) {
+          log.error('Table', `${params.key} does not exist in data, check \`rowKey\` or \`data\` please.`);
+        }
+      }
+      virtualConfig.scrollToElement({ ...params, index });
+    };
+
     return {
       virtualConfig,
-      scrollToElement: virtualConfig.scrollToElement,
+      scrollToElement,
       columnResizable,
       thList,
       classPrefix,