feat(ui): copy button

app.vue

@@ -9,6 +9,10 @@ const content = ref("");
 const canvas = ref(null);
 const qrCode = ref("");
 
+const copyIcon = ref("i-heroicons-clipboard-document");
+const copyLabel = ref("Copy to clipboard");
+const isQRCodeEmpty = computed(() => qrCode.value.length === 0);
+
 const updateQRCode = async () => {
   await nextTick();
 
@@ -29,6 +33,26 @@ const downloadQRCode = () => {
   link.click();
   document.body.removeChild(link);
 };
+
+const copyQRCode = async () => {
+  if (content.value.length === 0) return;
+
+  const logoUrl = `/${logo.value}.png`;
+  await renderQRCodeToCanvas(canvas.value, content.value, logoUrl);
+
+  const qrCode = canvas.value.toDataURL(`image/png`);
+
+  const blob = await (await fetch(qrCode)).blob();
+  const item = new ClipboardItem({ "image/png": blob });
+  await navigator.clipboard.write([item]);
+
+  copyIcon.value = "i-heroicons-clipboard-document-check";
+  copyLabel.value = "Copied!";
+  setTimeout(() => {
+    copyIcon.value = "i-heroicons-clipboard-document";
+    copyLabel.value = "Copy to clipboard";
+  }, 3000);
+};
 </script>
 
 <template>
@@ -38,30 +62,35 @@ const downloadQRCode = () => {
     <USelectMenu
       v-model="format"
       :options="IMAGE_FORMATS"
-      @input="updateQRCode"
+      @change="updateQRCode"
     />
-    <USelectMenu v-model="logo" :options="LOGOS" @input="updateQRCode" />
+    <USelectMenu v-model="logo" :options="LOGOS" @change="updateQRCode" />
     <UInput v-model="content" @input="updateQRCode" />
 
     <canvas ref="canvas" class="hidden" />
     <img :src="qrCode" />
 
     <UButton
+      block
       icon="i-heroicons-arrow-down-tray"
       size="sm"
       color="primary"
       variant="solid"
       label="Download"
       :trailing="false"
+      :disabled="isQRCodeEmpty"
       @click="downloadQRCode"
     />
     <UButton
-      icon="i-heroicons-clipboard-document"
+      block
+      :icon="copyIcon"
       size="sm"
       color="primary"
       variant="solid"
-      label="Copy to clipboard"
+      :label="copyLabel"
       :trailing="false"
+      :disabled="isQRCodeEmpty"
+      @click="copyQRCode"
     />
   </div>
 </template>

utils/settings.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 
 export const LOGOS = ["session", "instagram"] as const;
 
-export const IMAGE_FORMATS = ["jpeg", "png", "webp"] as const;
+export const IMAGE_FORMATS = ["png", "jpeg", "webp"] as const;
 
 export type ImageFormat = (typeof IMAGE_FORMATS)[number];