diff --git a/src/composable/downloadBase64.ts b/src/composable/downloadBase64.ts index d2ea576b..93483632 100644 --- a/src/composable/downloadBase64.ts +++ b/src/composable/downloadBase64.ts @@ -1,16 +1,35 @@ import { extension as getExtensionFromMime } from 'mime-types'; import type { Ref } from 'vue'; +function getFileExtensionFromBase64({ + base64String, + defaultExtension = 'txt', +}: { + base64String: string; + defaultExtension?: string; +}) { + const hasMimeType = base64String.match(/data:(.*?);base64/i); + + if (hasMimeType) { + return getExtensionFromMime(hasMimeType[1]) || defaultExtension; + } + + return defaultExtension; +} + export function useDownloadFileFromBase64({ source, filename }: { source: Ref; filename?: string }) { return { download() { - const base64 = source.value; - const mimeType = base64.match(/data:(.*?);base64/i)?.[1] ?? 'text/plain'; - console.log({ mimeType }); - const cleanFileName = filename ?? `file.${getExtensionFromMime(mimeType)}`; + const base64String = source.value; + + if (base64String === '') { + throw new Error('Base64 string is empty'); + } + + const cleanFileName = filename ?? `file.${getFileExtensionFromBase64({ base64String })}`; const a = document.createElement('a'); - a.href = source.value; + a.href = base64String; a.download = cleanFileName; a.click(); }, diff --git a/src/composable/validation.test.ts b/src/composable/validation.test.ts new file mode 100644 index 00000000..0bcb51f6 --- /dev/null +++ b/src/composable/validation.test.ts @@ -0,0 +1,29 @@ +/* eslint-disable @typescript-eslint/no-empty-function */ +import { describe, expect, it } from 'vitest'; +import { isFalsyOrHasThrown } from './validation'; + +describe('useValidation', () => { + describe('isFalsyOrHasThrown', () => { + it('should return true if the callback return nil, false or throw', () => { + expect(isFalsyOrHasThrown(() => false)).toBe(true); + expect(isFalsyOrHasThrown(() => null)).toBe(true); + expect(isFalsyOrHasThrown(() => undefined)).toBe(true); + expect(isFalsyOrHasThrown(() => {})).toBe(true); + expect( + isFalsyOrHasThrown(() => { + throw new Error(); + }), + ).toBe(true); + }); + + it('should return true for any truthy values and empty string and 0 values', () => { + expect(isFalsyOrHasThrown(() => true)).toBe(false); + expect(isFalsyOrHasThrown(() => 'string')).toBe(false); + expect(isFalsyOrHasThrown(() => 1)).toBe(false); + expect(isFalsyOrHasThrown(() => 0)).toBe(false); + expect(isFalsyOrHasThrown(() => '')).toBe(false); + expect(isFalsyOrHasThrown(() => [])).toBe(false); + expect(isFalsyOrHasThrown(() => ({}))).toBe(false); + }); + }); +}); diff --git a/src/composable/validation.ts b/src/composable/validation.ts index 40df887d..b27f2db8 100644 --- a/src/composable/validation.ts +++ b/src/composable/validation.ts @@ -1,13 +1,20 @@ +import _ from 'lodash'; import { reactive, watch, type Ref } from 'vue'; -type UseValidationRule = { - validator: (value: T) => boolean; - message: string; -}; +type ValidatorReturnType = unknown; -function isFalsyOrHasThrown(cb: () => boolean) { +interface UseValidationRule { + validator: (value: T) => ValidatorReturnType; + message: string; +} + +export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean { try { - return !cb(); + const returnValue = cb(); + + if (_.isNil(returnValue)) return true; + + return returnValue === false; } catch (_) { return true; } @@ -17,22 +24,30 @@ export function useValidation({ source, rules }: { source: Ref; rules: Use const state = reactive<{ message: string; status: undefined | 'error'; + isValid: boolean; }>({ message: '', status: undefined, + isValid: false, }); - watch([source], () => { - state.message = ''; - state.status = undefined; + watch( + [source], + () => { + state.message = ''; + state.status = undefined; - for (const rule of rules) { - if (isFalsyOrHasThrown(() => rule.validator(source.value))) { - state.message = rule.message; - state.status = 'error'; + for (const rule of rules) { + if (isFalsyOrHasThrown(() => rule.validator(source.value))) { + state.message = rule.message; + state.status = 'error'; + } } - } - }); + + state.isValid = state.status !== 'error'; + }, + { immediate: true }, + ); return state; } diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue index fcb68702..4cdff0f9 100644 --- a/src/tools/base64-file-converter/base64-file-converter.vue +++ b/src/tools/base64-file-converter/base64-file-converter.vue @@ -1,8 +1,16 @@