feat(stack): add onMove handler

README.md

@@ -1,7 +1,7 @@
 # vue-card-stack
 
 ![CI](https://github.com/rodleviton/vue-card-stack/workflows/CI/badge.svg)
-[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/rodleviton/vue-card-stack/blob/master/LICENCE)
+[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/rodleviton/vue-card-stack/blob/master/LICENSE)
 
 
 ## Install

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-card-stack",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "Rod Leviton <[email protected]>",
   "description": "Stackable, swipe-able, tweak-able Vue card component.",

src/serve-dev.vue

@@ -2,21 +2,16 @@
   <div style="width: 100%; display: flex; align-items: center; flex-direction: column;">
     <VueCardStack
       :cards="cards"
-      :cardWidth="300"
-      :cardHeight="460"
-      stackWidth="100%"
-      :maxVisibleCards="parseInt(maxVisibleCards)"
-      :scaleMultiplier="parseFloat(scaleMultiplier)"
+      :card-width="300"
+      :card-height="460"
+      :stack-width="stackWidth"
+      :max-visible-cards="parseInt(maxVisibleCards)"
+      :scale-multiplier="parseFloat(scaleMultiplier)"
+      :on-move="onMove"
       ref="stack"
     >
       <template v-slot:card="{ card }">
-        <div
-          class="card"
-          :style="{
-              background: card.background,
-              boxShadow: cardShadows[card.$index]
-            }"
-        ></div>
+        <div class="card" :style="{ background: card.background }"></div>
       </template>
     </VueCardStack>
     <div>
@@ -92,14 +87,11 @@ export default Vue.extend({
         this.containerWidth = parseInt(val);
         this.$refs.stack.rebuild();
       }, 100)
-    },
-    cardShadows() {
-      return this.cards.map((_, index) => {
-        const y = 10 - 10 * index * (1 / this.maxVisibleCards);
-        const x = 10 - 10 * index * (1 / this.maxVisibleCards);
-
-        return `-1px ${x}px ${y}px 0px rgba(0, 0, 0, 0.05)`;
-      });
+    }
+  },
+  methods: {
+    onMove(val) {
+      console.log(val)
     }
   }
 });

src/vue-card-stack.vue

@@ -43,6 +43,10 @@ export default {
     paddingVertical: {
       type: Number,
       default: () => 20
+    },
+    onMove: {
+      type: Function,
+      default: null
     }
   },
   data() {
@@ -178,6 +182,10 @@ export default {
       const minDistanceToTravel =
         (this.cardWidth + this.paddingHorizontal) / this.sensitivity;
 
+      if (this.onMove) {
+        this.onMove(0)
+      }
+
       if (this.isDraggingRight) {
         if (distanceTravelled > minDistanceToTravel) {
           const cardToMoveToBottomOfStack = this.stack.shift();
@@ -200,6 +208,10 @@ export default {
     moveStack(dragXPos) {
       const activeCardOffset = dragXPos - this.dragStartX;
 
+      if (this.onMove) {
+        this.onMove(activeCardOffset / (this.cardWidth + this.paddingHorizontal))
+      }
+
       if (this.isDraggingRight) {
         this.activeCardIndex = 1;
       } else {
@@ -208,7 +220,6 @@ export default {
 
       this.stack = this.stack.map((card, index) => {
         const isActiveCard = index === this.activeCardIndex;
-
         const xPos = isActiveCard
           ? this.cardDefaults[index].xPos + activeCardOffset
           : this.cardDefaults[index].xPos +