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, Directive, 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;
      /**
       * Path to an avatar image for this action
       */
      avatar?: string;
      /**
       * Action label
       */
      label?: string | number;
      /**
       * Any other custom props
       */
      [key: string]: any | undefined;
    }[];
    /**
     * 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?: NamedColor;
    /**
     * Color name for text from the Quasar Color Palette
     */
    messageColor?: NamedColor;
    /**
     * Color name for background from the Quasar Color Palette
     */
    backgroundColor?: NamedColor;
    /**
     * 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: QLoadingBarOptions) => 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 except 'ignoreDefaults' (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 except 'ignoreDefaults' (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;
}

/**
 * If value is 0 or 'false' then directive is disabled; if value is < 0 then it closes all popups in the chain; if value is 1 or 'true' or undefined then it closes only the parent popup; if value is > 1 it closes the specified number of parent popups in the chain (note that chained QMenus are considered 1 popup only & QPopupProxy separates chained menus)
 *
 * @see https://v2.quasar.dev/vue-directives/close-popup
 */
export type ClosePopupValue = boolean | number | string;
/**
 * If value is 0 or 'false' then directive is disabled; if value is < 0 then it closes all popups in the chain; if value is 1 or 'true' or undefined then it closes only the parent popup; if value is > 1 it closes the specified number of parent popups in the chain (note that chained QMenus are considered 1 popup only & QPopupProxy separates chained menus)
 *
 * @see https://v2.quasar.dev/vue-directives/close-popup
 */
export type ClosePopup = Directive<any, ClosePopupValue>;
/**
 * Function to call when scrolling occurs (identical to description of 'handler' prop of the Object form); If using the Object form, it is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard
 *
 * @see https://v2.quasar.dev/vue-directives/intersection
 */
export type IntersectionValue =
  | {
      /**
       * The handler function to be called
       * @param entry The IntersectionObserverEntry object
       * @returns If you return Boolean false from the handler, the observer stops
       */
      handler?: (entry?: {
        /**
         * Object containing the client rect information
         */
        boundingClientRect?: {
          /**
           * The bottom of the client rect
           */
          bottom?: number;
          /**
           * The height of the client rect
           */
          height?: number;
          /**
           * The left of the client rect
           */
          left?: number;
          /**
           * The right of the client rect
           */
          right?: number;
          /**
           * The top of the client rect
           */
          top?: number;
          /**
           * The width of the client rect
           */
          width?: number;
          /**
           * The x position of the client rect
           */
          x?: number;
          /**
           * The y position of the client rect
           */
          y?: number;
        };
        /**
         * The ratio of the observed objects visibility
         */
        intersectionRatio?: number;
        /**
         * Object containing the client rect information
         */
        intersectionRect?: {
          /**
           * The bottom of the client rect
           */
          bottom?: number;
          /**
           * The height of the client rect
           */
          height?: number;
          /**
           * The left of the client rect
           */
          left?: number;
          /**
           * The right of the client rect
           */
          right?: number;
          /**
           * The top of the client rect
           */
          top?: number;
          /**
           * The width of the client rect
           */
          width?: number;
          /**
           * The x position of the client rect
           */
          x?: number;
          /**
           * The y position of the client rect
           */
          y?: number;
        };
        /**
         * It is Boolean true if intersecting the scrollable area
         */
        isIntersecting?: boolean;
        /**
         * Object containing the client rect information
         */
        rootBounds?: {
          /**
           * The bottom of the client rect
           */
          bottom?: number;
          /**
           * The height of the client rect
           */
          height?: number;
          /**
           * The left of the client rect
           */
          left?: number;
          /**
           * The right of the client rect
           */
          right?: number;
          /**
           * The top of the client rect
           */
          top?: number;
          /**
           * The width of the client rect
           */
          width?: number;
          /**
           * The x position of the client rect
           */
          x?: number;
          /**
           * The y position of the client rect
           */
          y?: number;
        };
        /**
         * The target element
         */
        target?: Element;
        /**
         * The timestamp of the event
         */
        time?: number;
      }) => boolean;
      /**
       * Intersection observer options (can be omitted and all its props are optional)
       */
      cfg?: {
        /**
         * Lets you define an alternative to the viewport as your root (through its DOM element); It is important to keep in mind that root needs to be an ancestor of the observed element
         */
        root?: Element;
        /**
         * Allows you to specify the margins for the root, effectively allowing you to either grow or shrink the area used for intersections
         */
        rootMargin?: string;
        /**
         * Threshold(s) at which to trigger callback, specified as a ratio, or list of ratios, of (visible area / total area) of the observed element
         */
        threshold?: readonly any[];
      };
    }
  | (() => void);
