quasar 2.4.0 → 2.4.4

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.4.0
+ * Quasar Framework v2.4.4
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1447,7 +1447,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.4.0' };
+      const $q = { version: '2.4.4' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -3048,7 +3048,7 @@
     xl: 24
   };
 
-  const formTypes = [ 'submit', 'reset' ];
+  const formTypes = [ 'button', 'submit', 'reset' ];
   const mediaTypeRE = /[^\s]\/[^\s]/;
 
   const useBtnProps = {
@@ -3156,7 +3156,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 +3899,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 +4039,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 +4066,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 +4201,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 +4292,6 @@
    * Usage:
    *    registerTick(fn)
    *    registerTick(fn)
-   *    ....
-   *    prepareTick()
    */
 
   function useTick () {
@@ -4303,22 +4304,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 +5009,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 +5136,6 @@
           updatePosition();
           props.noFocus !== true && focus();
         });
-        prepareTick();
 
         registerTimeout(() => {
           // required in order to avoid the "double-tap needed" issue
@@ -5173,6 +5168,7 @@
           )
         ) {
           refocusTarget.focus();
+          refocusTarget = null;
         }
 
         registerTimeout(() => {
@@ -5195,6 +5191,10 @@
           removeClickOutside(clickOutsideProps);
           removeEscapeKey(onEscapeKey);
         }
+
+        if (hiding !== true) {
+          refocusTarget = null;
+        }
       }
 
       function configureScrollTarget () {
@@ -5598,6 +5598,8 @@
             key: i,
             onClick (e) { set(value, item, e); },
 
+            'aria-pressed': value === props.modelValue ? 'true' : 'false',
+
             ...attrs,
             ...opt,
 
@@ -8278,7 +8280,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 +8290,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 +8482,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 +8549,7 @@
           emit('pan', 'end');
         }
         active.value = false;
+        focus.value = false;
       }
       else if (event.isFirst === true) {
         dragging.value = getDragging(event.evt);
@@ -8603,7 +8610,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 +8625,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 +8681,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 +8721,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 +8775,8 @@
         innerMax,
         innerMaxRatio,
         positionProp,
-        sizeProp
+        sizeProp,
+        isReversed
       },
 
       methods: {
@@ -8788,6 +8793,8 @@
     }
   }
 
