From eae049d9ade89b154d5a37fba2311fe374dedc1e Mon Sep 17 00:00:00 2001
From: GAETAN LAGIER <gaetan@bimdata.io>
Date: Fri, 24 May 2024 18:36:02 +0200
Subject: [PATCH 1/5] add BIMDataList component

---
 .../BIMDataList/BIMDataList.vue               | 118 ++++++++++++++++++
 src/BIMDataComponents/index.js                |   1 +
 src/web/router.js                             |   5 +
 src/web/store.js                              |   7 ++
 src/web/views/Components/List/List.vue        |  96 ++++++++++++++
 src/web/views/Components/List/props-data.js   |  28 +++++
 6 files changed, 255 insertions(+)
 create mode 100644 src/BIMDataComponents/BIMDataList/BIMDataList.vue
 create mode 100644 src/web/views/Components/List/List.vue
 create mode 100644 src/web/views/Components/List/props-data.js

diff --git a/src/BIMDataComponents/BIMDataList/BIMDataList.vue b/src/BIMDataComponents/BIMDataList/BIMDataList.vue
new file mode 100644
index 00000000..c76f4ea5
--- /dev/null
+++ b/src/BIMDataComponents/BIMDataList/BIMDataList.vue
@@ -0,0 +1,118 @@
+<template>
+  <div
+    class="bimdata-list"
+    @scroll="computeIndexes"
+    :style="`--bimdata-list--item-height: ${itemHeight}px`"
+  >
+    <div
+      class="bimdata-list__placeholder"
+      :style="`height: ${items.length * itemHeight}px;`"
+    ></div>
+    <div
+      class="bimdata-list__element"
+      v-for="(item, index) in displayedItems"
+      :key="itemKey ? item[itemKey] : item"
+      :style="`height: ${itemHeight}px; top: ${
+        (offsetedStartIndex + index) * itemHeight
+      }px`"
+    >
+      <slot :item="item">
+        {{ item }}
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BIMDataList",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    itemHeight: {
+      type: Number,
+      default: 30,
+    },
+    offset: {
+      type: Number,
+      default: 20,
+    },
+    itemKey: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      startIndex: 0,
+      endIndex: 0,
+    };
+  },
+  computed: {
+    offsetedStartIndex() {
+      return Math.max(this.startIndex - this.offset, 0);
+    },
+    offsetedEndIndex() {
+      return Math.min(this.endIndex + this.offset, this.items.length);
+    },
+    displayedItems() {
+      return this.items.slice(
+        this.offsetedStartIndex,
+        this.offsetedEndIndex + 1
+      );
+    },
+  },
+  mounted() {
+    this.computeIndexes();
+  },
+  methods: {
+    computeIndexes() {
+      const { itemHeight, items, $el } = this;
+      const { scrollTop, clientHeight } = $el;
+
+      const startIndex = Math.floor(scrollTop / itemHeight);
+
+      const endIndex = Math.min(
+        startIndex + Math.ceil(clientHeight / itemHeight) + 1,
+        items.length
+      );
+
+      this.startIndex = startIndex;
+      this.endIndex = endIndex;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bimdata-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid #ccc;
+
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+
+  position: relative;
+
+  &__element {
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
+  }
+
+  &__placeholder {
+    background: repeating-linear-gradient(
+      #ffffff,
+      #ffffff calc(var(--bimdata-list--item-height, 30px) - 1px),
+      var(--color-silver, #000000)
+        calc(var(--bimdata-list--item-height, 30px) - 1px),
+      var(--color-silver, #000000) var(--bimdata-list--item-height, 30px)
+    );
+  }
+}
+</style>
diff --git a/src/BIMDataComponents/index.js b/src/BIMDataComponents/index.js
index 0f2bec7a..b6aa774c 100644
--- a/src/BIMDataComponents/index.js
+++ b/src/BIMDataComponents/index.js
@@ -22,6 +22,7 @@ export * from "./BIMDataIcon/BIMDataIconStandalone/index.js";
 export { default as BIMDataIllustration } from "./BIMDataIllustration/BIMDataIllustration.vue";
 export { default as BIMDataInput } from "./BIMDataInput/BIMDataInput.vue";
 export { default as BIMDataInputOutlined } from "./BIMDataInputOutlined/BIMDataInputOutlined.vue";
+export { default as BIMDataList } from "./BIMDataList/BIMDataList.vue";
 export { default as BIMDataLoading } from "./BIMDataLoading/BIMDataLoading.vue";
 export { default as BIMDataMenu } from "./BIMDataMenu/BIMDataMenu.vue";
 export { default as BIMDataMenuInline } from "./BIMDataMenuInline/BIMDataMenuInline.vue";
diff --git a/src/web/router.js b/src/web/router.js
index a8115599..55b71b35 100644
--- a/src/web/router.js
+++ b/src/web/router.js
@@ -155,6 +155,11 @@ const routes = [
         name: "input",
         component: () => import("./views/Components/Input/Input.vue"),
       },
+      {
+        path: "list",
+        name: "list",
+        component: () => import("./views/Components/List/List.vue"),
+      },
       {
         path: "loaders",
         name: "loaders",
diff --git a/src/web/store.js b/src/web/store.js
index fd4b2109..86c1ef73 100644
--- a/src/web/store.js
+++ b/src/web/store.js
@@ -204,6 +204,13 @@ export default {
         text: "Inputs are used for enabled a user to interact and input data.",
         btn: "View input",
       },
+      {
+        title: "List",
+        img: loader,
+        path: "list",
+        text: "A performant list to display thousands of elements without latency.",
+        btn: "View list",
+      },
       {
         title: "Loaders",
         img: loader,
diff --git a/src/web/views/Components/List/List.vue b/src/web/views/Components/List/List.vue
new file mode 100644
index 00000000..a7497d56
--- /dev/null
+++ b/src/web/views/Components/List/List.vue
@@ -0,0 +1,96 @@
+<template>
+  <main class="article">
+    <div class="article-wrapper">
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
+      <ComponentCode
+        :componentTitle="$route.name"
+        language="javascript"
+        githubLink="https://github.com/bimdata/design-system/blob/develop/src/BIMDataComponents/BIMDataList/BIMDataList.vue"
+      >
+        <template #module>
+          <div style="width: 100%; height: 400px">
+            <BIMDataList
+              :items="items"
+              :itemHeight="+itemHeight"
+              :offset="+offset"
+            />
+          </div>
+        </template>
+
+        <template #parameters>
+          <BIMDataInput
+            margin="24px 0"
+            type="number"
+            placeholder="Item height"
+            v-model="itemHeight"
+          />
+          <BIMDataInput
+            margin="24px 0"
+            type="number"
+            placeholder="List size"
+            v-model="size"
+          />
+          <BIMDataInput
+            margin="24px 0"
+            type="number"
+            placeholder="Offset"
+            v-model="offset"
+          />
+        </template>
+
+        <template #import>
+          import BIMDataList from
+          "@bimdata/design-system/src/BIMDataComponents/BIMDataList/BIMDataList.vue"
+        </template>
+
+        <template #code>
+          <pre>
+            &lt;BIMDataList
+              :items="items"
+              :itemHeight="{{ +itemHeight }}"
+              :offset="{{ +offset }}"
+            /&gt;
+          </pre>
+        </template>
+      </ComponentCode>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" margin="15px 0 0" color="color-primary">
+          Props:
+        </BIMDataText>
+        <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import propsData from "./props-data.js";
+
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+
+const getData = (size = 100) =>
+  Array.from({ length: size }, (_, i) => `Item ${i + 1}`);
+
+export default {
+  components: {
+    ComponentCode,
+  },
+  data() {
+    return {
+      size: 1000,
+      itemHeight: 30,
+      offset: 20,
+      // Data
+      propsData,
+    };
+  },
+  computed: {
+    items() {
+      return getData(+this.size);
+    },
+  },
+};
+</script>
diff --git a/src/web/views/Components/List/props-data.js b/src/web/views/Components/List/props-data.js
new file mode 100644
index 00000000..00737e40
--- /dev/null
+++ b/src/web/views/Components/List/props-data.js
@@ -0,0 +1,28 @@
+/* eslint-disable */
+export default [
+  [ "Props", "Type", "Default value", "Description" ],
+  [
+    "items",
+    "any",
+    "REQUIRED",
+    "Items to display in the list.",
+  ],
+  [
+    "itemHeight",
+    "Number",
+    "30",
+    "The height of each item in pixels.",
+  ],
+  [
+    "offset",
+    "Number",
+    "20",
+    "The number of items to render outside the visible area to improve scrolling smoothness.",
+  ],
+  [
+    "itemKey",
+    "String",
+    "null",
+    "The key to use for looping on each item.",
+  ]
+];

From 7c35c35edf402f63d07045393cd6ec13980f0106 Mon Sep 17 00:00:00 2001
From: GAETAN LAGIER <gaetan@bimdata.io>
Date: Fri, 24 May 2024 18:51:59 +0200
Subject: [PATCH 2/5] fix doc list illustration

---
 src/web/store.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/web/store.js b/src/web/store.js
index 86c1ef73..1bc12522 100644
--- a/src/web/store.js
+++ b/src/web/store.js
@@ -21,6 +21,7 @@ import fileicon from "./assets/img/icon-fileicon.svg";
 import icons from "./assets/img/icon-icons.svg";
 import illustration from "./assets/img/icon-illustration.svg";
 import input from "./assets/img/icon-input.svg";
+import list from "./assets/img/icon-list.svg";
 import loader from "./assets/img/icon-loader.svg";
 import menu from "./assets/img/icon-menu.svg";
 import radio from "./assets/img/icon-radio.svg";
@@ -206,7 +207,7 @@ export default {
       },
       {
         title: "List",
-        img: loader,
+        img: list,
         path: "list",
         text: "A performant list to display thousands of elements without latency.",
         btn: "View list",

From 94a573924227a60dc1b41734cc63ab883f636b21 Mon Sep 17 00:00:00 2001
From: GAETAN LAGIER <gaetan@bimdata.io>
Date: Fri, 24 May 2024 18:52:10 +0200
Subject: [PATCH 3/5] document default slot

---
 src/web/views/Components/List/List.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/web/views/Components/List/List.vue b/src/web/views/Components/List/List.vue
index a7497d56..4d39a105 100644
--- a/src/web/views/Components/List/List.vue
+++ b/src/web/views/Components/List/List.vue
@@ -15,7 +15,11 @@
               :items="items"
               :itemHeight="+itemHeight"
               :offset="+offset"
-            />
+            >
+              <template #default="{ item }">
+                {{ item }}
+              </template>
+            </BIMDataList>
           </div>
         </template>
 
@@ -52,6 +56,10 @@
               :itemHeight="{{ +itemHeight }}"
               :offset="{{ +offset }}"
             /&gt;
+              &lt;template #default="{ item }"&gt;
+                &#123;&#123; item &#125;&#125;
+              &lt;/template&gt;
+            &lt;/BIMDataList&gt;
           </pre>
         </template>
       </ComponentCode>

From cc6d83c66a7dbf9d959bc4fa0d07b95fd7b653a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Lagier?= <gaetan.lagier@hotmail.fr>
Date: Mon, 27 May 2024 11:26:06 +0200
Subject: [PATCH 4/5] provide index to bimdatalist slot

---
 src/BIMDataComponents/BIMDataList/BIMDataList.vue | 8 ++++----
 src/web/views/Components/List/List.vue            | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataList/BIMDataList.vue b/src/BIMDataComponents/BIMDataList/BIMDataList.vue
index c76f4ea5..80b651de 100644
--- a/src/BIMDataComponents/BIMDataList/BIMDataList.vue
+++ b/src/BIMDataComponents/BIMDataList/BIMDataList.vue
@@ -16,7 +16,7 @@
         (offsetedStartIndex + index) * itemHeight
       }px`"
     >
