pihkaal/simple-qr
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add title

Browse Source
This commit is contained in:
Pihkaal
2024-10-02 16:41:04 +02:00
parent d0f80f5d97
commit cf9c5f02f6
1 changed files with 47 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
app.vue
View File

@@ -99,103 +99,61 @@ const upperCase = (str: string) => str.toUpperCase();
<NuxtRouteAnnouncer />
<canvas ref="canvas" class="hidden" />
<div
class="w-full h-full max-w-[850px] max-h-[375px] flex justify-between space-x-10"
>
<img :src="qrCodeSrc" class="h-full aspect-square" />
<div class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-3">
<h1 class="text-4xl font-bold text-gray-700 dark:text-gray-200 border-b border-gray-700">
Simple QRCode Generator
</h1>
<div class="flex justify-between space-x-8">
<img :src="qrCodeSrc" class="max-h-[375px] aspect-square" />
<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"
@input="updateQRCode"
>
<UInput
v-model="state.content"
placeholder="Your username or profile link"
/>
</UFormGroup>
<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" @input="updateQRCode">
<UInput v-model="state.content" placeholder="Your username or profile link" />
</UFormGroup>
<UFormGroup label="Logo" name="logo">
<USelectMenu
v-model="state.logo"
:options="LOGOS"
placeholder="Select logo"
searchable
@change="updateQRCode"
>
<template #label>
<span v-if="state.logo">{{ capitalize(state.logo) }}</span>
</template>
<UFormGroup label="Logo" name="logo">
<USelectMenu v-model="state.logo" :options="LOGOS" placeholder="Select logo" searchable
@change="updateQRCode">
<template #label>
<span v-if="state.logo">{{ capitalize(state.logo) }}</span>
</template>
<template #option="props">
<span>{{ capitalize(props.option) }}</span>
</template>
</USelectMenu>
</UFormGroup>
<template #option="props">
<span>{{ capitalize(props.option) }}</span>
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup label="Format" name="format">
<USelectMenu
v-model="state.format"
:options="IMAGE_FORMATS"
placeholder="Select format"
@change="updateQRCode"
>
<template #label>
<span v-if="state.format">{{ upperCase(state.format) }}</span>
</template>
<UFormGroup label="Format" name="format">
<USelectMenu v-model="state.format" :options="IMAGE_FORMATS" placeholder="Select format"
@change="updateQRCode">
<template #label>
<span v-if="state.format">{{ upperCase(state.format) }}</span>
</template>
<template #option="props">
<span>{{ upperCase(props.option) }}</span>
</template>
</USelectMenu>
</UFormGroup>
<template #option="props">
<span>{{ upperCase(props.option) }}</span>
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup label="API">
<UButtonGroup size="sm" orientation="horizontal" class="w-full">
<UInput
v-model="apiUrl"
disabled
placeholder="Please fill all fields first"
class="w-full"
/>
<UButton
:disabled="isQRCodeEmpty"
:icon="copyUrlIcon"
@click="copyUrl"
/>
</UButtonGroup>
</UFormGroup>
<UFormGroup label="API">
<UButtonGroup size="sm" orientation="horizontal" class="w-full">
<UInput v-model="apiUrl" disabled placeholder="Please fill all fields first" class="w-full" />
<UButton :disabled="isQRCodeEmpty" :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"
/>
<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>
<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>
</div>