quasar/dist/types/index.d.ts

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

// @ts-ignore
/// <reference types="@quasar/app" />
/// <reference types="@quasar/app-webpack" />
/// <reference types="@quasar/app-vite" />
import { App, Component, ComponentPublicInstance, VNode } from "vue";
import { ComponentConstructor, GlobalComponentConstructor } from "./ts-helpers";

export interface AddressbarColor {
  /**
   * Sets addressbar color (for browsers that support it)
   * @param hexColor Color in hex format
   */
  set: (hexColor: string) => void;
}

export interface AppFullscreen {
  /**
   * Does browser support it?
   */
  isCapable: boolean;
  /**
   * Is Fullscreen active?
   */
  isActive: boolean;
  /**
   * The DOM element used as root for fullscreen, otherwise 'null'
   */
  activeEl: Element | null;
  /**
   * Request going into Fullscreen (with optional target)
   * @param target Optional Element of target to request Fullscreen on
   * @returns A Promise which is resolved when transitioned to fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
   */
  request: (target?: Element) => Promise<void>;
  /**
   * Request exiting out of Fullscreen mode
   * @returns A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
   */
  exit: () => Promise<void>;
  /**
   * Request toggling Fullscreen mode (with optional target if requesting going into Fullscreen only)
   * @param target Optional Element of target to request Fullscreen on
   * @returns A Promise which is resolved when transitioned to / exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
   */
  toggle: (target?: Element) => Promise<void>;
}

export interface AppVisibility {
  /**
   * Does the app have user focus? Or the app runs in the background / another tab has the user's attention
   */
  appVisible: boolean;
}

export interface BottomSheet {
  /**
   * Creates an ad-hoc Bottom Sheet; Same as calling $q.bottomSheet(...)
   * @param opts Bottom Sheet options
   * @returns Chainable Object
   */
  create: (opts: {
    /**
     * CSS Class name to apply to the Dialog's QCard
     */
    class?: VueClassProp;
    /**
     * CSS style to apply to the Dialog's QCard
     */
    style?: VueStyleProp;
    /**
     * Title
     */
    title?: string;
    /**
     * Message
     */
    message?: string;
    /**
     * Array of Objects, each Object defining an action
     */
    actions?: {
      /**
       * CSS classes for this action
       */
      classes?: VueClassProp;
      /**
       * Style definitions to be attributed to this action element
       */
      style?: VueStyleProp;
      /**
       * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
       */
      icon?: string;
      /**
       * Path to an image for this action
       */
      img?: string;
      /**
       * Display img as avatar (round borders)
       */
      avatar?: boolean;
      /**
       * Action label
       */
      label?: string | number;
      /**
       * Any other custom props
       */
      [key: string]: any;
    }[];
    /**
     * Display actions as a grid instead of as a list
     */
    grid?: boolean;
    /**
     * Apply dark mode
     */
    dark?: boolean;
    /**
     * Put Bottom Sheet into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too
     */
    seamless?: boolean;
    /**
     * User cannot dismiss Bottom Sheet if clicking outside of it or hitting ESC key
     */
    persistent?: boolean;
  }) => DialogChainObject;
}

export interface Cookies {
  /**
   * Get cookie
   * @param name Cookie name
   * @returns Cookie value; Returns null if cookie not found
   */
  get: CookiesGetMethodType;
  /**
   * Get all cookies
   * @returns Object with cookie names (as keys) and their values
   */
  getAll: () => any;
  /**
   * Set cookie
   * @param name Cookie name
   * @param value Cookie value
   * @param options Cookie options
   */
  set: (
    name: string,
    value: string,
    options?: {
      /**
       * Cookie expires detail; If specified as Number, then the unit is days; If specified as String, it can either be raw stringified date or in Xd Xh Xm Xs format (see examples)
       */
      expires?: number | string | Date;
      /**
       * Cookie path
       */
      path?: string;
      /**
       * Cookie domain
       */
      domain?: string;
      /**
       * SameSite cookie option
       */
      sameSite?: "Lax" | "Strict" | "None";
      /**
       * Is cookie Http Only?
       */
      httpOnly?: boolean;
      /**
       * Is cookie secure? (https only)
       */
      secure?: boolean;
      /**
       * Raw string for other cookie options; To be used as a last resort for possible newer props that are currently not yet implemented in Quasar
       */
      other?: string;
    }
  ) => void;
  /**
   * Check if cookie exists
   * @param name Cookie name
   * @returns Does cookie exists or not?
   */
  has: (name: string) => boolean;
  /**
   * Remove a cookie
   * @param name Cookie name
   * @param options Cookie options
   */
  remove: (
    name: string,
    options?: {
      /**
       * Cookie path
       */
      path?: string;
      /**
       * Cookie domain
       */
      domain?: string;
    }
  ) => void;
  /**
   * For SSR usage only, and only on the global import (not on $q.cookies)
   * @param ssrContext SSR Context Object
   * @returns Cookie object (like $q.cookies) for SSR usage purposes
   */
  parseSSR: (ssrContext: any) => Cookies;
}

