Skip to content

Commit

Permalink
update demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@kcsujeet
kcsujeet committed Feb 10, 2024
1 parent dbf083b commit b240810
Show file tree
Hide file tree
Showing 10 changed files with 779 additions and 105 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,10 @@ slVueTree.traverse((node, nodeModel, path) => {
[see CONTRIBUTING.md](CONTRIBUTING.md)

# Changelog
v0.0.8
- update demos
-

v0.0.7
- add support for generics

Expand Down
17 changes: 9 additions & 8 deletions demo/dark-theme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@
<title>sl-vue-tree-next</title>
<link rel="stylesheet" href="../dist/sl-vue-tree-next-dark.css" />
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="../dist/sl-vue-tree-next.js"></script>
<script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
</head>
<body>
<div id="app" @click="contextMenuIsVisible = false">
<h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
<h2>Sl-vue-tree-next - custom dark theme and events handlers</h2>

<a href="./dark-theme.html" target="_blank">Source code</a>
<br /><br />
Expand Down Expand Up @@ -56,6 +55,7 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
</div>

<div class="json-preview">
<h2>JSON Preview</h2>
<pre>{{ JSON.stringify(nodes, null, 4)}}</pre>
</div>

Expand All @@ -65,7 +65,9 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
</div>
</div>

<script>
<script type="module">
import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'

var nodes = [
{ title: 'Item1', isLeaf: true },
{ title: 'Item2', isLeaf: true, data: { visible: false } },
Expand Down Expand Up @@ -99,9 +101,8 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
},
]

new Vue({
el: '#app',
components: { SlVueTree },
Vue.createApp({
components: { SlVueTreeNext },
data: function () {
return {
nodes: nodes,
Expand Down Expand Up @@ -153,7 +154,7 @@ <h2>sl-vue-tree-next - custom dark theme and events handlers</h2>
$slVueTree.remove(paths)
},
},
})
}).mount('#app')
</script>

<style>
Expand Down
14 changes: 7 additions & 7 deletions demo/externaldrag.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<title>sl-vue-tree-next</title>
<link rel="stylesheet" href="../dist/sl-vue-tree-next-dark.css" />
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="../dist/sl-vue-tree-next.js"></script>
<script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
Expand Down Expand Up @@ -54,7 +53,9 @@ <h2>sl-vue-tree-next - drag external elements</h2>
</div>
</div>

<script>
<script type="module">
import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'

var nodes = [
{ title: 'Item1', isLeaf: true },
{ title: 'Item2', isLeaf: true },
Expand All @@ -73,9 +74,8 @@ <h2>sl-vue-tree-next - drag external elements</h2>
{ title: 'Item6', isLeaf: true },
]

new Vue({
el: '#app',
components: { SlVueTree },
Vue.createApp({
components: { SlVueTreeNext },
data: function () {
return {
nodes: nodes,
Expand All @@ -93,7 +93,7 @@ <h2>sl-vue-tree-next - drag external elements</h2>
console.log('external drop', cursorPosition)
},
},
})
}).mount('#app')
</script>

<style>
Expand Down
152 changes: 143 additions & 9 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,148 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sl-vue-tree-next</title>
</head>
<body>
<head>
<meta charset="UTF-8" />
<title>sl-vue-tree-next</title>
</head>
<body>
<div class="tabs">
<!-- tab 1 -->
<input class="radiotab" name="tabs" tabindex="1" type="radio" id="tabone" checked="checked" />
<label class="label" for="tabone">Minimal Theme</label>
<div class="panel" tabindex="1">
<iframe src="minimal-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
</div>

<iframe src="dark-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
<iframe src="minimal-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
<!-- tab 2 -->
<input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabtwo" />
<label class="label" for="tabtwo">Dark Theme</label>
<div class="panel" tabindex="1">
<iframe src="dark-theme.html" frameborder="0" width="100%" height="1400px"></iframe>
</div>

<!-- tab 3 -->
<input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabthree" />
<label class="label" for="tabthree">External Drag</label>
<div class="panel" tabindex="1">
<iframe src="externaldrag.html" frameborder="0" width="100%" height="1400px"></iframe>
</div>

</body>
<!-- tab 4 -->
<input class="radiotab" tabindex="1" name="tabs" type="radio" id="tabfour" />
<label class="label" for="tabfour">Keyboard Control</label>
<div class="panel" tabindex="1">
<iframe src="keyboardcontrol.html" frameborder="0" width="100%" height="1400px"></iframe>
</div>
</div>
</body>

<style>
* {
box-sizing: border-box;
}

*:focus,
input:focus + label {
outline: none;
box-shadow: inset 0 0 0 5px lightBlue;
}

body {
padding: 30px 20px;
background: #fff;
color: #333;
}

main {
max-width: 801px;
margin: auto;
}

h1 {
text-align: center;
margin-top: 0;
}

h2 {
margin: 0 0 12px;
font-size: 30px;
}

p {
margin: 0 0 20px;
font-size: 20px;
line-height: 1.5;
}

.tabs {
display: flex;
flex-wrap: wrap;
margin: 0 auto 20px;
border-radius: 10px 10px 0 0;
}

.radiotab {
position: absolute;
opacity: 0;
}

.label {
width: 100%;
padding: 22px 20px;
background: #e5e5e5;
cursor: pointer;
font-weight: bold;
font-size: 23px;
color: #7f7f7f;
transition:
background 0.3s,
color 0.3s;
border: none;
border-radius: 0;
text-align: center;
}

.label:hover {
background: #d8d8d8;
}

.label:active {
background: #ccc;
}

.radiotab:checked + .label {
background: #fff;
color: #000;
border-top: solid 2px #000;
border-left: solid 2px #000;
border-right: solid 2px #000;
border-bottom: none;
}

.panel {
display: none;
padding: 20px 30px 30px;
background: #fff;
width: 100%;
border-left: solid 2px #000;
border-bottom: solid 2px #000;
border-right: solid 2px #000;
}

.radiotab:checked + .label + .panel {
display: block;
}

@media (min-width: 600px) {
.panel {
order: 99;
}

.label {
width: 25%;
border-radius: 10px 10px 0 0;
border-bottom: solid 2px #000;
}
}
</style>
</html>
13 changes: 6 additions & 7 deletions demo/keyboardcontrol.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
<title>sl-vue-tree-next</title>
<link rel="stylesheet" href="../dist/sl-vue-tree-next-dark.css" />
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="../dist/sl-vue-tree-next.js"></script>
<script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
Expand Down Expand Up @@ -42,7 +41,8 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
</div>
</div>

<script>
<script type="module">
import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'
var nodes = [
{ title: 'Item1', isLeaf: true },
{ title: 'Item2', isLeaf: true },
Expand All @@ -61,9 +61,8 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
{ title: 'Item6', isLeaf: true },
]

new Vue({
el: '#app',
components: { SlVueTree },
Vue.createApp({
components: { SlVueTreeNext },
data: function () {
return {
nodes: nodes,
Expand Down Expand Up @@ -107,7 +106,7 @@ <h2>Sl-vue-tree-next - Press Up and Down to move selection, Space and Enter to e
}
},
},
})
}).mount('#app')
</script>

