@pgcorp/ui-kit 0.10.0 → 0.10.2

package/src/components/shared/data-display/SVirtualList.vue

@@ -1,662 +0,0 @@
-<template>
-  <div
-    v-bind="ownedAttrs.bindings()"
-    ref="container"
-    class="s-virtual-list"
-    :style="containerStyle"
-    :data-item-size="itemSize"
-    :data-viewport-height="height ?? undefined"
-    :role="validatedSemanticRole"
-    :aria-label="accessibleLabel"
-    :aria-live="validatedSemanticRole === 'log' ? validatedLive : undefined"
-    :aria-busy="validatedSemanticRole === 'log' ? validatedBusy : undefined"
-    :aria-relevant="validatedSemanticRole === 'log' ? 'additions text' : undefined"
-    tabindex="0"
-    @scroll.passive="updateViewport"
-    @wheel.passive="handleWheel"
-    @keydown="handleKeydown"
-    @pointerdown="handlePointerDown"
-    @pointerup="handlePointerUp"
-  >
-    <div class="s-virtual-list__spacer" :style="spacerStyle" aria-hidden="true" />
-    <div
-      v-for="entry in visibleEntries"
-      :key="entry.key"
-      :ref="renderedItemRef(entry.key)"
-      class="s-virtual-list__item"
-      :style="itemStyle(entry.index)"
-      :data-virtual-index="entry.index"
-      :role="validatedSemanticRole === 'list' ? 'listitem' : 'article'"
-      :aria-label="resolveItemLabel(entry.item, entry.index)"
-      :aria-posinset="entry.index + 1"
-      :aria-setsize="items.length"
-      tabindex="-1"
-    >
-      <slot
-        :item="entry.item"
-        :index="entry.index"
-        :position="entry.index + 1"
-        :set-size="items.length"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import type {
-  SVirtualListItemKey,
-  SVirtualListLiveMode,
-  SVirtualListSemanticRole,
-  SVirtualListViewportState,
-} from './SVirtualList'
-
-/** Публичный контракт virtual list принадлежит source-SFC runtime. / The public virtual-list contract is owned by the source-SFC runtime. */
-export interface SVirtualListProps<Item = unknown> {
-  items: readonly Item[]
-  /** Оценочная высота строки до фактического измерения. / Estimated row height before measurement. */
-  itemSize: number
-  overscan?: number
-  height?: number | null
-  /** Устойчивый доменный ключ; индекс не является fallback. / Stable domain key; the index is not a fallback. */
-  itemKey: (item: Item) => SVirtualListItemKey
-  itemLabel: (item: Item, index: number) => string
-  accessibleLabel: string
-  externalScrollTarget?: HTMLElement | null
-  /** Controlled follow-tail intent. Use v-model:followTail when user detachment must persist in the parent. */
-  followTail?: boolean
-  nearStartThreshold?: number
-  endThreshold?: number
-  semanticRole?: SVirtualListSemanticRole
-  live?: SVirtualListLiveMode
-  busy?: boolean
-}
-</script>
-
-<script setup lang="ts" generic="T">
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  type VNodeRef,
-  watch,
-} from 'vue'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
-import {
-  validateBoolean,
-  validateBoundedNumber,
-  validateExactString,
-} from '../../../internal/runtimeContract'
-import type {
-  SVirtualListAlignment,
-  SVirtualListAnchor,
-  SVirtualListViewportSnapshot,
-  SVirtualListVisibleRange,
-} from './SVirtualList'
-defineOptions({ inheritAttrs: false })
-
-type StyleObject = Record<string, string>
-type ScrollIntent = 'up' | 'down' | 'unknown' | null
-
-const props = withDefaults(defineProps<SVirtualListProps<T>>(), {
-  overscan: 8,
-  height: null,
-  externalScrollTarget: null,
-  followTail: false,
-  nearStartThreshold: 80,
-  endThreshold: 24,
-  semanticRole: 'list',
-  live: 'off',
-  busy: false,
-})
-
-const emit = defineEmits<{
-  (event: 'update:followTail', value: boolean): void
-  (event: 'viewport-change', state: SVirtualListViewportState): void
-  (event: 'near-start', state: SVirtualListViewportState): void
-}>()
-
-defineSlots<{
-  default(props: { item: T; index: number; position: number; setSize: number }): unknown
-}>()
-
-const container = ref<HTMLElement | null>(null)
-const ownedAttrs = useOwnedAttrs({ component: 'SVirtualList', owner: 'virtual list viewport' })
-useInteractiveLeafRegistration({ owner: 'SVirtualList' })
-const scrollTop = ref(0)
-const viewportHeight = ref(0)
-const measurements = ref(new Map<SVirtualListItemKey, number>())
-const renderedItemsByKey = new Map<SVirtualListItemKey, HTMLElement>()
-const renderedItemKeysByElement = new Map<HTMLElement, SVirtualListItemKey>()
-const renderedItemRefs = new Map<SVirtualListItemKey, VNodeRef>()
-let resizeObserver: ResizeObserver | null = null
-let boundExternalTarget: HTMLElement | null = null
-let scrollIntent: ScrollIntent = null
-let pointerOwnsScrollbar = false
-let lastNearStart = false
-let lastPublishedState = ''
-const followTailIntent = ref(props.followTail)
-
-const validatedSemanticRole = computed<SVirtualListSemanticRole>(() => validateExactString(
-  'SVirtualList',
-  'semanticRole',
-  props.semanticRole,
-  ['list', 'log'] as const,
-))
-const validatedLive = computed<SVirtualListLiveMode>(() => validateExactString(
-  'SVirtualList',
-  'live',
-  props.live,
-  ['off', 'polite', 'assertive'] as const,
-))
-const validatedBusy = computed(() => validateBoolean('SVirtualList', 'busy', props.busy))
-const validatedNearStartThreshold = computed(() => validateBoundedNumber(
-  'SVirtualList',
-  'nearStartThreshold',
-  props.nearStartThreshold,
-  { minimum: 0, maximum: 10_000 },
-))
-const validatedEndThreshold = computed(() => validateBoundedNumber(
-  'SVirtualList',
-  'endThreshold',
-  props.endThreshold,
-  { minimum: 0, maximum: 10_000 },
-))
-
-const isExternal = computed(() => props.externalScrollTarget !== null)
-
-function describeItemKey(key: SVirtualListItemKey): string {
-  return `${typeof key}:${JSON.stringify(key)}`
-}
-
-function validateItemKey(candidate: unknown, index: number): asserts candidate is SVirtualListItemKey {
-  if (typeof candidate === 'string') {
-    if (candidate.trim().length === 0) {
-      throw new TypeError(`SVirtualList itemKey returned an empty string for item at index ${index}`)
-    }
-    return
-  }
-  if (typeof candidate === 'number') {
-    if (!Number.isFinite(candidate)) {
-      throw new TypeError(`SVirtualList itemKey returned a non-finite number for item at index ${index}`)
-    }
-    return
-  }
-  throw new TypeError(`SVirtualList itemKey returned unsupported ${typeof candidate} key for item at index ${index}`)
-}
-
-function resolveItemLabel(item: T, index: number): string {
-  return props.itemLabel(item, index)
-}
-
-const itemKeys = computed(() => {
-  const seen = new Set<SVirtualListItemKey>()
-  return props.items.map((item, index) => {
-    const key: unknown = props.itemKey(item)
-    validateItemKey(key, index)
-    if (seen.has(key)) {
-      throw new TypeError(`SVirtualList itemKey returned duplicate key ${describeItemKey(key)} at index ${index}`)
-    }
-    seen.add(key)
-    return key
-  })
-})
-const itemKeyIndexes = computed(() => new Map(itemKeys.value.map((key, index) => [key, index])))
-const itemSizes = computed(() => itemKeys.value.map((key) => measurements.value.get(key) ?? props.itemSize))
-const offsets = computed(() => {
-  const values = new Array<number>(props.items.length + 1)
-  values[0] = 0
-  for (let index = 0; index < props.items.length; index += 1) {
-    values[index + 1] = (values[index] ?? 0) + (itemSizes.value[index] ?? props.itemSize)
-  }
-  return values
-})
-const totalHeight = computed(() => offsets.value[props.items.length] ?? 0)
-
-const containerStyle = computed<StyleObject>(() => {
-  if (isExternal.value) {
-    const externalStyle: StyleObject = {
-      position: 'relative',
-      overflow: 'visible',
-      height: `${totalHeight.value}px`,
-    }
-    return externalStyle
-  }
-  const internalStyle: StyleObject = {
-    position: 'relative',
-    overflowY: 'auto',
-    height: typeof props.height === 'number' && props.height > 0 ? `${props.height}px` : '100%',
-  }
-  return internalStyle
-})
-const spacerStyle = computed<StyleObject>(() => ({ height: `${totalHeight.value}px` }))
-
-function indexAtOffset(offset: number): number {
-  let low = 0
-  let high = props.items.length
-  while (low < high) {
-    const middle = Math.floor((low + high) / 2)
-    if ((offsets.value[middle + 1] ?? totalHeight.value) <= offset) low = middle + 1
-    else high = middle
-  }
-  return Math.min(low, Math.max(props.items.length - 1, 0))
-}
-
-const firstVisibleIndex = computed(() => props.items.length === 0 ? 0 : indexAtOffset(scrollTop.value))
-const lastVisibleIndex = computed(() => props.items.length === 0
-  ? -1
-  : indexAtOffset(scrollTop.value + viewportHeight.value))
-const startIndex = computed(() => Math.max(0, firstVisibleIndex.value - props.overscan))
-const endIndex = computed(() => Math.min(props.items.length, lastVisibleIndex.value + props.overscan + 1))
-const visibleEntries = computed(() => props.items.slice(startIndex.value, endIndex.value).map((item, localIndex) => {
-  const index = startIndex.value + localIndex
-  return { item, index, key: itemKeys.value[index] as SVirtualListItemKey }
-}))
-
-function itemStyle(index: number): StyleObject {
-  return {
-    position: 'absolute',
-    top: `${offsets.value[index] ?? 0}px`,
-    left: '0',
-    right: '0',
-    minHeight: `${props.itemSize}px`,
-  }
-}
-
-function externalOffset(): number {
-  const target = props.externalScrollTarget
-  const root = container.value
-  if (!target || !root) return 0
-  return root.getBoundingClientRect().top - target.getBoundingClientRect().top + target.scrollTop
-}
-
-function scrollOwner(): HTMLElement | null {
-  return props.externalScrollTarget ?? container.value
-}
-
-function maximumScrollOffset(): number {
-  return Math.max(0, totalHeight.value - viewportHeight.value)
-}
-
-function currentAnchor(keys: readonly SVirtualListItemKey[] = itemKeys.value): SVirtualListAnchor | null {
-  if (keys.length === 0) return null
-  const sizes = keys.map((key) => measurements.value.get(key) ?? props.itemSize)
-  let accumulated = 0
-  let index = 0
-  const viewportOffset = Math.max(0, scrollTop.value)
-  while (index < sizes.length - 1 && accumulated + (sizes[index] ?? props.itemSize) <= viewportOffset) {
-    accumulated += sizes[index] ?? props.itemSize
-    index += 1
-  }
-  const key = keys[index]
-  if (key === undefined) return null
-  return { key, offset: viewportOffset - accumulated }
-}
-
-function visibleRange(): SVirtualListVisibleRange {
-  if (props.items.length === 0) {
-    return { firstIndex: -1, lastIndex: -1, firstKey: null, lastKey: null }
-  }
-  const firstIndex = firstVisibleIndex.value
-  const lastIndex = Math.max(firstIndex, lastVisibleIndex.value)
-  return {
-    firstIndex,
-    lastIndex,
-    firstKey: itemKeys.value[firstIndex] ?? null,
-    lastKey: itemKeys.value[lastIndex] ?? null,
-  }
-}
-
-function getViewportState(): SVirtualListViewportState {
-  const nearStart = scrollTop.value <= validatedNearStartThreshold.value
-  const atEnd = maximumScrollOffset() - scrollTop.value <= validatedEndThreshold.value
-  return {
-    anchor: currentAnchor(),
-    visibleRange: visibleRange(),
-    nearStart,
-    atEnd,
-    pinnedToEnd: followTailIntent.value,
-  }
-}
-
-function publishViewportState(): void {
-  const state = getViewportState()
-  const signature = JSON.stringify(state)
-  if (signature !== lastPublishedState) {
-    lastPublishedState = signature
-    emit('viewport-change', state)
-  }
-  if (state.nearStart && !lastNearStart) emit('near-start', state)
-  lastNearStart = state.nearStart
-}
-
-function setFollowTail(value: boolean): void {
-  const validated = validateBoolean('SVirtualList', 'setFollowTail value', value)
-  if (followTailIntent.value === validated) return
-  followTailIntent.value = validated
-  emit('update:followTail', validated)
-  publishViewportState()
-}
-
-function updateViewport(): void {
-  const target = scrollOwner()
-  if (!target) return
-  viewportHeight.value = target.clientHeight
-  scrollTop.value = Math.max(0, target.scrollTop - (isExternal.value ? externalOffset() : 0))
-  if (scrollIntent === 'up') setFollowTail(false)
-  if (scrollIntent === 'down' && maximumScrollOffset() - scrollTop.value <= validatedEndThreshold.value) {
-    setFollowTail(true)
-  }
-  scrollIntent = null
-  publishViewportState()
-}
-
-function handleWheel(event: WheelEvent): void {
-  if (event.deltaY < 0) {
-    scrollIntent = 'up'
-    setFollowTail(false)
-  } else if (event.deltaY > 0) {
-    scrollIntent = 'down'
-  }
-}
-
-function handleKeydown(event: KeyboardEvent): void {
-  if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) {
-    scrollIntent = 'up'
-    setFollowTail(false)
-  } else if (['ArrowDown', 'PageDown', 'End'].includes(event.key)) {
-    scrollIntent = 'down'
-  }
-}
-
-function eventOwnsScrollbar(event: PointerEvent): boolean {
-  const target = scrollOwner()
-  if (!target || event.currentTarget !== target) return false
-  return event.offsetX >= target.clientWidth || event.offsetY >= target.clientHeight
-}
-
-function handlePointerDown(event: PointerEvent): void {
-  pointerOwnsScrollbar = eventOwnsScrollbar(event)
-  if (!pointerOwnsScrollbar) return
-  scrollIntent = 'unknown'
-  setFollowTail(false)
-}
-
-function handlePointerUp(): void {
-  if (!pointerOwnsScrollbar) return
-  pointerOwnsScrollbar = false
-  if (maximumScrollOffset() - scrollTop.value <= validatedEndThreshold.value) setFollowTail(true)
-  scrollIntent = null
-}
-
-function restoreAnchor(anchor: SVirtualListAnchor, failWhenMissing: boolean): boolean {
-  const index = itemKeyIndexes.value.get(anchor.key)
-  if (index === undefined) {
-    if (failWhenMissing) {
-      throw new RangeError(`SVirtualList cannot restore missing anchor key ${describeItemKey(anchor.key)}`)
-    }
-    return false
-  }
-  const target = scrollOwner()
-  if (!target) return false
-  const rowSize = itemSizes.value[index] ?? props.itemSize
-  if (!Number.isFinite(anchor.offset) || anchor.offset < 0) {
-    throw new RangeError(
-      `SVirtualList anchor offset ${anchor.offset} is outside row ${describeItemKey(anchor.key)} size ${rowSize}`,
-    )
-  }
-  if (failWhenMissing && anchor.offset >= rowSize) {
-    throw new RangeError(
-      `SVirtualList anchor offset ${anchor.offset} is outside row ${describeItemKey(anchor.key)} size ${rowSize}`,
-    )
-  }
-  const resolvedOffset = Math.min(anchor.offset, Math.max(0, rowSize - 1))
-  const nextOffset = (offsets.value[index] ?? 0) + resolvedOffset
-  target.scrollTop = Math.max(0, nextOffset + (isExternal.value ? externalOffset() : 0))
-  updateViewport()
-  return true
-}
-
-function unregisterRenderedItem(key: SVirtualListItemKey): void {
-  const element = renderedItemsByKey.get(key)
-  if (!element) return
-  const registeredKey = renderedItemKeysByElement.get(element)
-  if (registeredKey !== key) {
-    throw new Error(
-      `SVirtualList rendered item registry mismatch for key ${describeItemKey(key)}: element belongs to ${registeredKey === undefined ? 'no key' : describeItemKey(registeredKey)}`,
-    )
-  }
-  resizeObserver?.unobserve(element)
-  renderedItemsByKey.delete(key)
-  renderedItemKeysByElement.delete(element)
-}
-
-function registerRenderedItem(key: SVirtualListItemKey, element: HTMLElement): void {
-  const index = itemKeyIndexes.value.get(key)
-  if (index === undefined) {
-    throw new Error(`SVirtualList received a rendered item ref for stale key ${describeItemKey(key)}`)
-  }
-  const existingElement = renderedItemsByKey.get(key)
-  if (existingElement && existingElement !== element) {
-    throw new Error(`SVirtualList rendered item key collision for ${describeItemKey(key)} at index ${index}`)
-  }
-  const existingKey = renderedItemKeysByElement.get(element)
-  if (existingKey !== undefined && existingKey !== key) {
-    throw new Error(
-      `SVirtualList rendered item element collision between ${describeItemKey(existingKey)} and ${describeItemKey(key)}`,
-    )
-  }
-  if (existingElement === element) return
-  renderedItemsByKey.set(key, element)
-  renderedItemKeysByElement.set(element, key)
-  resizeObserver?.observe(element)
-}
-
-function renderedItemRef(key: SVirtualListItemKey): VNodeRef {
-  const existingRef = renderedItemRefs.get(key)
-  if (existingRef) return existingRef
-  const itemRef: VNodeRef = (target) => {
-    if (target === null) {
-      unregisterRenderedItem(key)
-      return
-    }
-    if (!(target instanceof HTMLElement)) {
-      throw new TypeError(`SVirtualList rendered item ref for ${describeItemKey(key)} must resolve to an HTMLElement`)
-    }
-    registerRenderedItem(key, target)
-  }
-  renderedItemRefs.set(key, itemRef)
-  return itemRef
-}
-
-function measureEntries(entries: readonly ResizeObserverEntry[]): void {
-  let viewportChanged = false
-  const anchor = followTailIntent.value ? null : currentAnchor()
-  const next = new Map(measurements.value)
-  let measurementsChanged = false
-  for (const entry of entries) {
-    if (entry.target === container.value || entry.target === props.externalScrollTarget) {
-      viewportChanged = true
-      continue
-    }
-    if (!(entry.target instanceof HTMLElement)) {
-      throw new TypeError('SVirtualList received a ResizeObserver entry for a non-HTMLElement target')
-    }
-    const key = renderedItemKeysByElement.get(entry.target)
-    if (key === undefined || renderedItemsByKey.get(key) !== entry.target) {
-      throw new Error('SVirtualList received a ResizeObserver entry for an unregistered rendered item')
-    }
-    if (itemKeyIndexes.value.get(key) === undefined) {
-      throw new Error(`SVirtualList received a ResizeObserver entry for stale key ${describeItemKey(key)}`)
-    }
-    const size = entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height
-    if (!Number.isFinite(size) || size <= 0 || next.get(key) === size) continue
-    next.set(key, size)
-    measurementsChanged = true
-  }
-  if (measurementsChanged) measurements.value = next
-  if (followTailIntent.value && measurementsChanged) scrollToEnd({ follow: true })
-  else if (anchor && measurementsChanged) restoreAnchor(anchor, false)
-  if (viewportChanged || measurementsChanged) updateViewport()
-}
-
-function scrollToIndex(index: number, alignment: SVirtualListAlignment = 'auto'): void {
-  if (!Number.isInteger(index) || index < 0 || index >= props.items.length) {
-    throw new RangeError(`SVirtualList index ${index} is outside 0..${Math.max(props.items.length - 1, 0)}`)
-  }
-  const target = props.externalScrollTarget ?? container.value
-  if (!target) return
-  const start = offsets.value[index] ?? 0
-  const end = offsets.value[index + 1] ?? start + props.itemSize
-  const viewportStart = scrollTop.value
-  const viewportEnd = viewportStart + viewportHeight.value
-  let nextOffset = start
-  if (alignment === 'end') nextOffset = end - viewportHeight.value
-  if (alignment === 'center') nextOffset = start - (viewportHeight.value - (end - start)) / 2
-  if (alignment === 'auto' && start >= viewportStart && end <= viewportEnd) return
-  if (alignment === 'auto' && end > viewportEnd) nextOffset = end - viewportHeight.value
-  target.scrollTop = Math.max(0, nextOffset + (isExternal.value ? externalOffset() : 0))
-  updateViewport()
-}
-
-function scrollToKey(key: SVirtualListItemKey, alignment: SVirtualListAlignment = 'auto'): void {
-  const index = itemKeyIndexes.value.get(key)
-  if (index === undefined) {
-    throw new RangeError(`SVirtualList cannot scroll to missing key ${describeItemKey(key)}`)
-  }
-  scrollToIndex(index, alignment)
-}
-
-function scrollToEnd(options: { follow?: boolean } = {}): void {
-  const target = scrollOwner()
-  if (!target) return
-  if (options.follow ?? true) setFollowTail(true)
-  target.scrollTop = maximumScrollOffset() + (isExternal.value ? externalOffset() : 0)
-  updateViewport()
-}
-
-function captureViewport(): SVirtualListViewportSnapshot {
-  return {
-    anchor: currentAnchor(),
-    followTail: followTailIntent.value,
-  }
-}
-
-async function restoreViewport(snapshot: SVirtualListViewportSnapshot): Promise<void> {
-  if (snapshot === null || typeof snapshot !== 'object' || Array.isArray(snapshot)) {
-    throw new TypeError('SVirtualList restoreViewport snapshot must be an object')
-  }
-  const followTail = validateBoolean('SVirtualList', 'restoreViewport.followTail', snapshot.followTail)
-  await nextTick()
-  if (followTail) {
-    scrollToEnd({ follow: true })
-    return
-  }
-  if (snapshot.anchor === null) {
-    setFollowTail(false)
-    return
-  }
-  setFollowTail(false)
-  restoreAnchor(snapshot.anchor, true)
-}
-
-async function focusItem(index: number, alignment: SVirtualListAlignment = 'auto'): Promise<void> {
-  const key = itemKeys.value[index]
-  scrollToIndex(index, alignment)
-  await nextTick()
-  if (key === undefined || itemKeyIndexes.value.get(key) === undefined) {
-    throw new Error(`SVirtualList focusItem key ${key === undefined ? `at index ${index}` : describeItemKey(key)} became stale before focus`)
-  }
-  const currentIndex = itemKeyIndexes.value.get(key)
-  if (currentIndex !== index) {
-    throw new Error(
-      `SVirtualList focusItem key ${describeItemKey(key)} moved from index ${index} to ${currentIndex} before focus`,
-    )
-  }
-  const element = renderedItemsByKey.get(key)
-  if (!element) {
-    throw new Error(`SVirtualList focusItem has no rendered item registration for key ${describeItemKey(key)} at index ${index}`)
-  }
-  if (renderedItemKeysByElement.get(element) !== key) {
-    throw new Error(`SVirtualList focusItem found a stale rendered item registration for key ${describeItemKey(key)}`)
-  }
-  element.focus()
-}
-
-defineExpose({
-  captureViewport,
-  focusItem,
-  getViewportState,
-  restoreViewport,
-  scrollToEnd,
-  scrollToIndex,
-  scrollToKey,
-  setFollowTail,
-})
-
-function bindExternalTarget(target: HTMLElement | null): void {
-  boundExternalTarget?.removeEventListener('scroll', updateViewport)
-  boundExternalTarget?.removeEventListener('wheel', handleWheel)
-  boundExternalTarget?.removeEventListener('keydown', handleKeydown)
-  boundExternalTarget?.removeEventListener('pointerdown', handlePointerDown)
-  boundExternalTarget?.removeEventListener('pointerup', handlePointerUp)
-  if (boundExternalTarget) resizeObserver?.unobserve(boundExternalTarget)
-  boundExternalTarget = target
-  boundExternalTarget?.addEventListener('scroll', updateViewport, { passive: true })
-  boundExternalTarget?.addEventListener('wheel', handleWheel, { passive: true })
-  boundExternalTarget?.addEventListener('keydown', handleKeydown)
-  boundExternalTarget?.addEventListener('pointerdown', handlePointerDown)
-  boundExternalTarget?.addEventListener('pointerup', handlePointerUp)
-  if (boundExternalTarget) resizeObserver?.observe(boundExternalTarget)
-  updateViewport()
-}
-
-onMounted(() => {
-  if (typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver((entries) => measureEntries(entries))
-    if (container.value) resizeObserver.observe(container.value)
-    for (const element of renderedItemsByKey.values()) resizeObserver.observe(element)
-  }
-  bindExternalTarget(props.externalScrollTarget)
-  updateViewport()
-  if (followTailIntent.value) void nextTick(() => scrollToEnd({ follow: true }))
-})
-
-watch(() => props.externalScrollTarget, bindExternalTarget)
-watch(() => props.followTail, (value) => {
-  followTailIntent.value = validateBoolean('SVirtualList', 'followTail', value)
-  if (followTailIntent.value) void nextTick(() => scrollToEnd({ follow: false }))
-  else publishViewportState()
-})
-watch(() => itemKeys.value, async (keys, previousKeys) => {
-  const anchor = followTailIntent.value ? null : currentAnchor(previousKeys)
-  const activeKeys = new Set(keys)
-  measurements.value = new Map([...measurements.value].filter(([key]) => activeKeys.has(key)))
-  for (const key of renderedItemsByKey.keys()) {
-    if (!activeKeys.has(key)) unregisterRenderedItem(key)
-  }
-  for (const key of renderedItemRefs.keys()) {
-    if (!activeKeys.has(key)) renderedItemRefs.delete(key)
-  }
-  await nextTick()
-  if (followTailIntent.value) scrollToEnd({ follow: true })
-  else if (anchor) restoreAnchor(anchor, false)
-  updateViewport()
-})
-
-onBeforeUnmount(() => {
-  boundExternalTarget?.removeEventListener('scroll', updateViewport)
-  boundExternalTarget?.removeEventListener('wheel', handleWheel)
-  boundExternalTarget?.removeEventListener('keydown', handleKeydown)
-  boundExternalTarget?.removeEventListener('pointerdown', handlePointerDown)
-  boundExternalTarget?.removeEventListener('pointerup', handlePointerUp)
-  resizeObserver?.disconnect()
-  renderedItemsByKey.clear()
-  renderedItemKeysByElement.clear()
-  renderedItemRefs.clear()
-})
-</script>
-
-<style lang="postcss" src="./SVirtualList.css" scoped></style>