diff options
author | 2023-05-28 23:13:24 +0200 | |
---|---|---|
committer | 2023-05-28 23:29:14 +0200 | |
commit | 33c9b6643f58a6930043f460d5bfdca4bc1f7222 (patch) | |
tree | f313935e30f7b90ea16e564e7171e2e72319ce29 /src/tools/qr-code-generator | |
parent | 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 (diff) | |
download | it-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.vue | 56 | ||||
-rw-r--r-- | src/tools/qr-code-generator/useQRCode.ts | 15 |
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 }, ); |