/**
 * Function to call when scrolling occurs (identical to description of 'handler' prop of the Object form); If using the Object form, it is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard
 *
 * Modifiers:
 *  - once:
 *    - type: boolean
 *    - description: Call handler only once, when the conditions are first met
 *    - examples:
 *      - v-intersection.once
 *
 * @see https://v2.quasar.dev/vue-directives/intersection
 */
export type Intersection = Directive<any, IntersectionValue>;
/**
 * Configuration object or trigger value
 *
 * @see https://v2.quasar.dev/vue-directives/morph
 */
export type MorphValue =
  | {
      /**
       * Name of the morph group the element belongs to
       */
      group?: string;
      /**
       * Name of the morph inside the group that the element belongs to
       */
      name?: string;
      /**
       * Current value of the group model; when it becomes the same as the 'name' it triggers the morphing
       */
      model?: string;
      /**
       * Duration of the animation (in milliseconds)
       * Default value: 300
       */
      duration?: number;
      /**
       * Delay for the animation (in milliseconds)
       * Default value: 0
       */
      delay?: number;
      /**
       * Timing function for the animation (CSS easing format)
       * Default value: ease-in-out
       */
      easing?: string;
      /**
       * Fill mode for the animation
       * Default value: none
       */
      fill?: string;
      /**
       * Class names to be added to the destination element during the animation
       */
      classes?: string;
      /**
       * Styles to be added to the destination element during the animation
       */
      style?: string | any;
      /**
       * Use resize instead of scaling during animation
       */
      resize?: boolean;
      /**
       * Use CSS animations instead of the Animation API
       */
      useCSS?: boolean;
      /**
       * Hide the spacer for the initial element during animation; Use it if the initial element is not removed or resizing of the space occupied by the initial element is not desired
       */
      hideFromClone?: boolean;
      /**
       * Keep a clone of the final element visible during animation
       */
      keepToClone?: boolean;
      /**
       * Use an opacity tween between the initial and final elements
       */
      tween?: boolean;
      /**
       * If using tween it is the initial opacity of the initial element (will be animated to 0) - the initial element is placed on top of the final element
       * Default value: 0.6
       */
      tweenFromOpacity?: number;
      /**
       * If using tween it is the initial opacity of the final element (will be animated to 1)
       * Default value: 0.5
       */
      tweenToOpacity?: number;
      /**
       * Delay animation start for that number of milliseconds, or until a 'transitionend' event is emitted by the destination element, or until the promise is resolved (if the promise is rejected the morphing will abort, but the `toggle function` was already called)
       * Default value: 0
       */
      waitFor?: number | string | Promise<void>;
      /**
       * A function that will be called once the morphing is finished; Not called if morphing is aborted
       * @param direction 'to' if the morphing was finished in the final state or 'from' if it was finished in the initial state
       * @param aborted Was the morphing aborted?
       */
      onEnd?: (direction?: "to" | "from", aborted?: boolean) => void;
    }
  | any;
