@kiva/kv-components 3.91.0 → 3.92.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.92.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.91.1...@kiva/kv-components@3.92.0) (2024-08-16)
+
+
+### Features
+
+* dotted version for carousel controls ([#444](https://github.com/kiva/kv-ui-elements/issues/444)) ([a719d75](https://github.com/kiva/kv-ui-elements/commit/a719d75ce7622695668fe1467bf1129d916800c2))
+
+
+
+
+
+## [3.91.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.91.0...@kiva/kv-components@3.91.1) (2024-08-14)
+
+
+### Bug Fixes
+
+* resolve issue found in ui vue migration ([0050e5e](https://github.com/kiva/kv-ui-elements/commit/0050e5e93cf189f18fda0c468a577546f5f1911c))
+
+
+
+
+
 # [3.91.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.90.5...@kiva/kv-components@3.91.0) (2024-08-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.91.0",
+  "version": "3.92.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -82,5 +82,5 @@
       "optional": true
     }
   },
-  "gitHead": "d7a9fad77e1a68fd3d4483619c937c37a3807503"
+  "gitHead": "fb2c7d62581911858d5b04e6d1dd81f371981a03"
 }

package/vue/KvCarousel.vue

@@ -30,7 +30,7 @@
 		</div>
 		<!-- Carousel Controls -->
 		<div
-			v-if="slideIndicatorCount > 1"
+			v-if="slideIndicatorCount > 1 && !isDotted"
 			class="kv-carousel__controls tw-flex
 			tw-justify-between md:tw-justify-center tw-items-center
 			tw-mt-4 tw-w-full"
@@ -75,6 +75,26 @@
 				<span class="tw-sr-only">Show next slide</span>
 			</button>
 		</div>
+		<!-- Dotted Controls -->
+		<div
+			v-else-if="slideIndicatorCount > 1"
+			class="kv-carousel__controls tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-mt-4 tw-w-full"
+		>
+			<button
+				v-for="slide in slideIndicatorCount"
+				:key="slide"
+				@click="goToSlide(slide - 1)"
+			>
+				<div
+					class="tw-rounded-full tw-border tw-transition tw-duration-500 tw-ease-in-out"
+					:class="[
+						{ 'tw-bg-black tw-border-black tw-h-1.5 tw-w-1.5': currentIndex === slide - 1 },
+						{ 'tw-bg-tertiary tw-border-tertiary tw-h-1 tw-w-1': currentIndex !== slide - 1 }
+					]"
+				>
+				</div>
+			</button>
+		</div>
 		<!-- Aside Buttons -->
 		<template v-if="asideControls">
 			<div
@@ -192,6 +212,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Dotted controls version of the carousel
+		 * */
+		isDotted: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',

package/vue/KvLightbox.vue

@@ -217,16 +217,23 @@ export default {
 		const kvLightbox = ref(null);
 		const kvLightboxBody = ref(null);
 		const controlsRef = ref(null);
+		const activateFocusTrap = ref(null);
+		const deactivateFocusTrap = ref(null);
 
-		const trapElements = computed(() => [
-			kvLightbox.value, // This lightbox
-			'[role="alert"]', // Any open toasts/alerts on the page
-		]);
-		const {
-			activate: activateFocusTrap,
-			deactivate: deactivateFocusTrap,
-		} = useFocusTrap(trapElements, {
-			allowOutsideClick: true, // allow clicking outside the lightbox to close it
+		// Ensure the lightbox ref isn't null
+		nextTick(() => {
+			const trapElements = computed(() => [
+				kvLightbox.value, // This lightbox
+				'[role="alert"]', // Any open toasts/alerts on the page
+			]);
+			const {
+				activate,
+				deactivate,
+			} = useFocusTrap(trapElements, {
+				allowOutsideClick: true, // allow clicking outside the lightbox to close it
+			});
+			activateFocusTrap.value = activate;
+			deactivateFocusTrap.value = deactivate;
 		});
 
 		let makePageInertCallback = null;
@@ -242,7 +249,7 @@ export default {
 		const hide = (closedBy = '') => {
 			// scroll any content inside the lightbox back to top
 			if (kvLightbox.value && kvLightboxBody.value) {
-				deactivateFocusTrap();
+				deactivateFocusTrap.value?.();
 				kvLightboxBody.value.scrollTop = 0;
 				unlockPrintSingleEl(kvLightboxBody.value);
 			}
@@ -279,7 +286,7 @@ export default {
 
 				nextTick(() => {
 					if (kvLightbox.value && kvLightboxBody.value) {
-						activateFocusTrap();
+						activateFocusTrap.value?.();
 						makePageInertCallback = makePageInert(kvLightbox.value);
 						lockPrintSingleEl(kvLightboxBody.value);
 					}

package/vue/stories/KvCarousel.stories.js

@@ -394,3 +394,17 @@ export const AsideControls = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const Dotted = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			style="max-width: 400px;"
+			is-dotted="true"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});