Add TypeScript definitions (#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

+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

+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

+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

+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

+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

+import { ElementUIComponent } from './component'
+
+/** Button Group Component */
+export declare class ElButtonGroup extends ElementUIComponent {}

types/button.d.ts

+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

+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

+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

+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

+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

+import { ElementUIComponent } from './component'
+
+/** Checkbox Group Component */
+export declare class ElCheckboxGroup extends ElementUIComponent {}

types/checkbox.d.ts

+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

+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
+}

types/collapse-item.d.ts

+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface CollapseItemSlots {
+  /** Content of the collapse item */
+  default: VNode[],
+
+  /** Title of the collapse item */
+  title: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Collapse Item Component */
+export declare class ElCollapseItem extends ElementUIComponent {
+  /** Unique identification of the panel */
+  name: string | number
+
+  /** Title of the panel */
+  title: string
+
+  $slots: CollapseItemSlots
+}

types/collapse.d.ts

+import { ElementUIComponent } from './component'
+
+/** Use Collapse to store contents. */
+export declare class ElCollapse extends ElementUIComponent {
+  /** Whether to activate accordion mode */
+  accordion: boolean
+
+  /** Currently active panel */
+  value: string | number | string[] | number[]
+}

types/color-picker.d.ts

+import { ElementUIComponent } from './component'
+
+export type ColorFormat = 'hsl' | 'hsv' | 'hex' | 'rgb'
+
+/** ColorPicker Component */
+export declare class ElColorPicker extends ElementUIComponent {
+  /** Whether to display the alpha slider */
+  showAlpha: boolean
+
+  /** Color format of v-model */
+  colorFormat: ColorFormat
+}

types/component.d.ts

+import Vue from 'vue'
+
+/** ElementUI component common definition */
+export declare class ElementUIComponent extends Vue {
+  /** Install component into Vue */
+  static install (vue: typeof Vue)
+}
+
+/** Component size definition for button, input, etc */
+export type ElementUIComponentSize = 'large' | 'small' | 'mini'
+
+/** Horizontal alignment */
+export type ElementUIHorizontalAlignment = 'left' | 'center' | 'right'

types/date-picker.d.ts

+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+export type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange'
+export type FirstDayOfWeek = 1 | 2 | 3 | 4 | 5 | 6 | 7
+
+export interface DisabledDateChecker {
+  /**
+   * Determine if `date` will be disabled in the picker
+   *
+   * @param date The date to check
+   * @returns if `date` will be disabled in the picker
+   */
+  (date: Date): boolean
+}
+
+// Picked date range
+export interface DateRange {
+  minDate: Date,
+  maxDate: Date
+}
+
+export interface PickEventHandler {
+  /**
+   * Callback function that triggers when picks a date range
+   *
+   * @param dateRange The selected date range
+   */
+  (dateRange: DateRange): void
+}
+
+export interface ShortcutClickEventHandler {
+  /**
+   * Callback function that triggers when clicking on a shortcut.
+   * You can change the picker value by emitting the pick event.
+   * Example: `vm.$emit('pick', new Date())`
+   */
+  (vm: ElDatePicker): void
+}
+
+/** Shortcut options */
+export interface Shortcut {
+  /** Title of the shortcut */
+  text: string,
+
+  /** Callback function that triggers when picks a date range */
+  onClick?: ShortcutClickEventHandler
+}
+
+/** Options of el-date-picker */
+export interface DatePickerOptions {
+  /** An object array to set shortcut options */
+  shortcuts?: Shortcut[]
+
+  /** A function determining if a date is disabled. */
+  disabledDate?: DisabledDateChecker
+
+  /** First day of week */
+  firstDayOfWeek?: FirstDayOfWeek
+
+  /** A callback that triggers when the seleted date is changed. Only for daterange and datetimerange. */
+  onPick?: PickEventHandler
+}
+
+/** DatePicker Component */
+export declare class ElDatePicker extends ElementUIComponent {
+  /** The value of the date picker */
+  value: Date | Date[]
+
+  /** Whether DatePicker is read only */
+  readonly: boolean
+
+  /** Whether DatePicker is disabled */
+  disabled: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Whether the input is editable */
+  editable: boolean
+
+  /** Whether to show clear button */
+  clearable: boolean
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Type of the picker */
+  type: DatePickerType
+
+  /** Format of the picker */
+  format: string
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Custom class name for DatePicker's dropdown */
+  popperClass: string
+
+  /** Additional options, check the table below */
+  pickerOptions: DatePickerOptions
+
+  /** Range separator */
+  rangeSeparator: string
+}

types/dialog.d.ts

+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type DialogSize = 'tiny' | 'small' | 'large' | 'full'
+
+export interface DialogSlots {
+  /** Content of the Dialog */
+  default: VNode[],
+
+  /** Content of the Dialog title */
+  title: VNode[],
+
+  /** Content of the Dialog footer */
+  footer: VNode[],
+
+  [key: string]: VNode[]
+}
+
+/** Informs users while preserving the current page state */
+export declare class ElDialog extends ElementUIComponent {
+  /** Title of Dialog */
+  title: string
+
+  /** Size of Dialog */
+  size: DialogSize
+
+  /** Value for `top` of Dialog CSS, works when `size` is not `full` */
+  top: string
+
+  /** Whether a mask is displayed */
+  modal: boolean
+
+  /** Whether to append modal to body element. If false, the modal will be appended to Dialog's parent element */
+  modalAppendToBody: boolean
+
+  /** Whether scroll of body is disabled while Dialog is displayed */
+  lockScroll: boolean
+
+  /** Custom class names for Dialog */
+  customClass: string
+
+  /** Whether the Dialog can be closed by clicking the mask */
+  closeOnClickModal: boolean
+
+  /** Whether the Dialog can be closed by pressing ESC */
+  closeOnPressEscape: boolean
+
+  /** Whether to show a close button */
+  showClose: boolean
+
+  $slots: DialogSlots
+
+  /** Open the current instance */
+  open ()
+
+  /** Close the current instance */
+  close ()
+}

types/dropdown-item.d.ts

+import { ElementUIComponent } from './component'
+
+/** Toggleable menu for displaying lists of links and actions. */
+export declare class ElDropdownItem extends ElementUIComponent {
+  /** A command to be dispatched to Dropdown's command callback */
+  command: string
+
+  /** Whether the item is disabled */
+  disabled: boolean
+
+  /** Whether a divider is displayed */
+  divided: boolean
+}

types/dropdown-menu.d.ts

+import { ElementUIComponent } from './component'
+
+/** Dropdown Menu Component */
+export declare class ElDropdownMenu extends ElementUIComponent {}

types/dropdown.d.ts

+import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { ButtonType } from './button'
+
+export type DropdownMenuAlignment = 'start' | 'end'
+export type DropdownMenuTrigger = 'hover' | 'click'
+
+/** Toggleable menu for displaying lists of links and actions */
+export declare class ElDropdown extends ElementUIComponent {
+  /** Menu button type. only works when split-button is true */
+  type: ButtonType
+
+  /** Whether a button group is displayed */
+  splitButton: boolean
+
+  /** Component size */
+  size: ElementUIComponentSize
+
+  /** Horizontal alignment */
+  menuAlign: DropdownMenuAlignment
+
+  /** How to trigger */
+  trigger: DropdownMenuTrigger
+
+  /** Whether to hide menu after clicking menu-item */
+  hideOnClick: boolean
+}

types/form-item.d.ts

+import { ElementUIComponent } from './component'
+
+/** FormItem Component */
+export declare class ElFormItem extends ElementUIComponent {
+  /** A key of `model` of the enclosing `el-form` component */
+  prop: string
+
+  /** Label */
+  label: string
+
+  /** Width of label, e.g. '50px' */
+  labelWidth: string
+
+  /** Whether the field is required or not, will be determined by validation rules if omitted */
+  required: boolean
+
+  /** Validation rules of form */
+  rules: object
+
+  /** Field error message, set its value and the field will validate error and show this message immediately */
+  error: string
+
+  /** Whether to show the error message */
+  showMessage: boolean
+}

types/form.d.ts

+import { ElementUIComponent } from './component'
+
+export type FormItemLabelPosition = 'left' | 'right' | 'top'
+
+export interface ValidateCallback {
+  /**
+   * The callback to tell the validation result
+   *
+   * @param isValid Whether the form is valid
+   */
+  (isValid: boolean): void
+}
+
+export interface ValidateFieldCallback {
+  /**
+   * The callback to tell the field validation result
+   *
+   * @param errorMessage The error message. It will be empty if there is no error
+   */
+  (errorMessage: string): void
+}
+
+/** Form Component */
+export declare class ElForm extends ElementUIComponent {
+  /** Data of form component */
+  model: object
+
+  /** Validation rules of form */
+  rules: object
+
+  /** Whether the form is inline */
+  inline: boolean
+
+  /** Position of label */
+  labelPosition: FormItemLabelPosition
+
+  /** Width of label, and all form items will inherit from Form */
+  labelWidth: string
+
+  /** Suffix of the label */
+  labelSuffix: string
+
+  /** Whether to show the error message */
+  showMessage: boolean
+
+  /**
+   * Validate the whole form
+   *
+   * @param callback A callback to tell the validation result
+   */
+  validate (callback: ValidateCallback): void
+
+  /**
+   * Validate a certain form item
+   *
+   * @param prop The property of `model` that is going to validate
+   * @param callback A callback to tell the field validation result
+   */
+  validateField (prop: string, callback: ValidateFieldCallback): void
+
+  /** reset all the fields and remove validation result */
+  resetFields (): void
+}

types/icon.d.ts

+import { ElementUIComponent } from './component'
+
+/** Avaliable icon names */
+export type ElementUIIcon = 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'caret-bottom' | 'caret-left' | 'caret-right' | 'caret-top' | 'check' | 'circle-check' | 'circle-close' | 'circle-cross' | 'close' | 'upload' | 'd-arrow-left' | 'd-arrow-right' | 'd-caret' | 'date' | 'delete' | 'document' | 'edit' | 'information' | 'loading' | 'menu' | 'message' | 'minus' | 'more' | 'picture' | 'plus' | 'search' | 'setting' | 'share' | 'star-off' | 'star-on' | 'time' | 'warning' | 'delete2' | 'upload2' | 'view'
+
+/** Icon Component */
+export declare class ElIcon extends ElementUIComponent {
+  /** Icon name */
+  name: ElementUIIcon
+}

types/index.d.ts

+import Vue from 'vue'
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+import { ElAlert } from './alert'
+import { ElAutocomplete } from './autocomplete'
+import { ElBadge } from './badge'
+import { ElBreadcrumb } from './breadcrumb'
+import { ElBreadcrumbItem } from './breadcrumb-item'
+import { ElButton } from './button'
+import { ElButtonGroup } from './button-group'
+import { ElCard } from './card'
+import { ElCarousel } from './carousel'
+import { ElCarouselItem } from './carousel-item'
+import { ElCascader } from './cascader'
+import { ElCheckbox } from './checkbox'
+import { ElCheckboxGroup } from './checkbox-group'
+import { ElCol } from './col'
+import { ElCollapse } from './collapse'
+import { ElCollapseItem } from './collapse-item'
+import { ElColorPicker } from './color-picker'
+import { ElDatePicker } from './date-picker'
+import { ElDialog } from './dialog'
+import { ElDropdown } from './dropdown'
+import { ElDropdownItem } from './dropdown-item'
+import { ElDropdownMenu } from './dropdown-menu'
+import { ElForm } from './form'
+import { ElFormItem } from './form-item'
+import { ElIcon } from './icon'
+import { ElInput } from './input'
+import { ElInputNumber } from './input-number'
+import { ElLoading } from './loading'
+import { ElMenu } from './menu'
+import { ElMenuItem } from './menu-item'
+import { ElMenuItemGroup } from './menu-item-group'
+import { ElMessage } from './message'
+import { ElMessageBox } from './message-box'
+import { ElNotification } from './notification'
+import { ElOption } from './option'
+import { ElOptionGroup } from './option-group'
+import { ElPagination } from './pagination'
+import { ElPopover } from './popover'
+import { ElProgress } from './progress'
+import { ElRate } from './rate'
+import { ElRadio } from './radio'
+import { ElRadioButton } from './radio-button'
+import { ElRadioGroup } from './radio-group'
+import { ElRow } from './row'
+import { ElSelect } from './select'
+import { ElSlider } from './slider'
+import { ElStep } from './step'
+import { ElSteps } from './steps'
+import { ElSubmenu } from './submenu'
+import { ElSwitch } from './switch'
+import { ElTable } from './table'
+import { ElTableColumn } from './table-column'
+import { ElTag } from './tag'
+import { ElTabs } from './tabs'
+import { ElTabPane } from './tab-pane'
+import { ElTimePicker } from './time-picker'
+import { ElTooltip } from './tooltip'
+import { ElTree } from './tree'
+import { ElUpload } from './upload'
+
+declare namespace ElementUI {
+  export interface InstallationOptions {
+    locale: any,
+    i18n: any
+  }
+
+  /**
+   * Install all element-ui components into Vue.
+   * Please do not invoke this method directly.
+   * Call `Vue.use(ElementUI)` to install.
+   */
+  export function install (vue: typeof Vue, options: ElementUI.InstallationOptions)
+
+  /** ElementUI component common definition */
+  export type Component = ElementUIComponent
+
+  /** Component size definition for button, input, etc */
+  export type ComponentSize = ElementUIComponentSize
+
+  /** Horizontal alignment */
+  export type HorizontalAlignment = ElementUIHorizontalAlignment
+
+  /** Show animation while loading data */
+  export const Loading: ElLoading
+
+  /** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
+  export const Message: ElMessage
+
+  /** A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information */
+  export const MessageBox: ElMessageBox
+
+  /** Displays a global notification message at the upper right corner of the page */
+  export const Notification: ElNotification
+
+  // TS cannot merge imported class with namespace, so declare subclasses instead
+
+  /** Alert Component */
+  export class Alert extends ElAlert {}
+
+  /** Autocomplete Component */
+  export class Autocomplete extends ElAutocomplete {}
+
+  /** Bagde Component */
+  export class Badge extends ElBadge {}
+
+  /** Breadcrumb Component */
+  export class Breadcrumb extends ElBreadcrumb {}
+
+  /** Breadcrumb Item Component */
+  export class BreadcrumbItem extends ElBreadcrumbItem {}
+
+  /** Button Component */
+  export class Button extends ElButton {}
+
+  /** Button Group Component */
+  export class ButtonGroup extends ElButtonGroup {}
+
+  /** Card Component */
+  export class Card extends ElCard {}
+
+  /** Cascader Component */
+  export class Cascader extends ElCascader {}
+
+  /** Carousel Component */
+  export class Carousel extends ElCarousel {}
+
+  /** Carousel Item Component */
+  export class CarouselItem extends ElCarouselItem {}
+
+  /** Checkbox Component */
+  export class Checkbox extends ElCheckbox {}
+
+  /** Checkbox Group Component */
+  export class CheckboxGroup extends ElCheckboxGroup {}
+
+  /** Colunm Layout Component */
+  export class Col extends ElCol {}
+
+  /** Collapse Component */
+  export class Collapse extends ElCollapse {}
+
+  /** Collapse Item Component */
+  export class CollapseItem extends ElCollapseItem {}
+
+  /** Color Picker Component */
+  export class ColorPicker extends ElColorPicker {}
+
+  /** Date Picker Component */
+  export class DatePicker extends ElDatePicker {}
+
+  /** Dialog Component */
+  export class Dialog extends ElDialog {}
+
+  /** Dropdown Component */
+  export class Dropdown extends ElDropdown {}
+
+  /** Dropdown Item Component */
+  export class DropdownItem extends ElDropdownItem {}
+
+  /** Dropdown Menu Component */
+  export class DropdownMenu extends ElDropdownMenu {}
+
+  /** Form Component */
+  export class Form extends ElForm {}
+
+  /** Form Item Component */
+  export class FormItem extends ElFormItem {}
+
+  /** Icon Component */
+  export class Icon extends ElIcon {}
+
+  /** Input Component */
+  export class Input extends ElInput {}
+
+  /** Input Number Component */
+  export class InputNumber extends ElInputNumber {}
+
+  /** Menu that provides navigation for your website */
+  export class Menu extends ElMenu {}
+
+  /** Menu Item Component */
+  export class MenuItem extends ElMenuItem {}
+
+  /** Menu Item Group Component */
+  export class MenuItemGroup extends ElMenuItemGroup {}
+
+  /** Dropdown Select Option Component */
+  export class Option extends ElOption {}
+
+  /** Dropdown Select Option Group Component */
+  export class OptionGroup extends ElOptionGroup {}
+
+  /** Pagination Component */
+  export class Pagination extends ElPagination {}
+
+  /** Popover Component */
+  export class Popover extends ElPopover {}
+
+  /** Progress Component */
+  export class Progress extends ElProgress {}
+
+  /** Rate Component */
+  export class Rate extends ElRate {}
+
+  /** Radio Component */
+  export class Radio extends ElRadio {}
+
+  /** Radio Button Component */
+  export class RadioButton extends ElRadioButton {}
+
+  /** Radio Group Component */
+  export class RadioGroup extends ElRadioGroup {}
+
+  /** Row Layout Component */
+  export class Row extends ElRow {}
+
+  /** Dropdown Select Component */
+  export class Select extends ElSelect {}
+
+  /** Slider Component */
+  export class Slider extends ElSlider {}
+
+  /** Step Component */
+  export class Step extends ElStep {}
+
+  /** Steps Component */
+  export class Steps extends ElSteps {}
+
+  /** Submenu Component */
+  export class Submenu extends ElSubmenu {}
+
+  /** Switch Component */
+  export class Switch extends ElSwitch {}
+
+  /** Table Component */
+  export class Table extends ElTable {}
+
+  /** Table Column Component */
+  export class TableColumn extends ElTableColumn {}
+
+  /** Tabs Component */
+  export class Tabs extends ElTabs {}
+
+  /** Tab Pane Component */
+  export class TabPane extends ElTabPane {}
+
+  /** Tag Component */
+  export class Tag extends ElTag {}
+
+  /** Time Picker and Time Select Component */
+  export class TimePicker extends ElTimePicker {}
+
+  /** Tooltip Component */
+  export class Tooltip extends ElTooltip {}
+
+  /** Tree Component */
+  export class Tree extends ElTree {}
+
+  /** Upload Component */
+  export class Upload extends ElUpload {}
+}
+
+export = ElementUI

types/input-number.d.ts

+import { ElementUIComponent } from './component'
+
+export type InputNumberSize = 'large' | 'small'
+
+/** InputNumber Component */
+export declare class ElInputNumber extends ElementUIComponent {
+  /** Binding value */
+  value: number
+
+  /** The minimum allowed value */
+  min: number
+
+  /** The maximum allowed value */
+  max: number
+
+  /** Incremental step */
+  step: number
+
+  /** Size of the component */
+  size: InputNumberSize
+
+  /** Whether the component is disabled */
+  disabled: boolean
+
+  /** Whether to enable the control buttons */
+  controls: boolean
+}

types/input.d.ts

+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** The resizability of el-input component */
+export type Resizability = 'none' | 'both' | 'horizontal' | 'vertical'
+
+/** Controls how el-input component automatically sets size */
+export interface AutoSize {
+  /** Minimum rows to show */
+  minRows: number,
+
+  /** Maximum rows to show */
+  maxRows: number
+}
+
+export interface IconClickEventHandler {
+  /** The handler function of on-icon-click property */
+  (this: Window, ev: MouseEvent): any
+}
+
+/** Input Component */
+export declare class ElInput extends ElementUIComponent {
+  /** Same as the type attribute of native input, except that it can be textarea */
+  type: string
+
+  /** Binding value */
+  value: string | number
+
+  /** Maximum Input text length */
+  maxlength: number
+
+  /** Minimum Input text length */
+  minlength: number
+
+  /** Placeholder of Input */
+  placeholder: string
+
+  /** Whether Input is disabled */
+  disabled: boolean
+
+  /** Size of Input, works when type is not 'textarea' */
+  size: ElementUIComponentSize
+
+  /** Icon name */
+  icon: string
+
+  /** Number of rows of textarea, only works when type is 'textarea' */
+  rows: number
+
+  /** Whether textarea has an adaptive height, only works when type is 'textarea' */
+  autosize: boolean | AutoSize
+
+  /** Same as auto-complete in native input */
+  autoComplete: string
+
+  /** Same as name in native input */
+  name: string
+
+  /** Same as readonly in native input */
+  readonly: boolean
+
+  /** Same as max in native input */
+  max: any
+
+  /** Same as min in native input */
+  min: any
+
+  /** Same as step in native input */
+  step: any
+
+  /** Control the resizability */
+  resize: Resizability
+
+  /** Same as autofocus in native input */
+  autofocus: boolean
+
+  /** Same as form in native input */
+  form: string
+
+  /** Hook function when clicking on the input icon */
+  onIconClick: IconClickEventHandler
+}

types/loading.d.ts

+import Vue, { VNodeDirective } from 'vue'
+
+/** Options used in Loading service */
+export interface LoadingServiceOptions {
+  /** The DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node */
+  target: HTMLElement | string
+
+  /** Whether to make the mask append to the body element */
+  body?: boolean
+
+  /** Whether to show the loading mask in fullscreen */
+  fullscreen?: boolean
+
+  /** Whether to disable scrolling on body */
+  lock?: boolean
+
+  /** Loading text that displays under the spinner */
+  text?: string
+
+  /** Custom class name for Loading */
+  customClass?: string
+}
+
+/** Loading Component */
+export declare class ElLoadingComponent extends Vue {
+  /** Close the Loading instance */
+  close ()
+}
+
+/** Loading directive definition */
+export interface ElLoadingDirective extends VNodeDirective {
+  name: 'loading',
+  value: boolean,
+  modifiers: {
+    body: boolean,
+    fullscreen: boolean
+  }
+}
+
+/** Show animation while loading data */
+export interface ElLoading {
+  /** Install Loading directive into Vue */
+  install (vue: typeof Vue)
+
+  /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
+  service (options: LoadingServiceOptions): ElLoadingComponent
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
+    $loading (options: LoadingServiceOptions): ElLoadingComponent
+  }
+}

