quasar 2.8.3 → 2.8.4

package/src/components/expansion-item/QExpansionItem.json

@@ -33,6 +33,14 @@
       "category": "style"
     },
 
+    "toggle-aria-label": {
+      "type": "String",
+      "desc": "aria-label to be used on the expansion toggle element",
+      "examples": [ "Open details" ],
+      "category": "content",
+      "addedIn": "v2.8.4"
+    },
+
     "label": {
       "type": "String",
       "desc": "Header label (unless using 'header' slot)",
@@ -103,6 +111,13 @@
       "category": "behavior"
     },
 
+    "hide-expand-icon": {
+      "type": "Boolean",
+      "desc": "Do not show the expand icon",
+      "category": "content",
+      "addedIn": "v2.8.4"
+    },
+
     "expand-icon-toggle": {
       "type": "Boolean",
       "desc": "Applies the expansion events to the expand icon only and not to the whole header",
@@ -169,6 +184,58 @@
           "type": "Boolean",
           "desc": "QExpansionItem expanded status",
           "addedIn": "v2.7.6"
+        },
+
+        "detailsId": {
+          "type": "String",
+          "desc": "QExpansionItem details panel id (for use in aria-controls)",
+          "__exemption": [ "examples" ],
+          "addedIn": "v2.8.4"
+        },
+
+        "show": {
+          "type": "Function",
+          "desc": "Triggers component to show",
+          "params": {
+            "evt": {
+              "type": "Object",
+              "required": false,
+              "desc": "JS event object",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": null,
+          "addedIn": "v2.8.4"
+        },
+
+        "hide": {
+          "type": "Function",
+          "desc": "Triggers component to hide",
+          "params": {
+            "evt": {
+              "type": "Object",
+              "required": false,
+              "desc": "JS event object",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": null,
+          "addedIn": "v2.8.4"
+        },
+
+        "toggle": {
+          "type": "Function",
+          "desc": "Triggers component to toggle between show/hide",
+          "params": {
+            "evt": {
+              "type": "Object",
+              "required": false,
+              "desc": "JS event object",
+              "__exemption": [ "examples" ]
+            }
+          },
+          "returns": null,
+          "addedIn": "v2.8.4"
         }
       }
     }

package/src/components/fab/QFab.js

@@ -9,6 +9,7 @@ import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot, hMergeSlot } from '../../utils/private/render.js'
 import { fabKey } from '../../utils/private/symbols.js'
+import uid from '../../utils/uid.js'
 
 const directions = [ 'up', 'right', 'down', 'left' ]
 const alignValues = [ 'left', 'center', 'right' ]
@@ -48,6 +49,7 @@ export default createComponent({
   setup (props, { slots }) {
     const triggerRef = ref(null)
     const showing = ref(props.modelValue === true)
+    const targetUid = uid()
 
     const { proxy: { $q } } = getCurrentInstance()
     const { formClass, labelProps } = useFab(props, showing)
@@ -73,6 +75,21 @@ export default createComponent({
       + ` q-fab__actions--${ showing.value === true ? 'opened' : 'closed' }`
     )
 
+    const actionAttrs = computed(() => {
+      const attrs = {
+        id: targetUid
+      }
+
+      if (showing.value === true) {
+        attrs.role = 'menu'
+      }
+      else {
+        attrs[ 'aria-hidden' ] = 'true'
+      }
+
+      return attrs
+    })
+
     const iconHolderClass = computed(() =>
       'q-fab__icon-holder '
       + ` q-fab__icon-holder--${ showing.value === true ? 'opened' : 'closed' }`
@@ -134,10 +151,12 @@ export default createComponent({
         fab: true,
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
+        'aria-controls': targetUid,
+        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 
-      h('div', { class: actionClass.value }, hSlot(slots.default))
+      h('div', { class: actionClass.value, ...actionAttrs.value }, hSlot(slots.default))
     ])
   }
 })

package/src/components/form/QForm.js

@@ -5,6 +5,7 @@ import { stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn } from '../../utils/private/focus-manager.js'
 import { hSlot } from '../../utils/private/render.js'
 import { formKey } from '../../utils/private/symbols.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 export default createComponent({
   name: 'QForm',
@@ -28,7 +29,6 @@ export default createComponent({
     const registeredComponents = []
 
     function validate (shouldFocus) {
-      const promises = []
       const focus = typeof shouldFocus === 'boolean'
         ? shouldFocus
         : props.noErrorFocus !== true
@@ -39,60 +39,55 @@ export default createComponent({
         emit('validation-' + (res === true ? 'success' : 'error'), ref)
       }
 
-      for (let i = 0; i < registeredComponents.length; i++) {
-        const comp = registeredComponents[ i ]
+      const validateComponent = comp => {
         const valid = comp.validate()
 
-        if (typeof valid.then === 'function') {
-          promises.push(
-            valid.then(
-              valid => ({ valid, comp }),
-              err => ({ valid: false, comp, err })
-            )
+        return typeof valid.then === 'function'
+          ? valid.then(
+            valid => ({ valid, comp }),
+            err => ({ valid: false, comp, err })
           )
-        }
-        else if (valid !== true) {
-          if (props.greedy === false) {
-            emitEvent(false, comp)
-
-            if (focus === true && typeof comp.focus === 'function') {
-              comp.focus()
-            }
-
-            return Promise.resolve(false)
-          }
-
-          promises.push({ valid: false, comp })
-        }
+          : Promise.resolve({ valid, comp })
       }
 
-      if (promises.length === 0) {
-        emitEvent(true)
-        return Promise.resolve(true)
-      }
-
-      return Promise.all(promises).then(res => {
-        const errors = res.filter(r => r.valid !== true)
+      const errorsPromise = props.greedy === true
+        ? Promise
+          .all(registeredComponents.map(validateComponent))
+          .then(res => res.filter(r => r.valid !== true))
+        : registeredComponents
+          .reduce(
+            (acc, comp) => acc.then(() => {
+              return validateComponent(comp).then(r => {
+                if (r.valid === false) { return Promise.reject(r) }
+              })
+            }),
+            Promise.resolve()
+          )
+          .catch(error => [ error ])
 
-        if (errors.length === 0) {
+      return errorsPromise.then(errors => {
+        if (errors === void 0 || errors.length === 0) {
           index === validateIndex && emitEvent(true)
           return true
         }
 
-        const { valid, comp, err } = errors[ 0 ]
-
         // if not outdated already
         if (index === validateIndex) {
-          err !== void 0 && console.error(err)
+          const { comp, err } = errors[ 0 ]
 
+          err !== void 0 && console.error(err)
           emitEvent(false, comp)
 
-          if (
-            focus === true
-            && valid !== true
-            && typeof comp.focus === 'function'
-          ) {
-            comp.focus()
+          if (focus === true) {
+            // Try to focus first mounted and active component
+            const activeError = errors.find(({ comp }) => (
+              typeof comp.focus === 'function'
+              && vmIsDestroyed(comp.$) === false
+            ))
+
+            if (activeError !== void 0) {
+              activeError.comp.focus()
+            }
           }
         }
 

package/src/components/form/QFormChildMixin.js

@@ -28,12 +28,14 @@ export default {
     resetValidation () {}
   },
 
-  created () {
+  mounted () {
+    // register to parent QForm
     const $form = this.$.provides[ formKey ]
     $form !== void 0 && this.disable !== true && $form.bindComponent(this)
   },
 
   beforeUnmount () {
+    // un-register from parent QForm
     const $form = this.$.provides[ formKey ]
     $form !== void 0 && this.disable !== true && $form.unbindComponent(this)
   }

package/src/components/menu/QMenu.js

@@ -350,6 +350,7 @@ export default createComponent({
         () => (
           showing.value === true
             ? h('div', {
+              role: 'menu',
               ...attrs,
               ref: innerRef,
               tabindex: -1,

package/src/components/page/QPage.js

@@ -45,7 +45,7 @@ export default createComponent({
     })
 
     const classes = computed(() =>
-      `q-page ${ props.padding === true ? ' q-layout-padding' : '' }`
+      `q-page${ props.padding === true ? ' q-layout-padding' : '' }`
     )
 
     return () => h('main', {

package/src/components/select/QSelect.js

@@ -273,16 +273,13 @@ export default createComponent({
         tabindex: props.tabindex,
         role: 'combobox',
         'aria-label': props.label,
+        'aria-readonly': props.readonly === true ? 'true' : 'false',
         'aria-autocomplete': props.useInput === true ? 'list' : 'none',
         'aria-expanded': menu.value === true ? 'true' : 'false',
         'aria-owns': `${ state.targetUid.value }_lb`,
         'aria-controls': `${ state.targetUid.value }_lb`
       }
 
-      if (optionIndex.value >= 0) {
-        attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`
-      }
-
       return attrs
     })
 

package/src/components/table/QTable.js

@@ -348,7 +348,7 @@ export default createComponent({
 
       if (rowEl !== null) {
         const scrollTarget = rootRef.value.querySelector('.q-table__middle.scroll')
-        const { offsetTop } = rowEl
+        const offsetTop = rowEl.offsetTop - props.virtualScrollStickySizeStart
         const direction = offsetTop < scrollTarget.scrollTop ? 'decrease' : 'increase'
 
         scrollTarget.scrollTop = offsetTop

package/src/components/table/QTable.json

@@ -77,10 +77,10 @@
 
     "virtual-scroll-sticky-size-start": {
       "type": [ "Number", "String" ],
-      "desc": "Size in pixels of the sticky header (if using one); A correct value will improve scroll precision",
+      "desc": "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": "0",
       "examples": [ "virtual-scroll-sticky-size-start=\"48\"" ],
-      "category": "virtual-scroll"
+      "category": "virtual-scroll|behavior"
     },
 
     "virtual-scroll-sticky-size-end": {

package/src/components/tabs/QTabs.js

@@ -11,6 +11,7 @@ import { noop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import { tabsKey } from '../../utils/private/symbols.js'
 import { rtlHasScrollBug } from '../../utils/private/rtl.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 function getIndicatorClass (color, top, vertical) {
   const pos = vertical === true
@@ -180,7 +181,7 @@ export default createComponent({
 
     function recalculateScroll () {
       registerScrollTick(() => {
-        if (vm.isDeactivated !== true && vm.isUnmounted !== true) {
+        if (vmIsDestroyed(vm) === false) {
           updateContainer({
             width: rootRef.value.offsetWidth,
             height: rootRef.value.offsetHeight

package/src/components/time/QTime.js

@@ -12,6 +12,7 @@ import { hSlot } from '../../utils/private/render.js'
 import { formatDate, __splitDate } from '../../utils/date.js'
 import { position } from '../../utils/event.js'
 import { pad } from '../../utils/format.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 function getViewByModel (model, withSeconds) {
   if (model.hour !== null) {
@@ -386,8 +387,7 @@ export default createComponent({
     }
 
     function shouldAbortInteraction () {
-      return vm.isDeactivated === true
-        || vm.isUnmounted === true
+      return vmIsDestroyed(vm) === true
         // if we have limited options, can we actually set any?
         || (
           viewValidOptions.value !== null

package/src/components/uploader/uploader-core.js

@@ -12,6 +12,7 @@ import { stop } from '../../utils/event.js'
 import { humanStorageSize } from '../../utils/format.js'
 import { uploaderKey } from '../../utils/private/symbols.js'
 import { injectProp, injectMultipleProps } from '../../utils/private/inject-obj-prop.js'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 function getProgressLabel (p) {
   return (p * 100).toFixed(2) + '%'
@@ -90,9 +91,7 @@ export function getRenderer (getPlugin) {
     uploadedSize: ref(0),
 
     updateFileStatus,
-    isAlive () {
-      return vm.isDeactivated !== true && vm.isUnmounted !== true
-    }
+    isAlive: () => vmIsDestroyed(vm) === false
   }
 
   const {

package/src/composables/private/use-file.js

@@ -129,7 +129,7 @@ export default function ({
       file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
     })
 
-    if (append !== true) {
+    if (append === true) {
       // Avoid duplicate files
       const filenameMap = currentFileList.map(entry => entry.__key)
       files = filterFiles(files, rejectedFiles, 'duplicate', file => {

package/src/composables/private/use-validate.js

@@ -2,7 +2,7 @@ import { ref, computed, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
 
 import useFormChild from '../use-form-child.js'
 import { testPattern } from '../../utils/patterns.js'
-import { debounce } from '../../utils.js'
+import debounce from '../../utils/debounce.js'
 import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 const lazyRulesValues = [ true, false, 'ondemand' ]
@@ -119,21 +119,15 @@ export default function (focused, innerLoading) {
 
     const index = ++validateIndex
 
-    if (innerLoading.value !== true && props.lazyRules !== true) {
-      isDirtyModel.value = true
-    }
+    const setDirty = innerLoading.value !== true
+      ? () => { isDirtyModel.value = true }
+      : () => {}
 
     const update = (err, msg) => {
-      if (innerError.value !== err) {
-        innerError.value = err
-      }
-
-      const m = msg || void 0
-
-      if (innerErrorMessage.value !== m) {
-        innerErrorMessage.value = m
-      }
+      err === true && setDirty()
 
+      innerError.value = err
+      innerErrorMessage.value = msg || null
       innerLoading.value = false
     }
 

package/src/composables/use-form-child.js

@@ -1,4 +1,4 @@
-import { inject, watch, onBeforeUnmount, getCurrentInstance } from 'vue'
+import { inject, watch, getCurrentInstance, onMounted, onBeforeUnmount } from 'vue'
 
 import { formKey } from '../utils/private/symbols.js'
 
@@ -21,11 +21,13 @@ export default function ({ validate, resetValidation, requiresQForm }) {
       }
     })
 
-    // register component to parent QForm
-    props.disable !== true && $form.bindComponent(proxy)
+    onMounted(() => {
+      // register to parent QForm
+      props.disable !== true && $form.bindComponent(proxy)
+    })
 
     onBeforeUnmount(() => {
-      // unregister component
+      // un-register from parent QForm
       props.disable !== true && $form.unbindComponent(proxy)
     })
   }

package/src/utils/EventBus.js

@@ -0,0 +1,64 @@
+/**
+ * Forked from tiny-emitter
+ * Copyright (c) 2017 Scott Corgan
+ */
+
+export default class EventBus {
+  constructor () {
+    this.__stack = {}
+  }
+
+  on (name, callback, ctx) {
+    (this.__stack[ name ] || (this.__stack[ name ] = [])).push({
+      fn: callback,
+      ctx
+    })
+
+    return this // chainable
+  }
+
+  once (name, callback, ctx) {
+    const listener = () => {
+      this.off(name, listener)
+      callback.apply(ctx, arguments)
+    }
+
+    listener.__callback = callback
+    return this.on(name, listener, ctx) // chainable
+  }
+
+  emit (name) {
+    const list = this.__stack[ name ]
+
+    if (list !== void 0) {
+      const params = [].slice.call(arguments, 1)
+      list.forEach(entry => {
+        entry.fn.apply(entry.ctx, params)
+      })
+    }
+
+    return this // chainable
+  }
+
+  off (name, callback) {
+    const list = this.__stack[ name ]
+    const liveEvents = []
+
+    if (list !== void 0 && callback) {
+      list.forEach(entry => {
+        if (entry.fn !== callback && entry.fn.__callback !== callback) {
+          liveEvents.push(entry)
+        }
+      })
+
+      if (liveEvents.length !== 0) {
+        this.__stack[ name ] = liveEvents
+      }
+      else {
+        delete this.__stack[ name ]
+      }
+    }
+
+    return this // chainable
+  }
+}

package/src/utils/private/vm.js

@@ -43,3 +43,7 @@ export function getNormalizedVNodes (vnodes) {
 export function vmHasRouter (vm) {
   return vm.appContext.config.globalProperties.$router !== void 0
 }
+
+export function vmIsDestroyed (vm) {
+  return vm.isUnmounted === true || vm.isDeactivated === true
+}

package/src/utils/run-sequential-promises.js

@@ -0,0 +1,115 @@
+
+function parsePromises (sequentialPromises) {
+  const isList = Array.isArray(sequentialPromises)
+
+  if (isList === true) {
+    const totalJobs = sequentialPromises.length
+    return {
+      isList,
+      totalJobs,
+      resultAggregator: Array(totalJobs).fill(null)
+    }
+  }
+
+  const resultKeys = Object.keys(sequentialPromises)
+  const resultAggregator = {}
+  resultKeys.forEach(keyName => { resultAggregator[ keyName ] = null })
+
+  return {
+    isList,
+    totalJobs: resultKeys.length,
+    resultAggregator,
+    resultKeys
+  }
+}
+
+/**
+ * Run a list of Promises sequentially, optionally on multiple threads.
+ *
+ * @param {*} sequentialPromises - Array of Functions or Object with Functions as values
+ *                          Array of Function form: [ (resultAggregator: Array) => Promise<any>, ... ]
+ *                          Object form: { [key: string]: (resultAggregator: object) => Promise<any>, ... }
+ * @param {*} opts - Optional options Object
+ *                   Object form: { threadsNumber?: number, abortOnFail?: boolean }
+ *                   Default: { threadsNumber: 1, abortOnFail: true }
+ *                   When configuring threadsNumber AND using http requests, be
+ *                       aware of the maximum threads that the hosting browser
+ *                       supports (usually 3); any number of threads above that
+ *                       won't add any real benefits
+ * @returns Promise<Array<Object> | Object>
+ *    With opts.abortOnFail set to true (which is default):
+ *        When sequentialPromises param is Array:
+ *          The Promise resolves with an Array of Objects of the following form:
+ *             [ { key: number, status: 'fulfilled', value: any }, ... ]
+ *          The Promise rejects with an Object of the following form:
+ *             { key: number, status: 'rejected', reason: Error, resultAggregator: array }
+ *        When sequentialPromises param is Object:
+ *          The Promise resolves with an Object of the following form:
+ *             { [key: string]: { key: string, status: 'fulfilled', value: any }, ... }
+ *          The Promise rejects with an Object of the following form:
+ *             { key: string, status: 'rejected', reason: Error, resultAggregator: object }
+ *    With opts.abortOnFail set to false:
+ *       The Promise is never rejected (no catch() needed)
+ *       The Promise resolves with:
+ *          An Array of Objects (when sequentialPromises param is also an Array) of the following form:
+ *             [ { key: number, status: 'fulfilled', value: any } | { status: 'rejected', reason: Error }, ... ]
+ *          An Object (when sequentialPromises param is also an Object) of the following form:
+ *             { [key: string]: { key: string, status: 'fulfilled', value: any } | { key: string, status: 'rejected', reason: Error }, ... }
+ */
+export default function runSequentialPromises (
+  sequentialPromises,
+  { threadsNumber = 1, abortOnFail = true } = {}
+) {
+  let jobIndex = -1, hasAborted = false
+
+  const { isList, totalJobs, resultAggregator, resultKeys } = parsePromises(sequentialPromises)
+
+  const getPromiseThread = () => new Promise((resolve, reject) => {
+    function runNextPromise () {
+      const currentJobIndex = ++jobIndex
+
+      if (hasAborted === true || currentJobIndex >= totalJobs) {
+        resolve()
+        return
+      }
+
+      const key = isList === true ? currentJobIndex : resultKeys[ currentJobIndex ]
+
+      sequentialPromises[ key ](resultAggregator)
+        .then(value => {
+          if (hasAborted === true) {
+            resolve()
+            return // early exit
+          }
+
+          resultAggregator[ key ] = { key, status: 'fulfilled', value }
+
+          // timeout so it doesn't interfere with the .catch() below
+          setTimeout(runNextPromise)
+        })
+        .catch(reason => {
+          if (hasAborted === true) {
+            resolve()
+            return // early exit
+          }
+
+          const result = { key, status: 'rejected', reason }
+          resultAggregator[ key ] = result
+
+          if (abortOnFail === true) {
+            hasAborted = true
+            reject({ ...result, resultAggregator })
+            return // early exit
+          }
+
+          // timeout so no interference
+          setTimeout(runNextPromise)
+        })
+    }
+
+    runNextPromise()
+  })
+
+  const threads = Array(threadsNumber).fill(getPromiseThread())
+  return Promise.all(threads).then(() => resultAggregator)
+}

package/src/utils.js

@@ -6,6 +6,7 @@ import createUploaderComponent from './utils/create-uploader-component.js'
 import date from './utils/date.js'
 import debounce from './utils/debounce.js'
 import dom from './utils/dom.js'
+import EventBus from './utils/EventBus.js'
 import event, { noop } from './utils/event.js'
 import exportFile from './utils/export-file.js'
 import extend from './utils/extend.js'
@@ -16,6 +17,7 @@ import is from './utils/is.js'
 import morph from './utils/morph.js'
 import openURL from './utils/open-url.js'
 import patterns from './utils/patterns.js'
+import runSequentialPromises from './utils/run-sequential-promises.js'
 import scroll from './utils/scroll.js'
 import setCssVar from './utils/set-css-var.js'
 import throttle from './utils/throttle.js'
@@ -30,6 +32,7 @@ export {
   date,
   debounce,
   dom,
+  EventBus,
   event,
   exportFile,
   extend,
@@ -41,6 +44,7 @@ export {
   morph,
   openURL,
   patterns,
+  runSequentialPromises,
   scroll,
   setCssVar,
   throttle,