export interface Dark {
  /**
   * Is Dark mode active?
   */
  isActive: boolean;
  /**
   * Dark mode configuration (not status)
   */
  mode: boolean | "auto";
  /**
   * Set dark mode status
   * @param status Dark mode status
   */
  set: (status: boolean | "auto") => void;
  /**
   * Toggle dark mode status
   */
  toggle: () => void;
}

export interface Dialog {
  /**
   * Creates an ad-hoc Dialog; Same as calling $q.dialog(...)
   * @param opts Dialog options
   * @returns Chainable Object
   */
  create: (opts: QDialogOptions) => DialogChainObject;
}

export interface Loading {
  /**
   * Is Loading active?
   */
  isActive: boolean;
  /**
   * Activate and show
   * @param opts All props are optional
   * @returns Calling this function with no parameters hides the group; When called with one Object parameter then it updates the Loading group (specified properties are shallow merged with the group ones; note that group cannot be changed while updating and it is ignored)
   */
  show: (opts?: QLoadingShowOptions) => (props?: QLoadingUpdateOptions) => void;
  /**
   * Hide it
   * @param group Optional Loading group name to hide instead of hiding all groups
   */
  hide: (group?: string) => void;
  /**
   * Merge options into the default ones
   * @param opts Pick the subprop you want to define
   */
  setDefaults: (opts: {
    /**
     * Wait a number of millisecond before showing; Not worth showing for 100ms for example then hiding it, so wait until you're sure it's a process that will take some considerable amount of time
     */
    delay?: number;
    /**
     * Message to display
     */
    message?: string;
    /**
     * Default Loading group name
     * Default value: __default_quasar_group__
     */
    group?: string;
    /**
     * Spinner size (in pixels)
     */
    spinnerSize?: number;
    /**
     * Color name for spinner from the Quasar Color Palette
     */
    spinnerColor?: string;
    /**
     * Color name for text from the Quasar Color Palette
     */
    messageColor?: string;
    /**
     * Color name for background from the Quasar Color Palette
     */
    backgroundColor?: string;
    /**
     * One of the QSpinners
     */
    spinner?: Component;
    /**
     * Add a CSS class to easily customize the component
     */
    customClass?: string;
  }) => void;
}

export interface LoadingBar {
  /**
   * Is LoadingBar active?
   */
  isActive: boolean;
  /**
   * Notify bar you've started a background activity
   * @param speed Delay (in milliseconds) between bar progress increments
   */
  start: (speed?: number) => void;
  /**
   * Notify bar one background activity has finalized
   */
  stop: () => void;
  /**
   * Manually trigger a bar progress increment
   * @param amount Amount (0.0 < x < 1.0) to increment with
   */
  increment: (amount?: number) => void;
  /**
   * Set the inner QAjaxBar's props
   * @param props QAjaxBar component props
   */
  setDefaults: (props: any) => void;
}

export interface LocalStorage {
  /**
   * Check if storage item exists
   * @param key Entry key
   * @returns Does the item exists or not?
   */
  has: (key: string) => boolean;
  /**
   * Get storage number of entries
   * @returns Number of entries
   */
  getLength: () => number;
  /**
   * Get a storage item value
   * @param key Entry key
   * @returns Storage item value
   */
  getItem: WebStorageGetItemMethodType;
  /**
   * Get the storage item value at specific index
   * @param index Entry index
   * @returns Storage item index
   */
  getIndex: WebStorageGetIndexMethodType;
  /**
   * Get the storage key at specific index
   * @param index Entry index
   * @returns Storage key
   */
  getKey: WebStorageGetKeyMethodType;
  /**
   * Retrieve all items in storage
   * @returns Object syntax: item name as Object key and its value
   */
  getAll: () => any;
  /**
   * Retrieve all keys in storage
   * @returns Storage keys (Array of Strings)
   */
  getAllKeys: WebStorageGetAllKeysMethodType;
  /**
   * Set item in storage
   * @param key Entry key
   * @param value Entry value
   */
  set: (
    key: string,
    value:
      | Date
      | RegExp
      | number
      | boolean
      | ((...params: readonly any[]) => any)
      | any
      | readonly any[]
      | string
      | null
  ) => void;
  /**
   * Remove a storage item
   * @param key Storage key
   */
  remove: (key: string) => void;
  /**
   * Remove everything from the storage
   */
  clear: () => void;
  /**
   * Determine if storage has any items
   * @returns Tells if storage is empty or not
   */
  isEmpty: () => boolean;
}

export interface Meta {}

export interface Notify {
  /**
   * Creates a notification; Same as calling $q.notify(...)
   * @param opts Notification options
   * @returns Calling this function with no parameters hides the notification; When called with one Object parameter (the original notification must NOT be grouped), it updates the notification (specified properties are shallow merged with previous ones; note that group and position cannot be changed while updating and so they are ignored)
   */
  create: (
    opts: QNotifyCreateOptions | string
  ) => (props?: QNotifyUpdateOptions) => void;
  /**
   * Merge options into the default ones
   * @param opts Notification options (See 'opts' param of 'create()' for object properties)
   */
  setDefaults: (opts: QNotifyOptions) => void;
  /**
   * Register a new type of notification (or override an existing one)
   * @param typeName Name of the type (to be used as 'type' prop later on)
   * @param typeOpts Notification options (See 'opts' param of 'create()' for object properties)
   */
  registerType: (typeName: string, typeOpts: QNotifyOptions) => void;
}

