quasar 2.18.6 → 2.19.0

package/src/components/virtual-scroll/use-virtual-scroll.js

@@ -1,4 +1,15 @@
-import { h, ref, computed, watch, onActivated, onDeactivated, onBeforeMount, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import {
+  h,
+  ref,
+  computed,
+  watch,
+  onActivated,
+  onDeactivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  nextTick,
+  getCurrentInstance
+} from 'vue'
 
 import debounce from '../../utils/debounce/debounce.js'
 import { noop } from '../../utils/event/event.js'
@@ -17,40 +28,42 @@ const scrollToEdges = [
 
 const filterProto = Array.prototype.filter
 
-const setOverflowAnchor = __QUASAR_SSR__ || window.getComputedStyle(document.body).overflowAnchor === void 0
-  ? noop
-  : function (contentEl, index) {
-    if (contentEl === null) return
+const setOverflowAnchor =
+  __QUASAR_SSR__ ||
+  window.getComputedStyle(document.body).overflowAnchor === void 0
+    ? noop
+    : function setOverflowAnchor(contentEl, index) {
+        if (contentEl === null) return
 
-    if (contentEl._qOverflowAnimationFrame !== void 0) {
-      cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
-    }
+        if (contentEl._qOverflowAnimationFrame !== void 0) {
+          cancelAnimationFrame(contentEl._qOverflowAnimationFrame)
+        }
 
-    contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
-      if (contentEl === null) return
+        contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
+          if (contentEl === null) return
 
-      contentEl._qOverflowAnimationFrame = void 0
-      const children = contentEl.children || []
+          contentEl._qOverflowAnimationFrame = void 0
+          const children = contentEl.children || []
 
-      filterProto
-        .call(children, el => el.dataset && el.dataset.qVsAnchor !== void 0)
-        .forEach(el => {
-          delete el.dataset.qVsAnchor
-        })
+          filterProto
+            .call(children, el => el.dataset && el.dataset.qVsAnchor !== void 0)
+            .forEach(el => {
+              delete el.dataset.qVsAnchor
+            })
 
-      const el = children[ index ]
+          const el = children[index]
 
-      if (el?.dataset) {
-        el.dataset.qVsAnchor = ''
+          if (el?.dataset) {
+            el.dataset.qVsAnchor = ''
+          }
+        })
       }
-    })
-  }
 
