quasar 2.4.1 → 2.4.5

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.1
+ * Quasar Framework v2.4.5
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1447,7 +1447,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.1' };
+      const $q = { version: '2.4.5' };
 
       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);
+          }
+        });
+      };
+
+      const loadEnd = () => {
+        stopStack.forEach(stop => { stop(); });
+      };
 
-    xhr.prototype.send = function (/* ...args */) {
-      stackStart.forEach(fn => { fn(); });
-      this.addEventListener('loadend', endHandler, false);
-      send.apply(this, arguments);
+      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,36 @@
         }
 
         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', {
+              class: type.value.cls,
+              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', {
+              class: type.value.cls,
+              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', {
+              class: type.value.cls,
+              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 +2377,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 +2399,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 +2712,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) {
@@ -3048,7 +3073,7 @@
     xl: 24
   };
 
-  const formTypes = [ 'submit', 'reset' ];
+  const formTypes = [ 'button', 'submit', 'reset' ];
   const mediaTypeRE = /[^\s]\/[^\s]/;
 
   const useBtnProps = {
@@ -3156,7 +3181,10 @@
       }
 
       if (linkTag.value === 'a') {
-        if (acc.href === void 0) {
+        if (props.disable === true) {
+          acc[ 'aria-disabled' ] = 'true';
+        }
+        else if (acc.href === void 0) {
           acc.role = 'button';
         }
         if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {
@@ -3896,7 +3924,7 @@
     'before-show', 'show', 'before-hide', 'hide'
   ];
 
-  // handleShow/handleHide -> removeTick(), self (& emit show), prepareTick()
+  // handleShow/handleHide -> removeTick(), self (& emit show)
 
   function useModelToggle ({
     showing,
@@ -4036,17 +4064,19 @@
   }
 
   let queue = [];
-  const waitFlags = [];
+  let waitFlags = [];
+
+  function clearFlag (flag) {
+    waitFlags = waitFlags.filter(entry => entry !== flag);
+  }
 
   function addFocusWaitFlag (flag) {
+    clearFlag(flag);
     waitFlags.push(flag);
   }
 
   function removeFocusWaitFlag (flag) {
-    const index = waitFlags.indexOf(flag);
-    if (index !== -1) {
-      waitFlags.splice(index, 1);
-    }
+    clearFlag(flag);
 
     if (waitFlags.length === 0 && queue.length > 0) {
       // only call last focus handler (can't focus multiple things at once)
@@ -4061,15 +4091,11 @@
     }
     else {
       queue.push(fn);
-      return fn
     }
   }
 
   function removeFocusFn (fn) {
-    const index = queue.indexOf(fn);
-    if (index !== -1) {
-      queue.splice(index, 1);
-    }
+    queue = queue.filter(entry => entry !== fn);
   }
 
   const globalNodes = [];
@@ -4200,16 +4226,18 @@
         return
       }
 
-      if (onGlobalDialog === false && portalEl === null) {
-        portalEl = createGlobalNode();
-      }
+      if (portalIsActive.value === false) {
+        if (onGlobalDialog === false && portalEl === null) {
+          portalEl = createGlobalNode();
+        }
 
-      portalIsActive.value = true;
+        portalIsActive.value = true;
 
-      // register portal
-      portalList.push(vm.proxy);
+        // register portal
+        portalList.push(vm.proxy);
 
-      addFocusWaitFlag(focusObj);
+        addFocusWaitFlag(focusObj);
+      }
     }
 
     function hidePortal () {
@@ -4289,8 +4317,6 @@
    * Usage:
    *    registerTick(fn)
    *    registerTick(fn)
-   *    ....
-   *    prepareTick()
    */
 
   function useTick () {
@@ -4303,22 +4329,17 @@
     return {
       registerTick (fn) {
         tickFn = fn;
+
+        vue.nextTick(() => {
+          if (tickFn === fn) {
+            tickFn();
+            tickFn = void 0;
+          }
+        });
       },
 
       removeTick () {
         tickFn = void 0;
-      },
-
-      prepareTick () {
-        if (tickFn !== void 0) {
-          const fn = tickFn;
-          vue.nextTick(() => {
-            if (tickFn === fn) {
-              tickFn();
-              tickFn = void 0;
-            }
-          });
-        }
       }
     }
   }
@@ -5013,7 +5034,7 @@
       );
 
       const isDark = useDark(props, $q);
-      const { registerTick, removeTick, prepareTick } = useTick();
+      const { registerTick, removeTick } = useTick();
       const { registerTimeout, removeTimeout } = useTimeout();
       const { transition, transitionStyle } = useTransition(props, showing);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
@@ -5140,7 +5161,6 @@
           updatePosition();
           props.noFocus !== true && focus();
         });
