Skip to content

Commit c500a8a

Browse files
grakicgrakic
committed
Initial release
0 parents  commit c500a8a

14 files changed

+669
-0
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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module.exports = {
2+
root: true,
3+
parser: 'babel-eslint',
4+
parserOptions: {
5+
sourceType: 'module'
6+
},
7+
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
8+
extends: 'standard',
9+
// required to lint *.vue files
10+
plugins: [
11+
'html'
12+
],
13+
env: {
14+
browser: true,
15+
},
16+
// add your custom rules here
17+
'rules': {
18+
// allow paren-less arrow functions
19+
'arrow-parens': 0,
20+
// allow async-await
21+
'generator-star-spacing': 0,
22+
// allow debugger during development
23+
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
24+
// trailing comma
25+
'comma-dangle': ['error', 'always-multiline'],
26+
}
27+
}

‎.gitignore

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

‎README.md

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
# vue-double-list
2+
3+
[![npm](https://img.shields.io/npm/v/vue-double-list.svg) ![npm](https://img.shields.io/npm/dm/vue-double-list.svg)](https://www.npmjs.com/package/vue-double-list)
4+
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
5+
6+
Double List Selection Component for Vue.js
7+
8+
[![Double List Selection Component for Vue.js](https://img.youtube.com/vi/qkYWaaMLCBM/0.jpg)](https://www.youtube.com/watch?v=qkYWaaMLCBM)
9+
10+
## Table of contents
11+
12+
- [Installation](#installation)
13+
- [Usage](#usage)
14+
- [Example](#example)
15+
16+
# Installation
17+
18+
```
19+
npm install --save vue-double-list
20+
```
21+
22+
## Default import
23+
24+
```javascript
25+
import Vue from 'vue'
26+
import DoubleList from 'vue-double-list'
27+
28+
Vue.use(DoubleList)
29+
```
30+
31+
**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
32+
33+
## Browser
34+
35+
```html
36+
<link rel="stylesheet" href="vue-double-list/dist/vue-double-list.css"/>
37+
38+
<script src="vue.js"></script>
39+
<script src="vue-double-list/dist/vue-double-list.js"></script>
40+
```
41+
42+
The plugin should be auto-installed. If not, you can install it manually with the instructions below:
43+
44+
```javascript
45+
Vue.use(DoubleList)
46+
```
47+
48+
# Usage
49+
50+
```html
51+
<double-list label="movies" :items="listItems" v-model="selectedItems"></double-list>
52+
```
53+
54+
# Props
55+
| Name | Type | Default | Description |
56+
| ---:| --- | ---| --- |
57+
| items | Array | [] | List items for selection |
58+
| label | String | "" | Name describing items, used in UI for buttons, labels etc. |
59+
| itemFilterKey | String | undefined | If items are objects, filter list on this item property |
60+
| itemIdKey | String | undefined | If items are objects, use this item property for object identity |
61+
| value | Array | [] | List of selected items, updated on @input |
62+
63+
# Example
64+
65+
With plain list items:
66+
67+
```javascript
68+
new Vue({
69+
el: '#vue',
70+
methods: {
71+
onInput: function() {
72+
console.log('Selection changed', this.selectedItems);
73+
}
74+
},
75+
data: {
76+
listItems: ['Back to the Future', 'The Future', 'Metropolis'],
77+
selectedItems: []
78+
}
79+
})
80+
```
81+
82+
With object list items, will keep selection by item's id when listItems is updated:
83+
84+
```javascript
85+
new Vue({
86+
el: '#vue',
87+
data: {
88+
listItems: [
89+
{id: 1, title: 'Back to the Future'},
90+
{id: 2, title: 'The Future'},
91+
{id: 3, title: 'Metropolis'}
92+
],
93+
selectedItems: []
94+
}
95+
})
96+
```
97+
98+
To customize list item rendering, use named slot:
99+
100+
```html
101+
<double-list label="movies" :items="listItems" v-model="selectedItems">
102+
<template slot="item" scope="props">
103+
{{ props.item.title }}
104+
</template>
105+
</double-list>
106+
```
107+
108+
---
109+
110+
# Plugin Development
111+
112+
## Installation
113+
114+
The first time you create or clone your plugin, you need to install the default dependencies:
115+
116+
```
117+
npm install
118+
```
119+
120+
## Watch and compile
121+
122+
This will run webpack in watching mode and output the compiled files in the `dist` folder.
123+
124+
```
125+
npm run dev
126+
```
127+
128+
## Use it in another project
129+
130+
While developping, you can follow the install instructions of your plugin and link it into the project that uses it.
131+
132+
In the plugin folder:
133+
134+
```
135+
npm link
136+
```
137+
138+
In the other project folder:
139+
140+
```
141+
npm link vue-double-list
142+
```
143+
144+
This will install it in the dependencies as a symlink, so that it gets any modifications made to the plugin.
145+
146+
## Publish to npm
147+
148+
You may have to login to npm before, with `npm adduser`. The plugin will be built in production mode before getting published on npm.
149+
150+
```
151+
npm publish
152+
```
153+
154+
## Manual build
155+
156+
This will build the plugin into the `dist` folder in production mode.
157+
158+
```
159+
npm run build
160+
```
161+
162+
---
163+
164+
## License
165+
166+
[MIT](http://opensource.org/licenses/MIT)

‎config/webpack.config.base.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
var webpack = require('webpack')
2+
var ExtractTextPlugin = require('extract-text-webpack-plugin')
3+
4+
var outputFile = 'vue-double-list'
5+
var globalName = 'DoubleList'
6+
7+
var config = require('../package.json')
8+
9+
module.exports = {
10+
entry: './src/index.js',
11+
module: {
12+
rules: [
13+
{
14+
enforce: 'pre',
15+
test: /\.(js|vue)$/,
16+
loader: 'eslint-loader',
17+
exclude: /node_modules/,
18+
},
19+
{
20+
test: /.js$/,
21+
loader: 'babel-loader',
22+
},
23+
{
24+
test: /\.vue$/,
25+
loader: 'vue-loader',
26+
options: {
27+
loaders: {
28+
css: ExtractTextPlugin.extract('css-loader'),
29+
},
30+
},
31+
},
32+
],
33+
},
34+
plugins: [
35+
new webpack.DefinePlugin({
36+
'VERSION': JSON.stringify(config.version),
37+
}),
38+
new ExtractTextPlugin(outputFile + '.css'),
39+
],
40+
}

‎config/webpack.config.browser.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var webpack = require('webpack')
2+
var merge = require('webpack-merge')
3+
var path = require('path')
4+
var base = require('./webpack.config.base')
5+
6+
var outputFile = 'vue-double-list'
7+
var globalName = 'DoubleList'
8+
9+
module.exports = merge(base, {
10+
output: {
11+
path: path.join(__dirname, '../dist'),
12+
filename: outputFile + '.js',
13+
library: globalName,
14+
libraryTarget: 'umd',
15+
},
16+
externals: {
17+
// Put external libraries like lodash here
18+
// With their global name
19+
// Example: 'lodash': '_'
20+
},
21+
plugins: [
22+
new webpack.optimize.UglifyJsPlugin({
23+
compress: {
24+
warnings: true,
25+
},
26+
mangle: false,
27+
}),
28+
],
29+
})

‎config/webpack.config.common.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
var webpack = require('webpack')
2+
var merge = require('webpack-merge')
3+
var path = require('path')
4+
var base = require('./webpack.config.base')
5+
6+
var outputFile = 'vue-double-list'
7+
var globalName = 'DoubleList'
8+
9+
module.exports = merge(base, {
10+
output: {
11+
path: path.join(__dirname, '../dist'),
12+
filename: outputFile + '.common.js',
13+
libraryTarget: 'commonjs2',
14+
},
15+
target: 'node',
16+
externals: {
17+
// Put external libraries like lodash here
18+
// With their package name
19+
// Example: 'lodash': 'lodash'
20+
},
21+
plugins: [
22+
new webpack.optimize.UglifyJsPlugin({
23+
compress: {
24+
warnings: true,
25+
},
26+
mangle: false,
27+
}),
28+
],
29+
})

‎config/webpack.config.dev.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
var path = require('path')
2+
var merge = require('webpack-merge')
3+
var base = require('./webpack.config.base')
4+
5+
var outputFile = 'vue-double-list'
6+
var globalName = 'DoubleList'
7+
8+
module.exports = merge(base, {
9+
output: {
10+
path: path.join(__dirname, '../dist'),
11+
filename: outputFile + '.common.js',
12+
library: globalName,
13+
libraryTarget: 'umd',
14+
},
15+
devtool: 'eval-source-map',
16+
})

‎examples/basic.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="https://unpkg.com/vue"></script>
6+
<script src="../dist/vue-double-list.js"></script>
7+
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
9+
<link href="../dist/vue-double-list.css" rel="stylesheet">
10+
<style>
11+
.double-list .list {
12+
height: 200px;
13+
}
14+
</style>
15+
16+
</head>
17+
<body>
18+
<div id="vue">
19+
<double-list label="movies" :items="listItems" v-model="selectedItems"></double-list>
20+
</div>
21+
<script>
22+
new Vue({
23+
el: '#vue',
24+
methods: {
25+
onInput: function() {
26+
console.log('Selection changed', this.selectedItems);
27+
}
28+
},
29+
data: {
30+
listItems: ['Back to the Future', 'The Future', 'Metropolis'],
31+
selectedItems: []
32+
}
33+
})
34+
</script>
35+
36+
</body>
37+
</html>
38+

‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default from './dist/vue-double-list.common'
2+
export * from './dist/vue-double-list.common'
3+
import './dist/vue-double-list.css'

0 commit comments

Comments
 (0)