quasar 2.1.4 → 2.1.8

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.4
+ * Quasar Framework v2.1.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.1.4
+ * Quasar Framework v2.1.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1437,7 +1437,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.1.4' };
+      const $q = { version: '2.1.8' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -5222,7 +5222,10 @@
                     'q-menu q-position-engine scroll' + menuClass.value,
                     attrs.class
                   ],
-                  style: [ attrs.style, transitionStyle.value ],
+                  style: [
+                    attrs.style,
+                    transitionStyle.value
+                  ],
                   ...onEvents.value
                 }, hSlot(slots.default))
               : null
@@ -8726,6 +8729,30 @@
     }
   });
 
+  let rtlHasScrollBug = false;
+
+  // mobile Chrome takes the crown for this
+  {
+    const scroller = document.createElement('div');
+    const spacer = document.createElement('div');
+
+    scroller.setAttribute('dir', 'rtl');
+    scroller.style.width = '1px';
+    scroller.style.height = '1px';
+    scroller.style.overflow = 'auto';
+
+    spacer.style.width = '1000px';
+    spacer.style.height = '1px';
+
+    document.body.appendChild(scroller);
+    scroller.appendChild(spacer);
+    scroller.scrollLeft = -1000;
+
+    rtlHasScrollBug = scroller.scrollLeft >= 0;
+
+    scroller.remove();
+  }
+
   function getIndicatorClass (color, top, vertical) {
     const pos = vertical === true
       ? [ 'left', 'right' ]
@@ -8852,6 +8879,11 @@
           : { container: 'width', content: 'offsetWidth', scroll: 'scrollWidth' }
       ));
 
+      const isRTL = vue.computed(() => props.vertical !== true && $q.lang.rtl === true);
+      const rtlPosCorrection = vue.computed(() => rtlHasScrollBug === false && isRTL.value === true);
+
+      vue.watch(isRTL, localUpdateArrows);
+
       vue.watch(() => props.modelValue, name => {
         updateModel({ name, setCurrent: true, skipEmit: true });
       });
@@ -8994,12 +9026,18 @@
         if (content !== null) {
           const
             rect = content.getBoundingClientRect(),
-            pos = props.vertical === true ? content.scrollTop : content.scrollLeft;
+            pos = props.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft);
 
-          leftArrow.value = pos > 0;
-          rightArrow.value = props.vertical === true
-            ? Math.ceil(pos + rect.height) < content.scrollHeight
-            : Math.ceil(pos + rect.width) < content.scrollWidth;
+          if (isRTL.value === true) {
+            leftArrow.value = Math.ceil(pos + rect.width) < content.scrollWidth - 1;
+            rightArrow.value = pos > 0;
+          }
+          else {
+            leftArrow.value = pos > 0;
+            rightArrow.value = props.vertical === true
+              ? Math.ceil(pos + rect.height) < content.scrollHeight
+              : Math.ceil(pos + rect.width) < content.scrollWidth;
+          }
         }
       }
 
@@ -9008,33 +9046,50 @@
         scrollTowards(value);
 
         scrollTimer = setInterval(() => {
-          if (scrollTowards(value)) {
+          if (scrollTowards(value) === true) {
             stopAnimScroll();
           }
         }, 5);
       }
 
       function scrollToStart () {
-        animScrollTo(0);
+        animScrollTo(rtlPosCorrection.value === true ? 9999 : 0);
       }
 
       function scrollToEnd () {
-        animScrollTo(9999);
+        animScrollTo(rtlPosCorrection.value === true ? 0 : 9999);
       }
 
       function stopAnimScroll () {
         clearInterval(scrollTimer);
       }
 
