Skip to content

Commit cfa27f1

Browse files
AkryumAkryum
committed
New version using a new vue-cli template
1 parent 70003d9 commit cfa27f1

22 files changed

+204
-87
lines changed

‎.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": [
3+
["es2015", { "modules": false }],
4+
"stage-0"
5+
]
6+
}

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
dist/

‎.eslintrc.js

-3
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,5 @@ module.exports = {
2323
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
2424
// trailing comma
2525
'comma-dangle': ['error', 'always-multiline'],
26-
// beware of returning assignement
27-
'no-return-assign': 'warn',
28-
'no-extend-native': 'warn',
2926
}
3027
}

‎README.md

+14
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@ import { VirtualScroller } from 'vue-virtual-scroller'
1313
Vue.component('virtual-scroller', VirtualScroller)
1414
```
1515

16+
Or install it as a plugin:
17+
18+
```javascript
19+
import VirtualScroller from 'vue-virtual-scroller'
20+
21+
Vue.use(VirtualScroller)
22+
```
23+
1624
```html
1725
<template>
1826
<div class="demo">
@@ -52,3 +60,9 @@ export default {
5260
```
5361

5462
Finally, set the size of the virtual-scroller element (for example, with CSS).
63+
64+
---
65+
66+
## License
67+
68+
[MIT](http://opensource.org/licenses/MIT)

‎config/webpack.base.config.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
var webpack = require('webpack')
2+
var ExtractTextPlugin = require('extract-text-webpack-plugin')
3+
4+
var outputFile = 'vue-virtual-scroller'
5+
var globalName = 'VueVirtualScroller'
6+
7+
var config = require('../package.json')
8+
9+
module.exports = {
10+
entry: './src/index.js',
11+
output: {
12+
path: './dist',
13+
filename: outputFile + '.js',
14+
library: globalName,
15+
libraryTarget: 'umd',
16+
},
17+
module: {
18+
rules: [
19+
{
20+
enforce: 'pre',
21+
test: /\.(js|vue)$/,
22+
loader: 'eslint-loader',
23+
exclude: /node_modules/,
24+
},
25+
{
26+
test: /.js$/,
27+
use: 'babel-loader',
28+
},
29+
{
30+
test: /\.vue$/,
31+
loader: 'vue-loader',
32+
options: {
33+
loaders: {
34+
css: ExtractTextPlugin.extract('css-loader'),
35+
},
36+
},
37+
},
38+
],
39+
},
40+
externals: {
41+
// Put external libraries like lodash here
42+
},
43+
plugins: [
44+
new webpack.DefinePlugin({
45+
'VERSION': JSON.stringify(config.version),
46+
}),
47+
new ExtractTextPlugin(outputFile + '.css'),
48+
],
49+
}

‎config/webpack.dev.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var merge = require('webpack-merge')
2+
var base = require('./webpack.base.config')
3+
4+
module.exports = merge(base, {
5+
devtool: 'eval-source-map',
6+
})

‎config/webpack.prod.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var webpack = require('webpack')
2+
var merge = require('webpack-merge')
3+
var base = require('./webpack.base.config')
4+
5+
module.exports = merge(base, {
6+
plugins: [
7+
new webpack.optimize.UglifyJsPlugin({
8+
compress: {
9+
warnings: true,
10+
},
11+
mangle: false,
12+
}),
13+
],
14+
})

‎dist/build.js renamed to ‎demo-dist/build.js

File renamed without changes.

‎dist/build.js.map renamed to ‎demo-dist/build.js.map

File renamed without changes.

‎demo/Demo.vue renamed to ‎demo-src/Demo.vue

File renamed without changes.

‎demo/Item.vue renamed to ‎demo-src/Item.vue

File renamed without changes.

‎demo/Letter.vue renamed to ‎demo-src/Letter.vue

File renamed without changes.

‎demo/data.js renamed to ‎demo-src/data.js

File renamed without changes.

‎demo/main.js renamed to ‎demo-src/main.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Vue from 'vue'
2-
import VirtualScroller from '../src/VirtualScroller.vue'
2+
// import VirtualScroller from '../src/VirtualScroller.vue'
3+
import { VirtualScroller } from '../../template-test'
34
import * as Index from '../'
45

56
console.log(Index)

‎dist/vue-virtual-scroller.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
.virtual-scroller[data-v-5594e8c4] {
3+
overflow-y: auto;
4+
position: relative;
5+
}
6+
.item-container[data-v-5594e8c4] {
7+
box-sizing: border-box;
8+
}
9+
.resize-observer[data-v-5594e8c4] {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
z-index: -1;
14+
width: 100%;
15+
height: 100%;
16+
border: none;
17+
background-color: transparent;
18+
}

‎dist/vue-virtual-scroller.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
</head>
77
<body>
88
<div id="app"></div>
9-
<script src="dist/build.js"></script>
9+
<script src="demo-dist/build.js"></script>
1010
</body>
1111
</html>

‎index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import Component from './src/VirtualScroller.vue'
2-
3-
export const VirtualScroller = Component
1+
export default from './dist/vue-virtual-scroller'
2+
export * from './dist/vue-virtual-scroller'
3+
import './dist/vue-virtual-scroller.css'

‎package.json

+27-19
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,53 @@
11
{
22
"name": "vue-virtual-scroller",
3-
"version": "0.0.2",
43
"description": "Smooth scrolling for any amount of data",
5-
"main": "index.js",
4+
"version": "0.0.3",
5+
"author": {
6+
"name": "Guillaume Chau",
7+
"email": "[email protected]"
8+
},
9+
"keywords": [
10+
"vue",
11+
"vuejs",
12+
"plugin"
13+
],
14+
"license": "MIT",
15+
"main": "dist/vue-virtual-scroller.js",
16+
"module": "index.js",
617
"scripts": {
7-
"demo": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --port 3000",
8-
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
18+
"dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.config.js --progress --watch",
19+
"build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.config.js --progress --hide-modules",
20+
"prepublish": "npm run build"
921
},
1022
"repository": {
1123
"type": "git",
1224
"url": "git+https://github.com/Akryum/vue-virtual-scroller.git"
1325
},
14-
"author": "Guillaume CHAU",
15-
"license": "ISC",
1626
"bugs": {
1727
"url": "https://github.com/Akryum/vue-virtual-scroller/issues"
1828
},
1929
"homepage": "https://github.com/Akryum/vue-virtual-scroller#readme",
2030
"peerDependencies": {
21-
"vue": "^2.0.1"
31+
"vue": "^2.1.6"
2232
},
2333
"devDependencies": {
2434
"babel-core": "^6.0.0",
25-
"babel-eslint": "^7.1.0",
35+
"babel-eslint": "^7.1.1",
2636
"babel-loader": "^6.0.0",
27-
"babel-polyfill": "^6.16.0",
28-
"babel-preset-es2015": "^6.0.0",
37+
"babel-preset-es2015": "^6.14.0",
2938
"babel-preset-stage-0": "^6.16.0",
30-
"cross-env": "^3.0.0",
31-
"css-loader": "^0.26.0",
32-
"eslint": "^3.9.1",
39+
"cross-env": "^3.1.3",
40+
"css-loader": "^0.26.1",
41+
"eslint": "^3.12.1",
3342
"eslint-config-standard": "^6.2.1",
3443
"eslint-loader": "^1.6.1",
3544
"eslint-plugin-html": "^1.6.0",
36-
"eslint-plugin-promise": "^3.3.1",
45+
"eslint-plugin-promise": "^3.4.0",
3746
"eslint-plugin-standard": "^2.0.1",
38-
"faker": "^3.1.0",
39-
"file-loader": "^0.8.4",
40-
"vue": "^2.1.0",
47+
"extract-text-webpack-plugin": "^2.0.0-beta.4",
4148
"vue-loader": "^10.0.0",
42-
"webpack": "^2.1.0-beta.25",
43-
"webpack-dev-server": "^2.1.0-beta.0"
49+
"vue-template-compiler": "^2.1.6",
50+
"webpack": "^2.1.0-beta.28",
51+
"webpack-merge": "^1.1.2"
4452
}
4553
}

‎src/VirtualScroller.vue renamed to ‎src/components/VirtualScroller.vue

+48
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<component class="item" v-for="item in visibleItems" :key="item.index" :is="renderers[item[typeField]]" :item="item"></component>
66
</div>
77
</div>
8+
9+
<iframe ref="resizeObserver" class="resize-observer" tabindex="-1"></iframe>
810
</div>
911
</template>
1012

@@ -62,22 +64,68 @@ export default {
6264
}
6365
this.$forceUpdate()
6466
},
67+
6568
scrollToItem (index) {
6669
this.$el.scrollTop = index * this.itemHeight
6770
},
71+
72+
addResizeHandlers () {
73+
const iframe = this.$refs.resizeObserver
74+
const w = iframe.contentWindow
75+
// If the iframe is re-attached to the DOM, the resize listener is removed because the
76+
// content is reloaded, so make sure to install the handler after the iframe is loaded.
77+
iframe.addEventListener('load', this.refreshResizeHandlers)
78+
if (w) {
79+
w.addEventListener('resize', this.updateVisibleItems)
80+
w.addEventListener('close', this.removeResizeHandlers)
81+
}
82+
},
83+
84+
removeResizeHandlers () {
85+
console.log('removeResizeHandlers')
86+
const iframe = this.$refs.resizeObserver
87+
const w = iframe.contentWindow
88+
iframe.removeEventListener('load', this.refreshResizeHandlers)
89+
if (w) {
90+
w.removeEventListener('resize', this.updateVisibleItems)
91+
w.removeEventListener('close', this.removeResizeHandlers)
92+
}
93+
},
94+
95+
refreshResizeHandlers () {
96+
console.log('refreshResizeHandlers')
97+
this.removeResizeHandlers()
98+
this.addResizeHandlers()
99+
// The iframe size might have changed while loading, which can also
100+
// happen if the size has been changed while detached from the DOM.
101+
this.updateVisibleItems()
102+
},
68103
},
69104
mounted () {
70105
this.updateVisibleItems()
106+
this.addResizeHandlers()
71107
},
72108
}
73109
</script>
74110

75111
<style scoped>
76112
.virtual-scroller {
77113
overflow-y: auto;
114+
position: relative;
78115
}
79116
80117
.item-container {
81118
box-sizing: border-box;
82119
}
120+
121+
.resize-observer {
122+
position: absolute;
123+
top: 0;
124+
left: 0;
125+
z-index: -1;
126+
width: 100%;
127+
height: 100%;
128+
border: none;
129+
background-color: transparent;
130+
}
83131
</style>

‎src/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import _VirtualScroller from './components/VirtualScroller.vue'
2+
3+
export function install (Vue) {
4+
Vue.component('test', _VirtualScroller)
5+
}
6+
7+
export const VirtualScroller = _VirtualScroller
8+
9+
export default {
10+
/* eslint-disable no-undef */
11+
version: VERSION,
12+
install,
13+
}

‎webpack.config.js

-60
This file was deleted.

0 commit comments

Comments
 (0)