Use typescript definition for auto completing events and slots in template

[znck]

Attribute type completion in TSX works if the .vue file provides type definitions.

For example:

Type definition for base-button.vue:

import { HTML, Components } from '@uxx/prop-types'
import { IconName } from '@uxx/icon'

type Children =
  | any
  | JSX.Element[]
  | {
      icon(): JSX.Element[]
    }
  | {
      leadingIcon?(): JSX.Element[]
      default(): JSX.Element[]
      trailingIcon?(): JSX.Element[]
    }

export type Props<T = never, C = Children> = T &
  JSX.ElementChildrenAttribute<C> & {
    color?:
      | 'primary'
      | 'secondary'
      | 'accent'
      | 'success'
      | 'danger'
      | 'warn'
      | 'info'
    variant?: 'filled' | 'outline' | 'text'
    block?: boolean
    leadingIcon?: IconName
    trailingIcon?: IconName
    icon?: IconName
  }

export interface BaseButton {
  props: Props
  config: {
    routerLink: string
  }

  (props: Props<Components.RouterLink>): JSX.Element
  (props: Props<HTML.A>): JSX.Element
  (props: Props<HTML.Button>): JSX.Element
}

const button: BaseButton

export default button

Open questions:

1. How to type events and slots?
2. A standard type API for Vue 2.x and 3.

Example:

https://github.com/znck/vetur-example

[isamyh]

This is: needed 👍