refactor: restructure and improve quality
This commit is contained in:
@@ -20,7 +20,8 @@ useSeoMeta({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div role="main" class="flex min-h-[100vh] items-center justify-center">
|
||||
<UApp>
|
||||
<div role="main" class="flex min-h-screen items-center justify-center">
|
||||
<NuxtRouteAnnouncer />
|
||||
|
||||
<div
|
||||
@@ -30,4 +31,5 @@ useSeoMeta({
|
||||
<AppBody />
|
||||
</div>
|
||||
</div>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<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">
|
||||
<UModal title="API Documentation">
|
||||
<template #body>
|
||||
<div class="flex flex-col space-y-8">
|
||||
<p>
|
||||
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>
|
||||
@@ -1,3 +1,16 @@
|
||||
<script setup lang="ts">
|
||||
const colorMode = useColorMode();
|
||||
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === "dark";
|
||||
},
|
||||
set() {
|
||||
colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
|
||||
@@ -16,7 +29,16 @@
|
||||
to="https://github.com/pihkaal/simple-qr"
|
||||
/>
|
||||
|
||||
<ThemeSwitcher />
|
||||
<UButton
|
||||
:icon="
|
||||
isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'
|
||||
"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
aria-label="Theme"
|
||||
class="w-8 h-8"
|
||||
@click="isDark = !isDark"
|
||||
/>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
@@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col sm:flex-row justify-between gap-4">
|
||||
<QRCodePreview />
|
||||
|
||||
<QRCodeForm />
|
||||
</div>
|
||||
|
||||
<ApiModal />
|
||||
</template>
|
||||
@@ -1,229 +0,0 @@
|
||||
<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>
|
||||
@@ -1,10 +0,0 @@
|
||||
<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>
|
||||
@@ -1,23 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const colorMode = useColorMode();
|
||||
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === "dark";
|
||||
},
|
||||
set() {
|
||||
colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton
|
||||
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
aria-label="Theme"
|
||||
class="w-8 h-8"
|
||||
@click="isDark = !isDark"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,6 +0,0 @@
|
||||
export const useAppStore = defineStore("appStore", {
|
||||
state: () => ({
|
||||
qrCode: "/default.webp",
|
||||
apiModalOpened: false,
|
||||
}),
|
||||
});
|
||||
@@ -2,7 +2,7 @@
|
||||
export default defineNuxtConfig({
|
||||
compatibilityDate: "2024-11-01",
|
||||
devtools: { enabled: true },
|
||||
modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt"],
|
||||
modules: ["@nuxt/eslint", "@nuxt/ui"],
|
||||
css: ["~/assets/css/main.css"],
|
||||
components: [
|
||||
{
|
||||
|
||||
@@ -26,11 +26,9 @@
|
||||
"@iconify-json/uil": "^1.2.3",
|
||||
"@nuxt/eslint": "^1.15.1",
|
||||
"@nuxt/ui": "^3.3.7",
|
||||
"@pinia/nuxt": "^0.11.3",
|
||||
"@types/qrcode": "^1.5.6",
|
||||
"eslint": "^9.39.1",
|
||||
"nuxt": "^4.3.1",
|
||||
"pinia": "^3.0.4",
|
||||
"prettier": "^3.8.1",
|
||||
"tailwindcss": "^4.2.0",
|
||||
"typescript": "^5.6.3"
|
||||
|
||||
9576
pnpm-lock.yaml
generated
9576
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,21 +1,10 @@
|
||||
import { resolve } from "path";
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const query = getQuery(event);
|
||||
|
||||
const parsed = settingsSchema.safeParse(query);
|
||||
if (!parsed.success) {
|
||||
return createError({
|
||||
status: 400,
|
||||
data: {
|
||||
errors: Object.fromEntries(
|
||||
parsed.error.issues.map((x) => [x.path.join("."), x.message]),
|
||||
),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const { format, logo, content } = parsed.data;
|
||||
const { format, logo, content } = await getValidatedQuery(
|
||||
event,
|
||||
settingsSchema.parse,
|
||||
);
|
||||
|
||||
const logoUrl = logo ? resolve("public", `logos/${logo}.png`) : undefined;
|
||||
const canvas = await renderQRCodeToCanvas(content, logoUrl);
|
||||
|
||||
Reference in New Issue
Block a user