pihkaal/simple-qr
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): copy api url button

Browse Source
This commit is contained in:
Pihkaal
2024-10-02 16:00:54 +02:00
parent 5fc05ba5e4
commit d0f80f5d97
1 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app.vue
View File

@@ -1,6 +1,4 @@
<script setup lang="ts"> <script setup lang="ts">
// TODO: disable buttons when no qr code is generated (it is currenly possible to download default qr code)
import { renderQRCodeToCanvas } from "@/utils/renderer"; import { renderQRCodeToCanvas } from "@/utils/renderer";
import { IMAGE_FORMATS, LOGOS } from "@/utils/settings"; import { IMAGE_FORMATS, LOGOS } from "@/utils/settings";
@@ -8,8 +6,10 @@ const canvas = ref(null);
const form = ref(null); const form = ref(null);
const qrCode = ref(undefined); const qrCode = ref(undefined);
const copyIcon = ref("i-heroicons-clipboard-document"); const copyUrlIcon = ref("i-heroicons-clipboard-document");
const copyLabel = ref("Copy"); const copyImageIcon = ref("i-heroicons-clipboard-document");
const copyImageLabel = ref("Copy");
const isQRCodeEmpty = computed(() => !qrCode.value); const isQRCodeEmpty = computed(() => !qrCode.value);
const qrCodeSrc = computed(() => qrCode.value ?? "/default.webp"); const qrCodeSrc = computed(() => qrCode.value ?? "/default.webp");
@@ -48,6 +48,17 @@ const updateQRCode = async () => {
qrCode.value = canvas.value.toDataURL(`image/${state.format}`); qrCode.value = canvas.value.toDataURL(`image/${state.format}`);
}; };
const copyUrl = async () => {
if (!isValidState.value) return;
await navigator.clipboard.writeText(apiUrl.value);
copyUrlIcon.value = "i-heroicons-clipboard-document-check";
setTimeout(() => {
copyUrlIcon.value = "i-heroicons-clipboard-document";
}, 3000);
};
const downloadQRCode = () => { const downloadQRCode = () => {
const link = document.createElement("a"); const link = document.createElement("a");
link.href = qrCode.value; link.href = qrCode.value;
@@ -70,11 +81,11 @@ const copyQRCode = async () => {
const item = new ClipboardItem({ "image/png": blob }); const item = new ClipboardItem({ "image/png": blob });
await navigator.clipboard.write([item]); await navigator.clipboard.write([item]);
copyIcon.value = "i-heroicons-clipboard-document-check"; copyImageIcon.value = "i-heroicons-clipboard-document-check";
copyLabel.value = "Copied!"; copyImageLabel.value = "Copied!";
setTimeout(() => { setTimeout(() => {
copyIcon.value = "i-heroicons-clipboard-document"; copyImageIcon.value = "i-heroicons-clipboard-document";
copyLabel.value = "Copy"; copyImageLabel.value = "Copy";
}, 3000); }, 3000);
}; };
@@ -151,7 +162,8 @@ const upperCase = (str: string) => str.toUpperCase();
/> />
<UButton <UButton
:disabled="isQRCodeEmpty" :disabled="isQRCodeEmpty"
icon="i-heroicons-clipboard-document" :icon="copyUrlIcon"
@click="copyUrl"
/> />
</UButtonGroup> </UButtonGroup>
</UFormGroup> </UFormGroup>
@@ -160,11 +172,11 @@ const upperCase = (str: string) => str.toUpperCase();
<UButton <UButton
class="flex-1" class="flex-1"
block block
:icon="copyIcon" :icon="copyImageIcon"
size="md" size="md"
color="primary" color="primary"
variant="solid" variant="solid"
:label="copyLabel" :label="copyImageLabel"
:trailing="false" :trailing="false"
:disabled="isQRCodeEmpty" :disabled="isQRCodeEmpty"
@click="copyQRCode" @click="copyQRCode"