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

feat(ui): show error state and fix copy feature

Browse Source
This commit is contained in:
Pihkaal
2024-10-12 22:32:17 +02:00
parent 43ecff853e
commit 3e4f65b19c
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app.vue
View File

@@ -21,6 +21,13 @@ const state = reactive({
content: undefined, content: undefined,
}); });
const firstBlured = ref(false);
const stateErrors = computed(() => ({
content: firstBlured.value && !state.content,
logo: firstBlured.value && state.hasLogo && !state.logo,
}));
const isValidState = computed( const isValidState = computed(
() => () =>
state.content && state.content &&
@@ -77,10 +84,10 @@ const downloadQRCode = () => {
const copyQRCode = async () => { const copyQRCode = async () => {
if (isQRCodeEmpty.value) return; if (isQRCodeEmpty.value) return;
const logoUrl = `/logos/${state.logo}.png`; const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
await renderQRCodeToCanvas(canvas.value, state.content, logoUrl); const canvas = await renderQRCodeToCanvas(state.content, logoUrl);
const qrCode = canvas.value.toDataURL(`image/png`); const qrCode = canvas.toDataURL(`image/png`);
const blob = await (await fetch(qrCode)).blob(); const blob = await (await fetch(qrCode)).blob();
const item = new ClipboardItem({ "image/png": blob }); const item = new ClipboardItem({ "image/png": blob });
@@ -120,22 +127,25 @@ const arrayToUnion = (array: string[]) =>
<UFormGroup <UFormGroup
label="Username or link" label="Username or link"
name="content" name="content"
@input="updateQRCode" :error="stateErrors.content"
> >
<UInput <UInput
v-model="state.content" v-model="state.content"
icon="i-heroicons-user" icon="i-heroicons-user"
placeholder="Your username or profile link" placeholder="Your username or profile link"
@input="updateQRCode"
@blur="firstBlured = true"
/> />
</UFormGroup> </UFormGroup>
<UFormGroup name="logo"> <UFormGroup name="logo" :error="stateErrors.logo">
<template #label> <template #label>
<UCheckbox <UCheckbox
v-model="state.hasLogo" v-model="state.hasLogo"
class="mb-1.5" class="mb-1.5"
label="Logo" label="Logo"
@change="updateQRCode" @change="updateQRCode"
@blur="firstBlured = true"
/> />
</template> </template>
@@ -148,6 +158,7 @@ const arrayToUnion = (array: string[]) =>
searchable searchable
clear-search-on-close clear-search-on-close
@change="updateQRCode" @change="updateQRCode"
@blur="firstBlured = true"
> >
<template #label> <template #label>
<span v-if="state.logo">{{ capitalize(state.logo) }}</span> <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
@@ -166,6 +177,7 @@ const arrayToUnion = (array: string[]) =>
:options="IMAGE_FORMATS" :options="IMAGE_FORMATS"
placeholder="Select format" placeholder="Select format"
@change="updateQRCode" @change="updateQRCode"
@blur="firstBlured = true"
> >
<template #label> <template #label>
<span v-if="state.format">{{ upperCase(state.format) }}</span> <span v-if="state.format">{{ upperCase(state.format) }}</span>
@@ -197,7 +209,7 @@ const arrayToUnion = (array: string[]) =>
/> />
<UButton <UButton
color="gray" color="gray"
:disabled="isQRCodeEmpty" :disabled="!isValidState"
:icon="copyUrlIcon" :icon="copyUrlIcon"
@click="copyUrl" @click="copyUrl"
/> />