Skip to content

Commit c1c4335

Browse files
author
Anto Gibson
authored
Initial Sample Commit
1 parent 432521c commit c1c4335

File tree

9 files changed

+212
-0
lines changed

9 files changed

+212
-0
lines changed

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-lists": "^26.2.11",
13+
"@syncfusion/ej2-vue-navigations": "^26.2.11",
14+
"vue": "^3.4.37"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^5.1.2",
18+
"vite": "^5.4.1"
19+
}
20+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<script setup>
2+
import { AccordionComponent, ItemDirective as Item,
3+
ItemsDirective as Items, TreeViewComponent
4+
} from '@syncfusion/ej2-vue-navigations';
5+
6+
const treeViewData = [
7+
{
8+
id: '01',
9+
name: 'Local Disk (C:)',
10+
subChild: [
11+
{ id: '01-01', name: 'Program Files' },
12+
{ id: '01-02', name: 'Users' },
13+
{ id: '01-03', name: 'Windows' },
14+
]
15+
},
16+
{
17+
id: '02',
18+
name: 'Local Disk (D:)',
19+
subChild: [
20+
{ id: '02-01', name: 'Personals' },
21+
{ id: '02-02', name: 'Projects' },
22+
]
23+
},
24+
{
25+
id: '03',
26+
name: 'Local Disk (E:)',
27+
icon: 'folder',
28+
subChild: [
29+
{
30+
id: '03-01',
31+
name: 'Pictures',
32+
subChild: [
33+
{ id: '03-01-01', name: 'Wind.jpg' },
34+
{ id: '03-01-02', name: 'Stone.jpg' }
35+
]
36+
},
37+
{
38+
id: '03-02',
39+
name: 'Documents',
40+
subChild: [
41+
{ id: '03-02-01', name: 'Global Warming.ppt' },
42+
{ id: '03-02-02', name: 'Social Network.pdf' },
43+
]
44+
},
45+
{
46+
id: '03-03',
47+
name: 'Study Materials',
48+
subChild: [
49+
{ id: '03-03-01', name: 'UI-Guide.pdf' },
50+
{ id: '03-03-02', name: 'Tutorials.zip' },
51+
]
52+
},
53+
]
54+
}
55+
];
56+
</script>
57+
58+
<template>
59+
<div style="height:1080px; width: 500px; margin-top: 10%; margin-left: 30%;">
60+
<AccordionComponent expandMode="Single">
61+
<Items>
62+
<Item header="TreeView" :content="'treeview'"></Item>
63+
<template v-slot:treeview>
64+
<TreeViewComponent
65+
:fields="{ dataSource:treeViewData, id:'id', text:'name',
66+
child:'subChild'
67+
}"
68+
></TreeViewComponent>
69+
</template>
70+
<!-- <Item header="Andrew Fuller" :content="'andrew'"></Item>
71+
<template v-slot:andrew>
72+
<div class="container" id="andrew" style="display:none">
73+
<img src="https://ej2.syncfusion.com/angular/demos/assets/treegrid/images/AndrewFuller.png" alt="Andrew Fuller"/>
74+
<div class="content">
75+
<b>Andrew Fuller</b> Andrew Fuller was born on Friday, 13 March 1987. Now lives in New York City, enjoys hiking, and works as a software developer at a tech startup.
76+
</div>
77+
</div>
78+
</template>
79+
<Item header="Janet Leverling" :content="'janet'"></Item>
80+
<template v-slot:janet>
81+
<div class="container" id="janet" style="display:none">
82+
<img src="https://ej2.syncfusion.com/angular/demos/assets/treegrid/images/JanetLeverling.png" alt="Janet Leverling"/>
83+
<div class="content">
84+
<b>Janet Leverling</b> Janet Leverling was born on Sunday, 22 July 1992. Now lives in San Francisco, loves painting, and is currently working as a marketing manager for a major retail company.
85+
</div>
86+
</div>
87+
</template>
88+
<Item header="Laura Callahan" :content="'laura'"></Item>
89+
<template v-slot:laura>
90+
<div class="container" id="laura"style="display:none">
91+
<img src="https://ej2.syncfusion.com/angular/demos/assets/treegrid/images/LauraCallahan.png" alt="Laura Callahan"/>
92+
<div class="content">
93+
<b>Laura Callahan</b> Laura Callahan was born on Wednesday, 15 May 1985. Now lives in Chicago, enjoys playing the guitar, and works as a financial analyst for an investment firm.
94+
</div>
95+
</div>
96+
</template> -->
97+
</Items>
98+
</AccordionComponent>
99+
</div>
100+
</template>
101+
102+
<style>
103+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
104+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
105+
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
106+
107+
.container{
108+
display: inline-flex;
109+
width:auto;
110+
padding:0;
111+
}
112+
img {
113+
height:55px;
114+
width:55px;
115+
}
116+
.content{
117+
margin-left:10px;
118+
}
119+
</style>

‎src/assets/vue.svg

+1
Loading

‎src/components/HelloWorld.vue

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Learn more about IDE Support for Vue in the
30+
<a
31+
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
32+
target="_blank"
33+
>Vue Docs Scaling up Guide</a
34+
>.
35+
</p>
36+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
37+
</template>
38+
39+
<style scoped>
40+
.read-the-docs {
41+
color: #888;
42+
}
43+
</style>

‎src/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base';
5+
registerLicense('Your License Key');
6+
7+
createApp(App).mount('#app')

‎src/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)