refactor(select): components optimization

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

@@ -4,7 +4,7 @@ import { TdAutoCompleteProps } from './type';
 import TInput, { InputProps, StrInputProps } from '../input';
 import Popup, { PopupProps } from '../popup';
 import useCommonClassName from '../hooks/useCommonClassName';
-import AutoCompleteOptionList from './option-list';
+import AutoCompleteOptionList from './components/option-list';
 import useVModel from '../hooks/useVModel';
 import { useConfig } from '../config-provider/hooks/useConfig';
 import { ClassName } from '../common';

packages/components/auto-complete/option-list.tsx → packages/components/auto-complete/components/option-list.tsx

@@ -1,18 +1,15 @@
 import { ref, computed, defineComponent, PropType, h, watch, onBeforeUnmount } from 'vue';
-import { isFunction } from 'lodash-es';
-import HighlightOption from './highlight-option';
-import { CommonClassNameType } from '../hooks/useCommonClassName';
-import { AutoCompleteOptionObj, TdAutoCompleteProps } from './type';
+import { isFunction, isString, escapeRegExp } from 'lodash-es';
+import HighlightOption from '../highlight-option';
+import { CommonClassNameType } from '../../hooks/useCommonClassName';
+import { AutoCompleteOptionObj, TdAutoCompleteProps } from '../type';
 import log from '@tdesign/common-js/log/index';
