Skip to content

Commit a311947

Browse files
yazzyazz
committed
Partially working upgrade from Vue 2 to Vue 3
1 parent 6edcfbe commit a311947

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1140
-1255
lines changed

‎public/go.html‎

Lines changed: 271 additions & 229 deletions
Large diffs are not rendered by default.

‎public/test.html‎

Lines changed: 46 additions & 237 deletions
Original file line numberDiff line numberDiff line change
@@ -4,255 +4,64 @@
44
<meta name="viewport" Content-Type="text/javascript; charset=utf-8" content="initial-scale=1.0, width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
55
<meta charset="UTF-8" />
66

7+
<script src="https://unpkg.com/@vue/[email protected]"></script>
78

8-
<link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/4.1.3/css/bootstrap.min.css"> </link>
9-
<link rel="stylesheet" href="/js_libs/tabulator.min.css"> </link>
10-
<script src="/js_libs/dropzone5.4.0.js"> </script>
11-
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js" integrity="sha384-WPFUvHkB1aHA5TDSZi6xtDgkF0wXJcIIxXhC6h8OT8EH3fC5PWro5pWJ1THjcfEi" crossorigin="anonymous"> </script>
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"> </script>
13-
<script src="https://cdn.jsdelivr.net/npm/alasql@4"> </script>
149

1510

