chore: release 1.7.1-naruto (#2869)

* feat(anchor): child level (#2816) * feat(anchor): spatial distance calculation adjustments in front of anchor points * refactor(anchor): update common hash * fix(dialog): 修复 Dialog 弹框中打开表格，表格中分页组件信息出现超出省略问题 (#2821) * fix(input): dialog中pagination中input显示不全 * fix(hooks): useResizeObserver * fix(image-viewer): occasionally experiences jittering when closing (#2823) * fix(date-picker): confirm event does not work (#2833) * fix(cascader): effect source abnormal (#2837) * refactor(tree): tree 组件 vue2,vue3 统一业务代码 (#2820) * docs(tree): 添加分支维护备忘 * docs(tree): 完善分支维护说明 * refactor(tree): 改进代码与 vue3 api 的适配能力 * refactor(tree): 修正 treeItem 组件与 vue3 代码适配的问题 * refactor(tree): tree 类型文件更名为 tree-types.ts * refactor(tree): tree 组件使用 useVModel 改进受控逻辑 * fix(tree): tree 组件，修正受控形态下，赋值结果为空时依然更新了选中状态的问题 * test(tree): tree 组件添加测试: actived 受控处理可赋值空值 * test(tree): tree 组件还原 state 示例 * refactor(tree): tree 组件适配 useVModel 方法，完善 vue3 适配方式 * refactor(tree): tree 组件，改进类型的 vue3 适配 * refactor(tree): tree 组件解决 vue3 类型警告问题 * refactor(tree): 解决 vue3 类型告警问题 * refactor(tree): 解决组件引用方式在 vue3 告警的问题 * refactor(tree): 对照 vue3 代码，改进 useVModel 的使用方式 * test(tree): 解决示例在控制台告警的问题 * refactor(tree): 解决 vue3 h 方法差异问题 * refactor(tree): tree 组件，修正 vue3 下 slots 获取方式差异 * refactor(tree): 示例消除 vue2, vue3 差异 * refactor(tree): 解决与 vue3 受控代码保持一致的问题 * refactor(tree): tree 组件统一受控示例 * refactor(tree): 解决 tree 组件数据变更示例适配 vue3 环境需要调整逻辑的问题 * refactor(tree): tree 组件完善示例样式 * refactor(tree): tree 组件完善示例样式 * refactor(tree): tree 组件，示例代码与 vue3 统一 * refactor(tree): 改进代码结构，使用共享对象传递公共数据 * refactor(tree): tree 组件改进代码结构 * refactor(tree): 解决 vue3 未能触发 item render 的问题 * refactor(tree): 改进组件结构 * refactor(tree): 解决 vue3 props.disableCheck 未能正常工作的问题 * refactor(tree): 解决 empty 示例废弃 api 未生效的问题 * refactor(tree): 解决与 vue3 的示例差异 * refactor(tree): tree 组件完善节点操作示例 * refactor(tree): tree 组件完善属性变更逻辑 * refactor(tree): tree 组件，解决 setData 方法未能触发新增属性变更的问题 * refactor(tree): tree 组件，完善同步属性的示例 * refactor(tree): tree 组件虚拟滚动示例，降低节点数量便于调试 * refactor(tree): tree 组件，解决虚拟滚动数据变更的状态异常 * test(tree): tree 组件，屏蔽动画带来的测试概率性差异 * test(tree): tree 组件测试代码格式改进，适配 vue3 项目 * test(tree): tree 组件，测试代码与 vue3 版本统一 * refactor(tree): tree 组件虚拟滚动事件绑定适配 vue3 * test(tree): tree 组件统一vue2/vue3测试代码形式 * test(tree): tree 组件测试用例适配 vue-next 项目 * test(tree): tree 组件，vue2,vue3 统一测试用例 * test(tree): tree 组件，vue2,vue3 统一测试用例 * fix(tree): tree 组件虚拟滚动解决滚动条样式异常问题 * refactor(tree): tree 组件文件名称按规范重命名 * refactor(tree): tree 组件完善 expand-all 示例 * refactor(tree): tree 组件示例样式改进 * refactor(tree): tree 组件改进示例 * refactor(tree): 完善组件示例 * refactor(tree): tree 组件完善示例，分拆不同形式虚拟滚动示例 * refactor(tree): tree 组件改进清空节点的性能 * refactor(tree): tree 组件，完善虚拟滚动示例。变更受控实现 * fix(tree): tree 组件修正受控表现 * fix(tree): tree 组件修正事件触发规则 * test(tree): tree 组件完善单元测试 * chore(tree): tree 组件修改，更新 src/_common * fix(tree): tree 组件, update api * test(tree): tree, update snapshot * refactor(tree-select): 修正类型告警问题 * chore(tree): update common * chore(tree): update example * test(tree): update snapshot * chore: update common * chore(tree): update common * chore: revert style dir delete --------- Co-authored-by: Uyarn <uyarnchen@gmail.com> * feat(Tag): support CheckTagGrup (#2824) * feat(tag): support check-tag-group * refactor: demo * chore: update snapshots * feat: update common * feat(tag-input): support scroll when exceed type is scroll (#2846) * feat(tag-input): support scroll in scroll type * chore: update snapshot * chore: update snapshot * chore: release 1.7.0 (#2847) * chore: release 1.7.0 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: fix changelog content excced plugin size (#2848) * feat(table): radio filter controller improvement (#2850) * fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应变更事件，并触发对应 props 的变更 (#2852) * fix(checkbox): checkbox.disabled does not work dynamicly (#2849) * fix(checkbox): checkbox.disabled does not work dynamicly * fix: lint error * test: update snapshots * chore: update common * chore: update snapshot --------- Co-authored-by: Uyarn <uyarnchen@gmail.com> * fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 (#2861) * fix(tree): tree 组件，setItem 方法设置 checked, actived, expanded 属性时，应当触发相应变更事件，并触发对应 props 的变更 * fix(tree): tree 组件，完善受控逻辑，解决 onChange 事件触发时，组件状态传递有延迟的问题 * test(tree): 完善单元测试，验证 onChange 事件中组件状态得到更新 * chore: release 1.7.1 (#2864) * chore: release 1.7.1 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: release 1.7.1-naruto --------- Co-authored-by: 何鹏 <ontheroad1992@qq.com> Co-authored-by: LoopZhou <13745660+LoopZhou@users.noreply.github.com> Co-authored-by: betavs <34408516+betavs@users.noreply.github.com> Co-authored-by: TabSpace <pillar0514@163.com> Co-authored-by: sheepluo <yaoyanhuoyi@qq.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Oct 23, 2023 · 48e1949 · 48e1949
1 parent 8abf8a2
commit 48e1949
Show file tree

Hide file tree

Showing 118 changed files with 15,669 additions and 16,692 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-vue",
   "purename": "tdesign",
-  "version": "1.6.7-naruto",
+  "version": "1.7.1-naruto",
   "description": "tdesign-vue",
   "title": "tdesign-vue",
   "keywords": [

diff --git a/src/_common b/src/_common
diff --git a/src/anchor/__tests__/anchor-link.test.jsx b/src/anchor/__tests__/anchor-link.test.jsx
@@ -28,7 +28,6 @@ describe('AnchorItem', () => {
     it('should render props correctly', async () => {
       const provide = {
         active: '',
-        handleScrollTo: vi.fn(),
         registerLink: vi.fn(),
         unregisterLink: vi.fn(),
         handleLinkClick: vi.fn(),
@@ -56,7 +55,6 @@ describe('AnchorItem', () => {
       expect(a.element.textContent).toEqual(props.title);
       expect(provide.registerLink).toBeCalledWith(props.href);
       a.trigger('click');
-      expect(provide.handleScrollTo).toBeCalledWith(props.href);
       expect(provide.handleLinkClick).toBeCalledWith({ ...omit(props, 'target'), e: expect.any(MouseEvent) });
       wrapper.setData({
         href: '#test-b',
@@ -107,7 +105,7 @@ describe('AnchorItem', () => {
       });
       expect(wrapper.find('a').attributes('title')).toEqual('');
       expect(wrapper.find('#title').element.outerHTML).toMatchSnapshot();
-      expect(wrapper.find('#default').element.outerHTML).toMatchSnapshot();
+      expect(wrapper.find('#default').element?.outerHTML).toMatchSnapshot();
     });
   });
 });
diff --git a/src/anchor/__tests__/index.test.jsx b/src/anchor/__tests__/index.test.jsx
@@ -145,10 +145,10 @@ describe('Anchor', () => {
       }).findComponent(Anchor);
       const links = wrapper.findAllComponents(AnchorItem);
       links.at(0).find('a').trigger('click');
-      expect(onChange).toBeCalledTimes(1);
-      expect(onChange).toBeCalledWith('#test-a', '');
-      links.at(1).find('a').trigger('click');
       expect(onChange).toBeCalledTimes(2);
+      expect(onChange).toBeCalledWith('#test-b', '');
+      links.at(1).find('a').trigger('click');
+      expect(onChange).toBeCalledTimes(3);
       expect(onChange).toBeCalledWith('#test-b', '#test-a');
     });
   });

diff --git a/src/anchor/_example/customize-highlight.vue b/src/anchor/_example/customize-highlight.vue
@@ -0,0 +1,32 @@
+<template>
+  <t-space>
+    <div class="flex: 1"></div>
+    <t-anchor :bounds="150" :getCurrentAnchor="getCurrentAnchor">
+      <t-anchor-item href="#基础锚点" title="基础锚点"></t-anchor-item>
+      <t-anchor-item href="#多级锚点" title="多级锚点"></t-anchor-item>
+      <t-anchor-item href="#指定容器锚点" title="指定容器锚点"></t-anchor-item>
+      <t-anchor-item href="#特定交互锚点" title="特定交互锚点"></t-anchor-item>
+      <t-anchor-item href="#尺寸" title="尺寸">
+        <t-anchor-item href="#size-1" title="尺寸1">
+          <div id="default">this is children content</div>
+          <div>sdadasas</div>
+        </t-anchor-item>
+        <t-anchor-item href="#size-2" title="尺寸2">
+          <t-anchor-item href="#size-3" title="尺寸1"></t-anchor-item>
+        </t-anchor-item>
+      </t-anchor-item>
+    </t-anchor>
+  </t-space>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      getCurrentAnchor(value) {
+        console.log('value1', value);
+        return value || '#多级锚点';
+      },
+    };
+  },
+};
+</script>
diff --git a/src/anchor/_example/multiple.vue b/src/anchor/_example/multiple.vue
@@ -5,7 +5,10 @@
       <t-anchor-item href="#多级锚点" title="多级锚点"></t-anchor-item>
       <t-anchor-item href="#指定容器锚点" title="指定容器锚点"></t-anchor-item>
       <t-anchor-item href="#特定交互锚点" title="特定交互锚点"></t-anchor-item>
