refactor: split into component and use global app store
This commit is contained in:
Pihkaal
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>
|
||||
Reference in New Issue
Block a user