@indielayer/ui 1.17.0 → 1.18.0

package/src/virtual/components/virtualList/VirtualList.vue

@@ -95,33 +95,27 @@ defineExpose<VirtualListImperativeAPI>({
 // Watch for dynamic row heights - run after DOM updates
 watch(
   [element, startIndexOverscan, stopIndexOverscan, isDynamicRowHeight, () => props.rowHeight],
-  ([el, start, stop, isDynamic]) => {
+  ([el, start, stop, isDynamic], _old, onCleanup) => {
     if (!el || !isDynamic) {
       return
     }
 
-    // Use nextTick to ensure DOM is fully updated
-    const setupObserver = () => {
-      const rows = Array.from(el.children).filter((item, index) => {
-        if (item.hasAttribute('aria-hidden')) {
-          // Ignore sizing element
-          return false
-        }
-
-        const attribute = `${start + index}`
+    const rows = Array.from(el.children).filter((item, index) => {
+      if (item.hasAttribute('aria-hidden')) {
+        // Ignore sizing element
+        return false
+      }
 
-        item.setAttribute(DATA_ATTRIBUTE_LIST_INDEX, attribute)
+      const attribute = `${start + index}`
 
-        return true
-      })
+      item.setAttribute(DATA_ATTRIBUTE_LIST_INDEX, attribute)
 
-      const dynamicHeight = props.rowHeight as DynamicRowHeight
+      return true
+    })
 
-      return dynamicHeight.observeRowElements(rows)
-    }
+    const dynamicHeight = props.rowHeight as DynamicRowHeight
 
-    // Return cleanup function
-    return setupObserver()
+    onCleanup(dynamicHeight.observeRowElements(rows))
   },
   { flush: 'post' }, // Run after DOM updates
 )

package/src/virtual/components/virtualList/useDynamicRowHeight.test.ts

@@ -1,24 +1,38 @@
 import { describe, expect, test, beforeEach, afterEach } from 'vitest'
 import { ref, nextTick } from 'vue'
 import { useDynamicRowHeight, DATA_ATTRIBUTE_LIST_INDEX } from './useDynamicRowHeight'
+import type { DynamicRowHeight } from './types'
 import { mockResizeObserver, setElementSize } from '../../test-utils/mockResizeObserver'
 
 describe('useDynamicRowHeight', () => {
   let unmock: (() => void) | undefined
+  let instances: DynamicRowHeight[] = []
 
   beforeEach(() => {
     unmock = mockResizeObserver()
+    instances = []
   })
 
   afterEach(() => {
+    instances.forEach((instance) => instance.cleanup())
     if (unmock) {
       unmock()
     }
   })
 
+  function createDynamicRowHeight(
+    ...args: Parameters<typeof useDynamicRowHeight>
+  ): DynamicRowHeight {
+    const instance = useDynamicRowHeight(...args)
+
+    instances.push(instance)
+
+    return instance
+  }
+
   describe('getAverageRowHeight', () => {
     test('returns an initial estimate based on the defaultRowHeight', () => {
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
       })
 
@@ -26,7 +40,7 @@ describe('useDynamicRowHeight', () => {
     })
 
     test('returns an estimate based on measured rows', () => {
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
       })
 
@@ -43,7 +57,7 @@ describe('useDynamicRowHeight', () => {
 
     test('resets when key changes', async () => {
       const key = ref('a')
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
         key,
       })
@@ -64,7 +78,7 @@ describe('useDynamicRowHeight', () => {
 
   describe('getRowHeight', () => {
     test('returns estimated height for a row that has not yet been measured', () => {
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
       })
 
@@ -72,7 +86,7 @@ describe('useDynamicRowHeight', () => {
     })
 
     test('returns the most recently measured size', () => {
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
       })
 
@@ -90,7 +104,7 @@ describe('useDynamicRowHeight', () => {
 
     test('resets when key changes', async () => {
       const key = ref('a')
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
         key,
       })
@@ -119,7 +133,7 @@ describe('useDynamicRowHeight', () => {
     }
 
     test('should update cache when an observed element is resized', async () => {
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
       })
 
@@ -151,7 +165,7 @@ describe('useDynamicRowHeight', () => {
     })
 
     test('should unobserve an element when requested', async () => {
-      const dynamicRowHeight = useDynamicRowHeight({
+      const dynamicRowHeight = createDynamicRowHeight({
         defaultRowHeight: 100,
       })
 

package/src/virtual/components/virtualList/useDynamicRowHeight.ts

@@ -119,12 +119,14 @@ export function useDynamicRowHeight({
 
   const resizeObserver = new ResizeObserver(resizeObserverCallback)
 
-  onBeforeUnmount(cleanup)
-
   function cleanup() {
     resizeObserver.disconnect()
   }
 
+  if (getCurrentInstance()) {
+    onBeforeUnmount(cleanup)
+  }
+
   const observeRowElements = (elements: Element[] | NodeListOf<Element>) => {
     const elementsArray = Array.isArray(elements)
       ? elements

package/src/virtual/utils/parseNumericStyleValue.ts

@@ -16,4 +16,6 @@ export function parseNumericStyleValue(
       }
     }
   }
+
+  return undefined
 }