first

types/alert.d.ts

@@ -0,0 +1,31 @@
+import { ElementUIComponent } from './component'
+
+export type AlertType = 'success' | 'warning' | 'info' | 'error'
+export type AlertEffect = 'dark' | 'light'
+
+/** 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
+
+  /** whether to center the text */
+  center: boolean
+
+  /** Customized close button text */
+  closeText: string
+
+  /** If a type icon is displayed */
+  showIcon: boolean
+
+  /** Choose effect */
+  effect: AlertEffect
+}

types/aside.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Aside Component */
+export declare class ElAside extends ElementUIComponent {
+  /** Width of the side section */
+  width: string
+}

types/autocomplete.d.ts

@@ -0,0 +1,78 @@
+import { ElementUIComponent } from './component'
+
+export type SuggestionPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+
+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 to show clear button */
+  clearable: boolean
+
+  /** Whether Autocomplete is disabled */
+  disabled: boolean
+
+  /** Binding value */
+  value: string
+
+  /** Debounce delay when typing */
+  debounce: number
+
+  /** Placement of the popup menu */
+  placement: SuggestionPlacement
+
+  /** Name for the inner native input */
+  name: string
+
+  /** Key name of the input suggestion object for display */
+  valueKey: string
+
+  /** Whether to emit select event on enter when there is no autocomplete match */
+  selectWhenUnmatched: boolean
+
+  /** 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
+
+  /** Prefix icon class */
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: string
+
+  /** Whether to hide the loading icon in remote search */
+  hideLoading: boolean
+
+  /** Whether to append the dropdown to body */
+  popperAppendToBody: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}

types/avatar.d.ts

@@ -0,0 +1,20 @@
+import { ElementUIComponent } from './component'
+
+/** Avatar Component */
+export declare class ElAvatar extends ElementUIComponent {
+  icon: string;
+
+  size: string | number;
+
+  shape: string;
+
+  src: string;
+
+  error: () => false;
+
+  srcSet: string;
+
+  alt: string;
+
+  fit: string;
+}

types/backtop.d.ts

@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Backtop Component */
+export declare class ElBacktop extends ElementUIComponent {
+  /** Backtop target */
+  target: string
+  
+  /** Backtop visibility height */
+  visibilityHeight: string | number
+
+  /** Backtop right position */
+  right: string | number
+
+  /** Backtop bottom position */
+  bottom: string | number
+}

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,10 @@
+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 | object
+
+  /** If true, the navigation will not leave a history record */
+  replace: boolean
+}

types/breadcrumb.d.ts

@@ -0,0 +1,10 @@
+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
+
+  /** Class name of the icon separator */
+  separatorClass: 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,37 @@
+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 a round button */
+  round: 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/calendar.d.ts

@@ -0,0 +1,15 @@
+import { ElementUIComponent } from './component'
+
+export type DateType = Date | String | Number
+
+/** Calendar Component */
+export declare class ElCalendar extends ElementUIComponent {
+  /** Binding value */
+  value: DateType
+
+  /** Specify the display range of the calendar */
+  range: DateType[]
+
+  /** First day of week */
+  firstDayOfWeek: number
+}

types/card.d.ts

@@ -0,0 +1,26 @@
+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
+
+  /** When to show card shadows */
+  shadow: string
+
+  $slots: CardSlots
+}

types/carousel-item.d.ts

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

types/carousel.d.ts

@@ -0,0 +1,57 @@
+import { ElementUIComponent } from './component'
+
+export type CarouselIndicatorTrigger = 'hover' | 'click'
+export type CarouselIndicatorPosition = 'outside' | 'none'
+export type CarouselArrowVisibility = 'always' | 'hover' | 'never'
+export type CarouselType = 'card'
+export type CarouselDirection = 'horizontal' | 'vertical'
+
+/** 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: CarouselArrowVisibility
+
+  /** Type of the Carousel */
+  type: CarouselType
+
+  /** Display direction */
+  direction: CarouselDirection
+
+  /**
+   * Manually switch slide by index
+   *
+   * @param index Index of the slide to be switched to (starting from 0)
+   */
+  setActiveItem (index: number): void
+
+  /**
+   * Manually switch slide by carousel item's name
+   *
+   * @param name The name of the corresponding `el-carousel-item`
+   */
+  setActiveItem (name: string): void
+
+  /** Switch to the previous slide */
+  prev (): void
+
+  /** Switch to the next slide */
+  next (): void
+}

types/cascader-panel.d.ts

