@kiva/kv-components 3.92.1 → 3.93.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.
 
+# [3.93.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.92.1...@kiva/kv-components@3.93.0) (2024-08-22)
+
+
+### Features
+
+* carousel circle effect ([c982be4](https://github.com/kiva/kv-ui-elements/commit/c982be4d088f18cb53b5d97b3071fa7dac72e1c6))
+
+
+
+
+
 ## [3.92.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.92.0...@kiva/kv-components@3.92.1) (2024-08-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.92.1",
+  "version": "3.93.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -82,5 +82,5 @@
       "optional": true
     }
   },
-  "gitHead": "52085aeb1c92162fd732cd3fe4cb9839cdd49b16"
+  "gitHead": "56fc9a0c3f8657e2bc69c6acecf01009ec86ee57"
 }

package/vue/KvCarousel.vue

@@ -8,7 +8,10 @@
 		<!-- Carousel Content -->
 		<div
 			class="tw-flex tw-gap-x-4"
-			:class="{ 'tw-mx-auto aside-controls-content': asideControls }"
+			:class="{
+				'tw-mx-auto aside-controls-content': asideControls,
+				'circle-carousel': inCircle
+			}"
 			@click.capture="onCarouselContainerClick"
 		>
 			<div
@@ -20,7 +23,7 @@
 				:aria-current="currentIndex === index ? 'true' : 'false'"
 				:aria-hidden="isAriaHidden(index)? 'true' : 'false'"
 				:tab-index="isAriaHidden(index) ? '-1' : false"
-				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth }"
+				:class="{ 'tw-w-full': !multipleSlidesVisible || slideMaxWidth, 'cirle-slide': inCircle }"
 				:style="slideMaxWidth ? `max-width:${slideMaxWidth}` :''"
 			>
 				<slot
@@ -219,6 +222,13 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Enables carousel slides to have a circle effect
+		 * */
+		inCircle: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',
@@ -414,4 +424,23 @@ export default {
 		width: 82%;
 	}
 }
+
+.cirle-slide {
+	width: auto;
+}
+
+.cirle-slide.is-selected >>> img {
+	opacity: 1;
+	transform: scale(1);
+	max-width: 300px;
+}
+
+.cirle-slide:not(.is-selected) >>> img {
+	opacity: 0.5;
+	transform: scale(0.5);
+}
+
+.circle-carousel {
+	margin: 0 auto;
+}
 </style>

package/vue/stories/KvCarousel.stories.js

@@ -402,7 +402,23 @@ export const Dotted = () => ({
 	template: `
 		<kv-carousel
 			style="max-width: 400px;"
-			is-dotted="true"
+			:is-dotted="true"
+		>
+			${defaultCarouselSlides}
+		</kv-carousel>
+	`,
+});
+
+export const ThreeDimensional = () => ({
+	components: {
+		KvCarousel,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false, align: 'center' }"
+			style="max-width: 600px;"
+			:is-dotted="true"
+			:in-circle="true"
 		>
 			${defaultCarouselSlides}
 		</kv-carousel>