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

feat(nuxt): nuxt3 -> nuxt4

Browse Source
This commit is contained in:
Stevan
2026-02-21 16:22:51 +01:00
parent 6a74e8c6ea
commit c4c165edab
22 changed files with 6600 additions and 9049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/components/body/ApiModal.vue Normal file
View File

@@ -0,0 +1,78 @@
<script setup lang="ts">
const app = useAppStore();
const baseApiUrl = useBaseApiUrl();
const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
</script>
<template>
<UModal v-model:open="app.apiModalOpened" title="API Documentation">
<template #body>
<div class="flex flex-col space-y-8">
<p>
You can easily generate QRCodes by using the API, with no rate
limitation.
<br />
<br />
If you are not sure how to use the API, you can fill the QRCode form
and copy the generated API URL.
</p>
<div class="space-y-3">
<h2 class="font-bold text-lg">Base API URL</h2>
<UButtonGroup size="md" class="w-full">
<UInput
:model-value="baseApiUrl"
size="md"
class="w-full"
disabled
:ui="{ base: '!ps-12.5 !cursor-text font-mono' }"
>
<template #leading>
<span
class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-xs font-mono"
><span class="translate-y-px inline-block">GET</span></span
>
</template>
</UInput>
<UButton
color="neutral"
variant="subtle"
:icon="baseApiUrlIcon"
@click="copyBaseApiUrl"
/>
</UButtonGroup>
</div>
<div class="space-y-3">
<h2 class="font-bold text-lg">Query parameters</h2>
<div
class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
>
<div class="pt-1 pb-4 flex justify-between gap-x-5">
<span class="text-primary font-semibold">format</span>
<span class="text-slate-700 dark:text-slate-200 text-right">{{
arrayToUnion(IMAGE_FORMATS)
}}</span>
</div>
<div class="flex pb-4 justify-between gap-x-5">
<span class="text-primary font-semibold">logo</span>
<span class="text-slate-700 dark:text-slate-200 text-right">{{
arrayToUnion(LOGOS)
}}</span>
</div>
<div class="flex justify-between gap-x-5">
<span class="text-primary font-semibold">content</span>
<span class="text-slate-700 dark:text-slate-200 text-right"
>string</span
>
</div>
</div>
</div>
</div>
</template>
</UModal>
</template>

9
app/components/body/AppBody.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div class="flex flex-col sm:flex-row justify-between gap-4">
<QRCodePreview />
<QRCodeForm />
</div>
<ApiModal />
</template>

229
app/components/body/QRCodeForm.vue Normal file
View File

