refactor: split into component and use global app store
This commit is contained in:
Pihkaal
387
app.vue
387
app.vue
@@ -3,135 +3,6 @@ useSeoMeta({
|
|||||||
title: "Simple QRCode Generator",
|
title: "Simple QRCode Generator",
|
||||||
description: "Simple, bullshit-free QR code generator.",
|
description: "Simple, bullshit-free QR code generator.",
|
||||||
});
|
});
|
||||||
|
|
||||||
import { renderQRCodeToCanvas } from "@/utils/renderer";
|
|
||||||
import { IMAGE_FORMATS, LOGOS } from "@/utils/settings";
|
|
||||||
|
|
||||||
const form = ref(null);
|
|
||||||
const qrCode = ref(undefined);
|
|
||||||
|
|
||||||
const copyUrlIcon = ref("i-heroicons-clipboard-document");
|
|
||||||
const copyBaseApiUrlIcon = ref("i-heroicons-clipboard-document");
|
|
||||||
const copyImageIcon = ref("i-heroicons-clipboard-document");
|
|
||||||
const copyImageLabel = ref("Copy");
|
|
||||||
|
|
||||||
const isQRCodeEmpty = computed(() => !qrCode.value);
|
|
||||||
const qrCodeSrc = computed(() => qrCode.value ?? "/default.webp");
|
|
||||||
|
|
||||||
const isApiModelOpen = ref(false);
|
|
||||||
|
|
||||||
const state = reactive({
|
|
||||||
hasLogo: false,
|
|
||||||
logo: undefined,
|
|
||||||
format: IMAGE_FORMATS[0],
|
|
||||||
content: undefined,
|
|
||||||
});
|
|
||||||
|
|
||||||
const firstBlured = ref(false);
|
|
||||||
|
|
||||||
const stateErrors = computed(() => ({
|
|
||||||
content: firstBlured.value && !state.content,
|
|
||||||
logo: firstBlured.value && state.hasLogo && !state.logo,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const isValidState = computed(
|
|
||||||
() =>
|
|
||||||
state.content &&
|
|
||||||
((state.hasLogo && state.logo) || !state.hasLogo) &&
|
|
||||||
state.format,
|
|
||||||
);
|
|
||||||
|
|
||||||
const BASE_API_URL = "https://simple-qr.com/api";
|
|
||||||
|
|
||||||
const apiUrl = computed(() => {
|
|
||||||
if (!isValidState.value) return "";
|
|
||||||
|
|
||||||
const params = new URLSearchParams({
|
|
||||||
...(state.hasLogo && { logo: state.logo }),
|
|
||||||
format: state.format,
|
|
||||||
content: state.content,
|
|
||||||
});
|
|
||||||
|
|
||||||
return `${BASE_API_URL}?${params}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const updateQRCode = async () => {
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
if (!isValidState.value) return;
|
|
||||||
|
|
||||||
const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
|
|
||||||
const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
|
|
||||||
|
|
||||||
qrCode.value = canvas.toDataURL(`image/${state.format}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyUrl = async () => {
|
|
||||||
if (!isValidState.value) return;
|
|
||||||
|
|
||||||
await navigator.clipboard.writeText(apiUrl.value);
|
|
||||||
|
|
||||||
copyUrlIcon.value = "i-heroicons-clipboard-document-check";
|
|
||||||
setTimeout(() => {
|
|
||||||
copyUrlIcon.value = "i-heroicons-clipboard-document";
|
|
||||||
}, 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 link = document.createElement("a");
|
|
||||||
link.href = qrCode.value;
|
|
||||||
link.download = `qrcode.${state.format}`;
|
|
||||||
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyQRCode = async () => {
|
|
||||||
if (isQRCodeEmpty.value) return;
|
|
||||||
|
|
||||||
const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
|
|
||||||
const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
|
|
||||||
|
|
||||||
const qrCode = canvas.toDataURL(`image/png`);
|
|
||||||
|
|
||||||
const blob = await (await fetch(qrCode)).blob();
|
|
||||||
const item = new ClipboardItem({ "image/png": blob });
|
|
||||||
await navigator.clipboard.write([item]);
|
|
||||||
|
|
||||||
copyImageIcon.value = "i-heroicons-clipboard-document-check";
|
|
||||||
copyImageLabel.value = "Copied!";
|
|
||||||
setTimeout(() => {
|
|
||||||
copyImageIcon.value = "i-heroicons-clipboard-document";
|
|
||||||
copyImageLabel.value = "Copy";
|
|
||||||
}, 3000);
|
|
||||||
};
|
|
||||||
|
|
||||||
const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
|
|
||||||
|
|
||||||
const upperCase = (str: string) => str.toUpperCase();
|
|
||||||
|
|
||||||
const arrayToUnion = (array: string[]) =>
|
|
||||||
array.map((x) => `"${x}"`).join(" | ");
|
|
||||||
|
|
||||||
const colorMode = useColorMode();
|
|
||||||
const isDark = computed({
|
|
||||||
get() {
|
|
||||||
return colorMode.value === "dark";
|
|
||||||
},
|
|
||||||
set() {
|
|
||||||
colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -141,262 +12,8 @@ const isDark = computed({
|
|||||||
<div
|
<div
|
||||||
class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-4"
|
class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-4"
|
||||||
>
|
>
|
||||||
<div
|
<AppHeader />
|
||||||
class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
|
<AppBody />
|
||||||
>
|
|
||||||
<h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
|
|
||||||
|
|
||||||
<div class="flex gap-x-1">
|
|
||||||
<UButton
|
|
||||||
color="gray"
|
|
||||||
variant="ghost"
|
|
||||||
icon="i-uil-github"
|
|
||||||
aria-label="Github repo"
|
|
||||||
class="w-8 h-8"
|
|
||||||
target="_blank"
|
|
||||||
to="https://github.com/pihkaal/simple-qr"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ClientOnly>
|
|
||||||
<UButton
|
|
||||||
:icon="
|
|
||||||
isDark
|
|
||||||
? 'i-heroicons-moon-20-solid'
|
|
||||||
: 'i-heroicons-sun-20-solid'
|
|
||||||
"
|
|
||||||
color="gray"
|
|
||||||
variant="ghost"
|
|
||||||
aria-label="Theme"
|
|
||||||
class="w-8 h-8"
|
|
||||||
@click="isDark = !isDark"
|
|
||||||
/>
|
|
||||||
<template #fallback>
|
|
||||||
<div class="w-8 h-8" />
|
|
||||||
</template>
|
|
||||||
</ClientOnly>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex justify-between space-x-8">
|
|
||||||
<img
|
|
||||||
:src="qrCodeSrc"
|
|
||||||
class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="flex-1 flex flex-col justify-center">
|
|
||||||
<UForm ref="form" :state="state" class="space-y-4">
|
|
||||||
<UFormGroup
|
|
||||||
label="Username or link"
|
|
||||||
name="content"
|
|
||||||
:error="stateErrors.content"
|
|
||||||
>
|
|
||||||
<UInput
|
|
||||||
v-model="state.content"
|
|
||||||
icon="i-heroicons-user"
|
|
||||||
placeholder="Your username or profile link"
|
|
||||||
@input="updateQRCode"
|
|
||||||
@blur="firstBlured = true"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
|
|
||||||
<UFormGroup name="logo" :error="stateErrors.logo">
|
|
||||||
<template #label>
|
|
||||||
<UCheckbox
|
|
||||||
v-model="state.hasLogo"
|
|
||||||
class="mb-1.5"
|
|
||||||
label="Logo"
|
|
||||||
@change="updateQRCode"
|
|
||||||
@blur="firstBlured = true"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<USelectMenu
|
|
||||||
v-model="state.logo"
|
|
||||||
icon="i-heroicons-photo"
|
|
||||||
:options="LOGOS"
|
|
||||||
:disabled="!state.hasLogo"
|
|
||||||
placeholder="Select logo"
|
|
||||||
searchable
|
|
||||||
clear-search-on-close
|
|
||||||
@change="updateQRCode"
|
|
||||||
@blur="firstBlured = true"
|
|
||||||
>
|
|
||||||
<template #label>
|
|
||||||
<span v-if="state.logo">{{ capitalize(state.logo) }}</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #option="props">
|
|
||||||
<span>{{ capitalize(props.option) }}</span>
|
|
||||||
</template>
|
|
||||||
</USelectMenu>
|
|
||||||
</UFormGroup>
|
|
||||||
|
|
||||||
<UFormGroup label="Format" name="format">
|
|
||||||
<USelectMenu
|
|
||||||
v-model="state.format"
|
|
||||||
icon="i-heroicons-document-duplicate"
|
|
||||||
:options="IMAGE_FORMATS"
|
|
||||||
placeholder="Select format"
|
|
||||||
@change="updateQRCode"
|
|
||||||
@blur="firstBlured = true"
|
|
||||||
>
|
|
||||||
<template #label>
|
|
||||||
<span v-if="state.format">{{ upperCase(state.format) }}</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #option="props">
|
|
||||||
<span>{{ upperCase(props.option) }}</span>
|
|
||||||
</template>
|
|
||||||
</USelectMenu>
|
|
||||||
</UFormGroup>
|
|
||||||
|
|
||||||
<UFormGroup label="API">
|
|
||||||
<template #hint>
|
|
||||||
<UButton
|
|
||||||
size="md"
|
|
||||||
color="gray"
|
|
||||||
variant="link"
|
|
||||||
icon="i-heroicons-question-mark-circle"
|
|
||||||
@click="isApiModelOpen = true"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<UButtonGroup size="sm" orientation="horizontal" class="w-full">
|
|
||||||
<UInput
|
|
||||||
v-model="apiUrl"
|
|
||||||
disabled
|
|
||||||
placeholder="Please fill all fields first"
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
<UButton
|
|
||||||
color="gray"
|
|
||||||
:disabled="!isValidState"
|
|
||||||
:icon="copyUrlIcon"
|
|
||||||
@click="copyUrl"
|
|
||||||
/>
|
|
||||||
</UButtonGroup>
|
|
||||||
</UFormGroup>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UModal v-model="isApiModelOpen">
|
|
||||||
<UCard
|
|
||||||
:ui="{
|
|
||||||
ring: '',
|
|
||||||
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<template #header>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3
|
|
||||||
class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
|
|
||||||
>
|
|
||||||
API Documentation
|
|
||||||
</h3>
|
|
||||||
<UButton
|
|
||||||
color="gray"
|
|
||||||
variant="ghost"
|
|
||||||
icon="i-heroicons-x-mark-20-solid"
|
|
||||||
class="-my-1"
|
|
||||||
@click="isApiModelOpen = false"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<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="sm" orientation="horizontal" class="w-full">
|
|
||||||
<UInput
|
|
||||||
:model-value="BASE_API_URL"
|
|
||||||
size="sm"
|
|
||||||
class="w-full"
|
|
||||||
disabled
|
|
||||||
:ui="{ base: '!ps-12 !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-sm"
|
|
||||||
>GET</span
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</UInput>
|
|
||||||
<UButton
|
|
||||||
color="gray"
|
|
||||||
:icon="copyBaseApiUrlIcon"
|
|
||||||
@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 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="pt-4 flex 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="pt-4 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>
|
|
||||||
</UCard>
|
|
||||||
</UModal>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
103
components/body/ApiModal.vue
Normal file
103
components/body/ApiModal.vue
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const app = useAppStore();
|
||||||
|
|
||||||
|
const closeModal = () => {
|
||||||
|
app.apiModalOpened = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const baseApiUrl = useBaseApiUrl();
|
||||||
|
const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UModal v-model="app.apiModalOpened">
|
||||||
|
<UCard
|
||||||
|
:ui="{
|
||||||
|
ring: '',
|
||||||
|
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<h3
|
||||||
|
class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
API Documentation
|
||||||
|
</h3>
|
||||||
|
<UButton
|
||||||
|
color="gray"
|
||||||
|
variant="ghost"
|
||||||
|
icon="i-heroicons-x-mark-20-solid"
|
||||||
|
class="-my-1"
|
||||||
|
@click="closeModal"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<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="sm" orientation="horizontal" class="w-full">
|
||||||
|
<UInput
|
||||||
|
model-value="https://simple-qr.com/api"
|
||||||
|
size="sm"
|
||||||
|
class="w-full"
|
||||||
|
disabled
|
||||||
|
:ui="{ base: '!ps-12 !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-sm"
|
||||||
|
>GET</span
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</UInput>
|
||||||
|
<UButton
|
||||||
|
color="gray"
|
||||||
|
: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 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="pt-4 flex 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="pt-4 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>
|
||||||
|
</UCard>
|
||||||
|
</UModal>
|
||||||
|
</template>
|
||||||
9
components/body/AppBody.vue
Normal file
9
components/body/AppBody.vue
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex justify-between space-x-8">
|
||||||
|
<QRCodePreview />
|
||||||
|
|
||||||
|
<QRCodeForm />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ApiModal />
|
||||||
|
</template>
|
||||||
209
components/body/QRCodeForm.vue
Normal file
209
components/body/QRCodeForm.vue
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const app = useAppStore();
|
||||||
|
const baseApiUrl = useBaseApiUrl();
|
||||||
|
|
||||||
|
const isQRCodeEmpty = computed(() => app.qrCode === "/default.webp");
|
||||||
|
|
||||||
|
const firstBlured = ref(false);
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
hasLogo: false,
|
||||||
|
logo: undefined,
|
||||||
|
format: IMAGE_FORMATS[0],
|
||||||
|
content: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
const stateErrors = computed(() => ({
|
||||||
|
content: firstBlured.value && !state.content,
|
||||||
|
logo: firstBlured.value && state.hasLogo && !state.logo,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const isValidState = computed(
|
||||||
|
() =>
|
||||||
|
((state.hasLogo && state.logo) || !state.hasLogo) &&
|
||||||
|
state.content &&
|
||||||
|
state.format,
|
||||||
|
);
|
||||||
|
|
||||||
|
const apiUrl = computed((previous) => {
|
||||||
|
if (!isValidState.value) return previous;
|
||||||
|
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
...(state.hasLogo && { logo: state.logo }),
|
||||||
|
format: state.format,
|
||||||
|
content: state.content,
|
||||||
|
});
|
||||||
|
|
||||||
|
return `${baseApiUrl}?${params}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const { icon: copyUrlIcon, copy: copyUrl } = useCopyable(apiUrl);
|
||||||
|
|
||||||
|
const openApiModal = () => {
|
||||||
|
app.apiModalOpened = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateQRCode = async () => {
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
if (!isValidState.value) return;
|
||||||
|
|
||||||
|
const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
|
||||||
|
const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
|
||||||
|
|
||||||
|
app.qrCode = canvas.toDataURL(`image/${state.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;
|
||||||
|
|
||||||
|
const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
|
||||||
|
const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
|
||||||
|
|
||||||
|
const qrCode = canvas.toDataURL(`image/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 ref="form" :state="state" class="space-y-4">
|
||||||
|
<UFormGroup
|
||||||
|
label="Username or link"
|
||||||
|
name="content"
|
||||||
|
:error="stateErrors.content"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="state.content"
|
||||||
|
icon="i-heroicons-user"
|
||||||
|
placeholder="Your username or profile link"
|
||||||
|
@input="updateQRCode"
|
||||||
|
@blur="firstBlured = true"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup name="logo" :error="stateErrors.logo">
|
||||||
|
<template #label>
|
||||||
|
<UCheckbox
|
||||||
|
v-model="state.hasLogo"
|
||||||
|
class="mb-1.5"
|
||||||
|
label="Logo"
|
||||||
|
@change="updateQRCode"
|
||||||
|
@blur="firstBlured = true"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<USelectMenu
|
||||||
|
v-model="state.logo"
|
||||||
|
icon="i-heroicons-photo"
|
||||||
|
:options="LOGOS"
|
||||||
|
:disabled="!state.hasLogo"
|
||||||
|
placeholder="Select logo"
|
||||||
|
searchable
|
||||||
|
clear-search-on-close
|
||||||
|
@change="updateQRCode"
|
||||||
|
@blur="firstBlured = true"
|
||||||
|
>
|
||||||
|
<template #label>
|
||||||
|
<span v-if="state.logo">{{ capitalize(state.logo) }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #option="props">
|
||||||
|
<span>{{ capitalize(props.option) }}</span>
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup label="Format" name="format">
|
||||||
|
<USelectMenu
|
||||||
|
v-model="state.format"
|
||||||
|
icon="i-heroicons-document-duplicate"
|
||||||
|
:options="IMAGE_FORMATS"
|
||||||
|
placeholder="Select format"
|
||||||
|
@change="updateQRCode"
|
||||||
|
@blur="firstBlured = true"
|
||||||
|
>
|
||||||
|
<template #label>
|
||||||
|
<span v-if="state.format">{{ upperCase(state.format) }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #option="props">
|
||||||
|
<span>{{ upperCase(props.option) }}</span>
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup label="API">
|
||||||
|
<template #hint>
|
||||||
|
<UButton
|
||||||
|
size="md"
|
||||||
|
color="gray"
|
||||||
|
variant="link"
|
||||||
|
icon="i-heroicons-question-mark-circle"
|
||||||
|
@click="openApiModal"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<UButtonGroup size="sm" orientation="horizontal" class="w-full">
|
||||||
|
<UInput
|
||||||
|
v-model="apiUrl"
|
||||||
|
disabled
|
||||||
|
placeholder="Please fill all fields first"
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
<UButton
|
||||||
|
color="gray"
|
||||||
|
:disabled="!isValidState"
|
||||||
|
:icon="copyUrlIcon"
|
||||||
|
@click="copyUrl"
|
||||||
|
/>
|
||||||
|
</UButtonGroup>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<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
components/body/QRCodePreview.vue
Normal file
10
components/body/QRCodePreview.vue
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const app = useAppStore();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<img
|
||||||
|
:src="app.qrCode"
|
||||||
|
class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
21
components/header/AppHeader.vue
Normal file
21
components/header/AppHeader.vue
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
|
||||||
|
>
|
||||||
|
<h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
|
||||||
|
|
||||||
|
<div class="flex gap-x-1">
|
||||||
|
<UButton
|
||||||
|
color="gray"
|
||||||
|
variant="ghost"
|
||||||
|
icon="i-uil-github"
|
||||||
|
aria-label="Github repo"
|
||||||
|
class="w-8 h-8"
|
||||||
|
target="_blank"
|
||||||
|
to="https://github.com/pihkaal/simple-qr"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ThemeSwitcher />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
28
components/header/ThemeSwitcher.vue
Normal file
28
components/header/ThemeSwitcher.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<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>
|
||||||
|
<ClientOnly>
|
||||||
|
<UButton
|
||||||
|
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
||||||
|
color="gray"
|
||||||
|
variant="ghost"
|
||||||
|
aria-label="Theme"
|
||||||
|
class="w-8 h-8"
|
||||||
|
@click="isDark = !isDark"
|
||||||
|
/>
|
||||||
|
<template #fallback>
|
||||||
|
<div class="w-8 h-8" />
|
||||||
|
</template>
|
||||||
|
</ClientOnly>
|
||||||
|
</template>
|
||||||
1
composables/useBaseUrl.ts
Normal file
1
composables/useBaseUrl.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export const useBaseApiUrl = () => `${useRequestURL().origin}/api`;
|
||||||
25
composables/useCopyable.ts
Normal file
25
composables/useCopyable.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
export const useCopyable = (
|
||||||
|
valueOrCallback: string | Ref<string> | (() => PromiseLike<string>),
|
||||||
|
) => {
|
||||||
|
const icon = ref("i-heroicons-clipboard-document");
|
||||||
|
const label = ref("Copy");
|
||||||
|
|
||||||
|
const copy = async () => {
|
||||||
|
if (typeof valueOrCallback === "function") {
|
||||||
|
await valueOrCallback();
|
||||||
|
} else {
|
||||||
|
const value = unref(valueOrCallback);
|
||||||
|
await navigator.clipboard.writeText(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
icon.value = "i-heroicons-clipboard-document-check";
|
||||||
|
label.value = "Copied!";
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
icon.value = "i-heroicons-clipboard-document";
|
||||||
|
label.value = "Copy";
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { icon, copy, label };
|
||||||
|
};
|
||||||
@@ -2,5 +2,11 @@
|
|||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
compatibilityDate: "2024-04-03",
|
compatibilityDate: "2024-04-03",
|
||||||
devtools: { enabled: true },
|
devtools: { enabled: true },
|
||||||
modules: ["@nuxt/eslint", "@nuxt/ui"],
|
modules: ["@nuxt/eslint", "@nuxt/ui", "@pinia/nuxt"],
|
||||||
|
components: [
|
||||||
|
{
|
||||||
|
path: "~/components",
|
||||||
|
pathPrefix: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -18,6 +18,7 @@
|
|||||||
"@iconify-json/uil": "^1.2.1",
|
"@iconify-json/uil": "^1.2.1",
|
||||||
"@nuxt/eslint": "^0.5.7",
|
"@nuxt/eslint": "^0.5.7",
|
||||||
"@nuxt/ui": "^2.18.6",
|
"@nuxt/ui": "^2.18.6",
|
||||||
|
"@pinia/nuxt": "^0.5.5",
|
||||||
"canvas": "^2.11.2",
|
"canvas": "^2.11.2",
|
||||||
"nuxt": "^3.13.0",
|
"nuxt": "^3.13.0",
|
||||||
"qrcode": "^1.5.4",
|
"qrcode": "^1.5.4",
|
||||||
|
|||||||
45
pnpm-lock.yaml
generated
45
pnpm-lock.yaml
generated
@@ -19,6 +19,9 @@ importers:
|
|||||||
"@nuxt/ui":
|
"@nuxt/ui":
|
||||||
specifier: ^2.18.6
|
specifier: ^2.18.6
|
||||||
version: 2.18.6(magicast@0.3.5)(qrcode@1.5.4)(rollup@4.22.5)(vite@5.4.8(@types/node@22.7.4)(terser@5.34.1))(vue@3.5.10(typescript@5.5.4))
|
version: 2.18.6(magicast@0.3.5)(qrcode@1.5.4)(rollup@4.22.5)(vite@5.4.8(@types/node@22.7.4)(terser@5.34.1))(vue@3.5.10(typescript@5.5.4))
|
||||||
|
"@pinia/nuxt":
|
||||||
|
specifier: ^0.5.5
|
||||||
|
version: 0.5.5(magicast@0.3.5)(rollup@4.22.5)(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))
|
||||||
canvas:
|
canvas:
|
||||||
specifier: ^2.11.2
|
specifier: ^2.11.2
|
||||||
version: 2.11.2
|
version: 2.11.2
|
||||||
@@ -1700,6 +1703,12 @@ packages:
|
|||||||
}
|
}
|
||||||
engines: { node: ">= 10.0.0" }
|
engines: { node: ">= 10.0.0" }
|
||||||
|
|
||||||
|
"@pinia/nuxt@0.5.5":
|
||||||
|
resolution:
|
||||||
|
{
|
||||||
|
integrity: sha512-wjxS7YqIesh4OLK+qE3ZjhdOJ5pYZQ+VlEmZNtTwzQn1Kavei/khovx7mzXVXNA/mvSPXVhb9xBzhyS3XMURtw==,
|
||||||
|
}
|
||||||
|
|
||||||
"@pkgjs/parseargs@0.11.0":
|
"@pkgjs/parseargs@0.11.0":
|
||||||
resolution:
|
resolution:
|
||||||
{
|
{
|
||||||
@@ -5676,6 +5685,21 @@ packages:
|
|||||||
}
|
}
|
||||||
engines: { node: ">=0.10.0" }
|
engines: { node: ">=0.10.0" }
|
||||||
|
|
||||||
|
pinia@2.2.4:
|
||||||
|
resolution:
|
||||||
|
{
|
||||||
|
integrity: sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==,
|
||||||
|
}
|
||||||
|
peerDependencies:
|
||||||
|
"@vue/composition-api": ^1.4.0
|
||||||
|
typescript: ">=4.4.4"
|
||||||
|
vue: ^2.6.14 || ^3.3.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
"@vue/composition-api":
|
||||||
|
optional: true
|
||||||
|
typescript:
|
||||||
|
optional: true
|
||||||
|
|
||||||
pirates@4.0.6:
|
pirates@4.0.6:
|
||||||
resolution:
|
resolution:
|
||||||
{
|
{
|
||||||
@@ -8782,6 +8806,19 @@ snapshots:
|
|||||||
"@parcel/watcher-win32-ia32": 2.4.1
|
"@parcel/watcher-win32-ia32": 2.4.1
|
||||||
"@parcel/watcher-win32-x64": 2.4.1
|
"@parcel/watcher-win32-x64": 2.4.1
|
||||||
|
|
||||||
|
"@pinia/nuxt@0.5.5(magicast@0.3.5)(rollup@4.22.5)(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))":
|
||||||
|
dependencies:
|
||||||
|
"@nuxt/kit": 3.13.2(magicast@0.3.5)(rollup@4.22.5)
|
||||||
|
pinia: 2.2.4(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4))
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- "@vue/composition-api"
|
||||||
|
- magicast
|
||||||
|
- rollup
|
||||||
|
- supports-color
|
||||||
|
- typescript
|
||||||
|
- vue
|
||||||
|
- webpack-sources
|
||||||
|
|
||||||
"@pkgjs/parseargs@0.11.0":
|
"@pkgjs/parseargs@0.11.0":
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
@@ -11384,6 +11421,14 @@ snapshots:
|
|||||||
|
|
||||||
pify@2.3.0: {}
|
pify@2.3.0: {}
|
||||||
|
|
||||||
|
pinia@2.2.4(typescript@5.5.4)(vue@3.5.10(typescript@5.5.4)):
|
||||||
|
dependencies:
|
||||||
|
"@vue/devtools-api": 6.6.4
|
||||||
|
vue: 3.5.10(typescript@5.5.4)
|
||||||
|
vue-demi: 0.14.10(vue@3.5.10(typescript@5.5.4))
|
||||||
|
optionalDependencies:
|
||||||
|
typescript: 5.5.4
|
||||||
|
|
||||||
pirates@4.0.6: {}
|
pirates@4.0.6: {}
|
||||||
|
|
||||||
pkg-types@1.2.0:
|
pkg-types@1.2.0:
|
||||||
|
|||||||
6
stores/app.ts
Normal file
6
stores/app.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export const useAppStore = defineStore("appStore", {
|
||||||
|
state: () => ({
|
||||||
|
qrCode: "/default.webp",
|
||||||
|
apiModalOpened: false,
|
||||||
|
}),
|
||||||
|
});
|
||||||
7
utils/formatting.ts
Normal file
7
utils/formatting.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export const capitalize = (str: string) =>
|
||||||
|
str.charAt(0).toUpperCase() + str.slice(1);
|
||||||
|
|
||||||
|
export const upperCase = (str: string) => str.toUpperCase();
|
||||||
|
|
||||||
|
export const arrayToUnion = (array: string[]) =>
|
||||||
|
array.map((x) => `"${x}"`).join(" | ");
|
||||||
Reference in New Issue
Block a user