From: btea <2356281422@qq.com>
Date: Mon, 11 Dec 2023 10:47:06 +0000 (+0800)
Subject: chore(sfc-playground): highlight the active version in dropdown (#9045)
X-Git-Tag: v3.4.0-beta.1~23^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=376dac4e6fce7c9caea24efe8c30aed7f4ba0e85;p=thirdparty%2Fvuejs%2Fcore.git

chore(sfc-playground): highlight the active version in dropdown (#9045)
---

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index e865a76a5f..cf8ea9013f 100644
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -24,7 +24,7 @@ const vueVersion = ref(`@${currentCommit}`)
 async function setVueVersion(v: string) {
   vueVersion.value = `loading...`
   await store.setVueVersion(v)
-  vueVersion.value = `v${v}`
+  vueVersion.value = v
 }
 
 function resetVueVersion() {
diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
index 2dfbcbc5f9..0c4a37138e 100644
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages/sfc-playground/src/VersionSelect.vue
@@ -74,8 +74,8 @@ onMounted(() => {
 
     <ul class="versions" :class="{ expanded }">
       <li v-if="!versions"><a>loading versions...</a></li>
-      <li v-for="version of versions">
-        <a @click="setVersion(version)">v{{ version }}</a>
+      <li v-for="ver of versions" :class="{ active: ver === version }">
+        <a @click="setVersion(ver)">v{{ ver }}</a>
       </li>
       <div @click="expanded = false">
         <slot />
@@ -111,4 +111,8 @@ onMounted(() => {
   border-top: 6px solid #aaa;
   margin-left: 8px;
 }
+
+.versions .active a {
+  color: var(--green);
+}
 </style>