@@ -0,0 +1,72 @@
+import { VNode, CreateElement } from 'vue';
+import { ElementUIComponent } 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,
+  leaf?: boolean
+}
+
+/** Cascader Props */
+export interface CascaderProps<V, D> {
+  expandTrigger?: ExpandTrigger,
+  multiple?: boolean,
+  checkStrictly?: boolean,
+  emitPath?: boolean,
+  lazy?: boolean,
+  lazyLoad?: (node: CascaderNode<V, D>, resolve: Resolve<D>) => void,
+  value?: string,
+  label?: string,
+  children?: string,
+  disabled?: string
+  leaf?: string
+}
+
+/** Cascader Node */
+export interface CascaderNode<V, D> {
+  uid: number,
+  data: D,
+  value: V,
+  label: string,
+  level: number,
+  isDisabled: boolean,
+  isLeaf: boolean,
+  parent: CascaderNode<V, D> | null,
+  children: CascaderNode<V, D>[]
+  config: CascaderProps<V, D>
+}
+
+type Resolve<D> = (dataList?: D[]) => void
+
+export interface CascaderPanelSlots {
+  /** Custom label content */
+  default: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** CascaderPanel Component */
+export declare class ElCascaderPanel<V = any, D = CascaderOption> extends ElementUIComponent {
+  /** Selected value */
+  value: V | V[]
+
+  /** Data of the options */
+  options: D[]
+
+  /** Configuration options */
+  props: CascaderProps<V, D>
+
+  /** Whether to add border */
+  border: boolean
+
+  /** Render function of custom label content */
+  renderLabel: (h: CreateElement, context: { node: CascaderNode<V, D>; data: D }) => VNode
+
+  $slots: CascaderPanelSlots
+}

types/cascader.d.ts

@@ -0,0 +1,65 @@
+import { VNode } from 'vue';
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { CascaderOption, CascaderProps, CascaderNode } from './cascader-panel';
+
+export { CascaderOption, CascaderProps, CascaderNode };
+
+export interface CascaderSlots {
+  /** Custom label content */
+  default: VNode[],
+
+  /** Empty content when no option matches */
+  empty: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Cascader Component */
+export declare class ElCascader<V = any, D = CascaderOption> extends ElementUIComponent {
+  /** Data of the options */
+  options: CascaderOption[]
+
+  /** Configuration options */
+  props: CascaderProps<V, D>
+
+  /** Selected value */
+  value: V | V[]
+
+  /** Size of Input */
+  size: ElementUIComponentSize
+
+  /** Input placeholder */
+  placeholder: string
+
+  /** Whether Cascader is disabled */
+  disabled: boolean
+
+  /** Whether selected value can be cleared */
+  clearable: boolean
+
+  /** Whether to display all levels of the selected value in the input */
+  showAllLevels: boolean
+
+  /** Whether to collapse selected tags in multiple selection mode */
+  collapseTags: boolean
+
+  /** Separator of option labels */
+  separator: string
+
+  /** Whether the options can be searched */
+  filterable: boolean
+
+  /** filter method to match options according to input keyword */
+  filterMethod: (node: CascaderNode<V, D>, keyword: string) => boolean
+
+  /** Debounce delay when typing filter keyword, in millisecond */
+  debounce: number
+
+  /** Custom class name for Cascader's dropdown */
+  popperClass: string
+
+  /** Hook function before filtering with the value to be filtered as its parameter */
+  beforeFilter: (value: string) => boolean | Promise<any>
+
+  $slots: CascaderSlots
+}

types/checkbox-button.d.ts

@@ -0,0 +1,22 @@
+import { ElementUIComponent } from './component'
+
+/** Checkbox Button Component */
+export declare class ElCheckboxButton extends ElementUIComponent {
+  /** Value of the checkbox when used inside a checkbox-group */
+  label: string | number | boolean
+
+  /** 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
+}

types/checkbox-group.d.ts

@@ -0,0 +1,22 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** Checkbox Group Component */
+export declare class ElCheckboxGroup extends ElementUIComponent {
+  /** Size of checkbox buttons or bordered checkboxes */
+  size: ElementUIComponentSize
+
+  /** Whether the nesting checkboxes are disabled */
+  disabled: boolean
+
+  /** Minimum number of checkbox checked */
+  min: number
+
+  /** Maximum number of checkbox checked */
+  max: number
+
+  /** Font color when button is active */
+  textColor: string
+
+  /** Border and background color when button is active */
+  fill: string
+}

types/checkbox.d.ts

@@ -0,0 +1,34 @@
+import { ElementUIComponent, ElementUIComponentSize } 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 | number | boolean
+
+  /** 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
+
+  /** Whether to add a border around Checkbox */
+  border: boolean
+
+  /** Size of the Checkbox, only works when border is true */
+  size: ElementUIComponentSize
+
+  /** 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,46 @@
+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
+
+  /** ≥992px Responsive columns or column props object */
+  md: ResponsiveColumn
+
+  /** ≥1200px Responsive columns or column props object */
+  lg: ResponsiveColumn
+
+  /** ≥1920px Responsive columns or column props object */
+  xl: ResponsiveColumn
+
+  /** custom element tag */
+  tag: string
+}

types/collapse-item.d.ts

@@ -0,0 +1,26 @@
+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
+
+  /** Disable the collapse item */
+  disabled: boolean
+}

types/collapse.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,21 @@
+import { ElementUIComponent, ElementUIComponentSize } 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
+
+  /** Whether to disable the ColorPicker */
+  disabled: boolean
+
+  /** Size of ColorPicker */
+  size: ElementUIComponentSize
+
+  /** Whether to display the alpha slider */
+  popperClass: string
+
+  /** Custom class name for ColorPicker's dropdown */
+  colorFormat: ColorFormat
+}

types/component.d.ts

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

types/container.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Container Component */
+export declare class ElContainer extends ElementUIComponent {
+  /** Layout direction for child elements */
+  direction: 'horizontal' | 'vertical'
+}

types/date-picker.d.ts

@@ -0,0 +1,124 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+export type DatePickerType = 'year' | 'month' | 'date' | 'datetime' | 'week' | 'datetimerange' | 'daterange' | 'dates'
+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 | string | Date[] | string[]
+
+  /** 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
+
+  /** Placeholder for the start date in range mode */
+  startPlaceholder: string
+
+  /** Placeholder for the end date in range mode */
+  endPlaceholder: 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
+
+  /** Default date of the calendar */
+  defaultValue: Date | number | string
+
+  /** Format of binding value. If not specified, the binding value will be a Date object */
+  valueFormat: string
+
+  /** name for the inner native input */
+  name: string
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}

types/dialog.d.ts

@@ -0,0 +1,62 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+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
+
+  /** Width of Dialog */
+  width: string
+
+  /** Whether the Dialog takes up full screen */
+  fullscreen: boolean
+
+  /** Value for margin-top of Dialog CSS */
+  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
+
+  /** Callback before Dialog closes, and it will prevent Dialog from closing */
+  beforeClose: (done: Function) => void
+
+  /** Whether to align the header and footer in center */
+  center: boolean
+
+  /** Whether to destroy elements in Dialog when closed */
+  destroyOnClose: boolean
+
+  $slots: DialogSlots
+}

types/divider.d.ts

@@ -0,0 +1,12 @@
+import { ElementUIComponent } from './component'
+
+export type ContentPosition = 'left' | 'center' | 'right'
+
+/** Divider Component */
+export declare class ElDivider extends ElementUIComponent {
+  /** enable vertical divider */
+  vertical: boolean
+
+  /** customize the content on the divider line */
+  posiiton: ContentPosition
+}

types/drawer.d.ts

@@ -0,0 +1,63 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+type hide = (shouldCancel: boolean) => void
+declare enum Direction {
+    LTR = 'ltr', // left to right
+    RTL = 'rtl', // right to left
+    TTB = 'ttb', // top to bottom
+    BTT = 'btt' // bottom to top
+}
+
+interface DrawerSlots {
+    /* Main Content Slots */
+    default: VNode[];
+
+    /* Title Slots */
+    title: VNode[];
+
+    [key: string]: VNode[]
+}
+/** Drawer Component */
+export declare class ElDrawer extends ElementUIComponent {
+    /* Equivalent to `Dialog`'s append to body attribute, when applying nested drawer, make sure this one is set to true */
+    appendToBody: boolean
+
+    /* Hook method called before close drawer, the first parameter is a function which should determine if the drawer should be closed */
+    beforeClose: (done: hide) => void
+
+    /** Whether the Drawer can be closed by pressing ESC */
+    closeOnPressEscape: boolean
+
+    /** Custom class names for Dialog */
+    customClass: string
+
+    /* Determine whether the wrapped children should be destroyed, if true, children's destroyed life cycle method will be called all local state will be destroyed */
+    destroyOnClose: boolean
+
+    /* Equivalent to `Dialog`'s modal attribute, determines whether the dark shadowing background should show */
+    modal: boolean
+
+    /* Equivalent to `Dialog`'s modal-append-to-body attribute, determines whether the shadowing background should be inserted direct to DocumentBody element */
+    modalAppendToBody: boolean
+
+    /* Attributes that controls the drawer's direction of display*/
+    position: Direction
+
+    /* Whether the close button should be rendered to control the drawer's visible state */
+    showClose: boolean
+
+    /* The size of the drawer component, supporting number with unit of pixel, string by percentage e.g. 30% */
+    size: number | string
+
+    /* The Drawer's title, also can be replaced by named slot `title` */
+    title: string
+
+    /* Whether the drawer component should show, also can be decorated by `.sync` */
+    visible: boolean
+
+    /* Flag attribute whi */
+    wrapperClosable: boolean
+
+    $slots: DrawerSlots
+}