-        prepareTick();
 
         registerTimeout(() => {
           // required in order to avoid the "double-tap needed" issue
@@ -5173,6 +5193,7 @@
           )
         ) {
           refocusTarget.focus();
+          refocusTarget = null;
         }
 
         registerTimeout(() => {
@@ -5195,6 +5216,10 @@
           removeClickOutside(clickOutsideProps);
           removeEscapeKey(onEscapeKey);
         }
+
+        if (hiding !== true) {
+          refocusTarget = null;
+        }
       }
 
       function configureScrollTarget () {
@@ -5598,6 +5623,8 @@
             key: i,
             onClick (e) { set(value, item, e); },
 
+            'aria-pressed': value === props.modelValue ? 'true' : 'false',
+
             ...attrs,
             ...opt,
 
@@ -8278,7 +8305,7 @@
     const positionProp = vue.computed(() => (
       props.vertical === true
         ? (isReversed.value === true ? 'bottom' : 'top')
-        : isReversed.value === true ? 'right' : 'left'
+        : (isReversed.value === true ? 'right' : 'left')
     ));
 
     const sizeProp = vue.computed(() => (props.vertical === true ? 'height' : 'width'));
@@ -8288,8 +8315,8 @@
     const attributes = vue.computed(() => {
       const acc = {
         role: 'slider',
-        'aria-valuemin': props.min,
-        'aria-valuemax': props.max,
+        'aria-valuemin': innerMin.value,
+        'aria-valuemax': innerMax.value,
         'aria-orientation': orientation.value,
         'data-step': props.step
       };
@@ -8480,15 +8507,19 @@
         })
       }
 
+      const filterFn = ({ value }) => value >= props.min && value <= props.max;
+
       if (Array.isArray(def) === true) {
-        return def.map(item => (Object(item) === item ? item : { value: item }))
+        return def
+          .map(item => (Object(item) === item ? item : { value: item }))
+          .filter(filterFn)
       }
 
       return Object.keys(def).map(key => {
         const item = def[ key ];
         const value = Number(key);
         return Object(item) === item ? { ...item, value } : { value, label: item }
-      })
+      }).filter(filterFn)
     }
 
     function getMarkerLabelStyle (val) {
@@ -8543,6 +8574,7 @@
           emit('pan', 'end');
         }
         active.value = false;
+        focus.value = false;
       }
       else if (event.isFirst === true) {
         dragging.value = getDragging(event.evt);
@@ -8603,7 +8635,7 @@
 
     function getThumbRenderFn (thumb) {
       const focusClass = vue.computed(() => (
-        preventFocus.value === false && focus.value === thumb.focusValue
+        preventFocus.value === false && (focus.value === thumb.focusValue || focus.value === 'both')
           ? ' q-slider--focus'
           : ''
       ));
@@ -8618,9 +8650,7 @@
         width: props.thumbSize,
         height: props.thumbSize,
         [ positionProp.value ]: `${ 100 * thumb.ratio.value }%`,
-        'z-index': thumb.nextFocus !== void 0
-          ? thumb.nextFocus.value === 'min' ? 2 : void 0
-          : void 0
+        zIndex: focus.value === thumb.focusValue ? 2 : void 0
       }));
 
       const pinColor = vue.computed(() => (
@@ -8676,12 +8706,12 @@
         return vue.h('div', {
           class: classes.value,
           style: style.value,
-          ...(thumb.getNodeData !== void 0 ? thumb.getNodeData() : {})
+          ...thumb.getNodeData()
         }, thumbContent)
       }
     }
 
