quasar 2.9.2 → 2.10.1

package/src/components/dialog/QDialog.js

@@ -1,10 +1,10 @@
-import { h, ref, computed, watch, onBeforeUnmount, nextTick, Transition, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
 import useHistory from '../../composables/private/use-history.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 import useTick from '../../composables/private/use-tick.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
-import { useTransitionProps } from '../../composables/private/use-transition.js'
+import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
 import usePortal from '../../composables/private/use-portal.js'
 import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
 
@@ -25,7 +25,7 @@ const positionClass = {
   left: 'fixed-left items-center'
 }
 
-const transitions = {
+const defaultTransitions = {
   standard: [ 'scale', 'scale' ],
   top: [ 'slide-down', 'slide-up' ],
   bottom: [ 'slide-up', 'slide-down' ],
@@ -42,8 +42,8 @@ export default createComponent({
     ...useModelToggleProps,
     ...useTransitionProps,
 
-    transitionShow: String,
-    transitionHide: String,
+    transitionShow: String, // override useTransitionProps
+    transitionHide: String, // override useTransitionProps
 
     persistent: Boolean,
     autoClose: Boolean,
@@ -74,7 +74,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'shake', 'click', 'escape-key'
+    'shake', 'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -82,7 +82,6 @@ export default createComponent({
 
     const innerRef = ref(null)
     const showing = ref(false)
-    const transitionState = ref(false)
     const animating = ref(false)
 
     let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose
@@ -97,6 +96,12 @@ export default createComponent({
     const { registerTimeout } = useTimeout()
     const { registerTick, removeTick } = useTick()
 
+    const { transitionProps, transitionStyle } = useTransition(
+      props,
+      () => defaultTransitions[ props.position ][ 0 ],
+      () => defaultTransitions[ props.position ][ 1 ]
+    )
+
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
     )
@@ -121,26 +126,6 @@ export default createComponent({
       + (props.square === true ? ' q-dialog__inner--square' : '')
     )
 
-    const transitionShow = computed(() =>
-      'q-transition--'
-      + (props.transitionShow === void 0 ? transitions[ props.position ][ 0 ] : props.transitionShow)
-    )
-
-    const transitionHide = computed(() =>
-      'q-transition--'
-      + (props.transitionHide === void 0 ? transitions[ props.position ][ 1 ] : props.transitionHide)
-    )
-
-    const transition = computed(() => (
-      transitionState.value === true
-        ? transitionHide.value
-        : transitionShow.value
-    ))
-
-    const transitionStyle = computed(
-      () => `--q-transition-duration: ${ props.transitionDuration }ms`
-    )
-
     const useBackdrop = computed(() => showing.value === true && props.seamless !== true)
 
     const onEvents = computed(() => (
@@ -155,12 +140,6 @@ export default createComponent({
       attrs.class
     ])
 
-    watch(showing, val => {
-      nextTick(() => {
-        transitionState.value = val
-      })
-    })
-
     watch(() => props.maximized, state => {
       showing.value === true && updateMaximized(state)
     })
@@ -260,13 +239,23 @@ export default createComponent({
           return
         }
 
-        node = node.querySelector(selector || '[autofocus], [data-autofocus]') || node
+        node = (selector !== '' ? node.querySelector(selector) : null)
+          || node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+          || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+          || node.querySelector('[autofocus], [data-autofocus]')
+          || node
         node.focus({ preventScroll: true })
       })
     }
 
-    function shake () {
-      focus()
+    function shake (refocusTarget) {
+      if (refocusTarget && typeof refocusTarget.focus === 'function') {
+        refocusTarget.focus({ preventScroll: true })
+      }
+      else {
+        focus()
+      }
+
       emit('shake')
 
       const node = innerRef.value
@@ -292,7 +281,7 @@ export default createComponent({
           props.maximized !== true && props.noShake !== true && shake()
         }
         else {
-          emit('escape-key')
+          emit('escapeKey')
           hide()
         }
       }
@@ -347,7 +336,7 @@ export default createComponent({
         hide(e)
       }
       else if (props.noShake !== true) {
-        shake()
+        shake(e.relatedTarget)
       }
     }
 
@@ -376,7 +365,8 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
-        'aria-modal': 'true',
+        role: 'dialog',
+        'aria-modal': useBackdrop.value === true ? 'true' : 'false',
         ...attrs,
         class: rootClasses.value
       }, [
@@ -389,14 +379,15 @@ export default createComponent({
               class: 'q-dialog__backdrop fixed-full',
               style: transitionStyle.value,
               'aria-hidden': 'true',
-              onMousedown: onBackdropClick
+              tabindex: -1,
+              onFocusin: onBackdropClick
             })
             : null
         )),
 
         h(
           Transition,
-          { name: transition.value, appear: true },
+          transitionProps.value,
           () => (
             showing.value === true
               ? h('div', {

package/src/components/dialog/QDialog.json

@@ -65,7 +65,6 @@
       "desc": "Stick dialog to one of the sides (top, right, bottom or left)",
       "default": "standard",
       "values": [ "standard", "top", "right", "bottom", "left" ],
-      "examples": [ "top", "right" ],
       "category": "content"
     },
 
@@ -127,7 +126,15 @@
     },
 
     "shake": {
-      "desc": "Shakes dialog"
+      "desc": "Shakes dialog",
+      "params": {
+        "focusTarget": {
+          "type": "Element",
+          "desc": "Optional DOM Element to be focused after shake",
+          "examples": [ "document.getElementById('example')" ],
+          "addedIn": "v2.10.1"
+        }
+      }
     }
   },
 

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -70,6 +70,7 @@ export default createComponent({
               action.class
             ],
             tabindex: 0,
+            role: 'listitem',
             onClick () { onOk(action) },
             onKeyup (e) { e.keyCode === 13 && onOk(action) }
           }, [
@@ -102,8 +103,7 @@ export default createComponent({
             tabindex: 0,
             clickable: true,
             dark: isDark.value,
-            onClick () { onOk(action) },
-            onKeyup (e) { e.keyCode === 13 && onOk(action) }
+            onClick () { onOk(action) }
           }, () => [
             h(
               QItemSection,
@@ -145,9 +145,12 @@ export default createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-            class: 'row items-stretch justify-start'
+            class: 'row items-stretch justify-start',
+            role: 'list'
           }, getGrid())
-          : h('div', getList())
+          : h('div', {
+            role: 'list'
+          }, getList())
       )
 
       return child

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

@@ -211,12 +211,12 @@ export default createComponent({
     function getPrompt () {
       return [
         h(QInput, {
-          modelValue: model.value,
-          ...formProps.value,
           color: vmColor.value,
           dense: true,
           autofocus: true,
           dark: isDark.value,
+          ...formProps.value,
+          modelValue: model.value,
           'onUpdate:modelValue': onUpdateModel,
           onKeyup: onInputKeyup
         })
@@ -226,11 +226,11 @@ export default createComponent({
     function getOptions () {
       return [
         h(QOptionGroup, {
-          modelValue: model.value,
-          ...formProps.value,
           color: vmColor.value,
           options: props.options.items,
           dark: isDark.value,
+          ...formProps.value,
+          modelValue: model.value,
           'onUpdate:modelValue': onUpdateModel
         })
       ]

package/src/components/drawer/QDrawer.js

@@ -11,7 +11,7 @@ import TouchPan from '../../directives/TouchPan.js'
 import { createComponent } from '../../utils/private/create.js'
 import { between } from '../../utils/format.js'
 import { hSlot, hDir } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 const duration = 150
 
@@ -66,7 +66,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'on-layout', 'mini-state'
+    'onLayout', 'miniState'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -77,9 +77,11 @@ export default createComponent({
     const { preventBodyScroll } = usePreventScroll()
     const { registerTimeout, removeTimeout } = useTimeout()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QDrawer needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     let lastDesktopState, timerMini, layoutTotalWidthWatcher
 
@@ -397,7 +399,7 @@ export default createComponent({
     watch(offset, val => { updateLayout('offset', val) })
 
     watch(onLayout, val => {
-      emit('on-layout', val)
+      emit('onLayout', val)
       updateLayout('space', val)
     })
 
@@ -421,7 +423,7 @@ export default createComponent({
       }
     })
 
-    watch(isMini, val => { emit('mini-state', val) })
+    watch(isMini, val => { emit('miniState', val) })
 
     function applyPosition (position) {
       if (position === void 0) {
@@ -586,8 +588,8 @@ export default createComponent({
     }
 
     onMounted(() => {
-      emit('on-layout', onLayout.value)
-      emit('mini-state', isMini.value)
+      emit('onLayout', onLayout.value)
+      emit('miniState', isMini.value)
 
       lastDesktopState = props.showIfAbove === true
 

package/src/components/drawer/QDrawer.json

@@ -11,7 +11,6 @@
       "desc": "Side to attach to",
       "values": [ "left", "right" ],
       "default": "left",
-      "examples": [ "right" ],
       "category": "behavior"
     },
 
@@ -68,9 +67,6 @@
         "default", "desktop", "mobile"
       ],
       "default": "default",
-      "examples": [
-        "mobile"
-      ],
       "category": "behavior"
     },
 

package/src/components/editor/QEditor.json

@@ -151,8 +151,7 @@
               "type": "Boolean",
               "desc": "Highlight the toolbar button, when a child option has been selected."
             }
-          },
-          "__exemption": [ "examples" ]
+          }
         }
       },
       "category": "toolbar"
@@ -308,8 +307,7 @@
       "desc": "Retrieve the content of the Editor",
       "returns": {
         "type": "Element",
-        "desc": "Provides the pure HTML within the editable area",
-        "__exemption": [ "examples" ]
+        "desc": "Provides the pure HTML within the editable area"
       }
     }
   },
@@ -318,8 +316,7 @@
     "caret": {
       "type": "Object",
       "tsType": "QEditorCaret",
-      "desc": "The current caret state",
-      "__exemption": [ "examples" ]
+      "desc": "The current caret state"
     }
   }
 }

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

@@ -61,7 +61,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'after-show', 'after-hide'
+    'click', 'afterShow', 'afterHide'
   ],
 
   setup (props, { slots, emit }) {
@@ -170,11 +170,11 @@ export default createComponent({
     }
 
     function onShow () {
-      emit('after-show')
+      emit('afterShow')
     }
 
     function onHide () {
-      emit('after-hide')
+      emit('afterHide')
     }
 
     function enterGroup () {

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

@@ -81,7 +81,6 @@
       "type": "Number",
       "desc": "Animation duration (in milliseconds)",
       "default": 300,
-      "examples": [ ":duration=\"1000\"" ],
       "category": "behavior"
     },
 
@@ -189,7 +188,6 @@
         "detailsId": {
           "type": "String",
           "desc": "QExpansionItem details panel id (for use in aria-controls)",
-          "__exemption": [ "examples" ],
           "addedIn": "v2.8.4"
         },
 
@@ -200,8 +198,7 @@
             "evt": {
               "type": "Object",
               "required": false,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "desc": "JS event object"
             }
           },
           "returns": null,
@@ -215,8 +212,7 @@
             "evt": {
               "type": "Object",
               "required": false,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "desc": "JS event object"
             }
           },
           "returns": null,
@@ -230,8 +226,7 @@
             "evt": {
               "type": "Object",
               "required": false,
-              "desc": "JS event object",
-              "__exemption": [ "examples" ]
+              "desc": "JS event object"
             }
           },
           "returns": null,

package/src/components/fab/QFab.json

@@ -28,7 +28,6 @@
       "desc": "Direction to expand Fab Actions to",
       "default": "right",
       "values": [ "up", "right", "down", "left" ],
-      "examples": [ "down" ],
       "category": "behavior"
     },
 

package/src/components/fab/use-fab.json

@@ -68,7 +68,6 @@
     "label": {
       "type": [ "String", "Number" ],
       "desc": "The label that will be shown when Fab is extended",
-      "default": "",
       "examples": [ "Button Label" ],
       "category": "content"
     },

package/src/components/field/QField.json

@@ -9,7 +9,6 @@
     "maxlength": {
       "type": [ "String", "Number" ],
       "desc": "Specify a max length of model",
-      "examples": [ "12" ],
       "category": "model"
     },
 

package/src/components/file/QFile.js

@@ -10,6 +10,7 @@ import useFileFormDomProps from '../../composables/private/use-file-dom-props.js
 import { createComponent } from '../../utils/private/create.js'
 import { humanStorageSize } from '../../utils/format.js'
 import { prevent } from '../../utils/event.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QFile',
@@ -285,9 +286,11 @@ export default createComponent({
     Object.assign(proxy, {
       removeAtIndex,
       removeFile,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     })
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value)
+
     return useField(state)
   }
 })

package/src/components/file/QFile.json

@@ -49,22 +49,19 @@
             "filesNumber": {
               "type": "Number",
               "required": true,
-              "desc": "Number of picked files",
-              "examples": [ 5 ]
+              "desc": "Number of picked files"
             },
             "maxFiles": {
               "type": [ "Number", "String" ],
               "required": true,
-              "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value",
-              "examples": [ 5 ]
+              "desc": "Maximum number of files (same as 'max-files' prop, if specified); When 'max-files' is not specified, this has 'void 0' as value"
             }
           }
         }
       },
       "returns": {
         "type": "String",
-        "desc": "String to display for the counter label",
-        "__exemption": [ "examples" ]
+        "desc": "String to display for the counter label"
       },
       "examples": [
         ":counter-label=\"counterLabelFn\""
@@ -105,14 +102,12 @@
       "scope": {
         "index": {
           "type": "Number",
-          "desc": "Selection index",
-          "examples": [ 0 ]
+          "desc": "Selection index"
         },
 
         "file": {
           "type": "File",
-          "desc": "File object",
-          "__exemption": [ "examples" ]
+          "desc": "File object"
         },
 
         "ref": {
@@ -128,8 +123,7 @@
       "scope": {
         "files": {
           "type": [ "FileList", "Array" ],
-          "desc": "Array of File objects",
-          "__exemption": [ "examples" ]
+          "desc": "Array of File objects"
         },
 
         "ref": {
@@ -154,8 +148,7 @@
         "index": {
           "type": "Number",
           "desc": "Index at which to remove selection",
-          "required": true,
-          "examples": [ 0 ]
+          "required": true
         }
       }
     },
@@ -166,19 +159,25 @@
         "file": {
           "type": "File",
           "desc": "File to remove (instance of File)",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         }
       }
     },
 
     "getNativeElement": {
-      "desc": "Get the native input DOM Element",
+      "desc": "DEPRECATED; Access 'nativeEl' directly; Gets the native input DOM Element",
       "returns": {
-        "type": "Object",
-        "desc": "The underlying native input DOM Element",
-        "__exemption": [ "examples" ]
+        "type": "Element",
+        "desc": "The underlying native input DOM Element"
       }
     }
+  },
+
+  "computedProps": {
+    "nativeEl": {
+      "type": "Element",
+      "desc": "The native input DOM Element",
+      "addedIn": "v2.10.1"
+    }
   }
 }

package/src/components/footer/QFooter.js

@@ -6,7 +6,7 @@ import QResizeObserver from '../resize-observer/QResizeObserver.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hMergeSlot } from '../../utils/private/render.js'
-import { layoutKey } from '../../utils/private/symbols.js'
+import { layoutKey, emptyRenderFn } from '../../utils/private/symbols.js'
 
 export default createComponent({
   name: 'QFooter',
@@ -31,9 +31,11 @@ export default createComponent({
   setup (props, { slots, emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const $layout = inject(layoutKey, () => {
+    const $layout = inject(layoutKey, emptyRenderFn)
+    if ($layout === emptyRenderFn) {
       console.error('QFooter needs to be child of QLayout')
-    })
+      return emptyRenderFn
+    }
 
     const size = ref(parseInt(props.heightHint, 10))
     const revealed = ref(true)

package/src/components/footer/QFooter.json

@@ -35,7 +35,6 @@
       "type": [ "Number", "String" ],
       "desc": "When using SSR, you can optionally hint of the height (in pixels) of the QFooter",
       "default": 50,
-      "examples": [ "150" ],
       "category": "behavior"
     }
   },

package/src/components/form/QForm.js

@@ -19,7 +19,7 @@ export default createComponent({
     onSubmit: Function
   },
 
-  emits: [ 'reset', 'validation-success', 'validation-error' ],
+  emits: [ 'reset', 'validationSuccess', 'validationError' ],
 
   setup (props, { slots, emit }) {
     const vm = getCurrentInstance()
@@ -36,7 +36,7 @@ export default createComponent({
       const index = ++validateIndex
 
       const emitEvent = (res, ref) => {
-        emit('validation-' + (res === true ? 'success' : 'error'), ref)
+        emit('validation' + (res === true ? 'Success' : 'Error'), ref)
       }
 
       const validateComponent = comp => {
@@ -138,7 +138,9 @@ export default createComponent({
       addFocusFn(() => {
         if (rootRef.value === null) { return }
 
-        const target = rootRef.value.querySelector('[autofocus], [data-autofocus]')
+        const target = rootRef.value.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+          || rootRef.value.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+          || rootRef.value.querySelector('[autofocus], [data-autofocus]')
           || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
 
         target !== null && target !== void 0 && target.focus({ preventScroll: true })

package/src/components/form/QForm.json

@@ -41,8 +41,7 @@
       "params": {
         "evt": {
           "type": [ "Event", "SubmitEvent" ],
-          "desc": "Form submission event object",
-          "__exemption": [ "examples" ]
+          "desc": "Form submission event object"
         }
       }
     },
@@ -114,8 +113,7 @@
       "desc": "Get array of children vue components that support validation",
       "returns": {
         "type": "Array",
-        "desc": "Vue components that support Quasar validation API",
-        "__exemption": [ "examples" ]
+        "desc": "Vue components that support Quasar validation API"
       }
     }
   }