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 {

package.json

@@ -25,8 +25,7 @@
 	},
 	"homepage": "https://github.com/BKWLD/vue-ssr-carousel#readme",
 	"dependencies": {
-		"bukwild-stylus-library": "^3.1.0",
-		"lodash": "3 - 4"
+		"bukwild-stylus-library": "^3.1.0"
 	},
 	"devDependencies": {
 		"@cloak-app/boilerplate": "^1.0.8",

src/concerns/dimensions.coffee

@@ -1,7 +1,6 @@
 ###
 Code related to measuring the size of the carousel after mounting
 ###
-import throttle from 'lodash/throttle'
 export default
 
 	data: ->
@@ -12,11 +11,10 @@ export default
 	# Add resize listening
 	mounted: ->
 		@onResize()
-		@onResizeThrottled = throttle @onResize, 200
-		window.addEventListener 'resize', @onResizeThrottled
+		window.addEventListener 'resize', @onResize
 
 	# Cleanup listeners
-	beforeDestroy: -> window.removeEventListener 'resize', @onResizeThrottled
+	beforeDestroy: -> window.removeEventListener 'resize', @onResize
 
 	computed:
 

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
@@ -127,6 +131,15 @@ export default
 
 		# Tween to a specific index
 		tweenToIndex: (index) ->
+			@targetX = @getXForIndex index
+			@startTweening()
+
+		# Jump to an index with no tween
+		jumpToIndex: (index) ->
+			@currentX = @targetX = @getXForIndex index
+
+		# Calculate the X value given an index
+		getXForIndex: (index) ->
 
 			# Figure out the new x position
 			x = if @paginateBySlide
@@ -135,10 +148,7 @@ export default
 
 			# Apply adjustments to x value and persist
 			x += @makeIncompletePageOffset index
-			@targetX = Math.round @applyXBoundaries x
-
-			# Start tweening
-			@startTweening()
+			return Math.round @applyXBoundaries x
 
 		# Creates a px value to represent adjustments that should be made to
 		# account for incommplete pages of slides when looping is enabled. Like

src/concerns/responsive.coffee

@@ -69,7 +69,7 @@ export default
 	watch:
 
 		# Fix alignment of slides while resizing
-		pageWidth: -> @tweenToIndex @index
+		pageWidth: -> @jumpToIndex @index
 
 		# If resizing the browser leads to disabling, reset the slide to the first
 		# page.  Like if a user had switched to the 2nd page on mobile and then

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

yarn.lock

@@ -7142,7 +7142,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-"lodash@3 - 4", lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.5:
+lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.3, lodash@^4.17.5:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==