quasar 2.11.1 → 2.11.2

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",

package/src/body.js

@@ -45,21 +45,51 @@ function getBodyClasses ({ is, has, within }, cfg) {
 }
 
 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
   }

package/src/components/tabs/QTabs.js

@@ -7,7 +7,6 @@ import useTick from '../../composables/private/use-tick.js'
 import useTimeout from '../../composables/private/use-timeout.js'
 
 import { createComponent } from '../../utils/private/create.js'
-import { noop } from '../../utils/event.js'
 import { hSlot } from '../../utils/private/render.js'
 import { tabsKey } from '../../utils/private/symbols.js'
 import { rtlHasScrollBug } from '../../utils/private/rtl.js'
@@ -85,18 +84,11 @@ export default createComponent({
     const rightArrow = ref(false)
     const justify = ref(false)
 
-    const arrowsEnabled = computed(() =>
-      $q.platform.is.desktop === true || props.mobileArrows === true
-    )
-
     const tabDataList = []
     const tabDataListLen = ref(0)
     const hasFocus = ref(false)
 
     let animateTimer, scrollTimer, unwatchRoute
-    let localUpdateArrows = arrowsEnabled.value === true
-      ? updateArrowsFn
-      : noop
 
     const tabProps = computed(() => ({
       activeClass: props.activeClass,
@@ -137,17 +129,17 @@ export default createComponent({
       '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 = 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 = computed(() => (
@@ -159,25 +151,15 @@ export default createComponent({
     const isRTL = computed(() => props.vertical !== true && $q.lang.rtl === true)
     const rtlPosCorrection = computed(() => rtlHasScrollBug === false && isRTL.value === true)
 
-    watch(isRTL, localUpdateArrows)
+    watch(isRTL, updateArrows)
 
     watch(() => props.modelValue, name => {
       updateModel({ name, setCurrent: true, skipEmit: true })
     })
 
-    watch(() => props.outsideArrows, () => {
-      recalculateScroll()
-    })
-
-    watch(arrowsEnabled, v => {
-      localUpdateArrows = v === true
-        ? updateArrowsFn
-        : noop
-
-      recalculateScroll()
-    })
+    watch(() => props.outsideArrows, 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)
@@ -223,7 +205,7 @@ export default createComponent({
       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)
     }
@@ -280,34 +262,34 @@ export default createComponent({
 
       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
       }
     }
 
@@ -409,7 +391,7 @@ export default createComponent({
       }
 
       set(content, pos)
-      localUpdateArrows()
+      updateArrows()
 
       return done
     }
@@ -653,17 +635,21 @@ export default createComponent({
     })
 
     return () => {
-      const child = [
+      return h('div', {
+        ref: rootRef,
+        class: classes.value,
+        role: 'tablist',
+        onFocusin,
+        onFocusout
+      }, [
         h(QResizeObserver, { onResize: updateContainer }),
 
         h('div', {
           ref: contentRef,
           class: innerClass.value,
-          onScroll: localUpdateArrows
-        }, hSlot(slots.default))
-      ]
+          onScroll: updateArrows
+        }, hSlot(slots.default)),
 
-      arrowsEnabled.value === true && child.push(
         h(QIcon, {
           class: 'q-tabs__arrow q-tabs__arrow--left absolute q-tab__icon'
             + (leftArrow.value === true ? '' : ' q-tabs__arrow--faded'),
@@ -685,15 +671,7 @@ export default createComponent({
           onMouseleavePassive: stopAnimScroll,
           onTouchendPassive: stopAnimScroll
         })
-      )
-
-      return h('div', {
-        ref: rootRef,
-        class: classes.value,
-        role: 'tablist',
-        onFocusin,
-        onFocusout
-      }, child)
+      ])
     }
   }
 })

package/src/components/tabs/QTabs.sass

@@ -93,7 +93,11 @@
       .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

package/src/css/core/mouse.sass

@@ -1,8 +1,10 @@
 .non-selectable
   user-select: none !important
 
-.scroll
+.scroll,
+body.mobile .scroll--mobile
   overflow: auto
+
 .scroll, .scroll-x, .scroll-y
   -webkit-overflow-scrolling: touch
   will-change: scroll-position

package/src/plugins/Platform.js

@@ -308,8 +308,8 @@ const Platform = {
       // 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
       })