From: LiuSeen <91084928+liuseen-l@users.noreply.github.com>
Date: Thu, 8 Aug 2024 13:07:57 +0000 (+0800)
Subject: chore(playground): support copying vue version (#11558)
X-Git-Tag: v3.4.37~4
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=f8ce86bad7bde895605349cbf62fb1ec18b0d745;p=thirdparty%2Fvuejs%2Fcore.git

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

diff --git a/packages/sfc-playground/src/VersionSelect.vue b/packages/sfc-playground/src/VersionSelect.vue
index bd24ac21a9..3a30e497f9 100644
--- a/packages/sfc-playground/src/VersionSelect.vue
+++ b/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>
diff --git a/packages/sfc-playground/src/icons/Copy.vue b/packages/sfc-playground/src/icons/Copy.vue
new file mode 100644
index 0000000000..f3851da63c
--- /dev/null
+++ b/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>