Skip to content

Commit 7945a38

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Issue #14 : first commit, transformation to support Vue2 WIP
1 parent 22c637d commit 7945a38

11 files changed

+194
-188
lines changed

‎bower.json

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@
2424
"gulpfile.js"
2525
],
2626
"dependencies": {
27-
"vue": "^1.0.25",
28-
"lodash": "^4.13.1",
27+
"vue": "^2.0.1",
2928
"Sortable": "^1.4.2"
3029
}
3130
}

‎dist/vuedragablefor.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/Two_Lists.html

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,17 @@
1515
<h1>Vue Dragable For</h1>
1616

1717
<div class="drag">
18-
<h2>List 1 v-dragable-for</h2>
19-
<div class="dragArea" >
20-
<div v-dragable-for="element in list1" options='{"group":"people"}' >
21-
{{element.name}} {{$index}}
18+
<h2>List 1 draggable</h2>
19+
<draggable class="dragArea" :list="list1" :options="{group:'people'}">
20+
<div v-for="(element, index) in list1" >
21+
{{element.name}} {{index}}
2222
</div>
23-
</div>
23+
</draggable>
2424

25-
<h2>List 2 v-dragable-for</h2>
26-
<div class="dragArea">
27-
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
28-
</div>
25+
<h2>List 2 draggable</h2>
26+
<draggable class="dragArea" :list="list2" :options="{group:'people'}" >
27+
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
28+
</draggable>
2929
</div>
3030

3131
<div class="normal">
@@ -43,13 +43,11 @@ <h2>List 2 v-for</h2>
4343
<a href="index.html">See basic example</a>
4444
<a href="Two_Lists_Clone.html">See clone element example</a>
4545
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
46-
47-
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
46+
</div>
47+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4848
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
4949
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
5050
<script type="text/javascript" src="src\vuedragablefor.js"></script>
5151
<script type="text/javascript" src="script\complex.js"></script>
52-
53-
</div>
5452
</body>
5553
</html>

‎examples/Two_Lists_Clone.html

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,40 +16,41 @@ <h1>Vue Dragable For</h1>
1616

1717
<div class="drag">
1818
<h2>List 1 v-dragable-for</h2>
19-
<div id="list1" class="dragArea" >
20-
<div v-dragable-for="element in list1" options='{"group":{ "name":"people", "pull":"clone", "put":false }}' track-by="$index">
21-
{{element.name}} {{$index}}
19+
<draggable id="list1" :list="list1" class="dragArea" :options="{group:{name:'people', pull:'clone', put:false }}">
20+
<div v-for="(element, index) in list1" :key="index">
21+
{{element.name}} {{index}}
2222
</div>
23-
</div>
23+
</draggable>
2424

2525
<h2>List 2 v-dragable-for</h2>
26-
<div id="list2" class="dragArea">
27-
<div v-dragable-for="element in list2" options='{"group":"people"}' track-by="$index">{{element.name}}</div>
28-
</div>
26+
<draggable id="list2" :list="list2" class="dragArea" :options="{group:'people'}">
27+
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
28+
</draggable>
2929
</div>
3030

3131
<div class="normal">
3232
<h2>List 1 v-for</h2>
3333
<div>
34-
<div v-for="element in list1" track-by="$index">{{element.name}}</div>
34+
<div v-for="(element, index) in list1" :key="index">{{element.name}}</div>
3535
</div>
3636

3737
<h2>List 2 v-for</h2>
3838
<div>
39-
<div v-for="element in list2" track-by="$index">{{element.name}}</div>
39+
<div v-for="(element, index) in list2" :key="index">{{element.name}}</div>
4040
</div>
4141
</div>
4242

4343
<a href="index.html">See basic example</a>
4444
<a href="Two_Lists.html">See 2 lists example</a>
4545
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
4646

47-
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
48-
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
49-
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
50-
<script type="text/javascript" src="src\vuedragablefor.js"></script>
51-
<script type="text/javascript" src="script\complex.js"></script>
47+
48+
</div>
49+
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
50+
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
51+
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
52+
<script type="text/javascript" src="src\vuedragablefor.js"></script>
53+
<script type="text/javascript" src="script\complex.js"></script>
5254

53-
</div>
5455
</body>
5556
</html>

‎examples/Two_Lists_Clone_If.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,13 @@ <h2>List 2 v-for</h2>
4444
<a href="Two_Lists.html">See 2 lists example</a>
4545
<a href="Two_Lists.html">See 2 lists example</a>
4646

47+
48+
49+
</div>
4750
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4851
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
4952
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
5053
<script type="text/javascript" src="src\vuedragablefor.js"></script>
5154
<script type="text/javascript" src="script\complex.js"></script>
52-
53-
</div>
5455
</body>
5556
</html>

‎examples/Two_Lists_If.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,13 @@ <h2>List 2 v-for</h2>
4444
<a href="Two_Lists.html">See 2 lists example</a>
4545
<a href="Two_Lists.html">See 2 lists example</a>
4646

47+
48+
</div>
4749
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4850
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
4951
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
5052
<script type="text/javascript" src="src\vuedragablefor.js"></script>
5153
<script type="text/javascript" src="script\complex.js"></script>
5254

53-
</div>
5455
</body>
5556
</html>

‎examples/Two_Lists_NoClone_If.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,14 @@ <h2>List 2 v-for</h2>
4444
<a href="Two_Lists.html">See 2 lists example</a>
4545
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
4646

