kh-one-ui 2.0.0

package/types/drawer.d.ts

@@ -0,0 +1,63 @@
+import { OneUIComponent } 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 OneUIComponent {
+    /* 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 { OneUIComponent } from './component'
+
+/** Toggleable menu for displaying lists of links and actions. */
+export declare class ElDropdownItem extends OneUIComponent {
+  /** 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 { OneUIComponent } from './component'
+
+/** Dropdown Menu Component */
+export declare class ElDropdownMenu extends OneUIComponent {}

package/types/dropdown.d.ts

@@ -0,0 +1,35 @@
+import { OneUIComponent, OneUIComponentSize } 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 OneUIComponent {
+  /** 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: OneUIComponentSize
+
+  /** 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
+}

package/types/footer.d.ts

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

package/types/form-item.d.ts

@@ -0,0 +1,37 @@
+import { OneUIComponent, OneUIComponentSize } from './component'
+
+/** FormItem Component */
+export declare class ElFormItem extends OneUIComponent {
+  /** A key of `model` of the enclosing `el-form` component */
+  prop: string
+
+  /** Label */
+  label: string
+
+  /** Width of label, e.g. '50px' */
+  labelWidth: string
+
+  /** 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: OneUIComponentSize
+
+  /** 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 { OneUIComponent, OneUIComponentSize } 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 OneUIComponent {
+  /** 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: OneUIComponentSize
+
+  /**
+   * 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 { OneUIComponent } from './component'
+
+/** Header Component */
+export declare class ElHeader extends OneUIComponent {
+  /** Height of the header */
+  height: string
+}

package/types/icon.d.ts

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

package/types/image.d.ts

@@ -0,0 +1,41 @@
+import { VNode } from 'vue'
+import { OneUIComponent } 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 OneUIComponent {
+  /** 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
+}

package/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './one-ui'
+
+import * as OneUI from './one-ui'
+export default OneUI

package/types/infinite-scroll.d.ts

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

package/types/input-number.d.ts

@@ -0,0 +1,47 @@
+import { OneUIComponent } from './component'
+
+export type InputNumberSize = 'large' | 'small'
+
+/** InputNumber Component */
+export declare class ElInputNumber extends OneUIComponent {
+  /** Binding value */
+  value: number
+
+  /** The minimum allowed value */
+  min: number
+
+  /** The maximum allowed value */
+  max: number
+
+  /** Incremental step */
+  step: number
+
+  /** Size of the component */
+  size: InputNumberSize
+
+  /** Whether the component is disabled */
+  disabled: boolean
+
+  /** Whether to enable the control buttons */
+  controls: boolean
+
+  /** Debounce delay when typing, in milliseconds */
+  debounce: number
+
+  /** Position of the control buttons */
+  controlsPosition: string
+
+  /** Same as name in native input */
+  name: string
+
+  /** Precision of input value */
+  precision: number
+
+  /** whether input value can only be multiple of step */
+  stepStrictly: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+}

package/types/input.d.ts

@@ -0,0 +1,107 @@
+import { OneUIComponent, OneUIComponentSize } from './component'
+
+/** The resizability of el-input component */
+export type Resizability = 'none' | 'both' | 'horizontal' | 'vertical'
+export type InputType = 'text' | 'textarea'
+
+/** Controls how el-input component automatically sets size */
+export interface AutoSize {
+  /** Minimum rows to show */
+  minRows: number,
+
+  /** Maximum rows to show */
+  maxRows: number
+}
+
+/** Input Component */
+export declare class ElInput extends OneUIComponent {
+  /** Type of input */
+  type: InputType
+
+  /** Binding value */
+  value: string | number
+
+  /** Maximum Input text length */
+  maxlength: number
+
+  /** Minimum Input text length */
+  minlength: number
+
+  /** Placeholder of Input */
+  placeholder: string
+
+  /** Whether Input is disabled */
+  disabled: boolean
+
+  /** Size of Input, works when type is not 'textarea' */
+  size: OneUIComponentSize
+
+  /** Prefix icon class */
+  prefixIcon: string
+
+  /** Suffix icon class */
+  suffixIcon: string
+
+  /** Number of rows of textarea, only works when type is 'textarea' */
+  rows: number
+
+  /** Whether textarea has an adaptive height, only works when type is 'textarea' */
+  autosize: boolean | AutoSize
+
+  /** @Deprecated in next major version */
+  autoComplete: string
+
+  /** Same as autocomplete in native input */
+  autocomplete: string
+
+  /** Same as name in native input */
+  name: string
+
+  /** Same as readonly in native input */
+  readonly: boolean
+
+  /** Same as max in native input */
+  max: any
+
+  /** Same as min in native input */
+  min: any
+
+  /** Same as step in native input */
+  step: any
+
+  /** Control the resizability */
+  resize: Resizability
+
+  /** Same as autofocus in native input */
+  autofocus: boolean
+
+  /** Same as form in native input */
+  form: string
+
+  /** Whether to trigger form validatio */
+  validateEvent: boolean
+
+  /** Whether the input is clearable */
+  clearable: boolean
+
+  /** Whether to show password */
+  showPassword: boolean
+
+  /** Whether to show wordCount when setting maxLength */
+  showWordLimit: boolean
+
+  /**
+   * Focus the Input component
+   */
+  focus (): void
+
+  /**
+   * Blur the Input component
+   */
+  blur (): void
+
+  /**
+   * Select the text in input element
+   */
+  select (): void
+}

package/types/link.d.ts

@@ -0,0 +1,25 @@
+import { OneUIComponent } from './component'
+
+/** Button type */
+export type LinkType = 'primary' | 'success' | 'warning' | 'danger' | 'info' 
+
+/** Link Component */
+export declare class ElLink extends OneUIComponent {
+  /** Link type */
+  type: LinkType
+  
+  /** Disable the link */
+  disabled: boolean
+
+  /** Link underline */
+  underline: boolean
+
+  /** Link icon, accepts an icon name of Element icon component */
+  icon: string
+
+  /** Link href */
+  href: string
+
+  /** Link target */
+  target: string
+}

package/types/loading.d.ts

@@ -0,0 +1,62 @@
+import Vue, { VNodeDirective, PluginObject } from 'vue'
+
+/** Options used in Loading service */
+export interface LoadingServiceOptions {
+  /** The DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node */
+  target?: HTMLElement | string
+
+  /** Whether to make the mask append to the body element */
+  body?: boolean
+
+  /** Whether to show the loading mask in fullscreen */
+  fullscreen?: boolean
+
+  /** Whether to disable scrolling on body */
+  lock?: boolean
+
+  /** Loading text that displays under the spinner */
+  text?: string
+
+  /** Class name of the custom spinner */
+  spinner?: string
+
+  /** Background color of the mask */
+  background?: string
+
+  /** Custom class name for Loading */
+  customClass?: string
+}
+
+/** Loading Component */
+export declare class ElLoadingComponent extends Vue {
+  /** Close the Loading instance */
+  close (): void
+}
+
+/** Loading directive definition */
+export interface ElLoadingDirective extends VNodeDirective {
+  name: 'loading',
+  value: boolean,
+  modifiers: {
+    body: boolean,
+    fullscreen: boolean
+  }
+}
+
+/** Show animation while loading data */
+export interface ElLoading {
+  /** Install Loading directive into Vue */
+  install (vue: typeof Vue): void
+
+  /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
+  service (options: LoadingServiceOptions): ElLoadingComponent
+
+  directive: PluginObject<never>
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
+    $loading (options: LoadingServiceOptions): ElLoadingComponent
+  }
+}

package/types/main.d.ts

@@ -0,0 +1,4 @@
+import { OneUIComponent } from './component'
+
+/** Main Component */
+export declare class ElMain extends OneUIComponent {}

package/types/menu-item-group.d.ts

@@ -0,0 +1,7 @@
+import { OneUIComponent } from './component'
+
+/** Menu Item Group Component */
+export declare class ElMenuItemGroup extends OneUIComponent {
+  /** Group title */
+  title: string
+}

package/types/menu-item.d.ts

@@ -0,0 +1,10 @@
+import { OneUIComponent } from './component'
+
+/** Menu Item Component */
+export declare class ElMenuItem extends OneUIComponent {
+  /** Unique identification */
+  index: string
+
+  /** Vue Router object */
+  route: object
+}

package/types/menu.d.ts

@@ -0,0 +1,46 @@
+import { OneUIComponent } from './component'
+
+export type MenuDisplayMode = 'horizontal' | 'vertical'
+export type MenuTheme = 'light' | 'dark'
+
+/** Menu that provides navigation for your website */
+export declare class ElMenu extends OneUIComponent {
+  /** Menu display mode */
+  mode: MenuDisplayMode
+
+  /** Whether the menu is collapsed (available only in vertical mode) */
+  collapse: boolean
+
+  /** Background color of Menu (hex format) */
+  backgroundColor: string
+
+  /** Text color of Menu (hex format) */
+  textColor: string
+
+  /** Text color of currently active menu item (hex format) */
+  activeTextColor: string
+
+  /** Index of currently active menu */
+  defaultActive: string
+
+  /** Array that contains keys of currently active sub-menus */
+  defaultOpeneds: string[]
+
+  /** Whether only one sub-menu can be active */
+  uniqueOpened: boolean
+
+  /** How sub-menus are triggered, only works when mode is 'horizontal' */
+  menuTrigger: string
+
+  /** Whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action */
+  router: boolean
+
+  /** Whether the menu collapse transition is active */
+  collapseTransition: boolean
+  
+  /** Open the specified sub-menu */
+  open (index: string): void
+
+  /** Close the specified sub-menu */
+  close (index: string): void
+}