@penggy/element-ui 2.4.11

package/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
+
+  /** 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[]
+}

package/types/table.d.ts

@@ -0,0 +1,157 @@
+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
+}
+
+/** Table Component */
+export declare class ElTable extends ElementUIComponent {
+  /** Table data */
+  data: object[]
+
+  /** Table's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles */
+  height: string | number
+
+  /** Table's max-height. The height of the table starts from auto until it reaches the maxHeight limit. The maxHeight is measured in pixels, same as height */
+  maxHeight: string | number
+
+  /** Whether table is striped */
+  stripe: boolean
+
+  /** Whether table has vertical border */
+  border: boolean
+
+  /** Whether width of column automatically fits its container */
+  fit: boolean
+
+  /** Whether table header is visible */
+  showHeader: boolean
+
+  /** Whether current row is highlighted */
+  highlightCurrentRow: boolean
+
+  /** Key of current row, a set only prop */
+  currentRowKey: string | number
+
+  /** Function that returns custom class names for a row, or a string assigning class names for every row */
+  rowClassName: string | ((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
+}

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

package/types/tag.d.ts

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

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

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

package/types/tooltip.d.ts

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

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