+  const getNodeData = () => ({});
+
   var QSlider = createComponent({
     name: 'QSlider',
 
@@ -8815,8 +8822,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 +8853,7 @@
 
       const getThumb = methods.getThumbRenderFn({
         focusValue: true,
+        getNodeData,
         ratio,
         label: vue.computed(() => (
           props.labelValue !== void 0
@@ -8845,7 +8865,7 @@
         labelTextColor: vue.computed(() => props.labelTextColor)
       });
 
-      const events = vue.computed(() => {
+      const trackContainerEvents = vue.computed(() => {
         if (state.editable.value !== true) {
           return {}
         }
@@ -8861,12 +8881,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 +8915,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 +8929,8 @@
       return () => {
         const content = methods.getContent(
           selectionBarStyle,
-          events,
+          state.tabindex,
+          trackContainerEvents,
           node => { node.push(getThumb()); }
         );
 
@@ -8963,19 +8978,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 +9018,7 @@
             if (targetEl) {
               observer = new ResizeObserver(trigger);
               observer.observe(targetEl);
-              onResize();
+              emitEvent();
             }
           });
         });
@@ -9045,7 +9061,7 @@
           if (targetEl && targetEl.contentDocument) {
             curDocView = targetEl.contentDocument.defaultView;
             curDocView.addEventListener('resize', trigger, listenOpts.passive);
-            onResize();
+            emitEvent();
           }
         }
 
@@ -9156,7 +9172,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 +9281,7 @@
       }
 
       function recalculateScroll () {
-        registerTick(() => {
+        registerScrollTick(() => {
           if (vm.isDeactivated !== true && vm.isUnmounted !== true) {
             updateContainer({
               width: rootRef.value.offsetWidth,
@@ -9272,8 +9289,6 @@
             });
           }
         });
-
-        prepareTick();
       }
 
       function updateContainer (domSize) {
@@ -9432,11 +9447,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 +9582,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 +12413,7 @@
     )
   }
 
-  function clone$1 (date) {
+  function clone (date) {
     return isDate(date) === true
       ? new Date(date.getTime())
       : date
@@ -12408,7 +12440,7 @@
     isSameDate,
     daysInMonth,
     formatDate,
-    clone: clone$1
+    clone
   };
 
   const yearsInterval = 20;
@@ -14170,7 +14202,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 +14301,6 @@
         if (props.noFocus !== true) {
           document.activeElement !== null && document.activeElement.blur();
           registerTick(focus);
-          prepareTick();
         }
 
         registerTimeout(() => {
@@ -14315,6 +14346,7 @@
 
         if (refocusTarget !== null) {
           refocusTarget.focus();
+          refocusTarget = null;
         }
 
         registerTimeout(() => {
@@ -14382,6 +14414,10 @@
             removeEscapeKey(onEscapeKey);
           }
         }
+
+        if (hiding !== true) {
+          refocusTarget = null;
+        }
       }
 
       function updateMaximized (active) {
@@ -14440,9 +14476,7 @@
         }
       });
 
-      vue.onBeforeUnmount(() => {
-        cleanup();
-      });
+      vue.onBeforeUnmount(cleanup);
 
       function renderPortalContent () {
         return vue.h('div', {
@@ -15607,7 +15641,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 +15707,6 @@
           updatePosition();
           configureScrollTarget();
         });
-        prepareTick();
 
         if (unwatchPosition === void 0) {
           unwatchPosition = vue.watch(
@@ -17892,11 +17925,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 +20107,7 @@
 
   var utils = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    clone: clone,
+    clone: cloneDeep,
     colors: colors,
     copyToClipboard: copyToClipboard,
     createMetaMixin: createMetaMixin,
@@ -20513,26 +20595,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 +23894,8 @@
       });
 
       function emitEvent () {
+        clearTimeout(timer);
+        cancelAnimationFrame(timer);
         timer = null;
 
         const top = Math.max(0, getVerticalScrollPosition(localScrollTarget));
@@ -25464,8 +25546,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 +26053,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 +26089,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);
 
-      const nextFocus = vue.ref(null);
+        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
+      );
+
+      normalizeModel();
 
       const modelMinRatio = vue.computed(() => methods.convertModelToRatio(model.value.min));
       const modelMaxRatio = vue.computed(() => methods.convertModelToRatio(model.value.max));
@@ -26041,7 +26129,7 @@
         return acc
       });
 
-      const events = vue.computed(() => {
+      const trackContainerEvents = vue.computed(() => {
         if (state.editable.value !== true) {
           return {}
         }
@@ -26052,34 +26140,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 +26191,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 +26210,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 +26238,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 +26254,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 +26280,7 @@
                 min: localModel,
                 max: dragging.valueMax
               };
-              nextFocus.value = 'min';
+              state.focus.value = 'min';
             }
             else {
               pos = {
@@ -26216,7 +26289,7 @@
                 min: dragging.valueMax,
                 max: localModel
               };
-              nextFocus.value = 'max';
+              state.focus.value = 'max';
             }
             break
 
@@ -26228,7 +26301,7 @@
                 min: dragging.valueMin,
                 max: localModel
               };
-              nextFocus.value = 'max';
+              state.focus.value = 'max';
             }
             else {
               pos = {
@@ -26237,7 +26310,7 @@
                 min: localModel,
                 max: dragging.valueMin
               };
-              nextFocus.value = 'min';
+              state.focus.value = 'min';
             }
             break
 
@@ -26254,34 +26327,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 +26355,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 +26393,8 @@
       return () => {
         const content = methods.getContent(
           selectionBarStyle,
-          events,
+          trackContainerTabindex,
+          trackContainerEvents,
           node => {
             node.push(
               getMinThumb(),
@@ -26348,10 +26411,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 +27047,7 @@
               style: mainStyle.value
             }, hMergeSlot(slots.default, [
               vue.h(QResizeObserver, {
+                debounce: 0,
                 onResize: updateScrollSize
               })
             ])),
@@ -26997,7 +27058,10 @@
             })
           ]),
 
-          vue.h(QResizeObserver, { onResize: updateContainer }),
+          vue.h(QResizeObserver, {
+            debounce: 0,
+            onResize: updateContainer
+          }),
 
           vue.h('div', {
             class: scroll.vertical.barClass.value,
@@ -28252,7 +28316,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 +36174,9 @@
       src: {
         type: String,
         required: true
-      }
+      },
+
+      title: String
     },
 
     setup (props) {
@@ -36124,6 +36193,7 @@
       }, [
         vue.h('iframe', {
           src: props.src,
+          title: props.title,
           frameborder: '0',
           allowfullscreen: true
         })
@@ -39124,7 +39194,7 @@
   });
 
   var index_umd = {
-    version: '2.4.0',
+    version: '2.4.4',
     install (app, opts) {
       installQuasar(app, {
         components,