quasar 2.4.4 → 2.4.8

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.4
+ * Quasar Framework v2.4.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -661,7 +661,8 @@ input[type='search']::-webkit-search-decoration
     display: flex !important
     align-items: center
     justify-content: center
-  > svg
+  > svg,
+  > img
     width: 100%
     height: 100%
 .q-icon,

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.4
+ * Quasar Framework v2.4.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1447,7 +1447,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.4' };
+      const $q = { version: '2.4.8' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -1532,22 +1532,22 @@
 
   const
     xhr = XMLHttpRequest,
-    send = xhr.prototype.send,
-    stackStart = [],
-    stackStop = [];
+    open = xhr.prototype.open,
+    positionValues = [ 'top', 'right', 'bottom', 'left' ];
 
+  let stack = [];
   let highjackCount = 0;
 
   function translate ({ p, pos, active, horiz, reverse, dir }) {
     let x = 1, y = 1;
 
-    if (horiz) {
-      if (reverse) { x = -1; }
+    if (horiz === true) {
+      if (reverse === true) { x = -1; }
       if (pos === 'bottom') { y = -1; }
       return { transform: `translate3d(${ x * (p - 100) }%,${ active ? 0 : y * -200 }%,0)` }
     }
 
-    if (reverse) { y = -1; }
+    if (reverse === true) { y = -1; }
     if (pos === 'right') { x = -1; }
     return { transform: `translate3d(${ active ? 0 : dir * x * -200 }%,${ y * (p - 100) }%,0)` }
   }
@@ -1573,32 +1573,45 @@
     return between(p + amount, 0, 100)
   }
 
-  function highjackAjax (start, stop) {
-    stackStart.push(start);
-    stackStop.push(stop);
-
+  function highjackAjax (stackEntry) {
     highjackCount++;
 
+    stack.push(stackEntry);
+
     if (highjackCount > 1) { return }
 
-    function endHandler () {
-      stackStop.forEach(fn => { fn(); });
-    }
+    xhr.prototype.open = function (_, url) {
+      const stopStack = [];
+
+      const loadStart = () => {
+        stack.forEach(entry => {
+          if (
+            entry.hijackFilter.value === null
+            || (entry.hijackFilter.value(url) === true)
+          ) {
+            entry.start();
+            stopStack.push(entry.stop);
+          }
+        });
+      };
 
-    xhr.prototype.send = function (/* ...args */) {
-      stackStart.forEach(fn => { fn(); });
-      this.addEventListener('loadend', endHandler, false);
-      send.apply(this, arguments);
+      const loadEnd = () => {
+        stopStack.forEach(stop => { stop(); });
+      };
+
+      this.addEventListener('loadstart', loadStart, { once: true });
+      this.addEventListener('loadend', loadEnd, { once: true });
+
+      open.apply(this, arguments);
     };
   }
 
-  function restoreAjax (start, stop) {
-    stackStart.splice(stackStart.indexOf(start), 1);
-    stackStop.splice(stackStop.indexOf(stop), 1);
+  function restoreAjax (start) {
+    stack = stack.filter(entry => entry.start !== start);
 
     highjackCount = Math.max(0, highjackCount - 1);
     if (highjackCount === 0) {
-      xhr.prototype.send = send;
+      xhr.prototype.open = open;
     }
   }
 
@@ -1609,15 +1622,19 @@
       position: {
         type: String,
         default: 'top',
-        validator: val => [ 'top', 'right', 'bottom', 'left' ].includes(val)
+        validator: val => positionValues.includes(val)
       },
+
       size: {
         type: String,
         default: '2px'
       },
+
       color: String,
       skipHijack: Boolean,
-      reverse: Boolean
+      reverse: Boolean,
+
+      hijackFilter: Function
     },
 
     emits: [ 'start', 'stop' ],
@@ -1649,7 +1666,7 @@
           active,
           horiz: horizontal.value,
           reverse: proxy.$q.lang.rtl === true && [ 'top', 'bottom' ].includes(props.position)
-            ? !props.reverse
+            ? props.reverse === false
             : props.reverse,
           dir: proxy.$q.lang.rtl === true ? -1 : 1
         });
@@ -1745,13 +1762,17 @@
       vue.onMounted(() => {
         if (props.skipHijack !== true) {
           hijacked = true;
-          highjackAjax(start, stop);
+          highjackAjax({
+            start,
+            stop,
+            hijackFilter: vue.computed(() => props.hijackFilter || null)
+          });
         }
       });
 
       vue.onBeforeUnmount(() => {
         clearTimeout(timer);
-        hijacked === true && restoreAjax(start, stop);
+        hijacked === true && restoreAjax(start);
       });
 
       // expose public methods
@@ -1848,6 +1869,8 @@
       : vnode
   }
 
+  const defaultViewBox = '0 0 24 24';
+
   const sameFn = i => i;
   const ionFn = i => `ionicons ${ i }`;
 