types/dropdown-item.d.ts

@@ -0,0 +1,16 @@
+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 | number | object
+
+  /** Whether the item is disabled */
+  disabled: boolean
+
+  /** Whether a divider is displayed */
+  divided: boolean
+
+  /** Icon to show on left side of text */
+  icon: string
+}

types/dropdown-menu.d.ts

@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Dropdown Menu Component */
+export declare class ElDropdownMenu extends ElementUIComponent {}

types/dropdown.d.ts

@@ -0,0 +1,35 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { ButtonType } from './button'
+
+export type DropdownMenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-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
+
+  /** menu size, also works on the split button */
+  size: ElementUIComponentSize
+
+  /** Placement of the menu */
+  placement: DropdownMenuAlignment
+
+  /** How to trigger */
+  trigger: DropdownMenuTrigger
+
+  /** Whether to hide menu after clicking menu-item */
+  hideOnClick: boolean
+
+  /** Delay time before show a dropdown */
+  showTimeout: number
+
+  /** Delay time before hide a dropdown */
+  hideTimeout: number
+
+  /** Dropdown tabindex */
+  tabindex: number
+}

types/element-ui.d.ts

@@ -0,0 +1,346 @@
+import Vue, { PluginObject } from 'vue'
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+import { ElAlert } from './alert'
+import { ElAside } from './aside'
+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 { ElCheckboxButton } from './checkbox-button'
+import { ElCheckboxGroup } from './checkbox-group'
+import { ElCol } from './col'
+import { ElCollapse } from './collapse'
+import { ElCollapseItem } from './collapse-item'
+import { ElColorPicker } from './color-picker'
+import { ElContainer } from './container'
+import { ElDatePicker } from './date-picker'
+import { ElDialog } from './dialog'
+import { ElDropdown } from './dropdown'
+import { ElDropdownItem } from './dropdown-item'
+import { ElDropdownMenu } from './dropdown-menu'
+import { ElFooter } from './footer'
+import { ElForm } from './form'
+import { ElFormItem } from './form-item'
+import { ElHeader } from './header'
+import { ElInput } from './input'
+import { ElInputNumber } from './input-number'
+import { ElLoading } from './loading'
+import { ElMain } from './main'
+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 { ElTimeline } from './timeline'
+import { ElTimelineItem } from './timeline-item'
+import { ElTimePicker } from './time-picker'
+import { ElTimeSelect } from './time-select'
+import { ElTooltip } from './tooltip'
+import { ElTransfer } from './transfer'
+import { ElTree, TreeData } from './tree'
+import { ElUpload } from './upload'
+import { ElLink } from './link'
+import { ElDivider } from './divider'
+import { ElIcon } from './icon'
+import { ElCalendar } from './calendar'
+import { ElImage } from './image'
+import { ElBacktop } from './backtop'
+import { ElInfiniteScroll } from './infinite-scroll'
+import { ElPageHeader } from './page-header'
+import { ElAvatar } from './avatar'
+import { ElDrawer } from './drawer'
+import { ElPopconfirm } from './popconfirm'
+
+export interface InstallationOptions {
+  locale: any,
+  i18n: any,
+  size: string
+}
+
+/** The version of element-ui */
+export const version: string
+
+/**
+ * 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: InstallationOptions): void
+
+/** 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 {}
+
+/** Aside Component */
+export class Aside extends ElAside {}
+
+/** 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 Button Component */
+export class CheckboxButton extends ElCheckboxButton {}
+
+/** 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 {}
+
+/** Container Component */
+export class Container extends ElContainer {}
+
+/** 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 {}
+
+/** Footer Component */
+export class Footer extends ElFooter {}
+
+/** Form Component */
+export class Form extends ElForm {}
+
+/** Form Item Component */
+export class FormItem extends ElFormItem {}
+
+/** Header Component */
+export class Header extends ElHeader {}
+
+/** Input Component */
+export class Input extends ElInput {}
+
+/** Input Number Component */
+export class InputNumber extends ElInputNumber {}
+
+/** Main Component */
+export class Main extends ElMain {}
+
+/** 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 {}
+
+/** Timeline Component */
+export class Timeline extends ElTimeline {}
+
+/** Timeline Item Component */
+export class TimelineItem extends ElTimelineItem {}
+
+/** TimePicker Component */
+export class TimePicker extends ElTimePicker {}
+
+/** TimeSelect Component */
+export class TimeSelect extends ElTimeSelect {}
+
+/** Tooltip Component */
+export class Tooltip extends ElTooltip {}
+
+/** Transfer Component */
+export class Transfer extends ElTransfer {}
+
+/** Tree Component */
+export class Tree<K = any, D = TreeData> extends ElTree<K, D> {}
+
+/** Upload Component */
+export class Upload extends ElUpload {}
+
+/** Divider Component */
+export class Divider extends ElDivider {}
+
+/** Link Component */
+export class Link extends ElLink {}
+
+/** Image Component */
+export class Image extends ElImage {}
+
+/** Icon Component */
+export class Icon extends ElIcon {}
+
+/** Calendar Component */
+export class Calendar extends ElCalendar {}
+
+/** Backtop Component */
+export class Backtop extends ElBacktop {}
+
+/** InfiniteScroll Directive */
+export const InfiniteScroll: PluginObject<ElInfiniteScroll>;
+
+/** PageHeader Component */
+export class PageHeader extends ElPageHeader {}
+
+/** Avatar Component */
+export class Avatar extends ElAvatar {}
+
+/** Drawer Component */
+export class Drawer extends ElDrawer {}
+
+/** Popconfirm Component */
+export class Popconfirm extends ElPopconfirm {}

types/footer.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Footer Component */
+export declare class ElFooter extends ElementUIComponent {
+  /** Height of the footer */
+  height: string
+}

types/form-item.d.ts

@@ -0,0 +1,37 @@
+import { ElementUIComponent, ElementUIComponentSize } 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
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
+  /** Reset current field and remove validation result */
+  resetField (): void
+
+  /** Remove validation status of the field */
+  clearValidate (): void
+}

types/form.d.ts

@@ -0,0 +1,82 @@
+import { ElementUIComponent, ElementUIComponentSize } 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
+   * @param invalidFields fields that fail validation
+   */
+  (isValid: boolean, invalidFields: object): 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
+
+  /** Whether the form is disabled */
+  disabled: 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
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Whether to display an icon indicating the validation result */
+  statusIcon: boolean
+
+  /** Whether to trigger validation when the `rules` prop is changed */
+  validateOnRuleChange: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
+  /**
+   * Validate the whole form
+   *
+   * @param callback A callback to tell the validation result
+   */
+  validate (callback: ValidateCallback): void
+  validate (): Promise<boolean>
+  /**
+   * Validate certain form items
+   *
+   * @param props The property of `model` or array of prop which is going to validate
+   * @param callback A callback to tell the field validation result
+   */
+  validateField (props: string | string[], callback?: ValidateFieldCallback): void
+
+  /** reset all the fields and remove validation result */
+  resetFields (): void
+
+  /** clear validation message for certain fields */
+  clearValidate (props?: string | string[]): void
+}