@@ -0,0 +1,229 @@
<script setup lang="ts">
import { z } from "zod";
const app = useAppStore();
const baseApiUrl = useBaseApiUrl();
const formSchema = z
.object({
content: z.string().min(1, "Required"),
hasLogo: z.boolean(),
logo: z.string().optional(),
format: z.enum(IMAGE_FORMATS),
})
.superRefine((data, ctx) => {
if (data.hasLogo && !data.logo) {
ctx.addIssue({
code: "custom",
message: "Required",
path: ["logo"],
});
}
});
const isQRCodeEmpty = computed(() => app.qrCode === "/default.webp");
const state = reactive<{
hasLogo: boolean;
logo: string | undefined;
format: ImageFormat;
content: string | undefined;
}>({
hasLogo: false,
logo: undefined,
format: IMAGE_FORMATS[0],
content: undefined,
});
const parsedState = computed(() => formSchema.safeParse(state));
const apiUrl = computed<string>((previous) => {
if (!parsedState.value.success) return previous ?? "";
const { content, format, hasLogo, logo } = parsedState.value.data;
const params = new URLSearchParams({
...(hasLogo && logo && { logo }),
format,
content,
});
return `${baseApiUrl}?${params}`;
});
const isValidApiUrl = computed(() => !!apiUrl.value);
const { icon: copyUrlIcon, copy: copyUrl } = useCopyable(apiUrl);
const openApiModal = () => {
app.apiModalOpened = true;
};
const updateQRCode = async () => {
await nextTick();
if (!parsedState.value.success) return;
const { content, hasLogo, logo, format } = parsedState.value.data;
const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
const canvas = await renderQRCodeToCanvas(content, logoUrl);
app.qrCode = canvas.toDataURL(format);
};
const downloadQRCode = () => {
const link = document.createElement("a");
link.href = app.qrCode;
link.download = `qrcode.${state.format}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const {
copy: copyQRCode,
icon: copyImageIcon,
label: copyImageLabel,
} = useCopyable(async () => {
if (isQRCodeEmpty.value) return;
if (!parsedState.value.success) return;
const { content, hasLogo, logo } = parsedState.value.data;
const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
const canvas = await renderQRCodeToCanvas(content, logoUrl);
const qrCode = canvas.toDataURL("png");
const blob = await (await fetch(qrCode)).blob();
const item = new ClipboardItem({ "image/png": blob });
await navigator.clipboard.write([item]);
});
</script>
<template>
<div class="flex-1 flex flex-col justify-center">
<UForm
:schema="formSchema"
:state="state"
:validate-on="['blur', 'change', 'input']"
class="space-y-4"
>
<UFormField
label="Username or link"
name="content"
:ui="{ error: 'hidden' }"
>
<UInput
v-model="state.content"
name="content"
icon="i-heroicons-user"
placeholder="Your username or profile link"
class="w-full"
@input="updateQRCode"
/>
</UFormField>
<UFormField name="logo" :ui="{ error: 'hidden' }">
<template #label>
<UCheckbox
v-model="state.hasLogo"
class="mb-1.5"
label="Logo"
@change="updateQRCode"
/>
</template>
<USelectMenu
v-model="state.logo"
name="logo"
icon="i-heroicons-photo"
:items="unreadonly(LOGOS)"
:disabled="!state.hasLogo"
placeholder="Select logo"
class="w-full"
@change="updateQRCode"
>
<template #item-label="{ item }">
{{ capitalize(item) }}
</template>
<template v-if="state.logo">{{ capitalize(state.logo) }}</template>
</USelectMenu>
</UFormField>
<UFormField label="Format" name="format">
<USelectMenu
v-model="state.format"
name="format"
icon="i-heroicons-document-duplicate"
:items="unreadonly(IMAGE_FORMATS)"
placeholder="Select format"
class="w-full"
@change="updateQRCode"
>
<template #item-label="{ item }">
{{ upperCase(item) }}
</template>
{{ upperCase(state.format) }}
</USelectMenu>
</UFormField>
<UFormField label="API">
<template #hint>
<UButton
size="md"
color="neutral"
variant="link"
icon="i-heroicons-question-mark-circle"
@click="openApiModal"
/>
</template>
<UButtonGroup size="sm" class="w-full">
<UInput
v-model="apiUrl"
disabled
placeholder="Please fill all fields first"
class="w-full"
/>
<UButton
color="neutral"
variant="subtle"
:disabled="!isValidApiUrl"
:icon="copyUrlIcon"
@click="copyUrl"
/>
</UButtonGroup>
</UFormField>
<div class="flex space-x-4 pt-2">
<UButton
class="flex-1"
block
:icon="copyImageIcon"
size="md"
color="primary"
variant="solid"
:label="copyImageLabel"
:trailing="false"
:disabled="isQRCodeEmpty"
@click="copyQRCode"
/>
<UButton
class="flex-1"
block
icon="i-heroicons-arrow-down-tray"
size="md"
color="primary"
variant="solid"
label="Download"
:trailing="false"
:disabled="isQRCodeEmpty"
@click="downloadQRCode"
/>
</div>
</UForm>
</div>
</template>

10
app/components/body/QRCodePreview.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup lang="ts">
const app = useAppStore();
</script>
<template>
<img
:src="app.qrCode"
class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
>
</template>