quasar 2.12.2 → 2.12.4

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="@quasar/app" />
 /// <reference types="@quasar/app-webpack" />
 /// <reference types="@quasar/app-vite" />
-import { App, Component, ComponentPublicInstance, VNode } from "vue";
+import { App, Component, ComponentPublicInstance, Directive, VNode } from "vue";
 import { ComponentConstructor, GlobalComponentConstructor } from "./ts-helpers";
 
 export interface AddressbarColor {
@@ -281,15 +281,15 @@ export interface Loading {
     /**
      * Color name for spinner from the Quasar Color Palette
      */
-    spinnerColor?: string;
+    spinnerColor?: NamedColor;
     /**
      * Color name for text from the Quasar Color Palette
      */
-    messageColor?: string;
+    messageColor?: NamedColor;
     /**
      * Color name for background from the Quasar Color Palette
      */
-    backgroundColor?: string;
+    backgroundColor?: NamedColor;
     /**
      * One of the QSpinners
      */
@@ -322,7 +322,7 @@ export interface LoadingBar {
   increment: (amount?: number) => void;
   /**
    * Set the inner QAjaxBar's props
-   * @param props QAjaxBar component props, EXCEPT for 'hijack-filter'
+   * @param props QAjaxBar component props
    */
   setDefaults: (props: QLoadingBarOptions) => void;
 }
@@ -788,28 +788,881 @@ export interface SessionStorage {
   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 {}
-
+/**
+ * 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
@@ -824,7 +1677,7 @@ export interface QAjaxBarProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Reverse direction of progress
    */
@@ -883,11 +1736,11 @@ export interface QAvatarProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  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)
    */
@@ -915,11 +1768,11 @@ export interface QBadgeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Tell QBadge if it should float to the top right side of the relative positioned parent element or not
    */
@@ -1025,7 +1878,7 @@ export interface QBreadcrumbsProps {
    * The color of the active breadcrumb, which can be any color from the Quasar Color Palette
    * Default value: primary
    */
-  activeColor?: string | undefined;
+  activeColor?: NamedColor | undefined;
   /**
    * The gutter value allows you control over the space between the breadcrumb elements.
    * Default value: sm
@@ -1034,7 +1887,7 @@ export interface QBreadcrumbsProps {
   /**
    * The color used to color the separator, which can be any color from the Quasar Color Palette
    */
-  separatorColor?: string | undefined;
+  separatorColor?: NamedColor | undefined;
   /**
    * Specify how to align the breadcrumbs horizontally
    * Default value: left
@@ -1224,11 +2077,11 @@ export interface QBtnProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Avoid turning label text into caps (which happens by default)
    */
@@ -1433,11 +2286,11 @@ export interface QBtnDropdownProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Avoid turning label text into caps (which happens by default)
    */
@@ -1736,20 +2589,20 @@ export interface QBtnToggleProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    * Default value: primary
    */
-  toggleColor?: string | undefined;
+  toggleColor?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  toggleTextColor?: string | undefined;
+  toggleTextColor?: NamedColor | undefined;
   /**
    * Spread horizontally to all available space
    */
@@ -2007,11 +2860,11 @@ export interface QCarouselProps {
   /**
    * Color name for QCarousel button controls (arrows, navigation) from the Quasar Color Palette
    */
-  controlColor?: string | undefined;
+  controlColor?: NamedColor | undefined;
   /**
    * Color name for text color of QCarousel button controls (arrows, navigation) from the Quasar Color Palette
    */
-  controlTextColor?: string | undefined;
+  controlTextColor?: NamedColor | undefined;
   /**
    * Type of button to use for controls (arrows, navigation)
    */
@@ -2225,11 +3078,11 @@ export interface QChatMessageProps {
   /**
    * Color name (from the Quasar Color Palette) for chat bubble background
    */
-  bgColor?: string | undefined;
+  bgColor?: NamedColor | undefined;
   /**
    * Color name (from the Quasar Color Palette) for chat bubble text
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Author's name
    */
@@ -2356,7 +3209,7 @@ export interface QCheckboxProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Should the color (if specified any) be kept when the component is unticked/ off?
    */
@@ -2435,11 +3288,11 @@ export interface QChipProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Model of the component determining if QChip should be rendered or not
    * Default value: true
@@ -2529,15 +3382,15 @@ export interface QCircularProgressProps {
   /**
    * Color name for the arc progress from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for the center part of the component from the Quasar Color Palette
    */
-  centerColor?: string | undefined;
+  centerColor?: NamedColor | undefined;
   /**
    * Color name for the track of the component from the Quasar Color Palette
    */
-  trackColor?: string | undefined;
+  trackColor?: NamedColor | undefined;
   /**
    * Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size
    * Default value: 0.25em
@@ -2714,11 +3567,11 @@ export interface QDateProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -3414,11 +4267,11 @@ export interface QEditorProps {
   /**
    * Font color (from the Quasar Palette) of buttons and text in the toolbar
    */
-  toolbarColor?: string | undefined;
+  toolbarColor?: NamedColor | undefined;
   /**
    * Text color (from the Quasar Palette) of toolbar commands
    */
-  toolbarTextColor?: string | undefined;
+  toolbarTextColor?: NamedColor | undefined;
   /**
    * Choose the active color (from the Quasar Palette) of toolbar commands button
    * Default value: primary
@@ -3497,7 +4350,12 @@ export interface QEditorProps {
   onLinkHide?: () => void;
 }
 
-export interface QEditorSlots {}
+export interface QEditorSlots {
+  /**
+   * Content for the given command in the toolbar
+   */
+  [key: `${string}`]: () => VNode[];
+}
 
 export interface QEditor extends ComponentPublicInstance<QEditorProps> {
   /**
@@ -3791,11 +4649,11 @@ export interface QFabProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Apply the glossy effect over the button
    */
@@ -3981,11 +4839,11 @@ export interface QFabActionProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Apply the glossy effect over the button
    */
@@ -4128,15 +4986,15 @@ export interface QFieldProps {
   /**
    * Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused
    */
-  labelColor?: string | undefined;
+  labelColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  bgColor?: string | undefined;
+  bgColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -4441,15 +5299,15 @@ export interface QFileProps {
   /**
    * Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused
    */
-  labelColor?: string | undefined;
+  labelColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  bgColor?: string | undefined;
+  bgColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -4914,7 +5772,7 @@ export interface QIconProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Useful if icon is on the left side of something: applies a standard margin on the right side of Icon
    */
@@ -5028,7 +5886,7 @@ export interface QImgProps {
   /**
    * Color name for default Spinner (unless using a 'loading' slot)
    */
-  spinnerColor?: string | undefined;
+  spinnerColor?: NamedColor | undefined;
   /**
    * Size in CSS units, including unit name, for default Spinner (unless using a 'loading' slot)
    */
@@ -5181,7 +6039,7 @@ export interface QInnerLoadingProps {
   /**
    * Color name for component from the Quasar Color Palette for the inner Spinner (unless using the default slot)
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Add a label; Gets overriden when using the default slot
    */
@@ -5286,15 +6144,15 @@ export interface QInputProps {
   /**
    * Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused
    */
-  labelColor?: string | undefined;
+  labelColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  bgColor?: string | undefined;
+  bgColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -5825,15 +6683,15 @@ export interface QKnobProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for the center part of the component from the Quasar Color Palette
    */
-  centerColor?: string | undefined;
+  centerColor?: NamedColor | undefined;
   /**
    * Color name for the track of the component from the Quasar Color Palette
    */
-  trackColor?: string | undefined;
+  trackColor?: NamedColor | undefined;
   /**
    * Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size
    * Default value: 0.25em
@@ -5972,11 +6830,11 @@ export interface QLinearProgressProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for component's track from the Quasar Color Palette
    */
-  trackColor?: string | undefined;
+  trackColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -6332,7 +7190,7 @@ export interface QOptionGroupProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Should the color (if specified any) be kept when input components are unticked?
    */
@@ -6627,11 +7485,11 @@ export interface QPaginationProps {
    * Color name from the Quasar Color Palette for the non-active buttons
    * Default value: primary
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Text color name from the Quasar Color Palette for the ACTIVE buttons
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * The design of the ACTIVE button, similar to the flat/outline/push/unelevated props (but those are used for non-active buttons)
    */
@@ -6640,11 +7498,11 @@ export interface QPaginationProps {
    * Color name from the Quasar Color Palette for the ACTIVE button
    * Default value: primary
    */
-  activeColor?: string | undefined;
+  activeColor?: NamedColor | undefined;
   /**
    * Text color name from the Quasar Color Palette for the ACTIVE button
    */
-  activeTextColor?: string | undefined;
+  activeTextColor?: NamedColor | undefined;
   /**
    * Makes a circle shaped button for all buttons
    */
@@ -6778,7 +7636,7 @@ export interface QPopupEditProps {
    * Color name for component from the Quasar Color Palette
    * Default value: primary
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Validates model then triggers 'save' and closes Popup; Returns a Boolean ('true' means valid, 'false' means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline
    * @param value Model to validate
@@ -7053,11 +7911,11 @@ export interface QPullToRefreshProps {
   /**
    * Color name for the icon from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for background of the icon container from the Quasar Color Palette
    */
-  bgColor?: string | undefined;
+  bgColor?: NamedColor | undefined;
   /**
    * Icon to display when refreshing the content
    */
@@ -7136,7 +7994,7 @@ export interface QRadioProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Should the color (if specified any) be kept when checkbox is unticked?
    */
@@ -7221,11 +8079,11 @@ export interface QRangeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for the track (can be 'transparent' too) from the Quasar Color Palette
    */
-  trackColor?: string | undefined;
+  trackColor?: NamedColor | undefined;
   /**
    * Apply a pattern image on the track
    */
@@ -7233,7 +8091,7 @@ export interface QRangeProps {
   /**
    * Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette
    */
-  innerTrackColor?: string | undefined;
+  innerTrackColor?: NamedColor | undefined;
   /**
    * Apply a pattern image on the inner track
    */
@@ -7241,7 +8099,7 @@ export interface QRangeProps {
   /**
    * Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette
    */
-  selectionColor?: string | undefined;
+  selectionColor?: NamedColor | undefined;
   /**
    * Apply a pattern image on the selection bar
    */
@@ -7253,11 +8111,11 @@ export interface QRangeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  labelColor?: string | undefined;
+  labelColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  labelTextColor?: string | undefined;
+  labelTextColor?: NamedColor | undefined;
   /**
    * Switch the position of the label (top <-> bottom or left <-> right)
    */
@@ -7297,7 +8155,7 @@ export interface QRangeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  thumbColor?: string | undefined;
+  thumbColor?: NamedColor | undefined;
   /**
    * Set custom thumb svg path
    * Default value: M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0
@@ -7350,19 +8208,19 @@ export interface QRangeProps {
   /**
    * Color name for left label background from the Quasar Color Palette
    */
-  leftLabelColor?: string | undefined;
+  leftLabelColor?: NamedColor | undefined;
   /**
    * Color name for left label text from the Quasar Color Palette
    */
-  leftLabelTextColor?: string | undefined;
+  leftLabelTextColor?: NamedColor | undefined;
   /**
    * Color name for right label background from the Quasar Color Palette
    */
-  rightLabelColor?: string | undefined;
+  rightLabelColor?: NamedColor | undefined;
   /**
    * Color name for right label text from the Quasar Color Palette
    */
-  rightLabelTextColor?: string | undefined;
+  rightLabelTextColor?: NamedColor | undefined;
   /**
    * Override default label for min value
    */
@@ -7374,11 +8232,11 @@ export interface QRangeProps {
   /**
    * Color name (from the Quasar Color Palette) for left thumb
    */
-  leftThumbColor?: string | undefined;
+  leftThumbColor?: NamedColor | undefined;
   /**
    * Color name (from the Quasar Color Palette) for right thumb
    */
-  rightThumbColor?: string | undefined;
+  rightThumbColor?: NamedColor | undefined;
   /**
    * Emitted on lazy model value change (after user slides then releases the thumb)
    * @param value New model value
@@ -7490,15 +8348,15 @@ export interface QRatingProps {
   /**
    * Color name for component from the Quasar Color Palette; v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based)
    */
-  color?: string | readonly any[] | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name from the Quasar Palette for selected icons
    */
-  colorSelected?: string | readonly any[] | undefined;
+  colorSelected?: NamedColor | undefined;
   /**
    * Color name from the Quasar Palette for half selected icons
    */
-  colorHalf?: string | readonly any[] | undefined;
+  colorHalf?: NamedColor | undefined;
   /**
    * Does not lower opacity for unselected icons
    */
@@ -7960,15 +8818,15 @@ export interface QSelectProps {
   /**
    * Color name for the label from the Quasar Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused
    */
-  labelColor?: string | undefined;
+  labelColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  bgColor?: string | undefined;
+  bgColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -8642,7 +9500,7 @@ export interface QSeparatorProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSeparatorSlots {}
@@ -8732,19 +9590,19 @@ export interface QSlideItemProps {
   /**
    * Color name for left-side background from the Quasar Color Palette
    */
-  leftColor?: string | undefined;
+  leftColor?: NamedColor | undefined;
   /**
    * Color name for right-side background from the Quasar Color Palette
    */
-  rightColor?: string | undefined;
+  rightColor?: NamedColor | undefined;
   /**
    * Color name for top-side background from the Quasar Color Palette
    */
-  topColor?: string | undefined;
+  topColor?: NamedColor | undefined;
   /**
    * Color name for bottom-side background from the Quasar Color Palette
    */
-  bottomColor?: string | undefined;
+  bottomColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -8925,11 +9783,11 @@ export interface QSliderProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for the track (can be 'transparent' too) from the Quasar Color Palette
    */
-  trackColor?: string | undefined;
+  trackColor?: NamedColor | undefined;
   /**
    * Apply a pattern image on the track
    */
@@ -8937,7 +9795,7 @@ export interface QSliderProps {
   /**
    * Color name for the inner track (can be 'transparent' too) from the Quasar Color Palette
    */
-  innerTrackColor?: string | undefined;
+  innerTrackColor?: NamedColor | undefined;
   /**
    * Apply a pattern image on the inner track
    */
@@ -8945,7 +9803,7 @@ export interface QSliderProps {
   /**
    * Color name for the selection bar (can be 'transparent' too) from the Quasar Color Palette
    */
-  selectionColor?: string | undefined;
+  selectionColor?: NamedColor | undefined;
   /**
    * Apply a pattern image on the selection bar
    */
@@ -8957,11 +9815,11 @@ export interface QSliderProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  labelColor?: string | undefined;
+  labelColor?: NamedColor | undefined;
   /**
    * Color name for component from the Quasar Color Palette
    */
-  labelTextColor?: string | undefined;
+  labelTextColor?: NamedColor | undefined;
   /**
    * Switch the position of the label (top <-> bottom or left <-> right)
    */
@@ -9001,7 +9859,7 @@ export interface QSliderProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  thumbColor?: string | undefined;
+  thumbColor?: NamedColor | undefined;
   /**
    * Set custom thumb svg path
    * Default value: M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0
@@ -9123,7 +9981,7 @@ export interface QSpinnerProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Override value to use for stroke-width
    * Default value: 5
@@ -9143,7 +10001,7 @@ export interface QSpinnerAudioProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerAudioSlots {}
@@ -9159,7 +10017,7 @@ export interface QSpinnerBallProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerBallSlots {}
@@ -9175,7 +10033,7 @@ export interface QSpinnerBarsProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerBarsSlots {}
@@ -9191,7 +10049,7 @@ export interface QSpinnerBoxProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerBoxSlots {}
@@ -9207,7 +10065,7 @@ export interface QSpinnerClockProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerClockSlots {}
@@ -9223,7 +10081,7 @@ export interface QSpinnerCommentProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerCommentSlots {}
@@ -9239,7 +10097,7 @@ export interface QSpinnerCubeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerCubeSlots {}
@@ -9255,7 +10113,7 @@ export interface QSpinnerDotsProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerDotsSlots {}
@@ -9271,7 +10129,7 @@ export interface QSpinnerFacebookProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerFacebookSlots {}
@@ -9287,7 +10145,7 @@ export interface QSpinnerGearsProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerGearsSlots {}
@@ -9303,7 +10161,7 @@ export interface QSpinnerGridProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerGridSlots {}
@@ -9319,7 +10177,7 @@ export interface QSpinnerHeartsProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerHeartsSlots {}
@@ -9335,7 +10193,7 @@ export interface QSpinnerHourglassProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerHourglassSlots {}
@@ -9351,7 +10209,7 @@ export interface QSpinnerInfinityProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerInfinitySlots {}
@@ -9367,7 +10225,7 @@ export interface QSpinnerIosProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerIosSlots {}
@@ -9383,7 +10241,7 @@ export interface QSpinnerOrbitProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerOrbitSlots {}
@@ -9399,7 +10257,7 @@ export interface QSpinnerOvalProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerOvalSlots {}
@@ -9415,7 +10273,7 @@ export interface QSpinnerPieProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerPieSlots {}
@@ -9431,7 +10289,7 @@ export interface QSpinnerPuffProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerPuffSlots {}
@@ -9447,7 +10305,7 @@ export interface QSpinnerRadioProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerRadioSlots {}
@@ -9463,7 +10321,7 @@ export interface QSpinnerRingsProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerRingsSlots {}
@@ -9479,7 +10337,7 @@ export interface QSpinnerTailProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
 }
 
 export interface QSpinnerTailSlots {}
@@ -9582,7 +10440,7 @@ export interface QStepProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Step title
    */
@@ -9602,7 +10460,7 @@ export interface QStepProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  doneColor?: string | undefined;
+  doneColor?: NamedColor | undefined;
   /**
    * Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
    */
@@ -9610,7 +10468,7 @@ export interface QStepProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  activeColor?: string | undefined;
+  activeColor?: NamedColor | undefined;
   /**
    * Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
    */
@@ -9618,7 +10476,7 @@ export interface QStepProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  errorColor?: string | undefined;
+  errorColor?: NamedColor | undefined;
   /**
    * Allow navigation through the header
    * Default value: true
@@ -9726,7 +10584,7 @@ export interface QStepperProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  inactiveColor?: string | undefined;
+  inactiveColor?: NamedColor | undefined;
   /**
    * Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
    */
@@ -9734,7 +10592,7 @@ export interface QStepperProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  doneColor?: string | undefined;
+  doneColor?: NamedColor | undefined;
   /**
    * Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
    */
@@ -9742,7 +10600,7 @@ export interface QStepperProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  activeColor?: string | undefined;
+  activeColor?: NamedColor | undefined;
   /**
    * Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix
    */
@@ -9750,7 +10608,7 @@ export interface QStepperProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  errorColor?: string | undefined;
+  errorColor?: NamedColor | undefined;
   /**
    * Class definitions to be attributed to the header
    */
@@ -10007,7 +10865,7 @@ export interface QTableProps {
    * Color name for component from the Quasar Color Palette
    * Default value: grey-8
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Icon name following Quasar convention for stepping to first page; Make sure you have the icon library installed unless you are using 'img:' prefix
    */
@@ -10526,7 +11384,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10581,7 +11439,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10648,7 +11506,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10711,7 +11569,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10750,7 +11608,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10801,7 +11659,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10844,7 +11702,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10899,7 +11757,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -10938,7 +11796,7 @@ export interface QTableSlots {
     /**
      * Color name for component from the Quasar Color Palette
      */
-    color: string;
+    color: NamedColor;
     /**
      * Notify the component that the background is a dark color
      */
@@ -11773,15 +12631,15 @@ export interface QTabsProps {
   /**
    * The color to be attributed to the text of the active tab
    */
-  activeColor?: string | undefined;
+  activeColor?: NamedColor | undefined;
   /**
    * The color to be attributed to the background of the active tab
    */
-  activeBgColor?: string | undefined;
+  activeBgColor?: NamedColor | undefined;
   /**
    * The color to be attributed to the indicator (the underline) of the active tab
    */
-  indicatorColor?: string | undefined;
+  indicatorColor?: NamedColor | undefined;
   /**
    * Class definitions to be attributed to the content wrapper
    */
@@ -11887,11 +12745,11 @@ export interface QTimeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -12021,7 +12879,7 @@ export interface QTimelineProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by QTimelineEntry side prop
    * Default value: right
@@ -12073,7 +12931,7 @@ export interface QTimelineEntryProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Title of timeline entry; Is overridden if using 'title' slot
    */
@@ -12168,7 +13026,7 @@ export interface QToggleProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Should the color (if specified any) be kept when the component is unticked/ off?
    */
@@ -12196,7 +13054,7 @@ export interface QToggleProps {
   /**
    * Override default icon color (for truthy state only); Color name for component from the Quasar Color Palette
    */
-  iconColor?: string | undefined;
+  iconColor?: NamedColor | undefined;
   /**
    * Emitted when the component needs to change the model; Is also used by v-model
    * @param value New model value
@@ -12434,19 +13292,19 @@ export interface QTreeProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Color name for controls (like checkboxes) from the Quasar Color Palette
    */
-  controlColor?: string | undefined;
+  controlColor?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Color name for selected nodes (from the Quasar Color Palette)
    */
-  selectedColor?: string | undefined;
+  selectedColor?: NamedColor | undefined;
   /**
    * Dense mode; occupies less space
    */
@@ -12873,11 +13731,11 @@ export interface QUploaderProps {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string | undefined;
+  color?: NamedColor | undefined;
   /**
    * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string | undefined;
+  textColor?: NamedColor | undefined;
   /**
    * Notify the component that the background is a dark color
    */
@@ -13327,6 +14185,7 @@ export interface DialogChainObject {
 import { CookiesGetMethodType } from "./api";
 import { QDialogInputPrompt } from "./api";
 import { QDialogSelectionPrompt } from "./api";
+import { NamedColor } from "./api";
 export interface QDialogOptions {
   /**
    * CSS Class name to apply to the Dialog's QCard
@@ -13374,7 +14233,7 @@ export interface QDialogOptions {
         /**
          * Color name for component from the Quasar Color Palette
          */
-        color?: string;
+        color?: NamedColor;
       };
   /**
    * Props for an 'OK' button
@@ -13412,7 +14271,7 @@ export interface QDialogOptions {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string;
+  color?: NamedColor;
   /**
    * Apply dark mode
    */
@@ -13497,15 +14356,15 @@ export interface QLoadingShowOptions {
   /**
    * Color name for spinner from the Quasar Color Palette
    */
-  spinnerColor?: string;
+  spinnerColor?: NamedColor;
   /**
    * Color name for text from the Quasar Color Palette
    */
-  messageColor?: string;
+  messageColor?: NamedColor;
   /**
    * Color name for background from the Quasar Color Palette
    */
-  backgroundColor?: string;
+  backgroundColor?: NamedColor;
   /**
    * One of the QSpinners
    */
@@ -13535,11 +14394,11 @@ export interface QNotifyCreateOptions {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  color?: string;
+  color?: NamedColor;
   /**
-   * Color name for component from the Quasar Color Palette
+   * Overrides text color (if needed); Color name from the Quasar Color Palette
    */
-  textColor?: string;
+  textColor?: NamedColor;
   /**
    * The content of your message
    */
@@ -13559,7 +14418,7 @@ export interface QNotifyCreateOptions {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  iconColor?: string;
+  iconColor?: NamedColor;
   /**
    * Size in CSS units, including unit name
    */
@@ -13575,7 +14434,7 @@ export interface QNotifyCreateOptions {
   /**
    * Color name for component from the Quasar Color Palette
    */
-  spinnerColor?: string;
+  spinnerColor?: NamedColor;
   /**
    * Size in CSS units, including unit name
    */
@@ -13602,11 +14461,11 @@ export interface QNotifyCreateOptions {
   /**
    * Color name for the badge from the Quasar Color Palette
    */
-  badgeColor?: string;
+  badgeColor?: NamedColor;
   /**
    * Color name for the badge text from the Quasar Color Palette
    */
-  badgeTextColor?: string;
+  badgeTextColor?: NamedColor;
   /**
    * Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left
    * Default value: (top-left/top-right)
@@ -13844,6 +14703,327 @@ declare module "./globals" {
 declare module "@vue/runtime-core" {
   interface ComponentCustomProperties {
     $q: QVueGlobals;
+
+    // Directives
+
+    /**
+     * 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
+     */
+    vClosePopup: ClosePopup;
+
+    /**
+     * 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
+     */
+    vIntersection: Intersection;
+
+    /**
+     * 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
+     */
+    vMorph: Morph;
+
+    /**
+     * 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
+     */
+    vMutation: Mutation;
+
+    /**
+     * 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
+     */
+    vRipple: Ripple;
+
+    /**
+     * Function to call when scrolling occurs (use undefined to disable)
+     *
+     * @see https://v2.quasar.dev/vue-directives/scroll
+     */
+    vScroll: Scroll;
+
+    /**
+     * Function to call when scrolling and element comes into the viewport (use undefined to disable)
+     *
+     * @see https://v2.quasar.dev/vue-directives/scroll-fire
+     */
+    vScrollFire: ScrollFire;
+
+    /**
+     * 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
+     */
+    vTouchHold: TouchHold;
+
+    /**
+     * 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
+     */
+    vTouchPan: TouchPan;
+
+    /**
+     * 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
+     */
+    vTouchRepeat: TouchRepeat;
+
+    /**
+     * 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
+     */
+    vTouchSwipe: TouchSwipe;
   }
 }
 
@@ -14120,7 +15300,51 @@ declare module "@vue/runtime-core" {
 }
 
 declare module "./config.d.ts" {
-  interface QuasarConfOptions {
+  interface QuasarUIConfiguration {
+    brand?: {
+      /**
+       * Main color of your app
+       */
+      primary?: string;
+      /**
+       * Secondary color of your app
+       */
+      secondary?: string;
+      /**
+       * Accent color of your app
+       */
+      accent?: string;
+      /**
+       * Dark color of your app
+       */
+      dark?: string;
+      /**
+       * Positive color of your app
+       */
+      positive?: string;
+      /**
+       * Negative color of your app
+       */
+      negative?: string;
+      /**
+       * Info color of your app
+       */
+      info?: string;
+      /**
+       * Warning color of your app
+       */
+      warning?: string;
+      /**
+       * Custom colors of your app, if any
+       */
+      [customColors: string]: string | undefined;
+    };
+    lang?: {
+      /**
+       * Whether to disable `dir` and `lang` HTML attributes getting added to the `<html>` tag. `dir` attribute is crucial when using RTL support. Disable this only if you need to handle these yourself for some reason.
+       */
+      noHtmlAttrs?: boolean;
+    };
     /**
      * "'auto'" uses the OS/browser preference. "true" forces dark mode. "false" forces light mode.
      */
@@ -14154,15 +15378,15 @@ declare module "./config.d.ts" {
       /**
        * Color name for spinner from the Quasar Color Palette
        */
-      spinnerColor?: string;
+      spinnerColor?: NamedColor;
       /**
        * Color name for text from the Quasar Color Palette
        */
-      messageColor?: string;
+      messageColor?: NamedColor;
       /**
        * Color name for background from the Quasar Color Palette
        */
-      backgroundColor?: string;
+      backgroundColor?: NamedColor;
       /**
        * One of the QSpinners
        */
@@ -14173,7 +15397,7 @@ declare module "./config.d.ts" {
       customClass?: string;
     };
     /**
-     * QAjaxBar component props, EXCEPT for 'hijack-filter'
+     * QAjaxBar component props, EXCEPT for 'hijack-filter' in quasar.config file (if using Quasar CLI)
      */
     loadingBar?: QLoadingBarOptions;
     notify?: {
@@ -14184,11 +15408,11 @@ declare module "./config.d.ts" {
       /**
        * Color name for component from the Quasar Color Palette
        */
-      color?: string;
+      color?: NamedColor;
       /**
-       * Color name for component from the Quasar Color Palette
+       * Overrides text color (if needed); Color name from the Quasar Color Palette
        */
-      textColor?: string;
+      textColor?: NamedColor;
       /**
        * The content of your message
        */
@@ -14208,7 +15432,7 @@ declare module "./config.d.ts" {
       /**
        * Color name for component from the Quasar Color Palette
        */
-      iconColor?: string;
+      iconColor?: NamedColor;
       /**
        * Size in CSS units, including unit name
        */
@@ -14224,7 +15448,7 @@ declare module "./config.d.ts" {
       /**
        * Color name for component from the Quasar Color Palette
        */
-      spinnerColor?: string;
+      spinnerColor?: NamedColor;
       /**
        * Size in CSS units, including unit name
        */
@@ -14251,11 +15475,11 @@ declare module "./config.d.ts" {
       /**
        * Color name for the badge from the Quasar Color Palette
        */
-      badgeColor?: string;
+      badgeColor?: NamedColor;
       /**
        * Color name for the badge text from the Quasar Color Palette
        */
-      badgeTextColor?: string;
+      badgeTextColor?: NamedColor;
       /**
        * Notification corner to stick badge to; If notification is on the left side then default is top-right otherwise it is top-left
        * Default value: (top-left/top-right)
@@ -14290,6 +15514,10 @@ declare module "./config.d.ts" {
        * Default value: 5000
        */
       timeout?: number;
+      /**
+       * Notification actions (buttons); Unless 'noDismiss' is true, clicking/tapping on the button will close the notification; Also check 'closeBtn' convenience prop
+       */
+      actions?: QNotifyAction[];
       /**
        * Convenient way to add a dismiss button with a specific label, without using the 'actions' prop; If set to true, it uses a label according to the current Quasar language
        */
@@ -14305,50 +15533,6 @@ declare module "./config.d.ts" {
        */
       bodyClasses?: boolean;
     };
-    brand?: {
-      /**
-       * Main color of your app
-       */
-      primary?: string;
-      /**
-       * Secondary color of your app
-       */
-      secondary?: string;
-      /**
-       * Accent color of your app
-       */
-      accent?: string;
-      /**
-       * Dark color of your app
-       */
-      dark?: string;
-      /**
-       * Positive color of your app
-       */
-      positive?: string;
-      /**
-       * Negative color of your app
-       */
-      negative?: string;
-      /**
-       * Info color of your app
-       */
-      info?: string;
-      /**
-       * Warning color of your app
-       */
-      warning?: string;
-      /**
-       * Custom colors of your app, if any
-       */
-      [customColors: string]: string | undefined;
-    };
-    lang?: {
-      /**
-       * Whether to disable `dir` and `lang` HTML attributes getting added to the `<html>` tag. `dir` attribute is crucial when using RTL support. Disable this only if you need to handle these yourself for some reason.
-       */
-      noHtmlAttrs?: boolean;
-    };
     ripple?:
       | boolean
       | {
@@ -14401,6 +15585,7 @@ declare module "./lang" {
     fr: true;
     gn: true;
     he: true;
+    hi: true;
     hr: true;
     hu: true;
     id: true;
@@ -14471,17 +15656,6 @@ export const Notify: Notify;
 export const Platform: Platform;
 export const Screen: Screen;
 export const SessionStorage: SessionStorage;
-export const ClosePopup: ClosePopup;
-export const Intersection: Intersection;
-export const Morph: Morph;
-export const Mutation: Mutation;
-export const Ripple: Ripple;
-export const Scroll: Scroll;
-export const ScrollFire: ScrollFire;
-export const TouchHold: TouchHold;
-export const TouchPan: TouchPan;
-export const TouchRepeat: TouchRepeat;
-export const TouchSwipe: TouchSwipe;
 export const QAjaxBar: ComponentConstructor<QAjaxBar>;
 export const QAvatar: ComponentConstructor<QAvatar>;
 export const QBadge: ComponentConstructor<QBadge>;
@@ -14734,17 +15908,324 @@ declare module "./plugin" {
   }
 
   interface QuasarDirectives {
-    ClosePopup?: ClosePopup;
-    Intersection?: Intersection;
-    Morph?: Morph;
-    Mutation?: Mutation;
-    Ripple?: Ripple;
-    Scroll?: Scroll;
-    ScrollFire?: ScrollFire;
-    TouchHold?: TouchHold;
-    TouchPan?: TouchPan;
-    TouchRepeat?: TouchRepeat;
-    TouchSwipe?: TouchSwipe;
+    /**
+     * 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
+     */
+    vClosePopup: ClosePopup;
+
+    /**
+     * 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
+     */
+    vIntersection: Intersection;
+
+    /**
+     * 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
+     */
+    vMorph: Morph;
+
+    /**
+     * 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
+     */
+    vMutation: Mutation;
+
+    /**
+     * 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
+     */
+    vRipple: Ripple;
+
+    /**
+     * Function to call when scrolling occurs (use undefined to disable)
+     *
+     * @see https://v2.quasar.dev/vue-directives/scroll
+     */
+    vScroll: Scroll;
+
+    /**
+     * Function to call when scrolling and element comes into the viewport (use undefined to disable)
+     *
+     * @see https://v2.quasar.dev/vue-directives/scroll-fire
+     */
+    vScrollFire: ScrollFire;
+
+    /**
+     * 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
+     */
+    vTouchHold: TouchHold;
+
+    /**
+     * 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
+     */
+    vTouchPan: TouchPan;
+
+    /**
+     * 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
+     */
+    vTouchRepeat: TouchRepeat;
+
+    /**
+     * 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
+     */
+    vTouchSwipe: TouchSwipe;
   }
 
   interface QuasarPlugins {