export interface Platform {
  /**
   * Client browser User Agent
   */
  userAgent: string;
  /**
   * Client browser details (property names depend on browser)
   */
  is: {
    /**
     * Browser name
     */
    name: string;
    /**
     * Platform name
     */
    platform: string;
    /**
     * Detailed browser version
     */
    version?: string;
    /**
     * Major browser version as a number
     */
    versionNumber?: number;
    /**
     * Whether the platform is desktop
     */
    desktop?: boolean;
    /**
     * Whether the platform is mobile
     */
    mobile?: boolean;
    /**
     * Whether the platform is Electron
     */
    electron?: boolean;
    /**
     * Whether the platform is BEX(Browser Extension)
     */
    bex?: boolean;
    /**
     * Whether the platform is Capacitor
     */
    capacitor?: boolean;
    /**
     * Whether the platform is Cordova
     */
    cordova?: boolean;
    /**
     * Whether the platform is a native mobile wrapper
     */
    nativeMobile?: boolean;
    /**
     * Type of the native mobile wrapper
     */
    nativeMobileWrapper?: "cordova" | "capacitor";
    /**
     * Whether the browser is Google Chrome
     */
    chrome?: boolean;
    /**
     * Whether the browser is Firefox
     */
    firefox?: boolean;
    /**
     * Whether the browser is Safari
     */
    safari?: boolean;
    /**
     * Whether the browser is Microsoft Edge (Chromium)
     */
    edgeChromium?: boolean;
    /**
     * Whether the browser is Microsoft Edge Legacy
     */
    edge?: boolean;
    /**
     * Whether the browser is Opera
     */
    opera?: boolean;
    /**
     * Whether the browser is Vivaldi
     */
    vivaldi?: boolean;
    /**
     * Whether the operating system is Windows
     */
    win?: boolean;
    /**
     * Whether the operating system is Linux
     */
    linux?: boolean;
    /**
     * Whether the operating system is Mac OS
     */
    mac?: boolean;
    /**
     * Whether the operating system is Chrome OS
     */
    cros?: boolean;
    /**
     * Whether the operating system is Android
     */
    android?: boolean;
    /**
     * Whether the operating system is iOS
     */
    ios?: boolean;
    /**
     * Whether the operating system is Windows Phone
     */
    winphone?: boolean;
    /**
     * Whether the device is an iPhone
     */
    iphone?: boolean;
    /**
     * Whether the device is an iPad
     */
    ipad?: boolean;
    /**
     * Whether the device is an iPod
     */
    ipod?: boolean;
    /**
     * Whether the device is a Kindle
     */
    kindle?: boolean;
    /**
     * Whether the browser is Amazon Silk
     */
    silk?: boolean;
  };
  /**
   * Client browser detectable properties
   */
  has: {
    /**
     * Client browser runs on device with touch support
     */
    touch: boolean;
    /**
     * Client browser has Web Storage support
     */
    webStorage: boolean;
  };
  /**
   * Client browser environment
   */
  within: {
    /**
     * Does the app run under an iframe?
     */
    iframe: boolean;
  };
  /**
   * For SSR usage only, and only on the global import (not on $q.platform)
   * @param ssrContext SSR Context Object
   * @returns Platform object (like $q.platform) for SSR usage purposes
   */
  parseSSR: (ssrContext: any) => Platform;
}

export interface Screen {
  /**
   * Screen width (in pixels)
   */
  width: number;
  /**
   * Screen height (in pixels)
   */
  height: number;
  /**
   * Tells current window breakpoint
   */
  name: "xs" | "sm" | "md" | "lg" | "xl";
  /**
   * Breakpoints (in pixels)
   */
  sizes: {
    /**
     * Breakpoint width size (minimum size)
     */
    sm: number;
    /**
     * Breakpoint width size (minimum size)
     */
    md: number;
    /**
     * Breakpoint width size (minimum size)
     */
    lg: number;
    /**
     * Breakpoint width size (minimum size)
     */
    xl: number;
  };
  /**
   * Tells if current screen width is lower than breakpoint-name
   */
  lt: {
    /**
     * Is current screen width lower than this breakpoint's lowest limit?
     */
    sm: boolean;
    /**
     * Is current screen width lower than this breakpoint's lowest limit?
     */
    md: boolean;
    /**
     * Is current screen width lower than this breakpoint's lowest limit?
     */
    lg: boolean;
    /**
     * Is current screen width lower than this breakpoint's lowest limit?
     */
    xl: boolean;
  };
  /**
   * Tells if current screen width is greater than breakpoint-name
   */
  gt: {
    /**
     * Is current screen width greater than this breakpoint's max limit?
     */
    xs: boolean;
    /**
     * Is current screen width greater than this breakpoint's max limit?
     */
    sm: boolean;
    /**
     * Is current screen width greater than this breakpoint's max limit?
     */
    md: boolean;
    /**
     * Is current screen width greater than this breakpoint's max limit?
     */
    lg: boolean;
  };
  /**
   * Current screen width fits exactly 'xs' breakpoint
   */
  xs: boolean;
  /**
   * Current screen width fits exactly 'sm' breakpoint
   */
  sm: boolean;
  /**
   * Current screen width fits exactly 'md' breakpoint
   */
  md: boolean;
  /**
   * Current screen width fits exactly 'lg' breakpoint
   */
  lg: boolean;
  /**
   * Current screen width fits exactly 'xl' breakpoint
   */
  xl: boolean;
  /**
   * Override default breakpoint sizes
   * @param breakpoints Pick what you want to override
   */
  setSizes: (breakpoints: {
    /**
     * Breakpoint width size (minimum size)
     */
    sm?: number;
    /**
     * Breakpoint width size (minimum size)
     */
    md?: number;
    /**
     * Breakpoint width size (minimum size)
     */
    lg?: number;
    /**
     * Breakpoint width size (minimum size)
     */
    xl?: number;
  }) => void;
  /**
   * Debounce update of all props when screen width/height changes
   * @param amount Amount in milliseconds
   */
  setDebounce: (amount: number) => void;
}

