rw-admin-ui 1.0.0

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

package/types/dialog.d.ts

@@ -0,0 +1,62 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export interface DialogSlots {
+  /** Content of the Dialog */
+  default: VNode[],
+
+  /** Content of the Dialog title */
+  title: VNode[],
+
+  /** Content of the Dialog footer */
+  footer: VNode[],
+
+  [key: string]: VNode[]
+}
+
+/** Informs users while preserving the current page state */
+export declare class ElDialog extends ElementUIComponent {
+  /** Title of Dialog */
+  title: string
+
+  /** Width of Dialog */
+  width: string
+
+  /** Whether the Dialog takes up full screen */
+  fullscreen: boolean
+
+  /** Value for margin-top of Dialog CSS */
+  top: string
+
+  /** Whether a mask is displayed */
+  modal: boolean
+
+  /** Whether to append modal to body element. If false, the modal will be appended to Dialog's parent element */
+  modalAppendToBody: boolean
+
+  /** Whether scroll of body is disabled while Dialog is displayed */
+  lockScroll: boolean
+
+  /** Custom class names for Dialog */
+  customClass: string
+
+  /** Whether the Dialog can be closed by clicking the mask */
+  closeOnClickModal: boolean
+
+  /** Whether the Dialog can be closed by pressing ESC */
+  closeOnPressEscape: boolean
+
+  /** Whether to show a close button */
+  showClose: boolean
+
+  /** Callback before Dialog closes, and it will prevent Dialog from closing */
+  beforeClose: (done: Function) => void
+
+  /** Whether to align the header and footer in center */
+  center: boolean
+
+  /** Whether to destroy elements in Dialog when closed */
+  destroyOnClose: boolean
+
+  $slots: DialogSlots
+}

package/types/divider.d.ts

@@ -0,0 +1,12 @@
+import { ElementUIComponent } from './component'
+
+export type ContentPosition = 'left' | 'center' | 'right'
+
+/** Divider Component */
+export declare class ElDivider extends ElementUIComponent {
+  /** enable vertical divider */
+  vertical: boolean
+
+  /** customize the content on the divider line */
+  posiiton: ContentPosition
+}

package/types/drawer.d.ts

@@ -0,0 +1,63 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+type hide = (shouldCancel: boolean) => void
+declare enum Direction {
+    LTR = 'ltr', // left to right
+    RTL = 'rtl', // right to left
+    TTB = 'ttb', // top to bottom
+    BTT = 'btt' // bottom to top
+}
+
+interface DrawerSlots {
+    /* Main Content Slots */
+    default: VNode[];
+
+    /* Title Slots */
+    title: VNode[];
+
+    [key: string]: VNode[]
+}
+/** Drawer Component */
+export declare class ElDrawer extends ElementUIComponent {
+    /* Equivalent to `Dialog`'s append to body attribute, when applying nested drawer, make sure this one is set to true */
+    appendToBody: boolean
+
+    /* Hook method called before close drawer, the first parameter is a function which should determine if the drawer should be closed */
+    beforeClose: (done: hide) => void
+
+    /** Whether the Drawer can be closed by pressing ESC */
+    closeOnPressEscape: boolean
+
+    /** Custom class names for Dialog */
+    customClass: string
+
+    /* Determine whether the wrapped children should be destroyed, if true, children's destroyed life cycle method will be called all local state will be destroyed */
+    destroyOnClose: boolean
+
+    /* Equivalent to `Dialog`'s modal attribute, determines whether the dark shadowing background should show */
+    modal: boolean
+
+    /* Equivalent to `Dialog`'s modal-append-to-body attribute, determines whether the shadowing background should be inserted direct to DocumentBody element */
+    modalAppendToBody: boolean
+
+    /* Attributes that controls the drawer's direction of display*/
+    position: Direction
+
+    /* Whether the close button should be rendered to control the drawer's visible state */
+    showClose: boolean
+
+    /* The size of the drawer component, supporting number with unit of pixel, string by percentage e.g. 30% */
+    size: number | string
+
+    /* The Drawer's title, also can be replaced by named slot `title` */
+    title: string
+
+    /* Whether the drawer component should show, also can be decorated by `.sync` */
+    visible: boolean
+
+    /* Flag attribute whi */
+    wrapperClosable: boolean
+
+    $slots: DrawerSlots
+}

