@v-c/virtual-list 0.0.1

package/dist/interface.d.ts

@@ -0,0 +1,27 @@
+import { Key } from '../../util/src/type';
+import { CSSProperties, VNode } from 'vue';
+export type RenderFunc<T> = (item: T, index: number, props: {
+    style: CSSProperties;
+    offsetX: number;
+}) => VNode;
+export interface SharedConfig<T> {
+    getKey: (item: T) => Key;
+}
+export type GetKey<T> = (item: T) => Key;
+export type GetSize = (startKey: Key, endKey?: Key) => {
+    top: number;
+    bottom: number;
+};
+export interface ExtraRenderInfo {
+    /** Virtual list start line */
+    start: number;
+    /** Virtual list end line */
+    end: number;
+    /** Is current in virtual render */
+    virtual: boolean;
+    /** Used for `scrollWidth` tell the horizontal offset */
+    offsetX: number;
+    offsetY: number;
+    rtl: boolean;
+    getSize: GetSize;
+}

package/dist/interface.js

@@ -0,0 +1 @@
+

package/dist/utils/CacheMap.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class t{maps;id=0;diffRecords=new Map;constructor(){this.maps=Object.create(null)}set(e,s){this.diffRecords.set(e,this.maps[e]),this.maps[e]=s,this.id+=1}get(e){return this.maps[e]}resetRecord(){this.diffRecords.clear()}getRecord(){return this.diffRecords}}exports.default=t;

package/dist/utils/CacheMap.d.ts

@@ -0,0 +1,16 @@
+import { Key } from '../../../util/src/type';
+declare class CacheMap {
+    maps: Record<string, number>;
+    id: number;
+    diffRecords: Map<Key, number>;
+    constructor();
+    set(key: Key, value: number): void;
+    get(key: Key): number;
+    /**
+     * CacheMap will record the key changed.
+     * To help to know what's update in the next render.
+     */
+    resetRecord(): void;
+    getRecord(): Map<Key, number>;
+}
+export default CacheMap;

package/dist/utils/CacheMap.js

@@ -0,0 +1,29 @@
+class r {
+  maps;
+  // Used for cache key
+  // `useMemo` no need to update if `id` not change
+  id = 0;
+  diffRecords = /* @__PURE__ */ new Map();
+  constructor() {
+    this.maps = /* @__PURE__ */ Object.create(null);
+  }
+  set(s, t) {
+    this.diffRecords.set(s, this.maps[s]), this.maps[s] = t, this.id += 1;
+  }
+  get(s) {
+    return this.maps[s];
+  }
+  /**
+   * CacheMap will record the key changed.
+   * To help to know what's update in the next render.
+   */
+  resetRecord() {
+    this.diffRecords.clear();
+  }
+  getRecord() {
+    return this.diffRecords;
+  }
+}
+export {
+  r as default
+};

package/dist/utils/isFirefox.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=typeof navigator=="object"&&/Firefox/i.test(navigator.userAgent);exports.default=e;

package/dist/utils/isFirefox.d.ts

@@ -0,0 +1,2 @@
+declare const isFF: boolean;
+export default isFF;

package/dist/utils/isFirefox.js

@@ -0,0 +1,4 @@
+const t = typeof navigator == "object" && /Firefox/i.test(navigator.userAgent);
+export {
+  t as default
+};

package/dist/utils/scrollbarUtil.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=20;function S(t=0,i=0){let e=t/i*t;return isNaN(e)&&(e=0),e=Math.max(e,o),Math.floor(e)}exports.getSpinSize=S;

package/dist/utils/scrollbarUtil.d.ts

@@ -0,0 +1 @@
+export declare function getSpinSize(containerSize?: number, scrollRange?: number): number;

package/dist/utils/scrollbarUtil.js

@@ -0,0 +1,7 @@
+function i(e = 0, a = 0) {
+  let t = e / a * e;
+  return isNaN(t) && (t = 0), t = Math.max(t, 20), Math.floor(t);
+}
+export {
+  i as getSpinSize
+};

package/docs/basic.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import VirtualList, { type ListRef } 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

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,60 @@
+<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="{ item: innerItem, index }">
+              <div
+                :style="{
+                  height: '20px',
+                  border: '1px solid cyan',
+                }"
+              >
+                {{ item.id }}-{{ index }}
+              </div>
+            </template>
+          </VirtualList>
+        </div>
+      </template>
+    </VirtualList>
+  </div>
+</template>

package/docs/no-virtual.vue

