element-sim 1.0.0

package/types/skeleton.d.ts

@@ -0,0 +1,33 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+interface ElSkeletonSlots {
+  /* default slot:  Real rendering DOM */
+  default: VNode[]
+
+  /* template slot: Custom rendering skeleton template */
+  template: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** When loading data, and you need a rich experience for visual and interactions for your end users */
+export declare class ElSkeleton extends ElementUIComponent {
+  /** whether showing the animation; default: false */
+  animated: boolean
+
+  /** how many fake items to render to the DOM; default: 1 */
+  count: number
+
+  /** whether showing the skeleton; default true */
+  loading: boolean
+
+  /** numbers of the row, only useful when no template slot were given; default: 4 */
+  rows: boolean
+
+  /** Rendering delay in millseconds; default: 0 */
+  throttle: number
+
+  $slots: ElSkeletonSlots
+
+}

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

package/types/spinner.d.ts

@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Spinner Component */
+export declare class ElSpinner extends ElementUIComponent {
+  /** The type of spinner */
+  type: string
+  	
+  /** The radius of spinner */
+  radius: number
+  
+  /** The width of spinner */
+  strokeWidth: number
+
+  /** The color of spinner */
+  strokeColor: string
+}

package/types/statistic.d.ts

@@ -0,0 +1,37 @@
+import { ElementUIComponent } from './component'
+
+/** Statistic Component */
+export declare class ElStatistic extends ElementUIComponent {
+    /** Set the decimal point */
+    decimalSeparator: string
+
+    /** Sets the thousandth identifier */
+    groupSeparator: string
+
+    /** numerical precision */
+    precision: number
+
+    /** Numerical content */
+    value: string | number
+
+    /** Title of numerical value */
+    title: string | number
+
+    /** Whether to enable the countdown function */
+    timeIndices: boolean
+
+    /** Sets the style of the value */
+    valueStyle: object
+
+    /** Numeric content formatting countdown display */
+    format: string
+
+    /** Set the ratio */
+    rate: number
+
+    /** Set the suffix of the value */
+    suffix: string
+
+    /** Set the prefix of the value */
+    prefix: string
+}

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

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

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

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

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

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 | '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[]
+}

package/types/table.d.ts

@@ -0,0 +1,177 @@
+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
+
+  /** Whether selection row is highlighted */
+  highlightSelectionRow: 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
+}

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