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" >
+ > + {{ i }} + @@ -28,12 +37,6 @@ placeholder="Carousel width" v-model="carouselWidth" /> - + /> +- <BIMDataCarousel :style="{ width: {{ carouselWidth }} }"> + <BIMDataCarousel + :style="{ width: {{ carouselWidth }} }" + :sliderPadding="{{ sliderPadding }}" + :minGap="{{ minGap }}" + > <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" - ></div> + > + {{ "{" + "{ i }" + "}" }} + </div> </BIMDataCarousel>@@ -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); + }, + }, };