quasar 2.10.0 → 2.10.2

package/src/components/carousel/QCarousel.json

@@ -75,7 +75,6 @@
       "desc": "Side to stick navigation to",
       "default": "bottom/right",
       "values": [ "top", "right", "bottom", "left" ],
-      "examples": [ "left" ],
       "category": "content"
     },
 
@@ -117,18 +116,15 @@
       "scope": {
         "index": {
           "type": "Number",
-          "desc": "The 0-based index of corresponding slide",
-          "__exemption": [ "examples" ]
+          "desc": "The 0-based index of corresponding slide"
         },
         "maxIndex": {
           "type": "Number",
-          "desc": "The available number of slides",
-          "__exemption": [ "examples" ]
+          "desc": "The available number of slides"
         },
         "name": {
           "type": "Any",
-          "desc": "The name of the corresponding slide",
-          "__exemption": [ "examples" ]
+          "desc": "The name of the corresponding slide"
         },
         "active": {
           "type": "Boolean",
@@ -136,8 +132,7 @@
         },
         "btnProps": {
           "type": "Object",
-          "desc": "Default QBtn props that can be binded to your own QBtn",
-          "__exemption": [ "examples" ]
+          "desc": "Default QBtn props that can be binded to your own QBtn"
         },
         "onClick": {
           "type": "Function",

package/src/components/carousel/QCarouselControl.json

@@ -13,7 +13,6 @@
         "bottom-right", "bottom-left",
         "top", "right", "bottom", "left"
       ],
-      "examples": [ "top-right" ],
       "category": "position"
     },
 

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

@@ -118,8 +118,7 @@
         "value": {
           "type": "Any",
           "desc": "New model value",
-          "required": true,
-          "__exemption": [ "examples" ]
+          "required": true
         },
         "evt": {
           "extends": "evt",

package/src/components/circular-progress/QCircularProgress.json

@@ -10,7 +10,6 @@
       "type": "Number",
       "default": 0,
       "desc": "Current progress (must be between min/max)",
-      "examples": [ 0, 100, 52.32 ],
       "category": "model"
     },
 
@@ -18,7 +17,6 @@
       "type": "Number",
       "default": 0,
       "desc": "Minimum value defining 'no progress' (must be lower than 'max')",
-      "examples": [ 0, 100, 52.32 ],
       "category": "model"
     },
 
@@ -26,7 +24,6 @@
       "type": "Number",
       "default": 100,
       "desc": "Maximum value defining 100% progress made (must be higher than 'min')",
-      "examples": [ 100, 52.32 ],
       "category": "model"
     },
 
@@ -64,7 +61,6 @@
       "type": "Number",
       "default": 0.2,
       "desc": "Thickness of progress arc as a ratio (0.0 < x < 1.0) of component size",
-      "examples": [ 1, 0.3 ],
       "category": "style"
     },
 
@@ -72,7 +68,6 @@
       "type": "Number",
       "desc": "Angle to rotate progress arc by",
       "default": 0,
-      "examples": [ 0, 40, 90 ],
       "category": "content"
     },
 

package/src/components/color/QColor.json

@@ -32,7 +32,6 @@
       "desc": "Forces a certain model format upon the model",
       "default": "auto",
       "values": [ "auto", "hex", "rgb", "hexa", "rgba" ],
-      "examples": [ "hex" ],
       "category": "model"
     },
 

package/src/components/date/QDate.js

