quasar 2.10.0 → 2.10.2

package/dist/quasar.esm.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.
  */
@@ -1610,7 +1610,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 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) {
@@ -4185,7 +4185,7 @@ const useModelToggleProps = {
 };
 
 const useModelToggleEmits = [
-  'before-show', 'show', 'before-hide', 'hide'
+  'beforeShow', 'show', 'beforeHide', 'hide'
 ];
 
 // handleShow/handleHide -> removeTick(), self (& emit show)
@@ -4245,7 +4245,7 @@ function useModelToggle ({
 
     showing.value = true;
 
-    emit('before-show', evt);
+    emit('beforeShow', evt);
 
     if (handleShow !== void 0) {
       handleShow(evt);
@@ -4284,7 +4284,7 @@ function useModelToggle ({
 
     showing.value = false;
 
-    emit('before-hide', evt);
+    emit('beforeHide', evt);
 
     if (handleHide !== void 0) {
       handleHide(evt);
@@ -4406,8 +4406,8 @@ const portalProxyList = [];
 
 function getPortalProxy (el) {
   return portalProxyList.find(proxy =>
-    proxy.__qPortalInnerRef.value !== null
-    && proxy.__qPortalInnerRef.value.contains(el)
+    proxy.contentEl !== null
+    && proxy.contentEl.contains(el)
   )
 }
 
@@ -4421,7 +4421,7 @@ function closePortalMenus (proxy, evt) {
         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
@@ -4442,7 +4442,7 @@ function closePortalMenus (proxy, evt) {
 
 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') {
@@ -4534,7 +4534,10 @@ function usePortal (vm, innerRef, renderPortalContent, checkGlobalDialog) {
   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,
@@ -4572,18 +4575,24 @@ const useTransitionProps = {
   }
 };
 
-function useTransition (props, showing) {
-  const transitionState = ref(showing.value);
+function useTransition (props, defaultShowFn = () => {}, defaultHideFn = () => {}) {
+  return {
+    transitionProps: computed(() => {
+      const show = `q-transition--${ props.transitionShow || defaultShowFn() }`;
+      const hide = `q-transition--${ props.transitionHide || defaultHideFn() }`;
 
-  watch(showing, val => {
-    nextTick(() => { transitionState.value = val; });
-  });
+      return {
+        appear: true,
 
-  // return transition
-  return {
-    transition: 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: computed(() => `--q-transition-duration: ${ props.transitionDuration }ms`)
   }
@@ -5306,7 +5315,7 @@ var QMenu = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'escape-key'
+    'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -5327,7 +5336,7 @@ var QMenu = createComponent({
     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 });
@@ -5407,7 +5416,10 @@ var QMenu = createComponent({
         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 });
         }
       });
@@ -5482,7 +5494,10 @@ var QMenu = createComponent({
           || evt.qClickOutside !== true
         )
       ) {
-        refocusTarget.focus();
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus();
         refocusTarget = null;
       }
 
@@ -5544,7 +5559,7 @@ var QMenu = createComponent({
     }
 
     function onEscapeKey (evt) {
-      emit('escape-key');
+      emit('escapeKey');
       hide(evt);
     }
 
@@ -5572,7 +5587,7 @@ var QMenu = createComponent({
     function renderPortalContent () {
       return h(
         Transition,
-        { name: transition.value, appear: true },
+        transitionProps.value,
         () => (
           showing.value === true
             ? h('div', {
@@ -5679,13 +5694,6 @@ function uid$3 () {
 
 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 ];
@@ -5701,7 +5709,7 @@ var QBtnDropdown = createComponent({
   name: 'QBtnDropdown',
 
   props: {
-    ...btnProps,
+    ...useBtnProps,
     ...useTransitionProps,
 
     modelValue: Boolean,
@@ -5734,7 +5742,7 @@ var QBtnDropdown = createComponent({
     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 } = getCurrentInstance();
@@ -5748,7 +5756,6 @@ var QBtnDropdown = createComponent({
         '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)
       };
 
@@ -5782,7 +5789,7 @@ var QBtnDropdown = createComponent({
 
     function onBeforeShow (e) {
       showing.value = true;
-      emit('before-show', e);
+      emit('beforeShow', e);
     }
 
     function onShow (e) {
@@ -5792,7 +5799,7 @@ var QBtnDropdown = createComponent({
 
     function onBeforeHide (e) {
       showing.value = false;
-      emit('before-hide', e);
+      emit('beforeHide', e);
     }
 
     function onHide (e) {
@@ -6554,7 +6561,7 @@ const usePanelProps = {
   keepAliveMax: Number
 };
 
-const usePanelEmits = [ 'update:modelValue', 'before-transition', 'transition' ];
+const usePanelEmits = [ 'update:modelValue', 'beforeTransition', 'transition' ];
 
 function usePanel () {
   const { props, emit, proxy } = getCurrentInstance();
@@ -6626,7 +6633,7 @@ function usePanel () {
 
     if (panelIndex.value !== index) {
       panelIndex.value = index;
-      emit('before-transition', newVal, oldVal);
+      emit('beforeTransition', newVal, oldVal);
       nextTick(() => {
         emit('transition', newVal, oldVal);
       });
@@ -13086,7 +13093,7 @@ var QDate = createComponent({
 
   emits: [
     ...useDatetimeEmits,
-    'range-start', 'range-end', 'navigation'
+    'rangeStart', 'rangeEnd', 'navigation'
   ],
 
   setup (props, { slots, emit }) {
@@ -13712,7 +13719,9 @@ var QDate = 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 => {
@@ -14395,7 +14404,7 @@ var QDate = createComponent({
           finalHash: initHash
         };
 
-        emit('range-start', getShortDate(day));
+        emit('rangeStart', getShortDate(day));
       }
       else {
         const
@@ -14408,7 +14417,7 @@ var QDate = createComponent({
         editRange.value = null;
         addToModel(initHash === finalHash ? day : { target: day, ...payload });
 
-        emit('range-end', {
+        emit('rangeEnd', {
           from: getShortDate(payload.from),
           to: getShortDate(payload.to)
         });
@@ -14713,7 +14722,7 @@ const positionClass$1 = {
   left: 'fixed-left items-center'
 };
 
-const transitions = {
+const defaultTransitions = {
   standard: [ 'scale', 'scale' ],
   top: [ 'slide-down', 'slide-up' ],
   bottom: [ 'slide-up', 'slide-down' ],
@@ -14730,8 +14739,8 @@ var QDialog = createComponent({
     ...useModelToggleProps,
     ...useTransitionProps,
 
-    transitionShow: String,
-    transitionHide: String,
+    transitionShow: String, // override useTransitionProps
+    transitionHide: String, // override useTransitionProps
 
     persistent: Boolean,
     autoClose: Boolean,
@@ -14762,7 +14771,7 @@ var QDialog = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'shake', 'click', 'escape-key'
+    'shake', 'click', 'escapeKey'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -14770,7 +14779,6 @@ var QDialog = createComponent({
 
     const innerRef = ref(null);
     const showing = ref(false);
-    const transitionState = ref(false);
     const animating = ref(false);
 
     let shakeTimeout, refocusTarget = null, isMaximized, avoidAutoClose;
@@ -14785,6 +14793,12 @@ var QDialog = 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
     );
@@ -14809,26 +14823,6 @@ var QDialog = 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(() => (
@@ -14843,12 +14837,6 @@ var QDialog = createComponent({
       attrs.class
     ]);
 
-    watch(showing, val => {
-      nextTick(() => {
-        transitionState.value = val;
-      });
-    });
-
     watch(() => props.maximized, state => {
       showing.value === true && updateMaximized(state);
     });
@@ -14928,7 +14916,10 @@ var QDialog = createComponent({
       hidePortal();
 
       if (refocusTarget !== null) {
-        refocusTarget.focus();
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus();
         refocusTarget = null;
       }
 
@@ -14948,13 +14939,23 @@ var QDialog = 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;
@@ -14980,7 +14981,7 @@ var QDialog = createComponent({
           props.maximized !== true && props.noShake !== true && shake();
         }
         else {
-          emit('escape-key');
+          emit('escapeKey');
           hide();
         }
       }
@@ -15035,7 +15036,7 @@ var QDialog = createComponent({
         hide(e);
       }
       else if (props.noShake !== true) {
-        shake();
+        shake(e.relatedTarget);
       }
     }
 
@@ -15078,14 +15079,15 @@ var QDialog = 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', {
@@ -15158,7 +15160,7 @@ var QDrawer = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'on-layout', 'mini-state'
+    'onLayout', 'miniState'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -15491,7 +15493,7 @@ var QDrawer = createComponent({
     watch(offset, val => { updateLayout('offset', val); });
 
     watch(onLayout, val => {
-      emit('on-layout', val);
+      emit('onLayout', val);
       updateLayout('space', val);
     });
 
@@ -15515,7 +15517,7 @@ var QDrawer = createComponent({
       }
     });
 
-    watch(isMini, val => { emit('mini-state', val); });
+    watch(isMini, val => { emit('miniState', val); });
 
     function applyPosition (position) {
       if (position === void 0) {
@@ -15680,8 +15682,8 @@ var QDrawer = createComponent({
     }
 
     onMounted(() => {
-      emit('on-layout', onLayout.value);
-      emit('mini-state', isMini.value);
+      emit('onLayout', onLayout.value);
+      emit('miniState', isMini.value);
 
       lastDesktopState = props.showIfAbove === true;
 
@@ -16234,7 +16236,7 @@ var QTooltip = createComponent({
 
     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 });
@@ -16431,10 +16433,7 @@ var QTooltip = createComponent({
     }
 
     function renderPortalContent () {
-      return h(Transition, {
-        name: transition.value,
-        appear: true
-      }, getTooltipContent)
+      return h(Transition, transitionProps.value, getTooltipContent)
     }
 
     onBeforeUnmount(anchorCleanup);
@@ -17808,7 +17807,7 @@ var QExpansionItem = createComponent({
 
   emits: [
     ...useModelToggleEmits,
-    'click', 'after-show', 'after-hide'
+    'click', 'afterShow', 'afterHide'
   ],
 
   setup (props, { slots, emit }) {
@@ -17890,7 +17889,6 @@ var QExpansionItem = createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-owns': targetUid,
         'aria-controls': targetUid,
         'aria-label': toggleAriaLabel
       }
@@ -17917,11 +17915,11 @@ var QExpansionItem = createComponent({
     }
 
     function onShow () {
-      emit('after-show');
+      emit('afterShow');
     }
 
     function onHide () {
-      emit('after-hide');
+      emit('afterHide');
     }
 
     function enterGroup () {
@@ -18271,13 +18269,11 @@ var QFab = createComponent({
 
     const actionAttrs = 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';
       }
 
@@ -18346,7 +18342,6 @@ var QFab = createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 
@@ -18749,7 +18744,7 @@ const useFieldProps = {
   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 } = getCurrentInstance();
@@ -19844,9 +19839,11 @@ var QFile = createComponent({
     Object.assign(proxy, {
       removeAtIndex,
       removeFile,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     });
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value);
+
     return useField(state)
   }
 });
@@ -20057,7 +20054,7 @@ var QForm = createComponent({
     onSubmit: Function
   },
 
-  emits: [ 'reset', 'validation-success', 'validation-error' ],
+  emits: [ 'reset', 'validationSuccess', 'validationError' ],
 
   setup (props, { slots, emit }) {
     const vm = getCurrentInstance();
@@ -20074,7 +20071,7 @@ var QForm = 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 => {
@@ -20176,7 +20173,9 @@ var QForm = 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 });
@@ -20527,7 +20526,7 @@ var QImg = createComponent({
 
     const images = [
       ref(null),
-      ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+      ref(getPlaceholderSrc())
     ];
 
     const position = ref(0);
@@ -20567,18 +20566,24 @@ var QImg = createComponent({
         : 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;
     }
 
@@ -20613,7 +20618,7 @@ var QImg = createComponent({
       // 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;
@@ -20624,19 +20629,11 @@ var QImg = createComponent({
       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 h(
-        'div',
-        { class: 'q-img__container absolute-full', key },
-        child
-      )
-    }
-
     function getImage (index) {
       const img = images[ index ].value;
 
@@ -20664,7 +20661,11 @@ var QImg = createComponent({
         data.class += ' q-img__image--loaded';
       }
 
-      return getContainer('img' + index, h('img', data))
+      return h(
+        'div',
+        { class: 'q-img__container absolute-full', key: 'img' + index },
+        h('img', data)
+      )
     }
 
     function getContent () {
@@ -20695,7 +20696,7 @@ var QImg = createComponent({
     }
 
     {
-      if (__QUASAR_SSR_CLIENT__ && isRuntimeSsrPreHydration.value === true) {
+      if (__QUASAR_SSR_CLIENT__) {
         onMounted(() => {
           addImage(getCurrentSrc());
         });
@@ -20994,7 +20995,7 @@ var QInnerLoading = createComponent({
     const vm = getCurrentInstance();
     const isDark = useDark(props, vm.proxy.$q);
 
-    const { transition, transitionStyle } = useTransition(props, computed(() => props.showing));
+    const { transitionProps, transitionStyle } = useTransition(props);
 
     const classes = computed(() =>
       'q-inner-loading absolute-full column flex-center'
@@ -21038,10 +21039,7 @@ var QInnerLoading = createComponent({
         : null
     }
 
-    return () => h(Transition, {
-      name: transition.value,
-      appear: true
-    }, getContent)
+    return () => h(Transition, transitionProps.value, getContent)
   }
 });
 
@@ -21229,7 +21227,7 @@ function useMask (props, emit, emitValue, inputRef) {
 
     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('');
       }
@@ -21463,6 +21461,8 @@ function useMask (props, emit, emitValue, inputRef) {
   };
 
   function onMaskedKeydown (e) {
+    emit('keydown', e);
+
     if (shouldIgnoreKey(e) === true) {
       return
     }
@@ -21642,7 +21642,8 @@ var QInput = createComponent({
 
   emits: [
     ...useFieldEmits,
-    'paste', 'change'
+    'paste', 'change',
+    'keydown', 'animationend'
   ],
 
   setup (props, { emit, attrs }) {
@@ -21700,7 +21701,7 @@ var QInput = createComponent({
       }
 
       if (props.autogrow === true) {
-        evt.onAnimationend = adjustHeight;
+        evt.onAnimationend = onAnimationend;
       }
 
       return evt
@@ -21855,6 +21856,11 @@ var QInput = createComponent({
       props.autogrow === true && adjustHeight();
     }
 
+    function onAnimationend (e) {
+      emit('animationend', e);
+      adjustHeight();
+    }
+
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
         if (
@@ -22018,9 +22024,11 @@ var QInput = createComponent({
     Object.assign(proxy, {
       focus,
       select,
-      getNativeElement: () => inputRef.value
+      getNativeElement: () => inputRef.value // deprecated
     });
 
+    injectProp(proxy, 'nativeEl', () => inputRef.value);
+
     return renderFn
   }
 });
@@ -22219,7 +22227,12 @@ var QList = createComponent({
     bordered: Boolean,
     dense: Boolean,
     separator: Boolean,
-    padding: Boolean
+    padding: Boolean,
+
+    tag: {
+      type: String,
+      default: 'div'
+    }
   },
 
   setup (props, { slots }) {
@@ -22235,7 +22248,7 @@ var QList = createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     );
 
-    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value }, hSlot(slots.default))
   }
 });
 
@@ -22273,7 +22286,7 @@ var QKnob = createComponent({
     readonly: Boolean
   },
 
-  emits: [ 'update:modelValue', 'change', 'drag-value' ],
+  emits: [ 'update:modelValue', 'change', 'dragValue' ],
 
   setup (props, { slots, emit }) {
     const { proxy } = getCurrentInstance();
@@ -22320,7 +22333,7 @@ var QKnob = createComponent({
       )
     );
 
-    const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length);
+    const decimals = computed(() => (String(props.step).trim().split('.')[ 1 ] || '').length);
     const step = computed(() => (props.step === 0 ? 1 : props.step));
     const instantFeedback = computed(() => props.instantFeedback === true || dragging.value === true);
 
@@ -22455,7 +22468,7 @@ var QKnob = createComponent({
 
       newModel = between(newModel, innerMin.value, innerMax.value);
 
-      emit('drag-value', newModel);
+      emit('dragValue', newModel);
 
       if (model.value !== newModel) {
         model.value = newModel;
@@ -22630,6 +22643,8 @@ var QScrollObserver = createComponent({
 
     const { proxy } = getCurrentInstance();
 
+    watch(() => proxy.$q.lang.rtl, emitEvent);
+
     onMounted(() => {
       parentEl = proxy.$el.parentNode;
       configureScrollTarget();
@@ -22730,7 +22745,7 @@ var QLayout = createComponent({
       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) {
@@ -24381,7 +24396,7 @@ var QPopupEdit = createComponent({
 
   emits: [
     'update:modelValue', 'save', 'cancel',
-    'before-show', 'show', 'before-hide', 'hide'
+    'beforeShow', 'show', 'beforeHide', 'hide'
   ],
 
   setup (props, { slots, emit }) {
@@ -24445,7 +24460,7 @@ var QPopupEdit = createComponent({
       validated = false;
       initialValue.value = cloneDeep(props.modelValue);
       currentModel.value = cloneDeep(props.modelValue);
-      emit('before-show');
+      emit('beforeShow');
     }
 
     function onShow () {
@@ -24463,7 +24478,7 @@ var QPopupEdit = createComponent({
         }
       }
 
-      emit('before-hide');
+      emit('beforeHide');
     }
 
     function onHide () {
@@ -24585,6 +24600,11 @@ var QPopupProxy = createComponent({
       toggle (evt) { popupRef.value.toggle(evt); }
     });
 
+    injectProp(proxy, 'currentComponent', () => ({
+      type: type.value,
+      ref: popupRef.value
+    }));
+
     return () => {
       const data = {
         ref: popupRef,
@@ -25732,7 +25752,7 @@ var QScrollArea = createComponent({
     scroll.horizontal.percentage = 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 = computed(() =>
@@ -25758,7 +25778,7 @@ var QScrollArea = createComponent({
       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`
       }
     });
@@ -25952,6 +25972,15 @@ var QScrollArea = createComponent({
 
     let scrollPosition = null;
 
+    watch(() => proxy.$q.lang.rtl, rtl => {
+      if (targetRef.value !== null) {
+        setHorizontalScrollPosition(
+          targetRef.value,
+          Math.abs(scroll.horizontal.position.value) * (rtl === true ? -1 : 1)
+        );
+      }
+    });
+
     onDeactivated(() => {
       scrollPosition = {
         top: scroll.vertical.position.value,
@@ -25988,7 +26017,9 @@ var QScrollArea = createComponent({
       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
         );
       }
@@ -26737,7 +26768,7 @@ function useVirtualScroll ({
 
   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,
@@ -26909,9 +26940,9 @@ var QSelect = createComponent({
 
   emits: [
     ...useFieldEmits,
-    'add', 'remove', 'input-value', 'new-value',
+    'add', 'remove', 'inputValue', 'newValue',
     'keyup', 'keypress', 'keydown',
-    'filter-abort'
+    'filterAbort'
   ],
 
   setup (props, { slots, emit }) {
@@ -27033,6 +27064,11 @@ var QSelect = createComponent({
         .join(', ')
     );
 
+    const ariaCurrentValue = computed(() => (props.displayValue !== void 0
+      ? props.displayValue
+      : selectedString.value
+    ));
+
     const needsHtmlFn = computed(() => (
       props.optionsHtml === true
         ? () => true
@@ -27058,20 +27094,9 @@ var QSelect = createComponent({
         '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 = 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 }`;
       }
@@ -27079,6 +27104,12 @@ var QSelect = createComponent({
       return attrs
     });
 
+    const listboxAttrs = computed(() => ({
+      id: `${ state.targetUid.value }_lb`,
+      role: 'listbox',
+      'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+    }));
+
     const selectedScope = computed(() => {
       return innerValue.value.map((opt, i) => ({
         index: i,
@@ -27574,7 +27605,9 @@ var QSelect = createComponent({
         && 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);
@@ -27659,7 +27692,7 @@ var QSelect = createComponent({
         };
 
         if (props.onNewValue !== void 0) {
-          emit('new-value', inputValue.value, done);
+          emit('newValue', inputValue.value, done);
         }
         else {
           done(inputValue.value);
@@ -27682,8 +27715,8 @@ var QSelect = createComponent({
       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
           )
     }
@@ -27721,9 +27754,7 @@ var QSelect = createComponent({
 
       return [
         h('span', {
-          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: props.displayValue !== void 0
-            ? props.displayValue
-            : selectedString.value
+          [ valueAsHtml.value === true ? 'innerHTML' : 'textContent' ]: ariaCurrentValue.value
         })
       ]
     }
@@ -27778,7 +27809,7 @@ var QSelect = createComponent({
         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
@@ -27826,7 +27857,7 @@ var QSelect = createComponent({
     function setInputValue (val) {
       if (inputValue.value !== val) {
         inputValue.value = val;
-        emit('input-value', val);
+        emit('inputValue', val);
       }
     }
 
@@ -27850,7 +27881,7 @@ var QSelect = createComponent({
       }
 
       if (state.innerLoading.value === true) {
-        emit('filter-abort');
+        emit('filterAbort');
       }
       else {
         state.innerLoading.value = true;
@@ -28067,7 +28098,7 @@ var QSelect = createComponent({
         filterId = void 0;
 
         if (state.innerLoading.value === true) {
-          emit('filter-abort');
+          emit('filterAbort');
           state.innerLoading.value = false;
           innerLoadingIndicator.value = false;
         }
@@ -28153,14 +28184,14 @@ var QSelect = createComponent({
 
     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);
     }
@@ -28278,8 +28309,9 @@ var QSelect = createComponent({
               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,
@@ -32151,7 +32183,7 @@ var QTable = createComponent({
   },
 
   emits: [
-    'request', 'virtual-scroll',
+    'request', 'virtualScroll',
     ...useFullscreenEmits,
     ...useTableRowExpandEmits,
     ...useTableRowSelectionEmits
@@ -32385,7 +32417,7 @@ var QTable = createComponent({
 
         scrollTarget.scrollTop = offsetTop;
 
-        emit('virtual-scroll', {
+        emit('virtualScroll', {
           index: toIndex,
           from: 0,
           to: innerPagination.value.rowsPerPage - 1,
@@ -32395,7 +32427,7 @@ var QTable = createComponent({
     }
 
     function onVScroll (info) {
-      emit('virtual-scroll', info);
+      emit('virtualScroll', info);
     }
 
     function getProgress () {
@@ -34323,9 +34355,9 @@ var QTree = createComponent({
     'update:expanded',
     'update:ticked',
     'update:selected',
-    'lazy-load',
-    'after-show',
-    'after-hide'
+    'lazyLoad',
+    'afterShow',
+    'afterHide'
   ],
 
   setup (props, { slots, emit }) {
@@ -34574,7 +34606,7 @@ var QTree = createComponent({
         if (Array.isArray(node[ props.childrenKey ]) !== true) {
           node[ props.childrenKey ] = [];
         }
-        emit('lazy-load', {
+        emit('lazyLoad', {
           node,
           key,
           done: children => {
@@ -34721,11 +34753,11 @@ var QTree = createComponent({
     }
 
     function onShow () {
-      emit('after-show');
+      emit('afterShow');
     }
 
     function onHide () {
-      emit('after-hide');
+      emit('afterHide');
     }
 
     function getNode (node) {
@@ -35568,7 +35600,7 @@ function injectPlugin ({ props, emit, helpers }) {
           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--;
         }
       };
@@ -37944,8 +37976,7 @@ var BottomSheet$1 = createComponent({
             tabindex: 0,
             clickable: true,
             dark: isDark.value,
-            onClick () { onOk(action); },
-            onKeyup (e) { e.keyCode === 13 && onOk(action); }
+            onClick () { onOk(action); }
           }, () => [
             h(
               QItemSection,
@@ -38582,12 +38613,12 @@ var DialogPlugin = 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
         })
@@ -38597,11 +38628,11 @@ var DialogPlugin = 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
         })
       ]
@@ -40288,7 +40319,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.10.0',
+  version: '2.10.2',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7