@v-c/virtual-list 1.0.0 → 1.0.1

package/dist/List.cjs

@@ -69,9 +69,12 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
 	setup(props, { expose, attrs, slots }) {
 		const itemHeight = (0, vue.computed)(() => props.itemHeight);
+		const itemKey = (0, vue.toRef)(props, "itemKey");
 		const getKey = (item) => {
-			if (typeof props.itemKey === "function") return props.itemKey(item);
-			return item?.[props.itemKey];
+			item = (0, vue.toRaw)(item);
+			const _itemKey = itemKey.value;
+			if (typeof _itemKey === "function") return _itemKey(item);
+			return item?.[_itemKey];
 		};
 		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = require_useHeights.default(getKey, void 0, void 0);
 		const mergedData = (0, vue.computed)(() => props.data || EMPTY_DATA);
@@ -121,6 +124,7 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				fillerOffset.value = void 0;
 				return;
 			}
+			const { itemHeight: itemHeight$1, height } = props;
 			if (!inVirtual.value) {
 				scrollHeight.value = fillerInnerRef.value?.offsetHeight || 0;
 				start.value = 0;
@@ -133,23 +137,23 @@ var List_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			let startOffset;
 			let endIndex;
 			const dataLen = mergedData.value.length;
-			const data = mergedData.value;
+			const data = (0, vue.toRaw)(mergedData.value);
 			for (let i = 0; i < dataLen; i += 1) {
 				const item = data[i];
 				const key = getKey(item);
 				const cacheHeight = heights.get(key);
-				const currentItemBottom = itemTop + (cacheHeight === void 0 ? props.itemHeight : cacheHeight);
+				const currentItemBottom = itemTop + (cacheHeight === void 0 ? itemHeight$1 : cacheHeight);
 				if (currentItemBottom >= offsetTop.value && startIndex === void 0) {
 					startIndex = i;
 					startOffset = itemTop;
 				}
-				if (currentItemBottom > offsetTop.value + props.height && endIndex === void 0) endIndex = i;
+				if (currentItemBottom > offsetTop.value + height && endIndex === void 0) endIndex = i;
 				itemTop = currentItemBottom;
 			}
 			if (startIndex === void 0) {
 				startIndex = 0;
 				startOffset = 0;
-				endIndex = Math.ceil(props.height / props.itemHeight);
+				endIndex = Math.ceil(height / itemHeight$1);
 			}
 			if (endIndex === void 0) endIndex = mergedData.value.length - 1;
 			endIndex = Math.min(endIndex + 1, mergedData.value.length - 1);

package/dist/List.js

@@ -9,7 +9,7 @@ import useScrollDrag from "./hooks/useScrollDrag.js";
 import useScrollTo from "./hooks/useScrollTo.js";
 import ScrollBar_default from "./ScrollBar.js";
 import { getSpinSize } from "./utils/scrollbarUtil.js";
-import { computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, watch } from "vue";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, ref, shallowRef, toRaw, toRef, watch } from "vue";
 import ResizeObserver from "@v-c/resize-observer";
 import { pureAttrs } from "@v-c/util/dist/props-util";
 function _isSlot(s) {
@@ -66,9 +66,12 @@ var List_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	setup(props, { expose, attrs, slots }) {
 		const itemHeight = computed(() => props.itemHeight);
+		const itemKey = toRef(props, "itemKey");
 		const getKey = (item) => {
-			if (typeof props.itemKey === "function") return props.itemKey(item);
-			return item?.[props.itemKey];
+			item = toRaw(item);
+			const _itemKey = itemKey.value;
+			if (typeof _itemKey === "function") return _itemKey(item);
+			return item?.[_itemKey];
 		};
 		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = useHeights(getKey, void 0, void 0);
 		const mergedData = computed(() => props.data || EMPTY_DATA);
@@ -118,6 +121,7 @@ var List_default = /* @__PURE__ */ defineComponent({
 				fillerOffset.value = void 0;
 				return;
 			}
+			const { itemHeight: itemHeight$1, height } = props;
 			if (!inVirtual.value) {
 				scrollHeight.value = fillerInnerRef.value?.offsetHeight || 0;
 				start.value = 0;
@@ -130,23 +134,23 @@ var List_default = /* @__PURE__ */ defineComponent({
 			let startOffset;
 			let endIndex;
 			const dataLen = mergedData.value.length;
-			const data = mergedData.value;
+			const data = toRaw(mergedData.value);
 			for (let i = 0; i < dataLen; i += 1) {
 				const item = data[i];
 				const key = getKey(item);
 				const cacheHeight = heights.get(key);
-				const currentItemBottom = itemTop + (cacheHeight === void 0 ? props.itemHeight : cacheHeight);
+				const currentItemBottom = itemTop + (cacheHeight === void 0 ? itemHeight$1 : cacheHeight);
 				if (currentItemBottom >= offsetTop.value && startIndex === void 0) {
 					startIndex = i;
 					startOffset = itemTop;
 				}
-				if (currentItemBottom > offsetTop.value + props.height && endIndex === void 0) endIndex = i;
+				if (currentItemBottom > offsetTop.value + height && endIndex === void 0) endIndex = i;
 				itemTop = currentItemBottom;
 			}
 			if (startIndex === void 0) {
 				startIndex = 0;
 				startOffset = 0;
-				endIndex = Math.ceil(props.height / props.itemHeight);
+				endIndex = Math.ceil(height / itemHeight$1);
 			}
 			if (endIndex === void 0) endIndex = mergedData.value.length - 1;
 			endIndex = Math.min(endIndex + 1, mergedData.value.length - 1);

package/dist/hooks/useHeights.cjs

@@ -9,7 +9,7 @@ function parseNumber(value) {
 function useHeights(getKey, onItemAdd, onItemRemove) {
 	const updatedMark = (0, vue.ref)(0);
 	const instanceRef = (0, vue.ref)(/* @__PURE__ */ new Map());
-	const heightsRef = (0, vue.reactive)(new require_CacheMap.default());
+	const heightsRef = new require_CacheMap.default();
 	const promiseIdRef = (0, vue.ref)(0);
 	function cancelRaf() {
 		promiseIdRef.value += 1;

package/dist/hooks/useHeights.js

@@ -1,5 +1,5 @@
 import CacheMap_default from "../utils/CacheMap.js";
-import { onUnmounted, reactive, ref } from "vue";
+import { onUnmounted, ref } from "vue";
 function parseNumber(value) {
 	const num = parseFloat(value);
 	return isNaN(num) ? 0 : num;
@@ -7,7 +7,7 @@ function parseNumber(value) {
 function useHeights(getKey, onItemAdd, onItemRemove) {
 	const updatedMark = ref(0);
 	const instanceRef = ref(/* @__PURE__ */ new Map());
-	const heightsRef = reactive(new CacheMap_default());
+	const heightsRef = new CacheMap_default();
 	const promiseIdRef = ref(0);
 	function cancelRaf() {
 		promiseIdRef.value += 1;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/virtual-list",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Vue Virtual List Component",
   "author": "",
   "license": "MIT",
@@ -20,6 +20,10 @@
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "package.json"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -28,7 +32,7 @@
   },
   "dependencies": {
     "@v-c/resize-observer": "^1.0.0",
-    "@v-c/util": "^1.0.1"
+    "@v-c/util": "^1.0.2"
   },
   "scripts": {
     "build": "vite build",

package/bump.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'bumpp'
-
-export default defineConfig({
-  commit: 'chore(release): @v-c/virtual-list %s',
-  tag: '@v-c/virtual-list@%s',
-})

package/docs/animate.less

@@ -1,31 +0,0 @@
-.motion {
-  transition: all 0.3s;
-}
-
-.item {
-  display: inline-block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0 16px;
-  overflow: hidden;
-  line-height: 31px;
-  position: relative;
-
-  &:hover {
-    background: rgba(255, 0, 0, 0.1);
-  }
-
-  &::after {
-    content: '';
-    border-bottom: 1px solid gray;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
-  button {
-    vertical-align: text-top;
-    margin-right: 8px;
-  }
-}

package/docs/animate.vue

@@ -1,159 +0,0 @@
-<script setup lang="ts">
-import type { ListRef } from '../src'
-import { ref } from 'vue'
-import VirtualList from '../src'
-import './animate.less'
-
-interface Item {
-  id: string
-  uuid: number
-}
-
-let uuid = 0
-function genItem(): Item {
-  const item = {
-    id: `key_${uuid}`,
-    uuid,
-  }
-  uuid += 1
-  return item
-}
-
-const originData: Item[] = []
-for (let i = 0; i < 1000; i += 1) {
-  originData.push(genItem())
-}
-
-const data = ref([...originData])
-const closeMap = ref<Record<string, boolean>>({})
-const animating = ref(false)
-const insertIndex = ref<number>()
-
-const listRef = ref<ListRef>()
-
-function onClose(id: string) {
-  closeMap.value = {
-    ...closeMap.value,
-    [id]: true,
-  }
-}
-
-function onLeave(id: string) {
-  data.value = data.value.filter(item => item.id !== id)
-}
-
-function onAppear(...args: any[]) {
-  console.log('Appear:', args)
-  animating.value = false
-}
-
-function lockForAnimation() {
-  animating.value = true
-}
-
-function onInsertBefore(id: string) {
-  const index = data.value.findIndex(item => item.id === id)
-  const newData = [...data.value.slice(0, index), genItem(), ...data.value.slice(index)]
-  insertIndex.value = index
-  data.value = newData
-  lockForAnimation()
-}
-
-function onInsertAfter(id: string) {
-  const index = data.value.findIndex(item => item.id === id) + 1
-  const newData = [...data.value.slice(0, index), genItem(), ...data.value.slice(index)]
-  insertIndex.value = index
-  data.value = newData
-  lockForAnimation()
-}
-
-function getCurrentHeight(el: Element) {
-  const node = el as HTMLElement
-  node.style.height = `${node.offsetHeight}px`
-  node.style.opacity = '1'
-}
-
-function getMaxHeight(el: Element) {
-  const node = el as HTMLElement
-  node.style.height = `${node.scrollHeight}px`
-  node.style.opacity = '1'
-}
-
-function getCollapsedHeight(el: Element) {
-  const node = el as HTMLElement
-  node.style.height = '0'
-  node.style.opacity = '0'
-}
-
-function resetHeight(el: Element) {
-  const node = el as HTMLElement
-  node.style.height = ''
-  node.style.opacity = ''
-  onAppear()
-}
-</script>
-
-<template>
-  <div>
-    <h2>Animate</h2>
-    <p>Current: {{ data.length }} records</p>
-
-    <VirtualList
-      ref="listRef"
-      :data="data"
-      data-id="list"
-      :height="200"
-      :item-height="20"
-      item-key="id"
-      :style="{
-        border: '1px solid red',
-        boxSizing: 'border-box',
-      }"
-    >
-      <template #default="{ item, index }">
-        <Transition
-          name="motion"
-          :appear="animating && insertIndex === index"
-          @before-enter="getCollapsedHeight"
-          @enter="getMaxHeight"
-          @after-enter="resetHeight"
-          @before-leave="getCurrentHeight"
-          @leave="getCollapsedHeight"
-          @after-leave="() => onLeave(item.id)"
-        >
-          <div
-            v-if="!(closeMap as any)[item.id]"
-            class="item"
-            :data-id="item.id"
-          >
-            <div :style="{ height: item.uuid % 2 ? '100px' : undefined }">
-              <button type="button" @click="onClose(item.id)">
-                Close
-              </button>
-              <button type="button" @click="onInsertBefore(item.id)">
-                Insert Before
-              </button>
-              <button type="button" @click="onInsertAfter(item.id)">
-                Insert After
-              </button>
-              {{ item.id }}
-            </div>
-          </div>
-        </Transition>
-      </template>
-    </VirtualList>
-  </div>
-</template>
-
-<style scoped>
-.motion-enter-active,
-.motion-leave-active {
-  transition: all 0.3s;
-}
-
-.motion-enter-from,
-.motion-leave-to {
-  height: 0;
-  opacity: 0;
-}
-</style>

package/docs/basic.vue

@@ -1,176 +0,0 @@
-<script setup lang="ts">
-import type { ListRef } from '../src'
-import { ref } from 'vue'
-import VirtualList from '../src'
-
-interface Item {
-  id: number
-}
-
-const data: Item[] = []
-for (let i = 0; i < 1000; i += 1) {
-  data.push({ id: i })
-}
-
-const listRef = ref<ListRef>()
-
-function scrollToShowBar() {
-  listRef.value?.scrollTo(null)
-}
-
-function scrollTo100px() {
-  listRef.value?.scrollTo(500)
-}
-
-function scrollToLarge() {
-  listRef.value?.scrollTo({
-    index: 99999999,
-    align: 'top',
-  })
-}
-
-function scrollTo50Top() {
-  listRef.value?.scrollTo({
-    index: 50,
-    align: 'top',
-  })
-}
-
-function scrollTo50Bottom() {
-  listRef.value?.scrollTo({
-    index: 50,
-    align: 'bottom',
-  })
-}
-
-function scrollTo50Auto() {
-  listRef.value?.scrollTo({
-    index: 50,
-    align: 'auto',
-  })
-}
-
-function scrollTo50TopOffset() {
-  listRef.value?.scrollTo({
-    index: 50,
-    align: 'top',
-    offset: 15,
-  })
-}
-
-function scrollTo50BottomOffset() {
-  listRef.value?.scrollTo({
-    index: 50,
-    align: 'bottom',
-    offset: 15,
-  })
-}
-
-function scrollToKey50() {
-  listRef.value?.scrollTo({
-    key: 50,
-    align: 'auto',
-  })
-}
-
-function scrollToLast() {
-  listRef.value?.scrollTo({
-    index: data.length - 2,
-    align: 'top',
-  })
-}
-
-function scrollToFirst() {
-  listRef.value?.scrollTo({
-    index: 0,
-    align: 'bottom',
-  })
-}
-
-const visible = ref(true)
-
-function onScroll(e: Event) {
-  const target = e.currentTarget as HTMLElement
-  console.log('scroll:', target.scrollTop)
-}
-</script>
-
-<template>
-  <div style="height: 200vh">
-    <h2>Basic</h2>
-    <div style="margin-bottom: 16px">
-      <button type="button" style="margin: 4px" @click="scrollToShowBar">
-        Show scroll bar
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollTo100px">
-        Scroll To 100px
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollToLarge">
-        Scroll To 99999999 (top)
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollTo50Top">
-        Scroll To 50 (top)
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollTo50Bottom">
-        Scroll To 50 (bottom)
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollTo50Auto">
-        Scroll To 50 (auto)
-      </button>
-      <br>
-      <button type="button" style="margin: 4px" @click="scrollTo50TopOffset">
-        Scroll To 50 (top) + 15 offset
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollTo50BottomOffset">
-        Scroll To 50 (bottom) + 15 offset
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollToKey50">
-        Scroll To key 50 (auto)
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollToLast">
-        Scroll To Last (top)
-      </button>
-      <button type="button" style="margin: 4px" @click="scrollToFirst">
-        Scroll To First (bottom)
-      </button>
-      <button type="button" style="margin: 4px" @click="visible = !visible">
-        Toggle visible
-      </button>
-    </div>
-
-    <VirtualList
-      ref="listRef"
-      :data="data"
-      :height="200"
-      :item-height="20"
-      item-key="id"
-      :style="{
-        border: '1px solid red',
-        boxSizing: 'border-box',
-        display: visible ? '' : 'none',
-      }"
-      @scroll="onScroll"
-    >
-      <template #default="{ item }">
-        <span
-          :style="{
-            height: `${30 + (item.id % 2 ? 0 : 10)}px`,
-            lineHeight: '30px',
-            display: 'inline-block',
-            padding: '0 8px',
-          }"
-          @click="() => console.log('Click:', item.id)"
-        >
-          {{ item.id }}
-        </span>
-      </template>
-    </VirtualList>
-  </div>
-</template>
-
-<style scoped>
-button {
-  padding: 4px 8px;
-  cursor: pointer;
-}
-</style>

package/docs/height.vue

@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import VirtualList from '../src'
-
-interface Item {
-  id: number
-  height: number
-}
-
-const data: Item[] = []
-for (let i = 0; i < 100; i += 1) {
-  data.push({
-    id: i,
-    height: 30 + (i % 2 ? 70 : 0),
-  })
-}
-</script>
-
-<template>
-  <div>
-    <h2>Dynamic Height</h2>
-
-    <VirtualList
-      :data="data"
-      :height="500"
-      :item-height="30"
-      item-key="id"
-      :style="{
-        border: '1px solid red',
-        boxSizing: 'border-box',
-      }"
-    >
-      <template #default="{ item }">
-        <span
-          :style="{
-            border: '1px solid gray',
-            padding: '0 16px',
-            height: `${item.height}px`,
-            lineHeight: '30px',
-            boxSizing: 'border-box',
-            display: 'inline-block',
-          }"
-        >
-          {{ item.id }}
-        </span>
-      </template>
-    </VirtualList>
-  </div>
-</template>

package/docs/nest.vue

@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import VirtualList from '../src'
-
-interface Item {
-  id: number
-}
-
-const data: Item[] = []
-for (let i = 0; i < 100; i += 1) {
-  data.push({ id: i })
-}
-
-function onScroll(e: Event) {
-  // console.log('scroll:', (e.currentTarget as HTMLElement).scrollTop)
-}
-</script>
-
-<template>
-  <div>
-    <h2>Nested List</h2>
-    <VirtualList
-      :data="data"
-      :height="800"
-      :item-height="20"
-      item-key="id"
-      :style="{
-        border: '1px solid red',
-        boxSizing: 'border-box',
-      }"
-      @scroll="onScroll"
-    >
-      <template #default="{ item }">
-        <div :style="{ padding: '20px', background: 'yellow' }">
-          <VirtualList
-            :data="data"
-            :height="200"
-            :item-height="20"
-            item-key="id"
-            :style="{
-              border: '1px solid blue',
-              boxSizing: 'border-box',
-              background: 'white',
-            }"
-          >
-            <template #default="{ index }">
-              <div
-                :style="{
-                  height: '20px',
-                  border: '1px solid cyan',
-                }"
-              >
-                {{ item.id }}-{{ index }}
-              </div>
-            </template>
-          </VirtualList>
-        </div>
-      </template>
-    </VirtualList>
-  </div>
-</template>