refactor: restructure and improve quality
This commit is contained in:
232
app/components/AppBody.vue
Normal file
232
app/components/AppBody.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<script setup lang="ts">
|
||||
import { z } from "zod";
|
||||
import { LazyApiModal } from "#components";
|
||||
|
||||
const qrCode = ref("/default.webp");
|
||||
const form = useTemplateRef("form");
|
||||
const baseApiUrl = useBaseApiUrl();
|
||||
|
||||
const overlay = useOverlay();
|
||||
const apiModal = overlay.create(LazyApiModal);
|
||||
|
||||
const isQRCodeEmpty = computed(() => qrCode.value === "/default.webp");
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
hasLogo: z.boolean(),
|
||||
logo: z.enum(LOGOS).optional(),
|
||||
format: z.enum(IMAGE_FORMATS).default("png"),
|
||||
content: z
|
||||
.string()
|
||||
.optional()
|
||||
.transform((v) => v ?? ""),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (!data.content)
|
||||
ctx.addIssue({ code: "custom", message: "Required", path: ["content"] });
|
||||
if (data.hasLogo && !data.logo)
|
||||
ctx.addIssue({ code: "custom", message: "Required", path: ["logo"] });
|
||||
});
|
||||
|
||||
const formState = reactive<z.input<typeof formSchema>>({
|
||||
hasLogo: false,
|
||||
logo: undefined,
|
||||
format: IMAGE_FORMATS[0],
|
||||
content: undefined,
|
||||
});
|
||||
|
||||
const parsedFormState = computed(() => formSchema.safeParse(formState));
|
||||
|
||||
watch(formState, async () => {
|
||||
await nextTick();
|
||||
form.value?.validate({ silent: true });
|
||||
updateQRCode();
|
||||
});
|
||||
|
||||
const apiUrl = computed<string>((previous) => {
|
||||
if (!parsedFormState.value.success) return previous ?? "";
|
||||
|
||||
const { content, format, hasLogo, logo } = parsedFormState.value.data;
|
||||
const params = new URLSearchParams({
|
||||
...(hasLogo && logo && { logo }),
|
||||
format,
|
||||
content,
|
||||
});
|
||||
|
||||
return `${baseApiUrl}?${params}`;
|
||||
});
|
||||
|
||||
const { icon: copyUrlIcon, copy: copyUrl } = useCopyable(apiUrl);
|
||||
|
||||
const updateQRCode = async () => {
|
||||
if (!parsedFormState.value.success) return;
|
||||
|
||||
const { content, hasLogo, logo, format } = parsedFormState.value.data;
|
||||
const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
|
||||
const canvas = await renderQRCodeToCanvas(content, logoUrl);
|
||||
|
||||
qrCode.value = canvas.toDataURL(format);
|
||||
};
|
||||
|
||||
const downloadQRCode = () => {
|
||||
const link = document.createElement("a");
|
||||
link.href = qrCode.value;
|
||||
link.download = `qrcode.${formState.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 (!parsedFormState.value.success) return;
|
||||
|
||||
const { content, hasLogo, logo } = parsedFormState.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 flex-col sm:flex-row justify-between gap-4">
|
||||
<img
|
||||
:src="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"
|
||||
/>
|
||||
|
||||
<div class="flex-1 flex flex-col justify-center">
|
||||
<UForm
|
||||
ref="form"
|
||||
:schema="formSchema"
|
||||
:state="formState"
|
||||
:validate-on="['blur']"
|
||||
class="space-y-4"
|
||||
>
|
||||
<UFormField
|
||||
label="Username or link"
|
||||
name="content"
|
||||
:ui="{ error: 'hidden' }"
|
||||
>
|
||||
<UInput
|
||||
v-model="formState.content"
|
||||
icon="i-heroicons-user"
|
||||
placeholder="Your username or profile link"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="logo" :ui="{ error: 'hidden' }">
|
||||
<template #label>
|
||||
<UCheckbox
|
||||
v-model="formState.hasLogo"
|
||||
class="mb-1.5"
|
||||
label="Logo"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<USelectMenu
|
||||
v-model="formState.logo"
|
||||
icon="i-heroicons-photo"
|
||||
:items="unreadonly(LOGOS)"
|
||||
:disabled="!formState.hasLogo"
|
||||
placeholder="Select logo"
|
||||
class="w-full"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
{{ capitalize(item) }}
|
||||
</template>
|
||||
|
||||
<template v-if="formState.logo">{{
|
||||
capitalize(formState.logo)
|
||||
}}</template>
|
||||
</USelectMenu>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Format" name="format">
|
||||
<USelectMenu
|
||||
v-model="formState.format"
|
||||
icon="i-heroicons-document-duplicate"
|
||||
:items="unreadonly(IMAGE_FORMATS)"
|
||||
placeholder="Select format"
|
||||
class="w-full"
|
||||
>
|
||||
<template #item-label="{ item }">
|
||||
{{ upperCase(item) }}
|
||||
</template>
|
||||
|
||||
<span v-if="formState.format">{{
|
||||
upperCase(formState.format)
|
||||
}}</span>
|
||||
</USelectMenu>
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="API">
|
||||
<template #hint>
|
||||
<UButton
|
||||
size="md"
|
||||
color="neutral"
|
||||
variant="link"
|
||||
icon="i-heroicons-question-mark-circle"
|
||||
@click="apiModal.open()"
|
||||
/>
|
||||
</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="!apiUrl"
|
||||
: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>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user