@v-c/virtual-list 0.0.1 → 1.0.1

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@v-c/virtual-list",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.1",
+  "description": "Vue Virtual List Component",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "virtual-list",
+    "vue-component"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -11,15 +19,11 @@
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
-  "description": "Vue Virtual List Component",
-  "author": "",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "virtual-list",
-    "vue-component"
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "package.json"
   ],
-  "main": "index.js",
   "publishConfig": {
     "access": "public"
   },
@@ -27,12 +31,14 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/resize-observer": "0.0.2",
-    "@v-c/util": "0.0.7"
+    "@v-c/resize-observer": "^1.0.0",
+    "@v-c/util": "^1.0.2"
   },
   "scripts": {
     "build": "vite build",
-    "test": "vitest",
-    "prepublish": "pnpm build"
+    "test": "vitest run",
+    "prepublish": "pnpm build",
+    "bump": "bumpp",
+    "patch": "bumpp --release patch"
   }
 }

package/docs/basic.vue

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

@@ -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="{ 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

@@ -1,127 +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 ? 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

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

@@ -1,31 +0,0 @@
-<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/src/Filler.tsx

@@ -1,72 +0,0 @@
-import ResizeObserver from '@v-c/resize-observer'
-import { type CSSProperties, defineComponent, type PropType, type VNode } from 'vue'
-
-export interface InnerProps {
-  role?: string
-  id?: string
-}
-
-export default defineComponent({
-  name: 'Filler',
-  props: {
-    prefixCls: String,
-    /** Virtual filler height. Should be `count * itemMinHeight` */
-    height: Number,
-    /** Set offset of visible items. Should be the top of start item position */
-    offsetY: Number,
-    offsetX: Number,
-    scrollWidth: Number,
-    onInnerResize: Function as PropType<() => void>,
-    innerProps: Object as PropType<InnerProps>,
-    rtl: Boolean,
-    extra: Object as PropType<VNode>,
-  },
-  setup(props, { slots }) {
-    return () => {
-      let outerStyle: CSSProperties = {}
-      let innerStyle: CSSProperties = {
-        display: 'flex',
-        flexDirection: 'column',
-      }
-
-      if (props.offsetY !== undefined) {
-        outerStyle = {
-          height: `${props.height}px`,
-          position: 'relative',
-          overflow: 'hidden',
-        }
-
-        innerStyle = {
-          ...innerStyle,
-          transform: `translateY(${props.offsetY}px)`,
-          [props.rtl ? 'marginRight' : 'marginLeft']: `-${props.offsetX || 0}px`,
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          top: 0,
-        }
-      }
-
-      return (
-        <div style={outerStyle}>
-          <ResizeObserver
-            onResize={({ offsetHeight }) => {
-              if (offsetHeight && props.onInnerResize) {
-                props.onInnerResize()
-              }
-            }}
-          >
-            <div
-              style={innerStyle}
-              class={props.prefixCls ? `${props.prefixCls}-holder-inner` : undefined}
-              {...props.innerProps}
-            >
-              {slots.default?.()}
-              {props.extra}
-            </div>
-          </ResizeObserver>
-        </div>
-      )
-    }
-  },
-})

package/src/Item.tsx

@@ -1,34 +0,0 @@
-import { filterEmpty } from '@v-c/util/dist/props-util'
-import { cloneVNode, defineComponent, type PropType, shallowRef } from 'vue'
-
-export interface ItemProps {
-  setRef: (element: HTMLElement | null) => void
-}
-
-export default defineComponent({
-  name: 'Item',
-  props: {
-    setRef: {
-      type: Function as PropType<(element: HTMLElement | null) => void>,
-      required: true,
-    },
-  },
-  setup(props, { slots }) {
-    // Store the ref callback to avoid recreating it on each render
-    const currentElement = shallowRef<HTMLElement | null>(null)
-    const refFunc = (node: any) => {
-      if (currentElement.value !== node) {
-        currentElement.value = node
-        props.setRef(node)
-      }
-    }
-
-    return () => {
-      const child = filterEmpty(slots.default?.() ?? [])[0]
-      if (!child)
-        return null
-
-      return cloneVNode(child, { ref: refFunc })
-    }
-  },
-})