quasar 2.10.1 → 2.11.0

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.10.1
+ * Quasar Framework v2.11.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1612,7 +1612,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.10.1' };
+      const $q = { version: '2.11.0' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -5496,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;
         }
 
@@ -5755,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)
         };
 
@@ -13719,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 => {
@@ -14914,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;
         }
 
@@ -14943,9 +14950,9 @@
         });
       }
 
-      function shake (refocusTarget) {
-        if (refocusTarget && typeof refocusTarget.focus === 'function') {
-          refocusTarget.focus({ preventScroll: true });
+      function shake (focusTarget) {
+        if (focusTarget && typeof focusTarget.focus === 'function') {
+          focusTarget.focus({ preventScroll: true });
         }
         else {
           focus();
@@ -15058,6 +15065,8 @@
 
       vue.onBeforeUnmount(cleanup);
 
+      const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin';
+
       function renderPortalContent () {
         return vue.h('div', {
           role: 'dialog',
@@ -15075,7 +15084,7 @@
                 style: transitionStyle.value,
                 'aria-hidden': 'true',
                 tabindex: -1,
-                onFocusin: onBackdropClick
+                [ backdropEvt ]: onBackdropClick
               })
               : null
           )),
@@ -17884,7 +17893,6 @@
         return {
           role: 'button',
           'aria-expanded': showing.value === true ? 'true' : 'false',
-          'aria-owns': targetUid,
           'aria-controls': targetUid,
           'aria-label': toggleAriaLabel
         }
@@ -18265,13 +18273,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';
         }
 
@@ -18340,7 +18346,6 @@
           'aria-expanded': showing.value === true ? 'true' : 'false',
           'aria-haspopup': 'true',
           'aria-controls': targetUid,
-          'aria-owns': targetUid,
           onClick: toggle
         }, getTriggerContent),
 
@@ -20525,7 +20530,7 @@
 
       const images = [
         vue.ref(null),
-        vue.ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+        vue.ref(getPlaceholderSrc())
       ];
 
       const position = vue.ref(0);
@@ -20565,18 +20570,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;
       }
 
@@ -20611,7 +20622,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;
@@ -20622,19 +20633,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;
 
@@ -20662,7 +20665,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 () {
@@ -21453,6 +21460,8 @@
     };
 
     function onMaskedKeydown (e) {
+      emit('keydown', e);
+
       if (shouldIgnoreKey(e) === true) {
         return
       }
@@ -21632,7 +21641,8 @@
 
     emits: [
       ...useFieldEmits,
-      'paste', 'change'
+      'paste', 'change',
+      'keydown', 'animationend'
     ],
 
     setup (props, { emit, attrs }) {
@@ -21690,7 +21700,7 @@
         }
 
         if (props.autogrow === true) {
-          evt.onAnimationend = adjustHeight;
+          evt.onAnimationend = onAnimationend;
         }
 
         return evt
@@ -21845,6 +21855,11 @@
         props.autogrow === true && adjustHeight();
       }
 
+      function onAnimationend (e) {
+        emit('animationend', e);
+        adjustHeight();
+      }
+
       function emitValue (val, stopWatcher) {
         emitValueFn = () => {
           if (
@@ -21895,8 +21910,8 @@
             // but keep the total control size the same
             // Firefox rulez #14263, #14344
             $q.platform.is.firefox !== true && (inp.style.overflow = 'hidden');
-            inp.style.height = '1px';
             parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px';
+            inp.style.height = '1px';
 
             inp.style.height = inp.scrollHeight + 'px';
             inp.style.overflow = overflow;
@@ -22232,7 +22247,7 @@
         + (props.padding === true ? ' q-list--padding' : '')
       );
 
-      return () => vue.h(props.tag, { class: classes.value, role: 'list' }, hSlot(slots.default))
+      return () => vue.h(props.tag, { class: classes.value }, hSlot(slots.default))
     }
   });
 
@@ -24584,6 +24599,11 @@
         toggle (evt) { popupRef.value.toggle(evt); }
       });
 
