From 7de6c86f9ead8d7315614cc508dfee4fed90e9c2 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Wed, 24 Aug 2022 00:09:59 +0200 Subject: [PATCH] refactor(useQRCode): switched args to MaybeRef --- src/tools/qr-code-generator/useQRCode.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/tools/qr-code-generator/useQRCode.ts b/src/tools/qr-code-generator/useQRCode.ts index 38a9d314..44b72a72 100644 --- a/src/tools/qr-code-generator/useQRCode.ts +++ b/src/tools/qr-code-generator/useQRCode.ts @@ -1,5 +1,6 @@ +import { get, type MaybeRef } from '@vueuse/core'; import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode'; -import { ref, watch, type Ref } from 'vue'; +import { ref, watch, isRef } from 'vue'; export function useQRCode({ text, @@ -7,24 +8,24 @@ export function useQRCode({ errorCorrectionLevel, options, }: { - text: Ref; - color: { foreground: Ref; background: Ref }; - errorCorrectionLevel: Ref; + text: MaybeRef; + color: { foreground: MaybeRef; background: MaybeRef }; + errorCorrectionLevel?: MaybeRef; options?: QRCodeToDataURLOptions; }) { const qrcode = ref(''); watch( - [text, background, foreground, errorCorrectionLevel], + [text, background, foreground, errorCorrectionLevel].filter(isRef), async () => { - if (text.value) - qrcode.value = await QRCode.toDataURL(text.value, { + if (get(text)) + qrcode.value = await QRCode.toDataURL(get(text), { color: { - dark: foreground.value, - light: background.value, + dark: get(foreground), + light: get(background), ...options?.color, }, - errorCorrectionLevel: errorCorrectionLevel.value, + errorCorrectionLevel: get(errorCorrectionLevel) ?? 'M', ...options, }); },