Merge pull request #14 from FallingCeilingS/v0.1.4/api-playground

API playground

Author: jchen042

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-virtualised",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "description": "Vue components developed by Vue.js 3.0 for efficiently rendering large scrollable lists and hierarchical data. vue-virtualised is able to render and update 1 million nodes within a few seconds in front-end.",
   "author": {

src/components/Base/VirtualisedBaseScroller.vue

@@ -80,7 +80,7 @@ import {
   GetNodeKey,
   CellRenderer,
   ConditionCallback,
-} from "../../types/types";
+} from "@/types/types";
 
 export default defineComponent({
   name: "VirtualisedBaseScroller",
@@ -226,7 +226,7 @@ export default defineComponent({
         : initialScrollTop.value
     );
 
-    // Calculte total content height.
+    // Calculate total content height.
     // TODO: Fix the content height limitation of 33554400px.
     const getTotalHeight = (
       nodes: Array<any>,
@@ -363,6 +363,7 @@ export default defineComponent({
       });
     };
 
+    // TODO: add parameter to set behaviour
     const getScrollTop = (): number => scrollTop.value;
 
     const scrollToStart = (): void => {

src/examples/demo-example/DemoExample.vue

@@ -2,7 +2,16 @@
   <div class="app-container">
     <div class="list-container">
       <div class="title">VirtualisedList</div>
+      <div>
+        <button @click="scrollListToStart">Scroll To Start</button>
+        <button @click="scrollListToEnd">Scroll To End</button>
+        <button @click="scrollListToIndex">Scroll To Index</button>
+        <input v-model="listIndex" type="number" min="0" />
+        <button @click="scrollListToHeight">Scroll To Height</button>
+        <input v-model="listHeight" type="number" min="0" />
+      </div>
       <virtualised-list
+        ref="listView"
         :nodes="data"
         :viewport-height="viewportHeight"
         :initial-scroll-top="initialScrollTop"
@@ -20,6 +29,15 @@
     </div>
     <div class="tree-container">
       <div class="title">VirtualisedTree</div>
+      <div>
+        <button @click="scrollTreeToStart">Scroll To Start</button>
+        <button @click="scrollTreeToEnd">Scroll To End</button>
+        <button @click="scrollTreeToIndex">Scroll To Index</button>
+        <input v-model="treeIndex" type="number" min="0" />
+        <button @click="scrollTreeToHeight">Scroll To Height</button>
+        <input v-model="treeHeight" type="number" min="0" />
+        <button @click="forceUpdate">Force Refresh</button>
+      </div>
       <virtualised-tree
         ref="treeView"
         :nodes="nodes"
@@ -60,8 +78,19 @@ export default defineComponent({
     VirtualisedTree,
   },
   setup() {
+    const listView = ref<typeof VirtualisedList | null>(null);
     const treeView = ref<typeof VirtualisedTree | null>(null);
 
+    const listIndex = ref<number>(0);
+    const listHeight = ref<number>(0);
+
+    const scrollListToStart = () => listView.value?.scrollToStart();
+    const scrollListToEnd = () => listView.value?.scrollToEnd();
+    const scrollListToIndex = () =>
+      listView.value?.scrollToIndex(listIndex.value);
+    const scrollListToHeight = () =>
+      listView.value?.scrollToHeight(listHeight.value);
+
     const nodes = constructFixedTree(6, 15, 5);
 
     const onChange = (nodes: Array<Node | NodeModel>) =>
@@ -71,6 +100,18 @@ export default defineComponent({
       h("div", { class: "cell-container list-cell-container" }, node.label),
     ];
 
+    const treeIndex = ref<number>(0);
+    const treeHeight = ref<number>(0);
+
+    const scrollTreeToStart = () => treeView.value?.scrollToStart();
+    const scrollTreeToEnd = () => treeView.value?.scrollToEnd();
+    const scrollTreeToIndex = () =>
+      treeView.value?.scrollToIndex(treeIndex.value);
+    const scrollTreeToHeight = () =>
+      treeView.value?.scrollToHeight(treeHeight.value);
+
+    const forceUpdate = async () => await treeView.value?.forceUpdate();
+
     const treeCellRenderer = (node: NodeModel, index: number) => [
       h(
         "div",
@@ -175,11 +216,25 @@ export default defineComponent({
     };
 
     return {
+      listView,
       treeView,
+      listIndex,
+      listHeight,
+      scrollListToStart,
+      scrollListToEnd,
+      scrollListToIndex,
+      scrollListToHeight,
       nodes,
       onChange,
       listCellRenderer,
       treeCellRenderer,
+      treeIndex,
+      treeHeight,
+      scrollTreeToStart,
+      scrollTreeToEnd,
+      scrollTreeToIndex,
+      scrollTreeToHeight,
+      forceUpdate,
       handleScroll,
       handleStartReached,
       handleEndReached,

src/examples/simple-example/SimpleExample.vue

@@ -60,11 +60,11 @@
 </template>
 
 <script>
-import { ref, onMounted } from "vue";
-import VirtualisedList from "../../components/VirtualisedList";
-import VirtualisedTree from "../../components/VirtualisedTree";
+import { defineComponent, ref, onMounted } from "vue";
+import VirtualisedList from "@/components/VirtualisedList";
+import VirtualisedTree from "@/components/VirtualisedTree";
 
-export default {
+export default defineComponent({
   name: "SimpleExample",
   components: { VirtualisedList, VirtualisedTree },
   setup() {
@@ -85,7 +85,7 @@ export default {
       onSelectedComponentChange,
     };
   },
-};
+});
 </script>
 
 <style></style>

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from "vue";
-import SimpleExample from "./examples/simple-example/SimpleExample.vue";
-// import DemoExample from "./examples/demo-example/DemoExample.vue";
+// import SimpleExample from "./examples/simple-example/SimpleExample.vue";
+import DemoExample from "./examples/demo-example/DemoExample.vue";
 
-createApp(SimpleExample).mount("#app");
-// createApp(DemoExample).mount("#app");
+// createApp(SimpleExample).mount("#app");
+createApp(DemoExample).mount("#app");