quasar 2.8.3 → 2.9.0

package/dist/transforms/import-map.json

@@ -180,6 +180,7 @@
   "debounce": "src/utils/debounce.js",
   "dom": "src/utils/dom.js",
   "event": "src/utils/event.js",
+  "EventBus": "src/utils/EventBus.js",
   "exportFile": "src/utils/export-file.js",
   "extend": "src/utils/extend.js",
   "format": "src/utils/format.js",
@@ -190,6 +191,7 @@
   "openURL": "src/utils/open-url.js",
   "patterns": "src/utils/patterns.js",
   "preventScroll": "src/utils/prevent-scroll.js",
+  "runSequentialPromises": "src/utils/run-sequential-promises.js",
   "scroll": "src/utils/scroll.js",
   "setCssVar": "src/utils/set-css-var.js",
   "throttle": "src/utils/throttle.js",

package/dist/types/api/qeditor.d.ts

@@ -0,0 +1,17 @@
+// src/components/editor/editor-caret.js#Caret
+// We are not exposing the whole API, just the ones that might be needed outside.
+export interface QEditorCaret {
+  readonly selection: Selection | null;
+  readonly hasSelection: boolean;
+  readonly range: Range | null;
+  readonly parent: Element | null;
+  readonly blockParent: Element | null;
+
+  save(range: Range): void;
+  restore(range?: Range): void;
+  savePosition(): void;
+  restorePosition(length?: number): void;
+  is(commandId: string, param?: string): boolean;
+  can(commandId: string): boolean;
+  apply(commandId: string, param?: string, done?: () => void): boolean;
+}

package/dist/types/api/qloading.d.ts

@@ -0,0 +1,5 @@
+// Error on "quasar" import shown in IDE is normal, as we only have Components/Directives/Plugins types after the build step
+// The import will work correctly at runtime
+import { QLoadingShowOptions } from "quasar";
+
+export type QLoadingUpdateOptions = Omit<QLoadingShowOptions, 'group'>;

package/dist/types/api.d.ts

@@ -6,6 +6,8 @@ export * from "./api/qtable";
 export * from "./api/qtree";
 export * from "./api/quploader";
 export * from "./api/qnotify";
+export * from "./api/qeditor";
+export * from "./api/qloading";
 export * from "./api/touchswipe";
 export * from "./api/web-storage";
 export * from "./api/validation";

package/dist/types/index.d.ts