package/types/dropdown-item.d.ts

@@ -0,0 +1,16 @@
+import { ElementUIComponent } from './component'
+
+/** Toggleable menu for displaying lists of links and actions. */
+export declare class ElDropdownItem extends ElementUIComponent {
+  /** A command to be dispatched to Dropdown's command callback */
+  command: string | number | object
+
+  /** Whether the item is disabled */
+  disabled: boolean
+
+  /** Whether a divider is displayed */
+  divided: boolean
+
+  /** Icon to show on left side of text */
+  icon: string
+}

package/types/dropdown-menu.d.ts

@@ -0,0 +1,4 @@
+import { ElementUIComponent } from './component'
+
+/** Dropdown Menu Component */
+export declare class ElDropdownMenu extends ElementUIComponent {}

package/types/dropdown.d.ts

@@ -0,0 +1,38 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+import { ButtonType } from './button'
+
+export type DropdownMenuAlignment = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+export type DropdownMenuTrigger = 'hover' | 'click'
+
+/** Toggleable menu for displaying lists of links and actions */
+export declare class ElDropdown extends ElementUIComponent {
+  /** Menu button type. only works when split-button is true */
+  type: ButtonType
+
+  /** Whether a button group is displayed */
+  splitButton: boolean
+
+  /** menu size, also works on the split button */
+  size: ElementUIComponentSize
+
+  /** Placement of the menu */
+  placement: DropdownMenuAlignment
+
+  /** How to trigger */
+  trigger: DropdownMenuTrigger
+
+  /** Whether to hide menu after clicking menu-item */
+  hideOnClick: boolean
+
+  /** Delay time before show a dropdown */
+  showTimeout: number
+
+  /** Delay time before hide a dropdown */
+  hideTimeout: number
+
+  /** Dropdown tabindex */
+  tabindex: number
+
+  /** Whether Dropdown is disabled */
+  disabled: boolean
+}

package/types/empty.d.ts

@@ -0,0 +1,31 @@
+import { ElementUIComponent } from './component'
+import { VNode } from 'vue'
+
+interface ELEmptySlots {
+  /* default slot:  Custom bottom content */
+  default: VNode[]
+
+  /* image slot: Custom image */
+  image: VNode[]
+
+  /* description slot: Custom description */
+  description: VNode[]
+
+
+  [key: string]: VNode[]
+}
+
+/** Placeholder hints for empty states. */
+export declare class ElEmpty extends ElementUIComponent {
+  /* image URL */
+  image: string
+  	
+  /* image size (width) */
+  imageSize: number
+  
+  /* description */
+  description: string
+
+  $slots: ELEmptySlots
+
+}

package/types/footer.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Footer Component */
+export declare class ElFooter extends ElementUIComponent {
+  /** Height of the footer */
+  height: string
+}

package/types/form-item.d.ts

@@ -0,0 +1,40 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+/** FormItem Component */
+export declare class ElFormItem extends ElementUIComponent {
+  /** A key of `model` of the enclosing `el-form` component */
+  prop: string
+
+  /** Label */
+  label: string
+
+  /** Width of label, e.g. '50px' */
+  labelWidth: string
+
+  /** Custom label style */
+  labelStyle: object
+
+  /** Whether the field is required or not, will be determined by validation rules if omitted */
+  required: boolean
+
+  /** Validation rules of form */
+  rules: object
+
+  /** Field error message, set its value and the field will validate error and show this message immediately */
+  error: string
+
+  /** Whether to show the error message */
+  showMessage: boolean
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
+  /** Reset current field and remove validation result */
+  resetField (): void
+
+  /** Remove validation status of the field */
+  clearValidate (): void
+}

package/types/form.d.ts