types/header.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Header Component */
+export declare class ElHeader extends ElementUIComponent {
+  /** Height of the header */
+  height: string
+}

types/icon.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Icon Component */
+export declare class ElIcon extends ElementUIComponent {
+  /** Icon name */
+  name: string  
+}

types/image.d.ts

@@ -0,0 +1,41 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+
+export interface ImageSlots {
+  /** Placeholder content when image hasn't loaded yet */
+  placeholder: VNode[]
+
+  /** Error content when error occurs to image load */
+  error: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Image Component */
+export declare class ElImage extends ElementUIComponent {
+  /** Image source */
+  src: string
+
+  /** Indicate how the image should be resized to fit its container, same as native 'object-fit' */
+  fit: ObjectFit
+
+  /** Whether to use lazy load */
+  lazy: boolean
+
+  /** Scroll container that to add scroll listener when using lazy load */
+  scrollContainer: string | HTMLElement
+
+  /** Native 'alt' attribute */
+  alt: string
+
+  /** Native 'referrerPolicy' attribute */
+  referrerPolicy: string
+
+  $slots: ImageSlots
+
+  previewSrcList: string[]
+
+  zIndex: number
+}

types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './element-ui'
+
+import * as ElementUI from './element-ui'
+export default ElementUI

types/infinite-scroll.d.ts

@@ -0,0 +1,6 @@
+import { VNodeDirective } from 'vue'
+
+export interface ElInfiniteScroll extends VNodeDirective {
+  name: 'infinite-scroll',
+  value: Function
+}

types/input-number.d.ts

@@ -0,0 +1,47 @@
+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
+
+  /** Debounce delay when typing, in milliseconds */
+  debounce: number
+
+  /** Position of the control buttons */
+  controlsPosition: string
+
+  /** Same as name in native input */
+  name: string
+
+  /** Precision of input value */
+  precision: number
+
+  /** whether input value can only be multiple of step */
+  stepStrictly: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}

types/input.d.ts

@@ -0,0 +1,107 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** The resizability of el-input component */
+export type Resizability = 'none' | 'both' | 'horizontal' | 'vertical'
+export type InputType = 'text' | 'textarea'
+
+/** Controls how el-input component automatically sets size */
+export interface AutoSize {
+  /** Minimum rows to show */
+  minRows: number,
+
+  /** Maximum rows to show */
+  maxRows: number
+}
+
+/** Input Component */
+export declare class ElInput extends ElementUIComponent {
+  /** Type of input */
+  type: InputType
+
+  /** 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
+
+  /** Prefix icon class */
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: 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
+
+  /** @Deprecated in next major version */
+  autoComplete: string
+
+  /** Same as autocomplete 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
+
+  /** Whether to trigger form validatio */
+  validateEvent: boolean
+
+  /** Whether the input is clearable */
+  clearable: boolean
+
+  /** Whether to show password */
+  showPassword: boolean
+
+  /** Whether to show wordCount when setting maxLength */
+  showWordLimit: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+
+  /**
+   * Blur the Input component
+   */
+  blur (): void
+
+  /**
+   * Select the text in input element
+   */
+  select (): void
+}

types/link.d.ts

@@ -0,0 +1,25 @@
+import { ElementUIComponent } from './component'
+
+/** Button type */
+export type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 
+
+/** Link Component */
+export declare class ElLink extends ElementUIComponent {
+  /** Link type */
+  type: LinkType
+  
+  /** Disable the link */
+  disabled: boolean
+
+  /** Link underline */
+  underline: boolean
+
+  /** Link icon, accepts an icon name of Element icon component */
+  icon: string
+
+  /** Link href */
+  href: string
+
+  /** Link target */
+  target: string
+}

types/loading.d.ts

@@ -0,0 +1,62 @@
+import Vue, { VNodeDirective, PluginObject } 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
+
+  /** Class name of the custom spinner */
+  spinner?: string
+
+  /** Background color of the mask */
+  background?: string
+
+  /** Custom class name for Loading */
+  customClass?: string
+}
+
+/** Loading Component */
+export declare class ElLoadingComponent extends Vue {
+  /** Close the Loading instance */
+  close (): void
+}
+
+/** 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): void
+
+  /** 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
+
+  directive: PluginObject<never>
+}
+
+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/main.d.ts

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

types/menu-item-group.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Menu Item Group Component */
+export declare class ElMenuItemGroup extends ElementUIComponent {
+  /** Group title */
+  title: string
+}

types/menu-item.d.ts

@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** Menu Item Component */
+export declare class ElMenuItem extends ElementUIComponent {
+  /** Unique identification */
+  index: string
+
+  /** Vue Router object */
+  route: object
+}

types/menu.d.ts

@@ -0,0 +1,46 @@
+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
+
+  /** Whether the menu is collapsed (available only in vertical mode) */
+  collapse: boolean
+
+  /** Background color of Menu (hex format) */
+  backgroundColor: string
+
+  /** Text color of Menu (hex format) */
+  textColor: string
+
+  /** Text color of currently active menu item (hex format) */
+  activeTextColor: string
+
+  /** 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
+
+  /** Whether the menu collapse transition is active */
+  collapseTransition: boolean
+  
+  /** Open the specified sub-menu */
+  open (index: string): void
+
+  /** Close the specified sub-menu */
+  close (index: string): void
+}

types/message-box.d.ts

@@ -0,0 +1,176 @@
+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+export type MessageBoxCloseAction = 'confirm' | 'cancel' | 'close'
+export type MessageBoxData = MessageBoxInputData | MessageBoxCloseAction
+
+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
+  iconClass: string
+  customClass: string
+  showInput: boolean
+  showClose: boolean
+  inputValue: string
+  inputPlaceholder: string
+  inputType: string
+  inputPattern: RegExp
+  inputValidator: MessageBoxInputValidator
+  inputErrorMessage: string
+  showConfirmButton: boolean
+  showCancelButton: boolean
+  action: MessageBoxCloseAction
+  dangerouslyUseHTMLString: boolean
+  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 | VNode
+
+  /** Message type, used for icon display */
+  type?: MessageType
+
+  /** Custom icon's class */
+  iconClass?: string
+
+  /** 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
+
+  /** Whether to show a close button */
+  showClose?: 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 to align the content in center */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Whether to use round button */
+  roundButton?: boolean
+
+  /** Whether MessageBox can be closed by clicking the mask */
+  closeOnClickModal?: boolean
+
+  /** Whether MessageBox can be closed by pressing the ESC */
+  closeOnPressEscape?: boolean
+
+  /** Whether to close MessageBox when hash changes */
+  closeOnHashChange?: 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
+
+  /** Input Type: text, textArea, password or number */
+  inputType?: string
+
+  /** 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
+
+  /** Whether to distinguish canceling and closing */
+  distinguishCancelAndClose?: boolean
+}
+
+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 confirm message box */
+  confirm: ElMessageBoxShortcutMethod
+
+  /** Show a prompt message box */
+  prompt: ElMessageBoxShortcutMethod
+
+  /** Set default options of message boxes */
+  setDefaults (defaults: ElMessageBoxOptions): void
+
+  /** Close current message box */
+  close (): void
+}
+
+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

