@kiva/kv-components 4.7.1 → 4.8.0

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.
 
+# [4.8.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.7.1...@kiva/kv-components@4.8.0) (2025-01-09)
+
+
+### Features
+
+* make sure autoplay stops on carousel interactions ([a973201](https://github.com/kiva/kv-ui-elements/commit/a97320125351e82ccdd946abd91507a2f619b1d3))
+
+
+
+
+
 ## [4.7.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.7.0...@kiva/kv-components@4.7.1) (2025-01-09)
 
 

package/dist/components/stories/KvVerticalCarousel.stories.js

@@ -208,6 +208,7 @@ export const AutoPlayButton = () => ({
 			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
 			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
 		</div>
 	`,
 });

package/dist/utils/carousels.cjs

@@ -84,6 +84,11 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return slides.value.length - 1;
   });
   const goToSlide = (index) => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
@@ -180,11 +185,9 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       });
     });
     (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
-      console.log("autoplay:play");
       isAutoplaying.value = true;
     });
     (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
-      console.log("autoplay:stop");
       isAutoplaying.value = false;
     });
   });

package/dist/utils/carousels.js

@@ -1,6 +1,6 @@
 import {
   carouselUtil
-} from "./chunk-WLQNGWMC.js";
+} from "./chunk-WJV72VFJ.js";
 import "./chunk-HV3AUBFT.js";
 import "./chunk-YCNMJ4YV.js";
 export {

package/dist/utils/{chunk-WLQNGWMC.js → chunk-WJV72VFJ.js}

@@ -48,6 +48,11 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return slides.value.length - 1;
   });
   const goToSlide = (index) => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
@@ -144,11 +149,9 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       });
     });
     (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
-      console.log("autoplay:play");
       isAutoplaying.value = true;
     });
     (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
-      console.log("autoplay:stop");
       isAutoplaying.value = false;
     });
   });

package/dist/utils/index.cjs

@@ -192,6 +192,11 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     return slides.value.length - 1;
   });
   const goToSlide = (index) => {
+    var _a2, _b;
+    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
+    if (autoplay) {
+      autoplay.stop();
+    }
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
@@ -288,11 +293,9 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       });
     });
     (_b = embla == null ? void 0 : embla.value) == null ? void 0 : _b.on("autoplay:play", () => {
-      console.log("autoplay:play");
       isAutoplaying.value = true;
     });
     (_c = embla == null ? void 0 : embla.value) == null ? void 0 : _c.on("autoplay:stop", () => {
-      console.log("autoplay:stop");
       isAutoplaying.value = false;
     });
   });

package/dist/utils/index.js

@@ -31,7 +31,7 @@ import {
 } from "./chunk-3HK4G4NT.js";
 import {
   carouselUtil
-} from "./chunk-WLQNGWMC.js";
+} from "./chunk-WJV72VFJ.js";
 import {
   throttle
 } from "./chunk-HV3AUBFT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -98,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "ee93a71b07a2a0228281ead8f175f152fc533ac8"
+  "gitHead": "b556f273d9899af55972cc28add6c4bb536bb15e"
 }

package/utils/carousels.js

@@ -57,6 +57,11 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	 * @public This is a public method
 	 */
 	const goToSlide = (index) => {
+		/** Stop autoplay on go to slide interaction */
+		const autoplay = embla.value?.plugins()?.autoplay;
+		if (autoplay) {
+			autoplay.stop();
+		}
 		embla.value.scrollTo(index);
 	};
 
@@ -198,7 +203,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		});
 
 		embla?.value?.on('autoplay:play', () => {
-			console.log('autoplay:play');
 			/**
 			 * Fires when autoplay starts
 			 * @event autoplay-play
@@ -208,7 +212,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		});
 
 		embla?.value?.on('autoplay:stop', () => {
-			console.log('autoplay:stop');
 			/**
 			 * Fires when autoplay starts
 			 * @event autoplay-play

package/vue/stories/KvVerticalCarousel.stories.js

@@ -208,6 +208,7 @@ export const AutoPlayButton = () => ({
 			<a href="#" @click.native.prevent="$refs.sampleCarousel.toggleAutoPlay()" role="toggleAutoPlayButton">Toggle AutoPlay</a>
 			<br/>
 			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
+			<a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
 		</div>
 	`,
 });