Skip to content
This repository was archived by the owner on Aug 3, 2019. It is now read-only.

Commit 2d5200c

Browse files
hamed-ehteshamhamed-ehtesham
committed
first version
1 parent 7fd379b commit 2d5200c

File tree

9 files changed

+3024
-1
lines changed

9 files changed

+3024
-1
lines changed

‎.babelrc‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"presets": [
3+
[
4+
"env",
5+
{
6+
"targets": {
7+
"browsers": [
8+
"last 4 versions",
9+
"safari >= 7"
10+
]
11+
},
12+
"modules": false
13+
}
14+
]
15+
],
16+
"plugins": [
17+
"transform-object-rest-spread"
18+
],
19+
"env": {
20+
"test": {
21+
"presets": [
22+
[
23+
"env",
24+
{
25+
"targets": {
26+
"node": 8
27+
}
28+
}
29+
]
30+
]
31+
}
32+
}
33+
}

‎.gitignore‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Created by .ignore support plugin (hsz.mobi)
2+
### Node template
3+
# Logs
4+
logs
5+
*.log
6+
npm-debug.log*
7+
yarn-debug.log*
8+
yarn-error.log*
9+
10+
# Runtime data
11+
pids
12+
*.pid
13+
*.seed
14+
*.pid.lock
15+
16+
# Directory for instrumented libs generated by jscoverage/JSCover
17+
lib-cov
18+
19+
# Coverage directory used by tools like istanbul
20+
coverage
21+
22+
# nyc test coverage
23+
.nyc_output
24+
25+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26+
.grunt
27+
28+
# Bower dependency directory (https://bower.io/)
29+
bower_components
30+
31+
# node-waf configuration
32+
.lock-wscript
33+
34+
# Compiled binary addons (https://nodejs.org/api/addons.html)
35+
build/Release
36+
37+
# Dependency directories
38+
node_modules/
39+
jspm_packages/
40+
41+
# Typescript v1 declaration files
42+
typings/
43+
44+
# Optional npm cache directory
45+
.npm
46+
47+
# Optional eslint cache
48+
.eslintcache
49+
50+
# Optional REPL history
51+
.node_repl_history
52+
53+
# Output of 'npm pack'
54+
*.tgz
55+
56+
# Yarn Integrity file
57+
.yarn-integrity
58+
59+
# dotenv environment variables file
60+
.env
61+
62+
# next.js build output
63+
.next
64+
65+
# IntelliJ project files
66+
.idea
67+
68+
dist
69+
overlay-scrollbars.js