+      injectProp(proxy, 'currentComponent', () => ({
+        type: type.value,
+        ref: popupRef.value
+      }));
+
       return () => {
         const data = {
           ref: popupRef,
@@ -24679,9 +24699,11 @@
       );
 
       const trackStyle = vue.computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q));
+      const transitionSuffix = vue.computed(() => `with${ props.instantFeedback === true ? 'out' : '' }-transition`);
+
       const trackClass = vue.computed(() =>
         'q-linear-progress__track absolute-full'
-        + ` q-linear-progress__track--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+        + ` q-linear-progress__track--${ transitionSuffix.value }`
         + ` q-linear-progress__track--${ isDark.value === true ? 'dark' : 'light' }`
         + (props.trackColor !== void 0 ? ` bg-${ props.trackColor }` : '')
       );
@@ -24689,13 +24711,14 @@
       const modelStyle = vue.computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q));
       const modelClass = vue.computed(() =>
         'q-linear-progress__model absolute-full'
-        + ` q-linear-progress__model--with${ props.instantFeedback === true ? 'out' : '' }-transition`
+        + ` q-linear-progress__model--${ transitionSuffix.value }`
         + ` q-linear-progress__model--${ motion.value === true ? 'in' : '' }determinate`
       );
 
       const stripeStyle = vue.computed(() => ({ width: `${ props.value * 100 }%` }));
       const stripeClass = vue.computed(() =>
         `q-linear-progress__stripe absolute-${ props.reverse === true ? 'right' : 'left' }`
+        + ` q-linear-progress__stripe--${ transitionSuffix.value }`
       );
 
       return () => {
@@ -27043,6 +27066,11 @@
           .join(', ')
       );
 
+      const ariaCurrentValue = vue.computed(() => (props.displayValue !== void 0
+        ? props.displayValue
+        : selectedString.value
+      ));
+
       const needsHtmlFn = vue.computed(() => (
         props.optionsHtml === true
           ? () => true
@@ -27060,22 +27088,15 @@
 
       const tabindex = vue.computed(() => (state.focused.value === true ? props.tabindex : -1));
 
-      const comboboxAttrs = vue.computed(() => ({
-        tabindex: props.tabindex,
-        role: 'combobox',
-        'aria-label': props.label,
-        'aria-readonly': props.readonly === true ? 'true' : 'false',
-        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
-        'aria-expanded': menu.value === true ? 'true' : 'false',
-        'aria-owns': `${ state.targetUid.value }_lb`,
-        'aria-controls': `${ state.targetUid.value }_lb`
-      }));
-
-      const listboxAttrs = vue.computed(() => {
+      const comboboxAttrs = vue.computed(() => {
         const attrs = {
-          id: `${ state.targetUid.value }_lb`,
-          role: 'listbox',
-          'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+          tabindex: props.tabindex,
+          role: 'combobox',
+          'aria-label': props.label,
+          'aria-readonly': props.readonly === true ? 'true' : 'false',
+          'aria-autocomplete': props.useInput === true ? 'list' : 'none',
+          'aria-expanded': menu.value === true ? 'true' : 'false',
+          'aria-controls': `${ state.targetUid.value }_lb`
         };
 
         if (optionIndex.value >= 0) {
@@ -27085,6 +27106,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,
@@ -27580,7 +27607,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);
@@ -27727,9 +27756,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
           })
         ]
       }
@@ -27784,7 +27811,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
@@ -28284,8 +28311,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,
@@ -31162,8 +31190,8 @@
 
       const classes = vue.computed(() =>
         `q-stepper q-stepper--${ props.vertical === true ? 'vertical' : 'horizontal' }`
-        + (props.flat === true || isDark.value === true ? ' q-stepper--flat no-shadow' : '')
-        + (props.bordered === true || (isDark.value === true && props.flat === false) ? ' q-stepper--bordered' : '')
+        + (props.flat === true ? ' q-stepper--flat' : '')
+        + (props.bordered === true ? ' q-stepper--bordered' : '')
         + (isDark.value === true ? ' q-stepper--dark q-dark' : '')
       );
 
@@ -40483,7 +40511,7 @@
    */
 
   var index_umd = {
-    version: '2.10.1',
+    version: '2.11.0',
     install (app, opts) {
       installQuasar(app, {
         components,