@kiva/kv-components 4.8.3 → 4.8.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.
 
+## [4.8.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.3...@kiva/kv-components@4.8.4) (2025-01-10)
+
+
+### Bug Fixes
+
+* carousel autoplay issues ([ae1e7eb](https://github.com/kiva/kv-ui-elements/commit/ae1e7ebf82181b3c9fed505d3ad5afce41dcabba))
+
+
+
+
+
 ## [4.8.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.2...@kiva/kv-components@4.8.3) (2025-01-10)
 
 

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

@@ -189,12 +189,18 @@ export const AutoPlayButton = () => ({
 	},
 	data: () => ({
 		isAutoplaying: false,
+		currentSlide: 0,
 	}),
 	mounted() {
 		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
 			this.isAutoplaying = newValue;
 		});
 	},
+	methods: {
+		changeEvent(index) {
+			this.currentSlide = index;
+		},
+	},
 	template: `
 		<div>
 			<kv-vertical-carousel
@@ -202,6 +208,7 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@change="changeEvent"
 			>
 				${defaultCarouselSlides}
 			</kv-vertical-carousel>
@@ -209,6 +216,60 @@ export const AutoPlayButton = () => ({
 			<br/>
 			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 			<a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
+			<p>Current Slide: {{ currentSlide }}</p>
+		</div>
+	`,
+});
+
+export const AutoPlayWithDynamicSlides = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	data: () => ({
+		isAutoplaying: false,
+		currentSlide: 0,
+	}),
+	mounted() {
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
+		});
+	},
+	methods: {
+		changeEvent(index) {
+			this.currentSlide = index;
+		},
+	},
+	template: `
+		<div>
+			<kv-vertical-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@change="changeEvent"
+			>
+					<template #slide1 >
+						<img src="https://placehold.co/400x150/${randomHexColor(1)}/000000">
+						<p style="background-color: #${randomHexColor(1)};" v-if="currentSlide === 0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+					<template #slide2>
+						<img src="https://placehold.co/400x150/${randomHexColor(2)}/000000">
+						<p style="background-color: #${randomHexColor(2)};" v-if="currentSlide === 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+					<template #slide3>
+						<img src="https://placehold.co/400x150/${randomHexColor(3)}/000000">
+						<p style="background-color: #${randomHexColor(3)};" v-if="currentSlide === 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+					<template #slide4>
+						<img src="https://placehold.co/400x150/${randomHexColor(4)}/000000">
+						<p style="background-color: #${randomHexColor(4)};" v-if="currentSlide === 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+			</kv-vertical-carousel>
+			<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>
+			<p>Current Slide: {{ currentSlide }}</p>
 		</div>
 	`,
 });

package/dist/utils/carousels.cjs

@@ -92,15 +92,10 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
-    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await (0, import_vue_demi.nextTick)();
       goToSlide(index);
     }
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (autoplay) {
-      autoplay.stop();
-    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -134,7 +129,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slideIndicatorListLength();
   };
   const onCarouselContainerClick = (e) => {
-    if (embla.value && !embla.value.clickAllowed()) {
+    if (embla.value) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -145,15 +140,18 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     }
     return false;
   };
