quasar 2.10.0 → 2.10.2

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.10.0
+ * Quasar Framework v2.10.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1612,7 +1612,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.10.0' };
+      const $q = { version: '2.10.2' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -4187,7 +4187,7 @@
   };
 
   const useModelToggleEmits = [
-    'before-show', 'show', 'before-hide', 'hide'
+    'beforeShow', 'show', 'beforeHide', 'hide'
   ];
 
   // handleShow/handleHide -> removeTick(), self (& emit show)
@@ -4247,7 +4247,7 @@
 
       showing.value = true;
 
-      emit('before-show', evt);
+      emit('beforeShow', evt);
 
       if (handleShow !== void 0) {
         handleShow(evt);
@@ -4286,7 +4286,7 @@
 
       showing.value = false;
 
-      emit('before-hide', evt);
+      emit('beforeHide', evt);
 
       if (handleHide !== void 0) {
         handleHide(evt);
@@ -4408,8 +4408,8 @@
 
   function getPortalProxy (el) {
     return portalProxyList.find(proxy =>
-      proxy.__qPortalInnerRef.value !== null
-      && proxy.__qPortalInnerRef.value.contains(el)
+      proxy.contentEl !== null
+      && proxy.contentEl.contains(el)
     )
   }
 
@@ -4423,7 +4423,7 @@
           return getParentProxy(proxy)
         }
       }