/**
 * Configuration object or trigger value
 *
 * Directive argument:
 *  - type: string
 *  - description: x:x2:y:z, where x is the morph element name, x2 is the morph group, y is the animation duration (in milliseconds) and z is the amount of time to wait (in milliseconds) or the 'transitionend' string
 *  - examples:
 *    - v-morph:name="options"
 *    - v-morph:name:groupName="options"
 *    - v-morph:name:groupName:400="options"
 *    - v-morph:name:groupName:400:100="options"
 *    - v-morph:name:groupName:400:transitionend="options"
 *
 * Modifiers:
 *  - resize:
 *    - type: boolean
 *    - description: Use resize instead of scale transform for morph (forceResize option of the morph function)
 *  - useCSS:
 *    - type: boolean
 *    - description: Use CSS animations for morph (forceCssAnimation option of the morph function)
 *  - hideFromClone:
 *    - type: boolean
 *    - description: Hide the spacer for the initial element (hideFromClone option of the morph function)
 *  - keepToClone:
 *    - type: boolean
 *    - description: Keep the final element visible while morphing (keepToClone option of the morph function)
 *  - tween:
 *    - type: boolean
 *    - description: Use opacity tween morphing between initial and final elements (tween option of the morph function)
 *
 * @see https://v2.quasar.dev/vue-directives/morph
 */
export type Morph = Directive<any, MorphValue>;
/**
 * Function to call when mutation occurs; It is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard
 *
 * @see https://v2.quasar.dev/vue-directives/mutation
 */
export type MutationValue = (
  mutationList: {
    /**
     * Type of mutation
     */
    type?: "childList" | "attributes" | "characterData";
    /**
     * The DOM element that the mutation affected, depending on the mutation type
     */
    target?: Element;
    /**
     * The NodeList of the nodes that have been added
     */
    addedNodes?: readonly any[];
    /**
     * The NodeList of the nodes that have been removed
     */
    removedNodes?: readonly any[];
    /**
     * The previous sibling of the added or removed nodes, or null
     */
    previousSibling?: any;
    /**
     * The next sibling of the added or removed nodes, or null
     */
    nextSibling?: any;
    /**
     * The local name of the changed attribute, or null
     */
    attributeName?: string;
    /**
     * The namespace of the changed attribute, or null
     */
    attributeNamespace?: string;
    /**
     * Value depends on the mutation type; For attributes, it is the value of the changed attribute before the change; For characterData it is data of the changed node before the change; For childList it is null; Note that for this to work as expected, attributeOldValue or characterDataOldValue must be set
     */
    oldValue?: string;
  }[]
) => boolean;
/**
 * Function to call when mutation occurs; It is HIGHLY recommended to reference it from your vue component scope, otherwise the directive update cycle will continuously recreate the observer which hits performance hard
 *
 * Modifiers:
 *  - once:
 *    - type: boolean
 *    - description: Call handler only once, when the first mutation was triggered, then stop monitoring
 *    - examples:
 *      - v-mutation.once
 *  - childList:
 *    - type: boolean
 *    - description: Monitor the target node (and, if 'subtree' is also set, its descendants) for the addition of new child nodes or removal of existing child nodes
 *    - examples:
 *      - v-mutation.childList
 *  - subtree:
 *    - type: boolean
 *    - description: Extend monitoring to the entire subtree of nodes rooted at target
 *    - examples:
 *      - v-mutation.subtree
 *  - attributes:
 *    - type: boolean
 *    - description: Watch for changes to the value of attributes on the node or nodes being monitored
 *    - examples:
 *      - v-mutation.attributes
 *  - characterData:
 *    - type: boolean
 *    - description: Monitor the specified target node or subtree for changes to the character data contained within the node or nodes
 *    - examples:
 *      - v-mutation.characterData
 *  - attributeOldValue:
 *    - type: boolean
 *    - description: Record the previous value of any attribute that changes when monitoring the node or nodes for attribute changes
 *    - examples:
 *      - v-mutation.attributeOldValue
 *  - characterDataOldValue:
 *    - type: boolean
 *    - description: Record the previous value of a node's text whenever the text changes on nodes being monitored
 *    - examples:
 *      - v-mutation.characterDataOldValue
 *
 * @see https://v2.quasar.dev/vue-directives/mutation
 */
export type Mutation = Directive<any, MutationValue>;
/**
 * Boolean (if just wanting to enable/disable) or Object for configuring more options
 *
 * @see https://v2.quasar.dev/vue-directives/material-ripple
 */
