fix: app.use type error (#3079)

components/_util/type.ts

@@ -1,4 +1,4 @@
-import { PropType, VNodeChild } from 'vue';
+import { 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
@@ -31,3 +31,12 @@ export interface PropOptions<T = any, D = T> {
 }
 
 export type VueNode = VNodeChild | JSX.Element;
+
+export const withInstall = <T>(comp: T) => {
+  const c = comp as any;
+  c.install = function(app: App) {
+    app.component(c.displayName || c.name, comp);
+  };
+
+  return comp as T & Plugin;
+};

components/affix/index.tsx

@@ -1,4 +1,4 @@
-import { App, CSSProperties, defineComponent, inject } from 'vue';
+import { CSSProperties, defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
@@ -7,6 +7,7 @@ import BaseMixin from '../_util/BaseMixin';
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
+import { withInstall } from '../_util/type';
 import {
   addObserveTarget,
   removeObserveTarget,
@@ -265,10 +266,5 @@ const Affix = defineComponent({
     );
   },
 });
-/* istanbul ignore next */
-Affix.install = function(app: App) {
-  app.component(Affix.name, Affix);
-  return app;
-};
 
-export default Affix;
+export default withInstall(Affix);

components/alert/index.tsx

@@ -1,4 +1,4 @@
-import { inject, cloneVNode, defineComponent, App } from 'vue';
+import { inject, cloneVNode, defineComponent } 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';
@@ -14,7 +14,7 @@ import PropTypes from '../_util/vue-types';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { getComponent, isValidElement, findDOMNode } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 function noop() {}
 
@@ -161,10 +161,4 @@ const Alert = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Alert.install = function(app: App) {
-  app.component(Alert.name, Alert);
-  return app;
-};
-
-export default Alert;
+export default withInstall(Alert);

components/anchor/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Anchor from './Anchor';
 import AnchorLink from './AnchorLink';
 
@@ -10,6 +10,8 @@ Anchor.install = function(app: App) {
   app.component(Anchor.Link.name, Anchor.Link);
   return app;
 };
-export default Anchor as typeof Anchor & {
-  readonly Link: typeof AnchorLink;
-};
+
+export default Anchor as typeof Anchor &
+  Plugin & {
+    readonly Link: typeof AnchorLink;
+  };

components/auto-complete/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, provide } from 'vue';
+import { App, defineComponent, inject, provide, Plugin } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
@@ -147,7 +147,8 @@ AutoComplete.install = function(app: App) {
   return app;
 };
 
-export default AutoComplete as typeof AutoComplete & {
-  readonly Option: typeof Option;
-  readonly OptGroup: typeof OptGroup;
-};
+export default AutoComplete as typeof AutoComplete &
+  Plugin & {
+    readonly Option: typeof Option;
+    readonly OptGroup: typeof OptGroup;
+  };

components/avatar/index.ts

@@ -1,10 +1,4 @@
-import { App } from 'vue';
 import Avatar from './Avatar';
+import { withInstall } from '../_util/type';
 
-/* istanbul ignore next */
-Avatar.install = function(app: App) {
-  app.component(Avatar.name, Avatar);
-  return app;
-};
-
-export default Avatar;
+export default withInstall(Avatar);

components/back-top/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, nextTick } from 'vue';
+import { defineComponent, inject, nextTick } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import backTopTypes from './backTopTypes';
@@ -8,6 +8,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { getTransitionProps, Transition } from '../_util/transition';
 import { defaultConfigProvider } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