types/menu-item-group.d.ts

+import { ElementUIComponent } from './component'
+
+/** Menu Item Group Component */
+export declare class ElMenuItemGroup extends ElementUIComponent {
+  /** Group title */
+  title: string
+}

types/menu-item.d.ts

+import { Route } from 'vue-router'
+import { ElementUIComponent } from './component'
+
+/** Menu Item Component */
+export declare class ElMenuItem extends ElementUIComponent {
+  /** Unique identification */
+  index: string
+
+  /** Vue Router object */
+  route: Route
+
+  /** Is menu item disabled */
+  disabled: boolean
+}

types/menu.d.ts

+import { ElementUIComponent } from './component'
+
+export type MenuDisplayMode = 'horizontal' | 'vertical'
+export type MenuTheme = 'light' | 'dark'
+
+/** Menu that provides navigation for your website */
+export declare class ElMenu extends ElementUIComponent {
+  /** Menu display mode */
+  mode: MenuDisplayMode
+
+  /** Theme color */
+  theme: MenuTheme
+
+  /** Index of currently active menu */
+  defaultActive: string
+
+  /** Array that contains keys of currently active sub-menus */
+  defaultOpeneds: string[]
+
+  /** Whether only one sub-menu can be active */
+  uniqueOpened: boolean
+
+  /** How sub-menus are triggered, only works when mode is 'horizontal' */
+  menuTrigger: string
+
+  /** Whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action */
+  router: boolean
+}

