chore: init

.babelrc

@@ -0,0 +1,24 @@
+{
+  "presets": [
+    [
+      "vue-app",
+      {
+        "modules": false
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "vue-app",
+          {
+            "targets": {
+              "node": 8
+            }
+          }
+        ]
+      ]
+    }
+  }
+}

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    jest: true
+  },
+  extends: 'standard',
+  plugins: [
+    'jest',
+    'vue'
+  ],
+  rules: {
+    // Allow paren-less arrow functions
+    'arrow-parens': 0,
+    // Allow async-await
+    'generator-star-spacing': 0,
+    // Allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    // Do not allow console.logs etc...
+    'no-console': 2
+  },
+  globals: {
+    'jest/globals': true,
+    jasmine: true
+  }
+}

.gitignore

@@ -0,0 +1,29 @@
+.idea/**
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pids
+*.pid
+*.seed
+*.pid.lock
+lib-cov
+coverage
+.nyc_output
+.grunt
+bower_components
+.lock-wscript
+build/Release
+node_modules/
+package-lock.json
+jspm_packages/
+typings/
+.npm
+.eslintcache
+.node_repl_history
+*.tgz
+.yarn-integrity
+.env
+.next
+dist

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+node_js:
+  - "8"
+  - "9"
+  - "10"
+cache:
+  npm: true
+  directories:
+    - node_modules
+install:
+  - npm install
+script:
+  - npm t
+after_success:
+- npm run coverage

CONTRIBUTING.md

@@ -0,0 +1,7 @@
+# Contributing to VueNextLevelScroll
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Install the dependencies: `npm install`.
+3. Develop your feature/bugfix.
+4. Add tests into `test` directory and try them with `npm test`.
+5. Send the PR!

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Alexander Lichter ([@manniL](https://github.com/manniL))
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,161 @@
+# VueNextLevelScroll - Bring your scroll game to the next level!
+
+<p align="center">
+  <a href="https://travis-ci.org/Developmint/vue-next-level-scroll"><img src="https://img.shields.io/travis/Developmint/vue-next-level-scroll/master.svg" alt="Build Status"></a>
+  <a href="https://codecov.io/gh/Developmint/vue-next-level-scroll"><img src="https://img.shields.io/codecov/c/github/Developmint/vue-next-level-scroll/master.svg" alt="Coverage Status"></a>
+  <a href="https://www.npmjs.com/package/vue-next-level-scroll"><img src="https://img.shields.io/npm/dm/vue-next-level-scroll.svg" alt="Downloads"></a>
+  <a href="https://www.npmjs.com/package/vue-next-level-scroll"><img src="https://img.shields.io/npm/v/vue-next-level-scroll.svg" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/vue-next-level-scroll"><img src="https://img.shields.io/npm/l/vue-next-level-scroll.svg" alt="License"></a>
+  <a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="We use Conventional Commits"></a>
+</p>
+
+> "Click to scroll" **component** using the modern Browser API.
+
+## 🔥 Features
+
+- Just **one tiny file**
+- Component based (great for **async loading** and code splitting)
+- Universal code/SSR-safe
+- Well tested and **documented**
+- Compatible with Node 8.0+
+- Vue as the only dependency
+- Highly customizable
+
+## 🔎 Getting started
+
+
+### 📦️ Through NPM
+
+```
+$ npm install vue-next-level-scroll
+```
+
+#### Synchronous import
+
+```js
+import VueNextLevelScroll from 'vue-next-level-scroll'
+
+
+export default {
+  components: {
+    VueNextLevelScroll
+  }
+}
+
+```
+
+#### Async import
+
+```js
+import VueNextLevelScroll from 'vue-next-level-scroll'
+
+
+export default {
+  components: {
+    VueNextLevelScroll
+  }
+}
+
+```
+
+### 🔗❌ Using a CDN
+
+Sorry! You can't use *VueNextLevelScroll* with a CDN by now.
+
+## 🔐 Usage
+
+### You might like to go for a Polyfill
+
+VueNextLevelScroll uses the new [`ScrollBehavior specification`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior) by default.
+Unfortunately, Firefox is the only browser that has it built-in (by now).
+For this reason, you might like to go for [this polyfill](https://github.com/iamdustan/smoothscroll) (don't worry, less than 2kB after GZIP).
+
+
+### The component based approach
+
+As you likely have seen, there are various *Vue directives* out their that handle scrolling as well.
+You might have used one or two of them already or built one yourself.
+
+**But!** A component can sometimes be the better approach, as it can be tree shaken, is
+better suited for universal/SSR code and can be loaded asynchronously as well!
+
+### Prop overview
+
+
+| Prop | Optional? | Comment |
+|---| --- | --- |
+| target | ✅ | Can be any query selector you want (or a function that returns such). Will be passed to the scroll function |
+| scrollFunction  | ✅ | You can define an own scroll function that will take the `target` prop as parameter and can do whatever you like. |
+
+
+### Default scroll function explained
+
+#### Scroll to top
+
+When no `target` prop is set, the default scroll function will trigger a scroll to top:
+
+```html
+<vue-next-level-scroll>
+  <img src="https://developmint.de/logo.png">
+</vue-next-level-scroll>
+```
+
+#### Scroll to query selector
+
+When the `target` prop is provided, the default scroll function look the DOM node up and smooth scroll to it.
+If the `target` is a class query, the first found element will be chosen to scroll to.
+
+```html
+<vue-next-level-scroll target="#my-target">
+  <img src="https://developmint.de/logo.png">
+</vue-next-level-scroll>
+<div id="my-target"/>
+```
+
+#### Scroll to non-existing query selector
+
+When the `target` prop is given but no node matches, a console error will appear.
+
+```html
+<vue-next-level-scroll target="#my-target">
+  <img src="https://developmint.de/logo.png">
+</vue-next-level-scroll>
+<div id="my-non-existing-target"/>
+```
+
+```js
+Error: Could not scroll to #my-target
+```
+
+### Custom scroll function
+
+Most users are satisfied with the default scroll function provided by *VueNextLevelScroll*
+However if you need other behavior you can simply write your own function:
+
+```html
+<template>
+    <vue-next-level-scroll
+      target="#my-target"
+      :scroll="myScroll">
+      <img src="https://developmint.de/logo.png">
+    </vue-next-level-scroll>
+    <div id="my-non-existing-target"/>
+</template>
+
+<script>
+export default {
+ const myScroll = target => doSomeMagicHere(target)
+}
+</script>
+```
+
+You might not need the polyfill then as well :wink:
+
+## 🛠️ Contributing
+
+Please see our [CONTRIBUTING.md](./CONTRIBUTING.md)
+
+
+## 📑 License
+
+[MIT License](./LICENSE.md) - Copyright (c) Developmint - Alexander Lichter

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

lib/ScrollNextLevel.vue

@@ -0,0 +1,40 @@
+<script>
+export default {
+  functional: true,
+  render (h, { children, data, props: { target, scrollFunction }, _ssrNode }) {
+    const clickFunction = () => { scrollFunction ? scrollFunction(target) : defaultScrollFunction(target)}
+
+    return h('div', {
+      ...data,
+      on: {
+        // Ignore scroll function on server side
+        click: _ssrNode ? undefined : clickFunction
+      }
+    }, children)
+  }
+}
+
+const defaultScrollFunction = async rawTarget => {
+  const target = (typeof rawTarget === 'function') ? await rawTarget() : rawTarget
+
+  // If no target given, auto scroll to top
+  if (!target) {
+    return window.scroll({
+      top: 0,
+      behavior: 'smooth'
+    })
+  }
+
+  const node = document.querySelector(target)
+
+  // If target prop is present but the node does not exist, send an error
+  if (!node) {
+    return console.error(`Could not scroll to ${target}`)
+  }
+
+  node.scrollIntoView({
+    behavior: 'smooth'
+  })
+}
+
+</script>