-      <t-anchor-item href="#尺寸" title="尺寸"></t-anchor-item>
+      <t-anchor-item href="#尺寸" title="尺寸">
+        <t-anchor-item href="#size-1" title="尺寸1"></t-anchor-item>
+        <t-anchor-item href="#size-2" title="尺寸2"></t-anchor-item>
+      </t-anchor-item>
     </t-anchor>
   </t-space>
 </template>

diff --git a/src/anchor/anchor-item-props.ts b/src/anchor/anchor-item-props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TdAnchorItemProps } from '../anchor/type';
@@ -20,6 +19,7 @@ export default {
     type: String as PropType<TdAnchorItemProps['target']>,
     default: '_self' as TdAnchorItemProps['target'],
     validator(val: TdAnchorItemProps['target']): boolean {
+      if (!val) return true;
       return ['_self', '_blank', '_parent', '_top'].includes(val);
     },
   },

diff --git a/src/anchor/anchor-item.tsx b/src/anchor/anchor-item.tsx
@@ -1,5 +1,7 @@
 import Vue, { VueConstructor } from 'vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
+import { isEmpty } from 'lodash';
+import { VNode } from 'vue/types/umd';
 import { ANCHOR_SHARP_REGEXP } from './utils';
 import props from './anchor-item-props';
 import { getClassPrefixMixins } from '../config-provider/config-receiver';