export type RippleValue =
  | boolean
  | {
      /**
       * Trigger early/immediately on user interaction
       */
      early?: boolean;
      /**
       * Stop click/touch event propagation
       */
      stop?: boolean;
      /**
       * Ripple starts from the absolute center
       */
      center?: boolean;
      /**
       * Color name from Quasar Color Palette; Overrides default dynamic color
       */
      color?: string;
      /**
       * List of keyCode that should trigger the ripple
       */
      keyCodes?: readonly any[] | number;
    };
/**
 * Boolean (if just wanting to enable/disable) or Object for configuring more options
 *
 * Directive argument:
 *  - type: string
 *  - description: Color name from Quasar Color Palette; Overrides default dynamic color
 *  - examples:
 *    - v-ripple:orange-5
 *
 * Modifiers:
 *  - early:
 *    - type: boolean
 *    - description: Trigger early/immediately on user interaction
 *  - stop:
 *    - type: boolean
 *    - description: Stop click/touch event propagation
 *    - examples:
 *      - v-ripple.stop
 *  - center:
 *    - type: boolean
 *    - description: Ripple starts from the absolute center
 *    - examples:
 *      - v-ripple.center
 *
 * @see https://v2.quasar.dev/vue-directives/material-ripple
 */
export type Ripple = Directive<any, RippleValue>;
/**
 * Function to call when scrolling occurs (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/scroll
 */
export type ScrollValue =
  | ((verticalScrollPosition: number, horizontalScrollPosition: number) => void)
  | undefined;
/**
 * Function to call when scrolling occurs (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/scroll
 */
export type Scroll = Directive<any, ScrollValue>;
/**
 * Function to call when scrolling and element comes into the viewport (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/scroll-fire
 */
export type ScrollFireValue = ((el: Element) => void) | undefined;
/**
 * Function to call when scrolling and element comes into the viewport (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/scroll-fire
 */
export type ScrollFire = Directive<any, ScrollFireValue>;
/**
 * Function to call after user has hold touch/click for the specified amount of time (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/touch-hold
 */
export type TouchHoldValue =
  | ((details: {
      /**
       * Original JS event Object
       */
      evt?: Event;
      /**
       * Triggered by a touch event
       */
      touch?: boolean;
      /**
       * Triggered by a mouse event
       */
      mouse?: boolean;
      /**
       * Event Position Object
       */
      position?: {
        /**
         * Vertical offset from top of window
         */
        top?: number;
        /**
         * Horizontal offset from left of window
         */
        left?: number;
      };
      /**
       * How long it took to trigger the event (in milliseconds)
       */
      duration?: number;
    }) => void)
  | undefined;
/**
 * Function to call after user has hold touch/click for the specified amount of time (use undefined to disable)
 *
 * Directive argument:
 *  - type: string
 *  - default: 600:5:7
 *  - description: x:y:z, where x is the amount of time to wait (in milliseconds), y is the touch event sensitivity (in pixels) and z is the mouse event sensitivity (in pixels)
 *  - examples:
 *    - v-touch-hold:400="fnToCall"
 *    - v-touch-hold:400:15="fnToCall"
 *    - v-touch-hold:400:10:10="fnToCall"
 *
 * Modifiers:
 *  - capture:
 *    - type: boolean
 *    - description: Use capture for touchstart event
 *  - mouse:
 *    - type: boolean
 *    - description: Listen for mouse events too
 *  - mouseCapture:
 *    - type: boolean
 *    - description: Use capture for mousedown event
 *
 * @see https://v2.quasar.dev/vue-directives/touch-hold
 */
export type TouchHold = Directive<any, TouchHoldValue>;
/**
 * Handler for panning (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/touch-pan
 */