+      // let's speed up execution of time-sensitive scrollTowards()
+      // with a computed variable by directly applying the minimal
+      // number of instructions on get/set functions
+      const posFn = vue.computed(() => (
+        rtlPosCorrection.value === true
+          ? { get: content => Math.abs(content.scrollLeft), set: (content, pos) => { content.scrollLeft = -pos; } }
+          : (
+              props.vertical === true
+                ? { get: content => content.scrollTop, set: (content, pos) => { content.scrollTop = pos; } }
+                : { get: content => content.scrollLeft, set: (content, pos) => { content.scrollLeft = pos; } }
+            )
+      ));
+
       function scrollTowards (value) {
-        const content = contentRef.value;
+        const
+          content = contentRef.value,
+          { get, set } = posFn.value;
+
         let
-          pos = props.vertical === true ? content.scrollTop : content.scrollLeft,
-          done = false;
+          done = false,
+          pos = get(content);
 
         const direction = value < pos ? -1 : 1;
 
         pos += direction * 5;
+
         if (pos < 0) {
           done = true;
           pos = 0;
@@ -9047,7 +9102,7 @@
           pos = value;
         }
 
-        content[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] = pos;
+        set(content, pos);
         localUpdateArrows();
 
         return done
@@ -13251,7 +13306,7 @@
         if (editRange.value === null) {
           const dayProps = days.value.find(day => day.fill !== true && day.i === dayIndex);
 
-          if (dayProps.range !== void 0) {
+          if (props.noUnset !== true && dayProps.range !== void 0) {
             removeFromModel({ target: day, from: dayProps.range.from, to: dayProps.range.to });
             return
           }
@@ -15272,7 +15327,10 @@
                 'q-tooltip q-tooltip--style q-position-engine no-pointer-events',
                 attrs.class
               ],
-              style: transitionStyle.value,
+              style: [
+                attrs.style,
+                transitionStyle.value
+              ],
               role: 'complementary'
             }, hSlot(slots.default))
           : null
