@v-c/virtual-list 1.0.0 → 1.0.1

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,102 +0,0 @@
-<script setup lang="ts">
-import type { ListRef } from '../src'
-import { ref } from 'vue'
-import VirtualList 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,35 +0,0 @@
-<script setup lang="ts">
-import Animate from './animate.vue'
-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="Animate">
-      <Animate />
-    </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,73 +0,0 @@
-import type { CSSProperties, PropType, VNode } from 'vue'
-import ResizeObserver from '@v-c/resize-observer'
-import { defineComponent } 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,35 +0,0 @@
-import type { PropType } from 'vue'
-import { filterEmpty } from '@v-c/util/dist/props-util'
-import { cloneVNode, defineComponent, 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 })
-    }
-  },
-})