-      <slot :item="item">
+      <slot :item="item" :index="offsetedStartIndex + index">
         {{ item }}
       </slot>
     </div>
@@ -55,7 +55,7 @@ export default {
       return Math.max(this.startIndex - this.offset, 0);
     },
     offsetedEndIndex() {
-      return Math.min(this.endIndex + this.offset, this.items.length);
+      return Math.min(this.endIndex + this.offset, this.items.length - 1);
     },
     displayedItems() {
       return this.items.slice(
@@ -75,8 +75,8 @@ export default {
       const startIndex = Math.floor(scrollTop / itemHeight);
 
       const endIndex = Math.min(
-        startIndex + Math.ceil(clientHeight / itemHeight) + 1,
-        items.length
+        startIndex + Math.ceil(clientHeight / itemHeight),
+        items.length - 1
       );
 
       this.startIndex = startIndex;
diff --git a/src/web/views/Components/List/List.vue b/src/web/views/Components/List/List.vue
index 4d39a105..7847c565 100644
--- a/src/web/views/Components/List/List.vue
+++ b/src/web/views/Components/List/List.vue
@@ -16,8 +16,10 @@
               :itemHeight="+itemHeight"
               :offset="+offset"
             >
-              <template #default="{ item }">
-                {{ item }}
+              <template #default="{ item, index }">
+                <div :style="`background-color: ${index % 2 === 0 ? 'white' : 'var(--color-silver-light)'}; height: 100%`">
+                  {{ item }}
+                </div>
               </template>
             </BIMDataList>
           </div>

From 33583321af260cd5fcd60a36b9426efb8e50417a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Lagier?= <gaetan.lagier@hotmail.fr>
Date: Mon, 27 May 2024 11:33:21 +0200
Subject: [PATCH 5/5] document bimdatalist slot index

---
 src/web/views/Components/List/List.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/web/views/Components/List/List.vue b/src/web/views/Components/List/List.vue
index 7847c565..d7badb92 100644
--- a/src/web/views/Components/List/List.vue
+++ b/src/web/views/Components/List/List.vue
@@ -17,9 +17,7 @@
               :offset="+offset"
             >
               <template #default="{ item, index }">
-                <div :style="`background-color: ${index % 2 === 0 ? 'white' : 'var(--color-silver-light)'}; height: 100%`">
                   {{ item }}
-                </div>
               </template>
             </BIMDataList>
           </div>
@@ -58,7 +56,7 @@
               :itemHeight="{{ +itemHeight }}"
               :offset="{{ +offset }}"
             /&gt;
-              &lt;template #default="{ item }"&gt;
+              &lt;template #default="{ item, index }"&gt;
                 &#123;&#123; item &#125;&#125;
               &lt;/template&gt;
             &lt;/BIMDataList&gt;