Refactor branch/tag selector to Vue SFC

[wxiaoguang]

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 5f23218 , there should be no usage of the vue-rumtime-compiler anymore (hopefully), so I think this PR could close #19851

[delvh]

😒

[wxiaoguang]

Thank you. The code is quite old and complex, I do not want to change too much 😂

[wxiaoguang]

More details of this component:

Old code has too many problems:

• // TODO: fix this anti-pattern: side-effects-in-computed-properties, it's really fragile, it would cause problems sooner or later ...
• The using of jQuery: $().val(), $.trigger(), etc. jQuery shouldn't be used in Vue ....

In the future, we could rewrite this component to make it clear, then we would have enough time to do a full test of it.

So, it's better to leave the code rewriting together at the time, then we do not need to spend twice time on full-test.

[codecov-commenter]

Codecov Report

Merging #23421 (41f24bc) into main (d56bb74) will increase coverage by 47.18%.
The diff coverage is n/a.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

@@            Coverage Diff            @@
##           main   #23421       +/-   ##
=========================================
+ Coverage      0   47.18%   +47.18%     
=========================================
  Files         0     1153     +1153     
  Lines         0   152151   +152151     
=========================================
+ Hits          0    71798    +71798     
- Misses        0    71874    +71874     
- Partials      0     8479     +8479     

see 1153 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[wxiaoguang]

Some details about the changes after 2 LGTM:

• 5f23218

  • fix a bug in code, the size should be integer type
  • generate svg by function, instead of template: avoid using vue runtime compiler, then Gitea works with disabled unsafe-eval CSP.

• 3c698d2

  • declare vue config explicitly (the same as the default before), otherwise there will be a warning in console log

They don't affect the reviewed logic.

[silverwind]

generate svg by function, instead of template: avoid using vue runtime compiler, then Gitea works with disabled unsafe-eval CSP.

Does that mean we can drop the @vue/compiler-sfc dependency? Is that the runtime compiler or is it something else?

[wxiaoguang]

According to Vue document, the runtime compiler could be tree-shaked but I haven't confirmed it and haven't tested how @vue/compiler-sfc affectes the packing. According to https://github.com/vuejs/core/tree/main/packages/compiler-sfc :

Note: as of 3.2.13+, this package is included as a dependency of the main vue package and can be accessed as vue/compiler-sfc. This means you no longer need to explicitly install this package and ensure its version match that of vue's. Just use the main vue/compiler-sfc deep import instead.

There were still some unclear points to me, so I chose to keep them as before. 😂

If you have ideas about how to continue to improve, feel free to do it and I'd like to learn more.