export interface SessionStorage {
  /**
   * Check if storage item exists
   * @param key Entry key
   * @returns Does the item exists or not?
   */
  has: (key: string) => boolean;
  /**
   * Get storage number of entries
   * @returns Number of entries
   */
  getLength: () => number;
  /**
   * Get a storage item value
   * @param key Entry key
   * @returns Storage item value
   */
  getItem: WebStorageGetItemMethodType;
  /**
   * Get the storage item value at specific index
   * @param index Entry index
   * @returns Storage item index
   */
  getIndex: WebStorageGetIndexMethodType;
  /**
   * Get the storage key at specific index
   * @param index Entry index
   * @returns Storage key
   */
  getKey: WebStorageGetKeyMethodType;
  /**
   * Retrieve all items in storage
   * @returns Object syntax: item name as Object key and its value
   */
  getAll: () => any;
  /**
   * Retrieve all keys in storage
   * @returns Storage keys (Array of Strings)
   */
  getAllKeys: WebStorageGetAllKeysMethodType;
  /**
   * Set item in storage
   * @param key Entry key
   * @param value Entry value
   */
  set: (
    key: string,
    value:
      | Date
      | RegExp
      | number
      | boolean
      | ((...params: readonly any[]) => any)
      | any
      | readonly any[]
      | string
      | null
  ) => void;
  /**
   * Remove a storage item
   * @param key Storage key
   */
  remove: (key: string) => void;
  /**
   * Remove everything from the storage
   */
  clear: () => void;
  /**
   * Determine if storage has any items
   * @returns Tells if storage is empty or not
   */
  isEmpty: () => boolean;
}

export interface ClosePopup {}

export interface Intersection {}

export interface Morph {}

export interface Mutation {}

export interface Ripple {}

export interface Scroll {}

export interface ScrollFire {}

export interface TouchHold {}

export interface TouchPan {}

export interface TouchRepeat {}

export interface TouchSwipe {}

export interface QAjaxBarProps {
  /**
   * Position within window of where QAjaxBar should be displayed
   * Default value: top
   */
  position?: "top" | "right" | "bottom" | "left" | undefined;
  /**
   * Size in CSS units, including unit name
   * Default value: 2px
   */
  size?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Reverse direction of progress
   */
  reverse?: boolean | undefined;
  /**
   * Skip Ajax hijacking (not a reactive prop)
   */
  skipHijack?: boolean | undefined;
  /**
   * Filter which URL should trigger start() + stop()
   * @param url The URL being triggered
   * @returns Should the URL received as param trigger start() + stop()?
   */
  hijackFilter?: ((url: string) => boolean) | undefined;
  /**
   * Emitted when bar is triggered to appear
   */
  onStart?: () => void;
  /**
   * Emitted when bar has finished its job
   */
  onStop?: () => void;
}

export interface QAjaxBarSlots {}

export interface QAjaxBar extends ComponentPublicInstance<QAjaxBarProps> {
  /**
   * Notify bar you are waiting for a new process to finish
   * @param speed Delay (in milliseconds) between progress auto-increments; If delay is 0 then it disables auto-incrementing
   * @returns Number of active simultaneous sessions
   */
  start: (speed?: number) => number;
  /**
   * Manually trigger a bar progress increment
   * @param amount Amount (0 < x <= 100) to increment with
   * @returns Number of active simultaneous sessions
   */
  increment: (amount?: number) => number;
  /**
   * Notify bar that one process you were waiting has finished
   * @returns Number of active simultaneous sessions
   */
  stop: () => number;
}

export interface QAvatarProps {
  /**
   * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
   */
  size?: string | undefined;
  /**
   * The size in CSS units, including unit name, of the content (icon, text)
   */
  fontSize?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: string | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  icon?: string | undefined;
  /**
   * Removes border-radius so borders are squared
   */
  square?: boolean | undefined;
  /**
   * Applies a small standard border-radius for a squared shape of the component
   */
  rounded?: boolean | undefined;
}

export interface QAvatarSlots {
  /**
   * Optional; Suggestions: one character string, <img> tag
   */
  default: () => VNode[];
}

export interface QAvatar extends ComponentPublicInstance<QAvatarProps> {}

