Merge pull request #3 from phegman/v1.1.0

V1.1.0

.browserslistrc

@@ -0,0 +1,4 @@
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead

.eslintrc.js

@@ -1,15 +1,14 @@
 module.exports = {
-  "env": {
-      "browser": true,
-      "es6": true
+  root: true,
+  env: {
+    node: true,
   },
-  "extends": ["plugin:vue/strongly-recommended", "standard"],
-  "parserOptions": {
-      "sourceType": "module"
+  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
+  rules: {
+    'vue/max-attributes-per-line': 'off',
+    'vue/html-self-closing': 'off',
   },
-  "globals": {
-      "beforeEach": false,
-      "test": false,
-      "expect": false
-  }
-};
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+  },
+}

.gitignore

@@ -1,30 +1,32 @@
-# General
-.DS_Store
-.AppleDouble
-.LSOverride
+# Logs
+logs
+*.log
+yarn-debug.log*
+yarn-error.log*
 
-# Icon must end with two \r
-Icon
+# Dependency directories
+node_modules/
 
+# TypeScript cache
+*.tsbuildinfo
 
-# Thumbnails
-._*
+# Optional npm cache directory
+.npm
 
-# Files that might appear in the root of a volume
-.DocumentRevisions-V100
-.fseventsd
-.Spotlight-V100
-.TemporaryItems
-.Trashes
-.VolumeIcon.icns
-.com.apple.timemachine.donotpresent
+# Optional eslint cache
+.eslintcache
+
+# Yarn Integrity file
+.yarn-integrity
 
-# Directories potentially created on remote AFP share
-.AppleDB
-.AppleDesktop
-Network Trash Folder
-Temporary Items
-.apdisk
+# Build artifacts
+dist
 
-#node_modules
-/node_modules
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.travis.yml

@@ -1,5 +1,30 @@
 language: node_js
 node_js:
-  - "9"
+  - '10'
 script:
-  - yarn run lint
+  - yarn lint
+  - yarn build
+deploy:
+  - provider: npm
+    email: $NPM_EMAIL
+    api_key: $NPM_TOKEN
+    skip_cleanup: true
+    on:
+      branch: master
+      tags: true
+  - provider: releases
+    api_key: $GITHUB_OAUTH_TOKEN
+    file_glob: true
+    file: dist/*
+    skip_cleanup: true
+    on:
+      branch: master
+      tags: true
+  - provider: pages
+    skip_cleanup: true
+    github_token: $GITHUB_PAGES_TOKEN
+    local_dir: dist
+    fqdn: v-scroll-lock.peterhegman.com
+    on:
+      branch: master
+      tags: true

readme.md → README.md

@@ -2,6 +2,7 @@
 [![Build Status](https://travis-ci.org/phegman/v-scroll-lock.svg?branch=master)](https://travis-ci.org/phegman/v-scroll-lock)
 
 # v-scroll-lock
+
 A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrolling of a target element (eg. modal/lightbox/flyouts/nav-menus). Built on top of [https://github.com/willmcpo/body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)
 
 ## Table of Contents
@@ -14,39 +15,55 @@ A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android,
 - [Contributing](#contributing)
 
 ## Overview
-Preventing the body from scrolling when you have a modal/lightbox/flyout/nav-menu open on all devices can be a huge pain. This package wraps the awesome library [https://github.com/willmcpo/body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) into an easy to use Vue.js directive.
+
+Preventing the body from scrolling when you have a modal/lightbox/flyout/nav-menu open on all devices can be a huge pain. This package wraps [https://github.com/willmcpo/body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) into an easy to use Vue.js directive.
 
 ## Demo
+
 Demo can be viewed here: [http://v-scroll-lock.peterhegman.com/](https://v-scroll-lock.peterhegman.com/)  
-Source code for demo can be viewed in `src/App.vue`
+Source code for demo can be viewed in `src/Demo.vue`
 
 ## Installation
 
-### Yarn
+### Module Bundler (Webpack, Rollup, etc)
+
+#### Yarn
+
+```bash
+yarn add v-scroll-lock
+```
+
+#### NPM
 
-`yarn add v-scroll-lock`
+```bash
+npm install v-scroll-lock --save
+```
 
-### NPM
+#### Install the Directive
 
-`npm install v-scroll-lock --save`
+```js
+import VScrollLock from 'v-scroll-lock'
 
-### Install the Vue plugin
+Vue.use(VScrollLock)
+```
 
-In your main JS file first import this plugin
+### [Vue CDN](https://vuejs.org/v2/guide/#Getting-Started)
 
-`import VScrollLock from 'v-scroll-lock'`
+Download latest `v-scroll-lock.min.js` from [https://github.com/phegman/v-scroll-lock/releases](https://github.com/phegman/v-scroll-lock/releases)
 
-Install the plugin
+Include using a `<script>` tag
 
-`Vue.use(VScrollLock)`
+```html
+<script src="v-scroll-lock.min.js"></script>
+```
 
 ## Usage
 
 Once the plugin is installed the `v-scroll-lock` directive can be used in any of your components. When the value of the directive is `true` scrolling will be locked on all elements **except** the element the directive is bound to.
 
-Here is an example of how you may implement it in a basic modal. See `src/components/Modal.vue` for a more in depth example.
+Here is an example of how you may implement it in a basic modal. Please note the below example is to demonstrate usage of the `v-scroll-lock` directive and is not a complete implementation of a modal. See `src/components/Modal.vue` for a more in depth example.
 
-```html
+```vue
 <template>
   <div class="modal" v-if="open">
     <button @click="closeModal">X</button>
@@ -55,29 +72,41 @@ Here is an example of how you may implement it in a basic modal. See `src/compon
     </div>
   </div>
 </template>
-```
 
-```js
 <script>
 export default {
   name: 'Modal',
-  data () {
+  data() {
     return {
-      open: false
+      open: false,
     }
   },
   methods: {
-    openModal () {
+    openModal() {
       this.open = true
     },
-    closeModal () {
+    closeModal() {
       this.open = false
-    }
-  }
+    },
+  },
 }
 </script>
 ```
 
+### Providing Your Own Version of [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock)
+
+To make using this directive easier [body-scroll-lock](https://github.com/willmcpo/body-scroll-lock) is included in the package. In the case that you would like to use a version different than the packaged version this can be specified in the plugin options. Also note that `v-scroll-lock-no-dep.esm.js` should be imported to prevent duplicate code in your bundle. See example below:
+
+```js
+import VScrollLock from 'v-scroll-lock/dist/v-scroll-lock-no-dep.esm'
+import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock'
+
+Vue.use(VScrollLock, {
+  enableBodyScroll,
+  disableBodyScroll,
+})
+```
+
 ## Support
 
 Please [open an issue](https://github.com/phegman/v-scroll-lock/issues/new/) for support.