element-sim 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

package/types/result.d.ts

@@ -0,0 +1,33 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+interface ElResultSlots {
+  /* title slot: custom title */
+  title: VNode[]
+
+  /* icon slot: custom icon */
+  icon: VNode[]
+
+  /* subTitle slot: custom sub title */
+  subTitle: VNode[]
+
+  /* extra slot: custom extra area, display on the top right */
+  extra: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Used to give feedback on the result of user's operation or access exception. **/
+export declare class ElResult extends ElementUIComponent {
+
+  /* title */
+  title: string
+
+  /* sub title */
+  subTitle: string
+
+  /* icon type */
+  icon: 'success' | 'warning' | 'info' | 'error'
+
+  $slots: ElResultSlots
+}

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

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

package/types/skeleton-item.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Skeleton Item Component */
+export declare class ElSkeletonItem extends ElementUIComponent {
+  /** The current rendering skeleton type; default: text */ 
+  variant: 'p' | 'text' |  'h1' | 'h3' |  'text' | 'caption' | 'button' | 'image' | 'circle' | 'rect'
+}