Merge pull request #28 from laurenashpole/rc/1.2.0

Release 1.2.0

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
         singleQuote: true,
         jsxBracketSameLine: false,
         trailingComma: 'none',
-        printWidth: 100
+        printWidth: 120
       }
     ]
   },

.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  push:
+    branches:
+    - master
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12.x'
+      - name: Cache modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: v1-npm-deps-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: v1-npm-deps-
+      - name: Publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          npm install
+          npm build
+          npm run semantic-release

README.md

@@ -6,8 +6,7 @@ A Vue component for magnifying an image within its original container. The zoom
 
 This component is based on an [earlier version built for React](https://github.com/laurenashpole/react-inner-image-zoom).
 
-[![Travis][build-badge]][build]
-[![npm package][npm-badge]][npm]
+![GitHub Actions][build-badge] [![npm package][npm-badge]][npm]
 
 ## Installation
 
@@ -64,10 +63,10 @@ height | Number | | Height attribute for original image.
 hasSpacer | Boolean | false | If true, gets the original image's aspect ratio based on the width and height props and creates a spacer to prevent cumulative layout shift.
 zoomSrc | String | | URL for the larger zoom image. Falls back to original image src if not defined.
 zoomScale | Number | 1 | Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).
-zoomPreload | Boolean | false | If set to true, preloads the zoom image instead of waiting for mouseenter.
+zoomPreload | Boolean | false | If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave.
 alt | String | | Alternative text for the original image.
 moveType | String | pan | `pan` or `drag`. The user behavior for moving zoomed images on non-touch devices.
-zoomType | String | click | `click` or `hover`. The zoom behavior for images.
+zoomType | String | click | `click` or `hover`. The user behavior for triggering zoom. When using `hover`, combine with `zoomPreload` to avoid flickering on rapid mouse movements.
 fadeDuration | Number | 150 | Fade transition time in milliseconds. If zooming in on transparent images, set this to `0` for best results.
 fullscreenOnMobile | Boolean | false | Enables fullscreen zoomed image on touch devices below a specified breakpoint.
 mobileBreakpoint | Number | 640 | The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.
@@ -100,8 +99,7 @@ One of my big motivations for adapting this component from the original [React I
 
 [MIT](https://github.com/laurenashpole/vue-inner-image-zoom/blob/master/LICENSE)
 
-[build-badge]: https://travis-ci.org/laurenashpole/vue-inner-image-zoom.svg?branch=master
-[build]: https://travis-ci.org/laurenashpole/vue-inner-image-zoom
+[build-badge]: https://github.com/laurenashpole/react-inner-image-zoom/actions/workflows/release.yml/badge.svg
 
 [npm-badge]: http://img.shields.io/npm/v/vue-inner-image-zoom.svg?style=flat
 [npm]: https://www.npmjs.com/package/vue-inner-image-zoom

demo/src/App.vue

@@ -9,6 +9,7 @@
         :fullscreenOnMobile="true"
         :hideCloseButton="true"
         :hideHint="true"
+        :zoomPreload="true"
       />
     </div>
     <div style="margin-bottom: 30px;">
@@ -17,7 +18,7 @@
         src="/assets/unsplash2.jpg"
         zoomSrc="/assets/unsplash2-large.jpg"
         moveType="drag"
-        :fullscreenOnMobile="true"
+        :fullscreenOnMobile="false"
         :width="750"
         :height="500"
         :hasSpacer="true"
@@ -31,6 +32,7 @@
         zoomType="hover"
         :fullscreenOnMobile="true"
         :zoomScale="0.9"
+        :zoomPreload="true"
       />
     </div>
   </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-inner-image-zoom",
-  "version": "0.0.0-development",
+  "version": "1.2.0",
   "description": "A Vue.js component for magnifying an image within its original container.",
   "main": "lib/vue-inner-image-zoom.umd.js",
   "unpkg": "lib/vue-inner-image-zoom.common.js",