Skip to content

Commit 4fcd8ee

Browse files
holiberholiber
authored
Merge pull request #30 from holiber/ie11support
Add babel and IE11 support
2 parents ae38d86 + b408352 commit 4fcd8ee

12 files changed

+7900
-21
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/preset-env"]
3+
}

‎README.md

+10-7
Original file line numberDiff line numberDiff line change
@@ -152,10 +152,16 @@ interface ICursorPosition<TDataType> {
152152
| draginfo | SlVueTree | Slot that follows the mouse cursor while dragging. By default shows the dragging nodes count. |
153153
| empty-node | ISlTreeNode | Slot for (optional) message when folder is open, but empty |
154154

155+
# IE 11 support
155156

156-
## Example:
157+
You must add a [babel-polifyl](https://babeljs.io/docs/en/babel-polyfill) for correct work in IE11
158+
[See IE11 example]([demo](https://holiber.github.io/sl-vue-tree/demo/ie11test.html))
157159

158-
add a folder or item icon via `title` slot
160+
161+
# Examples
162+
163+
164+
## Add a folder or item icon via `title` slot
159165
````html
160166
<sl-vue-tree v-model="nodes">
161167
<template slot="title" slot-scope="{ node }">
@@ -172,18 +178,15 @@ add a folder or item icon via `title` slot
172178

173179
````
174180

175-
## Example:
176-
select all nodes
181+
## Select all nodes
177182

178183
```javascript
179184
slVueTree.traverse((node, nodeModel, path) => {
180185
Vue.set(nodeModel, 'isSelected', true);
181186
})
182187
```
183188

184-
## Example:
185-
186-
handle keydow and keyup events via `getNextNode` and `getPrevNode` methods
189+
## Handle keydow and keyup events via `getNextNode` and `getPrevNode` methods
187190

188191
[demo](https://holiber.github.io/sl-vue-tree/demo/keyboardcontrol)
189192

‎demo/dark-theme.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -234,4 +234,4 @@ <h2> Sl-vue-tree - custom dark theme and events handlers</h2>
234234
</style>
235235

236236
</body>
237-
</html>
237+
</html>

‎demo/externaldrag.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -175,4 +175,4 @@ <h2> Sl-vue-tree - drag external elements</h2>
175175
</style>
176176

177177
</body>
178-
</html>
178+
</html>

‎demo/ie11test.html

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>sl-vue-tree</title>
6+
<link rel="stylesheet" href="../dist/sl-vue-tree-dark.css">
7+
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
8+
<script src="./polyfill.js"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
10+
<script src="../dist/sl-vue-tree.js"></script>
11+
</head>
12+
<body>
13+
14+
<div id="app"
15+
>
16+
17+
<h2> Sl-vue-tree - IE11-friendly code</h2>
18+
19+
20+
<div class="row">
21+
<div class="tree-container">
22+
<sl-vue-tree
23+
v-model="nodes"
24+
ref="slVueTree"
25+
>
26+
</sl-vue-tree>
27+
</div>
28+
29+
30+
<div class="json-preview">
31+
<pre>{{ JSON.stringify(nodes, null, 4)}}</pre>
32+
</div>
33+
34+
</div>
35+
36+
37+
</div>
38+
39+
<script>
40+
41+
var nodes = [
42+
{title: 'Item1', isLeaf: true},
43+
{title: 'Item2', isLeaf: true},
44+
{
45+
title: 'Folder1', isExpanded: false, children: [
46+
{title: 'Item3', isLeaf: true},
47+
{title: 'Item4', isLeaf: true},
48+
{
49+
title: 'Folder2', children: [
50+
{title: 'Item5', isLeaf: true}
51+
]
52+
}
53+
]
54+
},
55+
{title: 'Item6', isLeaf: true}
56+
];
57+
58+
new Vue({
59+
el: '#app',
60+
components: { SlVueTree: SlVueTree },
61+
data: function () {
62+
return {
63+
nodes: nodes
64+
}
65+
},
66+
67+
68+
})
69+
</script>
70+
71+
<style>
72+
73+
body {
74+
background: #050d12;
75+
font-family: Arial;
76+
color: rgba(255, 255, 255, 0.5);
77+
}
78+
79+
a {
80+
color: #bbb;
81+
}
82+
83+
.row {
84+
display: flex;
85+
margin-bottom: 10px;
86+
}
87+
88+
.tree-container {
89+
flex-grow: 1;
90+
}
91+
92+
.sl-vue-tree.sl-vue-tree-root {
93+
flex-grow: 1;
94+
overflow-x: hidden;
95+
overflow-y: auto;
96+
height: 300px;
97+
}
98+
99+
100+
.json-preview {
101+
flex-grow: 1;
102+
margin-left: 10px;
103+
background-color: #13242d;
104+
border: 1px solid black;
105+
padding: 10px;
106+
}
107+
108+
.item-icon {
109+
display: inline-block;
110+
text-align: left;
111+
width: 20px;
112+
}
113+
114+
115+
</style>
116+
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)