@@ -0,0 +1,90 @@
+import Vue, {VNode} from 'vue'
+
+export type MessageType = 'success' | 'warning' | 'info' | 'error'
+
+/** Message Component */
+export declare class ElMessageComponent extends Vue {
+  /** Close the Loading instance */
+  close (): void
+}
+
+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 | VNode
+
+  /** 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
+
+  /** Whether to center the text */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Callback function when closed with the message instance as the parameter */
+  onClose?: CloseEventHandler
+  
+  /** Set the distance to the top of viewport. Default is 20 px. */
+  offset?: number
+}
+
+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 success message with options */
+  success (options: ElMessageOptions): ElMessageComponent
+
+  /** Show a warning message */
+  warning (text: string): ElMessageComponent
+  
+  /** Show a warning message with options */
+  warning (options: ElMessageOptions): ElMessageComponent
+
+  /** Show an info message */
+  info (text: string): ElMessageComponent
+  
+  /** Show an info message with options */
+  info (options: ElMessageOptions): ElMessageComponent
+
+  /** Show an error message */
+  error (text: string): ElMessageComponent
+  
+  /** Show an error message with options */
+  error (options: ElMessageOptions): 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

@@ -0,0 +1,84 @@
+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+export type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+/** Notification Component */
+export declare class ElNotificationComponent extends Vue {
+  /** Close the Notification instance */
+  close (): void
+}
+
+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
+
+  /** Whether to show a close button */
+  showClose?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Callback function when closed */
+  onClose?: () => void
+
+  /** Callback function when notification clicked */
+  onClick?: () => void
+
+  /** Offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset */
+  offset?: number
+
+  /** custom position */
+  position?: NotificationPosition
+}
+
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,13 @@
+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/page-header.d.ts

@@ -0,0 +1,10 @@
+import { ElementUIComponent } from './component'
+
+/** PageHeader Component */
+export declare class ElPageHeader extends ElementUIComponent {
+  /** title */
+  title: String
+
+  /** content */
+  content: String
+}

types/pagination.d.ts

@@ -0,0 +1,43 @@
+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
+
+  /** Number of pagers */
+  pagerCount: 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[]
+
+  /** Custom class name for the page size Select's dropdown */
+  popperClass: string
+
+  /** Text for the prev button */
+  prevText: string
+
+  /** Text for the prev button */
+  nextText: string
+
+  /** Whether to hide when thers's only one page */ 
+  hideOnSinglePage: boolean
+}

types/popconfirm.d.ts

@@ -0,0 +1,29 @@
+import { ElementUIComponent } from './component'
+import { ElPopover } from './popover'
+
+/** Popconfirm Component */
+export declare class ElPopconfirm extends ElPopover {
+  /** Popconfirm title */
+  title: string
+
+  /** Popconfirm ok text */
+  confirmButtonText: string
+  
+  /** Popconfirm cancel text */
+  cancelButtonText: string
+
+  /** Popconfirm ok type */
+  confirmButtonType: string
+
+  /** Popconfirm cancal type */
+  cancelButtonType: string
+
+  /** Popconfirm icon */
+  icon: string
+
+  /** Popconfirm icon color */
+  iconColor: string
+
+  /** Popconfirm hide icon */
+  hideIcon: boolean
+}

types/popover.d.ts

@@ -0,0 +1,71 @@
+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 */
+  popperOptions: object
+
+  /** Custom class name for popover */
+  popperClass: string
+
+  /** Delay before appearing when trigger is hover, in milliseconds */
+  openDelay: number
+
+  /** Delay before disappearing when trigger is hover, in milliseconds */
+  closeDelay: number
+
+  /** Popover tabindex */
+  tabindex: number
+
+  $slots: PopoverSlots
+}

types/progress.d.ts

@@ -0,0 +1,37 @@
+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
+
+  /** Circle progress bar stroke line cap */
+  strokeLinecap: string
+
+  /** Whether to place the percentage inside progress bar, only works when type is 'line' */
+  textInside: boolean
+
+  /** The current status of progress bar */
+  status: ProgressStatus
+
+  /** Background color of progress bar. Overrides `status` prop */
+  color: string | Function | Array<string | { color: string, percentage: number }>
+
+  /** The canvas width of circle progress bar */
+  width: number
+
+  /** Whether to show percentage */
+  showText: boolean
+
+  /** Template function of the content	*/
+  format(percentage: number): string
+}

types/radio-button.d.ts

@@ -0,0 +1,16 @@
+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
+
+  /** Native 'name' attribute */
+  name: string
+}

types/radio-group.d.ts

@@ -0,0 +1,18 @@
+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
+
+  /** Whether the nesting radios are disabled */
+  disabled: boolean
+
+  /** Font color when button is active */
+  textColor: string
+}

types/radio.d.ts

@@ -0,0 +1,19 @@
+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
+
+  /** Whether to add a border around Radio */
+  border: boolean
+
+  /** Native 'name' attribute */
+  name: string
+}

types/rate.d.ts

@@ -0,0 +1,64 @@
+import { ElementUIComponent } from './component'
+
+interface Option {
+  value: string,
+  excluded?: boolean
+}
+
+interface Options {
+  [threshold: number]: string | Option
+}
+
+export type RateColors = Options
+export type RateIconClasses = Options
+
+/** 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
+
+  /** Colors for icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding color */
+  colors: string[] | RateColors
+
+  /** Color of unselected icons */
+  voidColor: string
+
+  /** Color of unselected read-only icons */
+  disabledVoidColor: string
+
+  /** Class names of icons. If array, it should have 3 elements, each of which corresponds with a score level, else if object, the key should be threshold value between two levels, and the value should be corresponding class name */
+  iconClasses: string[] | RateIconClasses
+
+  /** Class name of unselected icons */
+  voidIconClass: string
+
+  /** Class name of unselected read-only icons */
+  disabledVoidIconClass: string
+
+  /** Whether to display texts */
+  showText: boolean
+
+  /** Whether to display current score. show-score and show-text cannot be true at the same time */
+  showScore: boolean
+
+  /** Color of texts */
+  textColor: string
+
+  /** Text array */
+  texts: string[]
+
+  /** Text template when the component is read-only */
+  scoreTemplate: string
+}

types/row.d.ts

@@ -0,0 +1,25 @@
+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
+
+  /** Custom element tag */
+  tag: string
+}

types/select.d.ts

