Permalink
Browse files

New version using a new vue-cli template

  • Loading branch information...
Akryum committed Dec 20, 2016
1 parent 70003d9 commit cfa27f1736cee11d977a1fbb65f1bf1c6246e26c
View
@@ -0,0 +1,6 @@
{
"presets": [
["es2015", { "modules": false }],
"stage-0"
]
}
View
@@ -0,0 +1,2 @@
node_modules/
dist/
View
@@ -23,8 +23,5 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// trailing comma
'comma-dangle': ['error', 'always-multiline'],
// beware of returning assignement
'no-return-assign': 'warn',
'no-extend-native': 'warn',
}
}
View
@@ -13,6 +13,14 @@ import { VirtualScroller } from 'vue-virtual-scroller'
Vue.component('virtual-scroller', VirtualScroller)
```
Or install it as a plugin:
```javascript
import VirtualScroller from 'vue-virtual-scroller'
Vue.use(VirtualScroller)
```
```html
<template>
<div class="demo">
@@ -52,3 +60,9 @@ export default {
```
Finally, set the size of the virtual-scroller element (for example, with CSS).
---
## License
[MIT](http://opensource.org/licenses/MIT)
@@ -0,0 +1,49 @@
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var outputFile = 'vue-virtual-scroller'
var globalName = 'VueVirtualScroller'
var config = require('../package.json')
module.exports = {
entry: './src/index.js',
output: {
path: './dist',
filename: outputFile + '.js',
library: globalName,
libraryTarget: 'umd',
},
module: {
rules: [
{
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
},
{
test: /.js$/,
use: 'babel-loader',
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract('css-loader'),
},
},
},
],
},
externals: {
// Put external libraries like lodash here
},
plugins: [
new webpack.DefinePlugin({
'VERSION': JSON.stringify(config.version),
}),
new ExtractTextPlugin(outputFile + '.css'),
],
}
@@ -0,0 +1,6 @@
var merge = require('webpack-merge')
var base = require('./webpack.base.config')
module.exports = merge(base, {
devtool: 'eval-source-map',
})
@@ -0,0 +1,14 @@
var webpack = require('webpack')
var merge = require('webpack-merge')
var base = require('./webpack.base.config')
module.exports = merge(base, {
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true,
},
mangle: false,
}),
],
})
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -1,5 +1,6 @@
import Vue from 'vue'
import VirtualScroller from '../src/VirtualScroller.vue'
// import VirtualScroller from '../src/VirtualScroller.vue'
import { VirtualScroller } from '../../template-test'
import * as Index from '../'
console.log(Index)
@@ -0,0 +1,18 @@
.virtual-scroller[data-v-5594e8c4] {
overflow-y: auto;
position: relative;
}
.item-container[data-v-5594e8c4] {
box-sizing: border-box;
}
.resize-observer[data-v-5594e8c4] {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border: none;
background-color: transparent;
}

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -6,6 +6,6 @@
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
<script src="demo-dist/build.js"></script>
</body>
</html>
View
@@ -1,3 +1,3 @@
import Component from './src/VirtualScroller.vue'
export const VirtualScroller = Component
export default from './dist/vue-virtual-scroller'
export * from './dist/vue-virtual-scroller'
import './dist/vue-virtual-scroller.css'
View
@@ -1,45 +1,53 @@
{
"name": "vue-virtual-scroller",
"version": "0.0.2",
"description": "Smooth scrolling for any amount of data",
"main": "index.js",
"version": "0.0.3",
"author": {
"name": "Guillaume Chau",
"email": "guillaume.b.chau@gmail.com"
},
"keywords": [
"vue",
"vuejs",
"plugin"
],
"license": "MIT",
"main": "dist/vue-virtual-scroller.js",
"module": "index.js",
"scripts": {
"demo": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --open --port 3000",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
"dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.config.js --progress --watch",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.config.js --progress --hide-modules",
"prepublish": "npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Akryum/vue-virtual-scroller.git"
},
"author": "Guillaume CHAU",
"license": "ISC",
"bugs": {
"url": "https://github.com/Akryum/vue-virtual-scroller/issues"
},
"homepage": "https://github.com/Akryum/vue-virtual-scroller#readme",
"peerDependencies": {
"vue": "^2.0.1"
"vue": "^2.1.6"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^7.1.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-stage-0": "^6.16.0",
"cross-env": "^3.0.0",
"css-loader": "^0.26.0",
"eslint": "^3.9.1",
"cross-env": "^3.1.3",
"css-loader": "^0.26.1",
"eslint": "^3.12.1",
"eslint-config-standard": "^6.2.1",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^1.6.0",
"eslint-plugin-promise": "^3.3.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"faker": "^3.1.0",
"file-loader": "^0.8.4",
"vue": "^2.1.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"vue-loader": "^10.0.0",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.0"
"vue-template-compiler": "^2.1.6",
"webpack": "^2.1.0-beta.28",
"webpack-merge": "^1.1.2"
}
}
@@ -5,6 +5,8 @@
<component class="item" v-for="item in visibleItems" :key="item.index" :is="renderers[item[typeField]]" :item="item"></component>
</div>
</div>
<iframe ref="resizeObserver" class="resize-observer" tabindex="-1"></iframe>
</div>
</template>
@@ -62,22 +64,68 @@ export default {
}
this.$forceUpdate()
},
scrollToItem (index) {
this.$el.scrollTop = index * this.itemHeight
},
addResizeHandlers () {
const iframe = this.$refs.resizeObserver
const w = iframe.contentWindow
// If the iframe is re-attached to the DOM, the resize listener is removed because the
// content is reloaded, so make sure to install the handler after the iframe is loaded.
iframe.addEventListener('load', this.refreshResizeHandlers)
if (w) {
w.addEventListener('resize', this.updateVisibleItems)
w.addEventListener('close', this.removeResizeHandlers)
}
},
removeResizeHandlers () {
console.log('removeResizeHandlers')
const iframe = this.$refs.resizeObserver
const w = iframe.contentWindow
iframe.removeEventListener('load', this.refreshResizeHandlers)
if (w) {
w.removeEventListener('resize', this.updateVisibleItems)
w.removeEventListener('close', this.removeResizeHandlers)
}
},
refreshResizeHandlers () {
console.log('refreshResizeHandlers')
this.removeResizeHandlers()
this.addResizeHandlers()
// The iframe size might have changed while loading, which can also
// happen if the size has been changed while detached from the DOM.
this.updateVisibleItems()
},
},
mounted () {
this.updateVisibleItems()
this.addResizeHandlers()
},
}
</script>
<style scoped>
.virtual-scroller {
overflow-y: auto;
position: relative;
}
.item-container {
box-sizing: border-box;
}
.resize-observer {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
border: none;
background-color: transparent;
}
</style>
View
@@ -0,0 +1,13 @@
import _VirtualScroller from './components/VirtualScroller.vue'
export function install (Vue) {
Vue.component('test', _VirtualScroller)
}
export const VirtualScroller = _VirtualScroller
export default {
/* eslint-disable no-undef */
version: VERSION,
install,
}
View

This file was deleted.

Oops, something went wrong.

0 comments on commit cfa27f1

Please sign in to comment.