types/message-box.d.ts

+import Vue from 'vue'
+import { MessageType } from './message'
+
+export type MessageBoxCloseAction = 'confirm' | 'cancel'
+export type MessageBoxData = MessageBoxCloseAction | MessageBoxInputData
+
+export interface MessageBoxInputData {
+  value: string,
+  action: MessageBoxCloseAction
+}
+
+export interface MessageBoxInputValidator {
+  (value: string): boolean | string
+}
+
+export declare class ElMessageBoxComponent extends Vue {
+  title: string
+  message: string
+  type: MessageType
+  customClass: string
+  showInput: boolean
+  inputValue: string
+  inputPlaceholder: string
+  inputPattern: RegExp
+  inputValidator: MessageBoxInputValidator
+  inputErrorMessage: string
+  showConfirmButton: boolean
+  showCancelButton: boolean
+  action: MessageBoxCloseAction
+  confirmButtonText: string
+  cancelButtonText: string
+  confirmButtonLoading: boolean
+  cancelButtonLoading: boolean
+  confirmButtonClass: string
+  confirmButtonDisabled: boolean
+  cancelButtonClass: string
+  editorErrorMessage: string
+}
+
+/** Options used in MessageBox */
+export interface ElMessageBoxOptions {
+  /** Title of the MessageBox */
+  title?: string
+
+  /** Content of the MessageBox */
+  message?: string
+
+  /** Message type, used for icon display */
+  type?: MessageType
+
+  /** Custom class name for MessageBox */
+  customClass?: string
+
+  /** MessageBox closing callback if you don't prefer Promise */
+  callback?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent) => void
+
+  /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
+  beforeClose?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent, done: (() => void)) => void
+
+  /** Whether to lock body scroll when MessageBox prompts */
+  lockScroll?: boolean
+
+  /** Whether to show a cancel button */
+  showCancelButton?: boolean
+
+  /** Whether to show a confirm button */
+  showConfirmButton?: boolean
+
+  /** Text content of cancel button */
+  cancelButtonText?: string
+
+  /** Text content of confirm button */
+  confirmButtonText?: string
+
+  /** Custom class name of cancel button */
+  cancelButtonClass?: string
+
+  /** Custom class name of confirm button */
+  confirmButtonClass?: string
+
+  /** Whether MessageBox can be closed by clicking the mask */
+  closeOnClickModal?: boolean
+
+  /** Whether MessageBox can be closed by pressing the ESC */
+  closeOnPressEscape?: boolean
+
+  /** Whether to show an input */
+  showInput?: boolean
+
+  /** Placeholder of input */
+  inputPlaceholder?: string
+
+  /** Initial value of input */
+  inputValue?: string
+
+  /** Regexp for the input */
+  inputPattern?: RegExp
+
+  /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
+  inputValidator?: MessageBoxInputValidator
+
+  /** Error message when validation fails */
+  inputErrorMessage?: string
+}
+
+export interface ElMessageBoxShortcutMethod {
+  (message: string, title: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>
+  (message: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>
+}
+
+export interface ElMessageBox {
+  /** Show a message box */
+  (message: string, title?: string, type?: string): Promise<MessageBoxData>
+
+  /** Show a message box */
+  (options: ElMessageBoxOptions): Promise<MessageBoxData>
+
+  /** Show an alert message box */
+  alert: ElMessageBoxShortcutMethod
+
+  /** Show a comfirm message box */
+  confirm: ElMessageBoxShortcutMethod
+
+  /** Show a prompt message box */
+  prompt: ElMessageBoxShortcutMethod
+
+  /** Set default options of message boxes */
+  setDefaults (defaults: ElMessageBoxOptions)
+
+  /** Close current message box */
+  close ()
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** Show a message box */
+    $msgbox: ElMessageBox
+
+    /** Show an alert message box */
+    $alert: ElMessageBoxShortcutMethod
+
+    /** Show a confirm message box */
+    $confirm: ElMessageBoxShortcutMethod
+
+    /** Show a prompt message box */
+    $prompt: ElMessageBoxShortcutMethod
+  }
+}

types/message.d.ts

+import Vue from 'vue'
+
+export type MessageType = 'success' | 'warning' | 'info' | 'error'
+
+/** Message Component */
+export declare class ElMessageComponent extends Vue {
+  /** Close the Loading instance */
+  close ()
+}
+
+export interface CloseEventHandler {
+  /**
+   * Triggers when a message is being closed
+   *
+   * @param instance The message component that is being closed
+   */
+  (instance: ElMessageComponent): void
+}
+
+/** Options used in Message */
+export interface ElMessageOptions {
+  /** Message text */
+  message: string
+
+  /** Message type */
+  type?: MessageType
+
+  /** Custom icon's class, overrides type */
+  iconClass?: string
+
+  /** Custom class name for Message */
+  customClass?: string
+
+  /** Display duration, millisecond. If set to 0, it will not turn off automatically */
+  duration?: number
+
+  /** Whether to show a close button */
+  showClose?: boolean
+
+  /** Callback function when closed with the message instance as the parameter */
+  onClose?: CloseEventHandler
+}
+
+export interface ElMessage {
+  /** Show an info message */
+  (text: string): ElMessageComponent
+
+  /** Show message */
+  (options: ElMessageOptions): ElMessageComponent
+
+  /** Show a success message */
+  success (text: string): ElMessageComponent
+
+  /** Show a warning message */
+  warning (text: string): ElMessageComponent
+
+  /** Show an info message */
+  info (text: string): ElMessageComponent
+
+  /** Show an error message */
+  error (text: string): ElMessageComponent
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+  /** Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification. */
+    $message: ElMessage
+  }
+}

