Merge pull request #86 from BKWLD/watch-peek-value-changes

Watch peek value changes

index.js

@@ -1828,6 +1828,24 @@ gutter space.
       };
     }
   },
+  watch: {
+    // Recapture peeking values if the source props change
+    peekLeft: function () {
+      return this.capturePeekingMeasurements();
+    },
+    peekRight: function () {
+      return this.capturePeekingMeasurements();
+    },
+    peek: function () {
+      return this.capturePeekingMeasurements();
+    },
+    peekGutter: function () {
+      return this.capturePeekingMeasurements();
+    },
+    responsive: function () {
+      return this.capturePeekingMeasurements(); // Easier to respond to all
+    }
+  },
   methods: {
     // Capture measurements of peeking values
     capturePeekingMeasurements: function () {
@@ -1894,7 +1912,10 @@ Code related to changing the slides per page at different viewport widths
       return this.responsive.map(breakpoint => {
         return { ...breakpoint,
           mediaQuery: this.makeMediaQuery(breakpoint),
-          active: this.isBreakpointActive(breakpoint)
+          active: this.isBreakpointActive(breakpoint),
+          // Unpack shorthands
+          peekLeft: breakpoint.peekLeft || breakpoint.peek || (breakpoint.peekGutter ? breakpoint.gutter : void 0),
+          peekRight: breakpoint.peekRight || breakpoint.peek || (breakpoint.peekGutter ? breakpoint.gutter : void 0)
         };
       });
     },
@@ -1918,8 +1939,8 @@ Code related to changing the slides per page at different viewport widths
         return {
           slidesPerPage: this.slidesPerPage,
           gutter: this.gutter,
-          peekLeft: this.peekLeft,
-          peekRight: this.peekRight,
+          peekLeft: this.peekLeft || this.peek || (this.peekGutter ? this.gutter : void 0),
+          peekRight: this.peekRight || this.peek || (this.peekGutter ? this.gutter : void 0),
           feather: this.feather
         };
       }

src/concerns/peeking.coffee

@@ -65,6 +65,15 @@ export default
 			left: @autoUnit @getResponsiveValue 'peekLeft', breakpoint
 			right: @autoUnit @getResponsiveValue 'peekRight', breakpoint
 
+	watch:
+
+		# Recapture peeking values if the source props change
+		peekLeft: -> @capturePeekingMeasurements()
+		peekRight: -> @capturePeekingMeasurements()
+		peek: -> @capturePeekingMeasurements()
+		peekGutter: -> @capturePeekingMeasurements()
+		responsive: -> @capturePeekingMeasurements() # Easier to respond to all
+
 	methods:
 
 		# Capture measurements of peeking values

src/concerns/responsive.coffee

@@ -27,6 +27,14 @@ export default
 			...breakpoint
 			mediaQuery: @makeMediaQuery breakpoint
 			active: @isBreakpointActive breakpoint
+
+			# Unpack shorthands
+			peekLeft: breakpoint.peekLeft ||
+				breakpoint.peek ||
+				(breakpoint.gutter if breakpoint.peekGutter)
+			peekRight: breakpoint.peekRight ||
+				breakpoint.peek ||
+				(breakpoint.gutter if breakpoint.peekGutter)
 		}
 
 		# Get current responsive values
@@ -41,8 +49,8 @@ export default
 			else { # Defaults
 				@slidesPerPage
 				@gutter
-				@peekLeft
-				@peekRight
+				peekLeft: @peekLeft || @peek || (@gutter if @peekGutter)
+				peekRight: @peekRight || @peek || (@gutter if @peekGutter)
 				@feather
 			}