chore: use type import (#4260)

Author: ajuner

.eslintrc

@@ -30,6 +30,7 @@
       "rules": {
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/ban-types": 0,
+        "@typescript-eslint/consistent-type-imports": 1,
         "@typescript-eslint/explicit-module-boundary-types": 0,
         "@typescript-eslint/no-empty-function": 0,
         "@typescript-eslint/no-non-null-assertion": 0,

components/_util/colors.ts

@@ -1,4 +1,5 @@
-import { ElementOf, tuple } from './type';
+import type { ElementOf } from './type';
+import { tuple } from './type';
 
 export const PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
 

components/_util/hooks/useBreakpoint.ts

@@ -1,5 +1,7 @@
-import { onMounted, onUnmounted, Ref, ref } from 'vue';
-import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
+import type { Ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
+import type { ScreenMap } from '../../_util/responsiveObserve';
+import ResponsiveObserve from '../../_util/responsiveObserve';
 
 function useBreakpoint(): Ref<ScreenMap> {
   const screens = ref<ScreenMap>({});

components/_util/hooks/useConfigInject.ts

@@ -1,11 +1,8 @@
-import { RequiredMark } from '../../form/Form';
-import { computed, ComputedRef, inject, UnwrapRef, VNodeChild } from 'vue';
-import {
-  ConfigProviderProps,
-  defaultConfigProvider,
-  Direction,
-  SizeType,
-} from '../../config-provider';
+import type { RequiredMark } from '../../form/Form';
+import type { ComputedRef, UnwrapRef, VNodeChild } from 'vue';
+import { computed, inject } from 'vue';
+import type { ConfigProviderProps, Direction, SizeType } from '../../config-provider';
+import { defaultConfigProvider } from '../../config-provider';
 
 export default (
   name: string,

components/_util/hooks/useMemo.ts

@@ -1,4 +1,5 @@
-import { Ref, ref, watch } from 'vue';
+import type { Ref } from 'vue';
+import { ref, watch } from 'vue';
 
 export default function useMemo<T>(
   getValue: () => T,

components/_util/hooks/usePrefixCls.ts

@@ -1,4 +1,5 @@
-import { computed, ComputedRef, inject } from 'vue';
+import type { ComputedRef } from 'vue';
+import { computed, inject } from 'vue';
 import { defaultConfigProvider } from '../../config-provider';
 
 export default (name: string, props: Record<any, any>): ComputedRef<string> => {

components/_util/hooks/useRef.ts

@@ -1,4 +1,5 @@
-import { onBeforeUpdate, ref, Ref } from 'vue';
+import type { Ref } from 'vue';
+import { onBeforeUpdate, ref } from 'vue';
 
 export type UseRef = [(el: any, key: string | number) => void, Ref<any>];
 

components/_util/hooks/useSize.ts

@@ -1,5 +1,7 @@
-import { computed, ComputedRef, inject, provide, UnwrapRef } from 'vue';
-import { ConfigProviderProps, defaultConfigProvider, SizeType } from '../../config-provider';
+import type { ComputedRef, UnwrapRef } from 'vue';
+import { computed, inject, provide } from 'vue';
+import type { ConfigProviderProps, SizeType } from '../../config-provider';
+import { defaultConfigProvider } from '../../config-provider';
 
 const sizeProvider = Symbol('SizeProvider');
 

components/_util/props-util/initDefaultProps.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue';
-import { VueTypeValidableDef, VueTypeDef } from 'vue-types';
+import type { PropType } from 'vue';
+import type { VueTypeValidableDef, VueTypeDef } from 'vue-types';
 
 const initDefaultProps = <T>(
   types: T,

components/_util/setStyle.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue';
+import type { CSSProperties } from 'vue';
 
 /**
  * Easy to set element style, return previous style

components/_util/transButton.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, CSSProperties, ref, onMounted } from 'vue';
+import type { CSSProperties } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
 /**
  * Wrap of sub component which need use as Button capacity (like Icon component).
  * This helps accessibility reader to tread as a interactive button to operation.

components/_util/transition.tsx

@@ -1,12 +1,5 @@
-import {
-  BaseTransitionProps,
-  CSSProperties,
-  defineComponent,
-  nextTick,
-  Ref,
-  Transition as T,
-  TransitionGroup as TG,
-} from 'vue';
+import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
+import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
 import { findDOMNode } from './props-util';
 
 export const getTransitionProps = (transitionName: string, opt: object = {}) => {

components/_util/type.ts

@@ -1,4 +1,4 @@
-import { App, PropType, VNodeChild, Plugin } from 'vue';
+import type { App, PropType, VNodeChild, Plugin } from 'vue';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead

components/_util/vue-types/index.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from 'vue';
-import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
-import { VueNode } from '../type';
+import type { CSSProperties } from 'vue';
+import type { VueTypeValidableDef, VueTypesInterface } from 'vue-types';
+import { createTypes } from 'vue-types';
+import type { VueNode } from '../type';
 const PropTypes = createTypes({
   func: undefined,
   bool: undefined,

components/affix/index.tsx

@@ -1,5 +1,5 @@
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import {
-  CSSProperties,
   defineComponent,
   ref,
   reactive,
@@ -9,7 +9,6 @@ import {
   computed,
   onUnmounted,
   onUpdated,
-  ExtractPropTypes,
 } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';

components/affix/utils.ts

@@ -1,5 +1,5 @@
 import addEventListener from '../vc-util/Dom/addEventListener';
-import { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
 import supportsPassive from '../_util/supportsPassive';
 
 export type BindElement = HTMLElement | Window | null | undefined;

components/alert/index.tsx

@@ -1,4 +1,5 @@
-import { inject, cloneVNode, defineComponent, ref, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { inject, cloneVNode, defineComponent, ref } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';

components/anchor/Anchor.tsx

@@ -1,3 +1,4 @@
+import type { ExtractPropTypes } from 'vue';
 import {
   defineComponent,
   nextTick,
@@ -6,7 +7,6 @@ import {
   onUpdated,
   reactive,
   ref,
-  ExtractPropTypes,
   computed,
 } from 'vue';
 import PropTypes from '../_util/vue-types';

components/anchor/AnchorLink.tsx

@@ -1,11 +1,5 @@
-import {
-  defineComponent,
-  ExtractPropTypes,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  watch,
-} from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import classNames from '../_util/classNames';

components/anchor/context.ts

@@ -1,4 +1,5 @@
-import { computed, Ref, inject, InjectionKey, provide } from 'vue';
+import type { Ref, InjectionKey } from 'vue';
+import { computed, inject, provide } from 'vue';
 
 export interface AnchorContext {
   registerLink: (link: string) => void;

components/anchor/index.tsx

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Anchor, { AnchorProps } from './Anchor';
 import AnchorLink, { AnchorLinkProps } from './AnchorLink';
 

components/auto-complete/OptGroup.tsx

@@ -1,5 +1,5 @@
-import { FunctionalComponent } from 'vue';
-import { OptionGroupData } from '../vc-select/interface';
+import type { FunctionalComponent } from 'vue';
+import type { OptionGroupData } from '../vc-select/interface';
 
 export type OptGroupProps = Omit<OptionGroupData, 'options'>;
 

components/auto-complete/Option.tsx

@@ -1,5 +1,5 @@
-import { FunctionalComponent } from 'vue';
-import { OptionCoreData } from '../vc-select/interface';
+import type { FunctionalComponent } from 'vue';
+import type { OptionCoreData } from '../vc-select/interface';
 
 export interface OptionProps extends Omit<OptionCoreData, 'label'> {
   /** Save for customize data */

components/auto-complete/index.tsx

@@ -1,4 +1,5 @@
-import { App, defineComponent, inject, provide, Plugin, VNode, ExtractPropTypes } from 'vue';
+import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';

components/avatar/Avatar.tsx

@@ -1,19 +1,12 @@
-import { tuple, VueNode } from '../_util/type';
-import {
-  computed,
-  CSSProperties,
-  defineComponent,
-  ExtractPropTypes,
-  nextTick,
-  onMounted,
-  PropType,
-  ref,
-  watch,
-} from 'vue';
+import type { VueNode } from '../_util/type';
+import { tuple } from '../_util/type';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { getPropsSlot } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
-import { Breakpoint, responsiveArray, ScreenSizeMap } from '../_util/responsiveObserve';
+import type { Breakpoint, ScreenSizeMap } from '../_util/responsiveObserve';
+import { responsiveArray } from '../_util/responsiveObserve';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import ResizeObserver from '../vc-resize-observer';
 import { useInjectSize } from '../_util/hooks/useSize';

components/avatar/Group.tsx

@@ -1,7 +1,9 @@
 import { cloneElement } from '../_util/vnode';
-import Avatar, { avatarProps, AvatarSize } from './Avatar';
+import type { AvatarSize } from './Avatar';
+import Avatar, { avatarProps } from './Avatar';
 import Popover from '../popover';
-import { defineComponent, PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import { tuple } from '../_util/type';

components/avatar/index.ts

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Avatar from './Avatar';
 import Group from './Group';
 

components/back-top/index.tsx

@@ -1,13 +1,12 @@
+import type { ExtractPropTypes, PropType } from 'vue';
 import {
   defineComponent,
-  ExtractPropTypes,
   inject,
   nextTick,
   onActivated,
   onBeforeUnmount,
   onMounted,
   reactive,
-  PropType,
   ref,
   watch,
   onDeactivated,

components/badge/Badge.tsx

@@ -4,7 +4,8 @@ import classNames from '../_util/classNames';
 import { getPropsSlot, flattenChildren } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { getTransitionProps, Transition } from '../_util/transition';
-import { defineComponent, ExtractPropTypes, CSSProperties, computed, ref, watch } from 'vue';
+import type { ExtractPropTypes, CSSProperties } from 'vue';
+import { defineComponent, computed, ref, watch } from 'vue';
 import { tuple } from '../_util/type';
 import Ribbon from './Ribbon';
 import { isPresetColor } from './utils';

components/badge/Ribbon.tsx

@@ -1,7 +1,9 @@
-import { LiteralUnion, tuple } from '../_util/type';
-import { PresetColorType } from '../_util/colors';
+import type { LiteralUnion } from '../_util/type';
+import { tuple } from '../_util/type';
+import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from './utils';
-import { CSSProperties, defineComponent, PropType, ExtractPropTypes, computed } from 'vue';
+import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
+import { defineComponent, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
 import useConfigInject from '../_util/hooks/useConfigInject';
 

components/badge/ScrollNumber.tsx

@@ -1,13 +1,8 @@
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
-import {
-  defineComponent,
-  ExtractPropTypes,
-  CSSProperties,
-  DefineComponent,
-  HTMLAttributes,
-} from 'vue';
+import type { ExtractPropTypes, CSSProperties, DefineComponent, HTMLAttributes } from 'vue';
+import { defineComponent } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import SingleNumber from './SingleNumber';
 import { filterEmpty } from '../_util/props-util';

components/badge/SingleNumber.tsx

@@ -1,4 +1,5 @@
-import { computed, CSSProperties, defineComponent, onUnmounted, reactive, ref, watch } from 'vue';
+import type { CSSProperties } from 'vue';
+import { computed, defineComponent, onUnmounted, reactive, ref, watch } from 'vue';
 import classNames from '../_util/classNames';
 
 export interface UnitNumberProps {

components/badge/index.ts

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Badge from './Badge';
 import Ribbon from './Ribbon';
 export type { BadgeProps } from './Badge';

components/breadcrumb/Breadcrumb.tsx

@@ -1,10 +1,11 @@
-import { cloneVNode, defineComponent, PropType, ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
+import { cloneVNode, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
 import Menu from '../menu';
-import { Omit, VueNode } from '../_util/type';
+import type { Omit, VueNode } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export interface Route {

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import DropDown from '../dropdown/dropdown';

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';

components/breadcrumb/index.ts

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';

components/button/button.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, ExtractPropTypes, inject, Text, VNode } from 'vue';
+import type { ExtractPropTypes, VNode } from 'vue';
+import { defineComponent, inject, Text } from 'vue';
 import Wave from '../_util/wave';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import buttonTypes from './buttonTypes';

components/button/buttonTypes.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 
 import { tuple } from '../_util/type';
 import PropTypes, { withUndefined } from '../_util/vue-types';

components/button/index.ts

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Button from './button';
 import ButtonGroup from './button-group';
 export type { ButtonProps } from './button';

components/calendar/Header.tsx

@@ -1,11 +1,12 @@
-import { defineComponent, inject, PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, inject } from 'vue';
 import Select from '../select';
 import { Group, Button } from '../radio';
 import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
-import { VueNode } from '../_util/type';
-import moment from 'moment';
-import { RadioChangeEvent } from '../radio/interface';
+import type { VueNode } from '../_util/type';
+import type moment from 'moment';
+import type { RadioChangeEvent } from '../radio/interface';
 
 function getMonthsLocale(value: moment.Moment): string[] {
   const current = value.clone();