@@ -18085,12 +18143,10 @@
     return function renderField () {
       return vue.h('label', {
         ref: state.rootRef,
-        class: state.inheritAttrs !== true
-          ? [
-              classes.value,
-              attrs.class
-            ]
-          : classes.value,
+        class: [
+          classes.value,
+          attrs.class
+        ],
         style: attrs.style,
         ...attributes.value
       }, [
@@ -18384,6 +18440,8 @@
   var QFile = vue.defineComponent({
     name: 'QFile',
 
+    inheritAttrs: false,
+
     props: {
       ...useFieldProps,
       ...useFormProps,
@@ -18594,7 +18652,6 @@
       }
 
       Object.assign(state, {
-        inheritAttrs: true,
         fieldClass: { value: 'q-file q-field--auto-height' },
         emitValue,
         hasValue,
@@ -19240,9 +19297,6 @@
     })
   }
 
-  const crossoriginValues = [ 'anonymous', 'use-credentials' ];
-  const loadingValues = [ 'eager', 'lazy' ];
-  const fitValues = [ 'cover', 'fill', 'contain', 'none', 'scale-down' ];
   const defaultRatio = 16 / 9;
 
   var QImg = vue.defineComponent({
@@ -19256,16 +19310,15 @@
       sizes: String,
 
       alt: String,
-      crossorigin: {
-        type: String,
-        validator: val => crossoriginValues.includes(val)
-      },
+      crossorigin: String,
+      decoding: String,
+      referrerpolicy: String,
+
       draggable: Boolean,
 
       loading: {
         type: String,
-        default: 'lazy',
-        validator: val => loadingValues.includes(val)
+        default: 'lazy'
       },
       width: String,
       height: String,
@@ -19278,8 +19331,7 @@
 
       fit: {
         type: String,
-        default: 'cover',
-        validator: val => fitValues.includes(val)
+        default: 'cover'
       },
       position: {
         type: String,
@@ -19299,7 +19351,7 @@
 
     emits: [ 'load', 'error' ],
 
-    setup (props, { slots, attrs, emit }) {
+    setup (props, { slots, emit }) {
       const naturalRatio = vue.ref(props.initialRatio);
       const ratioStyle = useRatio(props, naturalRatio);
 
@@ -19422,10 +19474,11 @@
 
         const data = {
           key: 'img_' + index,
-          ...attrs,
           class: imgClass.value,
           style: imgStyle.value,
           crossorigin: props.crossorigin,
+          decoding: props.decoding,
+          referrerpolicy: props.referrerpolicy,
           height: props.height,
           width: props.width,
           loading: props.loading,
@@ -24605,31 +24658,6 @@
   ];
 
   const slice = Array.prototype.slice;
-
-  let buggyRTL = void 0;
-
-  // mobile Chrome takes the crown for this
-  {
-    const scroller = document.createElement('div');
-    const spacer = document.createElement('div');
-
-    scroller.setAttribute('dir', 'rtl');
-    scroller.style.width = '1px';
-    scroller.style.height = '1px';
-    scroller.style.overflow = 'auto';
-
-    spacer.style.width = '1000px';
-    spacer.style.height = '1px';
-
-    document.body.appendChild(scroller);
-    scroller.appendChild(spacer);
-    scroller.scrollLeft = -1000;
-
-    buggyRTL = scroller.scrollLeft >= 0;
-
-    scroller.remove();
-  }
-
   let id$1 = 1;
 
   const setOverflowAnchor = window.getComputedStyle(document.body).overflowAnchor === void 0
@@ -24689,7 +24717,7 @@
       details.scrollMaxSize = parentCalc.scrollWidth;
 
       if (rtl === true) {
-        details.scrollStart = (buggyRTL === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart;
+        details.scrollStart = (rtlHasScrollBug === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart;
       }
     }
     else {
@@ -24747,7 +24775,7 @@
     if (parent === window) {
       if (horizontal === true) {
         if (rtl === true) {
-          scroll = (buggyRTL === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll;
+          scroll = (rtlHasScrollBug === true ? document.body.scrollWidth - window.innerWidth : 0) - scroll;
         }
         window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0);
       }
@@ -24757,7 +24785,7 @@
     }
     else if (horizontal === true) {
       if (rtl === true) {
-        scroll = (buggyRTL === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll;
+        scroll = (rtlHasScrollBug === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll;
       }
       parent.scrollLeft = scroll;
     }
@@ -25436,7 +25464,7 @@
       const dialogFieldFocused = vue.ref(false);
       const innerLoadingIndicator = vue.ref(false);
 
-      let inputTimer, innerValueCache, optionScopeCache,
+      let inputTimer, innerValueCache,
         hasDialog, userInputValue, filterId, defaultInputValue,
         transitionShowComputed, searchBuffer, searchBufferExp;
 
@@ -25562,17 +25590,28 @@
       const tabindex = vue.computed(() => (state.focused.value === true ? props.tabindex : -1));
 
       const comboboxAttrs = vue.computed(() => ({
+        tabindex: tabindex.value,
         role: 'combobox',
-        'aria-multiselectable': props.multiple === true ? 'true' : 'false',
+        'aria-label': props.label,
+        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
         'aria-expanded': menu.value === true ? 'true' : 'false',
         'aria-owns': `${ state.targetUid.value }_lb`,
-        'aria-activedescendant': `${ state.targetUid.value }_${ optionIndex.value }`
+        'aria-controls': `${ state.targetUid.value }_lb`
       }));
 
-      const listboxAttrs = vue.computed(() => ({
-        role: 'listbox',
-        id: `${ state.targetUid.value }_lb`
-      }));
+      const listboxAttrs = vue.computed(() => {
+        const attrs = {
+          id: `${ state.targetUid.value }_lb`,
+          role: 'listbox',
+          'aria-multiselectable': props.multiple === true ? 'true' : 'false'
+        };
+
+        if (optionIndex.value >= 0) {
+          attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`;
+        }
+
+        return attrs
+      });
 
       const selectedScope = vue.computed(() => {
         return innerValue.value.map((opt, i) => ({
@@ -25592,7 +25631,6 @@
         }
 
         const { from, to } = virtualScrollSliceRange.value;
-        const { options, optionEls } = optionScopeCache;
 
         return props.options.slice(from, to).map((opt, i) => {
           const disable = isOptionDisabled.value(opt) === true;
@@ -25624,7 +25662,7 @@
             }
           }
 
-          const option = {
+          return {
             index,
             opt,
             html: needsHtmlFn.value(opt),
@@ -25634,23 +25672,7 @@
             toggleOption,
             setOptionIndex,
             itemProps
-          };
-
-          const optionWithoutEvents = {
-            ...option,
-            itemProps: {
-              ...itemProps,
-              onClick: void 0,
-              onMousemove: void 0
-            }
-          };
-
-          if (options[ i ] === void 0 || isDeepEqual(optionWithoutEvents, options[ i ]) !== true) {
-            options[ i ] = optionWithoutEvents;
-            optionEls[ i ] = void 0;
           }
-
-          return option
         })
       });
 
@@ -26232,14 +26254,6 @@
       }
 
       function getAllOptions () {
-        if (
-          slots.option !== void 0
-          && optionScopeCache.optionSlot !== slots.option
-        ) {
-          optionScopeCache.optionSlot = slots.option;
-          optionScopeCache.optionEls = [];
-        }
-
         const fn = slots.option !== void 0
           ? slots.option
           : scope => {
@@ -26259,15 +26273,7 @@
             })
           };
 
-        const { optionEls } = optionScopeCache;
-
-        let options = padVirtualScroll('div', optionScope.value.map((scope, i) => {
-          if (optionEls[ i ] === void 0) {
-            optionEls[ i ] = fn(scope);
-          }
-
-          return optionEls[ i ]
-        }));
+        let options = padVirtualScroll('div', optionScope.value.map(fn));
 
         if (slots[ 'before-options' ] !== void 0) {
           options = slots[ 'before-options' ]().concat(options);
@@ -26285,16 +26291,15 @@
           value: inputValue.value !== void 0 ? inputValue.value : '',
           // required for Android in order to show ENTER key when in form
           type: 'search',
+          ...comboboxAttrs.value,
           ...state.splitAttrs.attributes.value,
           id: state.targetUid.value,
           maxlength: props.maxlength,
-          tabindex: props.tabindex,
           autocomplete: props.autocomplete,
           'data-autofocus': (fromDialog !== true && props.autofocus === true) || void 0,
           disabled: props.disable === true,
           readonly: props.readonly === true,
-          ...inputControlEvents.value,
-          ...comboboxAttrs.value
+          ...inputControlEvents.value
         };
 
         if (fromDialog !== true && hasDialog === true) {
@@ -26580,10 +26585,6 @@
       }
 
       function closeMenu () {
-        if (optionScopeCache !== void 0) {
-          optionScopeCache.optionEls = [];
-        }
-
         if (dialog.value === true) {
           return
         }
@@ -26699,16 +26700,7 @@
 
       updatePreState();
 
-      vue.onBeforeMount(() => {
-        optionScopeCache = {
-          optionSlot: slots.option,
-          options: [],
-          optionEls: []
-        };
-      });
-
       vue.onBeforeUnmount(() => {
-        optionScopeCache = void 0;
         clearTimeout(inputTimer);
       });
 
@@ -26796,7 +26788,6 @@
                 key: 'd_t',
                 class: 'no-outline',
                 id: state.targetUid.value,
-                tabindex: props.tabindex,
                 ...comboboxAttrs.value,
                 onKeydown: onTargetKeydown,
                 onKeyup: onTargetKeyup,
@@ -37240,6 +37231,10 @@
 
       const vm = createChildApp({
         name: 'LoadingBar',
+
+        // hide App from Vue devtools
+        devtools: { hide: true },
+
         setup: () => () => vue.h(QAjaxBar, props.value)
       }, parentApp).mount(el);
 
@@ -37635,6 +37630,9 @@
   function getComponent ($q) {
     return vue.defineComponent({
       name: 'QNotifications',
+      
+      // hide App from Vue devtools
+      devtools: { hide: true },
 
       setup () {
         const notificationsList = {};
@@ -38589,7 +38587,7 @@
   });
 
   var index_umd = {
-    version: '2.1.4',
+    version: '2.1.8',
     install (app, opts) {
       installQuasar(app, {
         components,