quasar 2.11.1 → 2.11.2

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.1
+ * Quasar Framework v2.11.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -4406,7 +4406,11 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
     &.q-tabs__arrows--inside
       .q-tabs__arrow--faded
         display: none
-  &--not-scrollable
+  &--not-scrollable,
+  body.mobile &--scrollable.q-tabs--mobile-without-arrows
+    &.q-tabs__arrows--outside
+      padding-left: 0
+      padding-right: 0
     .q-tabs__arrow
       display: none
     .q-tabs__content
@@ -7003,7 +7007,8 @@ img.responsive
   height: auto
 .non-selectable
   user-select: none !important
-.scroll
+.scroll,
+body.mobile .scroll--mobile
   overflow: auto
 .scroll, .scroll-x, .scroll-y
   -webkit-overflow-scrolling: touch

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.1
+ * Quasar Framework v2.11.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -318,8 +318,8 @@
         // the rest of the props; we also avoid
         // hydration errors
         opts.onSSRHydrated.push(() => {
-          isRuntimeSsrPreHydration.value = false;
           Object.assign($q.platform, client);
+          isRuntimeSsrPreHydration.value = false;
           iosCorrection = void 0;
         });
 
@@ -1174,21 +1174,51 @@
   }
 
   function applyClientSsrCorrections () {
+    const { is } = client;
     const classes = document.body.className;
-    let newCls = classes;
+
+    const classList = new Set(classes.replace(/ {2}/g, ' ').split(' '));
 
     if (iosCorrection !== void 0) {
-      newCls = newCls.replace('desktop', 'platform-ios mobile');
+      classList.delete('desktop');
+      classList.add('platform-ios');
+      classList.add('mobile');
+    }
+    // else: is it SSG?
+    else if (is.nativeMobile !== true && is.electron !== true && is.bex !== true) {
+      if (is.desktop === true) {
+        classList.delete('mobile');
+        classList.delete('platform-ios');
+        classList.delete('platform-android');
+        classList.add('desktop');
+      }
+      else if (is.mobile === true) {
+        classList.delete('desktop');
+        classList.add('mobile');
+
+        const mobile = getMobilePlatform(is);
+        if (mobile !== void 0) {
+          classList.add(`platform-${ mobile }`);
+          classList.delete(`platform-${ mobile === 'ios' ? 'android' : 'ios' }`);
+        }
+        else {
+          classList.delete('platform-ios');
+          classList.delete('platform-android');
+        }
+      }
     }
 
     if (client.has.touch === true) {
-      newCls = newCls.replace('no-touch', 'touch');
+      classList.delete('no-touch');
+      classList.add('touch');
     }
 
     if (client.within.iframe === true) {
-      newCls += ' within-iframe';
+      classList.add('within-iframe');
     }
 
+    const newCls = Array.from(classList).join(' ');
+
     if (classes !== newCls) {
       document.body.className = newCls;
     }
@@ -1612,7 +1642,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.11.1' };
+      const $q = { version: '2.11.2' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -9570,18 +9600,11 @@
       const rightArrow = vue.ref(false);
       const justify = vue.ref(false);
 
-      const arrowsEnabled = vue.computed(() =>
-        $q.platform.is.desktop === true || props.mobileArrows === true
-      );
-
       const tabDataList = [];
       const tabDataListLen = vue.ref(0);
       const hasFocus = vue.ref(false);
 
       let animateTimer, scrollTimer, unwatchRoute;
-      let localUpdateArrows = arrowsEnabled.value === true
-        ? updateArrowsFn
-        : noop;
 
       const tabProps = vue.computed(() => ({
         activeClass: props.activeClass,
@@ -9622,17 +9645,17 @@
         'q-tabs row no-wrap items-center'
         + ` q-tabs--${ scrollable.value === true ? '' : 'not-' }scrollable`
         + ` q-tabs--${ props.vertical === true ? 'vertical' : 'horizontal' }`
-        + ` q-tabs__arrows--${ arrowsEnabled.value === true && props.outsideArrows === true ? 'outside' : 'inside' }`
+        + ` q-tabs__arrows--${ props.outsideArrows === true ? 'outside' : 'inside' }`
+        + ` q-tabs--mobile-with${ props.mobileArrows === true ? '' : 'out' }-arrows`
         + (props.dense === true ? ' q-tabs--dense' : '')
         + (props.shrink === true ? ' col-shrink' : '')
         + (props.stretch === true ? ' self-stretch' : '')
       );
 
       const innerClass = vue.computed(() =>
-        'q-tabs__content row no-wrap items-center self-stretch hide-scrollbar relative-position '
+        'q-tabs__content scroll--mobile row no-wrap items-center self-stretch hide-scrollbar relative-position '
         + alignClass.value
         + (props.contentClass !== void 0 ? ` ${ props.contentClass }` : '')
-        + ($q.platform.is.mobile === true ? ' scroll' : '')
       );
 
       const domProps = vue.computed(() => (
@@ -9644,25 +9667,15 @@
       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(isRTL, updateArrows);
 
       vue.watch(() => props.modelValue, name => {
         updateModel({ name, setCurrent: true, skipEmit: true });
       });
 
-      vue.watch(() => props.outsideArrows, () => {
-        recalculateScroll();
-      });
+      vue.watch(() => props.outsideArrows, recalculateScroll);
 
-      vue.watch(arrowsEnabled, v => {
-        localUpdateArrows = v === true
-          ? updateArrowsFn
-          : noop;
-
-        recalculateScroll();
-      });
-
-      function updateModel ({ name, setCurrent, skipEmit, fromRoute }) {
+      function updateModel ({ name, setCurrent, skipEmit }) {
         if (currentModel.value !== name) {
           if (skipEmit !== true && props[ 'onUpdate:modelValue' ] !== void 0) {
             emit('update:modelValue', name);
@@ -9708,7 +9721,7 @@
         scrollable.value = scroll;
 
         // Arrows need to be updated even if the scroll status was already true
-        scroll === true && registerUpdateArrowsTick(localUpdateArrows);
+        scroll === true && registerUpdateArrowsTick(updateArrows);
 
         justify.value = size < parseInt(props.breakpoint, 10);
       }
@@ -9765,34 +9778,34 @@
 
         if (offset < 0) {
           contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.floor(offset);
-          localUpdateArrows();
+          updateArrows();
           return
         }
 
         offset += props.vertical === true ? newPos.height - height : newPos.width - width;
         if (offset > 0) {
           contentRef.value[ props.vertical === true ? 'scrollTop' : 'scrollLeft' ] += Math.ceil(offset);
-          localUpdateArrows();
+          updateArrows();
         }
       }
 
-      function updateArrowsFn () {
+      function updateArrows () {
         const content = contentRef.value;
-        if (content !== null) {
-          const
-            rect = content.getBoundingClientRect(),
-            pos = props.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft);
+        if (content === null) { return }
 
-          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;
-          }
+        const
+          rect = content.getBoundingClientRect(),
+          pos = props.vertical === true ? content.scrollTop : Math.abs(content.scrollLeft);
+
+        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;
         }
       }
 
@@ -9894,7 +9907,7 @@
         }
 
         set(content, pos);
-        localUpdateArrows();
+        updateArrows();
 
         return done
       }
@@ -10138,17 +10151,21 @@
       });
 
       return () => {
-        const child = [
+        return vue.h('div', {
+          ref: rootRef,
+          class: classes.value,
+          role: 'tablist',
+          onFocusin,
+          onFocusout
+        }, [
           vue.h(QResizeObserver, { onResize: updateContainer }),
 
           vue.h('div', {
             ref: contentRef,
             class: innerClass.value,
-            onScroll: localUpdateArrows
-          }, hSlot(slots.default))
-        ];
+            onScroll: updateArrows
+          }, hSlot(slots.default)),
 
-        arrowsEnabled.value === true && child.push(
           vue.h(QIcon, {
             class: 'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon'
               + (leftArrow.value === true ? '' : ' q-tabs__arrow--faded'),
@@ -10170,15 +10187,7 @@
             onMouseleavePassive: stopAnimScroll,
             onTouchendPassive: stopAnimScroll
           })
-        );
-
-        return vue.h('div', {
-          ref: rootRef,
-          class: classes.value,
-          role: 'tablist',
-          onFocusin,
-          onFocusout
-        }, child)
+        ])
       }
     }
   });
@@ -40511,7 +40520,7 @@
    */
 
   var index_umd = {
-    version: '2.11.1',
+    version: '2.11.2',
     install (app, opts) {
       installQuasar(app, {
         components,