refactor: restructure and improve quality
This commit is contained in:
18
app/app.vue
18
app/app.vue
@@ -20,14 +20,16 @@ useSeoMeta({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div role="main" class="flex min-h-[100vh] items-center justify-center">
|
<UApp>
|
||||||
<NuxtRouteAnnouncer />
|
<div role="main" class="flex min-h-screen items-center justify-center">
|
||||||
|
<NuxtRouteAnnouncer />
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
|
class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
|
||||||
>
|
>
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
<AppBody />
|
<AppBody />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</UApp>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,12 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const app = useAppStore();
|
|
||||||
|
|
||||||
const baseApiUrl = useBaseApiUrl();
|
const baseApiUrl = useBaseApiUrl();
|
||||||
const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
|
const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<UModal v-model:open="app.apiModalOpened" title="API Documentation">
|
<UModal title="API Documentation">
|
||||||
<template #body>
|
<template #body>
|
||||||
<div class="flex flex-col space-y-8">
|
<div class="flex flex-col space-y-8">
|
||||||
<p>
|
<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>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
|
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"
|
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>
|
</div>
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
</div>
|
</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({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: "2024-11-01",
|
compatibilityDate: "2024-11-01",
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt"],
|
modules: ["@nuxt/eslint", "@nuxt/ui"],
|
||||||
css: ["~/assets/css/main.css"],
|
css: ["~/assets/css/main.css"],
|
||||||
components: [
|
components: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -26,11 +26,9 @@
|
|||||||
"@iconify-json/uil": "^1.2.3",
|
"@iconify-json/uil": "^1.2.3",
|
||||||
"@nuxt/eslint": "^1.15.1",
|
"@nuxt/eslint": "^1.15.1",
|
||||||
"@nuxt/ui": "^3.3.7",
|
"@nuxt/ui": "^3.3.7",
|
||||||
"@pinia/nuxt": "^0.11.3",
|
|
||||||
"@types/qrcode": "^1.5.6",
|
"@types/qrcode": "^1.5.6",
|
||||||
"eslint": "^9.39.1",
|
"eslint": "^9.39.1",
|
||||||
"nuxt": "^4.3.1",
|
"nuxt": "^4.3.1",
|
||||||
"pinia": "^3.0.4",
|
|
||||||
"prettier": "^3.8.1",
|
"prettier": "^3.8.1",
|
||||||
"tailwindcss": "^4.2.0",
|
"tailwindcss": "^4.2.0",
|
||||||
"typescript": "^5.6.3"
|
"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";
|
import { resolve } from "path";
|
||||||
|
|
||||||
export default defineEventHandler(async (event) => {
|
export default defineEventHandler(async (event) => {
|
||||||
const query = getQuery(event);
|
const { format, logo, content } = await getValidatedQuery(
|
||||||
|
event,
|
||||||
const parsed = settingsSchema.safeParse(query);
|
settingsSchema.parse,
|
||||||
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 logoUrl = logo ? resolve("public", `logos/${logo}.png`) : undefined;
|
const logoUrl = logo ? resolve("public", `logos/${logo}.png`) : undefined;
|
||||||
const canvas = await renderQRCodeToCanvas(content, logoUrl);
|
const canvas = await renderQRCodeToCanvas(content, logoUrl);
|
||||||
|
|||||||
Reference in New Issue
Block a user