1 line
17 KiB
Plaintext
1 line
17 KiB
Plaintext
|
{"version":3,"file":"virtual.mjs","names":["useDisplay","useResizeObserver","computed","nextTick","onScopeDispose","ref","shallowRef","watch","watchEffect","clamp","debounce","IN_BROWSER","propsFactory","UP","DOWN","BUFFER_PX","makeVirtualProps","itemHeight","type","Number","String","default","height","useVirtual","props","items","display","value","parseFloat","first","last","Math","ceil","parseInt","paddingTop","paddingBottom","containerRef","markerRef","markerOffset","resizeRef","contentRect","viewportHeight","document","documentElement","hasInitialRender","sizes","Array","from","length","offsets","updateTime","targetScrollIndex","getSize","index","updateOffsets","start","performance","now","i","max","unwatch","v","offsetTop","immediate","calculateVisibleItems","window","requestAnimationFrame","scrollToIndex","val","oldVal","clear","handleItemResize","prevHeight","prevMinHeight","min","calculateOffset","calculateIndex","scrollTop","binaryClosest","lastScrollTop","scrollVelocity","lastScrollTime","handleScroll","scrollTime","scrollDeltaT","sign","handleScrollend","raf","cancelAnimationFrame","_calculateVisibleItems","direction","startPx","endPx","end","topOverflow","bottomOverflow","bufferOverflow","offset","computedItems","slice","map","item","raw","deep","arr","high","low","mid","target"],"sources":["../../src/composables/virtual.ts"],"sourcesContent":["// Composables\nimport { useDisplay } from '@/composables/display'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, nextTick, onScopeDispose, ref, shallowRef, watch, watchEffect } from 'vue'\nimport { clamp, debounce, IN_BROWSER, propsFactory } from '@/util'\n\n// Types\nimport type { Ref } from 'vue'\n\nconst UP = -1\nconst DOWN = 1\n\n/** Determines how large each batch of items should be */\nconst BUFFER_PX = 100\n\ntype VirtualProps = {\n itemHeight?: number | string\n height?: number | string\n}\n\nexport const makeVirtualProps = propsFactory({\n itemHeight: {\n type: [Number, String],\n default: null,\n },\n height: [Number, String],\n}, 'virtual')\n\nexport function useVirtual <T> (props: VirtualProps, items: Ref<readonly T[]>) {\n const display = useDisplay()\n\n const itemHeight = shallowRef(0)\n watchEffect(() => {\n itemHeight.value = parseFloat(props.itemHeight || 0)\n })\n\n const first = shallowRef(0)\n const last = shallowRef(Math.ceil(\n // Assume 16px items filling the entire screen height if\n // not provided. This is probably incorrect but it minimises\n // the chance of ending up with empty space at the bottom.\n // The default value is set here to avoid poisoning getSize()\n (parseInt(props.height!) || display.height.value) / (itemHeight.value || 16)\n ) || 1)\n const paddingTop = shallowRef(0)\n const paddingBottom = shallowRef(0)\n\n /** The scrollable element */\n const containerRef = ref<HTMLElement>()\n /** An element marking the top of the scrollable area,\n * used to add an offset if there's padding or other elements above the virtual list */\n const markerRef = ref<HTMLElement>()\n /** markerRef's offsetTop, lazily evaluated */\n let markerOffset = 0\n\n const { resizeRef, contentRect } = useResizeObserver()\n watchEffect(() => {\n resizeRef.value = containerRef.value\n })\n const viewportHeight = computed(() => {\n return containerRef.value === document.documentElement\n ? display.height.value\n : contentRect.value?.height || parseInt(props.height!) || 0\n })\n /** All static elements have been rendered and we have an assumed item height */\n const hasInitialRender = computed(() => {\n return !!(containerRef.value && markerRef.value && viewportHeight.value && itemHeight.value)\n })\n\n let sizes = Array.from<number | null>({ length: items.value.length })\n let offsets = Array.from<number>({ length: items.value.length })\n const updateTime = shallowRef(0)\n let targetScrollIndex = -1\n\n function getSize (index: number) {\n return sizes[index] || itemHeight.value\n }\n\n const updateOffsets = debounce(() =
|