@deot/vc-components 1.0.64 → 1.0.65

package/dist/index.cjs

@@ -1705,6 +1705,19 @@ const Card = /* @__PURE__ */ vue.defineComponent({
 
 const MCard = Card;
 
+const DRAG_CLICK_SUPPRESS_PX = 5;
+const swallowNextClickFromDrag = () => {
+  let invoked = false;
+  const options = { capture: true, once: true };
+  const swallow = (e) => {
+    invoked = true;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  };
+  document.addEventListener("click", swallow, options);
+  setTimeout(() => !invoked && document.removeEventListener("click", swallow, options), 0);
+};
 const useCarousel = (wrapper, content, expose) => {
   const instance = vue.getCurrentInstance();
   const props = instance.props;
@@ -1717,6 +1730,7 @@ const useCarousel = (wrapper, content, expose) => {
   const start = vue.ref();
   const startX = vue.ref();
   const startY = vue.ref();
+  const dragMovedPastThreshold = vue.ref(false);
   const allowTransition = vue.ref(false);
   const direction = vue.computed(() => {
     return props.vertical ? "vertical" : "horizontal";
@@ -1795,16 +1809,21 @@ const useCarousel = (wrapper, content, expose) => {
     if (!props.draggable) return;
     pauseTimer();
     start.value = true;
+    dragMovedPastThreshold.value = false;
     startX.value = e.screenX;
     startY.value = e.screenY;
   };
   const handleMove = (e) => {
     if (!start.value || !props.draggable) return;
     offset.value = !props.vertical ? e.screenX - startX.value : e.screenY - startY.value;
+    if (Math.abs(offset.value) > DRAG_CLICK_SUPPRESS_PX) {
+      dragMovedPastThreshold.value = true;
+    }
     resetItems();
   };
   const handleEnd = () => {
     if (!props.draggable) return;
+    const shouldSwallowClick = dragMovedPastThreshold.value;
     start.value = false;
     startTimer();
     const $offset = Math.abs(offset.value);
@@ -1816,6 +1835,10 @@ const useCarousel = (wrapper, content, expose) => {
     } else {
       resetItems();
     }
+    if (shouldSwallowClick) {
+      swallowNextClickFromDrag();
+    }
+    dragMovedPastThreshold.value = false;
   };
   vue.watch(
     () => items.value,
@@ -2178,7 +2201,7 @@ const useCarouselItem = (expose) => {
   };
   const calcSlideOffset = (index, activeIndex, wrapperWidth) => {
     const { length } = carousel.items.value;
-    const offset = wrapperWidth - (instance.vnode?.el?.offsetWidth || 0);
+    const offset = wrapperWidth - (carousel.wrapper?.value?.offsetWidth || 0);
     const gutter = itemGutter.value;
     if (!gutter || isVertical.value) return 0;
     let slideOffset = 0;
@@ -2211,7 +2234,7 @@ const useCarouselItem = (expose) => {
     return slideOffset;
   };
   const calcTranslate = (index, activeIndex) => {
-    const distance = carousel.vnode.el[isVertical.value ? "offsetHeight" : "offsetWidth"];
+    const distance = carousel.wrapper.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
     const slideOffset = calcSlideOffset(index, activeIndex, distance);
     return distance * (index - activeIndex) + carousel.offset.value + slideOffset;
   };

package/dist/index.iife.js

@@ -7110,6 +7110,19 @@ var VcComponents = (function (exports, vue) {
 	  }
 	}
 
+	const DRAG_CLICK_SUPPRESS_PX = 5;
+	const swallowNextClickFromDrag = () => {
+	  let invoked = false;
+	  const options = { capture: true, once: true };
+	  const swallow = (e) => {
+	    invoked = true;
+	    e.preventDefault();
+	    e.stopPropagation();
+	    e.stopImmediatePropagation();
+	  };
+	  document.addEventListener("click", swallow, options);
+	  setTimeout(() => !invoked && document.removeEventListener("click", swallow, options), 0);
+	};
 	const useCarousel = (wrapper, content, expose) => {
 	  const instance = vue.getCurrentInstance();
 	  const props = instance.props;
@@ -7122,6 +7135,7 @@ var VcComponents = (function (exports, vue) {
 	  const start = vue.ref();
 	  const startX = vue.ref();
 	  const startY = vue.ref();
+	  const dragMovedPastThreshold = vue.ref(false);
 	  const allowTransition = vue.ref(false);
 	  const direction = vue.computed(() => {
 	    return props.vertical ? "vertical" : "horizontal";
@@ -7200,16 +7214,21 @@ var VcComponents = (function (exports, vue) {
 	    if (!props.draggable) return;
 	    pauseTimer();
 	    start.value = true;
+	    dragMovedPastThreshold.value = false;
 	    startX.value = e.screenX;
 	    startY.value = e.screenY;
 	  };
 	  const handleMove = (e) => {
 	    if (!start.value || !props.draggable) return;
 	    offset.value = !props.vertical ? e.screenX - startX.value : e.screenY - startY.value;
+	    if (Math.abs(offset.value) > DRAG_CLICK_SUPPRESS_PX) {
+	      dragMovedPastThreshold.value = true;
+	    }
 	    resetItems();
 	  };
 	  const handleEnd = () => {
 	    if (!props.draggable) return;
+	    const shouldSwallowClick = dragMovedPastThreshold.value;
 	    start.value = false;
 	    startTimer();
 	    const $offset = Math.abs(offset.value);
@@ -7221,6 +7240,10 @@ var VcComponents = (function (exports, vue) {
 	    } else {
 	      resetItems();
 	    }
+	    if (shouldSwallowClick) {
+	      swallowNextClickFromDrag();
+	    }
+	    dragMovedPastThreshold.value = false;
 	  };
 	  vue.watch(
 	    () => items.value,
@@ -7583,7 +7606,7 @@ var VcComponents = (function (exports, vue) {
 	  };
 	  const calcSlideOffset = (index, activeIndex, wrapperWidth) => {
 	    const { length } = carousel.items.value;
-	    const offset = wrapperWidth - (instance.vnode?.el?.offsetWidth || 0);
+	    const offset = wrapperWidth - (carousel.wrapper?.value?.offsetWidth || 0);
 	    const gutter = itemGutter.value;
 	    if (!gutter || isVertical.value) return 0;
 	    let slideOffset = 0;
@@ -7616,7 +7639,7 @@ var VcComponents = (function (exports, vue) {
 	    return slideOffset;
 	  };
 	  const calcTranslate = (index, activeIndex) => {
-	    const distance = carousel.vnode.el[isVertical.value ? "offsetHeight" : "offsetWidth"];
+	    const distance = carousel.wrapper.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
 	    const slideOffset = calcSlideOffset(index, activeIndex, distance);
 	    return distance * (index - activeIndex) + carousel.offset.value + slideOffset;
 	  };

package/dist/index.js

@@ -1683,6 +1683,19 @@ const Card = /* @__PURE__ */ defineComponent({
 
 const MCard = Card;
 
+const DRAG_CLICK_SUPPRESS_PX = 5;
+const swallowNextClickFromDrag = () => {
+  let invoked = false;
+  const options = { capture: true, once: true };
+  const swallow = (e) => {
+    invoked = true;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+  };
+  document.addEventListener("click", swallow, options);
+  setTimeout(() => !invoked && document.removeEventListener("click", swallow, options), 0);
+};
 const useCarousel = (wrapper, content, expose) => {
   const instance = getCurrentInstance();
   const props = instance.props;
@@ -1695,6 +1708,7 @@ const useCarousel = (wrapper, content, expose) => {
   const start = ref();
   const startX = ref();
   const startY = ref();
+  const dragMovedPastThreshold = ref(false);
   const allowTransition = ref(false);
   const direction = computed(() => {
     return props.vertical ? "vertical" : "horizontal";
@@ -1773,16 +1787,21 @@ const useCarousel = (wrapper, content, expose) => {
     if (!props.draggable) return;
     pauseTimer();
     start.value = true;
+    dragMovedPastThreshold.value = false;
     startX.value = e.screenX;
     startY.value = e.screenY;
   };
   const handleMove = (e) => {
     if (!start.value || !props.draggable) return;
     offset.value = !props.vertical ? e.screenX - startX.value : e.screenY - startY.value;
+    if (Math.abs(offset.value) > DRAG_CLICK_SUPPRESS_PX) {
+      dragMovedPastThreshold.value = true;
+    }
     resetItems();
   };
   const handleEnd = () => {
     if (!props.draggable) return;
+    const shouldSwallowClick = dragMovedPastThreshold.value;
     start.value = false;
     startTimer();
     const $offset = Math.abs(offset.value);
@@ -1794,6 +1813,10 @@ const useCarousel = (wrapper, content, expose) => {
     } else {
       resetItems();
     }
+    if (shouldSwallowClick) {
+      swallowNextClickFromDrag();
+    }
+    dragMovedPastThreshold.value = false;
   };
   watch(
     () => items.value,
@@ -2156,7 +2179,7 @@ const useCarouselItem = (expose) => {
   };
   const calcSlideOffset = (index, activeIndex, wrapperWidth) => {
     const { length } = carousel.items.value;
-    const offset = wrapperWidth - (instance.vnode?.el?.offsetWidth || 0);
+    const offset = wrapperWidth - (carousel.wrapper?.value?.offsetWidth || 0);
     const gutter = itemGutter.value;
     if (!gutter || isVertical.value) return 0;
     let slideOffset = 0;
@@ -2189,7 +2212,7 @@ const useCarouselItem = (expose) => {
     return slideOffset;
   };
   const calcTranslate = (index, activeIndex) => {
-    const distance = carousel.vnode.el[isVertical.value ? "offsetHeight" : "offsetWidth"];
+    const distance = carousel.wrapper.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
     const slideOffset = calcSlideOffset(index, activeIndex, distance);
     return distance * (index - activeIndex) + carousel.offset.value + slideOffset;
   };

package/dist/index.umd.cjs

@@ -7113,6 +7113,19 @@
 	  }
 	}
 
+	const DRAG_CLICK_SUPPRESS_PX = 5;
+	const swallowNextClickFromDrag = () => {
+	  let invoked = false;
+	  const options = { capture: true, once: true };
+	  const swallow = (e) => {
+	    invoked = true;
+	    e.preventDefault();
+	    e.stopPropagation();
+	    e.stopImmediatePropagation();
+	  };
+	  document.addEventListener("click", swallow, options);
+	  setTimeout(() => !invoked && document.removeEventListener("click", swallow, options), 0);
+	};
 	const useCarousel = (wrapper, content, expose) => {
 	  const instance = vue.getCurrentInstance();
 	  const props = instance.props;
@@ -7125,6 +7138,7 @@
 	  const start = vue.ref();
 	  const startX = vue.ref();
 	  const startY = vue.ref();
+	  const dragMovedPastThreshold = vue.ref(false);
 	  const allowTransition = vue.ref(false);
 	  const direction = vue.computed(() => {
 	    return props.vertical ? "vertical" : "horizontal";
@@ -7203,16 +7217,21 @@
 	    if (!props.draggable) return;
 	    pauseTimer();
 	    start.value = true;
+	    dragMovedPastThreshold.value = false;
 	    startX.value = e.screenX;
 	    startY.value = e.screenY;
 	  };
 	  const handleMove = (e) => {
 	    if (!start.value || !props.draggable) return;
 	    offset.value = !props.vertical ? e.screenX - startX.value : e.screenY - startY.value;
+	    if (Math.abs(offset.value) > DRAG_CLICK_SUPPRESS_PX) {
+	      dragMovedPastThreshold.value = true;
+	    }
 	    resetItems();
 	  };
 	  const handleEnd = () => {
 	    if (!props.draggable) return;
+	    const shouldSwallowClick = dragMovedPastThreshold.value;
 	    start.value = false;
 	    startTimer();
 	    const $offset = Math.abs(offset.value);
@@ -7224,6 +7243,10 @@
 	    } else {
 	      resetItems();
 	    }
+	    if (shouldSwallowClick) {
+	      swallowNextClickFromDrag();
+	    }
+	    dragMovedPastThreshold.value = false;
 	  };
 	  vue.watch(
 	    () => items.value,
@@ -7586,7 +7609,7 @@
 	  };
 	  const calcSlideOffset = (index, activeIndex, wrapperWidth) => {
 	    const { length } = carousel.items.value;
-	    const offset = wrapperWidth - (instance.vnode?.el?.offsetWidth || 0);
+	    const offset = wrapperWidth - (carousel.wrapper?.value?.offsetWidth || 0);
 	    const gutter = itemGutter.value;
 	    if (!gutter || isVertical.value) return 0;
 	    let slideOffset = 0;
@@ -7619,7 +7642,7 @@
 	    return slideOffset;
 	  };
 	  const calcTranslate = (index, activeIndex) => {
-	    const distance = carousel.vnode.el[isVertical.value ? "offsetHeight" : "offsetWidth"];
+	    const distance = carousel.wrapper.value[isVertical.value ? "offsetHeight" : "offsetWidth"];
 	    const slideOffset = calcSlideOffset(index, activeIndex, distance);
 	    return distance * (index - activeIndex) + carousel.offset.value + slideOffset;
 	  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/vc-components",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",