@@ -0,0 +1,90 @@
+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
+
+  /** Unique identity key name for value, required when value is an object */
+  valueKey: string
+
+  /** 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
+
+  /** @Deprecated in next major version */
+  autoComplete: string
+
+  /** Same as autocomplete in native input */
+  autocomplete: string
+
+  /** 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: QueryChangeHandler
+
+  /** Whether options are loaded from server */
+  remote: boolean
+
+  /** Custom remote search method */
+  remoteMethod: QueryChangeHandler
+
+  /** 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
+
+  /** Select first matching option on enter key. Use with filterable or remote */
+  defaultFirstOption: boolean
+
+  /** Whether to append the popper menu to body */
+  popperAppendToBody: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+
+  /**
+   * Blur the Input component, and hide the dropdown
+   */
+  blur (): void
+}

types/slider.d.ts

@@ -0,0 +1,68 @@
+import { VNode } from 'vue';
+import { ElementUIComponent } from './component'
+
+export interface SliderTooltipFormat {
+  /**
+   * Format the displayed value of Slider
+   *
+   * @param value Value of the Slider
+   * @returns formatted value
+   */
+  (value: number): string
+}
+
+/** 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
+
+  /** Format of displayed tooltip value */
+  formatTooltip: SliderTooltipFormat
+
+  /** Whether to display control buttons when show-input is true */
+  showInputControls: boolean
+
+  /** Size of the input box */
+  inputSize: string
+
+  /** Whether to display breakpoints */
+  showStops: boolean
+
+  /** Whether to display tooltip value */
+  showTooltip: boolean
+
+  /** Whether to select a range */
+  range: boolean
+
+  /** Vertical mode */
+  vertical: boolean
+
+  /** Slider height, required in vertical mode */
+  height: boolean
+
+  /** Debounce delay when typing, in milliseconds, works when show-input is true */
+  debounce: number
+
+  /** Custom class name for the tooltip */
+  tooltipClass: string
+
+  /** Custom marks */
+  marks: {
+    [key: number]: string | { style: object; label: string | VNode }
+  }
+}

types/step.d.ts

@@ -0,0 +1,34 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+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: string
+
+  /** Current status. It will be automatically set by Steps if not configured. */
+  status: StepStatus
+
+  readonly $slots: StepRenderSlots
+}

types/steps.d.ts

@@ -0,0 +1,28 @@
+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
+
+  /** Whether to apply simple theme */
+  simple: boolean
+}

types/submenu.d.ts

@@ -0,0 +1,22 @@
+import { ElementUIComponent } from './component'
+
+/** Submenu Component */
+export declare class ElSubmenu extends ElementUIComponent {
+  /** Unique identification */
+  index: string | null
+
+  /** Delay time before showing a sub-menu */
+  showTimeout: number
+
+  /** Delay time before hiding a sub-menu */
+  hideTimeout: number
+
+  /** Custom class name for the popup menu */
+  popperClass: string
+
+  /** Whether the sub-menu is disabled */
+  disabled: boolean
+
+  /** Whether to append the popper menu to body */
+  popperAppendToBody: boolean
+}

types/switch.d.ts

@@ -0,0 +1,43 @@
+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 */
+  activeIconClass: string
+
+  /** Class name of the icon displayed when in off state, overrides off-text */
+  inactiveIconClass: string
+
+  /** Text displayed when in on state */
+  activeText: string
+
+  /** Text displayed when in off state */
+  inactiveText: string
+
+  /** Background color when in on state */
+  activeColor: string
+
+  /** Background color when in off state */
+  inactiveColor: string
+
+  /** Switch value when in on state */
+  activeValue: string | boolean | number
+
+  /** Switch value when in off state */
+  inactiveValue: string | boolean | number
+
+  /** Input name of Switch */
+  name: string
+
+  /** Whether to trigger form validation */
+  validateEvent: boolean
+}

types/tab-pane.d.ts

@@ -0,0 +1,19 @@
+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
+
+  /** Whether Tab is lazily rendered */
+  lazy: boolean
+}

types/table-column.d.ts

@@ -0,0 +1,117 @@
+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent, ElementUIHorizontalAlignment } from './component'
+import { PopoverPlacement } from './popover'
+
+export type TableColumnType = 'default' | 'selection' | 'index' | 'expand'
+export type TableColumnFixedType = 'left' | 'right'
+export type SortOrders = 'ascending' | 'descending' | null
+
+export type TableColumn = {
+  /** Label of the column */
+  label: string,
+
+  /** Property name of the source data */
+  property: string,
+
+  /** Type of the column */
+  type: string,
+
+  /** Whether column is fixed at left/right */
+  fixed: boolean | string
+}
+
+/** 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 | 'custom'
+
+  /** Sorting method. Works when `sortable` is `true` */
+  sortMethod: (a: any, b: any) => number
+
+  /** The order of the sorting strategies used when sorting the data. Works when `sortable` is `true`. */
+  sortOrders: SortOrders[]
+
+  /** 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[]
+
+  /** Placement for the filter dropdown */
+  filterPlacement: PopoverPlacement
+
+  /** 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
+
+  /** Filter value for selected data, might be useful when table header is rendered with `render-header` */
+  filteredValue: TableColumnFilter[]
+}

types/table.d.ts

@@ -0,0 +1,174 @@
+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
+}
+
+export interface SummaryMethodParams {
+  columns: object[],
+  data: object
+}
+
+export interface rowCallbackParams {
+  row: object,
+  rowIndex: number
+}
+
+export interface cellCallbackParams {
+  row: object,
+  rowIndex: number,
+  column: object,
+  columnIndex: number
+}
+
+export interface treeNode {
+  rowKey: string | number,
+  isLeaf: boolean,
+  level: number,
+  expanded: boolean,
+  loaded: boolean
+}
+
+/** 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
+
+  /** Whether to lazy load tree structure data, used with load attribute */
+  lazy: boolean
+
+  /** Horizontal indentation of nodes in adjacent levels in pixels */
+  indent: number
+
+  /** Function that returns custom class names for a row, or a string assigning class names for every row */
+  rowClassName: string | ((param: rowCallbackParams) => string)
+
+  /** Function that returns custom style for a row, or an object assigning custom style for every row */
+  rowStyle: object | ((param: rowCallbackParams) => object)
+
+  /** Function that returns custom class names for a cell, or a string assigning class names for every cell */
+  cellClassName: string | ((param: cellCallbackParams) => string)
+
+  /** Function that returns custom style for a cell, or an object assigning custom style for every cell */
+  cellStyle: object | ((param: cellCallbackParams) => object)
+
+  /** Function that returns custom class names for a row in table header, or a string assigning class names for every row in table header */
+  headerRowClassName: string | ((param: rowCallbackParams) => string)
+
+  /** Function that returns custom style for a row in table header, or an object assigning custom style for every row in table header */
+  headerRowStyle: object | ((param: rowCallbackParams) => object)
+
+  /** Function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header */
+  headerCellClassName: string | ((param: cellCallbackParams) => string)
+
+  /** Function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header */
+  headerCellStyle: object | ((param: cellCallbackParams) => 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
+
+  /** Whether to display a summary row */
+  showSummary: boolean
+
+  /** Displayed text for the first column of summary row */
+  sumText: string
+
+  /** Custom summary method */
+  summaryMethod: (param: SummaryMethodParams) => any[]
+
+  /** Controls the behavior of master checkbox in multi-select tables when only some rows are selected */
+  selectOnIndeterminate: boolean
+
+  /** 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
+
+  /**
+   * Toggle or set all rows
+   */
+  toggleAllSelection (): void
+
+  /**
+   * Set a certain row as selected
+   *
+   * @param row The row that is going to set as selected
+   */
+  setCurrentRow (row?: object): void
+  
+  /**
+   * Toggle or set if a certain row is expanded
+   *
+   * @param row The row that is going to set its expanded state
+   * @param expanded Whether the row is expanded. The expanded state will be toggled if not set
+   */
+  toggleRowExpansion (row: object, expanded?: boolean): void
+
+  /** Clear sort status, reset the table to unsorted  */
+  clearSort (): void
+
+  /** Clear filter, reset the table to unfiltered  */
+  clearFilter (): void
+
+  /** Relayout the table, maybe needed when change the table or it's ancestors visibility */
+  doLayout (): void
+
+  /** Sort Table manually */
+  sort (prop: string, order: string): void
+
+  /** method for lazy load subtree data */
+  load (row: object, treeNode: treeNode, resolve: Function): void
+}

