aboutsummaryrefslogtreecommitdiff
path: root/src/tools/qr-code-generator
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-05-28 23:13:24 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-05-28 23:29:14 +0200
commit33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch)
treef313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/qr-code-generator
parent4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff)
downloadit-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.gz
it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.tar.zst
it-tools-33c9b6643f58a6930043f460d5bfdca4bc1f7222.zip
chore(lint): switched to a better lint config
Diffstat (limited to 'src/tools/qr-code-generator')
-rw-r--r--src/tools/qr-code-generator/qr-code-generator.vue56
-rw-r--r--src/tools/qr-code-generator/useQRCode.ts15
2 files changed, 37 insertions, 34 deletions
diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue
index 12fcf11..f6ea7c8 100644
--- a/src/tools/qr-code-generator/qr-code-generator.vue
+++ b/src/tools/qr-code-generator/qr-code-generator.vue
@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { QRCodeErrorCorrectionLevel } from 'qrcode';
+import { useQRCode } from './useQRCode';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+const foreground = ref('#000000ff');
+const background = ref('#ffffffff');
+const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium');
+
+const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high'];
+
+const text = ref('https://it-tools.tech');
+const { qrcode } = useQRCode({
+ text,
+ color: {
+ background,
+ foreground,
+ },
+ errorCorrectionLevel,
+ options: { width: 1024 },
+});
+
+const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
+</script>
+
<template>
<c-card>
<n-grid x-gap="12" y-gap="12" cols="1 600:3">
@@ -28,35 +54,11 @@
<n-gi>
<div flex flex-col items-center gap-3>
<n-image :src="qrcode" width="200" />
- <c-button @click="download"> Download qr-code </c-button>
+ <c-button @click="download">
+ Download qr-code
+ </c-button>
</div>
</n-gi>
</n-grid>
</c-card>
</template>
-
-<script setup lang="ts">
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
-import { ref } from 'vue';
-import type { QRCodeErrorCorrectionLevel } from 'qrcode';
-import { useQRCode } from './useQRCode';
-
-const foreground = ref('#000000ff');
-const background = ref('#ffffffff');
-const errorCorrectionLevel = ref<QRCodeErrorCorrectionLevel>('medium');
-
-const errorCorrectionLevels = ['low', 'medium', 'quartile', 'high'];
-
-const text = ref('https://it-tools.tech');
-const { qrcode } = useQRCode({
- text,
- color: {
- background,
- foreground,
- },
- errorCorrectionLevel,
- options: { width: 1024 },
-});
-
-const { download } = useDownloadFileFromBase64({ source: qrcode, filename: 'qr-code.png' });
-</script>
diff --git a/src/tools/qr-code-generator/useQRCode.ts b/src/tools/qr-code-generator/useQRCode.ts
index 64ee90a..5aa5450 100644
--- a/src/tools/qr-code-generator/useQRCode.ts
+++ b/src/tools/qr-code-generator/useQRCode.ts
@@ -1,6 +1,6 @@
-import { get, type MaybeRef } from '@vueuse/core';
+import { type MaybeRef, get } from '@vueuse/core';
import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode';
-import { ref, watch, isRef } from 'vue';
+import { isRef, ref, watch } from 'vue';
export function useQRCode({
text,
@@ -8,17 +8,17 @@ export function useQRCode({
errorCorrectionLevel,
options,
}: {
- text: MaybeRef<string>;
- color: { foreground: MaybeRef<string>; background: MaybeRef<string> };
- errorCorrectionLevel?: MaybeRef<QRCodeErrorCorrectionLevel>;
- options?: QRCodeToDataURLOptions;
+ text: MaybeRef<string>
+ color: { foreground: MaybeRef<string>; background: MaybeRef<string> }
+ errorCorrectionLevel?: MaybeRef<QRCodeErrorCorrectionLevel>
+ options?: QRCodeToDataURLOptions
}) {
const qrcode = ref('');
watch(
[text, background, foreground, errorCorrectionLevel].filter(isRef),
async () => {
- if (get(text))
+ if (get(text)) {
qrcode.value = await QRCode.toDataURL(get(text).trim(), {
color: {
dark: get(foreground),
@@ -28,6 +28,7 @@ export function useQRCode({
errorCorrectionLevel: get(errorCorrectionLevel) ?? 'M',
...options,
});
+ }
},
{ immediate: true },
);