fix(QSplitter/QScrollArea/QPullToRefresh): correctly handle v-touch-pan modifiers change quasarframework#7684

Author: rstoenescu

ui/src/components/pull-to-refresh/QPullToRefresh.js

@@ -63,13 +63,18 @@ export default Vue.extend({
 
     directives () {
       if (this.disable !== true) {
+        const modifiers = {
+          down: true,
+          mightPrevent: true
+        }
+
+        if (this.noMouse !== true) {
+          modifiers.mouse = true
+        }
+
         return [{
           name: 'touch-pan',
-          modifiers: {
-            down: true,
-            mightPrevent: true,
-            mouse: this.noMouse !== true
-          },
+          modifiers,
           value: this.__pull
         }]
       }

ui/src/components/scroll-area/QScrollArea.js

@@ -125,6 +125,19 @@ export default Vue.extend({
     barClass () {
       return `q-scrollarea__bar--${this.dirProps.classSuffix}` +
         (this.thumbHidden === true ? ' q-scrollarea__bar--invisible' : '')
+    },
+
+    thumbDirectives () {
+      return [{
+        name: 'touch-pan',
+        modifiers: {
+          [ this.horizontal === true ? 'horizontal' : 'vertical' ]: true,
+          prevent: true,
+          mouse: true,
+          mouseAllDir: true
+        },
+        value: this.__panThumb
+      }]
     }
   },
 
@@ -285,17 +298,7 @@ export default Vue.extend({
         style: this.style,
         class: this.thumbClass,
         attrs: ariaHidden,
-        directives: cache(this, 'thumb#' + this.horizontal, [{
-          name: 'touch-pan',
-          modifiers: {
-            vertical: this.horizontal !== true,
-            horizontal: this.horizontal,
-            prevent: true,
-            mouse: true,
-            mouseAllDir: true
-          },
-          value: this.__panThumb
-        }])
+        directives: this.thumbDirectives
       })
     ])
   },

ui/src/components/slide-item/QSlideItem.js

@@ -6,6 +6,7 @@ import DarkMixin from '../../mixins/dark.js'
 import ListenersMixin from '../../mixins/listeners.js'
 
 import { slot } from '../../utils/slot.js'
+import { cacheWithFn } from '../../utils/cache.js'
 
 const slotsDef = [
   ['left', 'center', 'start', 'width'],
@@ -137,10 +138,13 @@ export default Vue.extend({
   render (h) {
     const
       content = [],
-      left = this.$scopedSlots[this.langDir.right] !== void 0,
-      right = this.$scopedSlots[this.langDir.left] !== void 0,
-      up = this.$scopedSlots.bottom !== void 0,
-      down = this.$scopedSlots.top !== void 0
+      slots = {
+        left: this.$scopedSlots[this.langDir.right] !== void 0,
+        right: this.$scopedSlots[this.langDir.left] !== void 0,
+        up: this.$scopedSlots.bottom !== void 0,
+        down: this.$scopedSlots.top !== void 0
+      },
+      dirs = Object.keys(slots).filter(key => slots[key] === true)
 
     slotsDef.forEach(slot => {
       const dir = slot[0]
@@ -163,19 +167,25 @@ export default Vue.extend({
         ref: 'content',
         key: 'content',
         staticClass: 'q-slide-item__content',
-        directives: left === true || right === true || up === true || down === true ? [{
-          name: 'touch-pan',
-          value: this.__pan,
-          modifiers: {
-            left,
-            right,
-            up,
-            down,
-            prevent: true,
-            stop: true,
-            mouse: true
-          }
-        }] : null
+        directives: dirs.length > 0
+          ? cacheWithFn(this, 'dir#' + dirs.join(''), () => {
+            const modifiers = {
+              prevent: true,
+              stop: true,
+              mouse: true
+            }
+
+            dirs.forEach(dir => {
+              modifiers[dir] = true
+            })
+
+            return [{
+              name: 'touch-pan',
+              value: this.__pan,
+              modifiers
+            }]
+          })
+          : null
       }, slot(this, 'default'))
     )
 

ui/src/components/splitter/QSplitter.js

@@ -97,6 +97,22 @@ export default Vue.extend({
           [this.prop]: this.__getCSSValue(this.value)
         }
       }
+    },
+
+    separatorDirectives () {
+      if (this.disable !== true) {
+        return [{
+          name: 'touch-pan',
+          value: this.__pan,
+          modifiers: {
+            [ this.horizontal === true ? 'vertical' : 'horizontal' ]: true,
+            prevent: true,
+            stop: true,
+            mouse: true,
+            mouseAllDir: true
+          }
+        }]
+      }
     }
   },
 
@@ -172,18 +188,7 @@ export default Vue.extend({
       }, [
         h('div', {
           staticClass: 'absolute-full q-splitter__separator-area',
-          directives: this.disable === true ? void 0 : cache(this, 'dir#' + this.horizontal, [{
-            name: 'touch-pan',
-            value: this.__pan,
-            modifiers: {
-              horizontal: this.horizontal !== true,
-              vertical: this.horizontal,
-              prevent: true,
-              stop: true,
-              mouse: true,
-              mouseAllDir: true
-            }
-          }])
+          directives: this.separatorDirectives
         }, slot(this, 'separator'))
       ]),
 

ui/src/utils/cache.js

@@ -9,6 +9,15 @@ export default function cache (vm, key, obj) {
     : vm[k]
 }
 
+export function cacheWithFn (vm, key, fn) {
+  if (isSSR === true) return fn()
+
+  const k = `__qcache_${key}`
+  return vm[k] === void 0
+    ? (vm[k] = fn())
+    : vm[k]
+}
+
 export function getPropCacheMixin (propName, proxyPropName) {
   return {
     data () {