Skip to content

Commit fe73e01

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Support functional component as draggable element
1 parent 3ea7d72 commit fe73e01

File tree

7 files changed

+17110
-21
lines changed

7 files changed

+17110
-21
lines changed

‎dist/vuedraggable.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
110110
data: function data() {
111111
return {
112112
transitionMode: false,
113-
componentMode: false
113+
noneFunctionalComponentMode: false,
114+
init: false
114115
};
115116
},
116117
render: function render(h) {
@@ -132,8 +133,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
132133
mounted: function mounted() {
133134
var _this3 = this;
134135

135-
this.componentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
136-
if (this.componentMode && this.transitionMode) {
136+
this.noneFunctionalComponentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
137+
if (this.noneFunctionalComponentMode && this.transitionMode) {
137138
throw new Error('Transition-group inside component is not supported. Please alter element value or remove transition-group. Current element value: ' + this.element);
138139
}
139140
var optionsAdded = {};
@@ -189,7 +190,12 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
189190

190191
methods: {
191192
getChildrenNodes: function getChildrenNodes() {
192-
if (this.componentMode) {
193+
if (!this.init) {
194+
this.noneFunctionalComponentMode = this.noneFunctionalComponentMode && this.$children.length == 1;
195+
this.init = true;
196+
}
197+
198+
if (this.noneFunctionalComponentMode) {
193199
return this.$children[0].$slots.default;
194200
}
195201
var rawNodes = this.$slots.default;
@@ -359,7 +365,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
359365
return draggableComponent;
360366
}
361367

362-
if (typeof exports == "object") {
368+
if (typeof exports == "object") {
363369
var Sortable = require("sortablejs");
364370
module.exports = buildDraggable(Sortable);
365371
} else if (typeof define == "function" && define.amd) {
@@ -376,6 +382,6 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
376382

377383
if(typeof window.Sortable == "undefined") {
378384
throw 'Sortable.js not found!';
379-
}
385+
}
380386
}
381-
})();
387+
})();

‎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/Component2.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
10+
<link href="vuetify/vuetify.css" rel="stylesheet">
11+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
12+
13+
</head>
14+
15+
<body>
16+
<div id="app">
17+
<v-app>
18+
<main>
19+
<v-container>
20+
Hello world
21+
22+
<draggable element="v-layout" :list="listA" :options="sortOptions">
23+
<v-flex v-for="(element, index) in listA" :key="element.name">
24+
<span>{{ element.name }}</span>
25+
</v-flex>
26+
</draggable>
27+
28+
</v-container>
29+
</main>
30+
</v-app>
31+
</div>
32+
33+
<script type="text/javascript" src="libs\vue\dist\vue.2.5.13.js"></script>
34+
<script type="text/javascript" src="vuetify\vuetify.js"></script>
35+
<script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
36+
<script type="text/javascript" src="src\vuedraggable.js"></script>
37+
<script type="text/javascript" src="script\component2.js"></script>
38+
</body>
39+
40+
</html>

‎examples/script/component2.js

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

‎examples/vuetify/vuetify.css

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

0 commit comments

Comments
 (0)