Add TypeScript definitions (ElemeFE#3910)

* add typings into package.json

* add typings for global instance api

* add common component definition

* add layout components' definition

* add icons definition

* add component size definition

* add component description

* add button definition

* add radio definition

* add checkbox definition

* add input definitions

* add input-number definition

* add select definition

* add cascader definition

* add switch definition

* add slider definition

* add time picker definition

* add date picker definition

* add upload definition

* add rate definition

* add color picker definition

* add form definition

* add tooltip definition

* add table definition

* rename TextAlignment to Horizontal alignment

* add tag definition

* add progress definition

* add tree definition

* add pagination definition

* add badge definition

* add alert definition

* fix typo

* Loading: add definition

* Message: add definition

* Loading: remove unnecessary declare keyword

* MessageBox: add definition

* Notification: add definition

* Menu: add definition

* Tabs: add definition

* Breadcrumb: add definition

* Dropdown: add definition

* Steps: add definition

* Dialog: add definition

* Popover: add definition

* Card: add definition

* Carousel: add definition

* Collapse: add definition

* Loading: update description

* some $message method params should be optional

* Select: update definition

* DatePicker: update definition

package.json

@@ -6,8 +6,10 @@
   "files": [
     "lib",
     "src",
-    "packages"
+    "packages",
+    "types"
   ],
+  "typings": "types/index.d.ts",
   "scripts": {
     "bootstrap": "yarn || npm i",
     "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",

types/alert.d.ts

@@ -0,0 +1,24 @@
+import { ElementUIComponent } from './component'
+
+export type AlertType = 'success' | 'warning' | 'info' | 'error'
+
+/** Alert Component */
+export declare class ElAlert extends ElementUIComponent {
+  /** Title */
+  title: string
+
+  /** Component type */
+  type: AlertType
+
+  /** Descriptive text. Can also be passed with the default slot */
+  description: string
+
+  /** If closable or not */
+  closable: boolean
+
+  /** Customized close button text */
+  closeText: string
+
+  /** If a type icon is displayed */
+  showIcon: boolean
+}

types/autocomplete.d.ts

@@ -0,0 +1,51 @@
+import { ElementUIComponent } from './component'
+import { IconClickEventHandler } from './input'
+
+export interface FetchSuggestionsCallback {
+  /**
+   * Callback function used in fetch-suggestions function
+   *
+   * @param data Suggestions to use
+   */
+  (data: any[]): void
+}
+
+export interface FetchSuggestions {
+  /**
+   * The function passed into the fetch-suggestions property
+   *
+   * @param queryString Current value of the text input
+   * @param callback Callback function used to indicate that suggestions have completely fetched
+   */
+  (queryString: string, callback: FetchSuggestionsCallback): void
+}
+
+/** Autocomplete Component */
+export declare class ElAutocomplete extends ElementUIComponent {
+  /** The placeholder of Autocomplete */
+  placeholder: string
+
+  /** Whether Autocomplete is disabled */
+  disabled: boolean
+
+  /** Icon name */
+  icon: string
+
+  /** Binding value */
+  value: string
+
+  /** Component name of your customized suggestion list item */
+  customItem: string
+
+  /** A method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete */
+  fetchSuggestions: FetchSuggestions
+
+  /** Custom class name for autocomplete's dropdown */
+  popperClass: string
+
+  /** Whether show suggestions when input focus */
+  triggerOnFocus: boolean
+
+  /** Hook function when clicking on the input icon */
+  onIconClick: IconClickEventHandler
+}

types/badge.d.ts

@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Badge Component */
+export declare class ElBadge extends ElementUIComponent {
+  /** Display value */
+  value: string | number
+
+  /** Maximum value, shows '{max}+' when exceeded. Only works if `value` is a number */
+  max: number
+
+  /** If a little dot is displayed */
+  isDot: boolean
+
+  /** Hidden badge */
+  hidden: boolean
+}

types/breadcrumb-item.d.ts

@@ -0,0 +1,11 @@
+import { Route } from 'vue-router'
+import { ElementUIComponent } from './component'
+
+/** Breadcrumb Item Component */
+export declare class ElBreadcrumbItem extends ElementUIComponent {
+  /** Target route of the link, same as to of vue-router */
+  to: string | Route
+
+  /** If true, the navigation will not leave a history record */
+  replace: boolean
+}

types/breadcrumb.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Displays the location of the current page, making it easier to browser back */
+export declare class ElBreadcrumb extends ElementUIComponent {
+  /** Separator character */
+  separator: string
+}

types/button-group.d.ts

@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Button Group Component */
+export declare class ElButtonGroup extends ElementUIComponent {}

types/button.d.ts

@@ -0,0 +1,34 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Button type */
+export type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+
+/** Same as native button's type */
+export type ButtonNativeType = 'button' | 'submit' | 'reset' | 'menu'
+
+/** Button Component */
+export declare class ElButton extends ElementUIComponent {
+  /** Button size */
+  size: ElementUIComponentSize
+
+  /** Button type */
+  type: ButtonType
+
+  /** Determine whether it's a plain button */
+  plain: Boolean
+
+  /** Determine whether it's loading */
+  loading: Boolean
+
+  /** Disable the button */
+  disabled: boolean
+
+  /** Button icon, accepts an icon name of Element icon component */
+  icon: string
+
+  /** Same as native button's autofocus */
+  autofocus: boolean
+
+  /** Same as native button's type */
+  nativeType: ButtonNativeType
+}

types/card.d.ts

@@ -0,0 +1,23 @@
+import { VNode, VNodeDirective } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface CardSlots {
+  /** Content of the card */
+  default: VNode[],
+
+  /** Title of the card */
+  header: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Integrate information in a card container */
+export declare class ElCard extends ElementUIComponent {
+  /** Title of the card */
+  header: string
+
+  /** CSS style of body */
+  bodyStyle: object
+
+  $slots: CardSlots
+}

types/carousel-item.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Carousel Item Component */
+export declare class ElCarouselItem extends ElementUIComponent {
+  /** Name of the item, can be used in setActiveItem */
+  name: string
+}

types/carousel.d.ts

@@ -0,0 +1,53 @@
+import { ElementUIComponent } from './component'
+
+export type CarouselIndicatorTrigger = 'hover' | 'click'
+export type CarouselIndicatorPosition = 'outside' | 'none'
+export type CarouselArrawVisibility = 'always' | 'hover' | 'never'
+export type CarouselType = 'card'
+
+/** Loop a series of images or texts in a limited space */
+export declare class ElCarousel extends ElementUIComponent {
+  /** Height of the carousel */
+  height: number
+
+  /** Index of the initially active slide (starting from 0) */
+  initialIndex: number
+
+  /** How indicators are triggered */
+  trigger: CarouselIndicatorTrigger
+
+  /** Whether automatically loop the slides */
+  autoplay: boolean
+
+  /** Interval of the auto loop, in milliseconds */
+  interval: number
+
+  /** Position of the indicators */
+  indicatorPosition: CarouselIndicatorPosition
+
+  /** When arrows are shown */
+  arrow: CarouselArrawVisibility
+
+  /** Type of the Carousel */
+  type: CarouselType
+
+  /**
+   * Manually switch slide by index
+   *
+   * @param index Index of the slide to be switched to (starting from 0)
+   */
+  setActiveItem (index: number)
+
+  /**
+   * Manually switch slide by carousel item's name
+   *
+   * @param name The name of the corresponding `el-carousel-item`
+   */
+  setActiveItem (name: string)
+
+  /** Switch to the previous slide */
+  prev ()
+
+  /** Switch to the next slide */
+  next ()
+}

types/cascader.d.ts

@@ -0,0 +1,54 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Trigger mode of expanding current item */
+export type ExpandTrigger = 'click' | 'hover'
+
+/** Cascader Option */
+export interface CascaderOption {
+  label: string,
+  value: any,
+  children: CascaderOption[],
+  disabled: boolean
+}
+
+/** Cascader Component */
+export declare class ElCascader extends ElementUIComponent {
+  /** Data of the options */
+  options: CascaderOption[]
+
+  /** Configuration options, see the following table */
+  props: object
+
+  /** Selected value */
+  value: any[]
+
+  /** Custom class name for Cascader's dropdown */
+  popperClass: string
+
+  /** Input placeholder */
+  placeholder: string
+
+  /** Whether Cascader is disabled */
+  disabled: boolean
+
+  /** Whether selected value can be cleared */
+  clearable: boolean
+
+  /** Trigger mode of expanding current item */
+  expandTrigger: ExpandTrigger
+
+  /** Whether to display all levels of the selected value in the input */
+  showAllLevels: boolean
+
+  /** Whether the options can be searched */
+  filterable: boolean
+
+  /** Debounce delay when typing filter keyword, in millisecond */
+  debounce: number
+
+  /** Whether selecting an option of any level is permitted */
+  changeOnSelect: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+}

types/checkbox-group.d.ts

@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Checkbox Group Component */
+export declare class ElCheckboxGroup extends ElementUIComponent {}

types/checkbox.d.ts

@@ -0,0 +1,28 @@
+import { ElementUIComponent } from './component'
+
+/** Checkbox Component */
+export declare class ElCheckbox extends ElementUIComponent {
+  /** The form input value */
+  value: string | string[]
+
+  /** Value of the checkbox when used inside a checkbox-group */
+  label: string
+
+  /** Value of the checkbox if it's checked */
+  trueLabel: string | number
+
+  /** Value of the checkbox if it's not checked */
+  falseLabel: string | number
+
+  /** Native 'name' attribute */
+  name: string
+
+  /** If the checkbox is disabled */
+  disabled: boolean
+
+  /** If the checkbox is checked */
+  checked: boolean
+
+  /** Same as indeterminate in native checkbox */
+  indeterminate: boolean
+}

types/col.d.ts

@@ -0,0 +1,40 @@
+import { ElementUIComponent } from './component'
+
+/** Responsive column props */
+export interface ResponsiveColumnProperties {
+  /** Number of column the grid spans */
+  span: number,
+
+  /** Number of spacing on the left side of the grid */
+  offset: number
+}
+
+/** Responsive column property */
+export type ResponsiveColumn = number | ResponsiveColumnProperties
+
+/** Colunm Layout Component */
+export declare class ElCol extends ElementUIComponent {
+  /** Number of column the grid spans */
+  span: number
+
+  /** Number of spacing on the left side of the grid */
+  offset: number
+
+  /** Number of columns that grid moves to the right */
+  push: number
+
+  /** Number of columns that grid moves to the left */
+  pull: number
+
+  /** <768px Responsive columns or column props object */
+  xs: ResponsiveColumn
+
+  /** ≥768px Responsive columns or column props object */
+  sm: ResponsiveColumn
+
+  /** ≥992 Responsive columns or column props object */
+  md: ResponsiveColumn
+
+  /** ≥1200 Responsive columns or column props object */
+  lg: ResponsiveColumn
+}