@@ -1901,7 +1924,7 @@
 
       const classes = vue.computed(() =>
         'q-icon'
-        + (props.left === true ? ' on-left' : '')
+        + (props.left === true ? ' on-left' : '') // TODO Qv3: drop this
         + (props.right === true ? ' on-right' : '')
         + (props.color !== void 0 ? ` text-${ props.color }` : '')
       );
@@ -1911,10 +1934,7 @@
         let icon = props.name;
 
         if (!icon) {
-          return {
-            none: true,
-            cls: classes.value
-          }
+          return { none: true }
         }
 
         if ($q.iconMapFn !== null) {
@@ -1925,7 +1945,7 @@
             }
             else {
               return {
-                cls: res.cls + ' ' + classes.value,
+                cls: res.cls,
                 content: res.content !== void 0
                   ? res.content
                   : ' '
@@ -1935,39 +1955,32 @@
         }
 
         if (mRE.test(icon) === true) {
-          const [ def, viewBox ] = icon.split('|');
+          const [ def, viewBox = defaultViewBox ] = icon.split('|');
 
           return {
             svg: true,
-            cls: classes.value,
+            viewBox,
             nodes: def.split('&&').map(path => {
               const [ d, style, transform ] = path.split('@@');
-              return vue.h('path', {
-                style,
-                d,
-                transform
-              })
-            }),
-            viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+              return vue.h('path', { style, d, transform })
+            })
           }
         }
 
         if (imgRE.test(icon) === true) {
           return {
             img: true,
-            cls: classes.value,
             src: icon.substring(4)
           }
         }
 
         if (svgUseRE.test(icon) === true) {
-          const [ def, viewBox ] = icon.split('|');
+          const [ def, viewBox = defaultViewBox ] = icon.split('|');
 
           return {
             svguse: true,
-            cls: classes.value,
             src: def.substring(7),
-            viewBox: viewBox !== void 0 ? viewBox : '0 0 24 24'
+            viewBox
           }
         }
 
