@kiva/kv-components 3.83.2 → 3.85.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.85.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.84.0...@kiva/kv-components@3.85.0) (2024-07-10)
+
+
+### Features
+
+* carousel controls arrow added for aside version ([#423](https://github.com/kiva/kv-ui-elements/issues/423)) ([f1f8fb3](https://github.com/kiva/kv-ui-elements/commit/f1f8fb337b4a8ffb343e8341ce7a8d932805df1f))
+
+
+
+
+
+# [3.84.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.2...@kiva/kv-components@3.84.0) (2024-07-08)
+
+
+### Features
+
+* aside controls variant added to carousel component ([#420](https://github.com/kiva/kv-ui-elements/issues/420)) ([d50ca9e](https://github.com/kiva/kv-ui-elements/commit/d50ca9eaa9023d437a5b9e385b95bfdecee7b122))
+
+
+
+
+
 ## [3.83.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.1...@kiva/kv-components@3.83.2) (2024-06-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.83.2",
+  "version": "3.85.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "b24be12d68662bf99ee0d17a1ed6f4b788ae0ce5"
+  "gitHead": "70ca09fb749daec6850f8eba2a97023a1b43f47c"
 }

package/vue/KvCarousel.vue

@@ -2,11 +2,13 @@
 	<section
 		ref="rootEl"
 		class="kv-carousel tw-overflow-hidden tw-w-full"
+		:class="{ 'lg:tw-relative': asideControls }"
 		aria-label="carousel"
 	>
 		<!-- Carousel Content -->
 		<div
 			class="tw-flex tw-gap-x-4"
+			:class="{ 'tw-mx-auto aside-controls-content': asideControls }"
 			@click.capture="onCarouselContainerClick"
 		>
 			<div
@@ -32,6 +34,7 @@
 			class="kv-carousel__controls tw-flex
 			tw-justify-between md:tw-justify-center tw-items-center
 			tw-mt-4 tw-w-full"
+			:class="{ 'lg:tw-hidden': asideControls }"
 		>
 			<button
 				class="tw-text-primary
@@ -45,7 +48,7 @@
 			>
 				<kv-material-icon
 					class="tw-w-4"
-					:icon="mdiChevronLeft"
+					:icon="asideControls? mdiArrowLeft : mdiChevronLeft"
 				/>
 				<span class="tw-sr-only">Show previous slide</span>
 			</button>
@@ -67,11 +70,55 @@
 			>
 				<kv-material-icon
 					class="tw-w-4"
-					:icon="mdiChevronRight"
+					:icon="asideControls ? mdiArrowRight : mdiChevronRight"
 				/>
 				<span class="tw-sr-only">Show next slide</span>
 			</button>
 		</div>
+		<!-- Aside Buttons -->
+		<template v-if="asideControls">
+			<div
+				class="tw-hidden lg:tw-flex tw-absolute tw-h-full tw-top-0 tw-items-center"
+				style="background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); width: 8%;"
+			>
+				<button
+					class="tw-text-primary tw-bg-gray-100
+						tw-rounded-full
+						tw-h-6 tw-w-6 tw-ml-3
+						tw-flex tw-items-center tw-justify-center
+						disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollPrev()"
+					@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiArrowLeft"
+					/>
+					<span class="tw-sr-only">Show previous slide</span>
+				</button>
+			</div>
+			<div
+				class="tw-hidden lg:tw-flex tw-absolute tw-h-full
+					tw-top-0 tw-right-0 tw-items-center tw-justify-end tw-w-16"
+				style="background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); width: 8%;"
+			>
+				<button
+					class="tw-text-primary tw-bg-gray-100
+						tw-rounded-full
+						tw-h-6 tw-w-6 tw-mr-3
+						tw-flex tw-items-center tw-justify-center
+						disabled:tw-opacity-low disabled:tw-cursor-default"
+					:disabled="embla && !embla.canScrollNext()"
+					@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+				>
+					<kv-material-icon
+						class="tw-w-4"
+						:icon="mdiArrowRight"
+					/>
+					<span class="tw-sr-only">Show next slide</span>
+				</button>
+			</div>
+		</template>
 	</section>
 </template>
 
@@ -85,7 +132,12 @@ import {
 	nextTick,
 } from 'vue-demi';
 import EmblaCarousel from 'embla-carousel';
-import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
+import {
+	mdiChevronLeft,
+	mdiChevronRight,
+	mdiArrowLeft,
+	mdiArrowRight,
+} from '@mdi/js';
 import { throttle } from '../utils/throttle';
 
 import KvMaterialIcon from './KvMaterialIcon.vue';
@@ -133,6 +185,13 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Aside controls version of the carousel
+		 * */
+		asideControls: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	emits: [
 		'change',
@@ -301,6 +360,8 @@ export default {
 			rootEl,
 			mdiChevronLeft,
 			mdiChevronRight,
+			mdiArrowLeft,
+			mdiArrowRight,
 			embla,
 			slides,
 			currentIndex,
@@ -319,3 +380,11 @@ export default {
 	},
 };
 </script>
+
+<style scoped>
+.aside-controls-content {
+	@screen lg {
+		width: 82%;
+	}
+}
+</style>

package/vue/stories/KvCarousel.stories.js

@@ -353,3 +353,44 @@ export const CustomStartIndex = () => ({
 		</kv-carousel>
 	`,
 });
+
+export const AsideControls = () => ({
+	components: {
+		KvCarousel,
+		KvButton,
+	},
+	template: `
+		<kv-carousel
+			:embla-options="{ loop: false }"
+			:multiple-slides-visible="true"
+			:aside-controls="true"
+			slides-to-scroll="visible"
+			class="tw-w-full"
+		>
+			<template #slide1>
+				${generateLoanCardTemplate(1)}
+			</template>
+			<template #slide2>
+				${generateLoanCardTemplate(2)}
+			</template>
+			<template #slide3>
+				${generateLoanCardTemplate(3)}
+			</template>
+			<template #slide4>
+				${generateLoanCardTemplate(4)}
+			</template>
+			<template #slide5>
+				${generateLoanCardTemplate(5)}
+			</template>
+			<template #slide6>
+				${generateLoanCardTemplate(6)}
+			</template>
+			<template #slide7>
+				${generateLoanCardTemplate(7)}
+			</template>
+			<template #slide8>
+				${generateLoanCardTemplate(8)}
+			</template>
+		</kv-carousel>
+	`,
+});