types/tabs.d.ts

@@ -0,0 +1,31 @@
+import { ElementUIComponent } from './component'
+
+export type TabType = 'card' | 'border-card'
+export type TabPosition = 'top' | 'right' | 'bottom' | 'left'
+
+/** 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
+
+  /** Position of tabs */
+  tabPosition: TabPosition
+
+  /** Whether width of tab automatically fits its container */
+  stretch: Boolean
+
+  /** Hook function before switching tab. If false or a Promise is returned and then is rejected, switching will be prevented */
+  beforeLeave: (activeName: string, oldActiveName: string) => boolean | Promise<any>
+}

types/tag.d.ts

@@ -0,0 +1,28 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export type TagType = 'primary' | 'gray' | 'success' | 'warning' | 'danger'
+export type TagTheme = 'dark' | 'light' | 'plain'
+
+/** Tag Component */
+export declare class ElTag extends ElementUIComponent {
+  /** Tag type */
+  type: TagType
+
+  /** Whether Tab can be removed */
+  closable: boolean
+
+  /** Whether the removal animation is disabled */
+  disableTransitions: boolean
+
+  /** Whether Tag has a highlighted border */
+  hit: boolean
+
+  /** Background color of the tag */
+  color: string
+
+  /** Tag size */
+  size: ElementUIComponentSize
+
+  /** Tag theme */
+  effect: TagTheme
+}

types/time-picker.d.ts

@@ -0,0 +1,63 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+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
+}
+
+/** TimePicker 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
+
+  /** Placeholder for the start time in range mode */
+  startPlaceholder: string
+
+  /** Placeholder for the end time in range mode */
+  endPlaceholder: string
+
+  /** Whether to pick a time range */
+  isRange: boolean
+
+  /** 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: TimePickerOptions
+
+  /** Range separator */
+  rangeSeparator: string
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}

types/time-select.d.ts

@@ -0,0 +1,56 @@
+import { ElementUIComponent, ElementUIComponentSize, ElementUIHorizontalAlignment } from './component'
+
+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
+}
+
+/** TimeSelect Component */
+export declare class ElTimeSelect 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: TimeSelectOptions
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}

types/timeline-item.d.ts

@@ -0,0 +1,20 @@
+import { ElementUIComponent } from './component'
+
+export type TimelineItemPlacement = 'top' | 'bottom'
+export type TimelineItemType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type TimelineItemSize = 'normal' | 'large'
+
+/** TimelineItem Component */
+export declare class ElTimelineItem extends ElementUIComponent {
+  timestamp: string
+
+  hideTimestamp: boolean
+
+  placement: TimelineItemPlacement
+
+  type: TimelineItemType
+
+  size: TimelineItemSize
+
+  icon: string
+}

types/timeline.d.ts

@@ -0,0 +1,6 @@
+import { ElementUIComponent } from './component'
+
+/** Timeline Component */
+export declare class ElTimeline extends ElementUIComponent {
+  reverse: boolean
+}

types/tooltip.d.ts

@@ -0,0 +1,52 @@
+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 */
+  popperOptions: 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
+
+  /** Whether the mouse can enter the tooltip	 */
+  enterable: string
+
+  /** Timeout in milliseconds to hide tooltip */
+  hideAfter: string
+
+  /** Tooltip tabindex */
+  tabindex: number
+}

types/transfer.d.ts