@@ -2001,14 +2014,14 @@
         }
 
         return {
-          cls: cls + ' ' + classes.value,
+          cls,
           content
         }
       });
 
       return () => {
         const data = {
-          class: type.value.cls,
+          class: classes.value,
           style: sizeStyle.value,
           'aria-hidden': 'true',
           role: 'presentation'
@@ -2019,24 +2032,31 @@
         }
 
         if (type.value.img === true) {
-          data.src = type.value.src;
-          return vue.h('img', data)
+          return vue.h('div', data, hMergeSlot(slots.default, [
+            vue.h('img', { src: type.value.src })
+          ]))
         }
 
         if (type.value.svg === true) {
-          data.viewBox = type.value.viewBox;
-
-          return vue.h('svg', data, hMergeSlot(slots.default, type.value.nodes))
+          return vue.h('div', data, hMergeSlot(slots.default, [
+            vue.h('svg', {
+              viewBox: type.value.viewBox
+            }, type.value.nodes)
+          ]))
         }
 
         if (type.value.svguse === true) {
-          data.viewBox = type.value.viewBox;
+          return vue.h('div', data, hMergeSlot(slots.default, [
+            vue.h('svg', {
+              viewBox: type.value.viewBox
+            }, [
+              vue.h('use', { 'xlink:href': type.value.src })
+            ])
+          ]))
+        }
 
-          return vue.h(
-            'svg',
-            data,
-            hMergeSlot(slots.default, [ vue.h('use', { 'xlink:href': type.value.src }) ])
-          )
+        if (type.value.cls !== void 0) {
+          data.class += ' ' + type.value.cls;
         }
 
         return vue.h(props.tag, data, hMergeSlot(slots.default, [
@@ -2352,7 +2372,7 @@
       );
 
       const sepClass = vue.computed(() => (props.separatorColor ? ` text-${ props.separatorColor }` : ''));
-      const activeClass = vue.computed(() => `text-${ props.activeColor }`);
+      const activeClass = vue.computed(() => ` text-${ props.activeColor }`);
 
       return () => {
         const vnodes = getNormalizedVNodes(
@@ -2374,8 +2394,8 @@
           if (comp.type !== void 0 && comp.type.name === 'QBreadcrumbsEl') {
             const middle = els < len;
             const disabled = comp.props !== null && disabledValues.includes(comp.props.disable);
-            const cls = (middle === true ? ' q-breadcrumbs--last' : '')
-              + (disabled !== true && middle === true ? ' ' + activeClass.value : '');
+            const cls = (middle === true ? '' : ' q-breadcrumbs--last')
+              + (disabled !== true && middle === true ? activeClass.value : '');
 
             els++;
 
@@ -2687,13 +2707,13 @@
     },
 
     setup (props, { slots }) {
-      const { linkTag, linkProps, hasRouterLink, navigateToRouterLink } = useRouterLink();
+      const { linkTag, linkProps, linkClass, hasRouterLink, navigateToRouterLink } = useRouterLink();
 
       const data = vue.computed(() => {
         const acc = {
           class: 'q-breadcrumbs__el q-link '
             + 'flex inline items-center relative-position '
-            + (props.disable !== true ? 'q-link--focusable' : 'q-breadcrumbs__el--disable'),
+            + (props.disable !== true ? 'q-link--focusable' + linkClass.value : 'q-breadcrumbs__el--disable'),
           ...linkProps.value
         };
         if (hasRouterLink.value === true) {
@@ -23886,7 +23906,7 @@
         }
       };
 
-      let timer = null, localScrollTarget, parentEl;
+      let clearTimer = null, localScrollTarget, parentEl;
 
       vue.watch(() => props.scrollTarget, () => {
         unconfigureScrollTarget();
@@ -23894,9 +23914,7 @@
       });
 
       function emitEvent () {
-        clearTimeout(timer);
-        cancelAnimationFrame(timer);
-        timer = null;
+        clearTimer !== null && clearTimer();
 
         const top = Math.max(0, getVerticalScrollPosition(localScrollTarget));
         const left = getHorizontalScrollPosition(localScrollTarget);
@@ -23946,10 +23964,15 @@
         if (immediately === true || props.debounce === 0 || props.debounce === '0') {
           emitEvent();
         }
-        else if (timer === null) {
-          timer = props.debounce
-            ? setTimeout(emitEvent, props.debounce)
-            : requestAnimationFrame(emitEvent);
+        else if (clearTimer === null) {
+          const [ timer, fn ] = props.debounce
+            ? [ setTimeout(emitEvent, props.debounce), clearTimeout ]
+            : [ requestAnimationFrame(emitEvent), cancelAnimationFrame ];
+
+          clearTimer = () => {
+            fn(timer);
+            clearTimer = null;
+          };
         }
       }
 
@@ -23961,8 +23984,7 @@
       });
 
       vue.onBeforeUnmount(() => {
-        clearTimeout(timer);
-        cancelAnimationFrame(timer);
+        clearTimer !== null && clearTimer();
         unconfigureScrollTarget();
       });
 
@@ -24139,6 +24161,55 @@
 
       vue.provide(layoutKey, $layout);
 
+      // prevent scrollbar flicker while resizing window height
+      // if no page scrollbar is already present
+      if (getScrollbarWidth() > 0) {
+        let timer = null;
+        const el = document.body;
+
+        function restoreScrollbar () {
+          timer = null;
+          el.classList.remove('hide-scrollbar');
+        }
+
+        function hideScrollbar () {
+          if (timer === null) {
+            // if it has no scrollbar then there's nothing to do
+
+            if (el.scrollHeight > $q.screen.height) {
+              return
+            }
+
+            el.classList.add('hide-scrollbar');
+          }
+          else {
+            clearTimeout(timer);
+          }
+
+          timer = setTimeout(restoreScrollbar, 300);
+        }
+
+        function updateScrollEvent (action) {
+          if (timer !== null && action === 'remove') {
+            clearTimeout(timer);
+            restoreScrollbar();
+          }
+
+          window[ `${ action }EventListener` ]('resize', hideScrollbar);
+        }
+
+        vue.watch(
+          () => (props.container !== true ? 'add' : 'remove'),
+          updateScrollEvent
+        );
+
+        props.container !== true && updateScrollEvent('add');
+
+        vue.onUnmounted(() => {
+          updateScrollEvent('remove');
+        });
+      }
+
       return () => {
         const content = hMergeSlot(slots.default, [
           vue.h(QScrollObserver, { onScroll: onPageScroll }),
@@ -24282,12 +24353,8 @@
       ...useSizeProps,
       ...useFormProps,
 
-      modelValue: {
-        required: true
-      },
-      val: {
-        required: true
-      },
+      modelValue: { required: true },
+      val: { required: true },
 
       label: String,
       leftLabel: Boolean,
@@ -25220,8 +25287,8 @@
               style,
               disable: props.disable,
               flat: !active,
-              textColor: active ? props.textColor : void 0,
-              label: props.min
+              label: props.min,
+              ...(active ? activeBtnProps.value : {})
             }, props.min));
           }
           if (boundaryEnd) {
@@ -25231,8 +25298,8 @@
               style,
               disable: props.disable,
               flat: !active,
-              textColor: active ? props.textColor : void 0,
-              label: props.max
+              label: props.max,
+              ...(active ? activeBtnProps.value : {})
             }, props.max));
           }
           if (ellipsesStart) {
@@ -37683,14 +37750,14 @@
         applyState('show');
       }
 
-      if (dialogRef.value !== null) {
-        show();
-      }
-      else if (typeof DialogComponent.__asyncLoader === 'function') {
+      if (typeof DialogComponent.__asyncLoader === 'function') {
         DialogComponent.__asyncLoader().then(() => {
           vue.nextTick(show);
         });
       }
+      else {
+        vue.nextTick(show);
+      }
 
       return API
     }
@@ -39194,7 +39261,7 @@
   });
 
   var index_umd = {
-    version: '2.4.4',
+    version: '2.4.8',
     install (app, opts) {
       installQuasar(app, {
         components,