<style>
Expand Down
31 changes: 10 additions & 21 deletions demo/minimal-theme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>sl-vue-tree-next</title>
<title>sl-vue-tree</title>
<link rel="stylesheet" href="../dist/sl-vue-tree-next-minimal.css" />
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@3.4.18/dist/vue.global.js"></script>
<script src="https://www.unpkg.com/sl-vue-tree-next@0.0.8/dist/sl-vue-tree-next.umd.cjs" type="module"></script>
</head>
<body>
<div id="app">
Expand All @@ -16,7 +15,7 @@ <h2>Sl-vue-tree-next - minimal css</h2>

<div class="row">
<div class="tree-container">
<sl-vue-tree-next v-model="nodes" :show-branches="true" />
<sl-vue-tree-next v-model="nodes" :show-branches="true"></sl-vue-tree-next>
</div>

<div class="json-preview">
Expand All @@ -26,6 +25,8 @@ <h2>Sl-vue-tree-next - minimal css</h2>
</div>

<script type="module">
import { SlVueTreeNext } from '../public/sl-vue-tree-next.global.js'

var nodes = [
{ title: 'Item1', isLeaf: true },
{ title: 'Item2', isLeaf: true, data: { visible: false } },
Expand Down Expand Up @@ -59,31 +60,20 @@ <h2>Sl-vue-tree-next - minimal css</h2>
},
]

const { createApp } = Vue

const app = createApp({
components: {
SlVueTreeNext
},
setup() {
Vue.createApp({
components: { SlVueTreeNext },
data: function () {
return {
nodes,
nodes: nodes,
lastEvent: 'No last event',
}
},
})

app.mount('#app')
}).mount('#app')
</script>

<style>
body {
background: #050d12;
font-family: Arial;
color: rgba(255, 255, 255, 0.5);
}

a {
color: #bbb;
}

.row {
Expand All @@ -98,7 +88,6 @@ <h2>Sl-vue-tree-next - minimal css</h2>
.json-preview {
flex-grow: 1;
margin-left: 10px;
background-color: #13242d;
border: 1px solid black;
padding: 10px;
}
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"typescript": "^5.3.3",
"vite": "^5.0.12",
"vite-plugin-dts": "^3.7.2",
"vite-plugin-externals": "^0.6.2",
"vue": "^3.4.18"
}
}
Loading

0 comments on commit b240810

Please sign in to comment.