chore(sfc-playgroud): highlight the commit and latest version when active in dropdown...

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 6506ad7bab290419054ca28e8f20b0f5bcd83225..8e810d89441c4557860365dc58781de021240969 100644 (file)
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -80,7 +80,7 @@ function toggleDark() {
         pkg="vue"
         label="Vue Version"
       >
-        <li>
+        <li :class="{ active: vueVersion === `@${currentCommit}` }">
           <a @click="resetVueVersion">This Commit ({{ currentCommit }})</a>
         </li>
         <li>

diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
index 50c3c59ac24f6d8fe58412d3b91a324fdf7222e5..bd24ac21a9eab00d296c36a1fcf0063f8f2ecbf3 100644 (file)
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/packages/sfc-playground/src/VersionSelect.vue
@@ -74,7 +74,12 @@ onMounted(() => {
 
     <ul class="versions" :class="{ expanded }">
       <li v-if="!versions"><a>loading versions...</a></li>
-      <li v-for="ver of versions" :class="{ active: ver === version }">
+      <li
+        v-for="(ver, index) of versions"
+        :class="{
+          active: ver === version || (version === 'latest' && index === 0),
+        }"
+      >
         <a @click="setVersion(ver)">v{{ ver }}</a>
       </li>
       <div @click="expanded = false">