fix: some components miss type, close #4866

components/date-picker/date-fns.tsx

@@ -16,29 +16,22 @@ export type RangePickerProps = BaseRangePickerProps<Date> & ExtraRangePickerProp
 const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
   generatePicker<Date>(dataFnsGenerateConfig);
 
-DatePicker.WeekPicker = WeekPicker;
-DatePicker.MonthPicker = MonthPicker;
-DatePicker.YearPicker = YearPicker;
-DatePicker.RangePicker = RangePicker;
-DatePicker.TimePicker = TimePicker;
-DatePicker.QuarterPicker = QuarterPicker;
-
 /* istanbul ignore next */
-DatePicker.install = function (app: App) {
+export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
+
+export default Object.assign(DatePicker, {
+  WeekPicker,
+  MonthPicker,
+  YearPicker,
+  RangePicker,
+  TimePicker,
+  QuarterPicker,
+  install: (app: App) => {
     app.component(DatePicker.name, DatePicker);
     app.component(RangePicker.name, RangePicker);
     app.component(MonthPicker.name, MonthPicker);
     app.component(WeekPicker.name, WeekPicker);
     app.component(QuarterPicker.name, QuarterPicker);
     return app;
-};
+  },
-
+});
-export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
-
-export default DatePicker as typeof DatePicker &
-  Plugin & {
-    readonly RangePicker: typeof RangePicker;
-    readonly MonthPicker: typeof MonthPicker;
-    readonly WeekPicker: typeof WeekPicker;
-    readonly QuarterPicker: typeof QuarterPicker;
-  };

components/date-picker/dayjs.tsx

@@ -17,29 +17,22 @@ export type RangePickerProps = BaseRangePickerProps<Dayjs> & ExtraRangePickerPro
 const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
   generatePicker<Dayjs>(dayjsGenerateConfig);
 
-DatePicker.WeekPicker = WeekPicker;
-DatePicker.MonthPicker = MonthPicker;
-DatePicker.YearPicker = YearPicker;
-DatePicker.RangePicker = RangePicker;
-DatePicker.TimePicker = TimePicker;
-DatePicker.QuarterPicker = QuarterPicker;
-
 /* istanbul ignore next */
-DatePicker.install = function (app: App) {
+export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
+
+export default Object.assign(DatePicker, {
+  WeekPicker,
+  MonthPicker,
+  YearPicker,
+  RangePicker,
+  TimePicker,
+  QuarterPicker,
+  install: (app: App) => {
     app.component(DatePicker.name, DatePicker);
     app.component(RangePicker.name, RangePicker);
     app.component(MonthPicker.name, MonthPicker);
     app.component(WeekPicker.name, WeekPicker);
     app.component(QuarterPicker.name, QuarterPicker);
     return app;
-};
+  },
-
+});
-export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
-
-export default DatePicker as typeof DatePicker &
-  Plugin & {
-    readonly RangePicker: typeof RangePicker;
-    readonly MonthPicker: typeof MonthPicker;
-    readonly WeekPicker: typeof WeekPicker;
-    readonly QuarterPicker: typeof QuarterPicker;
-  };

components/date-picker/moment.tsx

@@ -19,29 +19,22 @@ export type RangePickerProps = BaseRangePickerProps<Moment> & ExtraRangePickerPr
 const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker, RangePicker } =
   generatePicker<Moment>(momentGenerateConfig);
 
-DatePicker.WeekPicker = WeekPicker;
-DatePicker.MonthPicker = MonthPicker;
-DatePicker.YearPicker = YearPicker;
-DatePicker.RangePicker = RangePicker;
-DatePicker.TimePicker = TimePicker;
-DatePicker.QuarterPicker = QuarterPicker;
-
 /* istanbul ignore next */