-  (0, import_vue_demi.onMounted)(async () => {
-    var _a2, _b, _c;
-    const combinedPluginOptions = [];
+  const combinedPluginOptions = (0, import_vue_demi.computed)(() => {
+    const options = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
-      combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
+      options.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
     }
     if (fadeEnabled.value) {
-      combinedPluginOptions.push((0, import_embla_carousel_fade.default)());
+      options.push((0, import_embla_carousel_fade.default)());
     }
+    return options;
+  });
+  (0, import_vue_demi.onMounted)(async () => {
+    var _a2, _b, _c;
     embla.value = (0, import_embla_carousel.default)(rootEl.value, {
       loop: true,
       containScroll: "trimSnaps",
@@ -161,7 +159,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       align: "start",
       ...extraEmblaOptions,
       ...emblaOptions.value
-    }, combinedPluginOptions);
+    }, combinedPluginOptions.value);
     if (slidesToScroll.value === "visible") {
       reInitVisible();
       embla.value.on(
@@ -179,7 +177,12 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slides.value = embla.value.slideNodes();
     slideIndicatorListLength();
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.on("select", () => {
+      var _a3, _b2;
       currentIndex.value = embla.value.selectedScrollSnap();
+      const autoplay = (_b2 = (_a3 = embla.value) == null ? void 0 : _a3.plugins()) == null ? void 0 : _b2.autoplay;
+      if (autoplay) {
+        embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
+      }
       (0, import_vue_demi.nextTick)(() => {
         emit("change", currentIndex);
       });

package/dist/utils/carousels.js

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

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

@@ -56,15 +56,10 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
-    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await nextTick();
       goToSlide(index);
     }
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (autoplay) {
-      autoplay.stop();
-    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -98,7 +93,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slideIndicatorListLength();
   };
   const onCarouselContainerClick = (e) => {
-    if (embla.value && !embla.value.clickAllowed()) {
+    if (embla.value) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -109,15 +104,18 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     }
     return false;
   };
-  onMounted(async () => {
-    var _a2, _b, _c;
-    const combinedPluginOptions = [];
+  const combinedPluginOptions = computed(() => {
+    const options = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
-      combinedPluginOptions.push(Autoplay(autoplayOptions.value));
+      options.push(Autoplay(autoplayOptions.value));
     }
     if (fadeEnabled.value) {
-      combinedPluginOptions.push(Fade());
+      options.push(Fade());
     }
+    return options;
+  });
+  onMounted(async () => {
+    var _a2, _b, _c;
     embla.value = EmblaCarousel(rootEl.value, {
       loop: true,
       containScroll: "trimSnaps",
@@ -125,7 +123,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       align: "start",
       ...extraEmblaOptions,
       ...emblaOptions.value
-    }, combinedPluginOptions);
+    }, combinedPluginOptions.value);
     if (slidesToScroll.value === "visible") {
       reInitVisible();
       embla.value.on(
@@ -143,7 +141,12 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slides.value = embla.value.slideNodes();
     slideIndicatorListLength();
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.on("select", () => {
+      var _a3, _b2;
       currentIndex.value = embla.value.selectedScrollSnap();
+      const autoplay = (_b2 = (_a3 = embla.value) == null ? void 0 : _a3.plugins()) == null ? void 0 : _b2.autoplay;
+      if (autoplay) {
+        embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
+      }
       nextTick(() => {
         emit("change", currentIndex);
       });

package/dist/utils/index.cjs

@@ -200,15 +200,10 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     embla.value.scrollTo(index);
   };
   const handleUserInteraction = async (index, interactionType) => {
-    var _a2, _b;
     if (index !== null && typeof index !== "undefined") {
       await (0, import_vue_demi.nextTick)();
       goToSlide(index);
     }
-    const autoplay = (_b = (_a2 = embla.value) == null ? void 0 : _a2.plugins()) == null ? void 0 : _b.autoplay;
-    if (autoplay) {
-      autoplay.stop();
-    }
     emit("interact-carousel", interactionType);
   };
   const toggleAutoPlay = () => {
@@ -242,7 +237,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slideIndicatorListLength();
   };
   const onCarouselContainerClick = (e) => {
-    if (embla.value && !embla.value.clickAllowed()) {
+    if (embla.value) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -253,15 +248,18 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     }
     return false;
   };
-  (0, import_vue_demi.onMounted)(async () => {
-    var _a2, _b, _c;
-    const combinedPluginOptions = [];
+  const combinedPluginOptions = (0, import_vue_demi.computed)(() => {
+    const options = [];
     if (Object.keys(autoplayOptions.value).length !== 0) {
-      combinedPluginOptions.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
+      options.push((0, import_embla_carousel_autoplay.default)(autoplayOptions.value));
     }
     if (fadeEnabled.value) {
-      combinedPluginOptions.push((0, import_embla_carousel_fade.default)());
+      options.push((0, import_embla_carousel_fade.default)());
     }
+    return options;
+  });
+  (0, import_vue_demi.onMounted)(async () => {
+    var _a2, _b, _c;
     embla.value = (0, import_embla_carousel.default)(rootEl.value, {
       loop: true,
       containScroll: "trimSnaps",
@@ -269,7 +267,7 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
       align: "start",
       ...extraEmblaOptions,
       ...emblaOptions.value
-    }, combinedPluginOptions);
+    }, combinedPluginOptions.value);
     if (slidesToScroll.value === "visible") {
       reInitVisible();
       embla.value.on(
@@ -287,7 +285,12 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slides.value = embla.value.slideNodes();
     slideIndicatorListLength();
     (_a2 = embla == null ? void 0 : embla.value) == null ? void 0 : _a2.on("select", () => {
+      var _a3, _b2;
       currentIndex.value = embla.value.selectedScrollSnap();
+      const autoplay = (_b2 = (_a3 = embla.value) == null ? void 0 : _a3.plugins()) == null ? void 0 : _b2.autoplay;
+      if (autoplay) {
+        embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
+      }
       (0, import_vue_demi.nextTick)(() => {
         emit("change", currentIndex);
       });

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.8.3",
+  "version": "4.8.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -98,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "cc7562704a59c7de5f93db527777d43c2c78b174"
+  "gitHead": "234b9a444b181da8f198a9dbb456e5b4162a4838"
 }

package/utils/carousels.js

@@ -71,12 +71,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 			goToSlide(index);
 		}
 
-		/** Stop autoplay on user interaction */
-		const autoplay = embla.value?.plugins()?.autoplay;
-		if (autoplay) {
-			autoplay.stop();
-		}
-
 		/**
 		 * Fires when the user interacts with the carousel.
 		 * Contains the interaction type (swipe-left, click-left-arrow, etc.)
@@ -134,7 +128,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 	};
 	const onCarouselContainerClick = (e) => {
 		// If we're dragging, block click handlers within slides
-		if (embla.value && !embla.value.clickAllowed()) {
+		if (embla.value) {
 			e.preventDefault();
 			e.stopPropagation();
 		}
@@ -153,14 +147,18 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		return false;
 	};
 
-	onMounted(async () => {
-		const combinedPluginOptions = [];
+	const combinedPluginOptions = computed(() => {
+		const options = [];
 		if (Object.keys(autoplayOptions.value).length !== 0) {
-			combinedPluginOptions.push(Autoplay(autoplayOptions.value));
+			options.push(Autoplay(autoplayOptions.value));
 		}
 		if (fadeEnabled.value) {
-			combinedPluginOptions.push(Fade());
+			options.push(Fade());
 		}
+		return options;
+	});
+
+	onMounted(async () => {
 		embla.value = EmblaCarousel(rootEl.value, {
 			loop: true,
 			containScroll: 'trimSnaps',
@@ -168,7 +166,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 			align: 'start',
 			...extraEmblaOptions,
 			...emblaOptions.value,
-		}, combinedPluginOptions);
+		}, combinedPluginOptions.value);
 
 		if (slidesToScroll.value === 'visible') {
 			reInitVisible();
@@ -192,6 +190,17 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 
 		embla?.value?.on('select', () => {
 			currentIndex.value = embla.value.selectedScrollSnap();
+
+			/** After the select event, it is possible that embla will itself trigger a reinit.
+			 * For example, if the act of selecting a slide causes it to change dimensions and the carousel
+			 * needs to recalculate.
+			 * When this reinit happens, autoplay settings will reset to the initial plugin options.
+			 * Set playOnInit equal to the current state of autoplay to prevent this.
+			*/
+			const autoplay = embla.value?.plugins()?.autoplay;
+			if (autoplay) {
+				embla.value.plugins().autoplay.options.playOnInit = autoplay.isPlaying();
+			}
 			/**
 			 * The index of the slide that the carousel has changed to
 			 * @event change

package/vue/stories/KvVerticalCarousel.stories.js

@@ -189,12 +189,18 @@ export const AutoPlayButton = () => ({
 	},
 	data: () => ({
 		isAutoplaying: false,
+		currentSlide: 0,
 	}),
 	mounted() {
 		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
 			this.isAutoplaying = newValue;
 		});
 	},
+	methods: {
+		changeEvent(index) {
+			this.currentSlide = index;
+		},
+	},
 	template: `
 		<div>
 			<kv-vertical-carousel
@@ -202,6 +208,7 @@ export const AutoPlayButton = () => ({
 				style="max-width: 400px;"
 				:embla-options="{ loop: false }"
 				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@change="changeEvent"
 			>
 				${defaultCarouselSlides}
 			</kv-vertical-carousel>
@@ -209,6 +216,60 @@ export const AutoPlayButton = () => ({
 			<br/>
 			<p>AutoPlay is: {{ isAutoplaying ? 'ON' : 'OFF' }}</p>
 			<a href="#" @click.native.prevent="$refs.sampleCarousel.goToSlide(0)">Go To Slide 0</a>
+			<p>Current Slide: {{ currentSlide }}</p>
+		</div>
+	`,
+});
+
+export const AutoPlayWithDynamicSlides = () => ({
+	components: {
+		KvVerticalCarousel,
+	},
+	data: () => ({
+		isAutoplaying: false,
+		currentSlide: 0,
+	}),
+	mounted() {
+		watch(() => this.$refs?.sampleCarousel?.isAutoplaying, (newValue) => {
+			this.isAutoplaying = newValue;
+		});
+	},
+	methods: {
+		changeEvent(index) {
+			this.currentSlide = index;
+		},
+	},
+	template: `
+		<div>
+			<kv-vertical-carousel
+				ref="sampleCarousel"
+				style="max-width: 400px;"
+				:embla-options="{ loop: false }"
+				:autoplay-options="{ playOnInit: true, delay: 3000 }"
+				@change="changeEvent"
+			>
+					<template #slide1 >
+						<img src="https://placehold.co/400x150/${randomHexColor(1)}/000000">
+						<p style="background-color: #${randomHexColor(1)};" v-if="currentSlide === 0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+					<template #slide2>
+						<img src="https://placehold.co/400x150/${randomHexColor(2)}/000000">
+						<p style="background-color: #${randomHexColor(2)};" v-if="currentSlide === 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+					<template #slide3>
+						<img src="https://placehold.co/400x150/${randomHexColor(3)}/000000">
+						<p style="background-color: #${randomHexColor(3)};" v-if="currentSlide === 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+					<template #slide4>
+						<img src="https://placehold.co/400x150/${randomHexColor(4)}/000000">
+						<p style="background-color: #${randomHexColor(4)};" v-if="currentSlide === 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+					</template>
+			</kv-vertical-carousel>
+			<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>
+			<p>Current Slide: {{ currentSlide }}</p>
 		</div>
 	`,
 });