export interface QBadgeProps {
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: string | undefined;
  /**
   * Tell QBadge if it should float to the top right side of the relative positioned parent element or not
   */
  floating?: boolean | undefined;
  /**
   * Applies a 0.8 opacity; Useful especially for floating QBadge
   */
  transparent?: boolean | undefined;
  /**
   * Content can wrap to multiple lines
   */
  multiLine?: boolean | undefined;
  /**
   * Badge's content as string; overrides default slot if specified
   */
  label?: string | number | undefined;
  /**
   * Sets vertical-align CSS prop
   */
  align?: "top" | "middle" | "bottom" | undefined;
  /**
   * Use 'outline' design (colored text and borders only)
   */
  outline?: boolean | undefined;
  /**
   * Makes a rounded shaped badge
   */
  rounded?: boolean | undefined;
}

export interface QBadgeSlots {
  /**
   * This is where QBadge content goes, if not using 'label' property
   */
  default: () => VNode[];
}

export interface QBadge extends ComponentPublicInstance<QBadgeProps> {}

export interface QBannerProps {
  /**
   * Display actions on same row as content
   */
  inlineActions?: boolean | undefined;
  /**
   * Dense mode; occupies less space
   */
  dense?: boolean | undefined;
  /**
   * Applies a small standard border-radius for a squared shape of the component
   */
  rounded?: boolean | undefined;
  /**
   * Notify the component that the background is a dark color
   */
  dark?: boolean | undefined;
}

export interface QBannerSlots {
  /**
   * This is where Banner content goes
   */
  default: () => VNode[];
  /**
   * Slot for displaying an avatar (suggestions: QIcon, QAvatar)
   */
  avatar: () => VNode[];
  /**
   * Slot for Banner action (suggestions: QBtn)
   */
  action: () => VNode[];
}

export interface QBanner extends ComponentPublicInstance<QBannerProps> {}

export interface QBarProps {
  /**
   * Dense mode; occupies less space
   */
  dense?: boolean | undefined;
  /**
   * The component background color lights up the parent's background (as opposed to default behavior which is to darken it); Works unless you specify a CSS background color for it
   */
  dark?: boolean | undefined;
}

export interface QBarSlots {
  /**
   * Default slot in the devland unslotted content of the component
   */
  default: () => VNode[];
}

export interface QBar extends ComponentPublicInstance<QBarProps> {}

export interface QBreadcrumbsProps {
  /**
   * The string used to separate the breadcrumbs
   * Default value: /
   */
  separator?: string | undefined;
  /**
   * The color of the active breadcrumb, which can be any color from the Quasar Color Palette
   * Default value: primary
   */
  activeColor?: string | undefined;
  /**
   * The gutter value allows you control over the space between the breadcrumb elements.
   * Default value: sm
   */
  gutter?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
  /**
   * The color used to color the separator, which can be any color from the Quasar Color Palette
   */
  separatorColor?: string | undefined;
  /**
   * Specify how to align the breadcrumbs horizontally
   * Default value: left
   */
  align?:
    | "left"
    | "center"
    | "right"
    | "between"
    | "around"
    | "evenly"
    | undefined;
}

export interface QBreadcrumbsSlots {
  /**
   * Default slot in the devland unslotted content of the component
   */
  default: () => VNode[];
  /**
   * HTML or component you can slot in to separate the breadcrumbs
   */
  separator: () => VNode[];
}

export interface QBreadcrumbs
  extends ComponentPublicInstance<QBreadcrumbsProps> {}

export interface QBreadcrumbsElProps {
  /**
   * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
   */
  to?: string | any | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'exact' property; Superseded by 'href' prop if used
   */
  exact?: boolean | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
   */
  replace?: boolean | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used
   */
  activeClass?: string | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'active-class' property; Superseded by 'href' prop if used
   */
  exactActiveClass?: string | undefined;
  /**
   * Native <a> link href attribute; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
   */
  href?: string | undefined;
  /**
   * Native <a> link target attribute; Use it only along with 'href' prop; Has priority over the 'to'/'exact'/'replace'/'active-class'/'exact-active-class' props
   */
  target?: string | undefined;
  /**
   * Put component in disabled mode
   */
  disable?: boolean | undefined;
  /**
   * The label text for the breadcrumb
   */
  label?: string | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  icon?: string | undefined;
  /**
   * HTML tag to use
   * Default value: span
   */
  tag?: string | undefined;
  /**
   * Emitted when the component is clicked
   * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
   * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
   */
  onClick?: (
    evt: Event,
    go?: (opts?: {
      /**
       * Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
       */
      to?: string | any;
      /**
       * Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
       */
      replace?: boolean;
      /**
       * Return the router error, if any; Otherwise the returned Promise will always fulfill
       */
      returnRouterError?: boolean;
    }) => Promise<any>
  ) => void;
}

export interface QBreadcrumbsElSlots {
  /**
   * This is where custom content goes, unless 'icon' and 'label' props are not enough
   */
  default: () => VNode[];
}

export interface QBreadcrumbsEl
  extends ComponentPublicInstance<QBreadcrumbsElProps> {}

