chore: merge develop

packages/components/affix/__tests__/index.test.jsx

@@ -18,23 +18,23 @@ describe('Affix', () => {
     const wrapper = mount({
       render() {
         return (
-          <Affix offsetTop={offsetTop}>
+          <Affix ref="affixRef" offsetTop={offsetTop}>
             <div style={{ width: `${slotWidth}px`, height: `${slotHeight}px` }}>hello world</div>
           </Affix>
         );
       },
-    }).findComponent(Affix);
-
+    });
+    const { affixRef } = wrapper.vm.$refs;
     // 模拟 affixWrap 的位置
-    vi.spyOn(wrapper.vm.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
+    vi.spyOn(affixRef.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
       top: 5,
       width: slotWidth,
       height: slotHeight,
     }));
 
     it('Test get container', async () => {
       await nextTick();
-      expect(wrapper.vm.scrollContainer).toBe(window);
+      expect(affixRef.scrollContainer).toBe(window);
     });
 
     it('Test the scrolling state', async () => {
@@ -72,23 +72,23 @@ describe('Affix', () => {
       render() {
         return (
           <div class="container" ref="container">
-            <Affix container={this.container} offsetTop={offsetTop}>
+            <Affix ref="affixRef" container={this.container} offsetTop={offsetTop}>
               <div style="width: 100px; height: 20px">hello world</div>
             </Affix>
           </div>
         );
       },
     });
 
-    const affixWrapper = wrapper.findComponent(Affix);
+    const { affixRef } = wrapper.vm.$refs;
 
     it('Test get container', async () => {
       await nextTick();
-      expect(affixWrapper.vm.scrollContainer).toBe(wrapper.vm.container());
+      expect(affixRef.scrollContainer).toBe(wrapper.vm.container());
     });
     // 模拟 affixWrap 的位置
     beforeEach(() => {
-      vi.spyOn(affixWrapper.vm.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
+      vi.spyOn(affixRef.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
         top: 5,
         width: slotWidth,
         height: slotHeight,
@@ -98,14 +98,14 @@ describe('Affix', () => {
     it('Test the scrolling state', async () => {
       // 模拟容器滚动
       wrapper.vm.container().dispatchEvent(new CustomEvent('scroll'));
-      expect(affixWrapper.find('.t-affix').classes()).toContain('t-affix');
+      expect(wrapper.find('.t-affix').classes()).toContain('t-affix');
     });
 
     beforeEach(() => {
       // 模拟绑定
-      window.addEventListener('scroll', affixWrapper.vm.handleScroll);
+      window.addEventListener('scroll', affixRef.handleScroll);
       // 模拟容器的位置
-      vi.spyOn(affixWrapper.vm.scrollContainer, 'getBoundingClientRect').mockImplementation(() => ({
+      vi.spyOn(affixRef.scrollContainer, 'getBoundingClientRect').mockImplementation(() => ({
         top: containerTop,
       }));
     });

packages/components/affix/affix.tsx

@@ -20,7 +20,7 @@ export default defineComponent({
     const affixRef = ref<HTMLElement>(null);
     const placeholderEL = ref(document?.createElement('div')); // 占位节点
     const ticking = ref(false);
-    const binded = ref(false);
+    const isBind = ref(false);
 
     const scrollContainer = ref<ScrollContainerElement>();
     const affixStyle = ref<Record<string, any>>();
@@ -96,21 +96,21 @@ export default defineComponent({
 
     const bindScroll = async () => {
       await nextTick();
-      if (binded.value) return;
+      if (isBind.value) return;
       scrollContainer.value = getScrollContainer(props.container);
       on(scrollContainer.value, 'scroll', handleScroll);
       on(window, 'resize', handleScroll);
-      binded.value = true;
+      isBind.value = true;
     };
 
     const unbindScroll = () => {
-      if (!scrollContainer.value || !binded.value) return;
+      if (!scrollContainer.value || !isBind.value) return;
       off(scrollContainer.value, 'scroll', handleScroll);
       off(window, 'resize', handleScroll);
       if (rAFId) {
         window.cancelAnimationFrame(rAFId);
       }
-      binded.value = false;
+      isBind.value = false;
     };
 
     watch(
@@ -142,22 +142,16 @@ export default defineComponent({
 
     onBeforeUnmount(unbindScroll);
 
-    return {
+    context.expose({
+      scrollContainer,
       affixWrapRef,
-      affixRef,
-      bindScroll,
-      unbindScroll,
       handleScroll,
-      scrollContainer,
-      renderTNodeJSX,
-      affixStyle,
-    };
-  },
-  render() {
-    return (
-      <div ref="affixWrapRef">
-        <div ref="affixRef" style={this.affixStyle}>
-          {this.renderTNodeJSX('default')}
+    });
+
+    return () => (
+      <div ref={affixWrapRef}>
+        <div ref={affixRef} style={affixStyle.value}>
+          {renderTNodeJSX('default')}
         </div>
       </div>
     );

packages/components/anchor/anchor-item.tsx

@@ -2,7 +2,7 @@ import { defineComponent, h, VNodeChild, onMounted, onUnmounted, inject, watch }
 import { ANCHOR_SHARP_REGEXP } from './utils';
 import props from './anchor-item-props';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
-import { AnchorInjectionKey } from './constants';
+import { AnchorInjectionKey } from './consts';
 import { isFunction } from 'lodash-es';
 import { isString } from 'lodash-es';
 

packages/components/anchor/anchor.tsx

@@ -17,7 +17,7 @@ import { SlotReturnValue } from '../common';
 import Affix from '../affix';
 import { TdAnchorProps } from './type';
 import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
-import { AnchorInjectionKey } from './constants';
+import { AnchorInjectionKey } from './consts';
 
 export interface Anchor extends ComponentPublicInstance {
   scrollContainer: ANCHOR_CONTAINER;

packages/components/auto-complete/auto-complete.tsx

@@ -14,9 +14,7 @@ import { useReadonly } from '../hooks/useReadonly';
 
 export default defineComponent({
   name: 'TAutoComplete',
-
   props,
-
   setup(props: TdAutoCompleteProps, { slots }) {
     const { value, modelValue } = toRefs(props);
     const [tValue, setTValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);

packages/components/auto-complete/highlight-option.tsx

@@ -11,14 +11,12 @@ export interface HighlightOptionProps {
 
 export default defineComponent({
   name: 'HighlightOption',
-
   props: {
     /** 联想词 */
     content: String as PropType<HighlightOptionProps['content']>,
     /** 搜索词 */
     keyword: String as PropType<HighlightOptionProps['keyword']>,
   },
-
   setup(props) {
     const classPrefix = usePrefixClass();
     const words = computed<{ list: string[]; keyword?: string }>(() => {

packages/components/avatar/group.tsx

@@ -8,7 +8,6 @@ import { getChildren } from '../utils/render-tnode';
 export default defineComponent({
   name: 'TAvatarGroup',
   props,
-
   setup(props) {
     provide('avatarGroup', props);
     const renderTNodeJSX = useTNodeJSX();

packages/components/breadcrumb/breadcrumb-item.tsx

@@ -28,9 +28,7 @@ const localTBreadcrumbOrigin: LocalTBreadcrumb = {
 export default defineComponent({
   name: 'TBreadcrumbItem',
   inheritAttrs: false,
-  props: {
-    ...props,
-  },
+  props,
   setup(props, { attrs }) {
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();

packages/components/calendar/calendar-cell.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import { useCommonClassName } from '../hooks/useConfig';
 import { useContent } from '../hooks/tnode';
 
-import { useCalendarCellClass } from './hook';
+import { useCalendarCellClass } from './hooks';
 
 // 组件相关的自定义类型
 import { CalendarCell } from './type';

packages/components/calendar/calendar.tsx

@@ -9,10 +9,16 @@ import props from './props';
 import * as utils from './utils';
 import { useConfig } from '../hooks/useConfig';
 import { useContent } from '../hooks/tnode';
-import { useState, useCalendarClass, userController, useColHeaders } from './hook';
+import { useState, useCalendarClass, userController, useColHeaders } from './hooks';
 
 // 组件的一些常量
-import { COMPONENT_NAME, MIN_YEAR, FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DEFAULT_YEAR_CELL_NUMINROW } from './const';
+import {
+  COMPONENT_NAME,
+  MIN_YEAR,
+  FIRST_MONTH_OF_YEAR,
+  LAST_MONTH_OF_YEAR,
+  DEFAULT_YEAR_CELL_NUMINROW,
+} from './consts';
 
 // 子组件
 import { Select as TSelect } from '../select';
@@ -23,12 +29,12 @@ import CalendarCellItem from './calendar-cell';
 
 // 组件相关类型
 import { CalendarCell } from './type';
-import { CalendarRange, YearMonthOption, ModeOption, CellEventOption } from './interface';
+import { CalendarRange, YearMonthOption, ModeOption, CellEventOption } from './types';
 
 // 组件逻辑
 export default defineComponent({
   name: 'TCalendar',
-  props: { ...props },
+  props,
   setup(props, { slots }) {
     const renderContent = useContent();
     const { t, globalConfig } = useConfig(COMPONENT_NAME);

packages/components/calendar/hook/useCalendarClass.ts → packages/components/calendar/hooks/useCalendarClass.ts

@@ -1,9 +1,9 @@
 import { computed } from 'vue';
 
 import { usePrefixClass } from '../../hooks/useConfig';
-import { CalendarState } from '../interface';
+import { CalendarState } from '../types';
 import { TdCalendarProps } from '../type';
-import { COMPONENT_NAME } from '../const';
+import { COMPONENT_NAME } from '../consts';
 
 export function useCalendarClass(props: TdCalendarProps, state: CalendarState) {
   const prefixClass = usePrefixClass(COMPONENT_NAME);

packages/components/calendar/hook/useColHeaders.ts → packages/components/calendar/hooks/useColHeaders.ts

@@ -1,9 +1,9 @@
 import { computed } from 'vue';
 
-import { CellColHeader, CalendarState } from '../interface';
+import { CellColHeader, CalendarState } from '../types';
 import { TdCalendarProps, WeekDay } from '../type';
 import { useConfig } from '../../hooks/useConfig';
-import { COMPONENT_NAME } from '../const';
+import { COMPONENT_NAME } from '../consts';
 import * as utils from '../utils';
 import { isObject } from 'lodash-es';
 

packages/components/calendar/hook/useController.ts → packages/components/calendar/hooks/useController.ts

@@ -2,8 +2,8 @@ import { isFunction } from 'lodash-es';
 import { isBoolean } from 'lodash-es';
 import { computed, nextTick } from 'vue';
 import dayjs from 'dayjs';
-import { COMPONENT_NAME } from '../const';
-import { CalendarState } from '../interface';
+import { COMPONENT_NAME } from '../consts';
+import { CalendarState } from '../types';
 import { TdCalendarProps, ControllerOptions } from '../type';
 import { useConfig } from '../../hooks/useConfig';
 

packages/components/calendar/hook/useState.ts → packages/components/calendar/hooks/useState.ts

@@ -2,10 +2,10 @@ import { reactive, watch } from 'vue';
 import dayjs from 'dayjs';
 
 import { useConfig } from '../../hooks/useConfig';
-import { COMPONENT_NAME } from '../const';
+import { COMPONENT_NAME } from '../consts';
 import { createDefaultCurDate } from '../utils';
 import { TdCalendarProps } from '../type';
-import { CalendarState } from '../interface';
+import { CalendarState } from '../types';
 import { isArray } from 'lodash-es';
 
 export function useState(props: TdCalendarProps) {

packages/components/calendar/utils.ts → packages/components/calendar/utils/index.ts

@@ -1,10 +1,10 @@
 import dayjs from 'dayjs';
 
-import { TdCalendarProps, CalendarCell } from './type';
-import { CalendarState } from './interface';
+import { TdCalendarProps, CalendarCell } from '../type';
+import { CalendarState } from '../types';
 
 // 组件的一些常量
-import { FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DAY_CN_MAP } from './const';
+import { FIRST_MONTH_OF_YEAR, LAST_MONTH_OF_YEAR, DAY_CN_MAP } from '../consts';
 
 /**
  * 获取一个日期是周几（1~7）

packages/components/cascader/cascader-panel.tsx

@@ -6,9 +6,7 @@ import { useCascaderContext } from './hooks';
 
 export default defineComponent({
   name: 'TCascaderPanel',
-
-  props: { ...props },
-
+  props,
   setup(props, { slots }) {
     const { cascaderContext } = useCascaderContext(props);
 

packages/components/cascader/cascader.tsx

@@ -5,10 +5,15 @@ import SelectInput from '../select-input';
 import FakeArrow from '../common-components/fake-arrow';
 import props from './props';
 
-import { CascaderValue, TdSelectInputProps, TdCascaderProps } from './interface';
-import { closeIconClickEffect, handleRemoveTagEffect } from './core/effect';
-import { getPanels, getSingleContent, getMultipleContent } from './core/helper';
-import { getFakeArrowIconClass } from './core/className';
+import { CascaderValue, TdSelectInputProps, TdCascaderProps } from './types';
+import {
+  closeIconClickEffect,
+  handleRemoveTagEffect,
+  getFakeArrowIconClass,
+  getPanels,
+  getSingleContent,
+  getMultipleContent,
+} from './utils';
 
 import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfig';
 import { useCascaderContext } from './hooks';
@@ -18,9 +23,7 @@ import { useReadonly } from '../hooks/useReadonly';
 
 export default defineComponent({
   name: 'TCascader',
-
-  props: { ...props },
-
+  props,
   setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('cascader');
     const classPrefix = usePrefixClass();

packages/components/cascader/components/Item.tsx

@@ -1,13 +1,12 @@
 import { defineComponent, PropType, computed, ref } from 'vue';
 import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-vue-next';
 
-import { getFullPathLabel } from '../core/helper';
-import { getCascaderItemClass, getCascaderItemIconClass } from '../core/className';
+import { getFullPathLabel, getCascaderItemClass, getCascaderItemIconClass } from '../utils';
 
 import Checkbox from '../../checkbox/index';
 import TLoading from '../../loading';
 
-import { CascaderContextType, TreeNodeValue, TreeNode, TdCascaderProps } from '../interface';
+import { CascaderContextType, TreeNodeValue, TreeNode, TdCascaderProps } from '../types';
 import { usePrefixClass, useCommonClassName } from '../../hooks/useConfig';
 import { useGlobalIcon } from '../../hooks/useGlobalIcon';
 import useRipple from '../../hooks/useRipple';

packages/components/cascader/components/Panel.tsx

@@ -1,13 +1,12 @@
 import { defineComponent, PropType, computed, h } from 'vue';
 
 import Item from './Item';
-import { TreeNode, CascaderContextType } from '../interface';
+import { TreeNode, CascaderContextType } from '../types';
 import CascaderProps from '../props';
 import { usePrefixClass, useConfig } from '../../hooks/useConfig';
 import { useTNodeDefault } from '../../hooks/tnode';
 import { getDefaultNode } from '../../utils/render-tnode';
-import { getPanels } from '../core/helper';
-import { expendClickEffect, valueChangeEffect } from '../core/effect';
+import { getPanels, expendClickEffect, valueChangeEffect } from '../utils';
 
 export default defineComponent({
   name: 'TCascaderSubPanel',