@kiva/kv-components 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.2.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.1.0...@kiva/kv-components@4.2.0) (2024-12-09)
+
+
+### Bug Fixes
+
+* fix transition and remove unused code ([664b00e](https://github.com/kiva/kv-ui-elements/commit/664b00e1b27a6afd51ce9cc85069b9dd4f5dc5d7))
+* remove bg ([43c8a0d](https://github.com/kiva/kv-ui-elements/commit/43c8a0db295be4dd86b414a41145ebcc6e2606f8))
+* set default values for element ([c21852d](https://github.com/kiva/kv-ui-elements/commit/c21852d54e2c94f99098b5a234233addfe0a1ed2))
+
+
+### Features
+
+* sidesheet expand effect ([4fbe553](https://github.com/kiva/kv-ui-elements/commit/4fbe5533d437af0d77b6d79b2f8ec8880f51c3dd))
+
+
+
+
+
 # [4.1.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.0.1...@kiva/kv-components@4.1.0) (2024-12-02)
 
 

package/dist/components/KvSideSheet.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
 		v-if="visible"
-		class="tw-block tw-absolute tw-inset-0
-            tw-bg-black tw-transition-all tw-duration-150 tw-z-modal"
+		class="tw-block tw-fixed lg:tw-mt-0 md:tw-absolute tw-inset-0
+            tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal"
 		:class="{
 			'tw-bg-opacity-0 tw-delay-300': !open,
 			'tw-bg-opacity-low': open,
@@ -10,13 +10,21 @@
 		@click.self="closeSideSheet"
 	>
 		<div
-			class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white"
+			class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white
+				tw-overflow-hidden"
 			:class="{
-				'tw-w-0 tw-p-0 tw-delay-200': !open,
-				'lg:tw-w-1/2 tw-w-full tw-p-2': open,
+				'tw-w-0 tw-p-0 tw-delay-200 tw-opacity-low': !open,
+				'lg:tw-w-1/2 tw-w-full tw-p-2 tw-opacity-full': open,
 			}"
+			:style="modalStyles"
 		>
-			<div class="tw-flex tw-justify-between">
+			<div
+				class="tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200"
+				:class="{
+					'tw-opacity-0': !open,
+					'tw-opacity-full': open,
+				}"
+			>
 				<button
 					class="hover:tw-text-action-highlight"
 					@click="closeSideSheet"
@@ -89,6 +97,13 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Source element position for expand animation
+		 */
+		animationSourceElement: {
+			type: Object,
+			default: () => ({}),
+		},
 	},
 	emits: [
 		'side-sheet-closed',
@@ -98,13 +113,24 @@ export default {
 			visible,
 			kvTrackFunction,
 			trackEventCategory,
+			animationSourceElement,
 		} = toRefs(props);
 
 		const open = ref(false);
+		const initialStyles = ref({});
+		const modalStyles = ref({});
 
 		const closeSideSheet = () => {
 			open.value = false;
 			kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
+
+			if (animationSourceElement.value) {
+				modalStyles.value = {
+					...initialStyles.value,
+					transition: 'all 0.5s ease-in-out',
+				};
+			}
+
 			setTimeout(() => {
 				emit('side-sheet-closed');
 			}, '700');
@@ -118,7 +144,39 @@ export default {
 			if (visible.value) {
 				setTimeout(() => {
 					open.value = true;
-				}, '300');
+				}, 100);
+
+				const rect = animationSourceElement.value?.getBoundingClientRect();
+
+				const top = rect?.top ?? 0;
+				const left = rect?.left ?? 0;
+				const width = rect?.width ?? 0;
+				const height = rect?.height ?? 0;
+
+				if (top || left || width || height) {
+					initialStyles.value = {
+						position: 'fixed',
+						top: `${top}px`,
+						left: `${left}px`,
+						width: `${width}px`,
+						height: `${height}px`,
+					};
+
+					modalStyles.value = {
+						...initialStyles.value,
+						transition: 'none',
+					};
+
+					setTimeout(() => {
+						modalStyles.value = {
+							top: '0',
+							left: '0',
+							width: '100vw',
+							height: '100vh',
+							transition: 'all 0.5s ease-in-out',
+						};
+					}, 10);
+				}
 			}
 		});
 
@@ -128,6 +186,7 @@ export default {
 			open,
 			closeSideSheet,
 			goToLink,
+			modalStyles,
 		};
 	},
 };

package/dist/components/stories/KvSideSheet.stories.js

@@ -14,16 +14,19 @@ const Template = (args, {
 		KvSideSheet,
 		KvButton,
 	},
-	setup() { return { args }; },
+	setup() {
+		return { args };
+	},
 	template: `
 		<div>
-			<kv-button @click="isVisible = true">Show Side Sheet</kv-button>
+			<kv-button @click="openModal($event)">Show Side Sheet</kv-button>
 			<kv-side-sheet
 				:visible="isVisible"
 				:kv-track-function="kvTrackMock"
 				track-event-category="new-loan-card"
 				:show-go-to-link="true"
 				@side-sheet-closed="isVisible = false"
+				:animation-source-element="animationSourceElement"
 			>
 				<div>
 					Some content
@@ -33,6 +36,8 @@ const Template = (args, {
 	data() {
 		return {
 			isVisible: args.visible,
+			expandEffect: args.expandEffect,
+			animationSourceElement: null,
 		};
 	},
 	methods: {
@@ -45,7 +50,18 @@ const Template = (args, {
 		) {
 			console.log(category, action, label, property, value);
 		},
+		openModal(event) {
+			if (this.expandEffect) {
+				this.animationSourceElement = event.currentTarget;
+			}
+			this.isVisible = true;
+		},
 	},
 });
 
-export const Default = Template.bind({ visible: false });
+export const Default = Template.bind({});
+
+export const ExpandEffect = Template.bind({});
+ExpandEffect.args = {
+	expandEffect: true,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -96,5 +96,5 @@
   "peerDependencies": {
     "vue": ">=3.0.0"
   },
-  "gitHead": "e954e011b7acc2fbfe1ff1c294709aa5dd0b98fa"
+  "gitHead": "eee1d0e0b5830392cae80d3d61264757c0f55dd2"
 }

package/vue/KvSideSheet.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
 		v-if="visible"
-		class="tw-block tw-absolute tw-inset-0
-            tw-bg-black tw-transition-all tw-duration-150 tw-z-modal"
+		class="tw-block tw-fixed lg:tw-mt-0 md:tw-absolute tw-inset-0
+            tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal"
 		:class="{
 			'tw-bg-opacity-0 tw-delay-300': !open,
 			'tw-bg-opacity-low': open,
@@ -10,13 +10,21 @@
 		@click.self="closeSideSheet"
 	>
 		<div
-			class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white"
+			class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white
+				tw-overflow-hidden"
 			:class="{
-				'tw-w-0 tw-p-0 tw-delay-200': !open,
-				'lg:tw-w-1/2 tw-w-full tw-p-2': open,
+				'tw-w-0 tw-p-0 tw-delay-200 tw-opacity-low': !open,
+				'lg:tw-w-1/2 tw-w-full tw-p-2 tw-opacity-full': open,
 			}"
+			:style="modalStyles"
 		>
-			<div class="tw-flex tw-justify-between">
+			<div
+				class="tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200"
+				:class="{
+					'tw-opacity-0': !open,
+					'tw-opacity-full': open,
+				}"
+			>
 				<button
 					class="hover:tw-text-action-highlight"
 					@click="closeSideSheet"
@@ -89,6 +97,13 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Source element position for expand animation
+		 */
+		animationSourceElement: {
+			type: Object,
+			default: () => ({}),
+		},
 	},
 	emits: [
 		'side-sheet-closed',
@@ -98,13 +113,24 @@ export default {
 			visible,
 			kvTrackFunction,
 			trackEventCategory,
+			animationSourceElement,
 		} = toRefs(props);
 
 		const open = ref(false);
+		const initialStyles = ref({});
+		const modalStyles = ref({});
 
 		const closeSideSheet = () => {
 			open.value = false;
 			kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
+
+			if (animationSourceElement.value) {
+				modalStyles.value = {
+					...initialStyles.value,
+					transition: 'all 0.5s ease-in-out',
+				};
+			}
+
 			setTimeout(() => {
 				emit('side-sheet-closed');
 			}, '700');
@@ -118,7 +144,39 @@ export default {
 			if (visible.value) {
 				setTimeout(() => {
 					open.value = true;
-				}, '300');
+				}, 100);
+
+				const rect = animationSourceElement.value?.getBoundingClientRect();
+
+				const top = rect?.top ?? 0;
+				const left = rect?.left ?? 0;
+				const width = rect?.width ?? 0;
+				const height = rect?.height ?? 0;
+
+				if (top || left || width || height) {
+					initialStyles.value = {
+						position: 'fixed',
+						top: `${top}px`,
+						left: `${left}px`,
+						width: `${width}px`,
+						height: `${height}px`,
+					};
+
+					modalStyles.value = {
+						...initialStyles.value,
+						transition: 'none',
+					};
+
+					setTimeout(() => {
+						modalStyles.value = {
+							top: '0',
+							left: '0',
+							width: '100vw',
+							height: '100vh',
+							transition: 'all 0.5s ease-in-out',
+						};
+					}, 10);
+				}
 			}
 		});
 
@@ -128,6 +186,7 @@ export default {
 			open,
 			closeSideSheet,
 			goToLink,
+			modalStyles,
 		};
 	},
 };

package/vue/stories/KvSideSheet.stories.js

@@ -14,16 +14,19 @@ const Template = (args, {
 		KvSideSheet,
 		KvButton,
 	},
-	setup() { return { args }; },
+	setup() {
+		return { args };
+	},
 	template: `
 		<div>
-			<kv-button @click="isVisible = true">Show Side Sheet</kv-button>
+			<kv-button @click="openModal($event)">Show Side Sheet</kv-button>
 			<kv-side-sheet
 				:visible="isVisible"
 				:kv-track-function="kvTrackMock"
 				track-event-category="new-loan-card"
 				:show-go-to-link="true"
 				@side-sheet-closed="isVisible = false"
+				:animation-source-element="animationSourceElement"
 			>
 				<div>
 					Some content
@@ -33,6 +36,8 @@ const Template = (args, {
 	data() {
 		return {
 			isVisible: args.visible,
+			expandEffect: args.expandEffect,
+			animationSourceElement: null,
 		};
 	},
 	methods: {
@@ -45,7 +50,18 @@ const Template = (args, {
 		) {
 			console.log(category, action, label, property, value);
 		},
+		openModal(event) {
+			if (this.expandEffect) {
+				this.animationSourceElement = event.currentTarget;
+			}
+			this.isVisible = true;
+		},
 	},
 });
 
-export const Default = Template.bind({ visible: false });
+export const Default = Template.bind({});
+
+export const ExpandEffect = Template.bind({});
+ExpandEffect.args = {
+	expandEffect: true,
+};