@deot/vc 1.0.64 → 1.0.65

package/dist/index.iife.js

@@ -10639,6 +10639,19 @@ var Vc = (function (exports, vue) {
     }
   });
   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 props2 = instance.props;
@@ -10651,6 +10664,7 @@ var Vc = (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 props2.vertical ? "vertical" : "horizontal";
@@ -10729,16 +10743,21 @@ var Vc = (function (exports, vue) {
       if (!props2.draggable) return;
       pauseTimer();
       start.value = true;
+      dragMovedPastThreshold.value = false;
       startX.value = e.screenX;
       startY.value = e.screenY;
     };
     const handleMove = (e) => {
       if (!start.value || !props2.draggable) return;
       offset.value = !props2.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 (!props2.draggable) return;
+      const shouldSwallowClick = dragMovedPastThreshold.value;
       start.value = false;
       startTimer();
       const $offset = Math.abs(offset.value);
@@ -10750,6 +10769,10 @@ var Vc = (function (exports, vue) {
       } else {
         resetItems();
       }
+      if (shouldSwallowClick) {
+        swallowNextClickFromDrag();
+      }
+      dragMovedPastThreshold.value = false;
     };
     vue.watch(
       () => items.value,
@@ -11106,7 +11129,7 @@ var Vc = (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;
@@ -11139,7 +11162,7 @@ var Vc = (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.umd.cjs

@@ -10642,6 +10642,19 @@
     }
   });
   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 props2 = instance.props;
@@ -10654,6 +10667,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 props2.vertical ? "vertical" : "horizontal";
@@ -10732,16 +10746,21 @@
       if (!props2.draggable) return;
       pauseTimer();
       start.value = true;
+      dragMovedPastThreshold.value = false;
       startX.value = e.screenX;
       startY.value = e.screenY;
     };
     const handleMove = (e) => {
       if (!start.value || !props2.draggable) return;
       offset.value = !props2.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 (!props2.draggable) return;
+      const shouldSwallowClick = dragMovedPastThreshold.value;
       start.value = false;
       startTimer();
       const $offset = Math.abs(offset.value);
@@ -10753,6 +10772,10 @@
       } else {
         resetItems();
       }
+      if (shouldSwallowClick) {
+        swallowNextClickFromDrag();
+      }
+      dragMovedPastThreshold.value = false;
     };
     vue.watch(
       () => items.value,
@@ -11109,7 +11132,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;
@@ -11142,7 +11165,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",
-  "version": "1.0.64",
+  "version": "1.0.65",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -19,9 +19,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/vc-components": "^1.0.64",
-    "@deot/vc-hooks": "^1.0.64",
-    "@deot/vc-shared": "^1.0.64"
+    "@deot/vc-components": "^1.0.65",
+    "@deot/vc-hooks": "^1.0.65",
+    "@deot/vc-shared": "^1.0.65"
   },
   "peerDependencies": {
     "vue": "*"