refactor(useQRCode): switched args to MaybeRef
This commit is contained in:
		
							parent
							
								
									59ec6293b6
								
							
						
					
					
						commit
						a89c9bea42
					
				| @ -1,5 +1,6 @@ | |||||||
|  | import { get, type MaybeRef } from '@vueuse/core'; | ||||||
| import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode'; | import QRCode, { type QRCodeErrorCorrectionLevel, type QRCodeToDataURLOptions } from 'qrcode'; | ||||||
| import { ref, watch, type Ref } from 'vue'; | import { ref, watch, isRef } from 'vue'; | ||||||
| 
 | 
 | ||||||
| export function useQRCode({ | export function useQRCode({ | ||||||
|   text, |   text, | ||||||
| @ -7,24 +8,24 @@ export function useQRCode({ | |||||||
|   errorCorrectionLevel, |   errorCorrectionLevel, | ||||||
|   options, |   options, | ||||||
| }: { | }: { | ||||||
|   text: Ref<string>; |   text: MaybeRef<string>; | ||||||
|   color: { foreground: Ref<string>; background: Ref<string> }; |   color: { foreground: MaybeRef<string>; background: MaybeRef<string> }; | ||||||
|   errorCorrectionLevel: Ref<QRCodeErrorCorrectionLevel>; |   errorCorrectionLevel?: MaybeRef<QRCodeErrorCorrectionLevel>; | ||||||
|   options?: QRCodeToDataURLOptions; |   options?: QRCodeToDataURLOptions; | ||||||
| }) { | }) { | ||||||
|   const qrcode = ref(''); |   const qrcode = ref(''); | ||||||
| 
 | 
 | ||||||
|   watch( |   watch( | ||||||
|     [text, background, foreground, errorCorrectionLevel], |     [text, background, foreground, errorCorrectionLevel].filter(isRef), | ||||||
|     async () => { |     async () => { | ||||||
|       if (text.value) |       if (get(text)) | ||||||
|         qrcode.value = await QRCode.toDataURL(text.value, { |         qrcode.value = await QRCode.toDataURL(get(text), { | ||||||
|           color: { |           color: { | ||||||
|             dark: foreground.value, |             dark: get(foreground), | ||||||
|             light: background.value, |             light: get(background), | ||||||
|             ...options?.color, |             ...options?.color, | ||||||
|           }, |           }, | ||||||
|           errorCorrectionLevel: errorCorrectionLevel.value, |           errorCorrectionLevel: get(errorCorrectionLevel) ?? 'M', | ||||||
|           ...options, |           ...options, | ||||||
|         }); |         }); | ||||||
|     }, |     }, | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user