@@ -0,0 +1,127 @@
+<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 ? 20 : 0),
+  })
+}
+</script>
+
+<template>
+  <div>
+    <h2>Not Data</h2>
+    <VirtualList
+      :data="null"
+      :item-height="30"
+      :height="100"
+      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>
+
+    <h2>Less Count</h2>
+    <VirtualList
+      :data="data.slice(0, 1)"
+      :item-height="30"
+      :height="100"
+      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>
+
+    <h2>Less Item Height</h2>
+    <VirtualList
+      :data="data.slice(0, 10)"
+      :item-height="1"
+      :height="100"
+      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>
+
+    <h2>Without Height</h2>
+    <VirtualList
+      :data="data"
+      :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/switch.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import VirtualList, { type ListRef } from '../src'
+
+interface Item {
+  id: number
+}
+
+function getData(count: number): Item[] {
+  const result: Item[] = []
+  for (let i = 0; i < count; i += 1) {
+    result.push({ id: i })
+  }
+  return result
+}
+
+const height = ref(200)
+const data = ref(getData(20))
+const fullHeight = ref(true)
+const listRef = ref<ListRef>()
+
+function setDataCount(count: number) {
+  data.value = getData(count)
+}
+
+function showScrollbar() {
+  listRef.value?.scrollTo(null)
+}
+</script>
+
+<template>
+  <div style="height: 150vh">
+    <h2>Switch</h2>
+    <div style="margin-bottom: 16px">
+      <span>
+        Data:
+        <label><input type="radio" name="data" value="0" @change="() => setDataCount(0)"> 0</label>
+        <label><input type="radio" name="data" value="2" @change="() => setDataCount(2)"> 2</label>
+        <label><input type="radio" name="data" value="20" checked @change="() => setDataCount(20)"> 20</label>
+        <label><input type="radio" name="data" value="100" @change="() => setDataCount(100)"> 100</label>
+        <label><input type="radio" name="data" value="200" @change="() => setDataCount(200)"> 200</label>
+        <label><input type="radio" name="data" value="1000" @change="() => setDataCount(1000)"> 1000</label>
+        <button type="button" @click="showScrollbar">
+          Show scrollbar
+        </button>
+      </span>
+      <br>
+      <span>
+        Height:
+        <label><input type="radio" name="height" value="0" @change="() => height = 0"> 0</label>
+        <label><input type="radio" name="height" value="100" @change="() => height = 100"> 100</label>
+        <label><input type="radio" name="height" value="200" checked @change="() => height = 200"> 200</label>
+      </span>
+      <span style="margin-left: 16px">
+        <button @click="fullHeight = !fullHeight">
+          Full Height: {{ fullHeight }}
+        </button>
+      </span>
+    </div>
+
+    <VirtualList
+      ref="listRef"
+      :data="data"
+      :height="height"
+      :item-height="10"
+      item-key="id"
+      :full-height="fullHeight"
+      :style="{
+        border: '1px solid red',
+        boxSizing: 'border-box',
+      }"
+    >
+      <template #default="{ item }">
+        <span
+          :style="{
+            border: '1px solid gray',
+            padding: '0 16px',
+            height: '30px',
+            lineHeight: '30px',
+            boxSizing: 'border-box',
+            display: 'inline-block',
+          }"
+        >
+          {{ item.id }}
+        </span>
+      </template>
+    </VirtualList>
+  </div>
+</template>
+
+<style scoped>
+label {
+  margin-left: 8px;
+}
+
+button {
+  margin-left: 8px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+</style>

package/docs/virtual-list.stories.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Basic from './basic.vue'
+import Height from './height.vue'
+import Nest from './nest.vue'
+import NoVirtual from './no-virtual.vue'
+import Switch from './switch.vue'
+</script>
+
+<template>
+  <Story title="Virtual List">
+    <Variant title="Basic">
+      <Basic />
+    </Variant>
+
+    <Variant title="Dynamic Height">
+      <Height />
+    </Variant>
+
+    <Variant title="No Virtual">
+      <NoVirtual />
+    </Variant>
+
+    <Variant title="Switch Data">
+      <Switch />
+    </Variant>
+
+    <Variant title="Nested">
+      <Nest />
+    </Variant>
+  </Story>
+</template>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@v-c/virtual-list",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "description": "Vue Virtual List Component",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "virtual-list",
+    "vue-component"
+  ],
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/resize-observer": "0.0.2",
+    "@v-c/util": "0.0.7"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest",
+    "prepublish": "pnpm build"
+  }
+}