@@ -1110,6 +1110,28 @@ export interface QBreadcrumbsElProps {
    * Default value: true
    */
   ripple?: boolean | any | undefined;
+  /**
+   * Emitted when the component is clicked
+   * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
+   * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
+   */
+  onClick?: (
+    evt: Event,
+    go?: (opts?: {
+      /**
+       * Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
+       */
+      to?: string | any;
+      /**
+       * Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
+       */
+      replace?: boolean;
+      /**
+       * Return the router error, if any; Otherwise the returned Promise will always fulfill
+       */
+      returnRouterError?: boolean;
+    }) => Promise<any>
+  ) => void;
 }
 
 export interface QBreadcrumbsElSlots {
@@ -1351,6 +1373,10 @@ export interface QBtnDropdownProps {
    * An array of two numbers to offset the menu horizontally and vertically in pixels
    */
   menuOffset?: readonly any[] | undefined;
+  /**
+   * aria-label to be used on the dropdown toggle element
+   */
+  toggleAriaLabel?: string | undefined;
   /**
    * Emitted when showing/hidden state changes; Is also used by v-model
    * @param value New state (showing/hidden)
@@ -1765,11 +1791,27 @@ export interface QBtnProps {
    */
   darkPercentage?: boolean | undefined;
   /**
-   * Emitted when component is clicked (activated)
-   * @param evt JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false
-   * @param navigateFn When you need to control the time at which the button should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation
+   * Emitted when the component is clicked
+   * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
+   * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
    */
-  onClick?: (evt: Event, navigateFn: () => void) => void;
+  onClick?: (
+    evt: Event,
+    go?: (opts?: {
+      /**
+       * Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
+       */
+      to?: string | any;
+      /**
+       * Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
+       */
+      replace?: boolean;
+      /**
+       * Return the router error, if any; Otherwise the returned Promise will always fulfill
+       */
+      returnRouterError?: boolean;
+    }) => Promise<any>
+  ) => void;
 }
 
 export interface QBtnSlots {
@@ -2409,6 +2451,10 @@ export interface QChipProps {
    * Default value: true
    */
   ripple?: boolean | any | undefined;
+  /**
+   * aria-label to be used on the remove icon
+   */
+  removeAriaLabel?: string | undefined;
   /**
    * Tabindex HTML attribute value
    */
@@ -2478,6 +2524,10 @@ export interface QCircularProgressProps {
    * Default value: 0.25em
    */
   fontSize?: string | undefined;
+  /**
+   * Rounding the arc of progress
+   */
+  rounded?: boolean | undefined;
   /**
    * Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size
    * Default value: 0.2
@@ -3423,6 +3473,10 @@ export interface QEditor extends ComponentPublicInstance<QEditorProps> {
    * @returns Provides the pure HTML within the editable area
    */
   getContentEl: () => Element;
+  /**
+   * The current caret state
+   */
+  readonly caret: QEditorCaret;
 }
 
 export interface QExpansionItemProps {
@@ -3478,6 +3532,10 @@ export interface QExpansionItemProps {
    * Apply custom class(es) to the expand icon item section
    */
   expandIconClass?: VueClassProp | undefined;
+  /**
+   * aria-label to be used on the expansion toggle element
+   */
+  toggleAriaLabel?: string | undefined;
   /**
    * Header label (unless using 'header' slot)
    */
@@ -3523,6 +3581,10 @@ export interface QExpansionItemProps {
    * Puts expansion item into open state on initial render; Overridden by v-model if used
    */
   defaultOpened?: boolean | undefined;
+  /**
+   * Do not show the expand icon
+   */
+  hideExpandIcon?: boolean | undefined;
   /**
    * Applies the expansion events to the expand icon only and not to the whole header
    */
@@ -3600,6 +3662,25 @@ export interface QExpansionItemSlots {
      * QExpansionItem expanded status
      */
     expanded: boolean;
+    /**
+     * QExpansionItem details panel id (for use in aria-controls)
+     */
+    detailsId: string;
+    /**
+     * Triggers component to show
+     * @param evt JS event object
+     */
+    show: (evt?: any) => void;
+    /**
+     * Triggers component to hide
+     * @param evt JS event object
+     */
+    hide: (evt?: any) => void;
+    /**
+     * Triggers component to toggle between show/hide
+     * @param evt JS event object
+     */
+    toggle: (evt?: any) => void;
   }) => VNode[];
 }
 
@@ -5499,6 +5580,28 @@ export interface QItemProps {
    * Determines focus state, ONLY if 'manual-focus' is enabled / set to true
    */
   focused?: boolean | undefined;
+  /**
+   * Emitted when the component is clicked
+   * @param evt JS event object; If you are using route navigation ('to'/'replace' props) and you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
+   * @param go Available ONLY if you are using route navigation ('to'/'replace' props); When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
+   */
+  onClick?: (
+    evt: Event,
+    go?: (opts?: {
+      /**
+       * Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
+       */
+      to?: string | any;
+      /**
+       * Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
+       */
+      replace?: boolean;
+      /**
+       * Return the router error, if any; Otherwise the returned Promise will always fulfill
+       */
+      returnRouterError?: boolean;
+    }) => Promise<any>
+  ) => void;
 }
 
 export interface QItemSlots {
@@ -7286,6 +7389,10 @@ export interface QRatingProps {
    * Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)
    */
   iconHalf?: string | readonly any[] | undefined;
+  /**
+   * Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used
+   */
+  iconAriaLabel?: string | readonly any[] | undefined;
   /**
    * 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)
    */
@@ -9789,7 +9896,7 @@ export interface QTableProps {
    */
   virtualScrollItemSize?: number | string | undefined;
   /**
-   * Size in pixels of the sticky header (if using one); A correct value will improve scroll precision
+   * Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method
    * Default value: 0
    */
   virtualScrollStickySizeStart?: number | string | undefined;
@@ -11451,11 +11558,27 @@ export interface QRouteTabProps {
    */
   tabindex?: number | string | undefined;
   /**
-   * Emitted when component is clicked (activated)
-   * @param evt JS event object; If you want to cancel navigation set synchronously 'evt.navigate' to false
-   * @param navigateFn When you need to control the time at which the tab should trigger the route navigation then set 'evt.navigate' to false and call this function; Useful if you have async work to be done before the actual route navigation
+   * Emitted when the component is clicked
+   * @param evt JS event object; If you want to cancel navigation then call evt.preventDefault() synchronously in your event handler
+   * @param go When you need to control the time at which the component should trigger the route navigation then call evt.preventDefault() synchronously and then call this function at your convenience; Useful if you have async work to be done before the actual route navigation or if you want to redirect somewhere else
    */
-  onClick?: (evt: Event, navigateFn: () => void) => void;
+  onClick?: (
+    evt: Event,
+    go?: (opts?: {
+      /**
+       * Equivalent to Vue Router <router-link> 'to' property; Specify it explicitly otherwise it will be set with same value as component's 'to' prop
+       */
+      to?: string | any;
+      /**
+       * Equivalent to Vue Router <router-link> 'replace' property; Specify it explicitly otherwise it will be set with same value as component's 'replace' prop
+       */
+      replace?: boolean;
+      /**
+       * Return the router error, if any; Otherwise the returned Promise will always fulfill
+       */
+      returnRouterError?: boolean;
+    }) => Promise<any>
+  ) => void;
 }
 
 export interface QRouteTabSlots {
@@ -13573,6 +13696,7 @@ export interface QEditorCommand {
 }
 
 import { VueStyleObjectProp } from "./api";
+import { QEditorCaret } from "./api";
 import { ValidationRule } from "./api";
 import { QRejectedEntry } from "./api";
 import { SliderMarkerLabels } from "./api";

package/dist/types/utils/is.d.ts

@@ -0,0 +1,67 @@
+interface is {
+  /**
+   * Recursively checks if one Object is equal to another.
+   * Also supports Map, Set, ArrayBuffer, Regexp, Date, and many more.
+   *
+   * @example
+   * const objA = { foo: 1, bar: { baz: 2 } }
+   * const objB = { foo: 1, bar: { baz: 2 } }
+   * objA === objB // false
+   * is.deepEqual(objA, objB) // true
+   */
+  // Can't do it both ways, see: https://github.com/microsoft/TypeScript/issues/26916#issuecomment-555691585
+  deepEqual<T>(obj1: T, obj2: unknown): obj2 is T;
+
+  /**
+   * Checks if a value is an object.
+   * Note: Map, Set, ArrayBuffer, Regexp, Date, etc. are also objects,
+   * but null and Arrays are not.
+   *
+   * @example
+   * is.object({}) // true
+   * is.object([]) // false
+   * is.object(null) // false
+   * is.object(1) // false
+   * is.object(new Map()) // true
+   * is.object(new Set()) // true
+   */
+  object<T>(val: T): val is Record<any, any>;
+
+  /**
+   * Checks if a value is a Date object.
+   *
+   * @see `date.isValid()` If you want to check if a value is a valid date string or number
+   *
+   * @example
+   * is.date(new Date()) // true
+   * is.date(Date.now()) // false
+   * is.date(new Date('2022-09-24T11:00:00.000Z')) // true
+   * is.date('2022-09-24') // false
+   */
+  date(val: unknown): val is Date;
+
+  /**
+   * Checks if a value is a RegExp.
+   *
+   * @example <caption>Literal notation</caption>
+   * is.regexp(/foo/); // true
+   * @example <caption>Constructor</caption>
+   * is.regexp(new RegExp('bar', 'g')); // true
+   */
+  regexp(val: unknown): val is RegExp;
+
+  /**
+   * Checks if a value is a finite number.
+   * Note: BigInts, NaN, and Infinity values are not considered as numbers.
+   *
+   * @example
+   * is.number(1); // true
+   * is.number('1'); // false
+   * is.number(1n); // false
+   * is.number(NaN); // false
+   * is.number(Infinity); // false
+   */
+  number(val: unknown): val is number;
+}
+
+export declare const is: is;

package/dist/types/utils/run-sequential-promises.d.ts

@@ -0,0 +1,119 @@
+export interface RunSequentialPromisesFulfilledResult<
+  TKey extends number | string,
+  TValue
+> {
+  key: TKey;
+  status: "fulfilled";
+  value: TValue;
+}
+
+/**
+ * When using `runSequentialPromises` without `abortOnFail: false`, the Promise will reject with this type.
+ * You can use this type to strongly-type the result yourself as it can't be automatically inferred.
+ *
+ * @example
+ * runSequentialPromises([
+ *   () => Promise.resolve('value1'),
+ *   () => Promise.reject(new Error('test')),
+ *   () => Promise.resolve('value2'),
+ * ])
+ * // First generic param is `number` because we are using array-style
+ * // Second generic param is `string` because we are resolving with string values
+ * .catch((errResult: RunSequentialPromisesRejectedResult<number, string>) => {
+ *   // ...
+ *   errResult.reason // `any` because you can reject with anything, you can cast it as you wish
+ * })
+ */
+export interface RunSequentialPromisesRejectedResult<
+  TKey extends number | string,
+  TValue
+> {
+  key: TKey;
+  status: "rejected";
+  reason: any;
+  resultAggregator: TKey extends number
+    ? RunSequentialPromisesResult<TKey, TValue>[]
+    : { [key in TKey]?: RunSequentialPromisesResult<TKey, TValue> };
+}
+
+export type RunSequentialPromisesResult<TKey extends number | string, TValue> =
+  | RunSequentialPromisesFulfilledResult<TKey, TValue>
+  | RunSequentialPromisesRejectedResult<TKey, TValue>;
+
+export interface RunSequentialPromisesOptions {
+  /**
+   * When making HTTP requests, be aware of the maximum threads that
+   * the hosting browser supports (usually 5). Any number of threads
+   * above that won't add any real benefits.
+   *
+   * @default 1
+   */
+  threadsNumber?: number;
+
+  /**
+   * When set to `false`, the result Promise will never get rejected (no catch() needed)
+   * Otherwise, if one of the sequential Promises gets rejected, the Promise will be
+   * rejected with {@link RunSequentialPromisesRejectedResult}
+   *
+   * @default true
+   */
+  abortOnFail?: boolean;
+}
+
+/**
+ * Run a list of Promises sequentially, optionally on multiple threads.
+ *
+ * @see https://quasar.dev/quasar-utils/other-utils#runsequentialpromises
+ *
+ * @throws {RunSequentialPromisesRejectedResult} when a Promise rejects (when `options.abortOnFail` is not false)
+ */
+// Array-style overrides
+export function runSequentialPromises<
+  TValue = any,
+  TKey extends number = number
+>(
+  promises: ((
+    resultAggregator: RunSequentialPromisesResult<TKey, TValue>[]
+  ) => Promise<TValue>)[],
+  options: Omit<RunSequentialPromisesOptions, "abortOnFail"> & {
+    abortOnFail: false;
+  }
+): Promise<RunSequentialPromisesResult<TKey, TValue>[]>;
+export function runSequentialPromises<
+  TValue = any,
+  TKey extends number = number
+>(
+  promises: ((
+    resultAggregator: RunSequentialPromisesFulfilledResult<TKey, TValue>[]
+  ) => Promise<TValue>)[],
+  options?: RunSequentialPromisesOptions
+): Promise<RunSequentialPromisesFulfilledResult<TKey, TValue>[]>;
+// Object-style overrides
+export function runSequentialPromises<
+  TValue = any,
+  TKey extends string = string
+>(
+  promisesMap: {
+    [key in TKey]: (resultAggregator: {
+      [key in TKey]?: RunSequentialPromisesResult<TKey, TValue>;
+    }) => Promise<TValue>;
+  },
+  options?: Omit<RunSequentialPromisesOptions, "abortOnFail"> & {
+    abortOnFail: false;
+  }
+): Promise<{
+  [key in TKey]: RunSequentialPromisesResult<TKey, TValue>;
+}>;
+export function runSequentialPromises<
+  TValue = any,
+  TKey extends string = string
+>(
+  promisesMap: {
+    [key in TKey]: (resultAggregator: {
+      [key in TKey]?: RunSequentialPromisesFulfilledResult<TKey, TValue>;
+    }) => Promise<TValue>;
+  },
+  options?: RunSequentialPromisesOptions
+): Promise<{
+  [key in TKey]: RunSequentialPromisesFulfilledResult<TKey, TValue>;
+}>;

package/dist/types/utils.d.ts

@@ -19,6 +19,8 @@ export * from './utils/dom';
 export * from './utils/event';
 export * from './utils/format';
 export * from './utils/scroll';
+export * from './utils/is';
+export * from './utils/run-sequential-promises';
 
 import { VueStyleObjectProp } from "./api/vue-prop-types";
 
@@ -99,6 +101,13 @@ export function setCssVar(
   element?: Element
 ): void;
 
+export class EventBus {
+  on (event: string, callback: Function, ctx?: any): this;
+  once (event: string, callback: Function, ctx?: any): this;
+  emit (event: string, ...args: any[]): this;
+  off (event: string, callback?: Function): this;
+}
+
 interface CreateMetaMixinContext extends ComponentPublicInstance {
   [index: string]: any;
 }

package/dist/vetur/quasar-attributes.json

@@ -363,6 +363,10 @@
     "type": "array",
     "description": "An array of two numbers to offset the menu horizontally and vertically in pixels"
   },
+  "q-btn-dropdown/toggle-aria-label": {
+    "type": "string",
+    "description": "aria-label to be used on the dropdown toggle element"
+  },
   "q-btn-group/spread": {
     "type": "boolean",
     "description": "Spread horizontally to all available space"
@@ -1007,6 +1011,10 @@
     "type": "boolean|object",
     "description": "Configure material ripple (disable it by setting it to 'false' or supply a config object)"
   },
+  "q-chip/remove-aria-label": {
+    "type": "string",
+    "description": "aria-label to be used on the remove icon"
+  },
   "q-chip/tabindex": {
     "type": "number|string",
     "description": "Tabindex HTML attribute value"
@@ -1047,6 +1055,10 @@
     "type": "string",
     "description": "Size of text in CSS units, including unit name. Suggestion: use 'em' units to sync with component size"
   },
+  "q-circular-progress/rounded": {
+    "type": "boolean",
+    "description": "Rounding the arc of progress"
+  },
   "q-circular-progress/thickness": {
     "type": "number",
     "description": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size"
@@ -1559,6 +1571,10 @@
     "type": "string|array|object",
     "description": "Apply custom class(es) to the expand icon item section"
   },
+  "q-expansion-item/toggle-aria-label": {
+    "type": "string",
+    "description": "aria-label to be used on the expansion toggle element"
+  },
   "q-expansion-item/label": {
     "type": "string",
     "description": "Header label (unless using 'header' slot)"
@@ -1603,6 +1619,10 @@
     "type": "boolean",
     "description": "Puts expansion item into open state on initial render; Overridden by v-model if used"
   },
+  "q-expansion-item/hide-expand-icon": {
+    "type": "boolean",
+    "description": "Do not show the expand icon"
+  },
   "q-expansion-item/expand-icon-toggle": {
     "type": "boolean",
     "description": "Applies the expansion events to the expand icon only and not to the whole header"
@@ -3671,6 +3691,10 @@
     "type": "string|array",
     "description": "Icon name following Quasar convention to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based)"
   },
+  "q-rating/icon-aria-label": {
+    "type": "string|array",
+    "description": "Label to be set on aria-label for Icon; If an array is provided each rating value will use the corresponding aria-label in the array (0 based); If string value is provided the rating value will be appended; If not provided the name of the icon will be used"
+  },
   "q-rating/color": {
     "type": "string|array",
     "description": "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)"
@@ -4841,7 +4865,7 @@
   },
   "q-table/virtual-scroll-sticky-size-start": {
     "type": "number|string",
-    "description": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision"
+    "description": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision; Will be also used for non-virtual-scroll tables for fixing top alignment when using scrollTo method"
   },
   "q-table/virtual-scroll-sticky-size-end": {
     "type": "number|string",

package/dist/vetur/quasar-tags.json

@@ -126,7 +126,8 @@
       "auto-close",
       "menu-anchor",
       "menu-self",
-      "menu-offset"
+      "menu-offset",
+      "toggle-aria-label"
     ],
     "description": ""
   },
@@ -348,6 +349,7 @@
       "clickable",
       "removable",
       "ripple",
+      "remove-aria-label",
       "tabindex",
       "disable"
     ],
@@ -363,6 +365,7 @@
       "center-color",
       "track-color",
       "font-size",
+      "rounded",
       "thickness",
       "angle",
       "indeterminate",
@@ -521,6 +524,7 @@
       "expand-icon",
       "expanded-icon",
       "expand-icon-class",
+      "toggle-aria-label",
       "label",
       "label-lines",
       "caption",
@@ -532,6 +536,7 @@
       "content-inset-level",
       "expand-separator",
       "default-opened",
+      "hide-expand-icon",
       "expand-icon-toggle",
       "switch-toggle-side",
       "dense-toggle",
@@ -1232,6 +1237,7 @@
       "icon",
       "icon-selected",
       "icon-half",
+      "icon-aria-label",
       "color",
       "color-selected",
       "color-half",