-    function getContent (selectionBarStyle, events, injectThumb) {
+    function getContent (selectionBarStyle, trackContainerTabindex, trackContainerEvents, injectThumb) {
       const trackContent = [];
 
       props.innerTrackColor !== 'transparent' && trackContent.push(
@@ -8716,15 +8746,14 @@
           {
             key: 'trackC',
             class: trackContainerClass.value,
-            tabindex: tabindex.value,
-            ...events.value
+            tabindex: trackContainerTabindex.value,
+            ...trackContainerEvents.value
           },
           [
             vue.h('div', {
               class: trackClass.value,
               style: trackStyle.value
-            },
-            trackContent)
+            }, trackContent)
           ],
           'slide',
           editable.value, () => panDirective.value
@@ -8771,7 +8800,8 @@
         innerMax,
         innerMaxRatio,
         positionProp,
-        sizeProp
+        sizeProp,
+        isReversed
       },
 
       methods: {
@@ -8788,6 +8818,8 @@
     }
   }
 
+  const getNodeData = () => ({});
+
   var QSlider = createComponent({
     name: 'QSlider',
 
@@ -8815,8 +8847,20 @@
 
       const rootRef = vue.ref(null);
       const curRatio = vue.ref(0);
+      const model = vue.ref(0);
+
+      function normalizeModel () {
+        model.value = props.modelValue === null
+          ? state.innerMin.value
+          : between(props.modelValue, state.innerMin.value, state.innerMax.value);
+      }
 
-      const model = vue.ref(props.modelValue === null ? state.innerMin.value : props.modelValue);
+      vue.watch(
+        () => `${ props.modelValue }|${ state.innerMin.value }|${ state.innerMax.value }`,
+        normalizeModel
+      );
+
+      normalizeModel();
 
       const modelRatio = vue.computed(() => methods.convertModelToRatio(model.value));
       const ratio = vue.computed(() => (state.active.value === true ? curRatio.value : modelRatio.value));
@@ -8834,6 +8878,7 @@
 
       const getThumb = methods.getThumbRenderFn({
         focusValue: true,
+        getNodeData,
         ratio,
         label: vue.computed(() => (
           props.labelValue !== void 0
@@ -8845,7 +8890,7 @@
         labelTextColor: vue.computed(() => props.labelTextColor)
       });
 
-      const events = vue.computed(() => {
+      const trackContainerEvents = vue.computed(() => {
         if (state.editable.value !== true) {
           return {}
         }
@@ -8861,12 +8906,6 @@
             }
       });
 
-      vue.watch(() => props.modelValue + state.innerMin.value + state.innerMax.value, () => {
-        model.value = props.modelValue === null
-          ? state.innerMin.value
-          : between(props.modelValue, state.innerMin.value, state.innerMax.value);
-      });
-
       function updateValue (change) {
         if (model.value !== props.modelValue) {
           emit('update:modelValue', model.value);
@@ -8901,7 +8940,7 @@
 
         const
           stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
-          offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal;
+          offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal;
 
         model.value = between(
           parseFloat((model.value + offset).toFixed(state.decimals.value)),
@@ -8915,7 +8954,8 @@
       return () => {
         const content = methods.getContent(
           selectionBarStyle,
-          events,
+          state.tabindex,
+          trackContainerEvents,
           node => { node.push(getThumb()); }
         );
 
@@ -8963,19 +9003,20 @@
 
     setup (props, { emit }) {
 
-      let timer, targetEl, size = { width: -1, height: -1 };
+      let timer = null, targetEl, size = { width: -1, height: -1 };
 
-      function trigger (now) {
-        if (now === true || props.debounce === 0 || props.debounce === '0') {
-          onResize();
+      function trigger (immediately) {
+        if (immediately === true || props.debounce === 0 || props.debounce === '0') {
+          emitEvent();
         }
-        else if (!timer) {
-          timer = setTimeout(onResize, props.debounce);
+        else if (timer === null) {
+          timer = setTimeout(emitEvent, props.debounce);
         }
       }
 
-      function onResize () {
-        timer = void 0;
+      function emitEvent () {
+        clearTimeout(timer);
+        timer = null;
 
         if (targetEl) {
           const { offsetWidth: width, offsetHeight: height } = targetEl;
@@ -9002,7 +9043,7 @@
             if (targetEl) {
               observer = new ResizeObserver(trigger);
               observer.observe(targetEl);
-              onResize();
+              emitEvent();
             }
           });
         });
@@ -9045,7 +9086,7 @@
           if (targetEl && targetEl.contentDocument) {
             curDocView = targetEl.contentDocument.defaultView;
             curDocView.addEventListener('resize', trigger, listenOpts.passive);
-            onResize();
+            emitEvent();
           }
         }
 
@@ -9156,7 +9197,8 @@
       const vm = vue.getCurrentInstance();
       const { proxy: { $q } } = vm;
 
-      const { registerTick, prepareTick } = useTick();
+      const { registerTick: registerScrollTick } = useTick();
+      const { registerTimeout: registerFocusTimeout, removeTimeout: removeFocusTimeout } = useTimeout();
       const { registerTimeout } = useTimeout();
 
       const rootRef = vue.ref(null);
@@ -9264,7 +9306,7 @@
       }
 
       function recalculateScroll () {
-        registerTick(() => {
+        registerScrollTick(() => {
           if (vm.isDeactivated !== true && vm.isUnmounted !== true) {
             updateContainer({
               width: rootRef.value.offsetWidth,
@@ -9272,8 +9314,6 @@
             });
           }
         });
-
-        prepareTick();
       }
 
       function updateContainer (domSize) {
@@ -9432,11 +9472,8 @@
           return true
         }
 
-        const dirPrev = (props.vertical === true && keyCode === 38 /* ArrowUp */)
-          || (props.vertical !== true && keyCode === 37 /* ArrowLeft */);
-
-        const dirNext = (props.vertical === true && keyCode === 40 /* ArrowDown */)
-          || (props.vertical !== true && keyCode === 39 /* ArrowRight */);
+        const dirPrev = keyCode === (props.vertical === true ? 38 /* ArrowUp */ : 37 /* ArrowLeft */);
+        const dirNext = keyCode === (props.vertical === true ? 40 /* ArrowDown */ : 39 /* ArrowRight */);
 
         const dir = dirPrev === true ? -1 : (dirNext === true ? 1 : void 0);
 
@@ -9570,8 +9607,28 @@
         }
       }
 
-      function onFocusin () { hasFocus.value = true; }
-      function onFocusout () { hasFocus.value = false; }
+      function onFocusin (e) {
+        removeFocusTimeout();
+
+        if (
+          hasFocus.value !== true
+          && rootRef.value !== null
+          && e.target
+          && typeof e.target.closest === 'function'
+        ) {
+          const tab = e.target.closest('.q-tab');
+
+          // if the target is contained by a QTab/QRouteTab
+          // (it might be other elements focused, like additional QBtn)
+          if (tab && rootRef.value.contains(tab) === true) {
+            hasFocus.value = true;
+          }
+        }
+      }
+
+      function onFocusout () {
+        registerFocusTimeout(() => { hasFocus.value = false; }, 30);
+      }
 
       function verifyRouteModel () {
         if ($tabs.avoidRouteWatcher !== true) {
@@ -12381,7 +12438,7 @@
     )
   }
 
-  function clone$1 (date) {
+  function clone (date) {
     return isDate(date) === true
       ? new Date(date.getTime())
       : date
@@ -12408,7 +12465,7 @@
     isSameDate,
     daysInMonth,
     formatDate,
-    clone: clone$1
+    clone
   };
 
   const yearsInterval = 20;
@@ -14170,7 +14227,7 @@
 
       const { preventBodyScroll } = usePreventScroll();
       const { registerTimeout, removeTimeout } = useTimeout();
-      const { registerTick, removeTick, prepareTick } = useTick();
+      const { registerTick, removeTick } = useTick();
 
       const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
         vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
@@ -14269,7 +14326,6 @@
         if (props.noFocus !== true) {
           document.activeElement !== null && document.activeElement.blur();
           registerTick(focus);
-          prepareTick();
         }
 
         registerTimeout(() => {
@@ -14315,6 +14371,7 @@
 
         if (refocusTarget !== null) {
           refocusTarget.focus();
+          refocusTarget = null;
         }
 
         registerTimeout(() => {
@@ -14382,6 +14439,10 @@
             removeEscapeKey(onEscapeKey);
           }
         }
+
+        if (hiding !== true) {
+          refocusTarget = null;
+        }
       }
 
       function updateMaximized (active) {
@@ -14440,9 +14501,7 @@
         }
       });
 
-      vue.onBeforeUnmount(() => {
-        cleanup();
-      });
+      vue.onBeforeUnmount(cleanup);
 
       function renderPortalContent () {
         return vue.h('div', {
@@ -15607,7 +15666,7 @@
       const selfOrigin = vue.computed(() => parsePosition(props.self, $q.lang.rtl));
       const hideOnRouteChange = vue.computed(() => props.persistent !== true);
 
-      const { registerTick, removeTick, prepareTick } = useTick();
+      const { registerTick, removeTick } = useTick();
       const { registerTimeout, removeTimeout } = useTimeout();
       const { transition, transitionStyle } = useTransition(props, showing);
       const { localScrollTarget, changeScrollEvent, unconfigureScrollTarget } = useScrollTarget(props, configureScrollTarget);
@@ -15673,7 +15732,6 @@
           updatePosition();
           configureScrollTarget();
         });
-        prepareTick();
 
         if (unwatchPosition === void 0) {
           unwatchPosition = vue.watch(
@@ -17892,11 +17950,60 @@
     }
   }
 
-  function clone (data) {
-    const s = JSON.stringify(data);
-    if (s) {
-      return JSON.parse(s)
+  // adapted from https://stackoverflow.com/a/40294058
+
+  function cloneDeep (data, hash = new WeakMap()) {
+    if (Object(data) !== data) return data
+    if (hash.has(data)) return hash.get(data)
+
+    const result = data instanceof Date
+      ? new Date(data)
+      : (data instanceof RegExp
+          ? new RegExp(data.source, data.flags)
+          : (data instanceof Set
+              ? new Set()
+              : (data instanceof Map
+                  ? new Map()
+                  : (typeof data.constructor !== 'function'
+                      ? Object.create(null)
+                      : (data.prototype !== void 0 && typeof data.prototype.constructor === 'function'
+                          ? data
+                          : new data.constructor()
+                        )
+                    )
+                )
+            )
+        );
+
+    if (typeof data.constructor === 'function' && typeof data.valueOf === 'function') {
+      const val = data.valueOf();
+
+      if (Object(val) !== val) {
+        const result = new data.constructor(val);
+
+        hash.set(data, result);
+
+        return result
+      }
+    }
+
+    hash.set(data, result);
+
+    if (data instanceof Set) {
+      data.forEach(val => {
+        result.add(cloneDeep(val, hash));
+      });
     }
+    else if (data instanceof Map) {
+      data.forEach((val, key) => {
+        result.set(key, cloneDeep(val, hash));
+      });
+    }
+
+    return Object.assign(
+      result,
+      ...Object.keys(data).map(key => ({ [ key ]: cloneDeep(data[ key ], hash) }))
+    )
   }
 
   function fallback (text) {
@@ -20025,7 +20132,7 @@
 
   var utils = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    clone: clone,
+    clone: cloneDeep,
     colors: colors,
     copyToClipboard: copyToClipboard,
     createMetaMixin: createMetaMixin,
@@ -20513,26 +20620,24 @@
       state.targetUid.value = getTargetUid(val);
     });
 
-    let focusFn;
-
-    function focus () {
-      focusFn !== void 0 && removeFocusFn(focusFn);
-      focusFn = addFocusFn(() => {
-        focusFn = void 0;
-        const el = document.activeElement;
-        let target = state.targetRef !== void 0 && state.targetRef.value;
+    function focusHandler () {
+      const el = document.activeElement;
+      let target = state.targetRef !== void 0 && state.targetRef.value;
 
-        if (target && (el === null || el.id !== state.targetUid.value)) {
-          target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'));
-          if (target && target !== el) {
-            target.focus();
-          }
+      if (target && (el === null || el.id !== state.targetUid.value)) {
+        target.hasAttribute('tabindex') === true || (target = target.querySelector('[tabindex]'));
+        if (target && target !== el) {
+          target.focus();
         }
-      });
+      }
+    }
+
+    function focus () {
+      addFocusFn(focusHandler);
     }
 
     function blur () {
-      focusFn !== void 0 && removeFocusFn(focusFn);
+      removeFocusFn(focusHandler);
       const el = document.activeElement;
       if (el !== null && state.rootRef.value.contains(el)) {
         el.blur();
@@ -23814,6 +23919,8 @@
       });
 
       function emitEvent () {
+        clearTimeout(timer);
+        cancelAnimationFrame(timer);
         timer = null;
 
         const top = Math.max(0, getVerticalScrollPosition(localScrollTarget));
@@ -24057,6 +24164,54 @@
 
       vue.provide(layoutKey, $layout);
 
+      // prevent scrollbar flicker while resizing window height
+      // if no page scrollbar is already present
+      {
+        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 && scrollbarWidth.value > 0 ? 'add' : 'remove'),
+          updateScrollEvent,
+          { immediate: true }
+        );
+
+        vue.onUnmounted(() => {
+          updateScrollEvent('remove');
+        });
+      }
+
       return () => {
         const content = hMergeSlot(slots.default, [
           vue.h(QScrollObserver, { onScroll: onPageScroll }),
@@ -24200,12 +24355,8 @@
       ...useSizeProps,
       ...useFormProps,
 
-      modelValue: {
-        required: true
-      },
-      val: {
-        required: true
-      },
+      modelValue: { required: true },
+      val: { required: true },
 
       label: String,
       leftLabel: Boolean,
@@ -25138,8 +25289,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) {
@@ -25149,8 +25300,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) {
@@ -25464,8 +25615,8 @@
 
       function onBeforeShow () {
         validated = false;
-        initialValue.value = clone(props.modelValue);
-        currentModel.value = clone(props.modelValue);
+        initialValue.value = cloneDeep(props.modelValue);
+        currentModel.value = cloneDeep(props.modelValue);
         emit('before-show');
       }
 
@@ -25971,13 +26122,8 @@
 
       modelValue: {
         type: Object,
-        default: () => ({
-          min: null,
-          max: null
-        }),
-        validator (val) {
-          return 'min' in val && 'max' in val
-        }
+        default: () => ({ min: null, max: null }),
+        validator: v => 'min' in v && 'max' in v
       },
 
       dragRange: Boolean,
@@ -26012,13 +26158,24 @@
       const rootRef = vue.ref(null);
       const curMinRatio = vue.ref(0);
       const curMaxRatio = vue.ref(0);
+      const model = vue.ref({ min: 0, max: 0 });
 
-      const model = vue.ref({
-        min: props.modelValue.min === null ? state.innerMin.value : props.modelValue.min,
-        max: props.modelValue.max === null ? state.innerMax.value : props.modelValue.max
-      });
+      function normalizeModel () {
+        model.value.min = props.modelValue.min === null
+          ? state.innerMin.value
+          : between(props.modelValue.min, state.innerMin.value, state.innerMax.value);
+
+        model.value.max = props.modelValue.max === null
+          ? state.innerMax.value
+          : between(props.modelValue.max, state.innerMin.value, state.innerMax.value);
+      }
+
+      vue.watch(
+        () => `${ props.modelValue.min }|${ props.modelValue.max }|${ state.innerMin.value }|${ state.innerMax.value }`,
+        normalizeModel
+      );
 
-      const nextFocus = vue.ref(null);
+      normalizeModel();
 
       const modelMinRatio = vue.computed(() => methods.convertModelToRatio(model.value.min));
       const modelMaxRatio = vue.computed(() => methods.convertModelToRatio(model.value.max));
@@ -26041,7 +26198,7 @@
         return acc
       });
 
-      const events = vue.computed(() => {
+      const trackContainerEvents = vue.computed(() => {
         if (state.editable.value !== true) {
           return {}
         }
@@ -26052,34 +26209,45 @@
 
         const evt = { onMousedown: methods.onActivate };
 
-        props.dragOnlyRange === true && Object.assign(evt, {
-          onFocus: () => { onFocus('both'); },
-          onBlur: methods.onBlur,
-          onKeydown,
-          onKeyup: methods.onKeyup
-        });
+        if (props.dragRange === true || props.dragOnlyRange === true) {
+          Object.assign(evt, {
+            onFocus: () => { state.focus.value = 'both'; },
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          });
+        }
 
         return evt
       });
 
-      const minThumbRef = vue.ref(null);
-      const minEvents = vue.computed(() => (
-        state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
+      function getEvents (side) {
+        return $q.platform.is.mobile !== true && state.editable.value === true && props.dragOnlyRange !== true
           ? {
-              onFocus: () => { onFocus('min'); },
+              onFocus: () => { state.focus.value = side; },
               onBlur: methods.onBlur,
               onKeydown,
               onKeyup: methods.onKeyup
             }
           : {}
+      }
+
+      const thumbTabindex = vue.computed(() => (props.dragOnlyRange !== true ? state.tabindex.value : null));
+      const trackContainerTabindex = vue.computed(() => (
+        $q.platform.is.mobile !== true && (props.dragRange || props.dragOnlyRange === true)
+          ? state.tabindex.value
+          : null
       ));
+
+      const minThumbRef = vue.ref(null);
+      const minEvents = vue.computed(() => getEvents('min'));
       const getMinThumb = methods.getThumbRenderFn({
         focusValue: 'min',
-        nextFocus,
         getNodeData: () => ({
           ref: minThumbRef,
+          key: 'tmin',
           ...minEvents.value,
-          tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
+          tabindex: thumbTabindex.value
         }),
         ratio: ratioMin,
         label: vue.computed(() => (
@@ -26092,22 +26260,13 @@
         labelTextColor: vue.computed(() => props.leftLabelTextColor || props.labelTextColor)
       });
 
-      const maxEvents = vue.computed(() => (
-        state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
-          ? {
-              onFocus: () => { onFocus('max'); },
-              onBlur: methods.onBlur,
-              onKeydown,
-              onKeyup: methods.onKeyup
-            }
-          : {}
-      ));
+      const maxEvents = vue.computed(() => getEvents('max'));
       const getMaxThumb = methods.getThumbRenderFn({
         focusValue: 'max',
-        nextFocus,
         getNodeData: () => ({
           ...maxEvents.value,
-          tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
+          key: 'tmax',
+          tabindex: thumbTabindex.value
         }),
         ratio: ratioMax,
         label: vue.computed(() => (
@@ -26120,19 +26279,6 @@
         labelTextColor: vue.computed(() => props.rightLabelTextColor || props.labelTextColor)
       });
 
-      vue.watch(
-        () => props.modelValue.min + props.modelValue.max + state.innerMin.value + state.innerMax.value,
-        () => {
-          model.value.min = props.modelValue.min === null
-            ? state.innerMin.value
-            : between(props.modelValue.min, state.innerMin.value, state.innerMax.value);
-
-          model.value.max = props.modelValue.max === null
-            ? state.innerMax.value
-            : between(props.modelValue.max, state.innerMin.value, state.innerMax.value);
-        }
-      );
-
       function updateValue (change) {
         if (model.value.min !== props.modelValue.min || model.value.max !== props.modelValue.max) {
           emit('update:modelValue', { ...model.value });
@@ -26161,15 +26307,14 @@
           ratioMax: modelMaxRatio.value
         };
 
-        let type;
         const ratio = methods.getDraggingRatio(event, dragging);
 
         if (props.dragOnlyRange !== true && ratio < dragging.ratioMin + sensitivity) {
-          type = dragType.MIN;
+          dragging.type = dragType.MIN;
         }
         else if (props.dragOnlyRange === true || ratio < dragging.ratioMax - sensitivity) {
           if (props.dragRange === true || props.dragOnlyRange === true) {
-            type = dragType.RANGE;
+            dragging.type = dragType.RANGE;
             Object.assign(dragging, {
               offsetRatio: ratio,
               offsetModel: methods.convertRatioToModel(ratio),
@@ -26178,18 +26323,15 @@
             });
           }
           else {
-            type = dragging.ratioMax - ratio < ratio - dragging.ratioMin
+            dragging.type = dragging.ratioMax - ratio < ratio - dragging.ratioMin
               ? dragType.MAX
               : dragType.MIN;
           }
         }
         else {
-          type = dragType.MAX;
+          dragging.type = dragType.MAX;
         }
 
-        dragging.type = type;
-        nextFocus.value = null;
-
         return dragging
       }
 
@@ -26207,7 +26349,7 @@
                 min: localModel,
                 max: dragging.valueMax
               };
-              nextFocus.value = 'min';
+              state.focus.value = 'min';
             }
             else {
               pos = {
@@ -26216,7 +26358,7 @@
                 min: dragging.valueMax,
                 max: localModel
               };
-              nextFocus.value = 'max';
+              state.focus.value = 'max';
             }
             break
 
@@ -26228,7 +26370,7 @@
                 min: dragging.valueMin,
                 max: localModel
               };
-              nextFocus.value = 'max';
+              state.focus.value = 'max';
             }
             else {
               pos = {
@@ -26237,7 +26379,7 @@
                 min: localModel,
                 max: dragging.valueMin
               };
-              nextFocus.value = 'min';
+              state.focus.value = 'min';
             }
             break
 
@@ -26254,34 +26396,26 @@
               min: parseFloat(min.toFixed(state.decimals.value)),
               max: parseFloat((min + dragging.rangeValue).toFixed(state.decimals.value))
             };
+
+            state.focus.value = 'both';
             break
         }
 
-        model.value = {
-          min: pos.min,
-          max: pos.max
-        };
-
         // If either of the values to be emitted are null, set them to the defaults the user has entered.
-        if (model.value.min === null || model.value.max === null) {
-          model.value.min = pos.min || props.min;
-          model.value.max = pos.max || props.max;
-        }
+        model.value = model.value.min === null || model.value.max === null
+          ? { min: pos.min || props.min, max: pos.max || props.max }
+          : { min: pos.min, max: pos.max };
 
         if (props.snap !== true || props.step === 0) {
           curMinRatio.value = pos.minR;
           curMaxRatio.value = pos.maxR;
         }
         else {
-          curMinRatio.value = state.trackLen.value === 0 ? 0 : (model.value.min - props.min) / state.trackLen.value;
-          curMaxRatio.value = state.trackLen.value === 0 ? 0 : (model.value.max - props.min) / state.trackLen.value;
+          curMinRatio.value = methods.convertModelToRatio(model.value.min);
+          curMaxRatio.value = methods.convertModelToRatio(model.value.max);
         }
       }
 
-      function onFocus (which) {
-        state.focus.value = which;
-      }
-
       function onKeydown (evt) {
         if (!keyCodes$2.includes(evt.keyCode)) {
           return
@@ -26290,14 +26424,11 @@
         stopAndPrevent(evt);
 
         const
-          stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * props.step,
-          offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal;
-
-        if (props.dragOnlyRange) {
-          const interval = props.dragOnlyRange
-            ? model.value.max - model.value.min
-            : 0;
+          stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+          offset = ([ 34, 37, 40 ].includes(evt.keyCode) ? -1 : 1) * (state.isReversed.value === true ? -1 : 1) * stepVal;
 
+        if (state.focus.value === 'both') {
+          const interval = model.value.max - model.value.min;
           const min = between(
             parseFloat((model.value.min + offset).toFixed(state.decimals.value)),
             state.innerMin.value,
@@ -26331,7 +26462,8 @@
       return () => {
         const content = methods.getContent(
           selectionBarStyle,
-          events,
+          trackContainerTabindex,
+          trackContainerEvents,
           node => {
             node.push(
               getMinThumb(),
@@ -26348,10 +26480,7 @@
               : ''
           ),
           ...state.attributes.value,
-          'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max,
-          tabindex: props.dragOnlyRange === true && $q.platform.is.mobile !== true
-            ? state.tabindex.value
-            : null
+          'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max
         }, content)
       }
     }
@@ -26987,6 +27116,7 @@
               style: mainStyle.value
             }, hMergeSlot(slots.default, [
               vue.h(QResizeObserver, {
+                debounce: 0,
                 onResize: updateScrollSize
               })
             ])),
@@ -26997,7 +27127,10 @@
             })
           ]),
 
-          vue.h(QResizeObserver, { onResize: updateContainer }),
+          vue.h(QResizeObserver, {
+            debounce: 0,
+            onResize: updateContainer
+          }),
 
           vue.h('div', {
             class: scroll.vertical.barClass.value,
@@ -28252,7 +28385,10 @@
 
           targetRef.value !== null && targetRef.value.focus();
 
-          if (isDeepEqual(getOptionValue.value(innerValue.value[ 0 ]), optValue) !== true) {
+          if (
+            innerValue.value.length === 0
+            || isDeepEqual(getOptionValue.value(innerValue.value[ 0 ]), optValue) !== true
+          ) {
             emit('update:modelValue', props.emitValue === true ? optValue : opt);
           }
           return
@@ -36107,7 +36243,9 @@
       src: {
         type: String,
         required: true
-      }
+      },
+
+      title: String
     },
 
     setup (props) {
@@ -36124,6 +36262,7 @@
       }, [
         vue.h('iframe', {
           src: props.src,
+          title: props.title,
           frameborder: '0',
           allowfullscreen: true
         })
@@ -37613,14 +37752,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
     }
@@ -39124,7 +39263,7 @@
   });
 
   var index_umd = {
-    version: '2.4.1',
+    version: '2.4.5',
     install (app, opts) {
       installQuasar(app, {
         components,