47+
48+
</div>
49+
4750
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
4851
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
4952
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
5053
<script type="text/javascript" src="src\vuedragablefor.js"></script>
5154
<script type="text/javascript" src="script\complex.js"></script>
5255

53-
</div>
5456
</body>
5557
</html>

‎examples/index.html

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@
1212
<body>
1313

1414
<div id="main">
15-
<h1>Vue Dragable For</h1>
16-
17-
<div class="drag">
18-
<h2>Dragable v-dragable-for</h2>
19-
<div class="dragArea">
20-
<div v-dragable-for="element in list">{{element.name}} {{$index}}</div>
21-
</div>
15+
<h1>Vue Draggable</h1>
16+
17+
<div>
18+
<h2>Draggable</h2>
19+
<draggable class="drag" :list="list">
20+
<div v-for="element in list">{{element.name}}</div>
21+
</draggable>
2222
</div>
2323

24-
<div class="normal">
24+
<div>
2525
<h2>Normal v-for</h2>
26-
<div class="dragArea">
26+
<div class="normal">
2727
<div v-for="element in list">{{element.name}}</div>
2828
</div>
2929
</div>
@@ -37,12 +37,11 @@ <h2>Normal v-for</h2>
3737
<a href="Two_Lists_Clone.html">See clone element example</a>
3838
<a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
3939

40+
</div>
41+
4042
<script type="text/javascript" src="..\libs\vue\dist\vue.js"></script>
41-
<script type="text/javascript" src="..\libs\lodash\lodash.js"></script>
4243
<script type="text/javascript" src="..\libs\Sortable\Sortable.js"></script>
4344
<script type="text/javascript" src="src\vuedragablefor.js"></script>
4445
<script type="text/javascript" src="script\main.js"></script>
45-
46-
</div>
4746
</body>
4847
</html>

‎gulpfile.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ var gulp = require('gulp');
55

66
// load plugins
77
var $ = require('gulp-load-plugins')();
8-
8+
const babel = require('gulp-babel');
99

1010
gulp.task('scripts', function () {
1111
return gulp.src('src/**/*.js')
12+
.pipe(babel({
13+
presets: ['es2015']
14+
}))
1215
.pipe($.jshint())
1316
.pipe($.jshint.reporter(require('jshint-stylish')))
1417
.pipe($.size());
@@ -21,6 +24,9 @@ gulp.task('js', ['scripts'], function () {
2124
var jsFilter = $.filter('**/*.js', {restore: true});
2225

2326
return gulp.src('src/**/*.js')
27+
.pipe(babel({
28+
presets: ['es2015']
29+
}))
2430
.pipe($.uglify())
2531
.pipe(rename({
2632
suffix: '.min'
@@ -33,7 +39,10 @@ gulp.task('clean', function () {
3339
return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
3440
});
3541

36-
gulp.task('build', ['js', 'copy-js', 'main-bower-files']);
42+
gulp.task('build', ['js', 'copy-js', 'main-bower-files'],function(){
43+
return gulp.src('./bower_components/vue/dist/vue.js')
44+
.pipe(gulp.dest('./examples/libs/vue/dist'));
45+
});
3746

3847
gulp.task('default', ['clean'], function () {
3948
gulp.start('build');
@@ -69,7 +78,10 @@ gulp.task('main-bower-files', function() {
6978
});
7079

7180
gulp.task('copy-js', function() {
72-
return gulp.src('src/**/*.js')
81+
return gulp.src('src/**/*.js')
82+
.pipe(babel({
83+
presets: ['es2015']
84+
}))
7385
.pipe(gulp.dest('./examples/src'));
7486
});
7587

‎package.json

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"name": "vuedragablefor",
3-
"version": "1.0.9",
4-
"description": "vue dragable for directive",
3+
"version": "2.0.0",
4+
"description": "draggable component for vue",
55
"main": "src/vuedragablefor.js",
66
"files": [
7-
"src/vuedragablefor.js"
7+
"src/index.js"
88
],
99
"keywords": [
1010
"vue",
@@ -17,14 +17,15 @@
1717
"test": "test"
1818
},
1919
"dependencies": {
20-
"lodash": "^4.13.1",
2120
"sortablejs": "^1.4.2"
2221
},
2322
"devDependencies": {
23+
"babel-preset-es2015": "^6.16.0",
2424
"bower": "^1.7.9",
25-
"gulp": "^3.9.1",
2625
"connect": "^3.4.1",
2726
"connect-livereload": "^0.5.4",
27+
"gulp": "^3.9.1",
28+
"gulp-babel": "^6.1.2",
2829
"gulp-clean": "^0.3.2",
2930
"gulp-filter": "^4.0.0",
3031
"gulp-flatten": "^0.3.0",
@@ -53,8 +54,8 @@
5354
},
5455
"license": "MIT",
5556
"homepage": "https://github.com/David-Desmaisons/Vue.Dragable.For#readme",
56-
"repository":{
57-
"type" : "git",
58-
"url" : "https://github.com/David-Desmaisons/Vue.Dragable.For.git"
57+
"repository": {
58+
"type": "git",
59+
"url": "https://github.com/David-Desmaisons/Vue.Dragable.For.git"
5960
}
6061
}

0 commit comments

Comments
 (0)