@@ -10,7 +12,6 @@ const classPrefixMixins = getClassPrefixMixins('anchor');
 export interface Anchor extends Vue {
   tAnchor: {
     active: string;
-    handleScrollTo(target: string): void;
     registerLink(href: string): void;
     unregisterLink(href: string): void;
     handleLinkClick(link: { href: string; title: string; e: MouseEvent }): void;
@@ -21,6 +22,10 @@ export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
   name: 'TAnchorItem',
   props: {
     ...props,
+    _level: {
+      type: Number,
+      default: 0,
+    },
     href: {
       type: String,
       required: true,
@@ -57,7 +62,6 @@ export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
     },
     handleClick(e: MouseEvent): void {
       const { href, tAnchor, title } = this;
-      tAnchor.handleScrollTo(href);
       tAnchor.handleLinkClick({
         href,
         title: typeof title === 'string' ? title : undefined,
@@ -83,27 +87,59 @@ export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
       return titleVal;
     },
   },
-  render() {
+  render(h) {
     const {
       href, target, $scopedSlots, tAnchor,
     } = this;
     const { default: children, title: titleSlot } = $scopedSlots;
+
     const title = this.renderTitle();
     const titleAttr = typeof title === 'string' ? title : null;
     const isActive = tAnchor.active === href;
+
     const wrapperClass = {
       [`${this.componentName}__item`]: true,
       [this.commonStatusClassName.active]: isActive,
     };
     const titleClass = {
       [`${this.componentName}__item-link`]: true,
     };
+
+    const newLevel = this.$props._level + 1;
+
+    // 这样处理是为了兼容普通节点和组件
+    const h5Tags: VNode[] = [];
+    const anchorItems: VNode[] = [];
+    if (children) {
+      children(null).forEach((child) => {
+        if (isEmpty(child.componentOptions)) {
+          h5Tags.push(h(child.tag, child.data, child.children));
+        } else {
+          anchorItems.push(
+            h(
+              child.componentOptions?.Ctor,
+              {
+                props: {
+                  ...child.componentOptions?.propsData,
+                  _level: newLevel,
+                },
+              },
+              child?.componentOptions?.children,
+            ),
+          );
+        }
+      });
+    }
+
     return (
-      <div class={wrapperClass}>
-        <a href={href} title={titleAttr} class={titleClass} target={target} onClick={this.handleClick}>
-          {titleSlot ? titleSlot(null) : title}
-        </a>
-        {children && children(null)}
+      <div style={{ display: 'contents' }}>
+        <div class={wrapperClass} style={{ '--level': newLevel }}>
+          <a href={href} title={titleAttr} class={titleClass} target={target} onClick={this.handleClick}>
+            {titleSlot ? titleSlot(null) : title}
+          </a>
+          {h5Tags}
+        </div>
+        {anchorItems}
       </div>
     );
   },

diff --git a/src/anchor/anchor-target-props.ts b/src/anchor/anchor-target-props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 export default {

diff --git a/src/anchor/anchor.en-US.md b/src/anchor/anchor.en-US.md
@@ -7,9 +7,10 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 affixProps | Object | - | Typescript：`AffixProps`，[Affix API Documents](./affix?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/anchor/type.ts) | N
 bounds | Number | 5 | \- | N
-container | String / Function | () => (() => window) | Typescript：`ScrollContainer` | N
+container | String / Function | () => (() => window) | Typescript：`ScrollContainer`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 cursor | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+getCurrentAnchor | Function | - | Custom Highlighted Anchor Points。Typescript：`(activeLink: string) => string` | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 targetOffset | Number | 0 | \- | N
 onChange | Function |  | Typescript：`(currentLink: string, prevLink: string) => void`<br/> | N
 onClick | Function |  | Typescript：`(link: { href: string; title: string; e: MouseEvent }) => void`<br/> | N
@@ -26,7 +27,7 @@ click | `(link: { href: string; title: string; e: MouseEvent })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 href | String | - | required | Y
-target | String | _self | options：_self/_blank/_parent/_top | N
+target | String | _self | options: _self/_blank/_parent/_top | N
 title | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 
 ### AnchorTarget Props

diff --git a/src/anchor/anchor.md b/src/anchor/anchor.md
@@ -7,8 +7,9 @@
 -- | -- | -- | -- | --
 affixProps | Object | - | 透传 Affix 组件属性，即让 Anchor 组件支持所有 Affix 组件特性。TS 类型：`AffixProps`，[Affix API Documents](./affix?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/anchor/type.ts) | N
 bounds | Number | 5 | 锚点区域边界 | N
-container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer` | N
+container | String / Function | () => (() => window) | 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`ScrollContainer`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 cursor | Slot / Function | - | 用于自定义选中项左侧游标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+getCurrentAnchor | Function | - | 自定义高亮的锚点	。TS 类型：`(activeLink: string) => string` | N
 size | String | medium | 组件尺寸，small(120px)，medium(200px)，large(320px)。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 targetOffset | Number | 0 | 锚点滚动偏移量 | N
 onChange | Function |  | TS 类型：`(currentLink: string, prevLink: string) => void`<br/>锚点改变时触发 | N

diff --git a/src/anchor/anchor.tsx b/src/anchor/anchor.tsx
@@ -1,5 +1,6 @@
 import Vue, { VueConstructor } from 'vue';
-import type { ScopedSlotReturnValue } from 'vue/types/vnode';
+import { ScopedSlotReturnValue } from 'vue/types/vnode';
+import { isFunction } from 'lodash';
 import { ANCHOR_SHARP_REGEXP, ANCHOR_CONTAINER, getOffsetTop } from './utils';
 import {
   on, off, getScroll, scrollTo, getScrollContainer,
@@ -120,6 +121,7 @@ export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
         this.activeLineStyle = false;
         return;
       }
+
       const { offsetTop: top, offsetHeight: height } = ele;
       this.activeLineStyle = {
         top: `${top}px`,
@@ -145,9 +147,11 @@ export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
      */
     handleLinkClick(link: { href: string; title: string; e: MouseEvent }): void {
       this.$emit('click', link);
-      if (this.onClick) {
-        this.onClick(link);
-      }
+      this.onClick?.(link);
+
+      const { getCurrentAnchor } = this.$props;
+      const newHref = isFunction(getCurrentAnchor) ? getCurrentAnchor(link.href) : link.href;
+      this.handleScrollTo(newHref);
     },
     /**
      * 滚动到指定锚点
@@ -204,11 +208,14 @@ export default mixins(Vue as VueConstructor<Anchor>, classPrefixMixins).extend({
   },
 
   async mounted() {
-    const { active } = this;
     this.getScrollContainer();
-    if (active) {
-      await Vue.nextTick();
-      this.handleScrollTo(active);
+    const { getCurrentAnchor } = this.$props;
+
+    if (isFunction(getCurrentAnchor)) {
+      this.setCurrentActiveLink(getCurrentAnchor(this.active));
+    } else {
+      const href = window?.location.hash;
+      this.setCurrentActiveLink(decodeURIComponent(href));
     }
   },
 

diff --git a/src/anchor/props.ts b/src/anchor/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TdAnchorProps } from './type';
@@ -21,17 +20,22 @@ export default {
   /** 指定滚动的容器。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */
   container: {
     type: [String, Function] as PropType<TdAnchorProps['container']>,
-    default: () => (() => window),
+    default: () => () => window,
   },
   /** 用于自定义选中项左侧游标 */
   cursor: {
     type: Function as PropType<TdAnchorProps['cursor']>,
   },
+  /** 自定义高亮的锚点	 */
+  getCurrentAnchor: {
+    type: Function as PropType<TdAnchorProps['getCurrentAnchor']>,
+  },
   /** 组件尺寸，small(120px)，medium(200px)，large(320px) */
   size: {
     type: String as PropType<TdAnchorProps['size']>,
     default: 'medium' as TdAnchorProps['size'],
     validator(val: TdAnchorProps['size']): boolean {
+      if (!val) return true;
       return ['small', 'medium', 'large'].includes(val);
     },
   },

diff --git a/src/anchor/type.ts b/src/anchor/type.ts
@@ -45,7 +45,11 @@ export interface TdAnchorProps {
    * 锚点被点击时触发
    */
   onClick?: (link: { href: string; title: string; e: MouseEvent }) => void;
-};
+  /**
+   * 自定义高亮的锚点
+   */
+  getCurrentAnchor?: (activeLink: string) => string;
+}
 
 export interface TdAnchorTargetProps {
   /**
@@ -58,7 +62,7 @@ export interface TdAnchorTargetProps {
    * @default div
    */
   tag?: string;
-};
+}
 
 export interface TdAnchorItemProps {
   /**
@@ -76,4 +80,4 @@ export interface TdAnchorItemProps {
    * @default ''
    */
   title?: string | TNode;
-};
+}