-function sumFn (acc, h) {
-  return acc + h
+function sumFn(acc, item) {
+  return acc + item
 }
 
-function getScrollDetails (
+function getScrollDetails(
   parent,
   child,
   beforeRef,
@@ -60,8 +73,10 @@ function getScrollDetails (
   stickyStart,
   stickyEnd
 ) {
-  const
-    parentCalc = parent === window ? document.scrollingElement || document.documentElement : parent,
+  const parentCalc =
+      parent === window
+        ? document.scrollingElement || document.documentElement
+        : parent,
     propElSize = horizontal === true ? 'offsetWidth' : 'offsetHeight',
     details = {
       scrollStart: 0,
@@ -73,25 +88,27 @@ function getScrollDetails (
 
   if (horizontal === true) {
     if (parent === window) {
-      details.scrollStart = window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
+      details.scrollStart =
+        window.pageXOffset || window.scrollX || document.body.scrollLeft || 0
       details.scrollViewSize += document.documentElement.clientWidth
-    }
-    else {
+    } else {
       details.scrollStart = parentCalc.scrollLeft
       details.scrollViewSize += parentCalc.clientWidth
     }
     details.scrollMaxSize = parentCalc.scrollWidth
 
     if (rtl === true) {
-      details.scrollStart = (rtlHasScrollBug === true ? details.scrollMaxSize - details.scrollViewSize : 0) - details.scrollStart
+      details.scrollStart =
+        (rtlHasScrollBug === true
+          ? details.scrollMaxSize - details.scrollViewSize
+          : 0) - details.scrollStart
     }
-  }
-  else {
+  } else {
     if (parent === window) {
-      details.scrollStart = window.pageYOffset || window.scrollY || document.body.scrollTop || 0
+      details.scrollStart =
+        window.pageYOffset || window.scrollY || document.body.scrollTop || 0
       details.scrollViewSize += document.documentElement.clientHeight
-    }
-    else {
+    } else {
       details.scrollStart = parentCalc.scrollTop
       details.scrollViewSize += parentCalc.clientHeight
     }
@@ -99,31 +116,37 @@ function getScrollDetails (
   }
 
   if (beforeRef !== null) {
-    for (let el = beforeRef.previousElementSibling; el !== null; el = el.previousElementSibling) {
+    for (
+      let el = beforeRef.previousElementSibling;
+      el !== null;
+      el = el.previousElementSibling
+    ) {
       if (el.classList.contains('q-virtual-scroll--skip') === false) {
-        details.offsetStart += el[ propElSize ]
+        details.offsetStart += el[propElSize]
       }
     }
   }
 
   if (afterRef !== null) {
-    for (let el = afterRef.nextElementSibling; el !== null; el = el.nextElementSibling) {
+    for (
+      let el = afterRef.nextElementSibling;
+      el !== null;
+      el = el.nextElementSibling
+    ) {
       if (el.classList.contains('q-virtual-scroll--skip') === false) {
-        details.offsetEnd += el[ propElSize ]
+        details.offsetEnd += el[propElSize]
       }
     }
   }
 
   if (child !== parent) {
-    const
-      parentRect = parentCalc.getBoundingClientRect(),
+    const parentRect = parentCalc.getBoundingClientRect(),
       childRect = child.getBoundingClientRect()
 
     if (horizontal === true) {
       details.offsetStart += childRect.left - parentRect.left
       details.offsetEnd -= childRect.width
-    }
-    else {
+    } else {
       details.offsetStart += childRect.top - parentRect.top
       details.offsetEnd -= childRect.height
     }
@@ -137,7 +160,7 @@ function getScrollDetails (
   return details
 }
 
-function setScroll (parent, scroll, horizontal, rtl) {
+function setScroll(parent, scroll, horizontal, rtl) {
   if (scroll === 'end') {
     scroll = (parent === window ? document.body : parent)[
       horizontal === true ? 'scrollWidth' : 'scrollHeight'
@@ -147,30 +170,40 @@ function setScroll (parent, scroll, horizontal, rtl) {
   if (parent === window) {
     if (horizontal === true) {
       if (rtl === true) {
-        scroll = (rtlHasScrollBug === true ? document.body.scrollWidth - document.documentElement.clientWidth : 0) - scroll
+        scroll =
+          (rtlHasScrollBug === true
+            ? document.body.scrollWidth - document.documentElement.clientWidth
+            : 0) - scroll
       }
-      window.scrollTo(scroll, window.pageYOffset || window.scrollY || document.body.scrollTop || 0)
-    }
-    else {
-      window.scrollTo(window.pageXOffset || window.scrollX || document.body.scrollLeft || 0, scroll)
+      window.scrollTo(
+        scroll,
+        window.pageYOffset || window.scrollY || document.body.scrollTop || 0
+      )
+    } else {
+      window.scrollTo(
+        window.pageXOffset || window.scrollX || document.body.scrollLeft || 0,
+        scroll
+      )
     }
-  }
-  else if (horizontal === true) {
+  } else if (horizontal === true) {
     if (rtl === true) {
-      scroll = (rtlHasScrollBug === true ? parent.scrollWidth - parent.offsetWidth : 0) - scroll
+      scroll =
+        (rtlHasScrollBug === true
+          ? parent.scrollWidth - parent.offsetWidth
+          : 0) - scroll
     }
     parent.scrollLeft = scroll
-  }
-  else {
+  } else {
     parent.scrollTop = scroll
   }
 }
 
-function sumSize (sizeAgg, size, from, to) {
-  if (from >= to) { return 0 }
+function sumSize(sizeAgg, size, from, to) {
+  if (from >= to) {
+    return 0
+  }
 
-  const
-    lastTo = size.length,
+  const lastTo = size.length,
     fromAgg = Math.floor(from / aggBucketSize),
     toAgg = Math.floor((to - 1) / aggBucketSize) + 1
 
@@ -188,36 +221,36 @@ function sumSize (sizeAgg, size, from, to) {
 
 const commonVirtScrollProps = {
   virtualScrollSliceSize: {
-    type: [ Number, String ],
+    type: [Number, String],
     default: 10
   },
 
   virtualScrollSliceRatioBefore: {
-    type: [ Number, String ],
+    type: [Number, String],
     default: 1
   },
 
   virtualScrollSliceRatioAfter: {
-    type: [ Number, String ],
+    type: [Number, String],
     default: 1
   },
 
   virtualScrollItemSize: {
-    type: [ Number, String ],
+    type: [Number, String],
     default: 24
   },
 
   virtualScrollStickySizeStart: {
-    type: [ Number, String ],
+    type: [Number, String],
     default: 0
   },
 
   virtualScrollStickySizeEnd: {
-    type: [ Number, String ],
+    type: [Number, String],
     default: 0
   },
 
-  tableColspan: [ Number, String ]
+  tableColspan: [Number, String]
 }
 
 export const commonVirtScrollPropsList = Object.keys(commonVirtScrollProps)
@@ -228,8 +261,10 @@ export const useVirtualScrollProps = {
   ...commonVirtScrollProps
 }
 
-export function useVirtualScroll ({
-  virtualScrollLength, getVirtualScrollTarget, getVirtualScrollEl,
+export function useVirtualScroll({
+  virtualScrollLength,
+  getVirtualScrollTarget,
+  getVirtualScrollEl,
   virtualScrollItemSizeComputed // optional
 }) {
   const vm = getCurrentInstance()
@@ -237,7 +272,11 @@ export function useVirtualScroll ({
   const { props, emit, proxy } = vm
   const { $q } = proxy
 
-  let prevScrollStart, prevToIndex, localScrollViewSize, virtualScrollSizesAgg = [], virtualScrollSizes
+  let prevScrollStart,
+    prevToIndex,
+    localScrollViewSize,
+    virtualScrollSizesAgg = [],
+    virtualScrollSizes
 
   const virtualScrollPaddingBefore = ref(0)
   const virtualScrollPaddingAfter = ref(0)
@@ -249,37 +288,47 @@ export function useVirtualScroll ({
 
   const virtualScrollSliceRange = ref({ from: 0, to: 0 })
 
-  const colspanAttr = computed(() => (props.tableColspan !== void 0 ? props.tableColspan : 100))
+  const colspanAttr = computed(() =>
+    props.tableColspan !== void 0 ? props.tableColspan : 100
+  )
 
   if (virtualScrollItemSizeComputed === void 0) {
     virtualScrollItemSizeComputed = computed(() => props.virtualScrollItemSize)
   }
 
-  const needsReset = computed(() => virtualScrollItemSizeComputed.value + ';' + props.virtualScrollHorizontal)
+  const needsReset = computed(
+    () =>
+      virtualScrollItemSizeComputed.value + ';' + props.virtualScrollHorizontal
+  )
 
-  const needsSliceRecalc = computed(() =>
-    needsReset.value + ';' + props.virtualScrollSliceRatioBefore + ';' + props.virtualScrollSliceRatioAfter
+  const needsSliceRecalc = computed(
+    () =>
+      needsReset.value +
+      ';' +
+      props.virtualScrollSliceRatioBefore +
+      ';' +
+      props.virtualScrollSliceRatioAfter
   )
 
-  watch(needsSliceRecalc, () => { setVirtualScrollSize() })
+  watch(needsSliceRecalc, () => {
+    setVirtualScrollSize()
+  })
   watch(needsReset, reset)
 
-  function reset () {
+  function reset() {
     localResetVirtualScroll(prevToIndex, true)
   }
 
-  function refresh (toIndex) {
+  function refresh(toIndex) {
     localResetVirtualScroll(toIndex === void 0 ? prevToIndex : toIndex)
   }
 
-  function scrollTo (toIndex, edge) {
+  function scrollTo(toIndex, edge) {
     const scrollEl = getVirtualScrollTarget()
 
-    if (
-      scrollEl === void 0
-      || scrollEl === null
-      || scrollEl.nodeType === 8
-    ) return
+    if (scrollEl === void 0 || scrollEl === null || scrollEl.nodeType === 8) {
+      return
+    }
 
     const scrollDetails = getScrollDetails(
       scrollEl,
@@ -292,28 +341,34 @@ export function useVirtualScroll ({
       props.virtualScrollStickySizeEnd
     )
 
-    localScrollViewSize !== scrollDetails.scrollViewSize && setVirtualScrollSize(scrollDetails.scrollViewSize)
+    if (localScrollViewSize !== scrollDetails.scrollViewSize) {
+      setVirtualScrollSize(scrollDetails.scrollViewSize)
+    }
 
     setVirtualScrollSliceRange(
       scrollEl,
       scrollDetails,
-      Math.min(virtualScrollLength.value - 1, Math.max(0, parseInt(toIndex, 10) || 0)),
+      Math.min(
+        virtualScrollLength.value - 1,
+        Math.max(0, parseInt(toIndex, 10) || 0)
+      ),
       0,
-      scrollToEdges.indexOf(edge) !== -1 ? edge : (prevToIndex !== -1 && toIndex > prevToIndex ? 'end' : 'start')
+      scrollToEdges.indexOf(edge) !== -1
+        ? edge
+        : prevToIndex !== -1 && toIndex > prevToIndex
+          ? 'end'
+          : 'start'
     )
   }
 
-  function localOnVirtualScrollEvt () {
+  function localOnVirtualScrollEvt() {
     const scrollEl = getVirtualScrollTarget()
 
-    if (
-      scrollEl === void 0
-      || scrollEl === null
-      || scrollEl.nodeType === 8
-    ) return
+    if (scrollEl === void 0 || scrollEl === null || scrollEl.nodeType === 8) {
+      return
+    }
 
-    const
-      scrollDetails = getScrollDetails(
+    const scrollDetails = getScrollDetails(
         scrollEl,
         getVirtualScrollEl(),
         beforeRef.value,
@@ -324,7 +379,11 @@ export function useVirtualScroll ({
         props.virtualScrollStickySizeEnd
       ),
       listLastIndex = virtualScrollLength.value - 1,
-      listEndOffset = scrollDetails.scrollMaxSize - scrollDetails.offsetStart - scrollDetails.offsetEnd - virtualScrollPaddingAfter.value
+      listEndOffset =
+        scrollDetails.scrollMaxSize -
+        scrollDetails.offsetStart -
+        scrollDetails.offsetEnd -
+        virtualScrollPaddingAfter.value
 
     if (prevScrollStart === scrollDetails.scrollStart) return
 
@@ -333,68 +392,89 @@ export function useVirtualScroll ({
       return
     }
 
-    localScrollViewSize !== scrollDetails.scrollViewSize && setVirtualScrollSize(scrollDetails.scrollViewSize)
+    if (localScrollViewSize !== scrollDetails.scrollViewSize) {
+      setVirtualScrollSize(scrollDetails.scrollViewSize)
+    }
 
     updateVirtualScrollSizes(virtualScrollSliceRange.value.from)
 
-    const scrollMaxStart = Math.floor(scrollDetails.scrollMaxSize
-      - Math.max(scrollDetails.scrollViewSize, scrollDetails.offsetEnd)
-      - Math.min(virtualScrollSizes[ listLastIndex ], scrollDetails.scrollViewSize / 2))
+    const scrollMaxStart = Math.floor(
+      scrollDetails.scrollMaxSize -
+        Math.max(scrollDetails.scrollViewSize, scrollDetails.offsetEnd) -
+        Math.min(
+          virtualScrollSizes[listLastIndex],
+          scrollDetails.scrollViewSize / 2
+        )
+    )
 
-    if (scrollMaxStart > 0 && Math.ceil(scrollDetails.scrollStart) >= scrollMaxStart) {
+    if (
+      scrollMaxStart > 0 &&
+      Math.ceil(scrollDetails.scrollStart) >= scrollMaxStart
+    ) {
       setVirtualScrollSliceRange(
         scrollEl,
         scrollDetails,
         listLastIndex,
-        scrollDetails.scrollMaxSize - scrollDetails.offsetEnd - virtualScrollSizesAgg.reduce(sumFn, 0)
+        scrollDetails.scrollMaxSize -
+          scrollDetails.offsetEnd -
+          virtualScrollSizesAgg.reduce(sumFn, 0)
       )
 
       return
     }
 
-    let
-      toIndex = 0,
+    let toIndex = 0,
       listOffset = scrollDetails.scrollStart - scrollDetails.offsetStart,
       offset = listOffset
 
-    if (listOffset <= listEndOffset && listOffset + scrollDetails.scrollViewSize >= virtualScrollPaddingBefore.value) {
+    if (
+      listOffset <= listEndOffset &&
+      listOffset + scrollDetails.scrollViewSize >=
+        virtualScrollPaddingBefore.value
+    ) {
       listOffset -= virtualScrollPaddingBefore.value
       toIndex = virtualScrollSliceRange.value.from
       offset = listOffset
-    }
-    else {
-      for (let j = 0; listOffset >= virtualScrollSizesAgg[ j ] && toIndex < listLastIndex; j++) {
-        listOffset -= virtualScrollSizesAgg[ j ]
+    } else {
+      for (
+        let j = 0;
+        listOffset >= virtualScrollSizesAgg[j] && toIndex < listLastIndex;
+        j++
+      ) {
+        listOffset -= virtualScrollSizesAgg[j]
         toIndex += aggBucketSize
       }
     }
 
     while (listOffset > 0 && toIndex < listLastIndex) {
-      listOffset -= virtualScrollSizes[ toIndex ]
+      listOffset -= virtualScrollSizes[toIndex]
       if (listOffset > -scrollDetails.scrollViewSize) {
         toIndex++
         offset = listOffset
-      }
-      else {
-        offset = virtualScrollSizes[ toIndex ] + listOffset
+      } else {
+        offset = virtualScrollSizes[toIndex] + listOffset
       }
     }
 
-    setVirtualScrollSliceRange(
-      scrollEl,
-      scrollDetails,
-      toIndex,
-      offset
-    )
+    setVirtualScrollSliceRange(scrollEl, scrollDetails, toIndex, offset)
   }
 
-  function setVirtualScrollSliceRange (scrollEl, scrollDetails, toIndex, offset, align) {
-    const alignForce = typeof align === 'string' && align.indexOf('-force') !== -1
+  function setVirtualScrollSliceRange(
+    scrollEl,
+    scrollDetails,
+    toIndex,
+    offset,
+    align
+  ) {
+    const alignForce =
+      typeof align === 'string' && align.indexOf('-force') !== -1
     const alignEnd = alignForce === true ? align.replace('-force', '') : align
     const alignRange = alignEnd !== void 0 ? alignEnd : 'start'
 
-    let
-      from = Math.max(0, toIndex - virtualScrollSliceSizeComputed.value[ alignRange ]),
+    let from = Math.max(
+        0,
+        toIndex - virtualScrollSliceSizeComputed.value[alignRange]
+      ),
       to = from + virtualScrollSliceSizeComputed.value.total
 
     if (to > virtualScrollLength.value) {
@@ -404,7 +484,9 @@ export function useVirtualScroll ({
 
     prevScrollStart = scrollDetails.scrollStart
 
-    const rangeChanged = from !== virtualScrollSliceRange.value.from || to !== virtualScrollSliceRange.value.to
+    const rangeChanged =
+      from !== virtualScrollSliceRange.value.from ||
+      to !== virtualScrollSliceRange.value.to
 
     if (rangeChanged === false && alignEnd === void 0) {
       emitScroll(toIndex)
@@ -414,10 +496,10 @@ export function useVirtualScroll ({
     const { activeElement } = document
     const contentEl = contentRef.value
     if (
-      rangeChanged === true
-      && contentEl !== null
-      && contentEl !== activeElement
-      && contentEl.contains(activeElement) === true
+      rangeChanged === true &&
+      contentEl !== null &&
+      contentEl !== activeElement &&
+      contentEl.contains(activeElement) === true
     ) {
       contentEl.addEventListener('focusout', onBlurRefocusFn)
 
@@ -428,25 +510,51 @@ export function useVirtualScroll ({
 
     setOverflowAnchor(contentEl, toIndex - from)
 
-    const sizeBefore = alignEnd !== void 0 ? virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0) : 0
+    const sizeBefore =
+      alignEnd !== void 0
+        ? virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0)
+        : 0
 
     if (rangeChanged === true) {
       // vue key matching algorithm works only if
       // the array of VNodes changes on only one of the ends
       // so we first change one end and then the other
 
-      const tempTo = to >= virtualScrollSliceRange.value.from && from <= virtualScrollSliceRange.value.to
-        ? virtualScrollSliceRange.value.to
-        : to
+      const tempTo =
+        to >= virtualScrollSliceRange.value.from &&
+        from <= virtualScrollSliceRange.value.to
+          ? virtualScrollSliceRange.value.to
+          : to
 
       virtualScrollSliceRange.value = { from, to: tempTo }
-      virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, from)
-      virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, to, virtualScrollLength.value)
+      virtualScrollPaddingBefore.value = sumSize(
+        virtualScrollSizesAgg,
+        virtualScrollSizes,
+        0,
+        from
+      )
+      virtualScrollPaddingAfter.value = sumSize(
+        virtualScrollSizesAgg,
+        virtualScrollSizes,
+        to,
+        virtualScrollLength.value
+      )
 
       requestAnimationFrame(() => {
-        if (virtualScrollSliceRange.value.to !== to && prevScrollStart === scrollDetails.scrollStart) {
-          virtualScrollSliceRange.value = { from: virtualScrollSliceRange.value.from, to }
-          virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, to, virtualScrollLength.value)
+        if (
+          virtualScrollSliceRange.value.to !== to &&
+          prevScrollStart === scrollDetails.scrollStart
+        ) {
+          virtualScrollSliceRange.value = {
+            from: virtualScrollSliceRange.value.from,
+            to
+          }
+          virtualScrollPaddingAfter.value = sumSize(
+            virtualScrollSizesAgg,
+            virtualScrollSizes,
+            to,
+            virtualScrollLength.value
+          )
         }
       })
     }
@@ -460,10 +568,14 @@ export function useVirtualScroll ({
         updateVirtualScrollSizes(from)
       }
 
-      const
-        sizeAfter = virtualScrollSizes.slice(from, toIndex).reduce(sumFn, 0),
-        posStart = sizeAfter + scrollDetails.offsetStart + virtualScrollPaddingBefore.value,
-        posEnd = posStart + virtualScrollSizes[ toIndex ]
+      const sizeAfter = virtualScrollSizes
+          .slice(from, toIndex)
+          .reduce(sumFn, 0),
+        posStart =
+          sizeAfter +
+          scrollDetails.offsetStart +
+          virtualScrollPaddingBefore.value,
+        posEnd = posStart + virtualScrollSizes[toIndex]
 
       let scrollPosition = posStart + offset
 
@@ -471,13 +583,21 @@ export function useVirtualScroll ({
         const sizeDiff = sizeAfter - sizeBefore
         const scrollStart = scrollDetails.scrollStart + sizeDiff
 
-        scrollPosition = alignForce !== true && scrollStart < posStart && posEnd < scrollStart + scrollDetails.scrollViewSize
-          ? scrollStart
-          : (
-              alignEnd === 'end'
-                ? posEnd - scrollDetails.scrollViewSize
-                : posStart - (alignEnd === 'start' ? 0 : Math.round((scrollDetails.scrollViewSize - virtualScrollSizes[ toIndex ]) / 2))
-            )
+        scrollPosition =
+          alignForce !== true &&
+          scrollStart < posStart &&
+          posEnd < scrollStart + scrollDetails.scrollViewSize
+            ? scrollStart
+            : alignEnd === 'end'
+              ? posEnd - scrollDetails.scrollViewSize
+              : posStart -
+                (alignEnd === 'start'
+                  ? 0
+                  : Math.round(
+                      (scrollDetails.scrollViewSize -
+                        virtualScrollSizes[toIndex]) /
+                        2
+                    ))
       }
 
       prevScrollStart = scrollPosition
@@ -493,38 +613,43 @@ export function useVirtualScroll ({
     })
   }
 
-  function updateVirtualScrollSizes (from) {
+  function updateVirtualScrollSizes(from) {
     const contentEl = contentRef.value
 
     if (contentEl) {
-      const
-        children = filterProto.call(
+      const children = filterProto.call(
           contentEl.children,
-          el => el.classList && el.classList.contains('q-virtual-scroll--skip') === false
+          el =>
+            el.classList &&
+            el.classList.contains('q-virtual-scroll--skip') === false
         ),
         childrenLength = children.length,
-        sizeFn = props.virtualScrollHorizontal === true
-          ? el => el.getBoundingClientRect().width
-          : el => el.offsetHeight
+        sizeFn =
+          props.virtualScrollHorizontal === true
+            ? el => el.getBoundingClientRect().width
+            : el => el.offsetHeight
 
-      let
-        index = from,
-        size, diff
+      let index = from,
+        size,
+        diff
 
-      for (let i = 0; i < childrenLength;) {
-        size = sizeFn(children[ i ])
+      for (let i = 0; i < childrenLength; ) {
+        size = sizeFn(children[i])
         i++
 
-        while (i < childrenLength && children[ i ].classList.contains('q-virtual-scroll--with-prev') === true) {
-          size += sizeFn(children[ i ])
+        while (
+          i < childrenLength &&
+          children[i].classList.contains('q-virtual-scroll--with-prev') === true
+        ) {
+          size += sizeFn(children[i])
           i++
         }
 
-        diff = size - virtualScrollSizes[ index ]
+        diff = size - virtualScrollSizes[index]
 
         if (diff !== 0) {
-          virtualScrollSizes[ index ] += diff
-          virtualScrollSizesAgg[ Math.floor(index / aggBucketSize) ] += diff
+          virtualScrollSizes[index] += diff
+          virtualScrollSizesAgg[Math.floor(index / aggBucketSize)] += diff
         }
 
         index++
@@ -532,12 +657,12 @@ export function useVirtualScroll ({
     }
   }
 
-  function onBlurRefocusFn () {
+  function onBlurRefocusFn() {
     contentRef.value?.focus()
   }
 
-  function localResetVirtualScroll (toIndex, fullReset) {
-    const defaultSize = 1 * virtualScrollItemSizeComputed.value
+  function localResetVirtualScroll(toIndex, fullReset) {
+    const defaultSize = Number(virtualScrollItemSizeComputed.value)
 
     if (fullReset === true || Array.isArray(virtualScrollSizes) === false) {
       virtualScrollSizes = []
@@ -547,8 +672,12 @@ export function useVirtualScroll ({
 
     virtualScrollSizes.length = virtualScrollLength.value
 
-    for (let i = virtualScrollLength.value - 1; i >= oldVirtualScrollSizesLength; i--) {
-      virtualScrollSizes[ i ] = defaultSize
+    for (
+      let i = virtualScrollLength.value - 1;
+      i >= oldVirtualScrollSizesLength;
+      i--
+    ) {
+      virtualScrollSizes[i] = defaultSize
     }
 
     const jMax = Math.floor((virtualScrollLength.value - 1) / aggBucketSize)
@@ -557,7 +686,7 @@ export function useVirtualScroll ({
       let size = 0
       const iMax = Math.min((j + 1) * aggBucketSize, virtualScrollLength.value)
       for (let i = j * aggBucketSize; i < iMax; i++) {
-        size += virtualScrollSizes[ i ]
+        size += virtualScrollSizes[i]
       }
       virtualScrollSizesAgg.push(size)
     }
@@ -565,19 +694,30 @@ export function useVirtualScroll ({
     prevToIndex = -1
     prevScrollStart = void 0
 
-    virtualScrollPaddingBefore.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, 0, virtualScrollSliceRange.value.from)
-    virtualScrollPaddingAfter.value = sumSize(virtualScrollSizesAgg, virtualScrollSizes, virtualScrollSliceRange.value.to, virtualScrollLength.value)
+    virtualScrollPaddingBefore.value = sumSize(
+      virtualScrollSizesAgg,
+      virtualScrollSizes,
+      0,
+      virtualScrollSliceRange.value.from
+    )
+    virtualScrollPaddingAfter.value = sumSize(
+      virtualScrollSizesAgg,
+      virtualScrollSizes,
+      virtualScrollSliceRange.value.to,
+      virtualScrollLength.value
+    )
 
     if (toIndex >= 0) {
       updateVirtualScrollSizes(virtualScrollSliceRange.value.from)
-      nextTick(() => { scrollTo(toIndex) })
-    }
-    else {
+      nextTick(() => {
+        scrollTo(toIndex)
+      })
+    } else {
       onVirtualScrollEvt()
     }
   }
 
-  function setVirtualScrollSize (scrollViewSize) {
+  function setVirtualScrollSize(scrollViewSize) {
     if (scrollViewSize === void 0 && typeof window !== 'undefined') {
       const scrollEl = getVirtualScrollTarget()
 
@@ -597,17 +737,24 @@ export function useVirtualScroll ({
 
     localScrollViewSize = scrollViewSize
 
-    const virtualScrollSliceRatioBefore = parseFloat(props.virtualScrollSliceRatioBefore) || 0
-    const virtualScrollSliceRatioAfter = parseFloat(props.virtualScrollSliceRatioAfter) || 0
-    const multiplier = 1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter
-    const view = scrollViewSize === void 0 || scrollViewSize <= 0
-      ? 1
-      : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value)
+    const virtualScrollSliceRatioBefore =
+      parseFloat(props.virtualScrollSliceRatioBefore) || 0
+    const virtualScrollSliceRatioAfter =
+      parseFloat(props.virtualScrollSliceRatioAfter) || 0
+    const multiplier =
+      1 + virtualScrollSliceRatioBefore + virtualScrollSliceRatioAfter
+    const view =
+      scrollViewSize === void 0 || scrollViewSize <= 0
+        ? 1
+        : Math.ceil(scrollViewSize / virtualScrollItemSizeComputed.value)
 
     const baseSize = Math.max(
       1,
       view,
-      Math.ceil((props.virtualScrollSliceSize > 0 ? props.virtualScrollSliceSize : 10) / multiplier)
+      Math.ceil(
+        (props.virtualScrollSliceSize > 0 ? props.virtualScrollSliceSize : 10) /
+          multiplier
+      )
     )
 
     virtualScrollSliceSizeComputed.value = {
@@ -619,71 +766,99 @@ export function useVirtualScroll ({
     }
   }
 
-  function padVirtualScroll (tag, content) {
-    const paddingSize = props.virtualScrollHorizontal === true ? 'width' : 'height'
+  function padVirtualScroll(tag, content) {
+    const paddingSize =
+      props.virtualScrollHorizontal === true ? 'width' : 'height'
     const style = {
-      [ '--q-virtual-scroll-item-' + paddingSize ]: virtualScrollItemSizeComputed.value + 'px'
+      ['--q-virtual-scroll-item-' + paddingSize]:
+        virtualScrollItemSizeComputed.value + 'px'
     }
 
     return [
       tag === 'tbody'
-        ? h(tag, {
-          class: 'q-virtual-scroll__padding',
-          key: 'before',
-          ref: beforeRef
-        }, [
-          h('tr', [
-            h('td', {
-              style: { [ paddingSize ]: `${ virtualScrollPaddingBefore.value }px`, ...style },
-              colspan: colspanAttr.value
-            })
-          ])
-        ])
+        ? h(
+            tag,
+            {
+              class: 'q-virtual-scroll__padding',
+              key: 'before',
+              ref: beforeRef
+            },
+            [
+              h('tr', [
+                h('td', {
+                  style: {
+                    [paddingSize]: `${virtualScrollPaddingBefore.value}px`,
+                    ...style
+                  },
+                  colspan: colspanAttr.value
+                })
+              ])
+            ]
+          )
         : h(tag, {
-          class: 'q-virtual-scroll__padding',
-          key: 'before',
-          ref: beforeRef,
-          style: { [ paddingSize ]: `${ virtualScrollPaddingBefore.value }px`, ...style }
-        }),
-
-      h(tag, {
-        class: 'q-virtual-scroll__content',
-        key: 'content',
-        ref: contentRef,
-        tabindex: -1
-      }, content.flat()),
+            class: 'q-virtual-scroll__padding',
+            key: 'before',
+            ref: beforeRef,
+            style: {
+              [paddingSize]: `${virtualScrollPaddingBefore.value}px`,
+              ...style
+            }
+          }),
+
+      h(
+        tag,
+        {
+          class: 'q-virtual-scroll__content',
+          key: 'content',
+          ref: contentRef,
+          tabindex: -1
+        },
+        content.flat()
+      ),
 
       tag === 'tbody'
-        ? h(tag, {
-          class: 'q-virtual-scroll__padding',
-          key: 'after',
-          ref: afterRef
-        }, [
-          h('tr', [
-            h('td', {
-              style: { [ paddingSize ]: `${ virtualScrollPaddingAfter.value }px`, ...style },
-              colspan: colspanAttr.value
-            })
-          ])
-        ])
+        ? h(
+            tag,
+            {
+              class: 'q-virtual-scroll__padding',
+              key: 'after',
+              ref: afterRef
+            },
+            [
+              h('tr', [
+                h('td', {
+                  style: {
+                    [paddingSize]: `${virtualScrollPaddingAfter.value}px`,
+                    ...style
+                  },
+                  colspan: colspanAttr.value
+                })
+              ])
+            ]
+          )
         : h(tag, {
-          class: 'q-virtual-scroll__padding',
-          key: 'after',
-          ref: afterRef,
-          style: { [ paddingSize ]: `${ virtualScrollPaddingAfter.value }px`, ...style }
-        })
+            class: 'q-virtual-scroll__padding',
+            key: 'after',
+            ref: afterRef,
+            style: {
+              [paddingSize]: `${virtualScrollPaddingAfter.value}px`,
+              ...style
+            }
+          })
     ]
   }
 
-  function emitScroll (index) {
+  function emitScroll(index) {
     if (prevToIndex !== index) {
-      props.onVirtualScroll !== void 0 && emit('virtualScroll', {
-        index,
-        from: virtualScrollSliceRange.value.from,
-        to: virtualScrollSliceRange.value.to - 1,
-        direction: index < prevToIndex ? 'decrease' : 'increase',
-        ref: proxy
-      })
+      if (props.onVirtualScroll !== void 0) {
+        emit('virtualScroll', {
+          index,
+          from: virtualScrollSliceRange.value.from,
+          to: virtualScrollSliceRange.value.to - 1,
+          direction: index < prevToIndex ? 'decrease' : 'increase',
+          ref: proxy
+        })
+      }
 
       prevToIndex = index
     }
@@ -710,22 +885,28 @@ export function useVirtualScroll ({
 
     const scrollEl = getVirtualScrollTarget()
 
-    if (prevScrollStart !== void 0 && scrollEl !== void 0 && scrollEl !== null && scrollEl.nodeType !== 8) {
+    if (
+      prevScrollStart !== void 0 &&
+      scrollEl !== void 0 &&
+      scrollEl !== null &&
+      scrollEl.nodeType !== 8
+    ) {
       setScroll(
         scrollEl,
         prevScrollStart,
         props.virtualScrollHorizontal,
         $q.lang.rtl
       )
-    }
-    else {
+    } else {
       scrollTo(prevToIndex)
     }
   })
 
-  __QUASAR_SSR__ || onBeforeUnmount(() => {
-    onVirtualScrollEvt.cancel()
-  })
+  if (!__QUASAR_SSR__) {
+    onBeforeUnmount(() => {
+      onVirtualScrollEvt.cancel()
+    })
+  }
 
   // expose public methods
   Object.assign(proxy, { scrollTo, reset, refresh })