quasar 2.10.1 → 2.11.0

package/dist/quasar.esm.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.
  */
@@ -1610,7 +1610,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 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) {
@@ -5494,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;
       }
 
@@ -5753,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)
       };
 
@@ -13717,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 => {
@@ -14912,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;
       }
 
@@ -14941,9 +14948,9 @@ var QDialog = createComponent({
       });
     }
 
-    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();
@@ -15056,6 +15063,8 @@ var QDialog = createComponent({
 
     onBeforeUnmount(cleanup);
 
+    const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin';
+
     function renderPortalContent () {
       return h('div', {
         role: 'dialog',
@@ -15073,7 +15082,7 @@ var QDialog = createComponent({
               style: transitionStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
-              onFocusin: onBackdropClick
+              [ backdropEvt ]: onBackdropClick
             })
             : null
         )),
@@ -17882,7 +17891,6 @@ var QExpansionItem = createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-owns': targetUid,
         'aria-controls': targetUid,
         'aria-label': toggleAriaLabel
       }
@@ -18263,13 +18271,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';
       }
 
@@ -18338,7 +18344,6 @@ var QFab = createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 
@@ -20523,7 +20528,7 @@ var QImg = createComponent({
 
     const images = [
       ref(null),
-      ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+      ref(getPlaceholderSrc())
     ];
 
     const position = ref(0);
@@ -20563,18 +20568,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;
     }
 
@@ -20609,7 +20620,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;
@@ -20620,19 +20631,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;
 
@@ -20660,7 +20663,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 () {
@@ -20691,7 +20698,7 @@ var QImg = createComponent({
     }
 
     {
-      if (__QUASAR_SSR_CLIENT__ && isRuntimeSsrPreHydration.value === true) {
+      if (__QUASAR_SSR_CLIENT__) {
         onMounted(() => {
           addImage(getCurrentSrc());
         });
@@ -21456,6 +21463,8 @@ function useMask (props, emit, emitValue, inputRef) {
   };
 
   function onMaskedKeydown (e) {
+    emit('keydown', e);
+
     if (shouldIgnoreKey(e) === true) {
       return
     }
@@ -21635,7 +21644,8 @@ var QInput = createComponent({
 
   emits: [
     ...useFieldEmits,
-    'paste', 'change'
+    'paste', 'change',
+    'keydown', 'animationend'
   ],
 
   setup (props, { emit, attrs }) {
@@ -21693,7 +21703,7 @@ var QInput = createComponent({
       }
 
       if (props.autogrow === true) {
-        evt.onAnimationend = adjustHeight;
+        evt.onAnimationend = onAnimationend;
       }
 
       return evt
@@ -21848,6 +21858,11 @@ var QInput = createComponent({
       props.autogrow === true && adjustHeight();
     }
 
+    function onAnimationend (e) {
+      emit('animationend', e);
+      adjustHeight();
+    }
+
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
         if (
@@ -21898,8 +21913,8 @@ var QInput = createComponent({
           // 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;
@@ -22235,7 +22250,7 @@ var QList = createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     );
 
-    return () => h(props.tag, { class: classes.value, role: 'list' }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value }, hSlot(slots.default))
   }
 });
 
@@ -24587,6 +24602,11 @@ var QPopupProxy = createComponent({
       toggle (evt) { popupRef.value.toggle(evt); }
     });
 
+    injectProp(proxy, 'currentComponent', () => ({
+      type: type.value,
+      ref: popupRef.value
+    }));
+
     return () => {
       const data = {
         ref: popupRef,
@@ -24682,9 +24702,11 @@ var QLinearProgress = createComponent({
     );
 
     const trackStyle = computed(() => width(props.buffer !== void 0 ? props.buffer : 1, widthReverse.value, proxy.$q));
+    const transitionSuffix = computed(() => `with${ props.instantFeedback === true ? 'out' : '' }-transition`);
+
     const trackClass = 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 }` : '')
     );
@@ -24692,13 +24714,14 @@ var QLinearProgress = createComponent({
     const modelStyle = computed(() => width(motion.value === true ? 1 : props.value, widthReverse.value, proxy.$q));
     const modelClass = 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 = computed(() => ({ width: `${ props.value * 100 }%` }));
     const stripeClass = computed(() =>
       `q-linear-progress__stripe absolute-${ props.reverse === true ? 'right' : 'left' }`
+      + ` q-linear-progress__stripe--${ transitionSuffix.value }`
     );
 
     return () => {
@@ -27046,6 +27069,11 @@ var QSelect = createComponent({
         .join(', ')
     );
 
+    const ariaCurrentValue = computed(() => (props.displayValue !== void 0
+      ? props.displayValue
+      : selectedString.value
+    ));
+
     const needsHtmlFn = computed(() => (
       props.optionsHtml === true
         ? () => true
@@ -27063,22 +27091,15 @@ var QSelect = createComponent({
 
     const tabindex = computed(() => (state.focused.value === true ? props.tabindex : -1));
 
-    const comboboxAttrs = 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 = computed(() => {
+    const comboboxAttrs = 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) {
@@ -27088,6 +27109,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,
@@ -27583,7 +27610,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);
@@ -27730,9 +27759,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
         })
       ]
     }
@@ -27787,7 +27814,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
@@ -28287,8 +28314,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,
@@ -31165,8 +31193,8 @@ var QStepper = createComponent({
 
     const classes = 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' : '')
     );
 
@@ -40296,7 +40324,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.10.1',
+  version: '2.11.0',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7