‎README.md‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,49 @@
11
# os-vue
2-
Overlay Scrollbars vue component
2+
Overlay Scrollbars Vue Component
3+
4+
## Installation
5+
6+
```shell
7+
yarn add os-vue
8+
# or
9+
npm i --save os-vue
10+
```
11+
12+
Then import it in your js file and install it
13+
14+
```js
15+
import OverlayScrollbars from 'os-vue';
16+
17+
Vue.use(OverlayScrollbars);
18+
```
19+
20+
Or
21+
22+
```js
23+
import OverlayScrollbars from 'os-vue/overlay-scrollbars';
24+
25+
Vue.component(OverlayScrollbars.name, OverlayScrollbars);
26+
```
27+
28+
## Usage
29+
30+
Once installed, it can be used in a template as simply as:
31+
32+
```vue
33+
<overlay-scrollbars>
34+
<div v-for="item of count">{{ item }}</div>
35+
</overlay-scrollbars>
36+
```
37+
38+
You can also provide options
39+
40+
```vue
41+
<overlay-scrollbars :options="os_options">
42+
<div v-for="item of count">{{ item }}</div>
43+
</overlay-scrollbars>
44+
```
45+
46+
If you have discovered a 🐜 or have a feature suggestion, feel free to create an [issue](https://github.com/parsisolution/os-vue/issues) on Github.
47+
48+
# License
49+
Released under The MIT [License](https://github.com/parsisolution/os-vue/blob/master/LICENSE). Copyright (c) hamed-ehtesham.

‎package.json‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "os-vue",
3+
"version": "1.0.0",
4+
"description": "Overlay Scrollbars Vue Component",
5+
"keywords": [
6+
"overlayscrollbars",
7+
"custom",
8+
"scrollbar",
9+
"scrollbars",
10+
"scroll",
11+
"frontend",
12+
"Vue",
13+
"VueJS",
14+
"Vue2",
15+
"WebComponents",
16+
"Component",
17+
"CSS"
18+
],
19+
"main": "dist/os-vue.min.js",
20+
"scripts": {
21+
"dev": "cross-env-shell \"rollup -c rollup.config.js\"",
22+
"build": "cross-env NODE_ENV=production npm run dev",
23+
"watch": "cross-env NODE_ENV=development npm run dev -- --watch"
24+
},
25+
"repository": {
26+
"type": "git",
27+
"url": "git+https://github.com/parsisolution/os-vue.git"
28+
},
29+
"files": [
30+
"src",
31+
"dist",
32+
"overlay-scrollbars.js"
33+
],
34+
"author": "Hamed Ehtesham",
35+
"license": "MIT",
36+
"bugs": {
37+
"url": "https://github.com/parsisolution/os-vue/issues"
38+
},
39+
"homepage": "https://github.com/parsisolution/os-vue#readme",
40+
"peerDependencies": {
41+
"vue": "^2.2.0"
42+
},
43+
"dependencies": {
44+
"overlayscrollbars": "^1.5.3"
45+
},
46+
"devDependencies": {
47+
"babel-core": "^6.26.0",
48+
"babel-plugin-external-helpers": "^6.22.0",
49+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
50+
"babel-preset-env": "^1.7.0",
51+
"cross-env": "^5.2.0",
52+
"rollup": "^0.66.6",
53+
"rollup-plugin-babel": "3",
54+
"rollup-plugin-commonjs": "^9.2.0",
55+
"rollup-plugin-license": "^0.7.0",
56+
"rollup-plugin-uglify": "^6.0.0",
57+
"rollup-plugin-uglify-es": "^0.0.1",
58+
"standard-version": "^4.4.0",
59+
"uglify-es": "^3.3.6"
60+
}
61+
}

‎rollup.config.js‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
const babel = require('rollup-plugin-babel');
4+
const commonjs = require('rollup-plugin-commonjs');
5+
import {uglify} from 'rollup-plugin-uglify';
6+
import uglifyES from 'rollup-plugin-uglify-es';
7+
8+
const license = require('rollup-plugin-license');
9+
const {name} = require('./package.json');
10+
11+
const base = __dirname;
12+
const src = path.resolve(base, 'src');
13+
const dist = path.resolve(base, 'dist');
14+
15+
// Ensure dist directory exists
16+
if (!fs.existsSync(dist)) {
17+
fs.mkdirSync(dist)
18+
}
19+
20+
function defaultPlugins() {
21+
return [
22+
commonjs({extensions: ['.js', '.json']}),
23+
babel({
24+
plugins: ['external-helpers']
25+
}),
26+
uglify({
27+
sourcemap: true,
28+
// numWorkers: 1,
29+
}),
30+
license({
31+
// sourceMap: true,
32+
// cwd: '.', // Default is process.cwd()
33+
34+
banner: `<%= pkg.name %> v<%= pkg.version %>
35+
(c) <%= moment().format('YYYY') %> <%= pkg.author %>
36+
Released under the <%= pkg.license %> License.`,
37+
}),
38+
]
39+
}
40+
41+
let plugins = defaultPlugins();
42+
plugins.splice(2, 1);
43+
44+
let productionPlugins = defaultPlugins();
45+
let productionESPlugins = defaultPlugins();
46+
productionESPlugins[2] = uglifyES();
47+
48+
let configs = [
49+
{
50+
input: path.resolve(src, 'plugin.common.js'),
51+
// external: Object.keys(dependencies),
52+
plugins,
53+
output: [
54+
{
55+
format: 'cjs',
56+
exports: 'named',
57+
name: 'OverlayScrollbars',
58+
file: path.resolve(dist, name + '.common.js'),
59+
sourcemap: true
60+
},
61+
{
62+
format: 'umd',
63+
exports: 'named',
64+
name: 'OverlayScrollbars',
65+
file: path.resolve(dist, name + '.js'),
66+
sourcemap: true
67+
}
68+
],
69+
},
70+
{
71+
input: path.resolve(src, 'plugin.js'),
72+
plugins,
73+
output: {
74+
format: 'es',
75+
file: path.resolve(dist, name + '.esm.js'),
76+
sourcemap: true
77+
},
78+
},
79+
{
80+
input: path.resolve(src, 'OverlayScrollbars.js'),
81+
plugins,
82+
output: {
83+
format: 'umd',
84+
name: 'OverlayScrollbars',
85+
file: path.resolve(base, 'overlay-scrollbars.js'),
86+
// sourcemap: true
87+
},
88+
}
89+
];
90+
91+
if (process.env.NODE_ENV === 'production') {
92+
let newConfigs = [
93+
{
94+
input: path.resolve(src, 'plugin.common.js'),
95+
plugins: productionPlugins,
96+
output: {
97+
format: 'cjs',
98+
exports: 'named',
99+
name: 'OverlayScrollbars',
100+
file: path.resolve(dist, name + '.common.min.js'),
101+
sourcemap: true
102+
},
103+
},
104+
{
105+
input: path.resolve(src, 'plugin.common.js'),
106+
plugins: productionPlugins,
107+
output: {
108+
format: 'umd',
109+
exports: 'named',
110+
name: 'OverlayScrollbars',
111+
file: path.resolve(dist, name + '.min.js'),
112+
sourcemap: true
113+
},
114+
},
115+
{
116+
input: path.resolve(src, 'plugin.js'),
117+
plugins: productionESPlugins,
118+
output: {
119+
format: 'es',
120+
file: path.resolve(dist, name + '.esm.min.js'),
121+
sourcemap: true
122+
},
123+
},
124+
{
125+
input: path.resolve(src, 'OverlayScrollbars.js'),
126+
plugins: productionPlugins,
127+
output: {
128+
format: 'umd',
129+
name: 'OverlayScrollbars',
130+
file: path.resolve(base, 'overlay-scrollbars.js'),
131+
// sourcemap: true
132+
},
133+
}
134+
];
135+
configs.splice(2, 1);
136+
configs.push(...newConfigs);
137+
}
138+
139+
module.exports = configs;

‎src/OverlayScrollbars.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export default {
2+
name: "overlay-scrollbars",
3+
4+
data() {
5+
return {
6+
oscroll: null,
7+
}
8+
},
9+
10+
props: {
11+
options: {
12+
type: Object,
13+
default: {}
14+
},
15+
},
16+
17+
mounted() {
18+
if (!this.oscroll)
19+
this.oscroll = OverlayScrollbars(this.$el, this.options);
20+
},
21+
22+
beforeDestroy() {
23+
this.oscroll.destroy();
24+
this.oscroll = null;
25+
},
26+
27+
render(h) {
28+
return h('div',
29+
[
30+
h('div', this.$slots.default),
31+
]
32+
)
33+
}
34+
}

0 commit comments

Comments
 (0)