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 /> <NuxtRouteAnnouncer />
<canvas ref="canvas" class="hidden" /> <canvas ref="canvas" class="hidden" />
<div <div class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-3">
class="w-full h-full max-w-[850px] max-h-[375px] flex justify-between space-x-10" <h1 class="text-4xl font-bold text-gray-700 dark:text-gray-200 border-b border-gray-700">
> Simple QRCode Generator
<img :src="qrCodeSrc" class="h-full aspect-square" /> </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"> <div class="flex-1 flex flex-col justify-center">
<UForm ref="form" :state="state" class="space-y-4"> <UForm ref="form" :state="state" class="space-y-4">
<UFormGroup <UFormGroup label="Username or link" name="content" @input="updateQRCode">
label="Username or link" <UInput v-model="state.content" placeholder="Your username or profile link" />
name="content" </UFormGroup>
@input="updateQRCode"
>
<UInput
v-model="state.content"
placeholder="Your username or profile link"
/>
</UFormGroup>
<UFormGroup label="Logo" name="logo"> <UFormGroup label="Logo" name="logo">
<USelectMenu <USelectMenu v-model="state.logo" :options="LOGOS" placeholder="Select logo" searchable
v-model="state.logo" @change="updateQRCode">
:options="LOGOS" <template #label>
placeholder="Select logo" <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
searchable </template>
@change="updateQRCode"
>
<template #label>
<span v-if="state.logo">{{ capitalize(state.logo) }}</span>
</template>
<template #option="props"> <template #option="props">
<span>{{ capitalize(props.option) }}</span> <span>{{ capitalize(props.option) }}</span>
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormGroup>
<UFormGroup label="Format" name="format"> <UFormGroup label="Format" name="format">
<USelectMenu <USelectMenu v-model="state.format" :options="IMAGE_FORMATS" placeholder="Select format"
v-model="state.format" @change="updateQRCode">
:options="IMAGE_FORMATS" <template #label>
placeholder="Select format" <span v-if="state.format">{{ upperCase(state.format) }}</span>
@change="updateQRCode" </template>
>
<template #label>
<span v-if="state.format">{{ upperCase(state.format) }}</span>
</template>
<template #option="props"> <template #option="props">
<span>{{ upperCase(props.option) }}</span> <span>{{ upperCase(props.option) }}</span>
</template> </template>
</USelectMenu> </USelectMenu>
</UFormGroup> </UFormGroup>
<UFormGroup label="API"> <UFormGroup label="API">
<UButtonGroup size="sm" orientation="horizontal" class="w-full"> <UButtonGroup size="sm" orientation="horizontal" class="w-full">
<UInput <UInput v-model="apiUrl" disabled placeholder="Please fill all fields first" class="w-full" />
v-model="apiUrl" <UButton :disabled="isQRCodeEmpty" :icon="copyUrlIcon" @click="copyUrl" />
disabled </UButtonGroup>
placeholder="Please fill all fields first" </UFormGroup>
class="w-full"
/>
<UButton
:disabled="isQRCodeEmpty"
:icon="copyUrlIcon"
@click="copyUrl"
/>
</UButtonGroup>
</UFormGroup>
<div class="flex space-x-4 pt-2"> <div class="flex space-x-4 pt-2">
<UButton <UButton class="flex-1" block :icon="copyImageIcon" size="md" color="primary" variant="solid"
class="flex-1" :label="copyImageLabel" :trailing="false" :disabled="isQRCodeEmpty" @click="copyQRCode" />
block
:icon="copyImageIcon"
size="md"
color="primary"
variant="solid"
:label="copyImageLabel"
:trailing="false"
:disabled="isQRCodeEmpty"
@click="copyQRCode"
/>
<UButton <UButton class="flex-1" block icon="i-heroicons-arrow-down-tray" size="md" color="primary" variant="solid"
class="flex-1" label="Download" :trailing="false" :disabled="isQRCodeEmpty" @click="downloadQRCode" />
block </div>
icon="i-heroicons-arrow-down-tray" </UForm>
size="md" </div>
color="primary"
variant="solid"
label="Download"
:trailing="false"
:disabled="isQRCodeEmpty"
@click="downloadQRCode"
/>
</div>
</UForm>
</div> </div>
</div> </div>
</div> </div>