Started upgrading to vue3

ishubin · Jan 16, 2025 · a81b773 · a81b773
1 parent 20b9521
commit a81b773
Show file tree

Hide file tree

Showing 37 changed files with 916 additions and 1,862 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,18 +46,17 @@
     "@electron-forge/maker-squirrel": "^6.0.1",
     "@electron-forge/maker-zip": "^6.0.1",
     "@electron-forge/plugin-webpack": "^6.0.1",
-    "@johmun/vue-tags-input": "^1.5.10",
+    "@sipec/vue3-tags-input": "^3.0.4",
     "@vercel/webpack-asset-relocator-loader": "^1.7.3",
-    "@vue/test-utils": "^1.0.0-beta.29",
     "axios": "^0.22.0",
     "babel-loader": "^8.2.2",
+    "bufferutil": "^4.0.9",
     "codemirror": "^6.0.1",
     "codemirror-lang-schemioscript": "^0.1.1",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "electron": "21.2.3",
     "electron-icon-maker": "^0.0.5",
-    "esm": "^3.2.25",
     "expect": "^27.4.2",
     "file-loader": "^0.11.2",
     "gifenc": "^1.0.3",
@@ -72,15 +71,13 @@
     "shortid": "^2.2.16",
     "style-loader": "^3.3.1",
     "thememirror": "^2.0.1",
-    "tiptap": "^1.22.3",
-    "tiptap-extensions": "^1.22.3",
-    "vue": "^2.6.10",
+    "tiny-emitter": "^2.1.0",
+    "utf-8-validate": "^5.0.10",
+    "vue": "^3.5.13",
     "vue-color": "2.8.1",
-    "vue-gtag": "^1.16.1",
-    "vue-loader": "^15.9.8",
-    "vue-router": "^2.7.0",
-    "vue-template-compiler": "^2.6.10",
-    "vuex": "^3.5.1",
+    "vue-loader": "^17.4.2",
+    "vue-router": "^4.5.0",
+    "vuex": "^4.1.0",
     "webpack": "^5.64.0",
     "webpack-cli": "^4.9.1",
     "webpack-dev-server": "^4.5.0"

diff --git a/src/electron/renderer/renderer.js b/src/electron/renderer/renderer.js
@@ -9,12 +9,9 @@
 import Vue from 'vue';
 import ElectronApp from './ElectronApp.vue';
 import store from '../../ui/store/Store.js';
-import { applyVueFilters } from '../../ui/vue.filters';
 import '../static/electron.css';
 import { electronAPICLient } from './electronAPIClient';
 
-applyVueFilters(Vue);
-
 store.dispatch('setApiClient', electronAPICLient());
 store.dispatch('setAssetsPath', 'media://assets');
 

diff --git a/src/ui/app/view/FolderView.vue b/src/ui/app/view/FolderView.vue
@@ -65,7 +65,7 @@
                                 </router-link>
                             </td>
                             <td class="time-column">
-                                <span v-if="entry.modifiedTime">{{entry.modifiedTime | formatDateTime }}</span>
+                                <span v-if="entry.modifiedTime">{{entry.modifiedTime}}</span>
                             </td>
                             <td class="operation-column">
                                 <menu-dropdown v-if="entry.name !== '..' && !viewOnly" name="" iconClass="fas fa-ellipsis-v" :options="entry.menuOptions"
