quasar 2.11.4 → 2.11.6

package/dist/quasar.css

@@ -2938,6 +2938,7 @@ body.body--dark .q-knob--editable:focus:before {
 
 .q-layout {
   width: 100%;
+  outline: 0;
 }
 
 .q-layout-container {
@@ -11561,10 +11562,6 @@ sup {
   animation: none !important;
 }
 
-.invisible svg * {
-  display: none;
-}
-
 .transparent {
   background: transparent !important;
 }

package/dist/quasar.esm.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.4
+ * Quasar Framework v2.11.6
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1474,20 +1474,23 @@ function isDeepEqual (a, b) {
         return false
       }
 
-      i = a.entries().next();
+      let iter = a.entries();
+
+      i = iter.next();
       while (i.done !== true) {
         if (b.has(i.value[ 0 ]) !== true) {
           return false
         }
-        i = i.next();
+        i = iter.next();
       }
 
-      i = a.entries().next();
+      iter = a.entries();
+      i = iter.next();
       while (i.done !== true) {
         if (isDeepEqual(i.value[ 1 ], b.get(i.value[ 0 ])) !== true) {
           return false
         }
-        i = i.next();
+        i = iter.next();
       }
 
       return true
@@ -1498,12 +1501,14 @@ function isDeepEqual (a, b) {
         return false
       }
 
-      i = a.entries().next();
+      const iter = a.entries();
+
+      i = iter.next();
       while (i.done !== true) {
         if (b.has(i.value[ 0 ]) !== true) {
           return false
         }
-        i = i.next();
+        i = iter.next();
       }
 
       return true
@@ -1646,7 +1651,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 var installQuasar = function (parentApp, opts = {}) {
-    const $q = { version: '2.11.4' };
+    const $q = { version: '2.11.6' };
 
     if (globalConfigIsFrozen === false) {
       if (opts.config !== void 0) {
@@ -12098,7 +12103,7 @@ function useDatetime (props, $q) {
   });
 
   const tabindex = computed(() => {
-    return props.editable === true ? 0 : -1
+    return editable.value === true ? 0 : -1
   });
 
   const headerClass = computed(() => {
@@ -14635,6 +14640,7 @@ let
   vpPendingUpdate = false,
   bodyLeft,
   bodyTop,
+  href,
   closeTimer = null;
 
 function onWheel (e) {
@@ -14721,6 +14727,8 @@ function apply$1 (action) {
     bodyLeft = body.style.left;
     bodyTop = body.style.top;
 
+    href = window.location.href;
+
     body.style.left = `-${ scrollPositionX }px`;
     body.style.top = `-${ scrollPositionY }px`;
 
@@ -14733,6 +14741,7 @@ function apply$1 (action) {
 
     body.classList.add('q-body--prevent-scroll');
     document.qScrollPrevented = true;
+
     if (client.is.ios === true) {
       if (hasViewport === true) {
         window.scrollTo(0, 0);
@@ -14771,7 +14780,11 @@ function apply$1 (action) {
     body.style.left = bodyLeft;
     body.style.top = bodyTop;
 
-    window.scrollTo(scrollPositionX, scrollPositionY);
+    // scroll back only if route has not changed
+    if (window.location.href === href) {
+      window.scrollTo(scrollPositionX, scrollPositionY);
+    }
+
     maxScrollTop = void 0;
   }
 }
@@ -15162,7 +15175,7 @@ var QDialog = createComponent({
         hide(e);
       }
       else if (props.noShake !== true) {
-        shake(e.relatedTarget);
+        shake();
       }
     }
 
@@ -15189,8 +15202,6 @@ var QDialog = createComponent({
 
     onBeforeUnmount(cleanup);
 
-    const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin';
-
     function renderPortalContent () {
       return h('div', {
         role: 'dialog',
@@ -15208,7 +15219,7 @@ var QDialog = createComponent({
               style: transitionStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
-              [ backdropEvt ]: onBackdropClick
+              onClick: onBackdropClick
             })
             : null
         )),
@@ -17739,7 +17750,7 @@ var QSlideTransition = createComponent({
     }
 
     function begin (el, height, done) {
-      el.style.overflowY = 'hidden';
+      // here overflowY is 'hidden'
       if (height !== void 0) {
         el.style.height = `${ height }px`;
       }
@@ -17761,12 +17772,14 @@ var QSlideTransition = createComponent({
       let pos = 0;
       element = el;
 
+      // if animationg overflowY is already 'hidden'
       if (animating === true) {
         cleanup();
         pos = el.offsetHeight === el.scrollHeight ? 0 : void 0;
       }
       else {
         lastEvent = 'hide';
+        el.style.overflowY = 'hidden';
       }
 
       begin(el, pos, done);
@@ -17795,6 +17808,9 @@ var QSlideTransition = createComponent({
       }
       else {
         lastEvent = 'show';
+        // we need to set overflowY 'hidden' before calculating the height
+        // or else we get small differences
+        el.style.overflowY = 'hidden';
         pos = el.scrollHeight;
       }
 
@@ -20943,6 +20959,7 @@ var QInfiniteScroll = createComponent({
     const isFetching = ref(false);
     const isWorking = ref(true);
     const rootRef = ref(null);
+    const loadingRef = ref(null);
 
     let index = props.initialIndex || 0;
     let localScrollTarget, poll;
@@ -21074,12 +21091,32 @@ var QInfiniteScroll = createComponent({
       }
     }
 
+    function updateSvgAnimations (isRetry) {
+      if (renderLoadingSlot.value === true) {
+        if (loadingRef.value === null) {
+          isRetry !== true && nextTick(() => { updateSvgAnimations(true); });
+          return
+        }
+
+        // we need to pause svg animations (if any) when hiding
+        // otherwise the browser will keep on recalculating the style
+        const action = `${ isFetching.value === true ? 'un' : '' }pauseAnimations`;
+        Array.from(loadingRef.value.getElementsByTagName('svg')).forEach(el => {
+          el[ action ]();
+        });
+      }
+    }
+
+    const renderLoadingSlot = computed(() => props.disable !== true && isWorking.value === true);
+
+    watch([ isFetching, renderLoadingSlot ], () => { updateSvgAnimations(); });
+
     watch(() => props.disable, val => {
       if (val === true) { stop(); }
       else { resume(); }
     });
 
-    watch(() => props.reverse, val => {
+    watch(() => props.reverse, () => {
       if (isFetching.value === false && isWorking.value === true) {
         immediatePoll();
       }
@@ -21110,8 +21147,9 @@ var QInfiniteScroll = createComponent({
 
     onMounted(() => {
       setDebounce(props.debounce);
-
       updateScrollTarget();
+
+      isFetching.value === false && updateSvgAnimations();
     });
 
     // expose public methods
@@ -21124,9 +21162,9 @@ var QInfiniteScroll = createComponent({
     return () => {
       const child = hUniqueSlot(slots.default, []);
 
-      if (props.disable !== true && isWorking.value === true) {
+      if (renderLoadingSlot.value === true) {
         child[ props.reverse === false ? 'push' : 'unshift' ](
-          h('div', { class: classes.value }, hSlot(slots.loading))
+          h('div', { ref: loadingRef, class: classes.value }, hSlot(slots.loading))
         );
       }
 
@@ -21394,7 +21432,7 @@ function useMask (props, emit, emitValue, inputRef) {
 
     computedMask = mask;
     computedUnmask = val => {
-      const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length));
+      const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length + 1));
       if (unmaskMatch !== null) {
         val = unmaskMatch.slice(1).join('');
       }
@@ -25724,13 +25762,13 @@ var QRating = createComponent({
         case 37: // LEFT ARROW
         case 40: // DOWN ARROW
           if (iconRefs[ `rt${ i - 1 }` ]) {
-            iconRefs[ `rt${ i - 1 }` ].$el.focus();
+            iconRefs[ `rt${ i - 1 }` ].focus();
           }
           return stopAndPrevent(e)
         case 39: // RIGHT ARROW
         case 38: // UP ARROW
           if (iconRefs[ `rt${ i + 1 }` ]) {
-            iconRefs[ `rt${ i + 1 }` ].$el.focus();
+            iconRefs[ `rt${ i + 1 }` ].focus();
           }
           return stopAndPrevent(e)
       }
@@ -25753,7 +25791,7 @@ var QRating = createComponent({
         child.push(
           h('div', {
             key: i,
-            ref: vm => { iconRefs[ `rt${ i }` ] = vm; },
+            ref: el => { iconRefs[ `rt${ i }` ] = el; },
             class: 'q-rating__icon-container flex flex-center',
             ...attrs,
             onClick () { set(i); },
@@ -26298,12 +26336,16 @@ const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.bod
       return
     }
 
-    cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+    if (contentEl._qOverflowAnimationFrame !== void 0) {
+      cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+    }
+
     contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
       if (contentEl === null) {
         return
       }
 
+      contentEl._qOverflowAnimationFrame = void 0;
       const children = contentEl.children || [];
 
       filterProto
@@ -35719,7 +35761,7 @@ const props$2 = {
   factory: Function
 };
 
-const emits$1 = [ 'factory-failed', 'uploaded', 'failed', 'uploading' ];
+const emits$1 = [ 'factoryFailed', 'uploaded', 'failed', 'uploading' ];
 
 function injectPlugin ({ props, emit, helpers }) {
   const xhrs = ref([]);
@@ -35776,7 +35818,7 @@ function injectPlugin ({ props, emit, helpers }) {
 
     if (!res) {
       emit(
-        'factory-failed',
+        'factoryFailed',
         new Error('QUploader: factory() does not return properly'),
         files
       );
@@ -39068,7 +39110,7 @@ const Plugin$2 = defineReactivePlugin({
 
         const el = createGlobalNode('q-loading');
 
-        app = createApp({
+        app = createChildApp({
           name: 'QLoading',
 
           setup () {
@@ -39130,7 +39172,7 @@ const Plugin$2 = defineReactivePlugin({
               onAfterLeave
             }, getContent)
           }
-        });
+        }, Plugin$2.__parentApp);
 
         vm = app.mount(el);
       }, props.delay);
@@ -39189,11 +39231,15 @@ const Plugin$2 = defineReactivePlugin({
     }
   },
 
-  install ({ $q }) {
+  install ({ $q, parentApp }) {
     $q.loading = this;
 
-    if ($q.config.loading !== void 0) {
-      this.setDefaults($q.config.loading);
+    {
+      Plugin$2.__parentApp = parentApp;
+
+      if ($q.config.loading !== void 0) {
+        this.setDefaults($q.config.loading);
+      }
     }
   }
 });
@@ -40149,6 +40195,9 @@ function fallback (text) {
   area.contentEditable = 'true';
   area.style.position = 'fixed'; // avoid scrolling to bottom
 
+  const fn = () => {};
+  addFocusout(fn);
+
   document.body.appendChild(area);
   area.focus();
   area.select();
@@ -40156,6 +40205,8 @@ function fallback (text) {
   const res = document.execCommand('copy');
 
   area.remove();
+  removeFocusout(fn);
+
   return res
 }
 
@@ -40540,7 +40591,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.11.4',
+  version: '2.11.6',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7