-DatePicker.install = function (app: App) {
+export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
+
+export default Object.assign(DatePicker, {
+  WeekPicker,
+  MonthPicker,
+  YearPicker,
+  RangePicker,
+  TimePicker,
+  QuarterPicker,
+  install: (app: App) => {
     app.component(DatePicker.name, DatePicker);
     app.component(RangePicker.name, RangePicker);
     app.component(MonthPicker.name, MonthPicker);
     app.component(WeekPicker.name, WeekPicker);
     app.component(QuarterPicker.name, QuarterPicker);
     return app;
-};
+  },
-
+});
-export { RangePicker, WeekPicker, MonthPicker, QuarterPicker };
-
-export default DatePicker as typeof DatePicker &
-  Plugin & {
-    readonly RangePicker: typeof RangePicker;
-    readonly MonthPicker: typeof MonthPicker;
-    readonly WeekPicker: typeof WeekPicker;
-    readonly QuarterPicker: typeof QuarterPicker;
-  };

components/layout/index.ts

@@ -1,27 +1,27 @@
-import type { App, Plugin } from 'vue';
+import type { App } from 'vue';
-import Layout from './layout';
+import Layout, { Header, Footer, Content } from './layout';
 import Sider from './Sider';
 
 export type { BasicProps as LayoutProps } from './layout';
 export type { SiderProps } from './Sider';
 
-Layout.Sider = Sider;
-
 /* istanbul ignore next */
-Layout.install = function (app: App) {
+export const LayoutHeader = Header;
-  app.component(Layout.name, Layout);
+export const LayoutFooter = Footer;
-  app.component(Layout.Header.name, Layout.Header);
+export const LayoutSider = Sider;
-  app.component(Layout.Footer.name, Layout.Footer);
+export const LayoutContent = Content;
-  app.component(Layout.Sider.name, Layout.Sider);
-  app.component(Layout.Content.name, Layout.Content);
-  return app;
-};
-export const LayoutHeader = Layout.Header;
-export const LayoutFooter = Layout.Footer;
-export const LayoutSider = Layout.Sider;
-export const LayoutContent = Layout.Content;
 
-export default Layout as typeof Layout &
+export default Object.assign(Layout, {
-  Plugin & {
+  Header,
-    readonly Sider: typeof Sider;
+  Footer,
-  };
+  Content,
+  Sider,
+  install: (app: App) => {
+    app.component(Layout.name, Layout);
+    app.component(Header.name, Header);
+    app.component(Footer.name, Footer);
+    app.component(Sider.name, Sider);
+    app.component(Content.name, Content);
+    return app;
+  },
+});

components/layout/layout.tsx

@@ -99,12 +99,6 @@ const Content = generator({
   name: 'ALayoutContent',
 })(Basic);
 
-Layout.Header = Header;
+export { Header, Footer, Content };
-Layout.Footer = Footer;
-Layout.Content = Content;
 
-export default Layout as typeof Layout & {
+export default Layout;
-  readonly Header: typeof Header;
-  readonly Footer: typeof Footer;
-  readonly Content: typeof Content;
-};

components/mentions/index.tsx

@@ -1,16 +1,14 @@
-import type { App, PropType, Plugin, ExtractPropTypes } from 'vue';
+import type { App, PropType, ExtractPropTypes } from 'vue';
 import { watch, ref, onMounted, defineComponent, nextTick } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
-import VcMentions from '../vc-mentions';
+import VcMentions, { Option } from '../vc-mentions';
 import { mentionsProps as baseMentionsProps } from '../vc-mentions/src/mentionsProps';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { flattenChildren, getOptionProps } from '../_util/props-util';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import omit from '../_util/omit';
 
