Merge pull request #111 from BKWLD/v-model-loop-fix

Fix for v-model with loop

README.md

@@ -48,7 +48,7 @@ For more examples, see the demo: https://vue-ssr-carousel.netlify.app.
 | `slides-per-page`   | `1`         | How many slides are shown per page. Can be set to `null` to allow for flexible widths for slides. See https://vue-ssr-carousel.netlify.app/responsive and note the caveats mentiond within.
 | `gutter`            | `20`        | The size of the space between slides. This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/gutters.
 | `paginate-by-slide` | `false`     | When `false`, dragging the carousel or interacting with the arrows will advance a full page of slides at a time.  When `true`, the carousel will come to a rest at each slide.
-| `autoplay`        | `undefined`        | Add a delay in seconds for auto playing the slides. See https://vue-ssr-carousel.netlify.app/misc#autoplay.
+| `autoplay-delay     | `0`         | Add a delay in seconds for auto playing the slides. See https://vue-ssr-carousel.netlify.app/misc#autoplay.
 | `loop`              | `false`     | Boolean to enable looping / infinite scroll. See https://vue-ssr-carousel.netlify.app/looping.
 | `center`            | `false`     | Render the first slide in the middle of the carousel.  Should only be used with odd numbers of `slides-per-page`.  This results in the slides being rendered visually in a different order than the DOM [which is an accessibility concern](https://developer.mozilla.org/en-US/docs/Web/CSS/order#accessibility_concerns). See https://vue-ssr-carousel.netlify.app/looping.
 | `peek`              | `0`         | A width value for how far adjacent cards should peek into the carousel canvas. This can a number or any CSS resolvable string. See https://vue-ssr-carousel.netlify.app/peeking.

demo/components/demos/events/v-model.vue

@@ -2,7 +2,7 @@
 
 <div data-cy='v-model'>
 
-  <ssr-carousel v-model='page'>
+  <ssr-carousel v-model='page' :loop='loop'>
     <slide :index='1'></slide>
     <slide :index='2'></slide>
     <slide :index='3'></slide>
@@ -18,6 +18,9 @@
 
 <script>
 export default {
+  props: {
+    loop: Boolean
+  },
   data() {
     return {
       page: 1,

demo/content/events.md

@@ -24,6 +24,30 @@ You can set the initial index with `:value`. Or use `v-model` to track the curre
 
   </div>
 </template>
+```
+
+This also works with looping:
+
+<demos-events-v-model loop></demos-events-v-model>
+
+```vue
+<template>
+  <div>
+
+    <ssr-carousel v-model='page' loop>
+      <slide :index='1'></slide>
+      <slide :index='2'></slide>
+      <slide :index='3'></slide>
+    </ssr-carousel>
+
+    <span class="now">Current Page: {{ page + 1 }}</span>
+    <button @click='page--'>Back</button>
+    <button @click='page++'>Next</button>
+
+  </div>
+</template>
+
+
 
 <script>
 export default {

src/concerns/pagination.coffee

@@ -84,14 +84,18 @@ export default
 
 	watch:
 
-		# Treat v-model input as a "goto" request. Immediately fire an input
-		# event if the index was not changed, like when an edge is reached, to
-		# update the parent component.
+		# Treat v-model input as a "goto" request
 		value: ->
-			@goto @value
-			if @value != @boundedIndex
+
+			# If the value exceeds the bounds, immediately emit a new input event
+			# with the corrected value
+			if @value != @applyIndexBoundaries @value
 			then @$emit 'input', @boundedIndex
 
+			# Else if the incoming value is different than the current value
+			# then tween to it
+			else if @value != @boundedIndex then @goto @value
+
 		# Emit events on index change
 		boundedIndex: ->
 			@$emit 'change', index: @boundedIndex

src/concerns/tweening.coffee

@@ -20,7 +20,6 @@ export default
 		currentX: 0 # The actual left offset of the slides container
 		targetX: 0 # Where we may be tweening the slide to
 		tweening: false # If there is a current RAF based tween running
-		firstTween: true # Has the first tween been triggered
 
 	# Stop any animations that are in flight
 	beforeDestroy: -> window.cancelAnimationFrame @rafId
@@ -32,7 +31,6 @@ export default
 			if @tweening
 				@$emit 'tween:start', { @index }
 				@tweenToTarget()
-				@firstTween = false
 			else
 				window.cancelAnimationFrame @rafId
 				@$emit 'tween:end', { @index }
@@ -57,12 +55,8 @@ export default
 		# Tween the currentX to the targetX
 		tweenToTarget: ->
 
-			# If on the first tween and the first page was set to something other
-			# than 0 by v-model, then instantly jump to the final destination
-			dampening = if @firstTween and @value != 0 then 1 else @tweenDampening
-
 			# Apply tween math
-			@currentX = @currentX + (@targetX - @currentX) * dampening
+			@currentX = @currentX + (@targetX - @currentX) * @tweenDampening
 			if Math.abs(@targetX - @currentX) < 1 # Stops tweening
 				@currentX = @targetX
 				@tweening = false