Migrate vue components to setup (#32329)

Migrated a handful Vue components to the `setup` syntax using
composition api as it has better Typescript support and is becoming the
new default in the Vue ecosystem.

- [x] ActionRunStatus.vue    
- [x] ActivityHeatmap.vue
- [x] ContextPopup.vue       
- [x] DiffFileList.vue
- [x] DiffFileTree.vue       
- [x] DiffFileTreeItem.vue    
- [x] PullRequestMergeForm.vue
- [x] RepoActivityTopAuthors.vue  
- [x] RepoCodeFrequency.vue
- [x] RepoRecentCommits.vue
- [x] ScopedAccessTokenSelector.vue

Left some larger components untouched for now to not go to crazy in this
single PR:
- [ ] DiffCommitSelector.vue  
- [ ] RepoActionView.vue
- [ ] RepoContributors.vue
- [ ] DashboardRepoList.vue  
- [ ] RepoBranchTagSelector.vue

web_src/js/components/ScopedAccessTokenSelector.vue

@@ -1,78 +1,60 @@
-<script lang="ts">
+<script lang="ts" setup>
+import {computed, onMounted, onUnmounted} from 'vue';
 import {hideElem, showElem} from '../utils/dom.ts';
 
-const sfc = {
-  props: {
-    isAdmin: {
-      type: Boolean,
-      required: true,
-    },
-    noAccessLabel: {
-      type: String,
-      required: true,
-    },
-    readLabel: {
-      type: String,
-      required: true,
-    },
-    writeLabel: {
-      type: String,
-      required: true,
-    },
-  },
+const props = defineProps<{
+  isAdmin: boolean;
+  noAccessLabel: string;
+  readLabel: string;
+  writeLabel: string;
+}>();
 
-  computed: {
-    categories() {
-      const categories = [
-        'activitypub',
-      ];
-      if (this.isAdmin) {
-        categories.push('admin');
-      }
-      categories.push(
-        'issue',
-        'misc',
-        'notification',
-        'organization',
-        'package',
-        'repository',
-        'user');
-      return categories;
-    },
-  },
+const categories = computed(() => {
+  const categories = [
+    'activitypub',
+  ];
+  if (props.isAdmin) {
+    categories.push('admin');
+  }
+  categories.push(
+    'issue',
+    'misc',
+    'notification',
+    'organization',
+    'package',
+    'repository',
+    'user');
+  return categories;
+});
 
-  mounted() {
-    document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit);
-  },
+onMounted(() => {
+  document.querySelector('#scoped-access-submit').addEventListener('click', onClickSubmit);
+});
 
-  unmounted() {
-    document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit);
-  },
+onUnmounted(() => {
+  document.querySelector('#scoped-access-submit').removeEventListener('click', onClickSubmit);
+});
 
-  methods: {
-    onClickSubmit(e) {
-      e.preventDefault();
+function onClickSubmit(e) {
+  e.preventDefault();
 
-      const warningEl = document.querySelector('#scoped-access-warning');
-      // check that at least one scope has been selected
-      for (const el of document.querySelectorAll('.access-token-select')) {
-        if (el.value) {
-          // Hide the error if it was visible from previous attempt.
-          hideElem(warningEl);
-          // Submit the form.
-          document.querySelector('#scoped-access-form').submit();
-          // Don't show the warning.
-          return;
-        }
-      }
-      // no scopes selected, show validation error
-      showElem(warningEl);
-    },
-  },
-};
-
-export default sfc;
+  const warningEl = document.querySelector('#scoped-access-warning');
+  // check that at least one scope has been selected
+  for (const el of document.querySelectorAll<HTMLInputElement>('.access-token-select')) {
+    if (el.value) {
+      // Hide the error if it was visible from previous attempt.
+      hideElem(warningEl);
+      // Submit the form.
+      document.querySelector<HTMLFormElement>('#scoped-access-form').submit();
+      // Don't show the warning.
+      return;
+    }
+  }
+  // no scopes selected, show validation error
+  showElem(warningEl);
+}
 </script>
+
 <template>
   <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category">
     <label class="category-label" :for="'access-token-scope-' + category">