export type TouchPanValue =
  | ((details: {
      /**
       * Original JS event Object
       */
      evt?: Event;
      /**
       * Triggered by a touch event
       */
      touch?: boolean;
      /**
       * Triggered by a mouse event
       */
      mouse?: boolean;
      /**
       * Event Position Object
       */
      position?: {
        /**
         * Vertical offset from top of window
         */
        top?: number;
        /**
         * Horizontal offset from left of window
         */
        left?: number;
      };
      /**
       * Direction of movement
       */
      direction?: "up" | "right" | "down" | "left";
      /**
       * Is first time the handler is called since movement started
       */
      isFirst?: boolean;
      /**
       * Is last time the handler is called since movement ended
       */
      isFinal?: boolean;
      /**
       * How long it took to trigger the event (in milliseconds)
       */
      duration?: number;
      /**
       * Absolute distance (in pixels) since movement started from initial point
       */
      distance?: {
        /**
         * Absolute distance horizontally
         */
        x?: number;
        /**
         * Absolute distance vertically
         */
        y?: number;
      };
      /**
       * Distance (in pixels) since movement started from initial point
       */
      offset?: {
        /**
         * Distance horizontally
         */
        x?: number;
        /**
         * Distance vertically
         */
        y?: number;
      };
      /**
       * Delta of distance (in pixels) since handler was called last time
       */
      delta?: {
        /**
         * Distance horizontally
         */
        x?: number;
        /**
         * Distance vertically
         */
        y?: number;
      };
    }) => void)
  | undefined;
/**
 * Handler for panning (use undefined to disable)
 *
 * Modifiers:
 *  - stop:
 *    - type: boolean
 *    - description: Stop event propagation for touch events
 *  - prevent:
 *    - type: boolean
 *    - description: Calls event.preventDefault() for touch events
 *  - capture:
 *    - type: boolean
 *    - description: Use capture for touchstart event
 *  - mouse:
 *    - type: boolean
 *    - description: Listen for mouse events too
 *  - mouseCapture:
 *    - type: boolean
 *    - description: Use capture for mousedown event
 *  - mouseAllDir:
 *    - type: boolean
 *    - description: Ignore initial mouse move direction (do not abort if the first mouse move is in an unaccepted direction)
 *  - preserveCursor:
 *    - type: boolean
 *    - description: Prevent the mouse cursor from automatically displaying as grabbing when panning
 *  - horizontal:
 *    - type: boolean
 *    - description: Catch horizontal (left/right) movement
 *  - vertical:
 *    - type: boolean
 *    - description: Catch vertical (up/down) movement
 *  - up:
 *    - type: boolean
 *    - description: Catch panning to up
 *  - right:
 *    - type: boolean
 *    - description: Catch panning to right
 *  - down:
 *    - type: boolean
 *    - description: Catch panning to down
 *  - left:
 *    - type: boolean
 *    - description: Catch panning to left
 *
 * @see https://v2.quasar.dev/vue-directives/touch-pan
 */
export type TouchPan = Directive<any, TouchPanValue>;
/**
 * Handler for touch-repeat (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/touch-repeat
 */
export type TouchRepeatValue =
  | ((details: {
      /**
       * Original JS event Object
       */
      evt?: Event;
      /**
       * Triggered by a touch event
       */
      touch?: boolean;
      /**
       * Triggered by a mouse event
       */
      mouse?: boolean;
      /**
       * Triggered by a keyboard event
       */
      keyboard?: boolean;
      /**
       * Event Position Object; Supplied ONLY if it's a touch or mouse event
       */
      position?: {
        /**
         * Vertical offset from top of window
         */
        top?: number;
        /**
         * Horizontal offset from left of window
         */
        left?: number;
      };
      /**
       * Keycode; Supplied ONLY if it's a keyboard event
       */
      keyCode?: number;
      /**
       * How long it took to trigger the event (in milliseconds)
       */
      duration?: number;
      /**
       * Handler called for nth time
       */
      repeatCount?: number;
      /**
       * Unix timestamp of the moment when event started; Equivalent to Date.now()
       */
      startTime?: number;
    }) => void)
  | undefined;
