Skip to content

Commit 138032f

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Fix for issue #121: allow Vue component to be element prop
1 parent d728721 commit 138032f

File tree

8 files changed

+131
-7
lines changed

8 files changed

+131
-7
lines changed

‎dist/vuedraggable.js

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,15 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
2929
}
3030

3131
function _computeIndexes(slots, children) {
32-
return !slots ? [] : Array.prototype.map.call(children, function (elt) {
33-
return computeVmIndex(slots, elt);
32+
if (!slots) {
33+
return [];
34+
}
35+
36+
var elmFromNodes = slots.map(function (elt) {
37+
return elt.elm;
38+
});
39+
return [].concat(_toConsumableArray(children)).map(function (elt) {
40+
return elmFromNodes.indexOf(elt);
3441
});
3542
}
3643

@@ -93,7 +100,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
93100

94101
data: function data() {
95102
return {
96-
transitionMode: false
103+
transitionMode: false,
104+
componentMode: false
97105
};
98106
},
99107
render: function render(h) {
@@ -108,6 +116,10 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
108116
mounted: function mounted() {
109117
var _this3 = this;
110118

119+
this.componentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
120+
if (this.componentMode && this.transitionMode) {
121+
throw new Error('Transition-group inside component is not suppported. Please alter element value or remove transition-group. Current element value: ' + this.element);
122+
}
111123
var optionsAdded = {};
112124
eventsListened.forEach(function (elt) {
113125
optionsAdded['on' + elt] = delegateAndEmit.call(_this3, elt);
@@ -133,7 +145,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
133145
return this.transitionMode ? this.$el.children[0] : this.$el;
134146
},
135147
isCloning: function isCloning() {
136-
return !!this.options && !!this.options.group !== null && this.options.group.pull === 'clone';
148+
return !!this.options && !!this.options.group && this.options.group.pull === 'clone';
137149
},
138150
realList: function realList() {
139151
return !!this.list ? this.list : this.value;
@@ -155,6 +167,9 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
155167

156168
methods: {
157169
getChildrenNodes: function getChildrenNodes() {
170+
if (this.componentMode) {
171+
return this.$children[0].$slots.default;
172+
}
158173
var rawNodes = this.$slots.default;
159174
return this.transitionMode ? rawNodes[0].child.$slots.default : rawNodes;
160175
},

‎dist/vuedraggable.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/Component.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html class="no-js" lang="">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<title>Basic example</title>
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<link rel="stylesheet" href="material/vue-material.css">
12+
<link rel="stylesheet" href="css/component.css">
13+
</head>
14+
15+
<body>
16+
17+
<div id="main">
18+
<div id="app">
19+
<md-toolbar>
20+
<h1 class="md-title">My Title</h1>
21+
</md-toolbar>
22+
23+
<md-layout :md-gutter="16">
24+
<md-layout>
25+
<draggable v-model="listA" element="md-list" :options="sortOptions">
26+
<md-list-item v-for="(element, index) in listA" :key="index">
27+
<span>{{ element.name }}</span>
28+
29+
<md-divider v-if="index !== listA.length - 1"></md-divider>
30+
</md-list-item>
31+
</draggable>
32+
</md-layout>
33+
34+
<md-layout>
35+
<draggable v-model="listB" element="md-list" :options="sortOptions">
36+
<md-list-item v-for="(element, index) in listB" :key="index">
37+
<span>{{ element.name }}</span>
38+
39+
<md-divider v-if="index !== listB.length - 1"></md-divider>
40+
</md-list-item>
41+
</draggable>
42+
</md-layout>
43+
</md-layout>
44+
</div>
45+
46+
</div>
47+
48+
<script type="text/javascript" src="libs\vue\dist\vue.js"></script>
49+
<script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
50+
<script type="text/javascript" src="src\vuedraggable.js"></script>
51+
<script type="text/javascript" src="material\vue-material.js"></script>
52+
<script type="text/javascript" src="script\component.js"></script>
53+
</body>
54+
55+
</html>

‎examples/css/component.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.md-list {
2+
width: 100%;
3+
}

‎examples/material/vue-material.css

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/material/vue-material.js

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/script/component.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Vue.use(VueMaterial)
2+
3+
var App = new Vue({
4+
el: '#app',
5+
data() {
6+
return {
7+
sortOptions: {
8+
group: 'sample',
9+
animation: 150,
10+
},
11+
listA: [
12+
{ id: 1, name: 'some'},
13+
{ id: 2, name: 'more'},
14+
{ id: 2, name: 'samples'},
15+
],
16+
listB: [
17+
{ id: 3, name: 'other'},
18+
{ id: 4, name: 'examples'},
19+
],
20+
};
21+
}
22+
})

‎src/vuedraggable.js

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@
1919
}
2020

2121
function computeIndexes(slots, children) {
22-
return (!slots) ? [] : Array.prototype.map.call(children, elt => computeVmIndex(slots, elt))
22+
if (!slots) {
23+
return []
24+
}
25+
26+
const elmFromNodes = slots.map(elt => elt.elm);
27+
return [...children].map(elt => elmFromNodes.indexOf(elt))
2328
}
2429

2530
function emit(evtName, evtData) {
@@ -71,7 +76,8 @@
7176

7277
data() {
7378
return {
74-
transitionMode: false
79+
transitionMode: false,
80+
componentMode: false
7581
}
7682
},
7783

@@ -86,6 +92,10 @@
8692
},
8793

8894
mounted() {
95+
this.componentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase()
96+
if (this.componentMode && this.transitionMode) {
97+
throw new Error(`Transition-group inside component is not suppported. Please alter element value or remove transition-group. Current element value: ${this.element}`);
98+
}
8999
var optionsAdded = {};
90100
eventsListened.forEach(elt => {
91101
optionsAdded['on' + elt] = delegateAndEmit.call(this, elt)
@@ -134,6 +144,9 @@
134144

135145
methods: {
136146
getChildrenNodes() {
147+
if (this.componentMode) {
148+
return this.$children[0].$slots.default
149+
}
137150
const rawNodes = this.$slots.default
138151
return this.transitionMode ? rawNodes[0].child.$slots.default : rawNodes
139152
},

0 commit comments

Comments
 (0)