feat(QTabs): focus directly on the active tab, if any

quasarframework · Sep 29, 2022 · 64d71a9 · 64d71a9
1 parent 5b8b66b
commit 64d71a9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 20 deletions.
diff --git a/ui/src/components/popup-edit/QPopupEdit.js b/ui/src/components/popup-edit/QPopupEdit.js
@@ -70,17 +70,14 @@ export default Vue.extend({
     },
 
     defaultSlotScope () {
-      const acc = {
+      return injectProp({
         initialValue: this.initialValue,
         updatePosition: this.__reposition,
         emitValue: this.__changeModel,
         validate: this.validate,
         set: this.set,
         cancel: this.cancel
-      }
-
-      injectProp(acc, 'value', () => this.modelValue, this.__changeModel)
-      return acc
+      }, 'value', () => this.modelValue, this.__changeModel)
     },
 
     menuProps () {

diff --git a/ui/src/components/table/table-body.js b/ui/src/components/table/table-body.js
@@ -114,19 +114,18 @@ export default {
     __getBodyScope (data) {
       this.__injectBodyCommonScope(data)
 
-      data.cols = data.cols.map(col => {
-        const c = { ...col }
-        injectProp(c, 'value', () => this.getCellValue(col, data.row))
-        return c
-      })
+      data.cols = data.cols.map(col => injectProp(
+        { ...col },
+        'value',
+        () => this.getCellValue(col, data.row)
+      ))
 
       return data
     },
 
     __getBodyCellScope (data) {
       this.__injectBodyCommonScope(data)
-      injectProp(data, 'value', () => this.getCellValue(data.col, data.row))
-      return data
+      return injectProp(data, 'value', () => this.getCellValue(data.col, data.row))
     },
 
     __getBodySelectionScope (data) {

diff --git a/ui/src/components/tabs/QTab.js b/ui/src/components/tabs/QTab.js
@@ -75,7 +75,11 @@ export default Vue.extend({
     },
 
     computedTabIndex () {
-      return this.disable === true || this.$tabs.hasFocus === true
+      return (
+        this.disable === true ||
+        this.$tabs.hasFocus === true ||
+        (this.isActive === false && this.$tabs.hasActiveTab === true)
+      )
         ? -1
         : this.tabindex || 0
     },

diff --git a/ui/src/components/tabs/QTabs.js b/ui/src/components/tabs/QTabs.js
@@ -10,6 +10,7 @@ import { stop, noop } from '../../utils/event.js'
 import { slot } from '../../utils/private/slot.js'
 import cache from '../../utils/private/cache.js'
 import { rtlHasScrollBug } from '../../utils/scroll.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 function getIndicatorClass (color, top, vertical) {
   const pos = vertical === true
@@ -28,9 +29,7 @@ export default Vue.extend({
   mixins: [ TimeoutMixin, ListenersMixin ],
 
   provide () {
-    return {
-      $tabs: this
-    }
+    return { $tabs: this }
   },
 
   props: {
@@ -78,6 +77,8 @@ export default Vue.extend({
       rightArrow: false,
       justify: false,
 
+      tabNameList: [],
+
       // used by children
       currentModel: this.value,
       hasFocus: false,
@@ -125,6 +126,11 @@ export default Vue.extend({
       }
     },
 
+    // used by children
+    hasActiveTab () {
+      return this.tabNameList.some(entry => entry.name === this.currentModel)
+    },
+
     arrowsEnabled () {
       return this.$q.platform.is.desktop === true || this.mobileArrows === true
     },
@@ -422,7 +428,7 @@ export default Vue.extend({
       return done
     },
 
-    __getRouteEnabledTabVmList () {
+    __getRouteTabVmList () {
       return this.tabVmList.filter(tab => tab.hasRouterLinkProps !== void 0 && tab.hasRouterLink === true)
     },
 
@@ -433,7 +439,7 @@ export default Vue.extend({
     // do not use directly; use __verifyRouteModel() instead
     __updateActiveRoute () {
       let name = null, best = getDefaultBestScore()
-      const vmList = this.__getRouteEnabledTabVmList()
+      const vmList = this.__getRouteTabVmList()
 
       for (const tab of vmList) {
         const exact = tab.exact === true
@@ -546,7 +552,15 @@ export default Vue.extend({
 
     // used by children
     __registerTab (tabVm) {
+      // we avoid setting tabVmList in data() as this would
+      // make the whole vm reactive
       this.tabVmList.push(tabVm)
+      // ...so we extract only the needed stuff out of it
+      // into data() defined tabNameList
+      this.tabNameList.push(
+        injectProp({}, 'name', () => tabVm.name)
+      )
+
       this.__recalculateScroll()
 
       // if it's a QTab
@@ -579,13 +593,17 @@ export default Vue.extend({
      */
     // used by children
     __unregisterTab (tabVm) {
-      this.tabVmList.splice(this.tabVmList.indexOf(tabVm), 1)
+      const index = this.tabVmList.indexOf(tabVm)
+
+      this.tabVmList.splice(index, 1)
+      this.tabNameList.splice(index, 1)
+
       this.__recalculateScroll()
 
       // if we're watching route and this tab is a QRouteTab
       if (this.unwatchRoute !== void 0 && tabVm.hasRouterLinkProps !== void 0) {
         // unwatch route if we don't have any QRouteTabs left
-        this.__getRouteEnabledTabVmList().length === 0 && this.unwatchRoute()
+        this.__getRouteTabVmList().length === 0 && this.unwatchRoute()
         // then update model
         this.__verifyRouteModel()
       }

diff --git a/ui/src/utils/private/inject-obj-prop.js b/ui/src/utils/private/inject-obj-prop.js
@@ -4,10 +4,12 @@ export function injectProp (target, propName, get, set) {
     set,
     enumerable: true
   })
+  return target
 }
 
 export function injectMultipleProps (target, props) {
   for (const key in props) {
     injectProp(target, key, props[ key ])
   }
+  return target
 }