/**
 * Handler for touch-repeat (use undefined to disable)
 *
 * Directive argument:
 *  - type: string
 *  - default: 0:600:300
 *  - description: String of numbers (at least one number) separated by ':' which defines the amount of time to wait for 1st handler call, 2nd, 3rd and so on; All subsequent calls will use last value as time to wait until triggering
 *  - examples:
 *    - v-touch-repeat:0:400="fnToCall"
 *
 * Modifiers:
 *  - capture:
 *    - type: boolean
 *    - description: Use capture for touchstart event
 *  - mouse:
 *    - type: boolean
 *    - description: Listen for mouse events too
 *  - mouseCapture:
 *    - type: boolean
 *    - description: Use capture for mousedown event
 *  - keyCapture:
 *    - type: boolean
 *    - description: Use capture for keydown event
 *  - esc:
 *    - type: boolean
 *    - description: Catch ESC key
 *  - tab:
 *    - type: boolean
 *    - description: Catch TAB key
 *  - enter:
 *    - type: boolean
 *    - description: Catch ENTER key
 *  - space:
 *    - type: boolean
 *    - description: Catch SPACE key
 *  - up:
 *    - type: boolean
 *    - description: Catch UP arrow key
 *  - left:
 *    - type: boolean
 *    - description: Catch LEFT arrow key
 *  - right:
 *    - type: boolean
 *    - description: Catch RIGHT arrow key
 *  - down:
 *    - type: boolean
 *    - description: Catch DOWN key
 *  - delete:
 *    - type: boolean
 *    - description: Catch DELETE key
 *  - [keycode]:
 *    - type: number
 *    - description: Key code to catch
 *    - examples:
 *      - v-touch-repeat.68="fnToCall"
 *
 * @see https://v2.quasar.dev/vue-directives/touch-repeat
 */
export type TouchRepeat = Directive<any, TouchRepeatValue>;
/**
 * Handler for swipe (use undefined to disable)
 *
 * @see https://v2.quasar.dev/vue-directives/touch-swipe
 */
export type TouchSwipeValue =
  | ((details: {
      /**
       * Original JS event Object
       */
      evt?: Event;
      /**
       * Triggered by a touch event
       */
      touch?: boolean;
      /**
       * Triggered by a mouse event
       */
      mouse?: boolean;
      /**
       * Direction of movement
       */
      direction?: "up" | "right" | "down" | "left";
      /**
       * How long it took to trigger the event (in milliseconds)
       */
      duration?: number;
      /**
       * Absolute distance (in pixels) since movement started from initial point
       */
      distance?: {
        /**
         * Absolute distance horizontally
         */
        x?: number;
        /**
         * Absolute distance vertically
         */
        y?: number;
      };
    }) => void)
  | undefined;
/**
 * Handler for swipe (use undefined to disable)
 *
 * Directive argument:
 *  - type: string
 *  - default: 6e-2:6:50
 *  - description: x:y:z, where x is minimum velocity (dist/time; please use float without a dot, example: 6e-2 which is equivalent to 6 * 10^-2 = 0.06), y is minimum distance on first move on mobile, z is minimum distance on desktop until deciding if it's a swipe indeed
 *  - examples:
 *    - v-touch-swipe:7e-2:10:100="fnToCall"
 *
 * Modifiers:
 *  - capture:
 *    - type: boolean
 *    - description: Use capture for touchstart event
 *  - mouse:
 *    - type: boolean
 *    - description: Listen for mouse events too
 *  - mouseCapture:
 *    - type: boolean
 *    - description: Use capture for mousedown event
 *  - horizontal:
 *    - type: boolean
 *    - description: Catch horizontal (left/right) movement
 *  - vertical:
 *    - type: boolean
 *    - description: Catch vertical (up/down) movement
 *  - up:
 *    - type: boolean
 *    - description: Catch swipe to up
 *  - right:
 *    - type: boolean
 *    - description: Catch swipe to right
 *  - down:
 *    - type: boolean
 *    - description: Catch swipe to down
 *  - left:
 *    - type: boolean
 *    - description: Catch swipe to left
 *
 * @see https://v2.quasar.dev/vue-directives/touch-swipe
 */
export type TouchSwipe = Directive<any, TouchSwipeValue>;
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?: NamedColor | 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?: NamedColor | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: NamedColor | 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?: NamedColor | undefined;
  /**
   * Overrides text color (if needed); Color name from the Quasar Color Palette
   */
  textColor?: NamedColor | 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' des