-const { Option } = VcMentions;
-
 interface MentionsConfig {
   prefix?: string | string[];
   split?: string;
@@ -85,8 +83,6 @@ const Mentions = defineComponent({
   name: 'AMentions',
   inheritAttrs: false,
   props: mentionsProps,
-  getMentions,
-  Option,
   emits: ['update:value', 'change', 'focus', 'blur', 'select', 'pressenter'],
   slots: ['notFoundContent', 'option'],
   setup(props, { slots, emit, attrs, expose }) {
@@ -209,20 +205,18 @@ const Mentions = defineComponent({
   },
 });
 
-export const MentionsOption = {
+/* istanbul ignore next */
+export const MentionsOption = defineComponent({
   ...Option,
   name: 'AMentionsOption',
-};
+});
 
-/* istanbul ignore next */
+export default Object.assign(Mentions, {
-Mentions.install = function (app: App) {
+  Option: MentionsOption,
+  getMentions,
+  install: (app: App) => {
     app.component(Mentions.name, Mentions);
     app.component(MentionsOption.name, MentionsOption);
     return app;
-};
+  },
-
+});
-export default Mentions as typeof Mentions &
-  Plugin & {
-    getMentions: typeof getMentions;
-    readonly Option: typeof Option;
-  };

components/steps/index.tsx

@@ -1,10 +1,10 @@
-import type { App, ExtractPropTypes, Plugin } from 'vue';
+import type { App, ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import VcSteps from '../vc-steps';
+import VcSteps, { Step as VcStep } from '../vc-steps';
 import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
@@ -118,19 +118,15 @@ const Steps = defineComponent({
       );
     };
   },
-  Step: { ...VcSteps.Step, name: 'AStep' },
 });
 
 /* istanbul ignore next */
-Steps.install = function (app: App) {
+export const Step = defineComponent({ ...VcStep, name: 'AStep' });
+export default Object.assign(Steps, {
+  Step,
+  install: (app: App) => {
     app.component(Steps.name, Steps);
-  app.component(Steps.Step.name, Steps.Step);
+    app.component(Step.name, Step);
     return app;
-};
+  },
-
+});
-export const Step = Steps.Step;
-
-export default Steps as typeof Steps &
-  Plugin & {
-    readonly Step: typeof VcSteps.Step;
-  };

components/time-picker/date-fns.tsx

@@ -13,18 +13,14 @@ export interface TimePickerProps extends Omit<PickerTimeProps<Date>, 'picker'> {
   popupClassName?: string;
   valueFormat?: string;
 }
-
 /* istanbul ignore next */
-TimePicker.install = function (app: App) {
+export { TimePicker, TimeRangePicker };
+export default Object.assign(TimePicker, {
+  TimePicker,
+  TimeRangePicker,
+  install: (app: App) => {
     app.component(TimePicker.name, TimePicker);
     app.component(TimeRangePicker.name, TimeRangePicker);
     return app;
-};
+  },
-TimePicker.TimeRangePicker = TimeRangePicker;
+});
-
-export { TimePicker, TimeRangePicker };
-
-export default TimePicker as typeof TimePicker &
-  Plugin & {
-    readonly TimeRangePicker: typeof TimeRangePicker;
-  };

components/time-picker/dayjs.tsx

@@ -16,16 +16,13 @@ export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'>
 }
 
 /* istanbul ignore next */
-TimePicker.install = function (app: App) {
+export { TimePicker, TimeRangePicker };
+export default Object.assign(TimePicker, {
+  TimePicker,
+  TimeRangePicker,
+  install: (app: App) => {
     app.component(TimePicker.name, TimePicker);
     app.component(TimeRangePicker.name, TimeRangePicker);
     return app;
-};
+  },
-TimePicker.TimeRangePicker = TimeRangePicker;
+});
-
-export { TimePicker, TimeRangePicker };
-
-export default TimePicker as typeof TimePicker &
-  Plugin & {
-    readonly TimeRangePicker: typeof TimeRangePicker;
-  };

components/time-picker/moment.tsx

@@ -14,18 +14,14 @@ export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'>
   popupClassName?: string;
   valueFormat?: string;
 }
-
 /* istanbul ignore next */
-TimePicker.install = function (app: App) {
+export { TimePicker, TimeRangePicker };
+export default Object.assign(TimePicker, {
+  TimePicker,
+  TimeRangePicker,
+  install: (app: App) => {
     app.component(TimePicker.name, TimePicker);
     app.component(TimeRangePicker.name, TimeRangePicker);
     return app;
-};
+  },
-TimePicker.TimeRangePicker = TimeRangePicker;
+});
-
-export { TimePicker, TimeRangePicker };
-
-export default TimePicker as typeof TimePicker &
-  Plugin & {
-    readonly TimeRangePicker: typeof TimeRangePicker;
-  };

components/tree-select/index.tsx

