element-sim 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

package/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'

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

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

package/types/descriptions-item.d.ts

@@ -0,0 +1,37 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+interface ElDescriptionsItemSlots {
+  /* label slot: custom label */
+  label: VNode[]
+
+  /* default slot: custom content */
+  default: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** description item. **/
+export declare class ElDescriptionsItem extends ElementUIComponent {
+
+  /* label text */
+  label: string
+
+  /*  the number of columns included */
+  span: number 
+
+  /* custom label class name */
+  labelClassName: string
+
+  /* custom content class name */
+  contentClassName: string
+
+  /* custom label style */
+  labelStyle: object
+
+  /* custom content style */
+  contentStyle: object
+
+  $slots: ElDescriptionsItemSlots
+
+}

package/types/descriptions.d.ts

@@ -0,0 +1,52 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+interface ElDescriptionsSlots {
+  /* title slot: custom title, display on the top left */
+  title: VNode[]
+
+  /* title slot: custom extra area, display on the top right */
+  extra: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Display multiple fields in list form. **/
+export declare class ElDescriptions extends ElementUIComponent {
+
+  /* with or without border */
+  border: boolean
+  
+  /* numbers of Descriptions Item in one line */
+  column: number
+
+  /* direction of list */
+  direction: 'vertical' | 'horizontal'
+
+  /* size of list */
+  size: 'medium' | 'small' | 'mini'
+
+  /* title text, display on the top left */
+  title: string
+
+  /* extra text, display on the top right */
+  extra: string
+
+  /* change default props colon value of Descriptions Item */
+  colon: boolean
+
+  /* custom label class name */
+  labelClassName: string
+
+  /* custom content class name */
+  contentClassName: string
+
+  /* custom label style */
+  labelStyle: object
+
+  /* custom content style */
+  contentStyle: object
+
+  $slots: ElDescriptionsSlots
+
+}