fix: install types (#2682)

* chore: compatible types with jsx

* fix: install types

* fix: anchor, breadcrumb, button, checkbox types

Co-authored-by: Amour1688 <lcz_1996@foxmail.com>

types/anchor/anchor-link.d.ts

@@ -2,18 +2,26 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
+import { VNode } from 'vue';
 
-export declare class AnchorLink extends AntdComponent {
-  /**
-   * target of hyperlink
-   * @type string
-   */
-  href: string;
+export declare class AnchorLink {
+  $props: {
+    /**
+     * target of hyperlink
+     * @type string
+     */
+    href: string;
 
-  /**
-   * content of hyperlink
-   * @type any (string | slot)
-   */
-  title: any;
+    /**
+     * content of hyperlink
+     * @type any (string | slot)
+     */
+    title?: string | VNode | VNode[];
+
+    /**
+     * Specifies where to display the linked URL
+     * @version 1.5.0
+     */
+    target?: string;
+  };
 }

types/anchor/anchor.d.ts

@@ -2,62 +2,93 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
 import { AnchorLink } from './anchor-link';
+import { AntdComponent } from '../component';
 
 export declare class Anchor extends AntdComponent {
   static Link: typeof AnchorLink;
 
-  /**
-   * Fixed mode of Anchor
-   * @default true
-   * @type boolean
-   */
-  affix: boolean;
+  $props: {
+    /**
+     * Fixed mode of Anchor
+     * @default true
+     * @type boolean
+     */
+    affix?: boolean;
 
-  /**
-   * Bounding distance of anchor area
-   * @default 5
-   * @type number
-   */
-  bounds: number;
+    /**
+     * Bounding distance of anchor area
+     * @default 5
+     * @type number
+     */
+    bounds?: number;
 
-  /**
-   * Scrolling container
-   * @default () => window
-   * @type Function
-   */
-  getContainer: () => HTMLElement;
+    /**
+     * Scrolling container
+     * @default () => window
+     * @type Function
+     */
+    getContainer?: () => HTMLElement;
 
-  /**
-   * Pixels to offset from bottom when calculating position of scroll
-   * @type number
-   */
-  offsetBottom: number;
+    /**
+     * Pixels to offset from bottom when calculating position of scroll
+     * @type number
+     */
+    offsetBottom?: number;
 
-  /**
-   * Pixels to offset from top when calculating position of scroll
-   * @default 0
-   * @type number
-   */
-  offsetTop: number;
+    /**
+     * Pixels to offset from top when calculating position of scroll
+     * @default 0
+     * @type number
+     */
+    offsetTop?: number;
 
-  /**
-   * Whether show ink-balls in Fixed mode
-   * @default false
-   * @type boolean
-   */
-  showInkInFixed: boolean;
+    /**
+     * Whether show ink-balls in Fixed mode
+     * @default false
+     * @type boolean
+     */
+    showInkInFixed?: boolean;
 
-  /**
-   * The class name of the container
-   * @type string
-   */
-  wrapperClass: string;
+    /**
+     * The class name of the container
+     * @type string
+     */
+    wrapperClass?: string;
 
-  /**
-   * The style of the container
-   * @type object
-   */
-  wrapperStyle: object;
+    /**
+     * The style of the container
+     * @type object
+     */
+    wrapperStyle?: object;
+
+    /**
+     * Customize the anchor highlight
+     * @version 1.5.0
+     * @type function
+     * @return string
+     */
+    getCurrentAnchor?: () => string;
+
+    /**
+     * Anchor scroll offset, default as `offsetTop`
+     * e.g. https://antdv.com/components/anchor/#components-anchor-demo-targetOffset
+     * @version 1.5.0
+     * @type number
+     */
+    targetOffset?: number;
+
+    /**
+     * 	set the handler to handle click event
+     * @param e
+     * @param link
+     */
+    onClick?: (e?: Event, link?: { [key: string]: any }) => void;
+
+    /**
+     * Listening for anchor link change
+     * @param currentActiveLink
+     */
+    onChange?: (currentActiveLink?: string) => void;
+  };
 }

types/ant-design-vue.d.ts

@@ -2,7 +2,7 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import Vue from 'vue';
+import { App } from 'vue';
 
 import { Affix } from './affix';
 import { Anchor } from './anchor/anchor';
@@ -73,7 +73,7 @@ import { PageHeader } from './page-header';
  * Please do not invoke this method directly.
  * Call `Vue.use(Antd)` to install.
  */
-export function install(vue: typeof Vue): void;
+export function install(app: App): void;
 
 declare const message: Message;
 declare const notification: Notification;

types/breadcrumb/breadcrumb-item.d.ts

@@ -1,15 +1,14 @@
 // Project: https://github.com/vueComponent/ant-design-vue
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
-
-import { AntdComponent } from '../component';
-
-export declare class BreadcrumbItem extends AntdComponent {
-  /**
-   * add navigation
-   * @default ''
-   * @type string
-   */
-  href?: String;
-  overlay?: any;
+export declare class BreadcrumbItem {
+  $props: {
+    /**
+     * add navigation
+     * @default ''
+     * @type string
+     */
+    href?: String;
+    overlay?: any;
+  };
 }

types/breadcrumb/breadcrumb-separator.ts

@@ -2,6 +2,4 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
-
-export declare class BreadcrumbSeparator extends AntdComponent {}
+export declare class BreadcrumbSeparator {}

types/breadcrumb/breadcrumb.d.ts

@@ -2,51 +2,55 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
 import { VNode } from 'vue';
 import { BreadcrumbItem } from './breadcrumb-item';
 import { BreadcrumbSeparator } from './breadcrumb-separator';
+import { AntdComponent } from '../component';
 
 export interface Route {
   path?: String;
   breadcrumbName?: String;
+  children?: Route[];
 }
 
 export declare class Breadcrumb extends AntdComponent {
   static Item: typeof BreadcrumbItem;
   static Separator: typeof BreadcrumbSeparator;
-  /**
-   * The routing stack information of router
-   * @type Route[]
-   */
-  routes: Route[];
 
-  /**
-   * Routing parameters
-   * @type object
-   */
-  params: object;
+  $props: {
+    /**
+     * The routing stack information of router
+     * @type Route[]
+     */
+    routes?: Route[];
 
-  /**
-   * Custom separator
-   * @default '/'
-   * @type any (string | slot)
-   */
-  separator: any;
+    /**
+     * Routing parameters
+     * @type object
+     */
+    params?: object;
 
-  /**
-   * Custom item renderer, slot="itemRender" and slot-scope="{route, params, routes, paths}"
-   * @type Function
-   */
-  itemRender: ({
-    route,
-    params,
-    routes,
-    paths,
-  }: {
-    route: any;
-    params: any;
-    routes: any;
-    paths: any;
-  }) => VNode;
+    /**
+     * Custom separator
+     * @default '/'
+     * @type any (string | slot)
+     */
+    separator?: string | VNode | VNode[];
+
+    /**
+     * Custom item renderer, slot="itemRender" and slot-scope="{route, params, routes, paths}"
+     * @type Function
+     */
+    itemRender?: ({
+      route,
+      params,
+      routes,
+      paths,
+    }: {
+      route: any;
+      params: any;
+      routes: any;
+      paths: any;
+    }) => VNode;
+  };
 }

types/button/button-group.d.ts

@@ -2,13 +2,13 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
-
-export declare class ButtonGroup extends AntdComponent {
-  /**
-   * can be set to small large or omitted
-   * @default 'default'
-   * @type string
-   */
-  size: 'small' | 'large' | 'default';
+export declare class ButtonGroup {
+  $props: {
+    /**
+     * can be set to small large or omitted
+     * @default 'default'
+     * @type string
+     */
+    size?: 'small' | 'large' | 'default';
+  };
 }

types/button/button.d.ts

@@ -2,70 +2,73 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
 import { ButtonGroup } from './button-group';
 
-export declare class Button extends AntdComponent {
+export declare class Button {
   static Group: typeof ButtonGroup;
 
-  /**
-   * can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default)
-   * @default 'default'
-   * @type string
-   */
-  type: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
+  $props: {
+    /**
+     * can be set to primary ghost dashed danger(added in 2.7) or omitted (meaning default)
+     * @default 'default'
+     * @type string
+     */
+    type: 'primary' | 'danger' | 'dashed' | 'ghost' | 'default';
 
-  /**
-   * set the original html type of button
-   * @default 'button'
-   * @type string
-   */
-  htmlType: 'button' | 'submit' | 'reset' | 'menu';
+    /**
+     * set the original html type of button
+     * @default 'button'
+     * @type string
+     */
+    htmlType: 'button' | 'submit' | 'reset' | 'menu';
 
-  /**
-   * set the icon of button
-   * @type string
-   */
-  icon: string;
+    /**
+     * set the icon of button
+     * @type string
+     */
+    icon: string;
 
-  /**
-   * can be set to circle or circle-outline or omitted
-   * @type string
-   */
-  shape: 'circle' | 'circle-outline';
+    /**
+     * can be set to circle or circle-outline or omitted
+     * @type string
+     */
+    shape: 'circle' | 'circle-outline';
 
-  /**
-   * can be set to small large or omitted
-   * @default 'default'
-   * @type string
-   */
-  size: 'small' | 'large' | 'default';
+    /**
+     * can be set to small large or omitted
+     * @default 'default'
+     * @type string
+     */
+    size: 'small' | 'large' | 'default';
 
-  /**
-   * set the loading status of button
-   * @default false
-   * @type boolean | { delay: number }
-   */
-  loading: boolean | { delay: number };
+    /**
+     * set the loading status of button
+     * @default false
+     * @type boolean | { delay: number }
+     */
+    loading: boolean | { delay: number };
 
-  /**
-   * disabled state of button
-   * @default false
-   * @type boolean
-   */
-  disabled: boolean;
+    /**
+     * disabled state of button
+     * @default false
+     * @type boolean
+     */
+    disabled: boolean;
 
-  /**
-   * make background transparent and invert text and border colors, added in 2.7
-   * @default false
-   * @type boolean
-   */
-  ghost: boolean;
+    /**
+     * make background transparent and invert text and border colors, added in 2.7
+     * @default false
+     * @type boolean
+     */
+    ghost: boolean;
 
-  /**
-   * option to fit button width to its parent width
-   * @default false
-   * @type boolean
-   */
-  block: boolean;
+    /**
+     * option to fit button width to its parent width
+     * @default false
+     * @type boolean
+     */
+    block: boolean;
+
+    onClick?: (e?: Event) => void;
+  };
 }

types/checkbox/checkbox-group.d.ts

@@ -2,34 +2,40 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
+export declare class CheckboxGroup {
+  $props: {
+    /**
+     * Default selected value
+     * @type string[]
+     */
+    defaultValue?: string[];
 
-export declare class CheckboxGroup extends AntdComponent {
-  /**
-   * Default selected value
-   * @type string[]
-   */
-  defaultValue: string[];
+    /**
+     * Disable all checkboxes
+     * @default false
+     * @type boolean
+     */
+    disabled?: boolean;
 
-  /**
-   * Disable all checkboxes
-   * @default false
-   * @type boolean
-   */
-  disabled: boolean;
+    /**
+     * Specifies options, you can customize `label` with slot = "label" slot-scope = "option"
+     * @type Array<string | { label: string, value: string, disabled?: boolean, onChange?: Function }>
+     */
+    options?: Array<
+      string | { label: string; value: string; disabled?: boolean; onChange?: Function }
+    >;
 
-  /**
-   * Specifies options, you can customize `label` with slot = "label" slot-scope = "option"
-   * @type Array<string | { label: string, value: string, disabled?: boolean, onChange?: Function }>
-   */
-  options: Array<
-    string | { label: string; value: string; disabled?: boolean; onChange?: Function }
-  >;
+    /**
+     * Used for setting the currently selected value.
+     * @type string[]
+     */
+    value: string[];
+    name?: string;
 
-  /**
-   * Used for setting the currently selected value.
-   * @type string[]
-   */
-  value: string[];
-  name?: string;
+    /**
+     * The callback function that is triggered when the state changes.
+     * @param e
+     */
+    onChange?: (checkedValue?: any) => void;
+  };
 }

types/checkbox/checkbox.d.ts

@@ -2,54 +2,62 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import { AntdComponent } from '../component';
 import { CheckboxGroup } from './checkbox-group';
+import { AntdComponent } from '../component';
 
 export declare class Checkbox extends AntdComponent {
   static Group: typeof CheckboxGroup;
 
-  /**
-   * get focus when component mounted
-   * @default false
-   * @type boolean
-   */
-  autofocus: boolean;
+  $props: {
+    /**
+     * get focus when component mounted
+     * @default false
+     * @type boolean
+     */
+    autofocus?: boolean;
 
-  /**
-   * Specifies whether the checkbox is selected.
-   * @default false
-   * @type boolean
-   */
-  checked: boolean;
+    /**
+     * Specifies whether the checkbox is selected.
+     * @default false
+     * @type boolean
+     */
+    checked?: boolean;
 
-  /**
-   * Specifies the initial state: whether or not the checkbox is selected.
-   * @default false
-   * @type boolean
-   */
-  defaultChecked: boolean;
+    /**
+     * Specifies the initial state: whether or not the checkbox is selected.
+     * @default false
+     * @type boolean
+     */
+    defaultChecked?: boolean;
 
-  /**
-   * Disable checkbox
-   * @default false
-   * @type boolean
-   */
-  disabled: boolean;
+    /**
+     * Disable checkbox
+     * @default false
+     * @type boolean
+     */
+    disabled?: boolean;
 
-  /**
-   * indeterminate checked state of checkbox
-   * @default false
-   * @type boolean
-   */
-  indeterminate: boolean;
+    /**
+     * indeterminate checked state of checkbox
+     * @default false
+     * @type boolean
+     */
+    indeterminate?: boolean;
 
-  /**
-   * remove focus
-   */
-  blur(): void;
+    /**
+     * remove focus
+     */
+    blur(): void;
 
-  /**
-   * get focus
-   */
-  focus(): void;
+    /**
+     * get focus
+     */
+    focus(): void;
+
+    /**
+     * The callback function that is triggered when the state changes.
+     * @param event
+     */
+    onChange?: (e?: Event) => void;
+  };
 }

types/component.d.ts

@@ -2,8 +2,8 @@
 // Definitions by: akki-jat <https://github.com/akki-jat>
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
-import Vue from 'vue';
+import { App } from 'vue';
 
-export declare class AntdComponent extends Vue {
-  static install(vue: typeof Vue): void;
+export declare class AntdComponent {
+  static install(app: App): void;
 }

types/meta.d.ts

@@ -4,22 +4,24 @@
 
 import { AntdComponent } from './component';
 
-export declare class Meta extends AntdComponent {
-  /**
-   * The avatar of list item
-   * @type any (slot)
-   */
-  avatar: any;
+export declare class Meta {
+  $props: {
+    /**
+     * The avatar of list item
+     * @type any (slot)
+     */
+    avatar: any;
 
-  /**
-   * The description of list item
-   * @type any (string | slot)
-   */
-  description: any;
+    /**
+     * The description of list item
+     * @type any (string | slot)
+     */
+    description: any;
 
-  /**
-   * The title of list item
-   * @type any (string | slot)
-   */
-  title: any;
+    /**
+     * The title of list item
+     * @type any (string | slot)
+     */
+    title: any;
+  };
 }