quasar 2.7.7 → 2.8.1

package/dist/transforms/import-map.json

@@ -185,6 +185,7 @@
   "format": "src/utils/format.js",
   "frameDebounce": "src/utils/frame-debounce.js",
   "getCssVar": "src/utils/get-css-var.js",
+  "is": "src/utils/is.js",
   "morph": "src/utils/morph.js",
   "openURL": "src/utils/open-url.js",
   "patterns": "src/utils/patterns.js",

package/dist/types/index.d.ts

@@ -244,57 +244,14 @@ export interface Loading {
   /**
    * Activate and show
    * @param opts All props are optional
+   * @returns Calling this function with no parameters hides the group; When called with one Object parameter then it updates the Loading group (specified properties are shallow merged with the group ones; note that group cannot be changed while updating and it is ignored)
    */
-  show: (opts?: {
-    /**
-     * Wait a number of millisecond before showing; Not worth showing for 100ms for example then hiding it, so wait until you're sure it's a process that will take some considerable amount of time
-     */
-    delay?: number;
-    /**
-     * Message to display
-     */
-    message?: string;
-    /**
-     * Render the message as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
-     */
-    html?: boolean;
-    /**
-     * Content wrapped element custom classes
-     */
-    boxClass?: string;
-    /**
-     * Spinner size (in pixels)
-     */
-    spinnerSize?: number;
-    /**
-     * Color name for spinner from the Quasar Color Palette
-     */
-    spinnerColor?: string;
-    /**
-     * Color name for text from the Quasar Color Palette
-     */
-    messageColor?: string;
-    /**
-     * Color name for background from the Quasar Color Palette
-     */
-    backgroundColor?: string;
-    /**
-     * One of the QSpinners
-     */
-    spinner?: Component;
-    /**
-     * Add a CSS class to easily customize the component
-     */
-    customClass?: string;
-    /**
-     * Ignore the default configuration (set by setDefaults()) for this instance only
-     */
-    ignoreDefaults?: boolean;
-  }) => void;
+  show: (opts?: QLoadingShowOptions) => (props?: QLoadingUpdateOptions) => void;
   /**
    * Hide it
+   * @param group Optional Loading group name to hide instead of hiding all groups
    */
-  hide: () => void;
+  hide: (group?: string) => void;
   /**
    * Merge options into the default ones
    * @param opts Pick the subprop you want to define
@@ -308,6 +265,11 @@ export interface Loading {
      * Message to display
      */
     message?: string;
+    /**
+     * Default Loading group name
+     * Default value: __default_quasar_group__
+     */
+    group?: string;
     /**
      * Spinner size (in pixels)
      */
@@ -1430,6 +1392,10 @@ export interface QBtnDropdownSlots {
    * Customize main button's content through this slot, unless you're using the 'icon' and 'label' props
    */
   label: () => VNode[];
+  /**
+   * Override the default QSpinner when in 'loading' state
+   */
+  loading: () => VNode[];
 }
 
 export interface QBtnDropdown
@@ -3355,58 +3321,9 @@ export interface QEditorProps {
   definitions?:
     | {
         /**
-         * Label of the button
-         */
-        label?: string;
-        /**
-         * Text to be displayed as a tooltip on hover
+         * Command definition
          */
-        tip?: string;
-        /**
-         * HTML formatted text to be displayed within a tooltip on hover
-         */
-        htmlTip?: string;
-        /**
-         * Icon of the button
-         */
-        icon?: string;
-        /**
-         * Keycode of a key to be used together with the <ctrl> key for use as a shortcut to trigger this element
-         */
-        key?: number;
-        /**
-         * Either this or "cmd" is required. Function for when button gets clicked/tapped.
-         */
-        handler?: () => void;
-        /**
-         * Either this or "handler" is required. This must be a valid execCommand method according to the designMode API.
-         */
-        cmd?: string;
-        /**
-         * Only set a param if using a "cmd". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.
-         */
-        param?: string;
-        /**
-         * Is button disabled?
-         * @returns If true, the button will be disabled
-         */
-        disable?: boolean | (() => boolean);
-        /**
-         * Pass the value "no-state" if the button should not have an "active" state
-         */
-        type?: "no-state";
-        /**
-         * Lock the button label, so it doesn't change based on the child option selected.
-         */
-        fixedLabel?: boolean;
-        /**
-         * Lock the button icon, so it doesn't change based on the child option selected.
-         */
-        fixedIcon?: boolean;
-        /**
-         * Highlight the toolbar button, when a child option has been selected.
-         */
-        highlight?: boolean;
+        [commandName: string]: QEditorCommand;
       }
     | undefined;
   /**
@@ -4291,6 +4208,10 @@ export interface QField extends ComponentPublicInstance<QFieldProps> {
    * Blur field (lose focus)
    */
   blur: () => void;
+  /**
+   * Whether the component is in error state
+   */
+  readonly hasError: boolean;
 }
 
 export interface QFileProps {
@@ -4653,6 +4574,10 @@ export interface QFile extends ComponentPublicInstance<QFileProps> {
    * @returns The underlying native input DOM Element
    */
   getNativeElement: () => any;
+  /**
+   * Whether the component is in error state
+   */
+  readonly hasError: boolean;
 }
 
 export interface QFooterProps {
@@ -5442,6 +5367,10 @@ export interface QInput extends ComponentPublicInstance<QInputProps> {
    * @returns The underlying native input/textarea DOM Element
    */
   getNativeElement: () => any;
+  /**
+   * Whether the component is in error state
+   */
+  readonly hasError: boolean;
 }
 
 export interface QIntersectionProps {
@@ -8481,6 +8410,10 @@ export interface QSelect extends ComponentPublicInstance<QSelectProps> {
    * @returns Option is disabled or not
    */
   isOptionDisabled: (opt: any) => boolean;
+  /**
+   * Whether the component is in error state
+   */
+  readonly hasError: boolean;
 }
 
 export interface QSeparatorProps {
@@ -10244,19 +10177,9 @@ export interface QTableProps {
       rowsPerPage: number;
     };
     /**
-     * Filter method (the 'filter-method' prop)
-     * @param rows Array of rows
-     * @param terms Terms to filter with (is essentially the 'filter' prop value)
-     * @param cols Optional column definitions
-     * @param getCellValue Optional function to get a cell value
-     * @returns Filtered rows
+     * String/Object to filter table with (the 'filter' prop)
      */
-    filter: (
-      rows: readonly any[],
-      terms: string | any,
-      cols?: readonly any[],
-      getCellValue?: (col: any, row: any) => any
-    ) => readonly any[];
+    filter?: string | any;
     /**
      * Function to get a cell value
      * @param col Column name from column definitions
@@ -11271,6 +11194,10 @@ export interface QTable extends ComponentPublicInstance<QTableProps> {
        * How many rows per page? 0 means Infinite
        */
       rowsPerPage?: number;
+      /**
+       * For server-side fetching only. How many total database rows are there to be added to the table.
+       */
+      rowsNumber?: number;
     };
     /**
      * Filtering method (the 'filter-method' prop)
@@ -11374,6 +11301,18 @@ export interface QTable extends ComponentPublicInstance<QTableProps> {
       | "center-force"
       | "end-force"
   ) => void;
+  /**
+   * The filtered and sorted rows (same as the rows prop if using server-side fetching)
+   */
+  readonly filteredSortedRows: readonly any[];
+  /**
+   * Paginated, filtered, and sorted rows (same as the rows prop if using server-side fetching)
+   */
+  readonly computedRows: readonly any[];
+  /**
+   * The number of computed rows
+   */
+  readonly computedRowsNumber: number;
 }
 
 export interface QTdProps {
@@ -12833,15 +12772,15 @@ export interface QUploaderSlots {
 
 export interface QUploader extends ComponentPublicInstance<QUploaderProps> {
   /**
-   * Trigger file pick; Must be called as a direct consequence of user interaction (eg. in a click handler), due to browsers security policy
-   * @param evt JS event object
+   * Trigger the file picker dialog; The event must come from a user interaction event handler
+   * @param evt JS event object of the original user interaction handler
    */
-  pickFiles: (evt?: Event) => void;
+  pickFiles: (evt: Event) => void;
   /**
-   * Add files programmatically
-   * @param files Array of files (instances of File)
+   * Manually add files to the queue
+   * @param files Must be an array of instances of JS File type
    */
-  addFiles: (files: FileList | readonly any[]) => void;
+  addFiles: (files: readonly any[]) => void;
   /**
    * Start uploading (same as clicking the upload button)
    */
@@ -12867,6 +12806,58 @@ export interface QUploader extends ComponentPublicInstance<QUploaderProps> {
    * @param file File to remove (instance of File)
    */
   removeFile: (file: any) => void;
+  /**
+   * Update the status of a file
+   * @param file File to update (instance of File)
+   * @param status Status of file
+   * @param uploadedSize The number of uploaded bytes of the file; Is required explicitly only when status is NOT 'uploaded'
+   */
+  updateFileStatus: (
+    file: any,
+    status: "idle" | "failed" | "uploading" | "uploaded",
+    uploadedSize: number
+  ) => void;
+  /**
+   * Is the component alive (activated but not unmounted); Useful to determine if you still need to compute anything going further
+   * @returns If true, the current component is still activated and mounted
+   */
+  isAlive: () => boolean;
+  /**
+   * List of all files
+   */
+  readonly files: readonly any[];
+  /**
+   * List of files that are waiting to be uploaded
+   */
+  readonly queuedFiles: readonly any[];
+  /**
+   * List of files that have been uploaded
+   */
+  readonly uploadedFiles: readonly any[];
+  /**
+   * Size of all uploaded files in bytes
+   */
+  readonly uploadedSize: number;
+  /**
+   * Label for the size total of all files
+   */
+  readonly uploadSizeLabel: string;
+  /**
+   * Label for the upload progress (in %)
+   */
+  readonly uploadProgressLabel: string;
+  /**
+   * Whether new files can be added to the list
+   */
+  readonly canAddFiles: boolean;
+  /**
+   * Whether the files can be uploaded
+   */
+  readonly canUpload: boolean;
+  /**
+   * The component state is set as busy; User should not be able to interact with the component
+   */
+  readonly isBusy: boolean;
 }
 
 export interface QUploaderAddTriggerProps {}
@@ -13326,6 +13317,58 @@ export interface QDialogOptions {
   componentProps?: any;
 }
 
+export interface QLoadingShowOptions {
+  /**
+   * Wait a number of millisecond before showing; Not worth showing for 100ms for example then hiding it, so wait until you're sure it's a process that will take some considerable amount of time
+   */
+  delay?: number;
+  /**
+   * Message to display
+   */
+  message?: string;
+  /**
+   * Loading group name
+   */
+  group?: string;
+  /**
+   * Render the message as HTML; This can lead to XSS attacks so make sure that you sanitize the message first
+   */
+  html?: boolean;
+  /**
+   * Content wrapped element custom classes
+   */
+  boxClass?: string;
+  /**
+   * Spinner size (in pixels)
+   */
+  spinnerSize?: number;
+  /**
+   * Color name for spinner from the Quasar Color Palette
+   */
+  spinnerColor?: string;
+  /**
+   * Color name for text from the Quasar Color Palette
+   */
+  messageColor?: string;
+  /**
+   * Color name for background from the Quasar Color Palette
+   */
+  backgroundColor?: string;
+  /**
+   * One of the QSpinners
+   */
+  spinner?: Component;
+  /**
+   * Add a CSS class to easily customize the component
+   */
+  customClass?: string;
+  /**
+   * Ignore the default configuration (set by setDefaults()) for this instance only
+   */
+  ignoreDefaults?: boolean;
+}
+
+import { QLoadingUpdateOptions } from "./api";
 import { WebStorageGetItemMethodType } from "./api";
 import { WebStorageGetIndexMethodType } from "./api";
 import { WebStorageGetKeyMethodType } from "./api";
@@ -13469,6 +13512,62 @@ export interface QNotifyCreateOptions {
 
 import { QNotifyUpdateOptions } from "./api";
 import { QNotifyOptions } from "./api";
+export interface QEditorCommand {
+  /**
+   * Label of the button
+   */
+  label?: string;
+  /**
+   * Text to be displayed as a tooltip on hover
+   */
+  tip?: string;
+  /**
+   * HTML formatted text to be displayed within a tooltip on hover
+   */
+  htmlTip?: string;
+  /**
+   * Icon of the button
+   */
+  icon?: string;
+  /**
+   * Keycode of a key to be used together with the <ctrl> key for use as a shortcut to trigger this element
+   */
+  key?: number;
+  /**
+   * Either this or "cmd" is required. Function for when button gets clicked/tapped.
+   */
+  handler?: () => void;
+  /**
+   * Either this or "handler" is required. This must be a valid execCommand method according to the designMode API.
+   */
+  cmd?: string;
+  /**
+   * Only set a param if using a "cmd". This is commonly text or HTML to inject, but is highly dependent upon the specific cmd being called.
+   */
+  param?: string;
+  /**
+   * Is button disabled?
+   * @returns If true, the button will be disabled
+   */
+  disable?: boolean | (() => boolean);
+  /**
+   * Pass the value "no-state" if the button should not have an "active" state
+   */
+  type?: "no-state";
+  /**
+   * Lock the button label, so it doesn't change based on the child option selected.
+   */
+  fixedLabel?: boolean;
+  /**
+   * Lock the button icon, so it doesn't change based on the child option selected.
+   */
+  fixedIcon?: boolean;
+  /**
+   * Highlight the toolbar button, when a child option has been selected.
+   */
+  highlight?: boolean;
+}
+
 import { VueStyleObjectProp } from "./api";
 import { ValidationRule } from "./api";
 import { QRejectedEntry } from "./api";
@@ -13563,7 +13662,14 @@ declare module "./globals" {
      * @returns Chainable Object
      */
     dialog: (opts: QDialogOptions) => DialogChainObject;
-    loading: Loading;
+    /**
+     * Activate and show
+     * @param opts All props are optional
+     * @returns Calling this function with no parameters hides the group; When called with one Object parameter then it updates the Loading group (specified properties are shallow merged with the group ones; note that group cannot be changed while updating and it is ignored)
+     */
+    loading: (
+      opts?: QLoadingShowOptions
+    ) => (props?: QLoadingUpdateOptions) => void;
     loadingBar: LoadingBar;
     localStorage: LocalStorage;
     /**

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.7.7",
+  "version": "2.8.1",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -1128,6 +1128,11 @@
               "name": "label",
               "description": "Customize main button's content through this slot, unless you're using the 'icon' and 'label' props",
               "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
+            },
+            {
+              "name": "loading",
+              "description": "Override the default QSpinner when in 'loading' state",
+              "doc-url": "https://v2.quasar.dev/vue-components/button-dropdown"
             }
           ],
           "description": "QBtnDropdown - Quasar component",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.7.7",
+  "version": "2.8.1",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/components/banner/QBanner.js

@@ -17,8 +17,8 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const vm = getCurrentInstance()
-    const isDark = useDark(props, vm.proxy.$q)
+    const { proxy: { $q } } = getCurrentInstance()
+    const isDark = useDark(props, $q)
 
     const classes = computed(() =>
       'q-banner row items-center'

package/src/components/bar/QBar.js

@@ -14,8 +14,8 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const vm = getCurrentInstance()
-    const isDark = useDark(props, vm.proxy.$q)
+    const { proxy: { $q } } = getCurrentInstance()
+    const isDark = useDark(props, $q)
 
     const classes = computed(() =>
       'q-bar row no-wrap items-center'

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -173,7 +173,10 @@ export default createComponent({
           round: false,
           ...attributes.value,
           onClick
-        }, () => hSlot(slots.label, []).concat(Arrow))
+        }, {
+          default: () => hSlot(slots.label, []).concat(Arrow),
+          loading: slots.loading
+        })
       }
 
       return h(QBtnGroup, {
@@ -195,7 +198,10 @@ export default createComponent({
           iconRight: props.iconRight,
           round: false,
           onClick: onClickHide
-        }, slots.label),
+        }, {
+          default: slots.label,
+          loading: slots.loading
+        }),
 
         h(QBtn, {
           class: 'q-btn-dropdown__arrow-container q-anchor--skip',

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -129,6 +129,11 @@
 
     "label": {
       "desc": "Customize main button's content through this slot, unless you're using the 'icon' and 'label' props"
+    },
+
+    "loading": {
+      "desc": "Override the default QSpinner when in 'loading' state",
+      "addedIn": "v2.8"
     }
   },
 

package/src/components/card/QCard.js

@@ -22,8 +22,8 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const vm = getCurrentInstance()
-    const isDark = useDark(props, vm.proxy.$q)
+    const { proxy: { $q } } = getCurrentInstance()
+    const isDark = useDark(props, $q)
 
     const classes = computed(() =>
       'q-card'

package/src/components/carousel/QCarousel.js

@@ -7,7 +7,7 @@ import usePanel, { usePanelProps, usePanelEmits } from '../../composables/privat
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { isNumber } from '../../utils/private/is.js'
+import { isNumber } from '../../utils/is.js'
 import { hMergeSlot, hDir } from '../../utils/private/render.js'
 
 const navigationPositionOptions = [ 'top', 'right', 'bottom', 'left' ]

package/src/components/date/QDate.js

@@ -12,7 +12,7 @@ import { hSlot } from '../../utils/private/render.js'
 import { formatDate, __splitDate, getDateDiff } from '../../utils/date.js'
 import { pad } from '../../utils/format.js'
 import { jalaaliMonthLength, toGregorian } from '../../utils/private/date-persian.js'
-import { isObject } from '../../utils/private/is.js'
+import { isObject } from '../../utils/is.js'
 
 const yearsInterval = 20
 const views = [ 'Calendar', 'Years', 'Months' ]
@@ -1065,11 +1065,6 @@ export default createComponent({
       emit('update:modelValue', (props.multiple === true ? model : model[ 0 ]) || null, reason)
     }
 
-    // expose public methods
-    Object.assign(proxy, {
-      setToday, setView, offsetCalendar, setCalendarTo, setEditingRange
-    })
-
     function getHeader () {
       if (props.minimal === true) { return }
 
@@ -1427,6 +1422,11 @@ export default createComponent({
       }
     }
 
+    // expose public methods
+    Object.assign(proxy, {
+      setToday, setView, offsetCalendar, setCalendarTo, setEditingRange
+    })
+
     return () => {
       const content = [
         h('div', {

package/src/components/dialog-plugin/DialogPlugin.js

@@ -17,7 +17,7 @@ import { createComponent } from '../../utils/private/create.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import { isKeyCode } from '../../utils/private/key-composition.js'
-import { isObject } from '../../utils/private/is.js'
+import { isObject } from '../../utils/is.js'
 
 export default createComponent({
   name: 'DialogPlugin',

package/src/components/editor/QEditor.js

@@ -453,11 +453,6 @@ export default createComponent({
       return contentRef.value
     }
 
-    // expose public methods
-    Object.assign(proxy, {
-      runCmd, refreshToolbar, focus, getContentEl
-    })
-
     onMounted(() => {
       eVm.caret = proxy.caret = new Caret(contentRef.value, eVm)
       setContent(props.modelValue)
@@ -470,6 +465,11 @@ export default createComponent({
       document.removeEventListener('selectionchange', onSelectionchange)
     })
 
+    // expose public methods
+    Object.assign(proxy, {
+      runCmd, refreshToolbar, focus, getContentEl
+    })
+
     return () => {
       let toolbars