Merge pull request #273 from cloudcloud/feature/vue3

Upgrade the frontend to vue3
cloudcloud · Apr 17, 2024 · 2cc895c · 2cc895c
2 parents 6a5e430 + 99fb990
commit 2cc895c
Show file tree

Hide file tree

Showing 14 changed files with 3,844 additions and 6,225 deletions.
diff --git a/package.json b/package.json
@@ -8,31 +8,30 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "axios": "^0.21.1",
-    "elliptic": "6.5.4",
-    "sass": "1.32.8",
-    "sass-loader": "10.1.1",
-    "vue": "^2.7.16",
-    "vue-router": "3.5.1",
-    "vuetify": "2.4.9",
-    "vuex": "^3.6.0",
-    "webpack": "^4.46.0",
+    "@vue/compiler-sfc": "^3.2.6",
+    "axios": "1.6.8",
+    "elliptic": "6.5.5",
+    "sass": "1.75.0",
+    "sass-loader": "14.2.1",
+    "vue": "^3.4.23",
+    "vue-router": "4.3.1",
+    "vuetify": "^3.5.16",
+    "vuex": "4.1.0",
+    "webpack": "5.91.0",
+    "webpack-plugin-vuetify": "^3.0.3",
     "y18n": "5.0.8"
   },
   "devDependencies": {
-    "@mdi/font": "^5.8.55",
-    "@mdi/js": "^5.8.55",
-    "@vue/cli-plugin-babel": "4.5.12",
-    "@vue/cli-plugin-eslint": "4.5.12",
-    "@vue/cli-service": "4.5.12",
+    "@mdi/font": "7.4.47",
+    "@mdi/js": "7.4.47",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-service": "5.0.8",
     "babel-eslint": "^10.0.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "7.8.0",
-    "stylus": "^0.54.8",
-    "stylus-loader": "4.3.3",
-    "vue-cli-plugin-vuetify": "^2.5.8",
-    "vue-template-compiler": "^2.7.16",
-    "vuetify-loader": "^1.9.2"
+    "eslint": "9.0.0",
+    "eslint-plugin-vue": "9.25.0",
+    "stylus": "0.63.0",
+    "stylus-loader": "8.1.0",
+    "vue-template-compiler": "^2.7.16"
   },
   "eslintConfig": {
     "root": true,

diff --git a/pkg/server/server.go b/pkg/server/server.go
@@ -14,8 +14,7 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-//go:embed dist/js/*.js dist/css/*.css
-//go:embed dist/fonts dist/index.html
+//go:embed dist/**
 var dist embed.FS
 
 var (

diff --git a/public/index.html b/public/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script id="config">{"hostname":"http://localhost:8008"}</script>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">

diff --git a/src/components/Destination.vue b/src/components/Destination.vue
@@ -6,9 +6,15 @@
         <v-card shaped>
 
           <v-card-title>
-            <span>destination</span> | <span>{{destination_name}}</span>
-            <v-spacer />
-            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+            <v-row justify="center" align="center">
+              <v-col cols="6" align="left">
+                <span>destination</span> | <span>{{destination_name}}</span>
+              </v-col>
+
+              <v-col cols="6">
+                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+              </v-col>
+            </v-row>
           </v-card-title>
 
           <v-data-table :headers="headers" :items="destination.entries" :search="search" class="elevation-1">

diff --git a/src/components/Destinations.vue b/src/components/Destinations.vue
@@ -6,9 +6,15 @@
         <v-card shaped>
 
           <v-card-title>
-            destinations
-            <v-spacer></v-spacer>
-            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
+            <v-row justify="center" align="center">
+              <v-col cols="6" align="left">
+                destinations
+              </v-col>
+
+              <v-col cols="6">
+                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
+              </v-col>
+            </v-row>
           </v-card-title>
 
           <v-data-table :headers="headers" :items="destinations" :search="search" class="elevation-1">

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-app-bar color="secondary" app>
+    <v-app-bar color="deep-purple-darken-3" app>
       <v-spacer />
 
       <v-btn class="mx-2" ripple small to="/"><span>Home</span></v-btn>

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -6,9 +6,13 @@
         <v-card shaped>
 
           <v-card-title>
-            <span>roadie</span>
-            <v-spacer />
-            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+            <v-row justify="center" align="center">
+              <v-col cols="6" align="left">roadie</v-col>
+
+              <v-col cols="6">
+                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+              </v-col>
+            </v-row>
           </v-card-title>
 
           <v-data-table :headers="headers" :items="historical" :search="search" class="elevation-1">

diff --git a/src/components/Source.vue b/src/components/Source.vue
@@ -6,9 +6,15 @@
         <v-card shaped>
 
           <v-card-title>
-            <span>source</span> | <span>{{source_name}}</span>
-            <v-spacer />
-            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+            <v-row justify="center" align="center">
+              <v-col cols="6" align="left">
+                <span>source</span> | <span>{{source_name}}</span>
+              </v-col>
+
+              <v-col cols="6">
+                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+              </v-col>
+            </v-row>
           </v-card-title>
 
           <v-data-table :headers="headersExpanded" :items="source.entries" :search="search" :single-expand="singleExpand" :expanded.sync="expanded" item-key="entry" show-expand class="elevation-1" v-if="isExpandable">

diff --git a/src/components/Sources.vue b/src/components/Sources.vue
@@ -6,9 +6,13 @@
         <v-card shaped>
 
           <v-card-title>
-            <span>sources</span>
-            <v-spacer />
-            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+            <v-row justify="center" align="center">
+              <v-col cols="6" align="left">sources</v-col>
+
+              <v-col cols="6">
+                <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+              </v-col>
+            </v-row>
           </v-card-title>
 
           <v-data-table :headers="headers" :items="sources" :search="search" class="elevation-1">

diff --git a/src/main.js b/src/main.js
@@ -1,14 +1,25 @@
-import Vue from 'vue'
-import vuetify from './plugins/vuetify';
-import App from './App.vue'
-import router from './routes'
-import store from './store'
-
-Vue.config.productionTip = process.env.NODE_ENV == 'production'
-
-new Vue({
-  vuetify,
-  store,
-  router,
-  render: h => h(App),
-}).$mount('#app');
+import { createApp } from 'vue';
+import App from './App.vue';
+
+import 'vuetify/styles';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import { aliases, mdi } from 'vuetify/iconsets/mdi';
+
+import router from './routes';
+import store from './store';
+
+const vuetify = createVuetify({
+  components,
+  directives,
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
+});
+
+createApp(App).use(vuetify).use(router).use(store).mount('#app');
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -1,8 +1,8 @@
 import '@mdi/font/css/materialdesignicons.css';
 import Vue from 'vue';
-import Vuetify from 'vuetify/lib';
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
-Vue.use(Vuetify);
+Vue.use(vuetify);
 
 export default new Vuetify({
   icons: {

diff --git a/src/routes.js b/src/routes.js
@@ -1,5 +1,4 @@
-import Vue from 'vue';
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 
 import Home from './components/Home';
 import Sources from './components/Sources';
@@ -8,10 +7,8 @@ import Destinations from './components/Destinations';
 import Destination from './components/Destination';
 import Config from './components/Config';
 
-Vue.use(VueRouter);
-
-export default new VueRouter({
-  mode: 'history',
+export default createRouter({
+  history: createWebHistory(),
   routes: [
     {path: '/', name: 'Home', component: Home},
     {path: '/sources', name: 'Sources', component: Sources},

diff --git a/src/store.js b/src/store.js
@@ -1,11 +1,8 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 
 import apiClient from './api';
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
+export default createStore({
   state: {
     sources: [],
     destinations: [],