-import { useConfig, usePrefixClass } from '../hooks/useConfig';
-import { on, off } from '../utils/dom';
-import { isString } from 'lodash-es';
-import { escapeRegExp } from 'lodash-es';
+import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+import { on, off } from '../../utils/dom';
 import { ARROW_UP_REG, ARROW_DOWN_REG, ENTER_REG } from '@tdesign/common-js/common';
 
 export default defineComponent({
   name: 'AutoCompleteOptionList',
-
   props: {
     sizeClassNames: Object as PropType<CommonClassNameType['sizeClassNames']>,
     value: String,
@@ -24,9 +21,7 @@ export default defineComponent({
     filter: Function as PropType<TdAutoCompleteProps['filter']>,
     empty: [String, Function] as PropType<TdAutoCompleteProps['empty']>,
   },
-
   emits: ['select'],
-
   setup(props, { emit, slots, expose }) {
     const active = ref('');
     const classPrefix = usePrefixClass();

packages/components/loading/plugin.tsx

@@ -31,14 +31,8 @@ function createLoading(props: TdLoadingProps): LoadingInstance {
   const component = defineComponent({
     setup() {
       const loadingOptions = reactive(mergedProps);
-      return {
-        loadingOptions,
-      };
-    },
-    render() {
-      return h(LoadingComponent, {
-        ...this.loadingOptions,
-      });
+
+      return () => h(LoadingComponent, loadingOptions);
     },
   });
 

packages/components/select/select-panel.tsx → packages/components/select/components/select-panel.tsx

@@ -1,16 +1,16 @@
 import { computed, defineComponent, inject, Slots, ref } from 'vue';
 import { omit } from 'lodash-es';
-import { Styles } from '../common';
+import { Styles } from '../../common';
 
-import { SelectOption, SelectOptionGroup, TdOptionProps } from './type';
-import Option from './option';
-import OptionGroup from './option-group';
-import TdSelectProps from './props';
+import { SelectOption, SelectOptionGroup, TdOptionProps } from '../type';
+import Option from '../option';
+import OptionGroup from '../option-group';
+import TdSelectProps from '../props';
 
-import { useTNodeJSX, useTNodeDefault } from '../hooks/tnode';
-import { useConfig, usePrefixClass } from '../hooks/useConfig';
-import { usePanelVirtualScroll } from './hooks/usePanelVirtualScroll';
-import { selectInjectKey } from './consts';
+import { useTNodeJSX, useTNodeDefault } from '../../hooks/tnode';
+import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+import { usePanelVirtualScroll } from '../hooks/usePanelVirtualScroll';
+import { selectInjectKey } from '../consts';
 
 export default defineComponent({
   name: 'TSelectPanel',
@@ -134,32 +134,24 @@ export default defineComponent({
         {!isEmpty.value && renderOptionsContent(options)}
       </div>
     );
-    return {
-      renderPanel,
-      panelStyle,
-      cursorStyle,
-      isVirtual,
-      displayOptions,
-      visibleData,
-      renderTNodeJSX,
+
+    return () => {
+      return isVirtual.value ? (
+        <>
+          {renderTNodeJSX('panelTopContent')}
+          <div>
+            <div style={cursorStyle.value}></div>
+            {renderPanel(visibleData.value, panelStyle.value)}
+          </div>
+          {renderTNodeJSX('panelBottomContent')}
+        </>
+      ) : (
+        <>
+          {renderTNodeJSX('panelTopContent')}
+          {renderPanel(displayOptions.value)}
+          {renderTNodeJSX('panelBottomContent')}
+        </>
+      );
     };
   },
-  render() {
-    return this.isVirtual ? (
-      <>
-        {this.renderTNodeJSX('panelTopContent')}
-        <div>
-          <div style={this.cursorStyle}></div>
-          {this.renderPanel(this.visibleData, this.panelStyle)}
-        </div>
-        {this.renderTNodeJSX('panelBottomContent')}
-      </>
-    ) : (
-      <>
-        {this.renderTNodeJSX('panelTopContent')}
-        {this.renderPanel(this.displayOptions)}
-        {this.renderTNodeJSX('panelBottomContent')}
-      </>
-    );
-  },
 });

packages/components/select/select.tsx

@@ -8,7 +8,7 @@ import { get } from 'lodash-es';
 import { intersection } from 'lodash-es';
 import FakeArrow from '../common-components/fake-arrow';
 import SelectInput from '../select-input';
-import SelectPanel from './select-panel';
+import SelectPanel from './components/select-panel';
 import props from './props';
 // hooks
 import { useDisabled } from '../hooks/useDisabled';

packages/components/tree-select/index.ts

@@ -3,6 +3,6 @@ import withInstall from '../utils/withInstall';
 
 import './style';
 
-export * from './interface';
+export * from './types';
 export const TreeSelect = withInstall(_TreeSelect);
 export default TreeSelect;

packages/components/tree-select/tree-select.tsx

@@ -11,7 +11,7 @@ import SelectInput, { TdSelectInputProps } from '../select-input';
 import FakeArrow from '../common-components/fake-arrow';
 import { PopupVisibleChangeContext } from '../popup';
 
-import { INodeOptions } from './interface';
+import { INodeOptions } from './types';
 import { TreeSelectValue, TdTreeSelectProps, TreeSelectValueChangeTrigger } from './type';
 import { TreeOptionData } from '../common';
 import props from './props';

packages/components/typography/ellipsis.tsx → packages/components/typography/components/ellipsis.tsx

@@ -1,17 +1,15 @@
 import { defineComponent, computed, ref } from 'vue';
-import { usePrefixClass } from '../hooks/useConfig';
-import props from './paragraph-props';
-import TTooltip from '../tooltip/index';
-import { useConfig } from '../config-provider/hooks/useConfig';
+import { usePrefixClass } from '../../hooks/useConfig';
+import props from '../paragraph-props';
+import TTooltip from '../../tooltip/index';
+import { useConfig } from '../../config-provider/hooks/useConfig';
 
-import type { TypographyEllipsis } from './type';
+import type { TypographyEllipsis } from '../type';
 
 export default defineComponent({
   name: 'TEllipsis',
   components: { TTooltip },
-  props: {
-    ...props,
-  },
+  props,
   setup(props, { slots }) {
     const COMPONENT_NAME = usePrefixClass('typography');
     const { globalConfig } = useConfig('typography');

packages/components/typography/paragraph.tsx

@@ -2,7 +2,7 @@ import { defineComponent, computed, PropType } from 'vue';
 import { usePrefixClass } from '../hooks/useConfig';
 import props from './paragraph-props';
 import TTooltip from '../tooltip/index';
-import Ellipsis from './ellipsis';
+import Ellipsis from './components/ellipsis';
 
 export default defineComponent({
   name: 'TTypographyParagraph',

packages/components/typography/text.tsx

@@ -3,7 +3,7 @@ import { usePrefixClass } from '../hooks/useConfig';
 import props from './text-props';
 import copy from './utils/copy-to-clipboard';
 import { CopyIcon, CheckIcon } from 'tdesign-icons-vue-next';
-import Ellipsis from './ellipsis';
+import Ellipsis from './components/ellipsis';
 import TTooltip from '../tooltip';
 import TButton from '../button';
 import { useConfig } from '../config-provider/hooks/useConfig';

packages/components/typography/title.tsx

@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue';
 import { usePrefixClass } from '../hooks/useConfig';
 import props from './title-props';
-import Ellipsis from './ellipsis';
+import Ellipsis from './components/ellipsis';
 import { useContent } from '../hooks/tnode';
 
 export default defineComponent({

packages/components/typography/typography.tsx

@@ -1,11 +1,9 @@
 import { defineComponent } from 'vue';
 import { useTNodeJSX } from '../hooks/tnode';
-
 import Text from './text';
 
 export default defineComponent({
   name: 'TTypography',
-
   setup() {
     const renderTNodeJSX = useTNodeJSX();
     return () => {

packages/components/upload/themes/custom-file.tsx → packages/components/upload/components/custom-file.tsx

@@ -1,9 +1,9 @@
 import { defineComponent, PropType, toRefs } from 'vue';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import { useContent } from '../../hooks/tnode';
-import { TdUploadProps } from '../type';
+import { TdUploadProps } from '../types';
 
 export interface CustomFileProps extends CommonDisplayFileProps {
   dragEvents: UploadDragEvents;
@@ -17,7 +17,6 @@ export interface CustomFileProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadCustomFile',
-
   props: {
     ...commonProps,
     dragEvents: Object as PropType<CustomFileProps['dragEvents']>,
@@ -28,7 +27,6 @@ export default defineComponent({
     triggerUpload: Function as PropType<CustomFileProps['triggerUpload']>,
     childrenNode: [String, Function] as PropType<CustomFileProps['childrenNode']>,
   },
-
   setup(props, { slots }) {
     const { classPrefix, displayFiles, accept } = toRefs(props);
     const drag = useDrag(props.dragEvents, accept);

packages/components/upload/themes/dragger-file.tsx → packages/components/upload/components/dragger-file.tsx

@@ -6,8 +6,8 @@ import {
 import { abridgeName, getFileSizeText } from '@tdesign/common-js/upload/utils';
 import { TdUploadProps, UploadFile } from '../type';
 import Button from '../../button';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import useCommonClassName from '../../hooks/useCommonClassName';
 import TLoading from '../../loading';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
@@ -27,7 +27,6 @@ export interface DraggerProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadDraggerFile',
-
   props: {
     ...commonProps,
     trigger: Function as PropType<DraggerProps['trigger']>,
@@ -36,7 +35,6 @@ export default defineComponent({
     cancelUpload: Function as PropType<DraggerProps['cancelUpload']>,
     dragEvents: Object as PropType<DraggerProps['dragEvents']>,
   },
-
   setup(props, { slots }) {
     const { displayFiles, disabled, accept } = toRefs(props);
     const locale = computed(() => props.locale as UploadConfig);

packages/components/upload/themes/image-card.tsx → packages/components/upload/components/image-card.tsx

@@ -8,8 +8,8 @@ import {
 import Loading from '../../loading';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
 import ImageViewer, { ImageViewerProps } from '../../image-viewer';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import { TdUploadProps, UploadFile } from '../type';
 import { abridgeName } from '@tdesign/common-js/upload/utils';
 import { UploadConfig } from '../../config-provider';
@@ -30,7 +30,6 @@ export interface ImageCardUploadProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadImageCard',
-
   props: {
     ...commonProps,
     multiple: Boolean,

packages/components/upload/themes/multiple-flow-list.tsx → packages/components/upload/components/multiple-flow-list.tsx

@@ -16,10 +16,10 @@ import { isFunction } from 'lodash-es';
 import { isObject } from 'lodash-es';
 import useGlobalIcon from '../../hooks/useGlobalIcon';
 import ImageViewer, { ImageViewerProps } from '../../image-viewer';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import TButton from '../../button';
-import { UploadFile, TdUploadProps } from '../type';
+import { UploadFile, TdUploadProps } from '../types';
 import useDrag, { UploadDragEvents } from '../hooks/useDrag';
 import {
   abridgeName,
@@ -51,7 +51,6 @@ export interface ImageFlowListProps extends CommonDisplayFileProps {
 
 export default defineComponent({
   name: 'UploadMultipleFlowList',
-
   props: {
     ...commonProps,
     showThumbnail: Boolean,
@@ -66,7 +65,6 @@ export default defineComponent({
     cancelUploadButton: Object as PropType<ImageFlowListProps['cancelUploadButton']>,
     onPreview: Function as PropType<ImageFlowListProps['onPreview']>,
   },
-
   setup(props, { slots }) {
     // locale 已经在 useUpload 中统一处理优先级
     const { uploading, disabled, displayFiles, classPrefix, accept } = toRefs(props);

packages/components/upload/themes/normal-file.tsx → packages/components/upload/components/normal-file.tsx

@@ -12,8 +12,8 @@ import { useTNodeJSX } from '../../hooks/tnode';
 import { UploadFile } from '../type';
 import { abridgeName } from '@tdesign/common-js/upload/utils';
 import { useGlobalIcon } from '../../hooks/useGlobalIcon';
-import { CommonDisplayFileProps } from '../interface';
-import { commonProps } from '../constants';
+import { CommonDisplayFileProps } from '../types';
+import { commonProps } from '../consts';
 import { UploadConfig } from '../../config-provider';
 
 export interface NormalFileProps extends CommonDisplayFileProps {
@@ -22,12 +22,10 @@ export interface NormalFileProps extends CommonDisplayFileProps {
 
 const NormalFile = defineComponent({
   name: 'UploadNormalFile',
-
   props: {
     multiple: Boolean,
     ...commonProps,
   },
-
   setup(props, { slots }) {
     const { theme, disabled, classPrefix } = toRefs(props);
 

packages/components/upload/constants.ts → packages/components/upload/consts/index.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { CommonDisplayFileProps } from './interface';
+import { CommonDisplayFileProps } from '../types';
 
 export const commonProps = {
   accept: String,

packages/components/upload/index.ts

@@ -3,7 +3,6 @@ import withInstall from '../utils/withInstall';
 
 import './style';
 
-export * from './interface';
-
+export * from './types';
 export const Upload = withInstall(_Upload);
 export default Upload;