fix(VTabs): use ResizeObserver if available

fixes #4733 fixes #10455 fixes #12783 fixes #14195 fixes #15316
vuetifyjs · Jun 19, 2022 · ff519c6 · ff519c6
1 parent 760490d
commit ff519c6
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
@@ -70,6 +70,7 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.10",
+    "@types/resize-observer-browser": "^0.1.7",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",

diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
@@ -138,7 +138,6 @@ export const BaseSlideGroup = mixins<options &
   },
 
   data: () => ({
-    internalItemsLength: 0,
     isOverflowing: false,
     resizeTimeout: 0,
     startX: 0,
@@ -231,13 +230,26 @@ export const BaseSlideGroup = mixins<options &
     },
   },
 
-  beforeUpdate () {
-    this.internalItemsLength = (this.$children || []).length
-  },
-
-  updated () {
-    if (this.internalItemsLength === (this.$children || []).length) return
-    this.setWidths()
+  mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      obs.observe(this.$refs.content)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    } else {
+      let itemsLength = 0
+      this.$on('hook:beforeUpdate', () => {
+        itemsLength = (this.$refs.content?.children || []).length
+      })
+      this.$on('hook:updated', () => {
+        if (itemsLength === (this.$refs.content?.children || []).length) return
+        this.setWidths()
+      })
+    }
   },
 
   methods: {

diff --git a/packages/vuetify/src/components/VTabs/VTabs.ts b/packages/vuetify/src/components/VTabs/VTabs.ts
@@ -141,6 +141,16 @@ export default baseMixins.extend<options>().extend({
   },
 
   mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    }
+
     this.$nextTick(() => {
       window.setTimeout(this.callSlider, 30)
     })

diff --git a/yarn.lock b/yarn.lock
@@ -2635,6 +2635,11 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
+"@types/resize-observer-browser@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.7.tgz#294aaadf24ac6580b8fbd1fe3ab7b59fe85f9ef3"
+  integrity sha512-G9eN0Sn0ii9PWQ3Vl72jDPgeJwRWhv2Qk/nQkJuWmRmOB4HX3/BhD5SE1dZs/hzPZL/WKnvF0RHdTSG54QJFyg==
+
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"