rw-admin-ui 1.0.0

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

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

package/types/timeline.d.ts

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

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