-      else if (proxy.__qPortalInnerRef !== void 0) {
+      else if (proxy.__qPortal === true) {
         // treat it as point of separation if parent is QPopupProxy
         // (so mobile matches desktop behavior)
         // and hide it too
@@ -4444,7 +4444,7 @@
 
   function closePortals (proxy, evt, depth) {
     while (depth !== 0 && proxy !== void 0 && proxy !== null) {
-      if (proxy.__qPortalInnerRef !== void 0) {
+      if (proxy.__qPortal === true) {
         depth--;
 
         if (proxy.$options.name === 'QMenu') {
@@ -4536,7 +4536,10 @@
     vue.onUnmounted(() => { hidePortal(true); });
 
     // needed for portal vm detection
-    vm.proxy.__qPortalInnerRef = innerRef;
+    vm.proxy.__qPortal = true;
+
+    // public way of accessing the rendered content
+    injectProp(vm.proxy, 'contentEl', () => innerRef.value);
 
     return {
       showPortal,
@@ -4574,18 +4577,24 @@
     }
   };
 
-  function useTransition (props, showing) {
-    const transitionState = vue.ref(showing.value);
+  function useTransition (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
+    return {
+      transitionProps: vue.computed(() => {
+        const show = `q-transition--${ props.transitionShow || defaultShowFn() }`;
+        const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`;
 
-    vue.watch(showing, val => {
-      vue.nextTick(() => { transitionState.value = val; });
-    });
+        return {
+          appear: true,
 
-    // return transition
-    return {
-      transition: vue.computed(() => 'q-transition--' + (
-        transitionState.value === true ? props.transitionHide : props.transitionShow
-      )),
+          enterFromClass: `${ show }-enter-from`,
+          enterActiveClass: `${ show }-enter-active`,
+          enterToClass: `${ show }-enter-to`,
+
+          leaveFromClass: `${ hide }-leave-from`,
+          leaveActiveClass: `${ hide }-leave-active`,
+          leaveToClass: `${ hide }-leave-to`
+        }
+      }),
 
       transitionStyle: vue.computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
     }
@@ -5308,7 +5317,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'click', 'escape-key'
+      'click', 'escapeKey'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -5329,7 +5338,7 @@
       const isDark = useDark(props, $q);
       const { registerTick, removeTick } = useTick();
       const { registerTimeout } = useTimeout();
-      const { transition, transitionStyle } = useTransition(props, showing);
+      const { transitionProps, transitionStyle } = useTransition(props);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
 
       const { anchorEl, canShow } = useAnchor({ showing });
@@ -5409,7 +5418,10 @@
           let node = innerRef.value;
 
           if (node && node.contains(document.activeElement) !== true) {
-            node = node.querySelector('[autofocus], [data-autofocus]') || node;
+            node = node.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
+              || node.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
+              || node.querySelector('[autofocus], [data-autofocus]')
+              || node;
             node.focus({ preventScroll: true });
           }
         });
@@ -5484,7 +5496,10 @@
             || evt.qClickOutside !== true
           )
         ) {
-          refocusTarget.focus();
+          ((evt && evt.type.indexOf('key') === 0
+            ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+            : void 0
+          ) || refocusTarget).focus();
           refocusTarget = null;
         }
 
@@ -5546,7 +5561,7 @@
       }
 
       function onEscapeKey (evt) {
-        emit('escape-key');
+        emit('escapeKey');
         hide(evt);
       }
 
@@ -5574,7 +5589,7 @@
       function renderPortalContent () {
         return vue.h(
           vue.Transition,
-          { name: transition.value, appear: true },
+          transitionProps.value,
           () => (
             showing.value === true
               ? vue.h('div', {
@@ -5681,13 +5696,6 @@
 
   const btnPropsList = Object.keys(useBtnProps);
 
-  // let's not duplicate type checking and prop validations
-  // so just specify the props here with no type description
-  const btnProps = btnPropsList.reduce(
-    (acc, key) => (acc[ key ] = {}) && acc,
-    {}
-  );
-
   const passBtnProps = props => btnPropsList.reduce(
     (acc, key) => {
       const val = props[ key ];
@@ -5703,7 +5711,7 @@
     name: 'QBtnDropdown',
 
     props: {
-      ...btnProps,
+      ...useBtnProps,
       ...useTransitionProps,
 
       modelValue: Boolean,
@@ -5736,7 +5744,7 @@
       toggleAriaLabel: String
     },
 
-    emits: [ 'update:modelValue', 'click', 'before-show', 'show', 'before-hide', 'hide' ],
+    emits: [ 'update:modelValue', 'click', 'beforeShow', 'show', 'beforeHide', 'hide' ],
 
     setup (props, { slots, emit }) {
       const { proxy } = vue.getCurrentInstance();
@@ -5750,7 +5758,6 @@
           'aria-expanded': showing.value === true ? 'true' : 'false',
           'aria-haspopup': 'true',
           'aria-controls': targetUid,
-          'aria-owns': targetUid,
           'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
         };
 
@@ -5784,7 +5791,7 @@
 
       function onBeforeShow (e) {
         showing.value = true;
-        emit('before-show', e);
+        emit('beforeShow', e);
       }
 
       function onShow (e) {
@@ -5794,7 +5801,7 @@
 
       function onBeforeHide (e) {
         showing.value = false;
-        emit('before-hide', e);
+        emit('beforeHide', e);
       }
 
       function onHide (e) {
@@ -6556,7 +6563,7 @@
     keepAliveMax: Number
   };
 
-  const usePanelEmits = [ 'update:modelValue', 'before-transition', 'transition' ];
+  const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transition' ];
 
   function usePanel () {
     const { props, emit, proxy } = vue.getCurrentInstance();
@@ -6628,7 +6635,7 @@
 
       if (panelIndex.value !== index) {
         panelIndex.value = index;
-        emit('before-transition', newVal, oldVal);
+        emit('beforeTransition', newVal, oldVal);
         vue.nextTick(() => {
           emit('transition', newVal, oldVal);
         });
@@ -13088,7 +13095,7 @@
 
     emits: [
       ...useDatetimeEmits,
-      'range-start', 'range-end', 'navigation'
+      'rangeStart', 'rangeEnd', 'navigation'
     ],
 
     setup (props, { slots, emit }) {
@@ -13714,7 +13721,9 @@
       });
 
       vue.watch(view, () => {
-        blurTargetRef.value !== null && blurTargetRef.value.focus();
+        if (blurTargetRef.value !== null && proxy.$el.contains(document.activeElement) === true) {
+          blurTargetRef.value.focus();
+        }
       });
 
       vue.watch(() => viewModel.value.year, year => {
@@ -14397,7 +14406,7 @@
             finalHash: initHash
           };
 
-          emit('range-start', getShortDate(day));
+          emit('rangeStart', getShortDate(day));
         }
         else {
           const
@@ -14410,7 +14419,7 @@
           editRange.value = null;
           addToModel(initHash === finalHash ? day : { target: day, ...payload });
 
-          emit('range-end', {
+          emit('rangeEnd', {
             from: getShortDate(payload.from),
             to: getShortDate(payload.to)
           });
@@ -14715,7 +14724,7 @@
     left: 'fixed-left items-center'
   };
 
-  const transitions = {
+  const defaultTransitions = {
     standard: [ 'scale', 'scale' ],
     top: [ 'slide-down', 'slide-up' ],
     bottom: [ 'slide-up', 'slide-down' ],
@@ -14732,8 +14741,8 @@
       ...useModelToggleProps,
       ...useTransitionProps,
 
-      transitionShow: String,
-      transitionHide: String,
+      transitionShow: String, // override useTransitionProps
+      transitionHide: String, // override useTransitionProps
 
       persistent: Boolean,
       autoClose: Boolean,
@@ -14764,7 +14773,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'shake', 'click', 'escape-key'
+      'shake', 'click', 'escapeKey'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -14772,7 +14781,6 @@
 
       const innerRef = vue.ref(null);
       const showing = vue.ref(false);
-      const transitionState = vue.ref(false);
       const animating = vue.ref(false);
 
       let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose;
@@ -14787,6 +14795,12 @@
       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
       );
@@ -14811,26 +14825,6 @@
         + (props.square === true ? ' q-dialog__inner--square' : '')
       );
 
-      const transitionShow = vue.computed(() =>
-        'q-transition--'
-        + (props.transitionShow === void 0 ? transitions[ props.position ][ 0 ] : props.transitionShow)
-      );
-
-      const transitionHide = vue.computed(() =>
-        'q-transition--'
-        + (props.transitionHide === void 0 ? transitions[ props.position ][ 1 ] : props.transitionHide)
-      );
-
-      const transition = vue.computed(() => (
-        transitionState.value === true
-          ? transitionHide.value
-          : transitionShow.value
-      ));
-
-      const transitionStyle = vue.computed(
-        () => `--q-transition-duration: ${ props.transitionDuration }ms`
-      );
-
       const useBackdrop = vue.computed(() => showing.value === true && props.seamless !== true);
 
       const onEvents = vue.computed(() => (
@@ -14845,12 +14839,6 @@
         attrs.class
       ]);
 
-      vue.watch(showing, val => {
-        vue.nextTick(() => {
-          transitionState.value = val;
-        });
-      });
-
       vue.watch(() => props.maximized, state => {
         showing.value === true && updateMaximized(state);
       });
@@ -14930,7 +14918,10 @@
         hidePortal();
 
         if (refocusTarget !== null) {
-          refocusTarget.focus();
+          ((evt && evt.type.indexOf('key') === 0
+            ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+            : void 0
+          ) || refocusTarget).focus();
           refocusTarget = null;
         }
 
@@ -14950,13 +14941,23 @@
             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;
@@ -14982,7 +14983,7 @@
             props.maximized !== true && props.noShake !== true && shake();
           }
           else {
-            emit('escape-key');
+            emit('escapeKey');
             hide();
           }
         }
@@ -15037,7 +15038,7 @@
           hide(e);
         }
         else if (props.noShake !== true) {
-          shake();
+          shake(e.relatedTarget);
         }
       }
 
@@ -15080,14 +15081,15 @@
                 class: 'q-dialog__backdrop fixed-full',
                 style: transitionStyle.value,
                 'aria-hidden': 'true',
-                onMousedown: onBackdropClick
+                tabindex: -1,
+                onFocusin: onBackdropClick
               })
               : null
           )),
 
           vue.h(
             vue.Transition,
-            { name: transition.value, appear: true },
+            transitionProps.value,
             () => (
               showing.value === true
                 ? vue.h('div', {
@@ -15160,7 +15162,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'on-layout', 'mini-state'
+      'onLayout', 'miniState'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -15493,7 +15495,7 @@
       vue.watch(offset, val => { updateLayout('offset', val); });
 
       vue.watch(onLayout, val => {
-        emit('on-layout', val);
+        emit('onLayout', val);
         updateLayout('space', val);
       });
 
@@ -15517,7 +15519,7 @@
         }
       });
 
-      vue.watch(isMini, val => { emit('mini-state', val); });
+      vue.watch(isMini, val => { emit('miniState', val); });
 
       function applyPosition (position) {
         if (position === void 0) {
@@ -15682,8 +15684,8 @@
       }
 
       vue.onMounted(() => {
-        emit('on-layout', onLayout.value);
-        emit('mini-state', isMini.value);
+        emit('onLayout', onLayout.value);
+        emit('miniState', isMini.value);
 
         lastDesktopState = props.showIfAbove === true;
 
@@ -16236,7 +16238,7 @@
 
       const { registerTick, removeTick } = useTick();
       const { registerTimeout } = useTimeout();
-      const { transition, transitionStyle } = useTransition(props, showing);
+      const { transitionProps, transitionStyle } = useTransition(props);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
 
       const { anchorEl, canShow, anchorEvents } = useAnchor({ showing, configureAnchorEl });
@@ -16433,10 +16435,7 @@
       }
 
       function renderPortalContent () {
-        return vue.h(vue.Transition, {
-          name: transition.value,
-          appear: true
-        }, getTooltipContent)
+        return vue.h(vue.Transition, transitionProps.value, getTooltipContent)
       }
 
       vue.onBeforeUnmount(anchorCleanup);
@@ -17810,7 +17809,7 @@
 
     emits: [
       ...useModelToggleEmits,
-      'click', 'after-show', 'after-hide'
+      'click', 'afterShow', 'afterHide'
     ],
 
     setup (props, { slots, emit }) {
@@ -17892,7 +17891,6 @@
         return {
           role: 'button',
           'aria-expanded': showing.value === true ? 'true' : 'false',
-          'aria-owns': targetUid,
           'aria-controls': targetUid,
           'aria-label': toggleAriaLabel
         }
@@ -17919,11 +17917,11 @@
       }
 
       function onShow () {
-        emit('after-show');
+        emit('afterShow');
       }
 
       function onHide () {
-        emit('after-hide');
+        emit('afterHide');
       }
 
       function enterGroup () {
@@ -18273,13 +18271,11 @@
 
       const actionAttrs = vue.computed(() => {
         const attrs = {
-          id: targetUid
+          id: targetUid,
+          role: 'menu'
         };
 
-        if (showing.value === true) {
-          attrs.role = 'menu';
-        }
-        else {
+        if (showing.value !== true) {
           attrs[ 'aria-hidden' ] = 'true';
         }
 
@@ -18348,7 +18344,6 @@
           'aria-expanded': showing.value === true ? 'true' : 'false',
           'aria-haspopup': 'true',
           'aria-controls': targetUid,
-          'aria-owns': targetUid,
           onClick: toggle
         }, getTriggerContent),
 
@@ -18751,7 +18746,7 @@
     maxlength: [ Number, String ]
   };
 
-  const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popup-show', 'popup-hide' ];
+  const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ];
 
   function useFieldState () {
     const { props, attrs, proxy, vnode } = vue.getCurrentInstance();
@@ -19846,9 +19841,11 @@
       Object.assign(proxy, {
         removeAtIndex,
         removeFile,
-        getNativeElement: () => inputRef.value
+        getNativeElement: () => inputRef.value // deprecated
       });
 
+      injectProp(proxy, 'nativeEl', () => inputRef.value);
+
       return useField(state)
     }
   });
@@ -20059,7 +20056,7 @@
       onSubmit: Function
     },
 
-    emits: [ 'reset', 'validation-success', 'validation-error' ],
+    emits: [ 'reset', 'validationSuccess', 'validationError' ],
 
     setup (props, { slots, emit }) {
       const vm = vue.getCurrentInstance();
@@ -20076,7 +20073,7 @@
         const index = ++validateIndex;
 
         const emitEvent = (res, ref) => {
-          emit('validation-' + (res === true ? 'success' : 'error'), ref);
+          emit('validation' + (res === true ? 'Success' : 'Error'), ref);
         };
 
         const validateComponent = comp => {
@@ -20178,7 +20175,9 @@
         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 });
@@ -20529,7 +20528,7 @@
 
       const images = [
         vue.ref(null),
-        vue.ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+        vue.ref(getPlaceholderSrc())
       ];
 
       const position = vue.ref(0);
@@ -20569,18 +20568,24 @@
           : null
       }
 
+      function getPlaceholderSrc () {
+        return props.placeholderSrc !== void 0
+          ? { src: props.placeholderSrc }
+          : null
+      }
+
       function addImage (imgProps) {
         clearTimeout(loadTimer);
         hasError.value = false;
 
         if (imgProps === null) {
           isLoading.value = false;
-          images[ 0 ].value = null;
-          images[ 1 ].value = null;
-          return
+          images[ position.value ^ 1 ].value = getPlaceholderSrc();
+        }
+        else {
+          isLoading.value = true;
         }
 
-        isLoading.value = true;
         images[ position.value ].value = imgProps;
       }
 
@@ -20615,7 +20620,7 @@
         // if component has been already destroyed
         if (loadTimer === null) { return }
 
-        position.value = position.value === 1 ? 0 : 1;
+        position.value = position.value ^ 1;
         images[ position.value ].value = null;
         isLoading.value = false;
         hasError.value = false;
@@ -20626,19 +20631,11 @@
         clearTimeout(loadTimer);
         isLoading.value = false;
         hasError.value = true;
-        images[ 0 ].value = null;
-        images[ 1 ].value = null;
+        images[ position.value ].value = null;
+        images[ position.value ^ 1 ].value = getPlaceholderSrc();
         emit('error', err);
       }
 
-      function getContainer (key, child) {
-        return vue.h(
-          'div',
-          { class: 'q-img__container absolute-full', key },
-          child
-        )
-      }
-
       function getImage (index) {
         const img = images[ index ].value;
 
@@ -20666,7 +20663,11 @@
           data.class += ' q-img__image--loaded';
         }
 
-        return getContainer('img' + index, vue.h('img', data))
+        return vue.h(
+          'div',
+          { class: 'q-img__container absolute-full', key: 'img' + index },
+          vue.h('img', data)
+        )
       }
 
       function getContent () {
@@ -20991,7 +20992,7 @@
       const vm = vue.getCurrentInstance();
       const isDark = useDark(props, vm.proxy.$q);
 
-      const { transition, transitionStyle } = useTransition(props, vue.computed(() => props.showing));
+      const { transitionProps, transitionStyle } = useTransition(props);
 
       const classes = vue.computed(() =>
         'q-inner-loading absolute-full column flex-center'
@@ -21035,10 +21036,7 @@
           : null
       }
 
-      return () => vue.h(vue.Transition, {
-        name: transition.value,
-        appear: true
-      }, getContent)
+      return () => vue.h(vue.Transition, transitionProps.value, getContent)
     }
   });
 
@@ -21226,7 +21224,7 @@
 
       computedMask = mask;
       computedUnmask = val => {
-        const unmaskMatch = unmaskMatcher.exec(val);
+        const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length));
         if (unmaskMatch !== null) {
           val = unmaskMatch.slice(1).join('');
         }
@@ -21460,6 +21458,8 @@
     };
 
     function onMaskedKeydown (e) {
+      emit('keydown', e);
+
       if (shouldIgnoreKey(e) === true) {
         return
       }
@@ -21639,7 +21639,8 @@
 
     emits: [
       ...useFieldEmits,
-      'paste', 'change'
+      'paste', 'change',
+      'keydown', 'animationend'
     ],
 
     setup (props, { emit, attrs }) {
@@ -21697,7 +21698,7 @@
         }
 
         if (props.autogrow === true) {
-          evt.onAnimationend = adjustHeight;
+          evt.onAnimationend = onAnimationend;
         }
 
         return evt
@@ -21852,6 +21853,11 @@
         props.autogrow === true && adjustHeight();
       }
 
+      function onAnimationend (e) {
+        emit('animationend', e);
+        adjustHeight();
+      }
+
       function emitValue (val, stopWatcher) {
         emitValueFn = () => {
           if (
@@ -22015,9 +22021,11 @@
       Object.assign(proxy, {
         focus,
         select,
-        getNativeElement: () => inputRef.value
+        getNativeElement: () => inputRef.value // deprecated
       });
 
+      injectProp(proxy, 'nativeEl', () => inputRef.value);
+
       return renderFn
     }
   });
@@ -22216,7 +22224,12 @@
       bordered: Boolean,
       dense: Boolean,
       separator: Boolean,
-      padding: Boolean
+      padding: Boolean,
+
+      tag: {
+        type: String,
+        default: 'div'
+      }
     },
 
     setup (props, { slots }) {
@@ -22232,7 +22245,7 @@
         + (props.padding === true ? ' q-list--padding' : '')
       );
 
-      return () => vue.h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
+      return () => vue.h(props.tag, { class: classes.value }, hSlot(slots.default))
     }
   });
 
@@ -22270,7 +22283,7 @@
       readonly: Boolean
     },
 
-    emits: [ 'update:modelValue', 'change', 'drag-value' ],
+    emits: [ 'update:modelValue', 'change', 'dragValue' ],
 
     setup (props, { slots, emit }) {
       const { proxy } = vue.getCurrentInstance();
@@ -22317,7 +22330,7 @@
         )
       );
 
-      const decimals = vue.computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length);
+      const decimals = vue.computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
       const step = vue.computed(() => (props.step === 0 ? 1 : props.step));
       const instantFeedback = vue.computed(() => props.instantFeedback === true || dragging.value === true);
 
@@ -22452,7 +22465,7 @@
 
         newModel = between(newModel, innerMin.value, innerMax.value);
 
-        emit('drag-value', newModel);
+        emit('dragValue', newModel);
 
         if (model.value !== newModel) {
           model.value = newModel;
@@ -22627,6 +22640,8 @@
 
       const { proxy } = vue.getCurrentInstance();
 
+      vue.watch(() => proxy.$q.lang.rtl, emitEvent);
+
       vue.onMounted(() => {
         parentEl = proxy.$el.parentNode;
         configureScrollTarget();
@@ -22727,7 +22742,7 @@
         if (height.value !== newHeight) {
           resized = true;
           height.value = newHeight;
-          props.onScrollHeight !== void 0 && emit('scroll-height', newHeight);
+          props.onScrollHeight !== void 0 && emit('scrollHeight', newHeight);
           updateScrollbarWidth();
         }
         if (width.value !== newWidth) {
@@ -24378,7 +24393,7 @@
 
     emits: [
       'update:modelValue', 'save', 'cancel',
-      'before-show', 'show', 'before-hide', 'hide'
+      'beforeShow', 'show', 'beforeHide', 'hide'
     ],
 
     setup (props, { slots, emit }) {
@@ -24442,7 +24457,7 @@
         validated = false;
         initialValue.value = cloneDeep(props.modelValue);
         currentModel.value = cloneDeep(props.modelValue);
-        emit('before-show');
+        emit('beforeShow');
       }
 
       function onShow () {
@@ -24460,7 +24475,7 @@
           }
         }
 
-        emit('before-hide');
+        emit('beforeHide');
       }
 
       function onHide () {
@@ -24582,6 +24597,11 @@
         toggle (evt) { popupRef.value.toggle(evt); }
       });
 
+      injectProp(proxy, 'currentComponent', () => ({
+        type: type.value,
+        ref: popupRef.value
+      }));
+
       return () => {
         const data = {
           ref: popupRef,
@@ -25729,7 +25749,7 @@
       scroll.horizontal.percentage = vue.computed(() => {
         const diff = scroll.horizontal.size.value - container.horizontal.value;
         if (diff <= 0) { return 0 }
-        const p = between(scroll.horizontal.position.value / diff, 0, 1);
+        const p = between(Math.abs(scroll.horizontal.position.value) / diff, 0, 1);
         return Math.round(p * 10000) / 10000
       });
       scroll.horizontal.thumbHidden = vue.computed(() =>
@@ -25755,7 +25775,7 @@
         return {
           ...props.thumbStyle,
           ...props.horizontalThumbStyle,
-          left: `${ scroll.horizontal.thumbStart.value }px`,
+          [ proxy.$q.lang.rtl === true ? 'right' : 'left' ]: `${ scroll.horizontal.thumbStart.value }px`,
           width: `${ scroll.horizontal.thumbSize.value }px`
         }
       });
@@ -25949,6 +25969,15 @@
 
       let scrollPosition = null;
 
+      vue.watch(() => proxy.$q.lang.rtl, rtl => {
+        if (targetRef.value !== null) {
+          setHorizontalScrollPosition(
+            targetRef.value,
+            Math.abs(scroll.horizontal.position.value) * (rtl === true ? -1 : 1)
+          );
+        }
+      });
+
       vue.onDeactivated(() => {
         scrollPosition = {
           top: scroll.vertical.position.value,
@@ -25985,7 +26014,9 @@
         setScrollPercentage (axis, percentage, duration) {
           localSetScrollPosition(
             axis,
-            percentage * (scroll[ axis ].size.value - container[ axis ].value),
+            percentage
+              * (scroll[ axis ].size.value - container[ axis ].value)
+              * (axis === 'horizontal' && proxy.$q.lang.rtl === true ? -1 : 1),
             duration
           );
         }
@@ -26734,7 +26765,7 @@
 
     function emitScroll (index) {
       if (prevToIndex !== index) {
-        props.onVirtualScroll !== void 0 && emit('virtual-scroll', {
+        props.onVirtualScroll !== void 0 && emit('virtualScroll', {
           index,
           from: virtualScrollSliceRange.value.from,
           to: virtualScrollSliceRange.value.to - 1,
@@ -26906,9 +26937,9 @@
 
     emits: [
       ...useFieldEmits,
-      'add', 'remove', 'input-value', 'new-value',
+      'add', 'remove', 'inputValue', 'newValue',
       'keyup', 'keypress', 'keydown',
-      'filter-abort'
+      'filterAbort'
     ],
 
     setup (props, { slots, emit }) {
@@ -27030,6 +27061,11 @@
           .join(', ')
       );
 
+      const ariaCurrentValue = vue.computed(() => (props.displayValue !== void 0
+        ? props.displayValue
+        : selectedString.value
+      ));
+
       const needsHtmlFn = vue.computed(() => (
         props.optionsHtml === true
           ? () => true
@@ -27055,20 +27091,9 @@
           '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`
         };
 
-        return attrs
-      });
-
-      const listboxAttrs = vue.computed(() => {
-        const attrs = {
-          id: `${ state.targetUid.value }_lb`,
-          role: 'listbox',
-          'aria-multiselectable': props.multiple === true ? 'true' : 'false'
-        };
-
         if (optionIndex.value >= 0) {
           attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`;
         }
@@ -27076,6 +27101,12 @@
         return attrs
       });
 
+      const listboxAttrs = vue.computed(() => ({
+        id: `${ state.targetUid.value }_lb`,
+        role: 'listbox',
+        'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+      }));
+
       const selectedScope = vue.computed(() => {
         return innerValue.value.map((opt, i) => ({
           index: i,
@@ -27571,7 +27602,9 @@
           && props.useInput !== true
           && e.key !== void 0
           && e.key.length === 1 // printable char
-          && e.altKey === e.ctrlKey // not kbd shortcut
+          && e.altKey === false // not kbd shortcut
+          && e.ctrlKey === false // not kbd shortcut
+          && e.metaKey === false // not kbd shortcut, especially on macOS with Command key
           && (e.keyCode !== 32 || searchBuffer.length > 0) // space in middle of search
         ) {
           menu.value !== true && showPopup(e);
@@ -27656,7 +27689,7 @@
           };
 
           if (props.onNewValue !== void 0) {
-            emit('new-value', inputValue.value, done);
+            emit('newValue', inputValue.value, done);
           }
           else {
             done(inputValue.value);
@@ -27679,8 +27712,8 @@
         return hasDialog === true
           ? menuContentRef.value
           : (
-              menuRef.value !== null && menuRef.value.__qPortalInnerRef.value !== null
-                ? menuRef.value.__qPortalInnerRef.value
+              menuRef.value !== null && menuRef.value.contentEl !== null
+                ? menuRef.value.contentEl
                 : void 0
             )
       }
@@ -27718,9 +27751,7 @@
 
         return [
           vue.h('span', {
-            [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: props.displayValue !== void 0
-              ? props.displayValue
-              : selectedString.value
+            [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: ariaCurrentValue.value
           })
         ]
       }
@@ -27775,7 +27806,7 @@
           id: isTarget === true ? state.targetUid.value : void 0,
           maxlength: props.maxlength,
           autocomplete: props.autocomplete,
-          'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+          'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
           disabled: props.disable === true,
           readonly: props.readonly === true,
           ...inputControlEvents.value
@@ -27823,7 +27854,7 @@
       function setInputValue (val) {
         if (inputValue.value !== val) {
           inputValue.value = val;
-          emit('input-value', val);
+          emit('inputValue', val);
         }
       }
 
@@ -27847,7 +27878,7 @@
         }
 
         if (state.innerLoading.value === true) {
-          emit('filter-abort');
+          emit('filterAbort');
         }
         else {
           state.innerLoading.value = true;
@@ -28064,7 +28095,7 @@
           filterId = void 0;
 
           if (state.innerLoading.value === true) {
-            emit('filter-abort');
+            emit('filterAbort');
             state.innerLoading.value = false;
             innerLoadingIndicator.value = false;
           }
@@ -28150,14 +28181,14 @@
 
       function onControlPopupShow (e) {
         e !== void 0 && stop(e);
-        emit('popup-show', e);
+        emit('popupShow', e);
         state.hasPopupOpen = true;
         state.onControlFocusin(e);
       }
 
       function onControlPopupHide (e) {
         e !== void 0 && stop(e);
-        emit('popup-hide', e);
+        emit('popupHide', e);
         state.hasPopupOpen = false;
         state.onControlFocusout(e);
       }
@@ -28275,8 +28306,9 @@
                 key: 'd_t',
                 class: 'q-select__focus-target',
                 id: isTarget === true ? state.targetUid.value : void 0,
+                value: ariaCurrentValue.value,
                 readonly: true,
-                'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
+                'data-autofocus': fromDialog === true || props.autofocus === true || void 0,
                 ...attrs,
                 onKeydown: onTargetKeydown,
                 onKeyup: onTargetKeyup,
@@ -32148,7 +32180,7 @@
     },
 
     emits: [
-      'request', 'virtual-scroll',
+      'request', 'virtualScroll',
       ...useFullscreenEmits,
       ...useTableRowExpandEmits,
       ...useTableRowSelectionEmits
@@ -32382,7 +32414,7 @@
 
           scrollTarget.scrollTop = offsetTop;
 
-          emit('virtual-scroll', {
+          emit('virtualScroll', {
             index: toIndex,
             from: 0,
             to: innerPagination.value.rowsPerPage - 1,
@@ -32392,7 +32424,7 @@
       }
 
       function onVScroll (info) {
-        emit('virtual-scroll', info);
+        emit('virtualScroll', info);
       }
 
       function getProgress () {
@@ -34320,9 +34352,9 @@
       'update:expanded',
       'update:ticked',
       'update:selected',
-      'lazy-load',
-      'after-show',
-      'after-hide'
+      'lazyLoad',
+      'afterShow',
+      'afterHide'
     ],
 
     setup (props, { slots, emit }) {
@@ -34571,7 +34603,7 @@
           if (Array.isArray(node[ props.childrenKey ]) !== true) {
             node[ props.childrenKey ] = [];
           }
-          emit('lazy-load', {
+          emit('lazyLoad', {
             node,
             key,
             done: children => {
@@ -34718,11 +34750,11 @@
       }
 
       function onShow () {
-        emit('after-show');
+        emit('afterShow');
       }
 
       function onHide () {
-        emit('after-hide');
+        emit('afterHide');
       }
 
       function getNode (node) {
@@ -35565,7 +35597,7 @@
             helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files);
             files.forEach(f => { helpers.updateFileStatus(f, 'failed'); });
 
-            emit('factory-failed', err, files);
+            emit('factoryFailed', err, files);
             workingThreads.value--;
           }
         };
@@ -38083,8 +38115,7 @@
               tabindex: 0,
               clickable: true,
               dark: isDark.value,
-              onClick () { onOk(action); },
-              onKeyup (e) { e.keyCode === 13 && onOk(action); }
+              onClick () { onOk(action); }
             }, () => [
               vue.h(
                 QItemSection,
@@ -38713,12 +38744,12 @@
       function getPrompt () {
         return [
           vue.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
           })
@@ -38728,11 +38759,11 @@
       function getOptions () {
         return [
           vue.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
           })
         ]
@@ -40475,7 +40506,7 @@
    */
 
   var index_umd = {
-    version: '2.10.0',
+    version: '2.10.2',
     install (app, opts) {
       installQuasar(app, {
         components,