+import { withInstall } from '../_util/type';
 
 function getDefaultTarget() {
   return window;
@@ -100,10 +101,4 @@ const BackTop = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-BackTop.install = function(app: App) {
-  app.component(BackTop.name, BackTop);
-  return app;
-};
-
-export default BackTop;
+export default withInstall(BackTop);

components/badge/index.ts

@@ -1,10 +1,4 @@
-import { App } from 'vue';
 import Badge from './Badge';
+import { withInstall } from '../_util/type';
 
-/* istanbul ignore next */
-Badge.install = function(app: App) {
-  app.component(Badge.name, Badge);
-  return app;
-};
-
-export default Badge;
+export default withInstall(Badge);

components/breadcrumb/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
@@ -14,7 +14,8 @@ Breadcrumb.install = function(app: App) {
   return app;
 };
 
-export default Breadcrumb as typeof Breadcrumb & {
-  readonly Item: typeof BreadcrumbItem;
-  readonly Separator: typeof BreadcrumbSeparator;
-};
+export default Breadcrumb as typeof Breadcrumb &
+  Plugin & {
+    readonly Item: typeof BreadcrumbItem;
+    readonly Separator: typeof BreadcrumbSeparator;
+  };

components/button/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Button from './button';
 import ButtonGroup from './button-group';
 
@@ -11,6 +11,7 @@ Button.install = function(app: App) {
   return app;
 };
 
-export default Button as typeof Button & {
-  readonly Group: typeof ButtonGroup;
-};
+export default Button as typeof Button &
+  Plugin & {
+    readonly Group: typeof ButtonGroup;
+  };

components/calendar/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, hasProp } from '../_util/props-util';
@@ -10,7 +10,7 @@ import interopDefault from '../_util/interopDefault';
 import { defaultConfigProvider } from '../config-provider';
 import enUS from './locale/en_US';
 import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 function noop() {
   return null;
@@ -252,10 +252,6 @@ const Calendar = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Calendar.install = function(app: App) {
-  app.component(Calendar.name, Calendar);
-  return app;
-};
 export { HeaderProps } from './Header';
-export default Calendar;
+
+export default withInstall(Calendar);

components/card/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Card from './Card';
 import Meta from './Meta';
 import Grid from './Grid';
@@ -14,7 +14,8 @@ Card.install = function(app: App) {
   return app;
 };
 
-export default Card as typeof Card & {
-  readonly Meta: typeof Meta;
-  readonly Grid: typeof Grid;
-};
+export default Card as typeof Card &
+  Plugin & {
+    readonly Meta: typeof Meta;
+    readonly Grid: typeof Grid;
+  };

components/carousel/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import debounce from 'lodash-es/debounce';
 import hasProp, { getComponent } from '../_util/props-util';
@@ -6,7 +6,7 @@ import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
 import classNames from '../_util/classNames';
 import SlickCarousel from '../vc-slick/src';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 // Carousel
 export const CarouselProps = {
@@ -164,10 +164,4 @@ const Carousel = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Carousel.install = function(app: App) {
-  app.component(Carousel.name, Carousel);
-  return app;
-};
-
-export default Carousel;
+export default withInstall(Carousel);

components/cascader/index.tsx

@@ -1,4 +1,4 @@
-import { App, inject, provide, PropType, defineComponent, CSSProperties } from 'vue';
+import { inject, provide, PropType, defineComponent, CSSProperties } from 'vue';
 import PropTypes from '../_util/vue-types';
 import VcCascader from '../vc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
@@ -23,7 +23,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
 import warning from '../_util/warning';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple, VueNode } from '../_util/type';
+import { tuple, VueNode, withInstall } from '../_util/type';
 import { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 export interface CascaderOptionType {
@@ -611,9 +611,4 @@ const Cascader = defineComponent({
   },
 });
 
-Cascader.install = function(app: App) {
-  app.component(Cascader.name, Cascader);
-  return app;
-};
-
-export default Cascader;
+export default withInstall(Cascader);

components/checkbox/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './Group';
 
@@ -11,6 +11,7 @@ Checkbox.install = function(app: App) {
   return app;
 };
 
-export default Checkbox as typeof Checkbox & {
-  readonly Group: typeof CheckboxGroup;
-};
+export default Checkbox as typeof Checkbox &
+  Plugin & {
+    readonly Group: typeof CheckboxGroup;
+  };

components/col/index.ts

@@ -1,9 +1,4 @@
-import { App } from 'vue';
 import { Col } from '../grid';
-/* istanbul ignore next */
-Col.install = function(app: App) {
-  app.component(Col.name, Col);
-  return app;
-};
+import { withInstall } from '../_util/type';
 
-export default Col;
+export default withInstall(Col);

components/collapse/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Collapse from './Collapse';
 import CollapsePanel from './CollapsePanel';
 
@@ -11,6 +11,7 @@ Collapse.install = function(app: App) {
   return app;
 };
 
-export default Collapse as typeof Collapse & {
-  readonly Panel: typeof CollapsePanel;
-};
+export default Collapse as typeof Collapse &
+  Plugin & {
+    readonly Panel: typeof CollapsePanel;
+  };

components/comment/index.tsx

@@ -1,8 +1,8 @@
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropsTypes from '../_util/vue-types';
 import { getComponent, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import { VueNode } from '../_util/type';
+import { VueNode, withInstall } from '../_util/type';
 export const CommentProps = {
   actions: PropsTypes.array,
   /** The element to display as the comment author. */
@@ -93,9 +93,4 @@ const Comment = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Comment.install = function(app: App) {
-  app.component(Comment.name, Comment);
-  return app;
-};
-export default Comment;
+export default withInstall(Comment);

components/config-provider/index.tsx

@@ -1,9 +1,10 @@
-import { reactive, provide, VNodeTypes, PropType, defineComponent, App, watch } from 'vue';
+import { reactive, provide, VNodeTypes, PropType, defineComponent, watch } from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
 
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { withInstall } from '../_util/type';
 
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
 
@@ -168,10 +169,4 @@ export const defaultConfigProvider: ConfigConsumerProps = {
   renderEmpty: defaultRenderEmpty,
 };
 
-/* istanbul ignore next */
-ConfigProvider.install = function(app: App) {
-  app.component(ConfigProvider.name, ConfigProvider);
-  return app;
-};
-
-export default ConfigProvider;
+export default withInstall(ConfigProvider);

components/date-picker/index.ts

@@ -1,4 +1,4 @@
-import { App, DefineComponent } from 'vue';
+import { App, DefineComponent, Plugin } from 'vue';
 import VcCalendar from '../vc-calendar';
 import MonthCalendar from '../vc-calendar/src/MonthCalendar';
 import createPicker from './createPicker';
@@ -56,4 +56,9 @@ DatePicker.install = function(app: App) {
   return app;
 };
 
-export default DatePicker;
+export default DatePicker as typeof DatePicker &
+  Plugin & {
+    readonly RangePicker: typeof RangePicker;
+    readonly MonthPicker: typeof MonthPicker;
+    readonly WeekPicker: typeof WeekPicker;
+  };

components/descriptions/index.tsx

@@ -1,4 +1,4 @@
-import { inject, cloneVNode, App, defineComponent, PropType, VNode } from 'vue';
+import { inject, cloneVNode, App, defineComponent, PropType, VNode, Plugin } from 'vue';
 import warning from '../_util/warning';
 import ResponsiveObserve, { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
 import { defaultConfigProvider } from '../config-provider';
@@ -274,6 +274,7 @@ Descriptions.install = function(app: App) {
   return app;
 };
 
-export default Descriptions as typeof Descriptions & {
-  readonly Item: typeof DescriptionsItem;
-};
+export default Descriptions as typeof Descriptions &
+  Plugin & {
+    readonly Item: typeof DescriptionsItem;
+  };

components/divider/index.tsx

@@ -1,6 +1,7 @@
 import { flattenChildren } from '../_util/props-util';
-import { App, computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 import { defaultConfigProvider } from '../config-provider';
+import { withInstall } from '../_util/type';
 
 const Divider = defineComponent({
   name: 'ADivider',
@@ -46,10 +47,4 @@ const Divider = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Divider.install = function(app: App) {
-  app.component(Divider.name, Divider);
-  return app;
-};
-
-export default Divider;
+export default withInstall(Divider);

components/drawer/index.tsx

@@ -1,4 +1,4 @@
-import { inject, provide, nextTick, defineComponent, App, CSSProperties } from 'vue';
+import { inject, provide, nextTick, defineComponent, CSSProperties } from 'vue';
 import classnames from '../_util/classNames';
 import omit from 'omit.js';
 import VcDrawer from '../vc-drawer/src';
@@ -7,7 +7,7 @@ import BaseMixin from '../_util/BaseMixin';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import { getComponent, getOptionProps } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
 type placementType = typeof PlacementTypes[number];
@@ -253,10 +253,4 @@ const Drawer = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Drawer.install = function(app: App) {
-  app.component(Drawer.name, Drawer);
-  return app;
-};
-
-export default Drawer;
+export default withInstall(Drawer);

components/dropdown/index.ts

@@ -1,15 +1,10 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Dropdown from './dropdown';
 import DropdownButton from './dropdown-button';
 
 export { DropdownProps } from './dropdown';
 export { DropdownButtonProps } from './dropdown-button';
 
-type Types = typeof Dropdown;
-interface DropdownTypes extends Types {
-  Button: typeof DropdownButton;
-}
-
 Dropdown.Button = DropdownButton;
 
 /* istanbul ignore next */
@@ -19,4 +14,7 @@ Dropdown.install = function(app: App) {
   return app;
 };
 
-export default Dropdown as DropdownTypes;
+export default Dropdown as typeof Dropdown &
+  Plugin & {
+    readonly Button: typeof DropdownButton;
+  };

components/empty/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, VNodeTypes, inject, App, SetupContext, FunctionalComponent } from 'vue';
+import { CSSProperties, VNodeTypes, inject, SetupContext, FunctionalComponent } from 'vue';
 import classNames from '../_util/classNames';
 import { defaultConfigProvider } from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
@@ -6,6 +6,7 @@ import DefaultEmptyImg from './empty';
 import SimpleEmptyImg from './simple';
 import { filterEmpty } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
+import { withInstall } from '../_util/type';
 
 const defaultEmptyImg = <DefaultEmptyImg />;
 const simpleEmptyImg = <SimpleEmptyImg />;
@@ -27,7 +28,6 @@ interface EmptyType extends FunctionalComponent<EmptyProps> {
   displayName: string;
   PRESENTED_IMAGE_DEFAULT: VNodeTypes;
   PRESENTED_IMAGE_SIMPLE: VNodeTypes;
-  install: (app: App) => void;
 }
 
 const Empty: EmptyType = (props: EmptyProps, { slots = {}, attrs }: SetupContext) => {
@@ -91,10 +91,4 @@ Empty.props = {
   imageStyle: PropTypes.object,
 };
 
-/* istanbul ignore next */
-Empty.install = function(app: App) {
-  app.component(Empty.displayName, Empty);
-  return app;
-};
-
-export default Empty;
+export default withInstall(Empty);

components/form/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Form from './Form';
 
 export { FormProps } from './Form';
@@ -10,6 +10,7 @@ Form.install = function(app: App) {
   return app;
 };
 
-export default Form as typeof Form & {
-  readonly Item: typeof Form.Item;
-};
+export default Form as typeof Form &
+  Plugin & {
+    readonly Item: typeof Form.Item;
+  };

components/icon/index.tsx

@@ -1,5 +1,5 @@
-import { App } from 'vue';
 import warning from '../_util/warning';
+import { withInstall } from '../_util/type';
 
 const Icon = () => {
   warning(false, 'Icon', 'Empty Icon');
@@ -8,10 +8,4 @@ const Icon = () => {
 
 Icon.displayName = 'AIcon';
 
-/* istanbul ignore next */
-Icon.install = function(app: App) {
-  app.component(Icon.displayName, Icon);
-  return app;
-};
-
-export default Icon;
+export default withInstall(Icon);

components/input-number/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, nextTick, onMounted, ref, PropType } from 'vue';
+import { defineComponent, inject, nextTick, onMounted, ref, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps } from '../_util/props-util';
 import classNames from '../_util/classNames';
@@ -6,7 +6,7 @@ import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import VcInputNumber from '../vc-input-number/src';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 const InputNumberProps = {
   prefixCls: PropTypes.string,
@@ -89,10 +89,4 @@ const InputNumber = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-InputNumber.install = function(app: App) {
-  app.component(InputNumber.name, InputNumber);
-  return app;
-};
-
-export default InputNumber;
+export default withInstall(InputNumber);

components/input/index.ts

@@ -1,9 +1,9 @@
+import { App, Plugin } from 'vue';
 import Input from './Input';
 import Group from './Group';
 import Search from './Search';
 import TextArea from './TextArea';
 import Password from './Password';
-import { App } from 'vue';
 
 Input.Group = Group;
 Input.Search = Search;
@@ -20,9 +20,10 @@ Input.install = function(app: App) {
   return app;
 };
 
-export default Input as typeof Input & {
-  readonly Group: typeof Group;
-  readonly Search: typeof Search;
-  readonly TextArea: typeof TextArea;
-  readonly Password: typeof Password;
-};
+export default Input as typeof Input &
+  Plugin & {
+    readonly Group: typeof Group;
+    readonly Search: typeof Search;
+    readonly TextArea: typeof TextArea;
+    readonly Password: typeof Password;
+  };

components/layout/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Layout from './layout';
 import Sider from './Sider';
 
@@ -13,6 +13,7 @@ Layout.install = function(app: App) {
   app.component(Layout.Content.name, Layout.Content);
   return app;
 };
-export default Layout as typeof Layout & {
-  readonly Sider: typeof Sider;
-};
+export default Layout as typeof Layout &
+  Plugin & {
+    readonly Sider: typeof Sider;
+  };

components/list/index.tsx

@@ -1,20 +1,20 @@
+import { provide, inject, defineComponent, App, Plugin } from 'vue';
+import omit from 'omit.js';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import classNames from '../_util/classNames';
-import omit from 'omit.js';
 import { defaultConfigProvider } from '../config-provider';
 
 import Spin from '../spin';
 import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
 
-import Item from './Item';
+import Item, { ListItemMeta } from './Item';
 import { getComponent, getSlot } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import { cloneElement } from '../_util/vnode';
-import { provide, inject, defineComponent, App } from 'vue';
 import { tuple } from '../_util/type';
 
-export { ListItemProps, ListItemMetaProps } from './Item';
+export { ListItemProps, ListItemMetaProps, ListItemMeta } from './Item';
 
 export const ColumnCount = ['', 1, 2, 3, 4, 6, 8, 12, 24];
 
@@ -292,4 +292,9 @@ List.install = function(app: App) {
   return app;
 };
 
-export default List;
+export default List as typeof List &
+  Plugin & {
+    readonly Item: typeof Item & {
+      readonly Meta: typeof ListItemMeta;
+    };
+  };

components/mentions/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, nextTick, PropType, VNodeTypes } from 'vue';
+import { App, defineComponent, inject, nextTick, PropType, VNodeTypes, Plugin } from 'vue';
 import classNames from '../_util/classNames';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
@@ -204,6 +204,7 @@ Mentions.install = function(app: App) {
   return app;
 };
 
-export default Mentions as typeof Mentions & {
-  readonly Option: typeof Option;
-};
+export default Mentions as typeof Mentions &
+  Plugin & {
+    readonly Option: typeof Option;
+  };

components/menu/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, provide, toRef, App, ExtractPropTypes } from 'vue';
+import { defineComponent, inject, provide, toRef, App, ExtractPropTypes, Plugin } from 'vue';
 import omit from 'omit.js';
 import VcMenu, { Divider, ItemGroup } from '../vc-menu';
 import SubMenu from './SubMenu';
@@ -314,4 +314,11 @@ Menu.install = function(app: App) {
   app.component(Menu.ItemGroup.name, Menu.ItemGroup);
   return app;
 };
-export default Menu;
+
+export default Menu as typeof Menu &
+  Plugin & {
+    readonly Item: typeof Item;
+    readonly SubMenu: typeof SubMenu;
+    readonly Divider: typeof Divider;
+    readonly ItemGroup: typeof ItemGroup;
+  };

components/modal/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Modal, { destroyFns, ModalFunc, ModalFuncProps } from './Modal';
 import modalConfirm from './confirm';
 import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
@@ -80,18 +80,19 @@ Modal.install = function(app: App) {
   return app;
 };
 
-export default Modal as typeof Modal & {
-  readonly info: ModalFunc;
+export default Modal as typeof Modal &
+  Plugin & {
+    readonly info: ModalFunc;
 
-  readonly success: ModalFunc;
+    readonly success: ModalFunc;
 
-  readonly error: ModalFunc;
+    readonly error: ModalFunc;
 
-  readonly warn: ModalFunc;
+    readonly warn: ModalFunc;
 
-  readonly warning: ModalFunc;
+    readonly warning: ModalFunc;
 
-  readonly confirm: ModalFunc;
+    readonly confirm: ModalFunc;
 
-  readonly destroyAll: () => void;
-};
+    readonly destroyAll: () => void;
+  };

components/page-header/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, VNodeTypes, ExtractPropTypes } from 'vue';
+import { defineComponent, inject, VNodeTypes, ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponent, getOptionProps, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
@@ -7,6 +7,7 @@ import Breadcrumb from '../breadcrumb';
 import Avatar from '../avatar';
 import TransButton from '../_util/transButton';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import { withInstall } from '../_util/type';
 
 export const PageHeaderProps = {
   backIcon: PropTypes.VNodeChild,
@@ -140,10 +141,4 @@ const PageHeader = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-PageHeader.install = function(app: App) {
-  app.component(PageHeader.name, PageHeader);
-  return app;
-};
-
-export default PageHeader;
+export default withInstall(PageHeader);

components/pagination/index.ts

@@ -1,12 +1,6 @@
-import { App } from 'vue';
 import Pagination from './Pagination';
+import { withInstall } from '../_util/type';
 
 export { PaginationProps, PaginationConfig } from './Pagination';
 
-/* istanbul ignore next */
-Pagination.install = function(app: App) {
-  app.component(Pagination.name, Pagination);
-  return app;
-};
-
-export default Pagination;
+export default withInstall(Pagination);

components/popconfirm/index.tsx

@@ -1,5 +1,5 @@
 import omit from 'omit.js';
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import Tooltip from '../tooltip';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
 import PropTypes from '../_util/vue-types';
@@ -11,6 +11,7 @@ import Button from '../button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import { defaultConfigProvider } from '../config-provider';
+import { withInstall } from '../_util/type';
 
 const tooltipProps = abstractTooltipProps();
 const btnProps = buttonTypes();
@@ -151,10 +152,4 @@ const Popconfirm = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Popconfirm.install = function(app: App) {
-  app.component(Popconfirm.name, Popconfirm);
-  return app;
-};
-
-export default Popconfirm;
+export default withInstall(Popconfirm);

components/popover/index.tsx

@@ -1,9 +1,10 @@
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import Tooltip from '../tooltip';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
+import { withInstall } from '../_util/type';
 
 const props = abstractTooltipProps();
 const Popover = defineComponent({
@@ -51,10 +52,4 @@ const Popover = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Popover.install = function(app: App) {
-  app.component(Popover.name, Popover);
-  return app;
-};
-
-export default Popover;
+export default withInstall(Popover);

components/progress/index.ts

@@ -1,12 +1,6 @@
-import { App } from 'vue';
 import Progress from './progress';
+import { withInstall } from '../_util/type';
 
 export { ProgressProps } from './props';
 
-/* istanbul ignore next */
-Progress.install = function(app: App) {
-  app.component(Progress.name, Progress);
-  return app;
-};
-
-export default Progress;
+export default withInstall(Progress);

components/radio/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Radio from './Radio';
 import Group from './Group';
 import Button from './RadioButton';
@@ -15,4 +15,8 @@ Radio.install = function(app: App) {
 };
 
 export { Button, Group };
-export default Radio;
+export default Radio as typeof Radio &
+  Plugin & {
+    readonly Group: typeof Group;
+    readonly Button: typeof Button;
+  };

components/rate/index.tsx

@@ -6,6 +6,7 @@ import { defaultConfigProvider } from '../config-provider';
 import VcRate from '../vc-rate';
 import StarFilled from '@ant-design/icons-vue/StarFilled';
 import Tooltip from '../tooltip';
+import { withInstall } from '../_util/type';
 
 export const RateProps = {
   prefixCls: PropTypes.string,
@@ -59,9 +60,4 @@ const Rate = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Rate.install = function(app) {
-  app.component(Rate.name, Rate);
-  return app;
-};
-export default Rate;
+export default withInstall(Rate);

components/result/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, VNodeTypes } from 'vue';
+import { App, defineComponent, inject, VNodeTypes, Plugin } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 import { getComponent } from '../_util/props-util';
@@ -96,4 +96,9 @@ Result.install = function(app: App) {
   return app;
 };
 
-export default Result;
+export default Result as typeof Result &
+  Plugin & {
+    readonly PRESENTED_IMAGE_403: typeof unauthorized;
+    readonly PRESENTED_IMAGE_404: typeof noFound;
+    readonly PRESENTED_IMAGE_500: typeof serverError;
+  };

components/row/index.ts

@@ -1,10 +1,4 @@
-import { App } from 'vue';
 import { Row } from '../grid';
+import { withInstall } from '../_util/type';
 
-/* istanbul ignore next */
-Row.install = function(app: App) {
-  app.component(Row.name, Row);
-  return app;
-};
-
-export default Row;
+export default withInstall(Row);

components/select/index.tsx

@@ -1,10 +1,10 @@
+import { computed, defineComponent, inject, ref, VNodeChild, App, PropType, Plugin } from 'vue';
 import omit from 'omit.js';
 import classNames from '../_util/classNames';
 import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select';
 import { OptionProps as OptionPropsType } from '../vc-select/Option';
 import { defaultConfigProvider } from '../config-provider';
 import getIcons from './utils/iconUtil';
-import { computed, defineComponent, inject, ref, VNodeChild, App, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
 
@@ -228,8 +228,9 @@ Select.install = function(app: App) {
   app.component('ASelectOptGroup', Select.OptGroup);
   return app;
 };
-export default Select as typeof Select & {
-  readonly Option: typeof Option;
-  readonly OptGroup: typeof OptGroup;
-  SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
-};
+export default Select as typeof Select &
+  Plugin & {
+    readonly Option: typeof Option;
+    readonly OptGroup: typeof OptGroup;
+    readonly SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+  };

components/skeleton/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, App } from 'vue';
+import { defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { initDefaultProps, hasProp } from '../_util/props-util';
@@ -6,6 +6,7 @@ import { defaultConfigProvider } from '../config-provider';
 import Avatar, { SkeletonAvatarProps, ISkeletonAvatarProps } from './Avatar';
 import Title, { SkeletonTitleProps, ISkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps, ISkeletonParagraphProps } from './Paragraph';
+import { withInstall } from '../_util/type';
 
 export const SkeletonProps = {
   active: PropTypes.looseBool,
@@ -162,10 +163,5 @@ const Skeleton = defineComponent({
     return this.$slots.default?.();
   },
 });
-/* istanbul ignore next */
-Skeleton.install = function(app: App) {
-  app.component(Skeleton.name, Skeleton);
-  return app;
-};
 
-export default Skeleton;
+export default withInstall(Skeleton);

components/slider/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, VNodeTypes } from 'vue';
+import { defineComponent, inject, VNodeTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps } from '../_util/props-util';
@@ -8,6 +8,7 @@ import VcHandle from '../vc-slider/src/Handle';
 import Tooltip from '../tooltip';
 import { defaultConfigProvider } from '../config-provider';
 import abstractTooltipProps from '../tooltip/abstractTooltipProps';
+import { withInstall } from '../_util/type';
 
 export type SliderValue = number | [number, number];
 
@@ -163,10 +164,4 @@ const Slider = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Slider.install = function(app: App) {
-  app.component(Slider.name, Slider);
-  return app;
-};
-
-export default Slider;
+export default withInstall(Slider);

components/space/index.tsx

@@ -1,8 +1,8 @@
-import { inject, App, defineComponent, PropType } from 'vue';
+import { inject, defineComponent, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import { defaultConfigProvider, SizeType } from '../config-provider';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 const spaceSize = {
   small: 8,
@@ -75,10 +75,4 @@ const Space = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Space.install = function(app: App) {
-  app.component(Space.name, Space);
-  return app;
-};
-
-export default Space;
+export default withInstall(Space);

components/spin/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Spin, { setDefaultIndicator } from './Spin';
 
 export { SpinProps } from './Spin';
@@ -11,4 +11,7 @@ Spin.install = function(app: App) {
   return app;
 };
 
-export default Spin;
+export default Spin as typeof Spin &
+  Plugin & {
+    readonly setDefaultIndicator: typeof setDefaultIndicator;
+  };

components/statistic/index.ts

@@ -1,6 +1,6 @@
+import { App, Plugin } from 'vue';
 import Statistic from './Statistic';
 import Countdown from './Countdown';
-import { App } from 'vue';
 
 Statistic.Countdown = Countdown;
 /* istanbul ignore next */
@@ -10,4 +10,7 @@ Statistic.install = function(app: App) {
   return app;
 };
 
-export default Statistic;
+export default Statistic as typeof Statistic &
+  Plugin & {
+    readonly Countdown: typeof Countdown;
+  };

components/steps/index.tsx

@@ -76,4 +76,7 @@ Steps.install = function(app: App) {
   return app;
 };
 
-export default Steps;
+export default Steps as typeof Steps &
+  Plugin & {
+    readonly Step: typeof VcSteps.Step;
+  };

components/switch/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, App } from 'vue';
+import { defineComponent, inject } from 'vue';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import PropTypes from '../_util/vue-types';
 import hasProp, { getOptionProps, getComponent } from '../_util/props-util';
@@ -6,7 +6,7 @@ import VcSwitch from '../vc-switch';
 import Wave from '../_util/wave';
 import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 const Switch = defineComponent({
   name: 'ASwitch',
@@ -83,10 +83,4 @@ const Switch = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Switch.install = function(app: App) {
-  app.component(Switch.name, Switch);
-  return app;
-};
-
-export default Switch;
+export default withInstall(Switch);

components/table/index.tsx

@@ -1,5 +1,7 @@
-import { defineComponent } from 'vue';
+import { App, defineComponent } from 'vue';
 import T from './Table';
+import Column from './Column';
+import ColumnGroup from './ColumnGroup';
 import {} from './interface';
 import { getOptionProps, getKey, getPropsData, getSlot } from '../_util/props-util';
 
@@ -85,11 +87,14 @@ const Table = defineComponent({
   },
 });
 /* istanbul ignore next */
-Table.install = function(app) {
+Table.install = function(app: App) {
   app.component(Table.name, Table);
   app.component(Table.Column.name, Table.Column);
   app.component(Table.ColumnGroup.name, Table.ColumnGroup);
   return app;
 };
 
-export default Table;
+export default Table as typeof Table & {
+  readonly Column: typeof Column;
+  readonly ColumnGroup: typeof ColumnGroup;
+};

components/tabs/index.ts

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Tabs from './tabs';
 import TabPane from '../vc-tabs/src/TabPane';
 import TabContent from '../vc-tabs/src/TabContent';
@@ -14,5 +14,10 @@ Tabs.install = function(app: App) {
   return app;
 };
 
-export default Tabs;
+export default Tabs as typeof Tabs &
+  Plugin & {
+    readonly TabPane: typeof TabPane;
+    readonly TabContent: typeof TabContent;
+  };
+
 export { TabPane, TabContent };

components/tag/index.tsx

@@ -7,6 +7,7 @@ import {
   watchEffect,
   PropType,
   ExtractPropTypes,
+  Plugin,
 } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
@@ -146,6 +147,7 @@ Tag.install = function(app: App) {
   return app;
 };
 
-export default Tag as typeof Tag & {
-  readonly CheckableTag: typeof CheckableTag;
-};
+export default Tag as typeof Tag &
+  Plugin & {
+    readonly CheckableTag: typeof CheckableTag;
+  };

components/time-picker/index.tsx

@@ -1,5 +1,5 @@
 import omit from 'omit.js';
-import { App, defineComponent, inject, provide } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
 import VcTimePicker from '../vc-time-picker';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import BaseMixin from '../_util/BaseMixin';
@@ -18,7 +18,7 @@ import {
   momentToString,
   TimeOrTimesType,
 } from '../_util/moment-util';
-import { tuple } from '../_util/type';
+import { tuple, withInstall } from '../_util/type';
 
 export function generateShowHourMinuteSecond(format: string) {
   // Ref: http://momentjs.com/docs/#/parsing/string-format/
@@ -261,10 +261,4 @@ const TimePicker = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-TimePicker.install = function(app: App) {
-  app.component(TimePicker.name, TimePicker);
-  return app;
-};
-
-export default TimePicker;
+export default withInstall(TimePicker);

components/timeline/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Timeline from './Timeline';
 import TimelineItem from './TimelineItem';
 
@@ -14,6 +14,7 @@ Timeline.install = function(app: App) {
   return app;
 };
 
-export default Timeline as typeof Timeline & {
-  readonly Item: typeof TimelineItem;
-};
+export default Timeline as typeof Timeline &
+  Plugin & {
+    readonly Item: typeof TimelineItem;
+  };

components/tooltip/index.ts

@@ -1,12 +1,6 @@
-import { App } from 'vue';
+import { withInstall } from '../_util/type';
 import ToolTip from './Tooltip';
 
 export { TooltipProps } from './Tooltip';
 
-/* istanbul ignore next */
-ToolTip.install = function(app: App) {
-  app.component(ToolTip.name, ToolTip);
-  return app;
-};
-
-export default ToolTip;
+export default withInstall(ToolTip);

components/transfer/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
@@ -9,6 +9,7 @@ import Operation from './operation';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import { defaultConfigProvider, RenderEmptyHandler } from '../config-provider';
+import { withInstall } from '../_util/type';
 
 export type TransferDirection = 'left' | 'right';
 
@@ -483,10 +484,4 @@ const Transfer = defineComponent({
   },
 });
 
-/* istanbul ignore next */
-Transfer.install = function(app: App) {
-  app.component(Transfer.name, Transfer);
-  return app;
-};
-
-export default Transfer;
+export default withInstall(Transfer);

components/tree-select/index.tsx

@@ -1,5 +1,5 @@
+import { App, defineComponent, inject, Plugin } from 'vue';
 import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from '../vc-tree-select';
-import { App, defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
 import { TreeSelectProps } from './interface';
 import warning from '../_util/warning';
@@ -204,12 +204,13 @@ TreeSelect.install = function(app: App) {
   return app;
 };
 
-export default TreeSelect as typeof TreeSelect & {
-  readonly TreeNode: typeof TreeNode;
+export default TreeSelect as typeof TreeSelect &
+  Plugin & {
+    readonly TreeNode: typeof TreeNode;
 
-  readonly SHOW_ALL: typeof SHOW_ALL;
+    readonly SHOW_ALL: typeof SHOW_ALL;
 
-  readonly SHOW_PARENT: typeof SHOW_PARENT;
+    readonly SHOW_PARENT: typeof SHOW_PARENT;
 
-  readonly SHOW_CHILD: typeof SHOW_CHILD;
-};
+    readonly SHOW_CHILD: typeof SHOW_CHILD;
+  };

components/tree/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Tree from './Tree';
 import DirectoryTree from './DirectoryTree';
 
@@ -12,4 +12,8 @@ Tree.install = function(app: App) {
   return app;
 };
 
-export default Tree;
+export default Tree as typeof Tree &
+  Plugin & {
+    readonly TreeNode: any;
+    readonly DirectoryTree: typeof DirectoryTree;
+  };

components/upload/index.tsx

@@ -1,4 +1,4 @@
-import { App } from 'vue';
+import { App, Plugin } from 'vue';
 import Upload from './Upload';
 import Dragger from './Dragger';
 
@@ -13,6 +13,7 @@ Upload.install = function(app: App) {
   return app;
 };
 
-export default Upload as typeof Upload & {
-  readonly Dragger: typeof Dragger;
-};
+export default Upload as typeof Upload &
+  Plugin & {
+    readonly Dragger: typeof Dragger;
+  };