feat(ui): generate types for vue directives #16068
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
there is no way to represent arg and modifiers in TS yet, so we document them via comments
Build ResultsJSON API📜 Changes detected: diff --git a/./current-build/api/Morph.json b/./pr-build/api/Morph.json
index a7603f8..57be5fa 100644
--- a/./current-build/api/Morph.json
+++ b/./pr-build/api/Morph.json
@@ -114,7 +114,7 @@
"type": [
"Number",
"String",
- "Promise"
+ "Promise<void>"
],
"desc": "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": "0",
diff --git a/./current-build/api/Scroll.json b/./pr-build/api/Scroll.json
index 9be5f0b..38e127c 100644
--- a/./current-build/api/Scroll.json
+++ b/./pr-build/api/Scroll.json
@@ -4,8 +4,11 @@
"docsUrl": "https://v2.quasar.dev/vue-directives/scroll"
},
"value": {
- "type": "Function",
- "desc": "Function to call when scrolling occurs (use a non-function to disable)",
+ "type": [
+ "Function",
+ "undefined"
+ ],
+ "desc": "Function to call when scrolling occurs (use undefined to disable)",
"params": {
"verticalScrollPosition": {
"type": "Number",
@@ -19,7 +22,7 @@
"returns": null,
"examples": [
"v-scroll=\"fnToCall\"",
- "v-scroll=\"void 0\""
+ "v-scroll=\"undefined\""
]
}
}
\ No newline at end of file
diff --git a/./current-build/api/ScrollFire.json b/./pr-build/api/ScrollFire.json
index a1916d1..973b876 100644
--- a/./current-build/api/ScrollFire.json
+++ b/./pr-build/api/ScrollFire.json
@@ -4,8 +4,11 @@
"docsUrl": "https://v2.quasar.dev/vue-directives/scroll-fire"
},
"value": {
- "type": "Function",
- "desc": "Function to call when scrolling and element comes into the viewport (use a non-function to disable)",
+ "type": [
+ "Function",
+ "undefined"
+ ],
+ "desc": "Function to call when scrolling and element comes into the viewport (use undefined to disable)",
"params": {
"el": {
"type": "Element",
@@ -15,7 +18,7 @@
"returns": null,
"examples": [
"v-scroll-fire=\"fnToCall\"",
- "v-scroll-fire=\"void 0\""
+ "v-scroll-fire=\"undefined\""
]
}
}
\ No newline at end of file
diff --git a/./current-build/api/TouchHold.json b/./pr-build/api/TouchHold.json
index 6147d8b..34010df 100644
--- a/./current-build/api/TouchHold.json
+++ b/./pr-build/api/TouchHold.json
@@ -4,8 +4,11 @@
"docsUrl": "https://v2.quasar.dev/vue-directives/touch-hold"
},
"value": {
- "type": "Function",
- "desc": "Function to call after user has hold touch/click for the specified amount of time (use a non-function to disable)",
+ "type": [
+ "Function",
+ "undefined"
+ ],
+ "desc": "Function to call after user has hold touch/click for the specified amount of time (use undefined to disable)",
"params": {
"details": {
"type": "Object",
@@ -47,7 +50,7 @@
"returns": null,
"examples": [
"v-touch-hold=\"fnToCall\"",
- "v-touch-hold=\"void 0\""
+ "v-touch-hold=\"undefined\""
]
},
"arg": {
diff --git a/./current-build/api/TouchPan.json b/./pr-build/api/TouchPan.json
index b3f1ed9..f6ae851 100644
--- a/./current-build/api/TouchPan.json
+++ b/./pr-build/api/TouchPan.json
@@ -4,8 +4,11 @@
"docsUrl": "https://v2.quasar.dev/vue-directives/touch-pan"
},
"value": {
- "type": "Function",
- "desc": "Handler for panning (use a non-function to disable)",
+ "type": [
+ "Function",
+ "undefined"
+ ],
+ "desc": "Handler for panning (use undefined to disable)",
"params": {
"details": {
"type": "Object",
@@ -115,7 +118,7 @@
"returns": null,
"examples": [
"v-touch-pan=\"fnToCall\"",
- "v-touch-pan=\"void 0\""
+ "v-touch-pan=\"undefined\""
]
},
"modifiers": {
diff --git a/./current-build/api/TouchRepeat.json b/./pr-build/api/TouchRepeat.json
index 99f7169..9da309b 100644
--- a/./current-build/api/TouchRepeat.json
+++ b/./pr-build/api/TouchRepeat.json
@@ -4,8 +4,11 @@
"docsUrl": "https://v2.quasar.dev/vue-directives/touch-repeat"
},
"value": {
- "type": "Function",
- "desc": "Handler for touch-repeat (use a non-function to disable)",
+ "type": [
+ "Function",
+ "undefined"
+ ],
+ "desc": "Handler for touch-repeat (use undefined to disable)",
"params": {
"details": {
"type": "Object",
@@ -63,7 +66,7 @@
"returns": null,
"examples": [
"v-touch-repeat=\"fnToCall\"",
- "v-touch-repeat=\"void 0\""
+ "v-touch-repeat=\"undefined\""
]
},
"arg": {
diff --git a/./current-build/api/TouchSwipe.json b/./pr-build/api/TouchSwipe.json
index 4091c31..e4eab45 100644
--- a/./current-build/api/TouchSwipe.json
+++ b/./pr-build/api/TouchSwipe.json
@@ -4,8 +4,11 @@
"docsUrl": "https://v2.quasar.dev/vue-directives/touch-swipe"
},
"value": {
- "type": "Function",
- "desc": "Handler for swipe (use a non-function to disable)",
+ "type": [
+ "Function",
+ "undefined"
+ ],
+ "desc": "Handler for swipe (use undefined to disable)",
"params": {
"details": {
"type": "Object",
@@ -57,7 +60,7 @@
"returns": null,
"examples": [
"v-touch-swipe=\"fnToCall\"",
- "v-touch-swipe=\"void 0\""
+ "v-touch-swipe=\"undefined\""
]
},
"arg": {Types📜 Changes detected: diff --git a/./current-build/types/index.d.ts b/./pr-build/types/index.d.ts
index a62a907..69a291e 100644
--- a/./current-build/types/index.d.ts
+++ b/./pr-build/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 {
@@ -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
@@ -13844,6 +14697,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;
}
}
@@ -14471,17 +15645,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 +15897,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 { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What kind of change does this PR introduce?
Does this PR introduce a breaking change?
The PR fulfills these requirements:
devbranch (orv[X]branch)Other information:
Resolves #15798. This was already planned way before the discussion thread, but linking it anyway.
The types we are generating for directives will no longer be empty interfaces. They will now use the
Directive<Target, Value>type.Volar, unfortunately, doesn't provide auto-completion for directives when doing
v-. I am not sure if this is a known issue. But, it recognizes them and does type-checking. It's not possible to strongly type arg and modifiers, so they are documented as comments. It will be possible with vuejs/core#3399, but without the ability to add an extra explanation for individual things from the way it is structured, it seems. So, the comments will be useful in any case.We are now generating new types for each directive with the
Valuesuffix(e.g.TouchPanValue) which holds the type of the value the directive expects. This type can be used to create variables to feed to the directive. Here is an example:Extra screenshots: