@kiva/kv-components 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.3...@kiva/kv-components@3.0.4) (2022-05-23)
+
+
+### Bug Fixes
+
+* remove usage of currentInstance, re-implement indicator count update mechanism ([21dae02](https://github.com/kiva/kv-ui-elements/commit/21dae029094bdeecd4d352eea70a116c08af504c))
+
+
+
+
+
 ## [3.0.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.2...@kiva/kv-components@3.0.3) (2022-05-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "bf6cb32b35ce31c41323b3733a7231708876987e"
+  "gitHead": "2bf5d2277e1537b150e396320d72ece46f746840"
 }

package/vue/KvCarousel.vue

@@ -14,7 +14,7 @@
 				:key="index"
 				class="tw-flex-none tw-relative"
 				role="group"
-				:aria-label="`slide ${index} of ${componentSlotKeys.length}`"
+				:aria-label="`slide ${index + 1} of ${componentSlotKeys.length}`"
 				:aria-current="true ? currentIndex + 1 === index : false"
 				:aria-hidden="isAriaHidden(index)"
 				:tab-index="isAriaHidden(index) ? '-1' : false"
@@ -48,8 +48,11 @@
 				/>
 				<span class="tw-sr-only">Show previous slide</span>
 			</button>
-			<div class="tw-mx-2 md:tw-mx-3 lg:tw-mx-4 tw-invisible md:tw-visible">
-				{{ currentIndex + 1 }}/{{ slideIndicatorListLength() }}
+			<div
+				:aria-label="`screen ${currentIndex + 1} of ${slideIndicatorCount}`"
+				class="tw-mx-2 md:tw-mx-3 lg:tw-mx-4 tw-invisible md:tw-visible"
+			>
+				{{ currentIndex + 1 }}/{{ slideIndicatorCount }}
 			</div>
 			<button
 				class="tw-text-primary
@@ -79,7 +82,6 @@ import {
 	ref,
 	toRefs,
 	nextTick,
-	getCurrentInstance,
 } from 'vue-demi';
 import EmblaCarousel from 'embla-carousel';
 import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
@@ -144,11 +146,8 @@ export default {
 		const embla = ref(null);
 		const slides = ref([]);
 		const currentIndex = ref(0);
-
-		const forceUpdate = () => {
-			const instance = getCurrentInstance();
-			instance.proxy.$forceUpdate();
-		};
+		// The indicator count may differ from the slide count when multiple slides are in view
+		const slideIndicatorCount = ref(0);
 
 		const componentSlotKeys = computed(() => {
 			const keys = Object.keys(slots);
@@ -193,6 +192,18 @@ export default {
 			 */
 			emit('interact-carousel', interactionType);
 		};
+
+		/**
+		 * Returns number of slides in the carousel
+		 *
+		 * @returns {Number}
+		 */
+		const slideIndicatorListLength = () => {
+			const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
+			slideIndicatorCount.value = indicator;
+			return indicator;
+		};
+
 		/**
 		 * Reinitialize the carousel.
 		 * Used after adding slides dynamically.
@@ -214,7 +225,7 @@ export default {
 				reInitVisible();
 			}
 			slides.value = embla.value.slideNodes();
-			forceUpdate(); // force a re-render so embla.canScrollNext() gets called in the template
+			slideIndicatorListLength();
 		};
 		const onCarouselContainerClick = (e) => {
 			// If we're dragging, block click handlers within slides
@@ -238,18 +249,8 @@ export default {
 			}
 			return false;
 		};
-		/**
-		 * Returns number of slides in the carousel
-		 *
-		 * @returns {Number}
-		 */
-		const slideIndicatorListLength = () => {
-			const indicator = embla.value ? embla.value.scrollSnapList().length : 0;
-			return indicator;
-		};
 
 		onMounted(async () => {
-			getCurrentInstance();
 			embla.value = EmblaCarousel(rootEl.value, {
 				loop: true,
 				containScroll: 'trimSnaps',
@@ -268,23 +269,26 @@ export default {
 							slidesToScroll: embla.value.slidesInView(true).length,
 							inViewThreshold: 0.9,
 						});
-						forceUpdate();
+						slides.value = embla.value.slideNodes();
+						slideIndicatorListLength();
 					}, 250),
 				);
 			}
 
 			// get slide components
 			slides.value = embla.value.slideNodes();
+			slideIndicatorListLength();
 
 			embla.value.on('select', () => {
 				currentIndex.value = embla.value.selectedScrollSnap();
-
 				/**
 				 * The index of the slide that the carousel has changed to
 				 * @event change
 				 * @type {Event}
 				 */
-				emit('change', currentIndex);
+				nextTick(() => {
+					emit('change', currentIndex);
+				});
 			});
 		});
 
@@ -303,6 +307,7 @@ export default {
 			componentSlotKeys,
 			nextIndex,
 			previousIndex,
+			slideIndicatorCount,
 			handleUserInteraction,
 			goToSlide,
 			reInit,

package/vue/stories/KvCarousel.stories.js

@@ -164,6 +164,78 @@ export const MultipleLoanCards2 = () => ({
 	`,
 });
 
+export const MultipleLoanCardsReInit = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<div data-testid="carousel-container">
+			<kv-carousel
+				ref="myCarouselRef"
+				:multiple-slides-visible="true"
+				slides-to-scroll="visible"
+				style="max-width: 800px;"
+			>
+				<template #slide1>
+					${generateLoanCardTemplate(1)}
+				</template>
+				<template #slide2>
+					${generateLoanCardTemplate(2)}
+				</template>
+				<template #slide3>
+					${generateLoanCardTemplate(3)}
+				</template>
+				<template #slide4>
+					${generateLoanCardTemplate(4)}
+				</template>
+				<template #slide5>
+					${generateLoanCardTemplate(5)}
+				</template>
+				<template #slide6>
+					${generateLoanCardTemplate(6)}
+				</template>
+				<template #slide7>
+					${generateLoanCardTemplate(7)}
+				</template>
+				<template #slide8>
+					${generateLoanCardTemplate(8)}
+				</template>
+			</kv-carousel>
+			<kv-button @click.native.prevent="removeSlide()" role="removeSlideButton">Remove Slide</kv-button>
+			<p>Slide Count: {{ slideCount }} | Indicator Count: {{ slideIndicatorCount }} | Removed Slides: {{ removedSlides.length }}</p>
+		</div>
+	`,
+	data() {
+		return {
+			removedSlides: [],
+			slideCount: null,
+			slideIndicatorCount: null,
+		};
+	},
+	mounted() {
+		this.$nextTick(() => {
+			this.slideCount = this.$refs?.myCarouselRef?.slides?.length;
+			this.slideIndicatorCount = this.$refs?.myCarouselRef?.slideIndicatorCount;
+		});
+	},
+	methods: {
+		removeSlide() {
+			// Fetch slides + remove one
+			const slides = this.$refs?.myCarouselRef?.embla?.slideNodes();
+			const slideToRemove = slides.pop();
+			this.removedSlides.push(slideToRemove);
+			this.$refs?.myCarouselRef?.embla?.containerNode()?.removeChild(slideToRemove);
+			// Call our component reInit method
+			this.$refs?.myCarouselRef?.reInit();
+			// Update values for reflection in story
+			this.slideCount = this.$refs?.myCarouselRef?.slides?.length;
+			this.selectedIndexCheck = this.$refs?.myCarouselRef?.currentIndex;
+			this.slideIndicatorCount = this.$refs?.myCarouselRef?.slideIndicatorCount;
+		},
+	},
+});
+
 export const loadingLoanCardExample = () => ({
 	components: {
 		KvCarousel,