@@ -0,0 +1,73 @@
+import { CreateElement, VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type TransferPanelPosition = 'left' | 'right'
+
+export interface TransferData {
+  key: any,
+  label: string,
+  disabled: boolean
+}
+
+export interface TransferFormat {
+  noChecked: string,
+  hasChecked: string,
+}
+
+export interface TransferProps {
+  key: string,
+  label: string,
+  disabled: string
+}
+
+export interface TransferRenderContent {
+  /**
+   * Render function for a specific option
+   *
+   * @param h The render function
+   * @param option The option data object
+   */
+  (h: CreateElement, option: TransferData): VNode
+}
+
+/** Transfer Component */
+export declare class ElTransfer extends ElementUIComponent {
+  /** Data source */
+  data: TransferData[]
+
+  /** Whether Transfer is filterable */
+  filterable: boolean
+
+  /** Placeholder for the filter input */
+  filterPlaceholder: string
+
+  /** Custom filter method */
+  filterMethod: (query: string, item: TransferData) => boolean
+
+  /** Order strategy for elements in the target list */
+  targetOrder: string
+
+  /** Custom list titles */
+  titles: string[]
+
+  /** Custom button texts */
+  buttonTexts: string[]
+
+  /** Custom render function for data items */
+  renderContent: TransferRenderContent
+
+  /** Texts for checking status in list header */
+  format: TransferFormat
+
+  /** Prop aliases for data source */
+  props: TransferProps
+
+  /** Key array of initially checked data items of the left list */
+  leftDefaultChecked: any[]
+
+  /** Key array of initially checked data items of the right list */
+  rightDefaultChecked: any[]
+
+  /** Clear the query text in specified panel */
+  clearQuery (which: TransferPanelPosition): void
+}

types/tree.d.ts

@@ -0,0 +1,266 @@
+import { CreateElement, VNode } from 'vue';
+import { ElementUIComponent } from './component';
+
+export interface TreeData {
+  id?: any;
+  label?: string;
+  disabled?: boolean;
+  isLeaf?: boolean;
+  children?: TreeData[];
+}
+
+export interface TreeProps {
+  label: string;
+  disabled: string;
+  isLeaf: string;
+  children: string;
+}
+
+export interface TreeNode<K, D> {
+  checked: boolean;
+  childNodes: TreeNode<K, D>[];
+  data: D;
+  expanded: boolean;
+  id: number;
+  indeterminate: boolean;
+  isLeaf: boolean;
+  level: number;
+  loaded: boolean;
+  loading: boolean;
+  parent: TreeNode<K, D> | null;
+  store: any;
+  visible: boolean;
+  disabled: boolean;
+  icon: string;
+  key: K;
+  label: string;
+  nextSibling: TreeNode<K, D> | null;
+  previousSibling: TreeNode<K, D> | null;
+  isCurrent: boolean;
+}
+
+/** incomplete, you can convert to any to use other properties */
+export interface TreeStore<K, D> {
+  _getAllNodes: () => TreeNode<K, D>[];
+}
+
+/** Tree Component */
+export declare class ElTree<K, D extends TreeData> extends ElementUIComponent {
+  /** TreeStore */
+  store: TreeStore<K, D>;
+
+  /** Tree data */
+  data: D[];
+
+  /** 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: TreeProps;
+
+  /** Method for loading subtree data */
+  load: (data: D, resolve: Function) => void;
+
+  /**
+   * Render function for a specific node
+   *
+   * @param h The render function
+   */
+  renderContent: (h: CreateElement, context: { node: TreeNode<K, D>; data: D; store: TreeStore<K, D> }) => VNode;
+
+  /** Whether current node is highlighted */
+  highlightCurrent: boolean;
+
+  /** 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 check or uncheck node when clicking on the node, if false, the node can only be checked or unchecked by clicking on the checkbox. */
+  checkOnClickNode: boolean;
+
+  /** Whether to expand father node when a child node is expanded */
+  autoExpandParent: boolean;
+
+  /** Array of keys of initially expanded nodes */
+  defaultExpandedKeys: K[];
+
+  /** 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: K[];
+
+  /**
+   * This function will be executed on each node when use filter method. If return false, tree node will be hidden.
+   *
+   * @param value The query string
+   * @param data The original data object
+   * @param node Tree node
+   */
+  filterNodeMethod: (value: string, data: D, node: TreeNode<K, D>) => boolean;
+
+  /** 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;
+
+  /** Whether enable tree nodes drag and drop */
+  draggable: boolean;
+
+  /**
+   * Function to be executed before dragging a node
+   *
+   * @param node The node to be dragged
+   */
+  allowDrag: (node: TreeNode<K, D>) => boolean;
+
+  /**
+   * Function to be executed before the dragging node is dropped
+   *
+   * @param draggingNode The dragging node
+   * @param dropNode The target node
+   * @param type Drop type
+   */
+  allowDrop: (draggingNode: TreeNode<K, D>, dropNode: TreeNode<K, D>, type: 'prev' | 'inner' | 'next') => boolean;
+
+  /**
+   * Filter all tree nodes. Filtered nodes will be hidden
+   *
+   * @param value The value to be used as first parameter for `filter-node-method`
+   */
+  filter(value: any): void;
+
+  /**
+   * Update the children of the node which specified by the key
+   *
+   * @param key the key of the node which children will be updated
+   * @param data the children data
+   */
+  updateKeyChildren(key: K, data: D[]): void;
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes
+   *
+   * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes
+   * @param includeHalfChecked If the `includeHalfChecked` is `true`, the return value contains halfchecked nodes
+   */
+  getCheckedNodes(leafOnly?: boolean, includeHalfChecked?: boolean): D[];
+
+  /**
+   * 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(data: D[], leafOnly?: boolean): void;
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes' keys
+   *
+   * @param leafOnly If the `leafOnly` is `true`, it only returns the currently selected array of sub-nodes
+   */
+  getCheckedKeys(leafOnly?: boolean): K[];
+
+  /**
+   * 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: K[], 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: D | K, checked: boolean, deep: boolean): void;
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes
+   */
+  getHalfCheckedNodes(): D[];
+
+  /**
+   * If the node can be selected (`show-checkbox` is `true`), it returns the currently half selected array of nodes' keys
+   */
+  getHalfCheckedKeys(): K[];
+
+  /**
+   * Return the highlight node's key (null if no node is highlighted)
+   */
+  getCurrentKey(): K;
+
+  /**
+   * Set highlighted node by key, only works when node-key is assigned
+   *
+   * @param key The node's key to be highlighted
+   */
+  setCurrentKey(key: K): void;
+
+  /**
+   * Return the highlight node data (null if no node is highlighted)
+   * @todo the name of methods should be getCurrentNodeData
+   */
+  getCurrentNode(): D;
+
+  /**
+   * Set highlighted node, only works when node-key is assigned
+   *
+   * @param node The node to be highlighted
+   */
+  setCurrentNode(data: D): void;
+
+  /**
+   * Get node by node key or node data
+   *
+   * @param by node key or node data
+   */
+  getNode(by: D | K): TreeNode<K, D>;
+
+  /**
+   * Remove node by key or node data or node instance
+   *
+   * @param by key or node data or node instance
+   */
+  remove(by: D | K): void;
+
+  /**
+   * Append a child node to specified node
+   *
+   * @param childData the data of appended node
+   * @param parent key or node data or node instance of the parent node
+   */
+  append(childData: D, parent: D | K): void;
+
+  /**
+   * insert a node before specified node
+   *
+   * @param data the data of inserted node
+   * @param ref key or node data or node instance of the reference node
+   */
+  insertBefore(data: D, ref: D | K): void;
+
+  /**
+   * insert a node after specified node
+   *
+   * @param data the data of inserted node
+   * @param ref key or node data or node instance of the reference node
+   */
+  insertAfter(data: D, ref: D | K): void;
+
+  /** Custom tree node icon */
+  iconClass?: string;
+
+}

types/upload.d.ts

@@ -0,0 +1,124 @@
+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 ElUploadInternalRawFile extends File {
+  uid: number
+}
+
+export interface ElUploadInternalFileDetail {
+  status: FileUploadStatus,
+  name: string,
+  size: number,
+  percentage: number,
+  uid: number,
+  raw: ElUploadInternalRawFile,
+  url?: string
+}
+
+export interface ElUploadProgressEvent extends ProgressEvent {
+  percent: number
+}
+
+export interface HttpRequestOptions {
+  headers: object,
+  withCredentials: boolean,
+  file: File,
+  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 */
+  showFileList: 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: ElUploadInternalRawFile) => boolean | Promise<File | Blob | 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
+
+  /** Whether to disable upload */
+  disabled: boolean
+
+  /** Maximum number of uploads allowed */
+  limit: number
+
+  /** Hook function when limit is exceeded */
+  onExceed: (file: ElUploadInternalFileDetail, fileList: ElUploadInternalFileDetail[]) => void
+
+  /** Clear the upload file list */
+  clearFiles (): void;
+
+  /** Abort specified file */
+  abort (file: ElUploadInternalFileDetail): void
+
+  /** Upload the file list manually */
+  submit ():void;
+}