kh-one-ui 2.0.0

package/types/message-box.d.ts

@@ -0,0 +1,176 @@
+import Vue, { VNode } from 'vue'
+import { MessageType } from './message'
+
+export type MessageBoxCloseAction = 'confirm' | 'cancel' | 'close'
+export type MessageBoxData = MessageBoxInputData | MessageBoxCloseAction
+
+export interface MessageBoxInputData {
+  value: string,
+  action: MessageBoxCloseAction
+}
+
+export interface MessageBoxInputValidator {
+  (value: string): boolean | string
+}
+
+export declare class ElMessageBoxComponent extends Vue {
+  title: string
+  message: string
+  type: MessageType
+  iconClass: string
+  customClass: string
+  showInput: boolean
+  showClose: boolean
+  inputValue: string
+  inputPlaceholder: string
+  inputType: string
+  inputPattern: RegExp
+  inputValidator: MessageBoxInputValidator
+  inputErrorMessage: string
+  showConfirmButton: boolean
+  showCancelButton: boolean
+  action: MessageBoxCloseAction
+  dangerouslyUseHTMLString: boolean
+  confirmButtonText: string
+  cancelButtonText: string
+  confirmButtonLoading: boolean
+  cancelButtonLoading: boolean
+  confirmButtonClass: string
+  confirmButtonDisabled: boolean
+  cancelButtonClass: string
+  editorErrorMessage: string
+}
+
+/** Options used in MessageBox */
+export interface ElMessageBoxOptions {
+  /** Title of the MessageBox */
+  title?: string
+
+  /** Content of the MessageBox */
+  message?: string | VNode
+
+  /** Message type, used for icon display */
+  type?: MessageType
+
+  /** Custom icon's class */
+  iconClass?: string
+
+  /** Custom class name for MessageBox */
+  customClass?: string
+
+  /** MessageBox closing callback if you don't prefer Promise */
+  callback?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent) => void
+
+  /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
+  beforeClose?: (action: MessageBoxCloseAction, instance: ElMessageBoxComponent, done: (() => void)) => void
+
+  /** Whether to lock body scroll when MessageBox prompts */
+  lockScroll?: boolean
+
+  /** Whether to show a cancel button */
+  showCancelButton?: boolean
+
+  /** Whether to show a confirm button */
+  showConfirmButton?: boolean
+
+  /** Whether to show a close button */
+  showClose?: boolean
+
+  /** Text content of cancel button */
+  cancelButtonText?: string
+
+  /** Text content of confirm button */
+  confirmButtonText?: string
+
+  /** Custom class name of cancel button */
+  cancelButtonClass?: string
+
+  /** Custom class name of confirm button */
+  confirmButtonClass?: string
+
+  /** Whether to align the content in center */
+  center?: boolean
+
+  /** Whether message is treated as HTML string */
+  dangerouslyUseHTMLString?: boolean
+
+  /** Whether to use round button */
+  roundButton?: boolean
+
+  /** Whether MessageBox can be closed by clicking the mask */
+  closeOnClickModal?: boolean
+
+  /** Whether MessageBox can be closed by pressing the ESC */
+  closeOnPressEscape?: boolean
+
+  /** Whether to close MessageBox when hash changes */
+  closeOnHashChange?: boolean
+
+  /** Whether to show an input */
+  showInput?: boolean
+
+  /** Placeholder of input */
+  inputPlaceholder?: string
+
+  /** Initial value of input */
+  inputValue?: string
+
+  /** Regexp for the input */
+  inputPattern?: RegExp
+
+  /** Input Type: text, textArea, password or number */
+  inputType?: string
+
+  /** Validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage */
+  inputValidator?: MessageBoxInputValidator
+
+  /** Error message when validation fails */
+  inputErrorMessage?: string
+
+  /** Whether to distinguish canceling and closing */
+  distinguishCancelAndClose?: boolean
+}
+
+export interface ElMessageBoxShortcutMethod {
+  (message: string, title: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>
+  (message: string, options?: ElMessageBoxOptions): Promise<MessageBoxData>
+}
+
+export interface ElMessageBox {
+  /** Show a message box */
+  (message: string, title?: string, type?: string): Promise<MessageBoxData>
+
+  /** Show a message box */
+  (options: ElMessageBoxOptions): Promise<MessageBoxData>
+
+  /** Show an alert message box */
+  alert: ElMessageBoxShortcutMethod
+
+  /** Show a confirm message box */
+  confirm: ElMessageBoxShortcutMethod
+
+  /** Show a prompt message box */
+  prompt: ElMessageBoxShortcutMethod
+
+  /** Set default options of message boxes */
+  setDefaults (defaults: ElMessageBoxOptions): void
+
+  /** Close current message box */
+  close (): void
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** Show a message box */
+    $msgbox: ElMessageBox
+
+    /** Show an alert message box */
+    $alert: ElMessageBoxShortcutMethod
+
+    /** Show a confirm message box */
+    $confirm: ElMessageBoxShortcutMethod
+
+    /** Show a prompt message box */
+    $prompt: ElMessageBoxShortcutMethod
+  }
+}

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 { OneUIComponent } from './component'
+
+/** Dropdown Select Option Group Component */
+export declare class ElOptionGroup extends OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+/** Dropdown Select Option Component */
+export declare class ElOption extends OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+/** PageHeader Component */
+export declare class ElPageHeader extends OneUIComponent {
+  /** title */
+  title: String
+
+  /** content */
+  content: String
+}

package/types/pagination.d.ts

@@ -0,0 +1,43 @@
+import { OneUIComponent } from './component'
+
+/** Pagination Component */
+export declare class ElPagination extends OneUIComponent {
+  /** 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 { OneUIComponent } 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 { OneUIComponent } 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 OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+export type ProgressType = 'line' | 'circle'
+export type ProgressStatus = 'success' | 'exception'
+
+/** Progress Component */
+export declare class ElProgress extends OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+/** Radio Button Component */
+export declare class ElRadioButton extends OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+export type RadioGroupSize = 'large' | 'small'
+
+/** Radio Group Component */
+export declare class ElRadioGroup extends OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+/** Radio Component */
+export declare class ElRadio extends OneUIComponent {
+  /** 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 { OneUIComponent } 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 OneUIComponent {
+  /** 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
+}