chore(playground): support copying vue version (#11558)

Author: liuseen-l

packages/sfc-playground/src/VersionSelect.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import Copy from './icons/Copy.vue'
 
 const expanded = ref(false)
 const versions = ref<string[]>()
@@ -53,6 +54,12 @@ function setVersion(v: string) {
   expanded.value = false
 }
 
+function copyVersion(v: string) {
+  window.navigator.clipboard.writeText(v).then(() => {
+    alert('Vue version has been copied to clipboard.')
+  })
+}
+
 onMounted(() => {
   window.addEventListener('click', () => {
     expanded.value = false
@@ -76,11 +83,19 @@ onMounted(() => {
       <li v-if="!versions"><a>loading versions...</a></li>
       <li
         v-for="(ver, index) of versions"
+        class="versions-item"
         :class="{
           active: ver === version || (version === 'latest' && index === 0),
         }"
       >
         <a @click="setVersion(ver)">v{{ ver }}</a>
+        <button
+          title="Copy Version"
+          class="version-copy"
+          @click="copyVersion(`v${ver}`)"
+        >
+          <Copy />
+        </button>
       </li>
       <div @click="expanded = false">
         <slot />
@@ -120,4 +135,17 @@ onMounted(() => {
 .versions .active a {
   color: var(--green);
 }
+
+.versions .versions-item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.versions .versions-item .version-copy {
+  display: none;
+}
+
+.versions .versions-item:hover .version-copy {
+  display: block;
+}
 </style>

packages/sfc-playground/src/icons/Copy.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.3em"
+    height="1.3em"
+    viewBox="0 0 24 24"
+  >
+    <path fill="currentColor" d="M8 7h11v14H8z" opacity=".3" />
+    <path
+      fill="currentColor"
+      d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
+    />
+  </svg>
+</template>