export interface QBtnProps {
  /**
   * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
   */
  size?: string | undefined;
  /**
   * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
   * Default value: button
   */
  type?: string | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
   */
  to?: string | any | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
   */
  replace?: boolean | undefined;
  /**
   * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
   */
  href?: string | undefined;
  /**
   * Native <a> link target attribute; Use it only with 'to' or 'href' props
   */
  target?: string | undefined;
  /**
   * The text that will be shown on the button
   */
  label?: string | number | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  icon?: string | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  iconRight?: string | undefined;
  /**
   * Use 'outline' design
   */
  outline?: boolean | undefined;
  /**
   * Use 'flat' design
   */
  flat?: boolean | undefined;
  /**
   * Remove shadow
   */
  unelevated?: boolean | undefined;
  /**
   * Applies a more prominent border-radius for a squared shape button
   */
  rounded?: boolean | undefined;
  /**
   * Use 'push' design
   */
  push?: boolean | undefined;
  /**
   * Removes border-radius so borders are squared
   */
  square?: boolean | undefined;
  /**
   * Applies a glossy effect
   */
  glossy?: boolean | undefined;
  /**
   * Makes button size and shape to fit a Floating Action Button
   */
  fab?: boolean | undefined;
  /**
   * Makes button size and shape to fit a small Floating Action Button
   */
  fabMini?: boolean | undefined;
  /**
   * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
   */
  padding?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: string | undefined;
  /**
   * Avoid turning label text into caps (which happens by default)
   */
  noCaps?: boolean | undefined;
  /**
   * Avoid label text wrapping
   */
  noWrap?: boolean | undefined;
  /**
   * Dense mode; occupies less space
   */
  dense?: boolean | undefined;
  /**
   * Configure material ripple (disable it by setting it to 'false' or supply a config object)
   * Default value: true
   */
  ripple?: boolean | any | undefined;
  /**
   * Tabindex HTML attribute value
   */
  tabindex?: number | string | undefined;
  /**
   * Label or content alignment
   * Default value: center
   */
  align?:
    | "left"
    | "right"
    | "center"
    | "around"
    | "between"
    | "evenly"
    | undefined;
  /**
   * Stack icon and label vertically instead of on same line (like it is by default)
   */
  stack?: boolean | undefined;
  /**
   * When used on flexbox parent, button will stretch to parent's height
   */
  stretch?: boolean | undefined;
  /**
   * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
   */
  loading?: boolean | undefined;
  /**
   * Put component in disabled mode
   */
  disable?: boolean | undefined;
  /**
   * Makes a circle shaped button
   */
  round?: boolean | undefined;
  /**
   * Percentage (0.0 < x < 100.0); To be used along 'loading' prop; Display a progress bar on the background
   */
  percentage?: number | undefined;
  /**
   * Progress bar on the background should have dark color; To be used along with 'percentage' and 'loading' props
   */
  darkPercentage?: boolean | undefined;
  /**
   * Emitted when the component is clicked
   * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
   * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
   */
  onClick?: (
    evt: Event,
    go?: (opts?: {
      /**
       * Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
       */
      to?: string | any;
      /**
       * Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
       */
      replace?: boolean;
      /**
       * Return the router error, if any; Otherwise the returned Promise will always fulfill
       */
      returnRouterError?: boolean;
    }) => Promise<any>
  ) => void;
}

export interface QBtnSlots {
  /**
   * Use for custom content, instead of relying on 'icon' and 'label' props
   */
  default: () => VNode[];
  /**
   * Override the default QSpinner when in 'loading' state
   */
  loading: () => VNode[];
}

export interface QBtn extends ComponentPublicInstance<QBtnProps> {
  /**
   * Emulate click on QBtn
   * @param evt JS event object
   */
  click: (evt?: Event) => void;
}

