quasar 2.8.2 → 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/input/QInput.js

@@ -43,6 +43,9 @@ export default createComponent({
   ],
 
   setup (props, { emit, attrs }) {
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
+
     const temp = {}
     let emitCachedValue = NaN, typedNumber, stopValueWatcher, emitTimer, emitValueFn
 
@@ -289,21 +292,24 @@ export default createComponent({
 
     // textarea only
     function adjustHeight () {
-      const inp = inputRef.value
-      if (inp !== null) {
-        const parentStyle = inp.parentNode.style
-        const { overflow } = inp.style
-
-        // reset height of textarea to a small size to detect the real height
-        // but keep the total control size the same
-        parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
-        inp.style.height = '1px'
-        inp.style.overflow = 'hidden'
-
-        inp.style.height = inp.scrollHeight + 'px'
-        inp.style.overflow = overflow
-        parentStyle.marginBottom = ''
-      }
+      requestAnimationFrame(() => {
+        const inp = inputRef.value
+        if (inp !== null) {
+          const parentStyle = inp.parentNode.style
+          const { overflow } = inp.style
+
+          // reset height of textarea to a small size to detect the real height
+          // but keep the total control size the same
+          // Firefox rulez #14263, #14344
+          $q.platform.is.firefox !== true && (inp.style.overflow = 'hidden')
+          inp.style.height = '1px'
+          parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
+
+          inp.style.height = inp.scrollHeight + 'px'
+          inp.style.overflow = overflow
+          parentStyle.marginBottom = ''
+        }
+      })
     }
 
     function onChange (e) {
@@ -406,8 +412,7 @@ export default createComponent({
     const renderFn = useField(state)
 
     // expose public methods
-    const vm = getCurrentInstance()
-    Object.assign(vm.proxy, {
+    Object.assign(proxy, {
       focus,
       select,
       getNativeElement: () => inputRef.value

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/QUploader.json

@@ -258,6 +258,11 @@
     "isBusy": {
       "type": "Boolean",
       "desc": "The component state is set as busy; User should not be able to interact with the component"
+    },
+
+    "isUploading": {
+      "type": "Boolean",
+      "desc": "The component is uploading files"
     }
   }
 }

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,11 +129,13 @@ export default function ({
       file.__key = file.webkitRelativePath + file.lastModified + file.name + file.size
     })
 
-    // Avoid duplicate files
-    const filenameMap = currentFileList.map(entry => entry.__key)
-    files = filterFiles(files, rejectedFiles, 'duplicate', file => {
-      return filenameMap.includes(file.__key) === false
-    })
+    if (append === true) {
+      // Avoid duplicate files
+      const filenameMap = currentFileList.map(entry => entry.__key)
+      files = filterFiles(files, rejectedFiles, 'duplicate', file => {
+        return filenameMap.includes(file.__key) === false
+      })
+    }
 
     if (files.length === 0) { return done() }
 

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
     }
 
@@ -144,7 +138,7 @@ export default function (focused, innerLoading) {
       let res
 
       if (typeof rule === 'function') {
-        res = rule(val)
+        res = rule(val, testPattern)
       }
       else if (typeof rule === 'string' && testPattern[ rule ] !== void 0) {
         res = testPattern[ rule ](val)

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

@@ -32,7 +32,8 @@
       "desc": "Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules",
       "examples": [
         ":rules=\"[ val => val.length <= 3 || 'Please use maximum 3 characters' ]\"",
-        ":rules=\"[ 'fulltime' ]\""
+        ":rules=\"[ 'fulltime' ]\"",
+        ":rules=\"[ (val, rules) => rules.email(val) || 'Please enter a valid email address' ]\""
       ],
       "category": "behavior"
     },

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/plugins/Loading.json

@@ -74,7 +74,6 @@
 
   "methods": {
     "show": {
-      "tsInjectionPoint": true,
       "desc": "Activate and show",
       "params": {
         "opts": {

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
+}