@@ -168,20 +168,7 @@ export default {
     },
 
     data() {
-        let path = this.$route.fullPath.trim();
-        if (path === '/') {
-            path = '';
-        }
-        const routePrefix = this.$store.state.routePrefix || '';
-
-        if (path.startsWith(routePrefix)) {
-            path = path.substring(routePrefix.length);
-        }
-
-        if (path.indexOf('/f/') === 0) {
-            path = decodeURI(path.substring(3));
-        }
-
+        const path = this.$route.params.folders ? this.$route.params.folders.join('/') : '';
 
         return {
             path: path,

diff --git a/src/ui/app/view/SearchView.vue b/src/ui/app/view/SearchView.vue
@@ -50,7 +50,7 @@
                                 </router-link>
                             </td>
                             <td class="time-column">
-                                <span v-if="entry.modifiedTime">{{entry.modifiedTime | formatDateTime }}</span>
+                                <span v-if="entry.modifiedTime">{{entry.modifiedTime}}</span>
                             </td>
                         </tr>
                     </tbody>
@@ -87,8 +87,8 @@ export default {
     },
 
     data() {
-        const query = this.$route.query.q;
-        const page = toPageNumber(this.$route.query.page);
+        const query = this.$route.query.q || '';
+        const page = toPageNumber(this.$route.query.page || 1);
         return {
             query,
             page,

diff --git a/src/ui/components/Pagination.vue b/src/ui/components/Pagination.vue
@@ -6,23 +6,23 @@
         <ul v-if="pages.length > 1" class="pagination">
             <li>
                 <span v-if="currentPage > 1">
-                    <router-link v-if="useRouter" :to="{path: urlForPage(currentPage - 1)}"><i class="fas fa-chevron-circle-left"></i></router-link>
+                    <router-link v-if="useRouter" :to="urlForPage(pageUrlPrefix, currentPage - 1)"><i class="fas fa-chevron-circle-left"></i></router-link>
                     <a v-else @click="onNonRoutablePageClicked($event, currentPage - 1)" href="#"><i class="fas fa-chevron-circle-left"></i></a>
                 </span>
                 <span v-else><i class="fas fa-chevron-circle-left"></i></span>
             </li>
 
             <li v-for="page in pages">
                 <span v-if="page.active">
-                    <router-link v-if="useRouter" :to="{path: urlForPage(page.page)}">{{page.page}}</router-link>
+                    <router-link v-if="useRouter" :to="page.url">{{page.page}}</router-link>
                     <a v-else @click="onNonRoutablePageClicked($event, page.page)" :class="{'current': currentPage === page.page}" href="#">{{page.page}}</a>
                 </span>
                 <span v-else>{{page.page}}</span>
             </li>
 
             <li>
                 <span v-if="currentPage < totalPages">
-                    <router-link v-if="useRouter" :to="{path: urlForPage(currentPage + 1)}"><i class="fas fa-chevron-circle-right"></i></router-link>
+                    <router-link v-if="useRouter" :to="urlForPage(pageUrlPrefix, currentPage + 1)"><i class="fas fa-chevron-circle-right"></i></router-link>
                     <a v-else @click="onNonRoutablePageClicked($event, currentPage + 1)" href="#"><i class="fas fa-chevron-circle-right"></i></a>
                 </span>
                 <span v-else><i class="fas fa-chevron-circle-right"></i></span>
@@ -53,15 +53,15 @@ export default {
         }
 
         return {
-            pages: this.buildPages(this.currentPage, this.totalPages),
+            pages: this.buildPages(pageUrlPrefix, this.currentPage, this.totalPages),
             pageUrlPrefix
         };
     },
 
     methods: {
-        urlForPage(page) {
-            if (this.urlPrefix) {
-                return this.pageUrlPrefix + page;
+        urlForPage(pageUrlPrefix, page) {
+            if (pageUrlPrefix) {
+                return pageUrlPrefix + page;
             } else {
                 return '#';
             }
@@ -74,7 +74,7 @@ export default {
             return false;
         },
 
-        buildPages(currentPage, totalPages) {
+        buildPages(pageUrlPrefix, currentPage, totalPages) {
             currentPage = Math.min(currentPage, totalPages);
             let pages = [];
             let maxSideRange = 2;
@@ -95,6 +95,7 @@ export default {
             if (start > 1) {
                 pages.push({
                     page: '1',
+                    url: this.urlForPage(pageUrlPrefix, 1),
                     active: true
                 });
             }
@@ -108,6 +109,7 @@ export default {
             for (let page = start; page <= end; page++) {
                 pages.push({
                     page: page,
+                    url: this.urlForPage(pageUrlPrefix, page),
                     active: page !== currentPage
                 });
             }