export interface QBtnDropdownProps {
  /**
   * One of Quasar's embedded transitions
   * Default value: fade
   */
  transitionShow?: string | undefined;
  /**
   * One of Quasar's embedded transitions
   * Default value: fade
   */
  transitionHide?: string | undefined;
  /**
   * Transition duration (in milliseconds, without unit)
   * Default value: 300
   */
  transitionDuration?: string | number | undefined;
  /**
   * Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
   */
  modelValue?: boolean;
  /**
   * Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl)
   */
  size?: string | undefined;
  /**
   * 1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag
   * Default value: button
   */
  type?: string | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used
   */
  to?: string | any | undefined;
  /**
   * Equivalent to Vue Router <router-link> 'replace' property; Superseded by 'href' prop if used
   */
  replace?: boolean | undefined;
  /**
   * Native <a> link href attribute; Has priority over the 'to' and 'replace' props
   */
  href?: string | undefined;
  /**
   * Native <a> link target attribute; Use it only with 'to' or 'href' props
   */
  target?: string | undefined;
  /**
   * The text that will be shown on the button
   */
  label?: string | number | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  icon?: string | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  iconRight?: string | undefined;
  /**
   * Use 'outline' design
   */
  outline?: boolean | undefined;
  /**
   * Use 'flat' design
   */
  flat?: boolean | undefined;
  /**
   * Remove shadow
   */
  unelevated?: boolean | undefined;
  /**
   * Applies a more prominent border-radius for a squared shape button
   */
  rounded?: boolean | undefined;
  /**
   * Use 'push' design
   */
  push?: boolean | undefined;
  /**
   * Removes border-radius so borders are squared
   */
  square?: boolean | undefined;
  /**
   * Applies a glossy effect
   */
  glossy?: boolean | undefined;
  /**
   * Makes button size and shape to fit a Floating Action Button
   */
  fab?: boolean | undefined;
  /**
   * Makes button size and shape to fit a small Floating Action Button
   */
  fabMini?: boolean | undefined;
  /**
   * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
   */
  padding?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: string | undefined;
  /**
   * Avoid turning label text into caps (which happens by default)
   */
  noCaps?: boolean | undefined;
  /**
   * Avoid label text wrapping
   */
  noWrap?: boolean | undefined;
  /**
   * Dense mode; occupies less space
   */
  dense?: boolean | undefined;
  /**
   * Configure material ripple (disable it by setting it to 'false' or supply a config object)
   * Default value: true
   */
  ripple?: boolean | any | undefined;
  /**
   * Tabindex HTML attribute value
   */
  tabindex?: number | string | undefined;
  /**
   * Label or content alignment
   * Default value: center
   */
  align?:
    | "left"
    | "right"
    | "center"
    | "around"
    | "between"
    | "evenly"
    | undefined;
  /**
   * Stack icon and label vertically instead of on same line (like it is by default)
   */
  stack?: boolean | undefined;
  /**
   * When used on flexbox parent, button will stretch to parent's height
   */
  stretch?: boolean | undefined;
  /**
   * Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)
   */
  loading?: boolean | undefined;
  /**
   * Put component in disabled mode
   */
  disable?: boolean | undefined;
  /**
   * Split dropdown icon into its own button
   */
  split?: boolean | undefined;
  /**
   * Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)
   */
  dropdownIcon?: string | undefined;
  /**
   * Disable main button (useful along with 'split' prop)
   */
  disableMainBtn?: boolean | undefined;
  /**
   * Disables dropdown (dropdown button if using along 'split' prop)
   */
  disableDropdown?: boolean | undefined;
  /**
   * Disables the rotation of the dropdown icon when state is toggled
   */
  noIconAnimation?: boolean | undefined;
  /**
   * Style definitions to be attributed to the menu
   */
  contentStyle?: VueStyleProp | undefined;
  /**
   * Class definitions to be attributed to the menu
   */
  contentClass?: VueClassProp | undefined;
  /**
   * Allows the menu to cover the button. When used, the 'menu-self' and 'menu-fit' props are no longer effective
   */
  cover?: boolean | undefined;
  /**
   * Allows the menu to not be dismissed by a click/tap outside of the menu or by hitting the ESC key
   */
  persistent?: boolean | undefined;
  /**
   * Changing route app won't dismiss the popup; No need to set it if 'persistent' prop is also set
   */
  noRouteDismiss?: boolean | undefined;
  /**
   * Allows any click/tap in the menu to close it; Useful instead of attaching events to each menu item that should close the menu on click/tap
   */
  autoClose?: boolean | undefined;
  /**
   * Two values setting the starting position or anchor point of the menu relative to its target
   * Default value: bottom end
   */
  menuAnchor?:
    | "top left"
    | "top middle"
    | "top right"
    | "top start"
    | "top end"
    | "center left"
    | "center middle"
    | "center right"
    | "center start"
    | "center end"
    | "bottom left"
    | "bottom middle"
    | "bottom right"
    | "bottom start"
    | "bottom end"
    | undefined;
  /**
   * Two values setting the menu's own position relative to its target
   * Default value: top end
   */
  menuSelf?:
    | "top left"
    | "top middle"
    | "top right"
    | "top start"
    | "top end"
    | "center left"
    | "center middle"
    | "center right"
    | "center start"
    | "center end"
    | "bottom left"
    | "bottom middle"
    | "bottom right"
    | "bottom start"
    | "bottom end"
    | undefined;
  /**
   * An array of two numbers to offset the menu horizontally and vertically in pixels
   */
  menuOffset?: readonly any[] | undefined;
  /**
   * aria-label to be used on the dropdown toggle element
   */
  toggleAriaLabel?: string | undefined;
  /**
   * Emitted when showing/hidden state changes; Is also used by v-model
   * @param value New state (showing/hidden)
   */
  "onUpdate:modelValue"?: (value: boolean) => void;
  /**
   * Emitted after component has triggered show()
   * @param evt JS event object
   */
  onShow?: (evt: Event) => void;
  /**
   * Emitted when component triggers show() but before it finishes doing it
   * @param evt JS event object
   */
  onBeforeShow?: (evt: Event) => void;
  /**
   * Emitted after component has triggered hide()
   * @param evt JS event object
   */
  onHide?: (evt: Event) => void;
  /**
   * Emitted when component triggers hide() but before it finishes doing it
   * @param evt JS event object
   */
  onBeforeHide?: (evt: Event) => void;
  /**
   * Emitted when user clicks/taps on the main button (not the icon one, if using 'split')
   * @param evt JS event object
   */
  onClick?: (evt: Event) => void;
}

export interface QBtnDropdownSlots {
  /**
   * Default slot in the devland unslotted content of the component
   */
  default: () => VNode[];
  /**
   * Customize main button's content through this slot, unless you're using the 'icon' and 'label' props
   */
  label: () => VNode[];
  /**
   * Override the default QSpinner when in 'loading' state
   */
  loading: () => VNode[];
}

