feat: support vite-plugin-components

Author: tangjinzhou

components/auto-complete/OptGroup.tsx

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from 'vue';
+import { OptionGroupData } from '../vc-select/interface';
+
+export type OptGroupProps = Omit<OptionGroupData, 'options'>;
+
+export interface OptionGroupFC extends FunctionalComponent<OptGroupProps> {
+  /** Legacy for check if is a Option Group */
+  isSelectOptGroup: boolean;
+}
+
+const OptGroup: OptionGroupFC = () => null;
+OptGroup.isSelectOptGroup = true;
+OptGroup.displayName = 'AAutoCompleteOptGroup';
+export default OptGroup;

components/auto-complete/Option.tsx

@@ -0,0 +1,17 @@
+import { FunctionalComponent } from 'vue';
+import { OptionCoreData } from '../vc-select/interface';
+
+export interface OptionProps extends Omit<OptionCoreData, 'label'> {
+  /** Save for customize data */
+  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export interface OptionFC extends FunctionalComponent<OptionProps> {
+  /** Legacy for check if is a Option Group */
+  isSelectOption: boolean;
+}
+
+const Option: OptionFC = () => null;
+Option.isSelectOption = true;
+Option.displayName = 'AAutoCompleteOption';
+export default Option;

components/auto-complete/index.tsx

@@ -1,4 +1,4 @@
-import { App, defineComponent, inject, provide, Plugin, VNode } from 'vue';
+import { App, defineComponent, inject, provide, Plugin, VNode, ExtractPropTypes } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
@@ -7,26 +7,32 @@ import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
 import Omit from 'omit.js';
 import warning from '../_util/warning';
-
-const { Option, OptGroup } = Select;
+import Option from './Option';
+import OptGroup from './OptGroup';
 
 function isSelectOptionOrSelectOptGroup(child: any): boolean {
   return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
 }
 
-const AutoCompleteProps = {
+const autoCompleteProps = {
   ...SelectProps(),
   dataSource: PropTypes.array,
   dropdownMenuStyle: PropTypes.style,
   optionLabelProp: PropTypes.string,
   dropdownMatchSelectWidth: PropTypes.looseBool,
 };
 
+export type AutoCompleteProps = Partial<ExtractPropTypes<typeof autoCompleteProps>>;
+
+export const AutoCompleteOption = Option;
+
+export const AutoCompleteOptGroup = OptGroup;
+
 const AutoComplete = defineComponent({
   name: 'AAutoComplete',
   inheritAttrs: false,
   props: {
-    ...AutoCompleteProps,
+    ...autoCompleteProps,
     prefixCls: PropTypes.string.def('ant-select'),
     showSearch: PropTypes.looseBool,
     transitionName: PropTypes.string.def('slide-up'),
@@ -38,8 +44,8 @@ const AutoComplete = defineComponent({
     defaultActiveFirstOption: PropTypes.looseBool.def(true),
   },
   emits: ['change', 'select', 'focus', 'blur'],
-  Option: { ...Option, name: 'AAutoCompleteOption' },
-  OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
+  Option,
+  OptGroup,
   setup(props, { slots }) {
     warning(
       !(props.dataSource !== undefined || 'dataSource' in slots),
@@ -142,8 +148,8 @@ const AutoComplete = defineComponent({
 /* istanbul ignore next */
 AutoComplete.install = function(app: App) {
   app.component(AutoComplete.name, AutoComplete);
-  app.component(AutoComplete.Option.name, AutoComplete.Option);
-  app.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup);
+  app.component(AutoComplete.Option.displayName, AutoComplete.Option);
+  app.component(AutoComplete.OptGroup.displayName, AutoComplete.OptGroup);
   return app;
 };
 

components/avatar/index.ts

@@ -13,7 +13,7 @@ Avatar.install = function(app: App) {
   app.component(Group.name, Group);
   return app;
 };
-
+export { Group as AvatarGroup };
 export default Avatar as typeof Avatar &
   Plugin & {
     readonly Group: typeof Group;

components/badge/index.ts

@@ -1,13 +1,16 @@
 import { App, Plugin } from 'vue';
 import Badge from './Badge';
 import Ribbon from './Ribbon';
+export type { BadgeProps } from './Badge'
 
 Badge.install = function(app: App) {
   app.component(Badge.name, Badge);
   app.component(Ribbon.name, Ribbon);
   return app;
 };
 
+export {Ribbon as BadgeRibbon}
+
 export default Badge as typeof Badge &
   Plugin & {
     readonly Ribbon: typeof Ribbon;

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -3,16 +3,16 @@ import PropTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-const breadcrumbSeparator = {
+const breadcrumbSeparatorProps = {
   prefixCls: PropTypes.string,
 };
-export type BreadcrumbSeparator = Partial<ExtractPropTypes<typeof breadcrumbSeparator>>;
+export type BreadcrumbSeparatorProps = Partial<ExtractPropTypes<typeof breadcrumbSeparatorProps>>;
 
 export default defineComponent({
   name: 'ABreadcrumbSeparator',
   __ANT_BREADCRUMB_SEPARATOR: true,
   inheritAttrs: false,
-  props: breadcrumbSeparator,
+  props: breadcrumbSeparatorProps,
   setup(props, { slots, attrs }) {
     const { prefixCls } = useConfigInject('breadcrumb', props);
 

components/breadcrumb/index.ts

@@ -3,9 +3,9 @@ import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export { BreadcrumbProps } from './Breadcrumb';
-export { BreadcrumbItemProps } from './BreadcrumbItem';
-export { BreadcrumbSeparator } from './BreadcrumbSeparator';
+export type { BreadcrumbProps } from './Breadcrumb';
+export type  { BreadcrumbItemProps } from './BreadcrumbItem';
+export  type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator';
 
 Breadcrumb.Item = BreadcrumbItem;
 Breadcrumb.Separator = BreadcrumbSeparator;
@@ -18,6 +18,7 @@ Breadcrumb.install = function(app: App) {
   return app;
 };
 
+export { BreadcrumbItem, BreadcrumbSeparator };
 export default Breadcrumb as typeof Breadcrumb &
   Plugin & {
     readonly Item: typeof BreadcrumbItem;

components/button/button.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, Text, VNode } from 'vue';
+import { defineComponent, ExtractPropTypes, inject, Text, VNode } from 'vue';
 import Wave from '../_util/wave';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
 import buttonTypes from './buttonTypes';
@@ -8,6 +8,9 @@ import { defaultConfigProvider } from '../config-provider';
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 const props = buttonTypes();
+
+export type ButtonProps = Partial<ExtractPropTypes<ReturnType<typeof buttonTypes>>>;
+
 export default defineComponent({
   name: 'AButton',
   inheritAttrs: false,

components/button/index.ts

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

components/card/Card.tsx

@@ -1,4 +1,12 @@
-import { inject, isVNode, defineComponent, VNodeTypes, PropType, VNode } from 'vue';
+import {
+  inject,
+  isVNode,
+  defineComponent,
+  VNodeTypes,
+  PropType,
+  VNode,
+  ExtractPropTypes,
+} from 'vue';
 import { tuple } from '../_util/type';
 import Tabs from '../tabs';
 import Row from '../row';
@@ -20,32 +28,36 @@ export type CardType = 'inner';
 
 const { TabPane } = Tabs;
 
+const cardProps = {
+  prefixCls: PropTypes.string,
+  title: PropTypes.VNodeChild,
+  extra: PropTypes.VNodeChild,
+  bordered: PropTypes.looseBool.def(true),
+  bodyStyle: PropTypes.style,
+  headStyle: PropTypes.style,
+  loading: PropTypes.looseBool.def(false),
+  hoverable: PropTypes.looseBool.def(false),
+  type: PropTypes.string,
+  size: PropTypes.oneOf(tuple('default', 'small')),
+  actions: PropTypes.VNodeChild,
+  tabList: {
+    type: Array as PropType<CardTabListType[]>,
+  },
+  tabBarExtraContent: PropTypes.VNodeChild,
+  activeTabKey: PropTypes.string,
+  defaultActiveTabKey: PropTypes.string,
+  cover: PropTypes.VNodeChild,
+  onTabChange: {
+    type: Function as PropType<(key: string) => void>,
+  },
+};
+
+export type CardProps = Partial<ExtractPropTypes<typeof cardProps>>;
+
 const Card = defineComponent({
   name: 'ACard',
   mixins: [BaseMixin],
-  props: {
-    prefixCls: PropTypes.string,
-    title: PropTypes.VNodeChild,
-    extra: PropTypes.VNodeChild,
-    bordered: PropTypes.looseBool.def(true),
-    bodyStyle: PropTypes.style,
-    headStyle: PropTypes.style,
-    loading: PropTypes.looseBool.def(false),
-    hoverable: PropTypes.looseBool.def(false),
-    type: PropTypes.string,
-    size: PropTypes.oneOf(tuple('default', 'small')),
-    actions: PropTypes.VNodeChild,
-    tabList: {
-      type: Array as PropType<CardTabListType[]>,
-    },
-    tabBarExtraContent: PropTypes.VNodeChild,
-    activeTabKey: PropTypes.string,
-    defaultActiveTabKey: PropTypes.string,
-    cover: PropTypes.VNodeChild,
-    onTabChange: {
-      type: Function as PropType<(key: string) => void>,
-    },
-  },
+  props: cardProps,
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),