@v-c/virtual-list 0.0.1 → 1.0.0

package/docs/animate.vue

@@ -0,0 +1,159 @@
+<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,6 +1,7 @@
 <script setup lang="ts">
+import type { ListRef } from '../src'
 import { ref } from 'vue'
-import VirtualList, { type ListRef } from '../src'
+import VirtualList from '../src'
 
 interface Item {
   id: number

package/docs/nest.vue

@@ -42,7 +42,7 @@ function onScroll(e: Event) {
               background: 'white',
             }"
           >
-            <template #default="{ item: innerItem, index }">
+            <template #default="{ index }">
               <div
                 :style="{
                   height: '20px',

package/docs/switch.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import type { ListRef } from '../src'
 import { ref } from 'vue'
-import VirtualList, { type ListRef } from '../src'
+import VirtualList from '../src'
 
 interface Item {
   id: number

package/docs/virtual-list.stories.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Animate from './animate.vue'
 import Basic from './basic.vue'
 import Height from './height.vue'
 import Nest from './nest.vue'
@@ -11,6 +12,9 @@ import Switch from './switch.vue'
     <Variant title="Basic">
       <Basic />
     </Variant>
+    <Variant title="Animate">
+      <Animate />
+    </Variant>
 
     <Variant title="Dynamic Height">
       <Height />

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@v-c/virtual-list",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0",
+  "description": "Vue Virtual List Component",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "vue",
+    "virtual-list",
+    "vue-component"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -11,15 +19,7 @@
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
-  "description": "Vue Virtual List Component",
-  "author": "",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "virtual-list",
-    "vue-component"
-  ],
-  "main": "index.js",
+  "main": "./dist/index.js",
   "publishConfig": {
     "access": "public"
   },
@@ -27,12 +27,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.1"
   },
   "scripts": {
     "build": "vite build",
-    "test": "vitest",
-    "prepublish": "pnpm build"
+    "test": "vitest run",
+    "prepublish": "pnpm build",
+    "bump": "bumpp",
+    "patch": "bumpp --release patch"
   }
 }

package/src/Filler.tsx

@@ -1,5 +1,6 @@
+import type { CSSProperties, PropType, VNode } from 'vue'
 import ResizeObserver from '@v-c/resize-observer'
-import { type CSSProperties, defineComponent, type PropType, type VNode } from 'vue'
+import { defineComponent } from 'vue'
 
 export interface InnerProps {
   role?: string

package/src/Item.tsx

@@ -1,5 +1,6 @@
+import type { PropType } from 'vue'
 import { filterEmpty } from '@v-c/util/dist/props-util'
-import { cloneVNode, defineComponent, type PropType, shallowRef } from 'vue'
+import { cloneVNode, defineComponent, shallowRef } from 'vue'
 
 export interface ItemProps {
   setRef: (element: HTMLElement | null) => void