├── .gitignore ├── test └── index.js ├── src ├── default.css ├── utils.js └── index.js ├── package.json ├── .travis.yml ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | console.log('todo') -------------------------------------------------------------------------------- /src/default.css: -------------------------------------------------------------------------------- 1 | .smooth-vuebar { 2 | max-height: 100vh; 3 | } 4 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | const extractProp = prop => obj => typeof obj === 'undefined' ? undefined : obj[prop] 2 | const extractOptions = extractProp('options') 3 | const extractListener = extractProp('listener') 4 | 5 | const bestMatch = extractor => possibilities => extractor(possibilities.find(p => typeof extractor(p) !== 'undefined')) 6 | export const bestListener = bestMatch(extractListener) 7 | export const bestOptions = bestMatch(extractOptions) 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smooth-vuebar", 3 | "version": "1.4.0", 4 | "description": "Vue directive wrapper for smooth-scrollbar", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "test": "node test" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/scaccogatto/smooth-vuebar.git" 12 | }, 13 | "keywords": [ 14 | "vue.js", 15 | "smooth", 16 | "scrollbar" 17 | ], 18 | "author": "Marco 'Gatto' Boffo", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/scaccogatto/smooth-vuebar/issues" 22 | }, 23 | "homepage": "https://github.com/scaccogatto/smooth-vuebar#readme", 24 | "dependencies": { 25 | "smooth-scrollbar": "^8.4.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - lts/dubnium 4 | install: 5 | - npm install 6 | script: 7 | - npm run test 8 | deploy: 9 | provider: npm 10 | email: marcoboffo.waves@gmail.com 11 | api_key: 12 | secure: FUSzt0zymyKj//346DhncEqxGtbjkq9gdehU13/GHLY2Uc6IlTFo9t98QxLxNQvgxRx+PEnQP1BQkykkuqnfhMLMz7cwZSY9AyCT5wvHOwZxTe8eoNAgflaUx8YhFWqq3NxuScL/wdwQ92bbTfT8tmqdMrzVTpnr3sBUO5BRoWTGf228z0ClDdITFoIuryWkWaMeE+oJS/qCrrSjhqdLPCCr5G96fSPt+gdS4xYF7GA8dEXQm5TBUK7aTXujcbiywJ35rWdQlHnWojLVj79lNESzna3UMLiNas2bCjpzBEnewZdjdfvclwcTzmpX5yx2cGx+uZkJmvSgmrS7jJ/pK7gqVJrHKVVrEj9LfK3dWVktF0Hg1Zqh69myQnhIP6OCgVb8Ooz0FodZCQgcwGefdfVJw93J4XTVNL82uzQqNq2y8Gg6ATiNTA/QHvDXLnXaFFoREJTDUx9jj7mowN3KENLZT9sHOEhnlIp+Py1DJlUXOCwZy/lEEoS/rR5Nl16bMdJTlfrePCErjiTuAC//0EeCpH+W7P6289DA0xPTv+sCCaEHq5v4ZPmc+qGgbqn7MMo6oVJgkQ5zksJ0Q8aNHrEN3AA+TYycYn2p1CToOQtoXU7Jv9n2ST09Ah1PnnJDAVLj0AfMK9sCmyztBty33d4JdCcogf2t0fyxc4mjytU= 13 | on: 14 | tags: true 15 | repo: scaccogatto/smooth-vuebar 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Marco 'Gatto' Boffo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Scrollbar from 'smooth-scrollbar' 2 | import './default.css' 3 | import { bestListener, bestOptions } from './utils' 4 | 5 | export default { 6 | install (Vue, options) { 7 | // helpers 8 | Vue.prototype.$scrollbar = Scrollbar 9 | Vue.scrollbar = Scrollbar 10 | 11 | // directive 12 | Vue.directive('smoothscrollbar', { 13 | bind (el) { 14 | el.classList.add('smooth-vuebar') 15 | }, 16 | inserted (el, binding) { 17 | const possibilities = [binding.value, options] 18 | const scrollbar = Scrollbar.init(el, bestOptions(possibilities)) 19 | 20 | const listener = bestListener(possibilities) 21 | if (listener) scrollbar.addListener(listener) 22 | 23 | el.dispatchEvent(new CustomEvent('insert', { detail: el })) 24 | }, 25 | componentUpdated (el, binding) { 26 | const scrollbar = Scrollbar.get(el) 27 | if (!scrollbar) return 28 | 29 | // remove old listener, if defined 30 | const oldListener = bestListener([binding.oldValue, options]) 31 | if (oldListener) scrollbar.removeListener(oldListener) 32 | 33 | // add the new listener, if defined 34 | const listener = bestListener([binding.value, options]) 35 | if (listener) scrollbar.addListener(listener) 36 | 37 | // refresh 38 | scrollbar.update() 39 | }, 40 | unbind (el) { 41 | const scrollbar = Scrollbar.get(el) 42 | if (scrollbar) scrollbar.destroy() 43 | 44 | el.dispatchEvent(new CustomEvent('unbind', { detail: el })) 45 | } 46 | }) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # smooth-vuebar 2 | 3 | > Vue directive wrapper for [smooth-scrollbar](https://github.com/idiotWu/smooth-scrollbar) 4 | 5 | ## Demo 6 | 7 | You can refer to the [wrapped library's demo](https://idiotwu.github.io/smooth-scrollbar/). 8 | 9 | ## Why 10 | 11 | There are many other wrappers for this library but none of them implements the original library as directive. 12 | 13 | I think directives are the right way to handle this kind of DOM manipulation, so let it be. 14 | 15 | Also, there are so many problems I found while trying SSR that the only available choice for me was doing it by myself. 16 | 17 | ## Install 18 | 19 | `npm i smooth-vuebar` 20 | 21 | ```js 22 | Vue.use(SmoothVuebar) 23 | ``` 24 | 25 | **SSR (nuxt)**: install as [client plugin](https://nuxtjs.org/guide/plugins/#client-side-only) 26 | 27 | **Safari and IE**: this library requires a `CustomEvent` polyfill. 28 | 29 | ## Usage 30 | 31 | Usually this plugin is used app-wide. 32 | 33 | ### Vue 34 | 35 | ```html 36 | 43 | ``` 44 | 45 | 46 | ### Nuxt & Gridsome 47 | 48 | this is a default.vue layout: 49 | 50 | ```html 51 | 61 | ``` 62 | 63 | However, you can use it where you want, just mind the default css: 64 | 65 | ```css 66 | .smooth-vuebar { 67 | max-width: 100vw; 68 | max-height: 100vh; 69 | } 70 | ``` 71 | 72 | And replace it as you wish. 73 | 74 | ## Options 75 | 76 | The directive can be customized passing an object. 77 | 78 | ```html 79 |
80 | ``` 81 | 82 | - `listener` (default: `undefined`) => can be a function, it will automatically set as listener. 83 | 84 | - `options` (default: `undefined`) => can be an object. 85 | 86 | Please refer to the [offical API docs](https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md). 87 | 88 | ## Events 89 | 90 | The directive implements two extra events, useful when you want to retrieve the Scrollbar istance and use it. 91 | 92 | - `@insert` - fired when the DOM element is inserted and the library is loaded on it. The callback may be a `function (e)`. 93 | 94 | - `@unbind` - fired when the DOM element is unbound and the library is unloaded. The callback may be a `function (e)`. 95 | 96 | ### Extra 97 | 98 | You can define global default options. They are valid only if you don't set any local option. 99 | 100 | Try it: 101 | 102 | ```js 103 | Vue.use(SmoothVuebar, { 104 | listener: () => {}, 105 | options: {} 106 | }) 107 | ``` 108 | 109 | ## Play with the core 110 | 111 | If you want to use the actual wrapper library, here is an helper, available in every component: 112 | 113 | ```js 114 | this.$scrollbar 115 | ``` 116 | 117 | Or project-wide 118 | 119 | ```js 120 | import Vue from 'vue' 121 | 122 | Vue.scrollbar 123 | ``` 124 | 125 | Refer to [offical API docs](https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md). 126 | --------------------------------------------------------------------------------