Skip to content

Commit 9610d5f

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Refactoring attribute passing + adding element example
1 parent e25e1c9 commit 9610d5f

File tree

10 files changed

+97
-9
lines changed

10 files changed

+97
-9
lines changed

‎dist/vuedraggable.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
1515
};
1616
}
1717

18+
function buildAttribute(object, propName, value) {
19+
if (value == undefined) {
20+
return object;
21+
}
22+
object = object == null ? {} : object;
23+
object[propName] = value;
24+
return object;
25+
}
26+
1827
function buildDraggable(Sortable) {
1928
function removeNode(node) {
2029
node.parentElement.removeChild(node);
@@ -102,11 +111,6 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
102111
move: {
103112
type: Function,
104113
default: null
105-
},
106-
componentProps: {
107-
type: Object,
108-
required: false,
109-
default: null
110114
}
111115
};
112116

@@ -136,7 +140,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
136140
if (footer) {
137141
children = slots ? [].concat(_toConsumableArray(slots), _toConsumableArray(footer)) : [].concat(_toConsumableArray(footer));
138142
}
139-
var attributes = this.componentProps ? { attrs: this.componentProps } : null;
143+
var attributes = null;
144+
attributes = buildAttribute(attributes, 'attrs', this.$attrs);
140145
return h(this.element, attributes, children);
141146
},
142147
mounted: function mounted() {

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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="element/element.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+
17+
<div id="app">
18+
<draggable element="el-collapse" :list="list" :options="sortOptions" :component-data="componentData">
19+
<el-collapse-item v-for="(item) in list" :title="item.title" :name="item.name" :key="item.name">
20+
<div>{{item.description}}</div>
21+
</el-collapse-item>
22+
</draggable>
23+
24+
</div>
25+
26+
<script type="text/javascript" src="vue\vue.js"></script>
27+
<script type="text/javascript" src="element\element.js"></script>
28+
<script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
29+
<script type="text/javascript" src="src\vuedraggable.js"></script>
30+
<script type="text/javascript" src="script\component3.js"></script>
31+
</body>
32+
33+
</html>

‎examples/element/element.css

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

‎examples/element/element.js

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

‎examples/element/fonts/element-icons.ttf

10.8 KB
Binary file not shown.

‎examples/element/fonts/element-icons.woff

6.02 KB
Binary file not shown.

‎examples/script/component3.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
Vue.config.devtools = true
2+
3+
4+
var App = new Vue({
5+
el: '#app',
6+
methods: {
7+
handleChange() {
8+
console.log('times are changing');
9+
}
10+
},
11+
data() {
12+
return {
13+
visible: false,
14+
activeNames: ['1'],
15+
sortOptions: {
16+
group: 'sample',
17+
animation: 150,
18+
},
19+
componentData:{
20+
on:{
21+
change: this.handleChange,
22+
input(value){
23+
this.activeNames = value;
24+
}
25+
},
26+
props:{
27+
value: this.activeNames
28+
}
29+
},
30+
list: [
31+
{ title: "Consistency", name: '1', description: "Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to" },
32+
{ title: "Feedback", name: '2', description: "Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects" },
33+
{ title: "Efficiency", name: '3', description: "Simplify the process: keep operating process simple and intuitive" },
34+
{ title: "Controllability", name: '4', description: "Decision making: giving advices about operations is acceptable, but do not make decisions for the users" },
35+
]
36+
};
37+
}
38+
})

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuedraggable",
3-
"version": "2.15.0",
3+
"version": "2.16.0",
44
"description": "draggable component for vue",
55
"main": "dist/vuedraggable.js",
66
"files": [

‎src/vuedraggable.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@
77
}
88
}
99

10+
function buildAttribute(object, propName, value) {
11+
if (value == undefined) {
12+
return object;
13+
}
14+
object = (object == null) ? {} : object;
15+
object[propName] = value;
16+
return object;
17+
}
18+
1019
function buildDraggable(Sortable) {
1120
function removeNode(node) {
1221
node.parentElement.removeChild(node)
@@ -105,7 +114,8 @@
105114
if (footer) {
106115
children = slots ? [...slots, ...footer] : [...footer]
107116
}
108-
const attributes = this.$attrs ? {attrs: this.$attrs } : null;
117+
var attributes = null;
118+
attributes = buildAttribute(attributes, 'attrs', this.$attrs);
109119
return h(this.element, attributes, children);
110120
},
111121

0 commit comments

Comments
 (0)