@@ -82,7 +82,7 @@ export default createComponent({
 
   emits: [
     ...useDatetimeEmits,
-    'range-start', 'range-end', 'navigation'
+    'rangeStart', 'rangeEnd', 'navigation'
   ],
 
   setup (props, { slots, emit }) {
@@ -708,7 +708,9 @@ export default createComponent({
     })
 
     watch(view, () => {
-      blurTargetRef.value !== null && blurTargetRef.value.focus()
+      if (blurTargetRef.value !== null && proxy.$el.contains(document.activeElement) === true) {
+        blurTargetRef.value.focus()
+      }
     })
 
     watch(() => viewModel.value.year, year => {
@@ -1391,7 +1393,7 @@ export default createComponent({
           finalHash: initHash
         }
 
-        emit('range-start', getShortDate(day))
+        emit('rangeStart', getShortDate(day))
       }
       else {
         const
@@ -1404,7 +1406,7 @@ export default createComponent({
         editRange.value = null
         addToModel(initHash === finalHash ? day : { target: day, ...payload })
 
-        emit('range-end', {
+        emit('rangeEnd', {
           from: getShortDate(payload.from),
           to: getShortDate(payload.to)
         })

package/src/components/date/QDate.json

@@ -210,20 +210,17 @@
             "year": {
               "type": "Number",
               "required": true,
-              "desc": "The year of the date that the user has clicked/tapped on",
-              "__exemption": [ "examples" ]
+              "desc": "The year of the date that the user has clicked/tapped on"
             },
             "month": {
               "type": "Number",
               "required": true,
-              "desc": "The month of the date that the user has clicked/tapped on",
-              "__exemption": [ "examples" ]
+              "desc": "The month of the date that the user has clicked/tapped on"
             },
             "day": {
               "type": "Number",
               "required": true,
-              "desc": "The day of the month that the user has clicked/tapped on",
-              "__exemption": [ "examples" ]
+              "desc": "The day of the month that the user has clicked/tapped on"
             },
             "from": {
               "type": "Object",
@@ -233,20 +230,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             },
@@ -258,20 +252,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             }
@@ -290,14 +281,12 @@
             "year": {
               "type": "Number",
               "required": true,
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
               "required": true,
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             }
           }
         }
@@ -314,20 +303,17 @@
             "year": {
               "type": "Number",
               "required": true,
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
               "required": true,
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             },
             "day": {
               "type": "Number",
               "required": true,
-              "desc": "The day of month",
-              "__exemption": [ "examples" ]
+              "desc": "The day of month"
             }
           }
         }
@@ -349,20 +335,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             },
@@ -374,20 +357,17 @@
                 "year": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The year",
-                  "__exemption": [ "examples" ]
+                  "desc": "The year"
                 },
                 "month": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The month"
                 },
                 "day": {
                   "type": "Number",
                   "required": true,
-                  "desc": "The day of month",
-                  "__exemption": [ "examples" ]
+                  "desc": "The day of month"
                 }
               }
             }
@@ -435,13 +415,11 @@
       "params": {
         "year": {
           "type": "Number",
-          "desc": "The year",
-          "__exemption": [ "examples" ]
+          "desc": "The year"
         },
         "month": {
           "type": "Number",
-          "desc": "The month",
-          "__exemption": [ "examples" ]
+          "desc": "The month"
         }
       }
     },
@@ -455,18 +433,15 @@
           "definition": {
             "year": {
               "type": "Number",
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             },
             "day": {
               "type": "Number",
-              "desc": "The day of month",
-              "__exemption": [ "examples" ]
+              "desc": "The day of month"
             }
           }
         },
@@ -476,18 +451,15 @@
           "definition": {
             "year": {
               "type": "Number",
-              "desc": "The year",
-              "__exemption": [ "examples" ]
+              "desc": "The year"
             },
             "month": {
               "type": "Number",
-              "desc": "The month",
-              "__exemption": [ "examples" ]
+              "desc": "The month"
             },
             "day": {
               "type": "Number",
-              "desc": "The day of month",
-              "__exemption": [ "examples" ]
+              "desc": "The day of month"
             }
           }
         }

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)
     })
@@ -240,7 +219,10 @@ export default createComponent({
       hidePortal()
 
       if (refocusTarget !== null) {
-        refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus()
         refocusTarget = null
       }
 
@@ -260,13 +242,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 (focusTarget) {
+      if (focusTarget && typeof focusTarget.focus === 'function') {
+        focusTarget.focus({ preventScroll: true })
+      }
+      else {
+        focus()
+      }
+
       emit('shake')
 
       const node = innerRef.value
@@ -292,7 +284,7 @@ export default createComponent({
           props.maximized !== true && props.noShake !== true && shake()
         }
         else {
-          emit('escape-key')
+          emit('escapeKey')
           hide()
         }
       }
@@ -347,7 +339,7 @@ export default createComponent({
         hide(e)
       }
       else if (props.noShake !== true) {
-        shake()
+        shake(e.relatedTarget)
       }
     }
 
@@ -390,14 +382,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

@@ -103,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,

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

@@ -66,7 +66,7 @@ export default createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'on-layout', 'mini-state'
+    'onLayout', 'miniState'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -399,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)
     })
 
@@ -423,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) {
@@ -588,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"
     },