@@ -1,4 +1,4 @@
-import type { App, ExtractPropTypes, Plugin, PropType } from 'vue';
+import type { App, ExtractPropTypes, PropType } from 'vue';
 import { computed, ref, watchEffect, defineComponent } from 'vue';
 import VcTreeSelect, {
   TreeNode,
@@ -54,9 +54,6 @@ export type TreeSelectProps = Partial<ExtractPropTypes<typeof treeSelectProps>>;
 
 const TreeSelect = defineComponent({
   TreeNode,
-  SHOW_ALL,
-  SHOW_PARENT,
-  SHOW_CHILD,
   name: 'ATreeSelect',
   inheritAttrs: false,
   props: initDefaultProps(treeSelectProps, {
@@ -248,21 +245,15 @@ const TreeSelect = defineComponent({
 });
 
 /* istanbul ignore next */
-TreeSelect.install = function (app: App) {
+export const TreeSelectNode = TreeNode;
+export default Object.assign(TreeSelect, {
+  TreeNode,
+  SHOW_ALL,
+  SHOW_PARENT,
+  SHOW_CHILD,
+  install: (app: App) => {
     app.component(TreeSelect.name, TreeSelect);
-  app.component(TreeSelect.TreeNode.displayName, TreeSelect.TreeNode);
+    app.component(TreeSelectNode.displayName, TreeSelectNode);
     return app;
-};
+  },
-
+});
-export const TreeSelectNode = TreeSelect.TreeNode;
-
-export default TreeSelect as typeof TreeSelect &
-  Plugin & {
-    readonly TreeNode: typeof TreeNode;
-
-    readonly SHOW_ALL: typeof SHOW_ALL;
-
-    readonly SHOW_PARENT: typeof SHOW_PARENT;
-
-    readonly SHOW_CHILD: typeof SHOW_CHILD;
-  };

components/tree/Tree.tsx

@@ -1,7 +1,7 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import { watchEffect, ref, defineComponent, computed } from 'vue';
 import classNames from '../_util/classNames';
-import VcTree, { TreeNode } from '../vc-tree';
+import VcTree from '../vc-tree';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
@@ -151,7 +151,6 @@ export default defineComponent({
     'doubleclick',
     'dblclick',
   ],
-  TreeNode,
   setup(props, { attrs, expose, emit, slots }) {
     warning(
       !(props.treeData === undefined && slots.default),

components/tree/index.tsx

@@ -1,5 +1,7 @@
-import type { App, Plugin } from 'vue';
+import type { App } from 'vue';
+import { defineComponent } from 'vue';
 import Tree from './Tree';
+import { TreeNode as VsTreeNode } from '../vc-tree';
 import DirectoryTree from './DirectoryTree';
 
 export type { EventDataNode, DataNode } from '../vc-tree/interface';
@@ -21,20 +23,19 @@ export type {
   DirectoryTreeProps,
 } from './DirectoryTree';
 
-Tree.TreeNode.name = 'ATreeNode';
-Tree.DirectoryTree = DirectoryTree;
 /* istanbul ignore next */
-Tree.install = function (app: App) {
+
+const TreeNode = defineComponent({ ...VsTreeNode, name: 'ATreeNode' });
+
+export { DirectoryTree, TreeNode };
+
+export default Object.assign(Tree, {
+  DirectoryTree,
+  TreeNode,
+  install: (app: App) => {
     app.component(Tree.name, Tree);
-  app.component(Tree.TreeNode.name, Tree.TreeNode);
+    app.component(TreeNode.name, TreeNode);
     app.component(DirectoryTree.name, DirectoryTree);
     return app;
-};
+  },
-
+});
-export const TreeNode = Tree.TreeNode;
-export { DirectoryTree };
-export default Tree as typeof Tree &
-  Plugin & {
-    readonly TreeNode: any;
-    readonly DirectoryTree: typeof DirectoryTree;
-  };

components/vc-mentions/index.ts

@@ -2,7 +2,5 @@
 import Mentions from './src/Mentions';
 import Option from './src/Option';
 
-Mentions.Option = Option;
-
 export { Option };
 export default Mentions;

components/vc-steps/index.ts

@@ -2,7 +2,5 @@
 import Steps from './Steps';
 import Step from './Step';
 
-Steps.Step = Step;
-
 export { Step };
 export default Steps;