From 48d8ef195c33323a544dcdf065de6294511a523c Mon Sep 17 00:00:00 2001
From: NicolasRichel <nicolas@bimdata.io>
Date: Tue, 14 Jun 2022 16:27:04 +0200
Subject: [PATCH] PATCH: doc(components): improve BIMDataCarousel doc + add
 reactivity on minGap prop

---
 .../BIMDataCarousel/BIMDataCarousel.vue       |  5 ++
 .../views/Components/Carousel/Carousel.vue    | 56 ++++++++++++++-----
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/BIMDataComponents/BIMDataCarousel/BIMDataCarousel.vue b/src/BIMDataComponents/BIMDataCarousel/BIMDataCarousel.vue
index e9ebc9b3..7a1aa015 100644
--- a/src/BIMDataComponents/BIMDataCarousel/BIMDataCarousel.vue
+++ b/src/BIMDataComponents/BIMDataCarousel/BIMDataCarousel.vue
@@ -63,6 +63,11 @@ export default {
       translations: [],
     };
   },
+  watch: {
+    minGap() {
+      this.distributeItems();
+    },
+  },
   mounted() {
     this.distributeItems();
     this.resizeObserver = new ResizeObserver(() => this.distributeItems());
diff --git a/src/web/views/Components/Carousel/Carousel.vue b/src/web/views/Components/Carousel/Carousel.vue
index f74ea0a2..dc3c1d64 100644
--- a/src/web/views/Components/Carousel/Carousel.vue
+++ b/src/web/views/Components/Carousel/Carousel.vue
@@ -13,11 +13,20 @@
             :minGap="+minGap"
           >
             <div
-              style="height: 100px; background-color: #ddd"
+              style="
+                height: 100px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-weight: bold;
+                background-color: #ddd;
+              "
               :style="{ width: `${itemWidth}px` }"
-              v-for="i of [1, 2, 3, 4, 5, 6]"
+              v-for="i of items"
               :key="i"
-            ></div>
+            >
+              {{ i }}
+            </div>
           </BIMDataCarousel>
         </template>
 
@@ -28,12 +37,6 @@
             placeholder="Carousel width"
             v-model="carouselWidth"
           />
-          <!-- <BIMDataInput
-            margin="24px 0"
-            type="number"
-            placeholder="Item width (in px)"
-            v-model="itemWidth"
-          />
           <BIMDataInput
             margin="24px 0"
             type="number"
@@ -45,7 +48,19 @@
             type="number"
             placeholder="Minimum gap (in px)"
             v-model="minGap"
-          /> -->
+          />
+          <BIMDataInput
+            margin="24px 0"
+            type="number"
+            placeholder="Number of items"
+            v-model="nbItems"
+          />
+          <BIMDataInput
+            margin="24px 0"
+            type="number"
+            placeholder="Item width (in px)"
+            v-model="itemWidth"
+          />
         </template>
 
         <template #import>
@@ -55,13 +70,18 @@
 
         <template #code>
           <pre>
-            &lt;BIMDataCarousel :style="{ width: {{ carouselWidth }} }"&gt;
+            &lt;BIMDataCarousel
+              :style="{ width: {{ carouselWidth }} }"
+              :sliderPadding="{{ sliderPadding }}"
+              :minGap="{{ minGap }}"
+            &gt;
               &lt;div
-                style="height: 100px; background-color: #ddd"
                 :style="{ width: {{ `${itemWidth}px` }} }"
-                v-for="i of [1, 2, 3, 4, 5, 6]"
+                v-for="i of items"
                 :key="i"
-              &gt;&lt;/div&gt;
+              &gt;
+                {{ "{" + "{ i }" + "}" }}
+              &lt;/div&gt;
             &lt;/BIMDataCarousel&gt;
           </pre>
         </template>
@@ -97,13 +117,19 @@ export default {
   data() {
     return {
       carouselWidth: "60%",
-      itemWidth: 150,
       sliderPadding: 12,
       minGap: 24,
+      nbItems: 6,
+      itemWidth: 150,
 
       // Data
       propsData,
     };
   },
+  computed: {
+    items() {
+      return Array.from({ length: this.nbItems }, (_, i) => i + 1);
+    },
+  },
 };
 </script>