78 lines
2.6 KiB
Vue
78 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
const baseApiUrl = useBaseApiUrl();
|
|
const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
|
|
const { data: logos } = await useFetch<string[]>("/api/logos");
|
|
</script>
|
|
|
|
<template>
|
|
<UModal title="API Documentation">
|
|
<template #body>
|
|
<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="md" class="w-full">
|
|
<UInput
|
|
:model-value="baseApiUrl"
|
|
size="md"
|
|
class="w-full"
|
|
disabled
|
|
:ui="{ base: '!ps-12.5 !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-xs font-mono"
|
|
><span class="translate-y-px inline-block">GET</span></span
|
|
>
|
|
</template>
|
|
</UInput>
|
|
<UButton
|
|
color="neutral"
|
|
variant="subtle"
|
|
: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 pb-4 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="flex pb-4 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="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>
|
|
</template>
|
|
</UModal>
|
|
</template>
|