types/notification.d.ts

+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+/** Notification Component */
+export declare class ElNotificationComponent extends Vue {
+  /** Close the Notification instance */
+  close ()
+}
+
+export interface ElNotificationOptions {
+  /** Title */
+  title: string
+
+  /** Description text */
+  message: string | VNode
+
+  /** Notification type */
+  type: MessageType
+
+  /** Custom icon's class. It will be overridden by type */
+  iconClass: string
+
+  /** Custom class name for Notification */
+  customClass: string
+
+  /** Duration before close. It will not automatically close if set 0 */
+  duration: number
+
+  /** Callback function when closed */
+  onClose: () => void
+
+  /** Offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset */
+  offset: number
+}
+
+export interface ElNotification {
+  /** Show a notification */
+  (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show a success notification */
+  success (message: string | VNode): ElNotificationComponent
+
+  /** Show a success notification */
+  success (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show a warning notification */
+  warning (message: string | VNode): ElNotificationComponent
+
+  /** Show a warning notification */
+  warning (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show an info notification */
+  info (message: string | VNode): ElNotificationComponent
+
+  /** Show an info notification */
+  info (options: ElNotificationOptions): ElNotificationComponent
+
+  /** Show an error notification */
+  error (message: string | VNode): ElNotificationComponent
+
+  /** Show an error notification */
+  error (options: ElNotificationOptions): ElNotificationComponent
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** Displays a global notification message at the upper right corner of the page */
+    $notify: ElNotification
+  }
+}

types/option-group.d.ts

+import { ElementUIComponent } from './component'
+
+/** Dropdown Select Option Group Component */
+export declare class ElOptionGroup extends ElementUIComponent {
+  /** Name of the group */
+  label: string
+
+  /** Whether to disable all options in this group */
+  disabled: boolean
+}

types/option.d.ts

+import { ElementUIComponent } from './component'
+
+/** Dropdown Select Option Component */
+export declare class ElOption extends ElementUIComponent {
+  /** Value of option */
+  value: any
+
+  /** Label of option, same as value if omitted */
+  label: string
+
+  /** Whether option is disabled */
+  disabled: boolean
+}

types/pagination.d.ts

+import { ElementUIComponent } from './component'
+
+/** Pagination Component */
+export declare class ElPagination extends ElementUIComponent {
+  /** Whether to use small pagination */
+  small: boolean
+
+  /** Item count of each page */
+  pageSize: number
+
+  /** Total item count */
+  total: number
+
+  /** Total page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is required */
+  pageCount: number
+
+  /** Current page number */
+  currentPage: number
+
+  /**
+   * Layout of Pagination. Elements separated with a comma.
+   * Accepted values: `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot`
+   */
+  layout: string
+
+  /** Options of item count per page */
+  pageSizes: number[]
+}

types/popover.d.ts

+import { VNode, VNodeDirective } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type PopoverTrigger = 'click' | 'focus' | 'hover' | 'manual'
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+
+export interface PopoverSlots {
+  /** Content of popover */
+  default: VNode[],
+
+  /** HTML element that triggers popover */
+  reference: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Popover directive definition */
+export interface ElPopoverDirective extends VNodeDirective {
+  name: 'popover',
+  arg: string
+}
+
+/** Popover Component */
+export declare class ElPopover extends ElementUIComponent {
+  /** How the popover is triggered */
+  trigger: PopoverTrigger
+
+  /** Popover title */
+  title: string
+
+  /** Popover content, can be replaced with a default slot */
+  content: string
+
+  /** Popover width */
+  width: string | number
+
+  /** Popover placement */
+  placement: PopoverPlacement
+
+  /** Whether Popover is disabled */
+  disabled: boolean
+
+  /** Whether popover is visible */
+  value: boolean
+
+  /** Popover offset */
+  offset: number
+
+  /** Popover transition animation */
+  transition: string
+
+  /** Whether a tooltip arrow is displayed or not. For more info, please refer to Vue-popper */
+  visibleArrow: boolean
+
+  /** Parameters for popper.js */
+  options: object
+
+  /** Custom class name for popover */
+  popperClass: string
+
+  $slots: PopoverSlots
+}

types/progress.d.ts

+import { ElementUIComponent } from './component'
+
+export type ProgressType = 'line' | 'circle'
+export type ProgressStatus = 'success' | 'exception'
+
+/** Progress Component */
+export declare class ElProgress extends ElementUIComponent {
+  /** Percentage, required */
+  percentage: number
+
+  /** The type of progress bar */
+  type: ProgressType
+
+  /** The width of progress bar */
+  strokeWidth: number
+
+  /** Whether to place the percentage inside progress bar, only works when type is 'line' */
+  textInside: boolean
+
+  /** The current status of progress bar */
+  status: ProgressStatus
+
+  /** The canvas width of circle progress bar */
+  width: number
+
+  /** Whether to show percentage */
+  showText: boolean
+}

types/radio-button.d.ts

+import { ElementUIComponent } from './component'
+
+/** Radio Button Component */
+export declare class ElRadioButton extends ElementUIComponent {
+  /** The form input value */
+  value: string
+
+  /** The value of radio */
+  label: string | number
+
+  /** Whether radio is disabled */
+  disabled: boolean
+}

types/radio-group.d.ts

+import { ElementUIComponent } from './component'
+
+export type RadioGroupSize = 'large' | 'small'
+
+/** Radio Group Component */
+export declare class ElRadioGroup extends ElementUIComponent {
+  /** The size of radio buttons */
+  size: RadioGroupSize
+
+  /** Border and background color when button is active */
+  fill: string
+
+  /** Font color when button is active */
+  textColor: string
+}

types/radio.d.ts

+import { ElementUIComponent } from './component'
+
+/** Radio Component */
+export declare class ElRadio extends ElementUIComponent {
+  /** The form input value */
+  value: string
+
+  /** The value of radio */
+  label: string | number | boolean
+
+  /** Whether radio is disabled */
+  disabled: boolean
+
+  /** Native 'name' attribute */
+  name: string
+}

types/rate.d.ts

+import { ElementUIComponent } from './component'
+
+/** Rate Component */
+export declare class ElRate extends ElementUIComponent {
+  /** Max rating score */
+  max: number
+
+  /** Whether Rate is read-only */
+  disabled: boolean
+
+  /** Whether picking half start is allowed */
+  allowHalf: boolean
+
+  /** Threshold value between low and medium level. The value itself will be included in low level */
+  lowThreshold: number
+
+  /** Threshold value between medium and high level. The value itself will be included in high level */
+  highThreshold: number
+
+  /** Color array for icons. It should have 3 elements, each of which corresponds with a score level */
+  colors: string[]
+
+  /** Color of unselected icons */
+  voidColor: string
+
+  /** Color of unselected read-only icons */
+  disabledVoidColor: string
+
+  /** Array of class names of icons. It should have 3 elements, each of which corresponds with a score level */
+  iconClasses: string[]
+
+  /** Class name of unselected icons */
+  voidIconClass: string
+
+  /** Class name of unselected read-only icons */
+  disabledVoidIconClass: string
+
+  /** Whether to display texts */
+  showText: boolean
+
+  /** Color of texts */
+  textColor: string
+
+  /** Text array */
+  texts: string[]
+
+  /** Text template when the component is read-only */
+  textTemplate: string
+}

types/row.d.ts

+import { ElementUIComponent } from './component'
+
+/** Horizontal alignment of flex layout */
+export type HorizontalAlignment = 'start' | 'end' | 'center' | 'space-around' | 'space-between'
+
+/** vertical alignment of flex layout */
+export type VertialAlignment = 'top' | 'middle' | 'bottom'
+
+/** Row Layout Component */
+export declare class ElRow extends ElementUIComponent {
+  /** Grid spacing */
+  gutter: number
+
+  /** Layout mode. You can use flex. Works in modern browsers */
+  type: string
+
+  /** Horizontal alignment of flex layout */
+  justify: HorizontalAlignment
+
+  /** vertical alignment of flex layout */
+  align: VertialAlignment
+}

types/select.d.ts

+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export interface QueryChangeHandler {
+  /**
+   * @param queryString Current value of the text input
+   */
+  (queryString: string): void
+}
+
+/** Dropdown Select Component */
+export declare class ElSelect extends ElementUIComponent {
+  /** The form input value */
+  value: any
+
+  /** Whether multiple-select is activated */
+  multiple: boolean
+
+  /** Whether Select is disabled */
+  disabled: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Whether single select can be cleared */
+  clearable: boolean
+
+  /** Maximum number of options user can select when multiple is true. No limit when set to 0 */
+  multipleLimit: number
+
+  /** The name attribute of select input */
+  name: string
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Whether Select is filterable */
+  filterable: boolean
+
+  /** Whether creating new items is allowed. To use this, filterable must be true */
+  allowCreate: boolean
+
+  /** Custom filter method */
+  filterMethod: AlterItemsEventHandler
+
+  /** Whether options are loaded from server */
+  remote: boolean
+
+  /** Custom remote search method */
+  remoteMethod: AlterItemsEventHandler
+
+  /** Whether Select is loading data from server */
+  loading: boolean
+
+  /** Displayed text while loading data from server */
+  loadingText: string
+
+  /** Displayed text when no data matches the filtering query */
+  noMatchText: string
+
+  /** Displayed text when there is no options */
+  noDataText: string
+
+  /** Custom class name for Select's dropdown */
+  popperClass: string
+}

types/slider.d.ts

+import { ElementUIComponent } from './component'
+
+/** Slider Component */
+export declare class ElSlider extends ElementUIComponent {
+  /** Current value of the slider */
+  value: number | number[]
+
+  /** Minimum value */
+  min: number
+
+  /** Maximum value */
+  max: number
+
+  /** Whether Slider is disabled */
+  disabled: boolean
+
+  /** Step size */
+  step: number
+
+  /** Whether to display an input box, works when range is false */
+  showInput: boolean
+
+  /** Whether to display control buttons when show-input is true */
+  showInputControls: boolean
+
+  /** Whether to display breakpoints */
+  showStops: boolean
+
+  /** Whether to display tooltip value */
+  showTooltip: boolean
+
+  /** Whether to select a range */
+  range: boolean
+}

types/step.d.ts

+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+import { ElementUIIcon } from './icon'
+
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error' | 'success'
+
+export interface StepRenderSlots {
+  /** Custom icon */
+  icon: VNode[],
+
+  /** Step title */
+  title: VNode[],
+
+  /** Step description */
+  description: VNode[],
+
+  [key: string]: VNode[]
+}
+
+/** Step Component */
+export declare class ElStep extends ElementUIComponent {
+  /** Step title */
+  title: string
+
+  /** Step description */
+  description: string
+
+  /** Step icon */
+  icon: ElementUIIcon
+
+  /** Current status. It will be automatically set by Steps if not configured. */
+  status: StepStatus
+
+  readonly $slots: StepRenderSlots
+}

types/steps.d.ts

+import { ElementUIComponent } from './component'
+import { StepStatus } from './step'
+
+export type StepsDirection = 'vertical' | 'horizontal'
+
+/** Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2. */
+export declare class ElSteps extends ElementUIComponent {
+  /** The spacing of each step, will be responsive if omitted. Support percentage. */
+  space: number | string
+
+  /** Display direction */
+  direction: StepsDirection
+
+  /** Current activation step */
+  active: number
+
+  /** Status of current step */
+  processStatus: StepStatus
+
+  /** Status of end step */
+  finishStatus: StepStatus
+
+  /** Whether step description is centered */
+  alignCenter: boolean
+
+  /** Center whole Steps component */
+  center: boolean
+}

types/submenu.d.ts

+import { ElementUIComponent } from './component'
+
+/** Submenu Component */
+export declare class ElSubmenu extends ElementUIComponent {
+  /** Unique identification */
+  index: string
+}

types/switch.d.ts

+import { ElementUIComponent } from './component'
+
+/** Switch Component */
+export declare class ElSwitch extends ElementUIComponent {
+  /** Whether Switch is on */
+  value: boolean
+
+  /** Whether Switch is disabled */
+  disabled: boolean
+
+  /** Width of Switch */
+  width: number
+
+  /** Class name of the icon displayed when in on state, overrides on-text */
+  onCloseIcon: string
+
+  /** Class name of the icon displayed when in off state, overrides off-text */
+  offCloseIcon: string
+
+  /** Text displayed when in on state */
+  onText: string
+
+  /** Text displayed when in off state */
+  offText: string
+
+  /** Background color when in on state */
+  onColor: string
+
+  /** Background color when in off state */
+  offColor: string
+
+  /** Input name of Switch */
+  name: string
+}

types/tab-pane.d.ts

+import { ElementUIComponent } from './component'
+
+/** Tab Pane Component */
+export declare class ElTabPane extends ElementUIComponent {
+  /** Title of the tab */
+  label: string
+
+  /** Whether Tab is disabled */
+  disabled: boolean
+
+  /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */
+  name: string
+
+  /** Whether Tab is closable */
+  closable: boolean
+}

types/table-column.d.ts

+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent, ElementUIHorizontalAlignment } from './component'
+
+export type TableColumnType = 'default' | 'selection' | 'index' | 'expand'
+export type TableColumnFixedType = 'left' | 'right'
+
+// TODO: complete type here
+export type TableColumn = any
+
+/** Data used in renderHeader function */
+export interface RenderHeaderData {
+  /** The column that is current rendering */
+  column: any,
+
+  /** The index of the rendering column */
+  $index: number
+}
+
+/** Filter Object */
+export interface TableColumnFilter {
+  /** The text to show in the filter's panel */
+  text: string,
+
+  /** The value of the filter */
+  value: any
+}
+
+/** TableColumn Component */
+export declare class ElTableColumn extends ElementUIComponent {
+  /** Type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. */
+  type: TableColumnType
+
+  /** Column label */
+  label: string
+
+  /** Column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered */
+  columnKey: string
+
+  /** Field name. You can also use its alias: property */
+  prop: string
+
+  /** Column width */
+  width: string
+
+  /** Column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion */
+  minWidth: string
+
+  /** Whether column is fixed at left/right. Will be fixed at left if `true` */
+  fixed: boolean | TableColumnFixedType
+
+  /** Render function for table header of this column */
+  renderHeader: (h: CreateElement, data: RenderHeaderData) => VNode | string
+
+  /** Whether column can be sorted */
+  sortable: boolean
+
+  /** Sorting method. Works when `sortable` is `true` */
+  sortMethod: (a: any, b: any) => number
+
+  /** Whether column width can be resized. Works when border of `el-table` is `true` */
+  resizable: boolean
+
+  /** Function that formats content */
+  formatter: (row: object, column: TableColumn) => any
+
+  /** Whether to hide extra content and show them in a tooltip when hovering on the cell */
+  showOverflowTooltip: boolean
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Alignment of the table header. If omitted, the value of the `align` attribute will be applied */
+  headerAlign: ElementUIHorizontalAlignment
+
+  /** Class name of cells in the column */
+  className: string
+
+  /** Class name of the label of this column */
+  labelClassName: string
+
+  /** Function that determines if a certain row can be selected, works when `type` is `'selection'` */
+  selectable: (row: object, index: number) => boolean
+
+  /** Whether to reserve selection after data refreshing, works when `type` is `'selection'` */
+  reserveSelection: boolean
+
+  /** An array of data filtering options */
+  filters: TableColumnFilter[]
+
+  /** Whether data filtering supports multiple options */
+  filterMultiple: Boolean
+
+  /** Data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` */
+  filterMethod: (value: any, row: object) => boolean
+
+  // TODO: complete type here
+  /** Filter value for selected data, might be useful when table header is rendered with `render-header` */
+  filteredValue: any[]
+}

types/table.d.ts

+import { ElementUIComponent } from './component'
+import { TooltipEffect } from './tooltip'
+
+export type SortOrder = 'ascending' | 'descending'
+
+/** Options to set the default sort column and order */
+export interface DefaultSortOptions {
+  /** Default sort column */
+  prop: string,
+
+  /** Default sort order */
+  order: SortOrder
+}
+
+/** Table Component */
+export declare class ElTable extends ElementUIComponent {
+  /** Table data */
+  data: object[]
+
+  /** Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles */
+  height: string | number
+
+  /** Table's max-height. The height of the table starts from auto until it reaches the maxHeight limit. The maxHeight is measured in pixels, same as height */
+  maxHeight: string | number
+
+  /** Whether table is striped */
+  stripe: boolean
+
+  /** Whether table has vertical border */
+  border: boolean
+
+  /** Whether width of column automatically fits its container */
+  fit: boolean
+
+  /** Whether table header is visible */
+  showHeader: boolean
+
+  /** Whether current row is highlighted */
+  highlightCurrentRow: boolean
+
+  /** Key of current row, a set only prop */
+  currentRowKey: string | number
+
+  /** Function that returns custom class names for a row, or a string assigning class names for every row */
+  rowClassName: string | ((row: object, index: number) => string)
+
+  /** Function that returns custom style for a row, or a string assigning custom style for every row */
+  rowStyle: string | object | ((row: object, index: number) => object)
+
+  /** Key of row data, used for optimizing rendering. Required if reserve-selection is on */
+  rowKey: (row: object) => any
+
+  /** Displayed text when data is empty. You can customize this area with `slot="empty"` */
+  emptyText: String
+
+  /** Whether expand all rows by default. Only works when the table has a column `type="expand"` */
+  defaultExpandAll: Boolean
+
+  /** Set expanded rows by this prop. Prop's value is the keys of expand rows, you should set row-key before using this prop */
+  expandRowKeys: any[]
+
+  /** Set the default sort column and order */
+  defaultSort: DefaultSortOptions
+
+  /** Tooltip effect property */
+  tooltipEffect: TooltipEffect
+
+  /** Clear selection. Might be useful when `reserve-selection` is on */
+  clearSelection (): void
+
+  /**
+   * Toggle or set if a certain row is selected
+   *
+   * @param row The row that is going to set its selected state
+   * @param selected Whether the row is selected. The selected state will be toggled if not set
+   */
+  toggleRowSelection (row: object, selected?: boolean): void
+}

types/tabs.d.ts

+import { ElementUIComponent } from './component'
+
+export type TabType = 'card' | 'border-card'
+
+/** Divide data collections which are related yet belong to different types */
+export declare class ElTabs extends ElementUIComponent {
+  /** Type of Tab */
+  type: TabType
+
+  /** Whether Tab is closable */
+  closable: boolean
+
+  /** Whether Tab is addable */
+  addable: boolean
+
+  /** Whether Tab is addable and closable */
+  editable: boolean
+
+  /** Name of the selected tab */
+  value: string
+}

types/tag.d.ts

+import { ElementUIComponent } from './component'
+
+export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
+
+/** Tag Component */
+export declare class ElTag extends ElementUIComponent {
+  /** Theme */
+  type: TagType
+
+  /** Whether Tab can be removed */
+  closable: boolean
+
+  /** Whether the removal animation is disabled */
+  closeTransition: boolean
+
+  /** Whether Tag has a highlighted border */
+  hit: boolean
+
+  /** Background color of the tag */
+  color: string
+}

types/time-picker.d.ts

+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+/** Options when el-time-picker acts like a Time Picker */
+export interface TimePickerOptions {
+  /**
+   * Available time range.
+   * e.g. `'18:30:00 - 20:30:00'`
+   * or `['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']`
+   */
+  selectableRange?: string | string[],
+
+  /** Format  of the picker */
+  format?: string
+}
+
+/** Options when el-time-picker acts like a Time Select */
+export interface TimeSelectOptions {
+  /** Start time */
+  start?: string,
+
+  /** End time */
+  end?: string,
+
+  /** Time step */
+  step?: string,
+
+  /** Minimum time, any time before this time will be disabled */
+  minTime?: string,
+
+  /** Maximum time, any time after this time will be disabled */
+  maxTime?: string
+}
+
+/** TimePicker and Time Select Component */
+export declare class ElTimePicker extends ElementUIComponent {
+  /** Whether DatePicker is read only */
+  readonly: boolean
+
+  /** Whether DatePicker is disabled */
+  disabled: boolean
+
+  /** Whether the input is editable */
+  editable: boolean
+
+  /** Whether to show clear button */
+  clearable: boolean
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Placeholder */
+  placeholder: string
+
+  /** Value of the picker */
+  value: string | Date
+
+  /** Alignment */
+  align: ElementUIHorizontalAlignment
+
+  /** Custom class name for TimePicker's dropdown */
+  popperClass: string
+
+  /** Additional options, check the table below */
+  pickerOptions: object
+}

types/tooltip.d.ts

+import { ElementUIComponent } from './component'
+import { PopoverPlacement } from './popover'
+
+export type TooltipEffect = 'dark' | 'light'
+
+/** Tooltip Component */
+export declare class ElTooltip extends ElementUIComponent {
+  /** Tooltip theme */
+  effect: TooltipEffect
+
+  /** Display content, can be overridden by slot#content */
+  content: String
+
+  /** Position of Tooltip */
+  placement: PopoverPlacement
+
+  /** Visibility of Tooltip */
+  value: boolean
+
+  /** Whether Tooltip is disabled */
+  disabled: boolean
+
+  /** Offset of the Tooltip */
+  offset: number
+
+  /** Animation name */
+  transition: string
+
+  /** Whether an arrow is displayed. For more information, check Vue-popper page */
+  visibleArrow: boolean
+
+  /** Popper.js parameters */
+  options: object
+
+  /** Delay of appearance, in millisecond */
+  openDelay: number
+
+  /** Whether to control Tooltip manually. mouseenter and mouseleave won't have effects if set to true */
+  manual: boolean
+
+  /** Custom class name for Tooltip's popper */
+  popperClass: string
+}

types/tree.d.ts

+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+/** The node of the tree */
+export interface TreeNode {
+  id?: any,
+  label?: string,
+  children?: TreeNode[]
+}
+
+export interface RenderContent {
+  /**
+   * Render function for a specific node
+   *
+   * @param h The render function
+   * @param data The data object containing the specific node
+   */
+  (h: CreateElement, data: { node: TreeNode }): VNode
+}
+
+export interface FilterNodeMethod {
+  // TODO: complete type and description here
+  (value: any, data: TreeNode, node: any): boolean
+}
+
+/** Tree Component */
+export declare class ElTree extends ElementUIComponent {
+  /** Tree data */
+  data: TreeNode[]
+
+  /** Text displayed when data is void */
+  emptyText: string
+
+  /** Unique identity key name for nodes, its value should be unique across the whole tree */
+  nodeKey: string
+
+  /** Configuration options, see the following table */
+  props: object
+
+  /** Method for loading subtree data */
+  load: (node: TreeNode, resolve) => void
+
+  /** Render function for tree node */
+  renderContent: RenderContent
+
+  /** Whether current node is highlighted */
+  highlightCurrent: boolean
+
+  /** Key of current node, a set only prop */
+  currentNodeKey: string | number
+
+  /** Whether to expand all nodes by default */
+  defaultExpandAll: boolean
+
+  /** Whether to expand or collapse node when clicking on the node. If false, then expand or collapse node only when clicking on the arrow icon. */
+  expandOnClickNode: boolean
+
+  /** Whether to expand father node when a child node is expanded */
+  autoExpandParent: boolean
+
+  /** Array of keys of initially expanded nodes */
+  defaultExpandedKeys: any[]
+
+  /** Whether node is selectable */
+  showCheckbox: boolean
+
+  /** Whether checked state of a node not affects its father and child nodes when show-checkbox is true */
+  checkStrictly: boolean
+
+  /** Array of keys of initially checked nodes */
+  defaultCheckedKeys: any[]
+
+  /** This function will be executed on each node when use filter method. If return false, tree node will be hidden. */
+  filterNodeMethod: FilterNodeMethod
+
+  /** Whether only one node among the same level can be expanded at one time */
+  accordion: boolean
+
+  /** Horizontal indentation of nodes in adjacent levels in pixels */
+  indent: number
+
+  /**
+   * Filter all tree nodes.Ffiltered nodes will be hidden
+   *
+   * @param value The value to be used as first parameter for `filter-node-method`
+   */
+  filter (value: any): void
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes
+   *
+   * @param subnodes If the `subnodes` is `true`, it only returns the currently selected array of sub-nodes
+   */
+  getCheckedNodes (leafOnly?: boolean): TreeNode[]
+
+  /**
+   * Set certain nodes to be checked. Only works when `node-key` is assigned
+   *
+   * @param nodes An array of nodes to be checked
+   * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes
+   */
+  setCheckedNodes (nodes: TreeNode[], leafOnly?: boolean): void
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes' keys
+   *
+   * @param subnodes If the `subnodes` is `true`, it only returns the currently selected array of sub-nodes
+   */
+  getCheckedKeys (leafOnly?: boolean): any[]
+
+  /**
+   * Set certain nodes to be checked. Only works when `node-key` is assigned
+   *
+   * @param keys An array of node's keys to be checked
+   * @param leafOnly If the parameter is true, it only returns the currently selected array of sub-nodes
+   */
+  setCheckedKeys (keys: any[], leafOnly?: boolean): void
+
+  /**
+   * Set node to be checked or not. Only works when `node-key` is assigned
+   *
+   * @param data Node's key or data to be checked
+   * @param checked Indicating the node checked or not
+   * @param deep Indicating whether to checked state deeply or not
+   */
+  setChecked (data: TreeNode | any, checked: boolean, deep: boolean)
+}

types/upload.d.ts

+// TODO: need to check if the api matches
+import { ElementUIComponent } from './component'
+
+export type ListType = 'text' | 'picture' | 'picture-card'
+export type FileUploadStatus = 'ready' | 'uploading' | 'success' | 'fail'
+
+export interface FileListItem {
+  name: string,
+  url: string,
+  status?: FileUploadStatus
+}
+
+export interface ElUploadInternalFileDetail {
+  status: FileUploadStatus,
+  name: string,
+  size: number,
+  percentage: number,
+  uid: number,
+  raw: File
+}
+
+export interface ElUploadProgressEvent extends ProgressEvent {
+  percent: number
+}
+
+export interface HttpRequestOptions {
+  headers: object,
+  withCredentials: boolean,
+  file: ElUploadInternalFileDetail,
+  data: object,
+  filename: string,
+  action: string,
+  onProgress: (e: ElUploadProgressEvent) => void,
+  onSuccess: (response: any) => void,
+  onError: (err: ErrorEvent) => void
+}
+
+/** Upload Component */
+export declare class ElUpload extends ElementUIComponent {
+  /** Request URL (required) */
+  action: string
+
+  /** Request headers */
+  headers: object
+
+  /** Whether uploading multiple files is permitted */
+  multiple: boolean
+
+  /** Additions options of request */
+  data: object
+
+  /** Key name for uploaded file */
+  name: string
+
+  /** Whether cookies are sent */
+  withCredentials: boolean
+
+  /** Whether to show the uploaded file list */
+  showUploadList: boolean
+
+  /** Whether to activate drag and drop mode */
+  drag: boolean
+
+  /** Accepted file types, will not work when thumbnail-mode is true */
+  accept: string
+
+  /** Hook function when clicking the uploaded files */
+  onPreview: (file: ElUploadInternalFileDetail) => void
+
+  /** Hook function when files are removed */
+  onRemove: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
+
+  /** Hook function when uploaded successfully */
+  onSuccess: (response: any, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+
+  /** Hook function when some errors occurs */
+  onError: (err: ErrorEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+
+  /** Hook function when some progress occurs */
+  onProgress: (event: ElUploadProgressEvent, file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail) => void
+
+  /** Hook function when file status change */
+  onChange: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
+
+  /** Hook function before uploading with the file to be uploaded as its parameter. If false or a Promise is returned, uploading will be aborted */
+  beforeUpload: (file: ElUploadInternalFileDetail) => boolean | Promise<File | boolean>
+
+  /** Whether thumbnail is displayed */
+  thumbnailMode: boolean
+
+  /** Default uploaded files */
+  fileList: FileListItem[]
+
+  /** Type of fileList */
+  listType: ListType
+
+  /** Whether to auto upload file */
+  autoUpload: boolean
+
+  /** Override default xhr behavior, allowing you to implement your own upload-file's request */
+  httpRequest: (options: HttpRequestOptions) => void
+}