@@ -0,0 +1,82 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export type FormItemLabelPosition = 'left' | 'right' | 'top'
+
+export interface ValidateCallback {
+  /**
+   * The callback to tell the validation result
+   *
+   * @param isValid Whether the form is valid
+   * @param invalidFields fields that fail validation
+   */
+  (isValid: boolean, invalidFields: object): void
+}
+
+export interface ValidateFieldCallback {
+  /**
+   * The callback to tell the field validation result
+   *
+   * @param errorMessage The error message. It will be empty if there is no error
+   */
+  (errorMessage: string): void
+}
+
+/** Form Component */
+export declare class ElForm extends ElementUIComponent {
+  /** Data of form component */
+  model: object
+
+  /** Validation rules of form */
+  rules: object
+
+  /** Whether the form is inline */
+  inline: boolean
+
+  /** Whether the form is disabled */
+  disabled: boolean
+
+  /** Position of label */
+  labelPosition: FormItemLabelPosition
+
+  /** Width of label, and all form items will inherit from Form */
+  labelWidth: string
+
+  /** Suffix of the label */
+  labelSuffix: string
+
+  /** Whether to show the error message */
+  showMessage: boolean
+
+  /** Whether to display the error message inline with the form item */
+  inlineMessage: boolean
+
+  /** Whether to display an icon indicating the validation result */
+  statusIcon: boolean
+
+  /** Whether to trigger validation when the `rules` prop is changed */
+  validateOnRuleChange: boolean
+
+  /** Controls the size of components in this form */
+  size: ElementUIComponentSize
+
+  /**
+   * Validate the whole form
+   *
+   * @param callback A callback to tell the validation result
+   */
+  validate (callback: ValidateCallback): void
+  validate (): Promise<boolean>
+  /**
+   * Validate certain form items
+   *
+   * @param props The property of `model` or array of prop which is going to validate
+   * @param callback A callback to tell the field validation result
+   */
+  validateField (props: string | string[], callback?: ValidateFieldCallback): void
+
+  /** reset all the fields and remove validation result */
+  resetFields (): void
+
+  /** clear validation message for certain fields */
+  clearValidate (props?: string | string[]): void
+}

package/types/header.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Header Component */
+export declare class ElHeader extends ElementUIComponent {
+  /** Height of the header */
+  height: string
+}

package/types/icon.d.ts

@@ -0,0 +1,7 @@
+import { ElementUIComponent } from './component'
+
+/** Icon Component */
+export declare class ElIcon extends ElementUIComponent {
+  /** Icon name */
+  name: string  
+}

package/types/image.d.ts

@@ -0,0 +1,43 @@
+import { VNode } from 'vue'
+import { ElementUIComponent } from './component'
+
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
+
+export interface ImageSlots {
+  /** Placeholder content when image hasn't loaded yet */
+  placeholder: VNode[]
+
+  /** Error content when error occurs to image load */
+  error: VNode[]
+
+  [key: string]: VNode[]
+}
+
+/** Image Component */
+export declare class ElImage extends ElementUIComponent {
+  /** Image source */
+  src: string
+
+  /** Indicate how the image should be resized to fit its container, same as native 'object-fit' */
+  fit: ObjectFit
+
+  /** Whether to use lazy load */
+  lazy: boolean
+
+  /** Scroll container that to add scroll listener when using lazy load */
+  scrollContainer: string | HTMLElement
+
+  /** Native 'alt' attribute */
+  alt: string
+
+  /** Native 'referrerPolicy' attribute */
+  referrerPolicy: string
+
+  $slots: ImageSlots
+
+  previewSrcList: string[]
+
+  zIndex: number
+
+  initialIndex: number
+}

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './rowinself-ui';
+
+import * as ElementUI from './rowinself-ui';
+export default ElementUI;

package/types/infinite-scroll.d.ts

@@ -0,0 +1,6 @@
+import { VNodeDirective } from 'vue'
+
+export interface ElInfiniteScroll extends VNodeDirective {
+  name: 'infinite-scroll',
+  value: Function
+}