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

feat(ui): copy base api url button

Browse Source
This commit is contained in:
Pihkaal
2024-10-12 23:06:19 +02:00
parent 3e4f65b19c
commit b8bad9adea
1 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
app.vue
View File

@@ -6,6 +6,7 @@ const form = ref(null);
const qrCode = ref(undefined); const qrCode = ref(undefined);
const copyUrlIcon = ref("i-heroicons-clipboard-document"); const copyUrlIcon = ref("i-heroicons-clipboard-document");
const copyBaseApiUrlIcon = ref("i-heroicons-clipboard-document");
const copyImageIcon = ref("i-heroicons-clipboard-document"); const copyImageIcon = ref("i-heroicons-clipboard-document");
const copyImageLabel = ref("Copy"); const copyImageLabel = ref("Copy");
@@ -35,7 +36,7 @@ const isValidState = computed(
state.format, state.format,
); );
const BASE_API_URL = "http://localhost:3000/api"; const BASE_API_URL = "https://simple-qr.com/api";
const apiUrl = computed(() => { const apiUrl = computed(() => {
if (!isValidState.value) return ""; if (!isValidState.value) return "";
@@ -71,6 +72,15 @@ const copyUrl = async () => {
}, 3000); }, 3000);
}; };
const copyBaseApiUrl = async () => {
await navigator.clipboard.writeText(BASE_API_URL);
copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document-check";
setTimeout(() => {
copyBaseApiUrlIcon.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;
@@ -120,7 +130,7 @@ const arrayToUnion = (array: string[]) =>
Simple QRCode Generator Simple QRCode Generator
</h1> </h1>
<div class="flex justify-between space-x-8"> <div class="flex justify-between space-x-8">
<img :src="qrCodeSrc" class="max-h-[375px] aspect-square" /> <img :src="qrCodeSrc" class="max-h-[375px] aspect-square" >
<div class="flex-1 flex flex-col justify-center"> <div class="flex-1 flex flex-col justify-center">
<UForm ref="form" :state="state" class="space-y-4"> <UForm ref="form" :state="state" class="space-y-4">
@@ -276,28 +286,36 @@ const arrayToUnion = (array: string[]) =>
<p> <p>
You can easily generate QRCodes by using the API, with no rate You can easily generate QRCodes by using the API, with no rate
limitation. limitation.
<br /> <br >
<br /> <br >
If you are not sure how to use the API, you can fill the QRCode form If you are not sure how to use the API, you can fill the QRCode form
and copy the generated API URL. and copy the generated API URL.
</p> </p>
<div class="space-y-3"> <div class="space-y-3">
<h2 class="font-bold text-lg">Base API URL</h2> <h2 class="font-bold text-lg">Base API URL</h2>
<UInput
model-value="https://simple-qr.com/api" <UButtonGroup size="sm" orientation="horizontal" class="w-full">
size="sm" <UInput
class="w-full" :model-value="BASE_API_URL"
disabled size="sm"
:ui="{ base: '!ps-12 !cursor-text font-mono' }" class="w-full"
> disabled
<template #leading> :ui="{ base: '!ps-12 !cursor-text font-mono' }"
<span >
class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-sm" <template #leading>
>GET</span <span
> class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-sm"
</template> >GET</span
</UInput> >
</template>
</UInput>
<UButton
color="gray"
:icon="copyBaseApiUrlIcon"
@click="copyBaseApiUrl"
/>
</UButtonGroup>
</div> </div>
<div class="space-y-3"> <div class="space-y-3">