export interface QBtnDropdown
  extends ComponentPublicInstance<QBtnDropdownProps> {
  /**
   * Triggers component to show
   * @param evt JS event object
   */
  show: (evt?: Event) => void;
  /**
   * Triggers component to hide
   * @param evt JS event object
   */
  hide: (evt?: Event) => void;
  /**
   * Triggers component to toggle between show/hide
   * @param evt JS event object
   */
  toggle: (evt?: Event) => void;
}

export interface QBtnGroupProps {
  /**
   * Spread horizontally to all available space
   */
  spread?: boolean | undefined;
  /**
   * Use 'outline' design for buttons
   */
  outline?: boolean | undefined;
  /**
   * Use 'flat' design for buttons
   */
  flat?: boolean | undefined;
  /**
   * Remove shadow on buttons
   */
  unelevated?: boolean | undefined;
  /**
   * Applies a more prominent border-radius for squared shape buttons
   */
  rounded?: boolean | undefined;
  /**
   * Removes border-radius so borders are squared
   */
  square?: boolean | undefined;
  /**
   * Use 'push' design for buttons
   */
  push?: boolean | undefined;
  /**
   * When used on flexbox parent, buttons will stretch to parent's height
   */
  stretch?: boolean | undefined;
  /**
   * Applies a glossy effect
   */
  glossy?: boolean | undefined;
}

export interface QBtnGroupSlots {
  /**
   * Suggestion: QBtn
   */
  default: () => VNode[];
}

export interface QBtnGroup extends ComponentPublicInstance<QBtnGroupProps> {}

export interface QBtnToggleProps {
  /**
   * Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL
   */
  name?: string | undefined;
  /**
   * Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive
   */
  modelValue: any;
  /**
   * Array of Objects defining each option
   */
  options: {
    /**
     * Key-value for attributes to be set on the button
     */
    attrs?: any;
    /**
     * Label of option button; Use this prop and/or 'icon', but at least one is required
     */
    label?: string;
    /**
     * Icon of option button; Use this prop and/or 'label', but at least one is required
     */
    icon?: string;
    /**
     * Value of the option that will be used by component model
     */
    value: any;
    /**
     * Slot name to use for this button content; Useful for customizing content or even add tooltips
     */
    slot?: string;
    /**
     * Any other QBtn props (including class and style)
     */
    [props: string]: any;
  }[];
  /**
   * Color name for component from the Quasar Color Palette
   */
  color?: string | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: string | undefined;
  /**
   * Color name for component from the Quasar Color Palette
   * Default value: primary
   */
  toggleColor?: string | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  toggleTextColor?: string | undefined;
  /**
   * Spread horizontally to all available space
   */
  spread?: boolean | undefined;
  /**
   * Use 'outline' design
   */
  outline?: boolean | undefined;
  /**
   * Use 'flat' design
   */
  flat?: boolean | undefined;
  /**
   * Remove shadow
   */
  unelevated?: boolean | undefined;
  /**
   * Applies a more prominent border-radius for a squared shape button
   */
  rounded?: boolean | undefined;
  /**
   * Use 'push' design
   */
  push?: boolean | undefined;
  /**
   * Applies a glossy effect
   */
  glossy?: boolean | undefined;
  /**
   * Button size name or a CSS unit including unit name
   */
  size?: string | undefined;
  /**
   * Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set
   */
  padding?: string | undefined;
  /**
   * Avoid turning label text into caps (which happens by default)
   */
  noCaps?: boolean | undefined;
  /**
   * Avoid label text wrapping
   */
  noWrap?: boolean | undefined;
  /**
   * Configure material ripple (disable it by setting it to 'false' or supply a config object)
   * Default value: true
   */
  ripple?: boolean | any | undefined;
  /**
   * Dense mode; occupies less space
   */
  dense?: boolean | undefined;
  /**
   * Put component in readonly mode
   */
  readonly?: boolean | undefined;
  /**
   * Put component in disabled mode
   */
  disable?: boolean | undefined;
  /**
   * Stack icon and label vertically instead of on same line (like it is by default)
   */
  stack?: boolean | undefined;
  /**
   * When used on flexbox parent, button will stretch to parent's height
   */
  stretch?: boolean | undefined;
  /**
   * Clears model on click of the already selected button
   */
  clearable?: boolean | undefined;
  /**
   * Emitted when the component needs to change the model; Is also used by v-model
   * @param value New model value
   */
  "onUpdate:modelValue"?: (value: any) => void;
  /**
   * When using the 'clearable' property, this event is emitted when the already selected button is clicked
   */
  onClear?: () => void;
}

export interface QBtnToggleSlots {
  /**
   * Suggestions: QTooltip, QBadge
   */
  default: () => VNode[];
  /**
   * Any other dynamic slots to be used with 'slot' property of the 'options' prop
   */
  [key: string]: () => VNode[];
}

export interface QBtnToggle extends ComponentPublicInstance<QBtnToggleProps> {}

export interface QCardProps {
  /**
   * Notify the component that the background is a dark color
   */
  dark?: boolean | undefined;
  /**
   * Removes border-radius so borders are squared
   */
  squa