Skip to content

Commit

Permalink
fix(VTabs): use ResizeObserver if available
Browse files Browse the repository at this point in the history
fixes #4733
fixes #10455
fixes #12783
fixes #14195
fixes #15316
  • Loading branch information
KaelWD committed Jun 19, 2022
1 parent 760490d commit ff519c6
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 8 deletions.
1 change: 1 addition & 0 deletions packages/vuetify/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
28 changes: 20 additions & 8 deletions packages/vuetify/src/components/VSlideGroup/VSlideGroup.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,6 @@ export const BaseSlideGroup = mixins<options &
},

data: () => ({
internalItemsLength: 0,
isOverflowing: false,
resizeTimeout: 0,
startX: 0,
Expand Down Expand Up @@ -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: {
Expand Down
10 changes: 10 additions & 0 deletions packages/vuetify/src/components/VTabs/VTabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]":
version "0.0.8"
resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
Expand Down

0 comments on commit ff519c6

Please sign in to comment.