Refactor from Vue2 to Vue3 (#20044)

Close #19902

web_src/js/components/DashboardRepoList.js

@@ -1,12 +1,12 @@
-import Vue from 'vue';
+import {createApp, nextTick} from 'vue';
 import $ from 'jquery';
 import {initVueSvg, vueDelimiters} from './VueComponentLoader.js';
 import {initTooltip} from '../modules/tippy.js';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
 
-function initVueComponents() {
-  Vue.component('repo-search', {
+function initVueComponents(app) {
+  app.component('repo-search', {
     delimiters: vueDelimiters,
     props: {
       searchLimit: {
@@ -138,13 +138,14 @@ function initVueComponents() {
     },
 
     mounted() {
+      const el = document.getElementById('dashboard-repo-list');
       this.changeReposFilter(this.reposFilter);
-      for (const el of this.$el.querySelectorAll('.tooltip')) {
-        initTooltip(el);
+      for (const elTooltip of el.querySelectorAll('.tooltip')) {
+        initTooltip(elTooltip);
       }
-      $(this.$el).find('.dropdown').dropdown();
+      $(el).find('.dropdown').dropdown();
       this.setCheckboxes();
-      Vue.nextTick(() => {
+      nextTick(() => {
         this.$refs.search.focus();
       });
     },
@@ -192,7 +193,7 @@ function initVueComponents() {
         this.reposFilter = filter;
         this.repos = [];
         this.page = 1;
-        Vue.set(this.counts, `${filter}:${this.archivedFilter}:${this.privateFilter}`, 0);
+        this.counts[`${filter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
       },
 
@@ -261,7 +262,7 @@ function initVueComponents() {
         this.page = 1;
         this.repos = [];
         this.setCheckboxes();
-        Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, 0);
+        this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
       },
 
@@ -283,7 +284,7 @@ function initVueComponents() {
         this.page = 1;
         this.repos = [];
         this.setCheckboxes();
-        Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, 0);
+        this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
       },
 
@@ -297,7 +298,7 @@ function initVueComponents() {
           this.page = 1;
         }
         this.repos = [];
-        Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, 0);
+        this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
         this.searchRepos();
       },
 
@@ -331,7 +332,7 @@ function initVueComponents() {
           if (searchedQuery === '' && searchedMode === '' && this.archivedFilter === 'both') {
             this.reposTotalCount = count;
           }
-          Vue.set(this.counts, `${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`, count);
+          this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = count;
           this.finalPage = Math.ceil(count / this.searchLimit);
           this.updateHistory();
           this.isLoading = false;
@@ -352,22 +353,20 @@ function initVueComponents() {
         }
         return 'octicon-repo';
       }
-    }
+    },
+
+    template: document.getElementById('dashboard-repo-list-template'),
   });
 }
 
-
 export function initDashboardRepoList() {
   const el = document.getElementById('dashboard-repo-list');
   const dashboardRepoListData = pageData.dashboardRepoList || null;
   if (!el || !dashboardRepoListData) return;
 
-  initVueSvg();
-  initVueComponents();
-  new Vue({
-    el,
+  const app = createApp({
     delimiters: vueDelimiters,
-    data: () => {
+    data() {
       return {
         searchLimit: dashboardRepoListData.searchLimit || 0,
         subUrl: appSubUrl,
@@ -375,4 +374,7 @@ export function initDashboardRepoList() {
       };
     },
   });
+  initVueSvg(app);
+  initVueComponents(app);
+  app.mount(el);
 }