16-
17-
18-
19-
20-
21-
<scriptold src="/js_libs/tabulator.js"> </scriptold>
2211
<body>
23-
24-
25-
Standard HTML and JS
26-
<div id="example-table" style="margin-bottom: 50px"></div>
27-
28-
29-
Inside VueJS 2
30-
<div id="example-table-parent" ></div>
31-
32-
33-
12+
<div>
13+
Standard HTML and JS below
14+
<br>
15+
<b>HI THERE!</b>
16+
</div>
17+
18+
<div style="margin-top:200px">
19+
Inside VueJS 2 below
20+
<div id="rootel"></div>
21+
</div>
3422
</body>
35-
<script>
36-
var rowMenu = [
37-
{
38-
label:"<i class='fas fa-user'></i> Change Name",
39-
action:function(e, row){
40-
row.update({name:"Steve Bobberson"});
41-
}
42-
},
43-
{
44-
label:"<i class='fas fa-check-square'></i> Select Row",
45-
action:function(e, row){
46-
row.select();
47-
}
48-
},
49-
{
50-
separator:true,
51-
},
52-
{
53-
label:"Admin Functions",
54-
menu:[
55-
{
56-
label:"<i class='fas fa-trash'></i> Delete Row",
57-
action:function(e, row){
58-
row.delete();
59-
}
60-
},
61-
{
62-
label:"<i class='fas fa-ban'></i> Disabled Option",
63-
disabled:true,
64-
},
65-
]
66-
}]
67-
var headerMenu = function(){
68-
var menu = [];
69-
var columns = this.getColumns();
70-
71-
for(let column of columns){
7223

73-
//create checkbox element using font awesome icons
74-
let icon = document.createElement("i");
75-
icon.classList.add("fas");
76-
icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");
7724

78-
//build label
79-
let label = document.createElement("span");
80-
let title = document.createElement("span");
8125

82-
title.textContent = " " + column.getDefinition().title;
26+
<script>
8327

84-
label.appendChild(icon);
85-
label.appendChild(title);
86-
87-
//create menu item
88-
menu.push({
89-
label:label,
90-
action:function(e){
91-
//prevent menu closing
92-
e.stopPropagation();
93-
94-
//toggle current column visibility
95-
column.toggle();
96-
97-
//change menu item icon
98-
if(column.isVisible()){
99-
icon.classList.remove("fa-square");
100-
icon.classList.add("fa-check-square");
101-
}else{
102-
icon.classList.remove("fa-check-square");
103-
icon.classList.add("fa-square");
28+
let vueApp = Vue.createApp(
29+
{
30+
el: "#rootel",
31+
template: `
32+
<div style="">
33+
<br>
34+
WE ARE IN THE MATRIX {{refresh}}...
35+
<br>
36+
<b><component :is='"UserList"'></component></b>
37+
</div>`,
38+
data: function() {
39+
return {
40+
refresh: 0
41+
}
42+
},
43+
mounted: async function() {
10444
}
45+
})
46+
vueApp.component("UserList",
47+
{
48+
name: "UserList",
49+
template: `
50+
<div style="margin-top: 70px;">
51+
<br>
52+
I am a component 5...
53+
</div>`,
54+
mounted: function() {
55+
vueApp.refresh ++
10556
}
106-
});
107-
}
108-
109-
return menu;
110-
};
111-
async function useTabulatorJs ( ) {
112-
return
113-
let promise = new Promise(returnfn => {
114-
let loadTabulatorJsLibScript = document.createElement('script');
115-
loadTabulatorJsLibScript.src = "/js_libs/tabulator.js";
116-
117-
document.head.appendChild(loadTabulatorJsLibScript);
118-
loadTabulatorJsLibScript.onload = function () {
119-
//debugger
120-
try {
121-
122-
123-
} catch (error) {
124-
125-
}
126-
returnfn()
127-
};
128-
12957
})
58+
setTimeout(async function() {
59+
//let vm = Vue.getCurrentInstance()
60+
//debugger
61+
//vueApp.refresh = 8
62+
vueApp.mount("#rootel")
13063

64+
},100)
13165

132-
let ret = await promise
133-
134-
}
135-
136-
137-
useTabulatorJs()
138-
139-
setTimeout(
140-
function(){
141-
142-
var table = new Tabulator("#example-table", {
143-
reactiveData:true,
144-
width: "100px",
145-
//height: "70px",
146-
rowHeight: 30,
147-
tables: [],
148-
data: [
149-
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
150-
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
151-
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
152-
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
153-
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
154-
],
155-
layout: "fitColumns",
156-
responsiveLayout: "hide",
157-
tooltips: true,
158-
addRowPos: "top",
159-
history: true,
160-
pagination: "local",
161-
paginationSize: 7,
162-
movableColumns: true,
163-
resizableColumns: true,
164-
resizableRows: true,
165-
movableColumns: true,
166-
layout: [
167-
{display: "Fit Columns", value: "fitColumns"},
168-
{display: "Fit Data", value: "fitData"},
169-
{display: "Fit Data Fill", value: "fitDataFill"}
170-
],
171-
tableNames: [],
172-
initialSort: [],
173-
rowContextMenu: rowMenu,
174-
columns: [
175-
{title:"Name", field:"name", width:150 , headerMenu: headerMenu},
176-
{title:"Age", field:"age", hozAlign:"left", formatter:"progress" , headerMenu: headerMenu},
177-
{title:"Favourite Color", field:"col" , headerMenu: headerMenu},
178-
{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center" , headerMenu: headerMenu},
179-
{title:"Name2", field:"name2", width:200, headerMenu: headerMenu,editor: true},
180-
]
181-
});
182-
183-
184-
185-
new Vue(
186-
{
187-
template: `<div style="margin-top: 70px;">Inside VueJS 2
188-
</div>`,
189-
el: "#rootel",
190-
mounted: async function() {
191-
var elTab = document.createElement("div");
192-
elTab.setAttribute("id", "example-table2")
193-
//elTab.setAttribute("style", "height:100%;")
194-
let parentEl = document.getElementById("example-table-parent")
195-
parentEl.appendChild(elTab);
196-
197-
Vue.nextTick(function () {
198-
199-
var table = new Tabulator("#example-table2", {
200-
reactiveData: true,
201-
width: "100px",
202-
//height: "70px",
203-
rowHeight: 30,
204-
tables: [],
205-
data: [
206-
{id: 1, name: "Oli Bob", age: "12", col: "red", dob: ""},
207-
{id: 2, name: "Mary May", age: "1", col: "blue", dob: "14/05/1982"},
208-
{id: 3, name: "Christine Lobowski", age: "42", col: "green", dob: "22/05/1982"},
209-
{id: 4, name: "Brendon Philips", age: "125", col: "orange", dob: "01/08/1980"},
210-
{id: 5, name: "Margret Marmajuke", age: "16", col: "yellow", dob: "31/01/1999"},
211-
],
212-
layout: "fitColumns",
213-
responsiveLayout: "hide",
214-
tooltips: true,
215-
addRowPos: "top",
216-
history: true,
217-
pagination: "local",
218-
paginationSize: 7,
219-
movableColumns: true,
220-
resizableColumns: true,
221-
resizableRows: true,
222-
movableColumns: true,
223-
layout: [
224-
{display: "Fit Columns", value: "fitColumns"},
225-
{display: "Fit Data", value: "fitData"},
226-
{display: "Fit Data Fill", value: "fitDataFill"}
227-
],
228-
tableNames: [],
229-
initialSort: [],
230-
rowContextMenu: rowMenu,
231-
columns: [
232-
{title: "Name", field: "name", width: 150, headerMenu: headerMenu},
233-
{
234-
title: "Age",
235-
field: "age",
236-
hozAlign: "left",
237-
formatter: "progress",
238-
headerMenu: headerMenu
239-
},
240-
{title: "Favourite Color", field: "col", headerMenu: headerMenu},
241-
{
242-
title: "Date Of Birth",
243-
field: "dob",
244-
sorter: "date",
245-
hozAlign: "center",
246-
headerMenu: headerMenu
247-
},
248-
{title: "Name2", field: "name2", width: 200, headerMenu: headerMenu, editor: true},
249-
]
250-
});
251-
})
252-
253-
}
254-
})
255-
},200
256-
)
257-
</script>
66+
</script>
25867
</html>

‎public/visifile/consultancy.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,8 @@
113113
<div class="text-center" style="font-family: 'Oxygen', sans-serif;font-size: 1.5vw; color: gray;margin-top:30px;margin-bottom:20px;">
114114
<img src='/oldconsult.jpg'
115115
style='width: 350px;'
116-
class='img-fluid'>
117-
</img>
116+
class='img-fluid' />
117+
118118
</div>
119119

120120
<div class="text-left" style="font-family: 'Oxygen', sans-serif;font-size: 24pt; color: black;font-weight:bold;margin-top:50px">

‎public/visifile/download.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@
117117
<div class="text-center" style="font-family: 'Oxygen', sans-serif;font-size: 1.5vw; color: gray;margin-top:30px;margin-bottom:20px;">
118118
<img src='/download.png'
119119
style='width: 350px;'
120-
class='img-fluid'>
121-
</img>
120+
class='img-fluid' />
121+
122122
</div>
123123

124124
<div class="text-left" style="font-family: 'Oxygen', sans-serif;font-size: 24pt; color: black;font-weight:bold;margin-top:50px">

‎public/visifile/mac_app.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,8 @@
111111
<div class="text-center" style="font-family: 'Oxygen', sans-serif;font-size: 1.5vw; color: gray;margin-top:30px;margin-bottom:20px;">
112112
<img src='/visifile/mac.png'
113113
style='width: 550px;'
114-
class='img-fluid'>
115-
</img>
114+
class='img-fluid' />
115+
116116
</div>
117117

118118
<div class="text-left" style="font-family: 'Oxygen', sans-serif;font-size: 24pt; color: black;font-weight:bold;margin-top:50px">

0 commit comments

Comments
 (0)