@kiva/kv-components 3.0.1 → 3.0.4

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 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)
+
+
+### 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)
+
+
+### Bug Fixes
+
+* clean up tests console errors and props ([37a6da9](https://github.com/kiva/kv-ui-elements/commit/37a6da9b4439463e777ae503b7ccff6562b9c81f))
+* ensure reactive ref state without timeout ([eda1553](https://github.com/kiva/kv-ui-elements/commit/eda1553304e6ed4199e35dbd73cb821b87bf3175))
+* return additional items for access as refs in vue2 ([b34ee52](https://github.com/kiva/kv-ui-elements/commit/b34ee52c39357bb7469418717d99c08a937c5cb8))
+
+
+
+
+
 ## [3.0.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.0...@kiva/kv-components@3.0.1) (2022-02-16)
 
 

package/package.json

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

package/tests/unit/specs/components/KvProgressBar.spec.js

@@ -3,7 +3,7 @@ import KvProgressBar from '../../../../vue/KvProgressBar.vue';
 
 describe('KvProgressBar', () => {
 	it('renders with a role of "progressbar"', () => {
-		const { getByRole } = render(KvProgressBar);
+		const { getByRole } = render(KvProgressBar, { props: { ariaLabel: 'progress-bar', value: 100 } });
 		const progressbarEl = getByRole('progressbar');
 
 		expect(progressbarEl).toBeDefined();

package/tests/unit/specs/components/KvTabPanel.spec.js

@@ -1,10 +1,31 @@
 import { render } from '@testing-library/vue';
 import { axe } from 'jest-axe';
+import '../../../../__mocks__/ResizeObserver';
+import KvTab from '../../../../vue/KvTab.vue';
 import KvTabPanel from '../../../../vue/KvTabPanel.vue';
+import KvTabs from '../../../../vue/KvTabs.vue';
 
 describe('KvTabPanel', () => {
 	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvTabPanel);
+		const { container } = render({
+			components: { KvTabs, KvTab, KvTabPanel },
+			template: `
+				<kv-tabs>
+					<template #tabNav>
+						<kv-tab forPanel="demo-1-first">First</kv-tab>
+						<kv-tab forPanel="demo-1-second">Second</kv-tab>
+						<kv-tab forPanel="demo-1-third">Third</kv-tab>
+						<kv-tab forPanel="demo-1-forth">Fourth is longer</kv-tab>
+					</template>
+					<template #tabPanels>
+						<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+						<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+						<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+						<kv-tab-panel id="demo-1-forth"><p>Fourth Panel</p></kv-tab-panel>
+					</template>
+				</kv-tabs>
+			`,
+		});
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});

package/tests/unit/specs/components/KvTabs.spec.js

@@ -5,6 +5,8 @@ import '../../../../__mocks__/ResizeObserver';
 import KvTab from '../../../../vue/KvTab.vue';
 import KvTabPanel from '../../../../vue/KvTabPanel.vue';
 import KvTabs from '../../../../vue/KvTabs.vue';
+import KvButton from '../../../../vue/KvButton.vue';
+import addVueRouter from '../../utils/addVueRouter';
 
 // jsdom does not include scrollIntoView, so define it to avoid errors when switching tabs
 window.HTMLElement.prototype.scrollIntoView = () => {};
@@ -30,7 +32,6 @@ function renderOneTabSet() {
 		`,
 	});
 }
-
 describe('KvTabs', () => {
 	it('has no automated accessibility violations', async () => {
 		const { container } = renderOneTabSet();
@@ -96,4 +97,71 @@ describe('KvTabs', () => {
 		userEvent.keyboard('{Home}');
 		expect(await findByText('First Panel')).toBeVisible();
 	});
+
+	it('verifies setTab method when called by a ref', async () => {
+		const {
+			getByRole,
+			getAllByRole,
+			getByText,
+		} = render({
+			components: {
+				KvTabs,
+				KvTab,
+				KvTabPanel,
+				KvButton,
+			},
+			data() {
+				return { selectedIndexCheck: null };
+			},
+			template: `
+				<div data-testid="tabContainer">
+					<kv-tabs @tab-changed="handleTabChanged" data-testid="tabInstance" ref="tabsRef">
+						<template #tabNav>
+							<kv-tab forPanel="demo-1-first">First</kv-tab>
+							<kv-tab forPanel="demo-1-second">Second</kv-tab>
+							<kv-tab forPanel="demo-1-third">Third</kv-tab>
+							<kv-tab forPanel="demo-1-forth">Fourth is longer</kv-tab>
+						</template>
+						<template #tabPanels>
+							<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+							<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+							<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+							<kv-tab-panel id="demo-1-forth"><p>Fourth Panel</p></kv-tab-panel>
+						</template>
+					</kv-tabs>
+					<kv-button @click.native.prevent="setTabButtonClick(1)" role="tabSetButton">Set Tab</kv-button>
+					<p>Tab index is {{ selectedIndexCheck }}</p>
+				</div>
+			`,
+			methods: {
+				handleTabChanged() {
+					this.selectedIndexCheck = this?.$refs?.tabsRef?.tabContext?.selectedIndex;
+				},
+				setTabButtonClick() {
+					this?.$refs?.tabsRef?.tabContext?.setTab(0);
+				},
+			},
+		}, addVueRouter());
+
+		// check for our elements
+		expect(getByRole('tabSetButton')).toBeDefined();
+		expect(getByRole('tablist')).toBeDefined();
+		expect(getAllByRole('tab').length).toBe(4);
+
+		// Click third tab and expect the third panel to be visible
+		await fireEvent.click(getByText('Third'));
+		expect(getByText('First Panel')).not.toBeVisible();
+		expect(getByText('Third Panel')).toBeVisible();
+		// Test access and updating of property ref
+		// expect the selected index value to be set to our new tab index
+		expect(getByText('Tab index is 2')).toBeVisible();
+
+		// click the button to test our ref method
+		await userEvent.click(getByText('Set Tab'));
+		expect(getByText('Third Panel')).not.toBeVisible();
+		expect(getByText('First Panel')).toBeVisible();
+		// Test access and updating of property ref
+		// expect the selected index value to be set to our new tab index
+		expect(getByText('Tab index is 0')).toBeVisible();
+	});
 });

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/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/KvTabs.vue

@@ -44,8 +44,8 @@
  * ```
  *  <kv-tabs>
  *   <template #tabNav>
- *    <kv-tab for="foo">Foo</kv-tab>
- *    <kv-tab for="bar">Bar</kv-tab>
+ *    <kv-tab for-panel="foo">Foo</kv-tab>
+ *    <kv-tab for-panel="bar">Bar</kv-tab>
  *   </template>
  *   <template #tabPanels>
  *    <kv-tab-panel id="foo">Foo content</kv-tab-panel>
@@ -163,6 +163,7 @@ export default {
 		return {
 			handleKeyDown,
 			selectedTabEl,
+			tabContext,
 		};
 	},
 };

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,