Refactor branch/tag selector to Vue SFC (#23421)

Follow #23394

There were many bad smells in old code. This PR only moves the code into
Vue SFC, doesn't touch the unrelated logic.

update: after
https://github.com/go-gitea/gitea/pull/23421/commits/5f23218c851e12132f538a404c946bbf6ff38e62
, there should be no usage of the vue-rumtime-compiler anymore
(hopefully), so I think this PR could close #19851

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

1 files changed, 10 insertions, 8 deletions

diff --git a/web_src/js/svg.js b/web_src/js/svg.js
index 9eabca3fd3..e431ca57e6 100644
--- a/web_src/js/svg.js
+++ b/web_src/js/svg.js
@@ -1,3 +1,4 @@
+import {h} from 'vue';
 import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
 import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
 import octiconClock from '../../public/img/svg/octicon-clock.svg';
@@ -40,6 +41,8 @@ import giteaDoubleChevronLeft from '../../public/img/svg/gitea-double-chevron-le
 import giteaDoubleChevronRight from '../../public/img/svg/gitea-double-chevron-right.svg';
 import octiconChevronLeft from '../../public/img/svg/octicon-chevron-left.svg';
 import octiconOrganization from '../../public/img/svg/octicon-organization.svg';
+import octiconTag from '../../public/img/svg/octicon-tag.svg';
+import octiconGitBranch from '../../public/img/svg/octicon-git-branch.svg';
 
 const svgs = {
   'octicon-blocked': octiconBlocked,
@@ -84,9 +87,13 @@ const svgs = {
   'gitea-double-chevron-right': giteaDoubleChevronRight,
   'octicon-chevron-left': octiconChevronLeft,
   'octicon-organization': octiconOrganization,
+  'octicon-tag': octiconTag,
+  'octicon-git-branch': octiconGitBranch,
 };
 
-// TODO: use a more general approach to access SVG icons. At the moment, developers must check, pick and fill the names manually, most of the SVG icons in assets couldn't be used directly.
+// TODO: use a more general approach to access SVG icons.
+//  At the moment, developers must check, pick and fill the names manually,
+//  most of the SVG icons in assets couldn't be used directly.
 
 const parser = new DOMParser();
 const serializer = new XMLSerializer();
@@ -112,12 +119,7 @@ export const SvgIcon = {
     size: {type: Number, default: 16},
     className: {type: String, default: ''},
   },
-
-  computed: {
-    svg() {
-      return svg(this.name, this.size, this.className);
-    },
+  render() {
+    return h('span', {innerHTML: svg(this.name, this.size, this.className)});
   },
-
-  template: `<span v-html="svg" />`
 };