add BIMDataList component

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>

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";

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",

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";
@@ -204,6 +205,13 @@ export default {
         text: "Inputs are used for enabled a user to interact and input data.",
         btn: "View input",
       },
+      {
+        title: "List",
+        img: list,
+        path: "list",
+        text: "A performant list to display thousands of elements without latency.",
+        btn: "View list",
+      },
       {
         title: "Loaders",
         img: loader,

src/web/views/Components/List/List.vue

@@ -0,0 +1,104 @@
+<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"
+            >
+              <template #default="{ item }">
+                {{ item }}
+              </template>
+            </BIMDataList>
+          </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;
+              &lt;template #default="{ item }"&gt;
+                &#123;&#123; item &#125;&#125;
+              &lt;/template&gt;
+            &lt;/BIMDataList&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>

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.",
+  ]
+];