@kiva/kv-components 3.0.2 → 3.0.5

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.4...@kiva/kv-components@3.0.5) (2022-05-27)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* added back initial uuid value. ([aa4a88c](https://github.com/kiva/kv-ui-elements/commit/aa4a88c5a65846e9103ce25985bd7d1cc7bfd025))
+* label and input uuids didn't match ([742452a](https://github.com/kiva/kv-ui-elements/commit/742452a9ffe03980f10f444a99f253429d028170))
+
+
+
+
+
 ## [3.0.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.1...@kiva/kv-components@3.0.2) (2022-03-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "8704a80f645946a36d1f4ae7a7696770177b4b47"
+  "gitHead": "755f33ac5b3f1dc771a42881da3a449feff69df2"
 }

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"
@@ -28,6 +28,7 @@
 		</div>
 		<!-- Carousel Controls -->
 		<div
+			v-if="slideIndicatorCount > 1"
 			class="tw-flex
 			tw-justify-between md:tw-justify-center tw-items-center
 			tw-mt-4 tw-w-full"
@@ -48,8 +49,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 +83,6 @@ import {
 	ref,
 	toRefs,
 	nextTick,
-	getCurrentInstance,
 } from 'vue-demi';
 import EmblaCarousel from 'embla-carousel';
 import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
@@ -144,11 +147,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 +193,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 +226,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 +250,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 +270,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 +308,7 @@ export default {
 			componentSlotKeys,
 			nextIndex,
 			previousIndex,
+			slideIndicatorCount,
 			handleUserInteraction,
 			goToSlide,
 			reInit,

package/vue/KvRadio.vue

@@ -151,7 +151,7 @@ export default {
 			modelValue,
 		} = toRefs(props);
 
-		let uuid = ref(`kvr-${nanoid(10)}`);
+		const uuid = ref(`kvr-${nanoid(10)}`);
 		const radioRef = ref(null);
 
 		const {
@@ -169,7 +169,7 @@ export default {
 		});
 
 		onMounted(() => {
-			uuid = `kvr-${nanoid(10)}`;
+			uuid.value = `kvr-${nanoid(10)}`;
 		});
 
 		const onChange = (event) => {

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,