chore(sfc-playground): improve buttons

diff --git a/packages/sfc-playground/src/Header.vue b/packages/sfc-playground/src/Header.vue
index 88ebe28dc2ccda5a0b3101240b2425744c04f22b..c0cc7a8b962911e5cf7071fc5d322faebbbadfdf 100644 (file)
--- a/packages/sfc-playground/src/Header.vue
+++ b/packages/sfc-playground/src/Header.vue
@@ -111,12 +111,18 @@ async function fetchVersions(): Promise<string[]> {
           </li>
         </ul>
       </div>
-      <button class="toggle-dark" @click="toggleDark">
+      <button title="Toggle dark mode" class="toggle-dark" @click="toggleDark">
         <Sun class="light" />
         <Moon class="dark" />
       </button>
-      <button class="share" @click="copyLink"><Share /></button>
-      <button class="download" @click="downloadProject(store)">
+      <button title="Copy sharable URL" class="share" @click="copyLink">
+        <Share />
+      </button>
+      <button
+        title="Download project files"
+        class="download"
+        @click="downloadProject(store)"
+      >
         <Download />
       </button>
     </div>

diff --git a/packages/sfc-playground/src/download/download.ts b/packages/sfc-playground/src/download/download.ts
index 6d9634d3e9a086600e3a20fca95835c34a58c72c..dd7e3761d67e92682e6b056b92c7d3ee3405d126 100644 (file)
--- a/packages/sfc-playground/src/download/download.ts
+++ b/packages/sfc-playground/src/download/download.ts
@@ -7,6 +7,10 @@ import config from './template/vite.config.js?raw'
 import readme from './template/README.md?raw'
 
 export async function downloadProject(store: any) {
+  if (!confirm('Download project files?')) {
+    return
+  }
+
   const { default: JSZip } = await import('jszip')
   const zip = new JSZip()