@kiva/kv-components 4.7.1 → 4.8.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.8.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.0...@kiva/kv-components@4.8.1) (2025-01-09)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+# [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/KvCommentsAdd.vue

@@ -116,20 +116,20 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> input {
+:deep(input) {
 	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
 }
 
->>> input:focus {
+:deep(input:focus) {
 	@apply tw-border-tertiary;
 	box-shadow: none;
 }
 
->>> button > span {
+:deep(button > span) {
 	@apply tw-min-h-0;
 }
 
->>> button > span > span {
+:deep(button > span > span) {
 	@apply tw-py-0 tw-px-0.5;
 }
 </style>

package/dist/components/KvCommentsHeartButton.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style scoped>
-.filled >>> svg {
+.filled :deep(svg) {
     fill: #F60059;
 }
 </style>

package/dist/components/KvCommentsReplyButton.vue

@@ -38,15 +38,15 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> span {
+:deep(span) {
 	@apply tw-min-h-0;
 }
 
->>> span > span {
+:deep(span > span) {
 	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
 }
 
->>> svg {
+:deep(svg) {
 	@apply tw-mx-0.5;
 }
 </style>

package/dist/components/KvInlineActivityCard.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.activity-avatar, .activity-avatar >>> img, .activity-avatar >>> div {
+.activity-avatar, .activity-avatar :deep(img), .activity-avatar :deep(div) {
     @apply tw-w-4 tw-h-4;
 }
 </style>

package/dist/components/KvIntroductionLoanCard.vue

@@ -425,7 +425,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.loan-callouts >>> span {
+.loan-callouts :deep(span) {
 	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
@@ -443,7 +443,7 @@ export default {
 .loan-card-name {
 	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
 }
-.loan-bookmark >>> button {
+.loan-bookmark :deep(button) {
 	@apply !tw-rounded-t-none;
 }
 </style>

package/dist/components/KvLendCta.vue

@@ -550,39 +550,39 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.amountDropdownWrapper >>> select {
+.amountDropdownWrapper :deep(select) {
 	border-radius: 14px 0 0 14px;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-0;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-1;
 }
 
-.lendButtonWrapper >>> span:first-child {
+.lendButtonWrapper :deep(span:first-child) {
 	border-radius: 0 14px 14px 0;
 }
 
-.filtered-dropdown >>> select {
+.filtered-dropdown :deep(select) {
 	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
 }
 
-.unselected-dropdown >>> select {
+.unselected-dropdown :deep(select) {
 	@apply tw-border-gray-400;
 }
 
-.selected-dropdown >>> select {
+.selected-dropdown :deep(select) {
 	@apply tw-border-eco-green-4;
 }
 
-.preset-option >>> span.tw-w-full:first-child {
+.preset-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-2 tw-border-gray-400;
 }
 
-.selected-option >>> span.tw-w-full:first-child {
+.selected-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-eco-green-4;
 }
 </style>

package/dist/components/KvLoanActivities.vue

@@ -233,24 +233,24 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.loan-activity >>> #kvLightboxBody {
+.loan-activity :deep(#kvLightboxBody) {
 	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
 }
 
-.loan-activity >>> div > div > div > div > div:first-child {
+.loan-activity :deep(div > div > div > div > div:first-child) {
 	box-shadow: var(--kiva-box-shadow);
 }
 
-.loan-activity >>> div > div > div > div > div:first-child > div,
-.loan-activity >>> #kvLightboxBody div {
+.loan-activity :deep(div > div > div > div > div:first-child > div),
+.loan-activity :deep(#kvLightboxBody div) {
 	box-shadow: none;
 }
 
-.loan-activity >>> #kvLightboxBody > div:first-child {
+.loan-activity :deep(#kvLightboxBody > div:first-child) {
 	@apply tw-px-4;
 }
 
-.loan-activity >>> [role=dialog] {
+.loan-activity :deep([role=dialog]) {
 	min-width: 840px;
 	max-width: 840px !important;
 
@@ -260,7 +260,7 @@ export default {
 	}
 }
 
-.loan-activity >>> #kvLightboxBody > div:nth-child(2) {
+.loan-activity :deep(#kvLightboxBody > div:nth-child(2)) {
 	@apply tw-px-4;
 
 	box-shadow: var(--kiva-negative-box-shadow);

package/dist/components/KvWideLoanCard.vue

@@ -427,7 +427,7 @@ export default {
 	@apply tw-no-underline;
 }
 /** Unique to this loan card */
-.loan-callouts >>> div{
+.loan-callouts :deep(div) {
 	@apply tw-flex-wrap tw-h-auto;
 }
 </style>

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.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -98,5 +98,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "ee93a71b07a2a0228281ead8f175f152fc533ac8"
+  "gitHead": "cfdd1a3885608643e3ddf8110dfece42426109aa"
 }

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

@@ -116,20 +116,20 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> input {
+:deep(input) {
 	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
 }
 
->>> input:focus {
+:deep(input:focus) {
 	@apply tw-border-tertiary;
 	box-shadow: none;
 }
 
->>> button > span {
+:deep(button > span) {
 	@apply tw-min-h-0;
 }
 
->>> button > span > span {
+:deep(button > span > span) {
 	@apply tw-py-0 tw-px-0.5;
 }
 </style>

package/vue/KvCommentsHeartButton.vue

@@ -64,7 +64,7 @@ export default {
 </script>
 
 <style scoped>
-.filled >>> svg {
+.filled :deep(svg) {
     fill: #F60059;
 }
 </style>

package/vue/KvCommentsReplyButton.vue

@@ -38,15 +38,15 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
->>> span {
+:deep(span) {
 	@apply tw-min-h-0;
 }
 
->>> span > span {
+:deep(span > span) {
 	@apply tw-py-0 tw-px-0.5 tw-flex tw-items-center;
 }
 
->>> svg {
+:deep(svg) {
 	@apply tw-mx-0.5;
 }
 </style>

package/vue/KvInlineActivityCard.vue

@@ -49,7 +49,7 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.activity-avatar, .activity-avatar >>> img, .activity-avatar >>> div {
+.activity-avatar, .activity-avatar :deep(img), .activity-avatar :deep(div) {
     @apply tw-w-4 tw-h-4;
 }
 </style>

package/vue/KvIntroductionLoanCard.vue

@@ -425,7 +425,7 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.loan-callouts >>> span {
+.loan-callouts :deep(span) {
 	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
@@ -443,7 +443,7 @@ export default {
 .loan-card-name {
 	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
 }
-.loan-bookmark >>> button {
+.loan-bookmark :deep(button) {
 	@apply !tw-rounded-t-none;
 }
 </style>

package/vue/KvLendCta.vue

@@ -550,39 +550,39 @@ export default {
 </script>
 
 <style lang="postcss" scoped>
-.amountDropdownWrapper >>> select {
+.amountDropdownWrapper :deep(select) {
 	border-radius: 14px 0 0 14px;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-0;
 }
 
-.lend-again >>> span {
+.lend-again :deep(span) {
 	@apply tw-px-1;
 }
 
-.lendButtonWrapper >>> span:first-child {
+.lendButtonWrapper :deep(span:first-child) {
 	border-radius: 0 14px 14px 0;
 }
 
-.filtered-dropdown >>> select {
+.filtered-dropdown :deep(select) {
 	@apply tw-rounded tw-border-2 tw-font-medium tw-cursor-pointer;
 }
 
-.unselected-dropdown >>> select {
+.unselected-dropdown :deep(select) {
 	@apply tw-border-gray-400;
 }
 
-.selected-dropdown >>> select {
+.selected-dropdown :deep(select) {
 	@apply tw-border-eco-green-4;
 }
 
-.preset-option >>> span.tw-w-full:first-child {
+.preset-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-2 tw-border-gray-400;
 }
 
-.selected-option >>> span.tw-w-full:first-child {
+.selected-option :deep(span.tw-w-full:first-child) {
 	@apply tw-border-eco-green-4;
 }
 </style>

package/vue/KvLoanActivities.vue

@@ -233,24 +233,24 @@ export default {
 </script>
 
 <style scoped lang="postcss">
-.loan-activity >>> #kvLightboxBody {
+.loan-activity :deep(#kvLightboxBody) {
 	@apply tw-flex tw-flex-col tw-px-0 tw-pb-0;
 }
 
-.loan-activity >>> div > div > div > div > div:first-child {
+.loan-activity :deep(div > div > div > div > div:first-child) {
 	box-shadow: var(--kiva-box-shadow);
 }
 
-.loan-activity >>> div > div > div > div > div:first-child > div,
-.loan-activity >>> #kvLightboxBody div {
+.loan-activity :deep(div > div > div > div > div:first-child > div),
+.loan-activity :deep(#kvLightboxBody div) {
 	box-shadow: none;
 }
 
-.loan-activity >>> #kvLightboxBody > div:first-child {
+.loan-activity :deep(#kvLightboxBody > div:first-child) {
 	@apply tw-px-4;
 }
 
-.loan-activity >>> [role=dialog] {
+.loan-activity :deep([role=dialog]) {
 	min-width: 840px;
 	max-width: 840px !important;
 
@@ -260,7 +260,7 @@ export default {
 	}
 }
 
-.loan-activity >>> #kvLightboxBody > div:nth-child(2) {
+.loan-activity :deep(#kvLightboxBody > div:nth-child(2)) {
 	@apply tw-px-4;
 
 	box-shadow: var(--kiva-negative-box-shadow);

package/vue/KvWideLoanCard.vue

@@ -427,7 +427,7 @@ export default {
 	@apply tw-no-underline;
 }
 /** Unique to this loan card */
-.loan-callouts >>> div{
+.loan-callouts :deep(div) {
 	@apply tw-flex-wrap tw-h-auto;
 }
 </style>

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>
 	`,
 });