@kiva/kv-components 4.8.4 → 4.8.6

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.
 
+## [4.8.6](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.5...@kiva/kv-components@4.8.6) (2025-01-16)
+
+
+### Bug Fixes
+
+* adjust modal position and remove scroll when visible ([af17714](https://github.com/kiva/kv-ui-elements/commit/af17714803c84ca2b4f3d9f1a9f7730303429530))
+
+
+
+
+
+## [4.8.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.4...@kiva/kv-components@4.8.5) (2025-01-10)
+
+
+### Bug Fixes
+
+* click events after removal of clickAllowed ([58388bb](https://github.com/kiva/kv-ui-elements/commit/58388bbfbf1b16a803a6f6e8a327babebb6393e2))
+
+
+
+
+
 ## [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)
 
 

package/dist/components/KvCarousel.vue

@@ -12,7 +12,6 @@
 				'tw-mx-auto aside-controls-content': asideControls,
 				'circle-carousel': inCircle
 			}"
-			@click.capture="onCarouselContainerClick"
 		>
 			<div
 				v-for="(slotName, index) in componentSlotKeys"
@@ -251,7 +250,6 @@ export default {
 			isAriaHidden,
 			isAutoplaying,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,
@@ -275,7 +273,6 @@ export default {
 			mdiChevronLeft,
 			mdiChevronRight,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,

package/dist/components/KvSideSheet.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="visible"
-		class="tw-block lg:tw-mt-0 tw-absolute tw-inset-0
+		class="tw-block lg:tw-mt-0 tw-fixed 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,
@@ -10,7 +10,7 @@
 		@click.self="closeSideSheet"
 	>
 		<div
-			class="tw-absolute tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
+			class="tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
 				tw-overflow-y-auto tw-p-2"
 			:class="{
 				'tw-w-0 tw-delay-200 tw-opacity-0': !open,
@@ -47,7 +47,8 @@
 				</button>
 			</div>
 			<div
-				class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200"
+				class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200
+					tw-overscroll-y-contain"
 				:class="{
 					'tw-opacity-0': !open,
 					'tw-opacity-full': open,
@@ -119,18 +120,12 @@ export default {
 		const open = ref(false);
 		const initialStyles = ref({});
 		const modalStyles = ref({});
-		const userScrollPosition = ref(0);
 
 		const closeSideSheet = () => {
 			open.value = false;
 			kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
 
-			if (animationSourceElement.value && window.scrollTo) {
-				window.scrollTo({
-					top: userScrollPosition.value,
-					behavior: 'smooth',
-				});
-
+			if (animationSourceElement.value) {
 				modalStyles.value = {
 					...initialStyles.value,
 					transition: 'all 0.5s ease-in-out',
@@ -160,8 +155,6 @@ export default {
 				const height = rect?.height ?? 0;
 
 				if (top || left || width || height) {
-					userScrollPosition.value = window.scrollY ?? 0;
-
 					initialStyles.value = {
 						position: 'fixed',
 						top: `${top}px`,

package/dist/components/KvVerticalCarousel.vue

@@ -9,7 +9,6 @@
 			<div
 				class="tw-flex tw-flex-col"
 				:style="`height: ${heightStyle}`"
-				@click.capture="onCarouselContainerClick"
 			>
 				<div
 					v-for="(slotName, index) in componentSlotKeys"
@@ -177,7 +176,6 @@ export default {
 			isAriaHidden,
 			isAutoplaying,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,
@@ -205,7 +203,6 @@ export default {
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,

package/dist/utils/carousels.cjs

@@ -128,12 +128,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slides.value = embla.value.slideNodes();
     slideIndicatorListLength();
   };
-  const onCarouselContainerClick = (e) => {
-    if (embla.value) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
   const isAriaHidden = (index) => {
     if (embla.value) {
       return !embla.value.slidesInView(true).includes(index);
@@ -214,7 +208,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     goToSlide,
     reInit,
     reInitVisible,
-    onCarouselContainerClick,
     isAriaHidden,
     isAutoplaying,
     slideIndicatorListLength,

package/dist/utils/carousels.js

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

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

@@ -92,12 +92,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slides.value = embla.value.slideNodes();
     slideIndicatorListLength();
   };
-  const onCarouselContainerClick = (e) => {
-    if (embla.value) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
   const isAriaHidden = (index) => {
     if (embla.value) {
       return !embla.value.slidesInView(true).includes(index);
@@ -178,7 +172,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     goToSlide,
     reInit,
     reInitVisible,
-    onCarouselContainerClick,
     isAriaHidden,
     isAutoplaying,
     slideIndicatorListLength,

package/dist/utils/index.cjs

@@ -236,12 +236,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     slides.value = embla.value.slideNodes();
     slideIndicatorListLength();
   };
-  const onCarouselContainerClick = (e) => {
-    if (embla.value) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
   const isAriaHidden = (index) => {
     if (embla.value) {
       return !embla.value.slidesInView(true).includes(index);
@@ -322,7 +316,6 @@ function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
     goToSlide,
     reInit,
     reInitVisible,
-    onCarouselContainerClick,
     isAriaHidden,
     isAutoplaying,
     slideIndicatorListLength,

package/dist/utils/index.js

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

package/package.json

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

package/utils/carousels.js

@@ -126,13 +126,7 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		slides.value = embla.value.slideNodes();
 		slideIndicatorListLength();
 	};
-	const onCarouselContainerClick = (e) => {
-		// If we're dragging, block click handlers within slides
-		if (embla.value) {
-			e.preventDefault();
-			e.stopPropagation();
-		}
-	};
+
 	/**
 	 * If the slide is not completely in view in the carousel
 	 * it should be aria-hidden
@@ -250,7 +244,6 @@ export function carouselUtil(props, { emit, slots }, extraEmblaOptions) {
 		goToSlide,
 		reInit,
 		reInitVisible,
-		onCarouselContainerClick,
 		isAriaHidden,
 		isAutoplaying,
 		slideIndicatorListLength,

package/vue/KvCarousel.vue

@@ -12,7 +12,6 @@
 				'tw-mx-auto aside-controls-content': asideControls,
 				'circle-carousel': inCircle
 			}"
-			@click.capture="onCarouselContainerClick"
 		>
 			<div
 				v-for="(slotName, index) in componentSlotKeys"
@@ -251,7 +250,6 @@ export default {
 			isAriaHidden,
 			isAutoplaying,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,
@@ -275,7 +273,6 @@ export default {
 			mdiChevronLeft,
 			mdiChevronRight,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,

package/vue/KvSideSheet.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="visible"
-		class="tw-block lg:tw-mt-0 tw-absolute tw-inset-0
+		class="tw-block lg:tw-mt-0 tw-fixed 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,
@@ -10,7 +10,7 @@
 		@click.self="closeSideSheet"
 	>
 		<div
-			class="tw-absolute tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
+			class="tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
 				tw-overflow-y-auto tw-p-2"
 			:class="{
 				'tw-w-0 tw-delay-200 tw-opacity-0': !open,
@@ -47,7 +47,8 @@
 				</button>
 			</div>
 			<div
-				class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200"
+				class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200
+					tw-overscroll-y-contain"
 				:class="{
 					'tw-opacity-0': !open,
 					'tw-opacity-full': open,
@@ -119,18 +120,12 @@ export default {
 		const open = ref(false);
 		const initialStyles = ref({});
 		const modalStyles = ref({});
-		const userScrollPosition = ref(0);
 
 		const closeSideSheet = () => {
 			open.value = false;
 			kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
 
-			if (animationSourceElement.value && window.scrollTo) {
-				window.scrollTo({
-					top: userScrollPosition.value,
-					behavior: 'smooth',
-				});
-
+			if (animationSourceElement.value) {
 				modalStyles.value = {
 					...initialStyles.value,
 					transition: 'all 0.5s ease-in-out',
@@ -160,8 +155,6 @@ export default {
 				const height = rect?.height ?? 0;
 
 				if (top || left || width || height) {
-					userScrollPosition.value = window.scrollY ?? 0;
-
 					initialStyles.value = {
 						position: 'fixed',
 						top: `${top}px`,

package/vue/KvVerticalCarousel.vue

@@ -9,7 +9,6 @@
 			<div
 				class="tw-flex tw-flex-col"
 				:style="`height: ${heightStyle}`"
-				@click.capture="onCarouselContainerClick"
 			>
 				<div
 					v-for="(slotName, index) in componentSlotKeys"
@@ -177,7 +176,6 @@ export default {
 			isAriaHidden,
 			isAutoplaying,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,
@@ -205,7 +203,6 @@ export default {
 			mdiChevronDown,
 			mdiChevronUp,
 			nextIndex,
-			onCarouselContainerClick,
 			previousIndex,
 			reInit,
 			reInitVisible,