docs(examples): new padding vue examples and fixes in dynamic (#609)

TanStack · Oct 21, 2023 · 59692ff · 59692ff
1 parent 271b004
commit 59692ff
Show file tree

Hide file tree

Showing 37 changed files with 4,509 additions and 91 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14.17.6
+v16
diff --git a/docs/config.json b/docs/config.json
@@ -58,7 +58,9 @@
         { "to": "examples/vue/sticky", "label": "Sticky" },
         { "to": "examples/vue/infinite-scroll", "label": "Infinite Scroll" },
         { "to": "examples/vue/smooth-scroll", "label": "Smooth Scroll" },
-        { "to": "examples/vue/table", "label": "Table" }
+        { "to": "examples/vue/table", "label": "Table" },
+        { "to": "examples/vue/padding", "label": "Padding" },
+        { "to": "examples/vue/scroll-padding", "label": "Scroll Padding" }
       ]
     }
   ]

diff --git a/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue
@@ -11,28 +11,25 @@
         position: 'relative',
       }"
     >
-      <template
+      <div
         v-for="virtualColumn in virtualColumns"
         :key="virtualColumn.key"
+        :data-index="virtualColumn.index"
+        :ref="measureElement"
+        :class="virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
+        :style="{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          transform: `translateX(${virtualColumn.start}px)`,
+        }"
       >
-        <div
-          :data-index="virtualColumn.index"
-          ref="columnVirtualizer.measureElement"
-          :class="virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
-          :style="{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            height: '100%',
-            transform: `translateX(${virtualColumn.start}px)`,
-          }"
-        >
-          <div :style="{ width: `${sentences[virtualColumn.index].length}px` }">
-            <div>Column {{ virtualColumn.index }}</div>
-            <div>{{ sentences[virtualColumn.index] }}</div>
-          </div>
+        <div :style="{ width: `${sentences[virtualColumn.index].length}px` }">
+          <div>Column {{ virtualColumn.index }}</div>
+          <div>{{ sentences[virtualColumn.index] }}</div>
         </div>
-      </template>
+      </div>
     </div>
   </div>
 </template>
@@ -56,4 +53,14 @@ const columnVirtualizer = useVirtualizer({
 const virtualColumns = computed(() => columnVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => columnVirtualizer.value.getTotalSize())
+
+const measureElement = (el) => {
+  if (!el) {
+    return
+  }
+
+  columnVirtualizer.value.measureElement(el)
+
+  return undefined
+}
 </script>
diff --git a/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue
@@ -9,7 +9,7 @@
       <template v-for="virtualRow in virtualRows" :key="virtualRow.key">
         <div
           :data-index="virtualRow.index"
-          ref="rowVirtualizer.measureElement"
+          :ref="measureElement"
           :style="{
             position: 'absolute',
             top: 0,
@@ -21,27 +21,24 @@
           }"
         >
           <div :style="{ width: `${width[0]}px` }" />
-          <template
+          <div
             v-for="virtualColumn in virtualColumns"
             :key="virtualColumn.key"
+            :style="{
+              minHeight: virtualRow.index === 0 ? 50 : virtualRow.size,
+              width: `${getColumnWidth(virtualColumn.index)}px`,
+              borderBottom: '1px solid #c8c8c8',
+              borderRight: '1px solid #c8c8c8',
+              padding: '7px 12px',
+            }"
           >
-            <div
-              :style="{
-                minHeight: virtualRow.index === 0 ? 50 : virtualRow.size,
-                width: `${getColumnWidth(virtualColumn.index)}px`,
-                borderBottom: '1px solid #c8c8c8',
-                borderRight: '1px solid #c8c8c8',
-                padding: '7px 12px',
-              }"
-            >
-              <div v-if="virtualRow.index === 0">
-                {{ columns[virtualColumn.index].name }}
-              </div>
-              <div v-else>
-                {{ data[virtualRow.index][virtualColumn.index] }}
-              </div>
+            <div v-if="virtualRow.index === 0">
+              {{ columns[virtualColumn.index].name }}
             </div>
-          </template>
+            <div v-else>
+              {{ data[virtualRow.index][virtualColumn.index] }}
+            </div>
+          </div>
           <div :style="{ width: `${width[1]}px` }" />
         </div>
       </template>
@@ -105,4 +102,14 @@ const width = computed(() => {
       ]
     : [0, 0]
 })
+
+const measureElement = (el) => {
+  if (!el) {
+    return
+  }
+
+  rowVirtualizer.value.measureElement(el)
+
+  return undefined
+}
 </script>
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue
@@ -35,7 +35,7 @@
             v-for="virtualRow in virtualRows"
             :key="virtualRow.key"
             :data-index="virtualRow.index"
-            ref="measureElement"
+            :ref="measureElement"
             :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
           >
             <div style="padding: 10px 0">
@@ -67,4 +67,14 @@ const rowVirtualizer = useVirtualizer({
 const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+
+const measureElement = (el) => {
+  if (!el) {
+    return
+  }
+
+  rowVirtualizer.value.measureElement(el)
+
+  return undefined
+}
 </script>
diff --git a/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue b/examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue
@@ -22,7 +22,7 @@
           v-for="virtualRow in virtualRows"
           :key="virtualRow.key"
           :data-index="virtualRow.index"
-          ref="measureElement"
+          :ref="measureElement"
           :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
         >
           <div style="padding: 10px 0">
@@ -63,4 +63,14 @@ const rowVirtualizer = useWindowVirtualizer(rowVirtualizerOptions)
 const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+
+const measureElement = (el) => {
+  if (!el) {
+    return
+  }
+
+  rowVirtualizer.value.measureElement(el)
+
+  return undefined
+}
 </script>
diff --git a/examples/vue/padding/.gitignore b/examples/vue/padding/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/padding/README.md b/examples/vue/padding/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`
diff --git a/examples/vue/padding/index.html b/examples/vue/padding/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>