feat(new tool): Regex Tester

Fix CorentinTh#1007, CorentinTh#991, CorentinTh#936, CorentinTh#761, CorentinTh#649
CorentinTh#644, CorentinTh#554
CorentinTh#308

src/composable/downloadBase64.ts

@@ -1,8 +1,12 @@
-import { extension as getExtensionFromMime } from 'mime-types';
+import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
 import type { Ref } from 'vue';
 import _ from 'lodash';
 
-export { getMimeTypeFromBase64, useDownloadFileFromBase64 };
+export {
+ getMimeTypeFromBase64,
+ getMimeTypeFromExtension, getExtensionFromMimeType,
+ useDownloadFileFromBase64, useDownloadFileFromBase64Refs,
+};
 
 const commonMimeTypesSignatures = {
  'JVBERi0': 'application/pdf',
@@ -36,30 +40,55 @@ function getFileExtensionFromMimeType({
  defaultExtension?: string
 }) {
  if (mimeType) {
- return getExtensionFromMime(mimeType) ?? defaultExtension;
+ return getExtensionFromMimeType(mimeType) ?? defaultExtension;
  }
 
  return defaultExtension;
 }
 
-function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
- return {
- download() {
- if (source.value === '') {
- throw new Error('Base64 string is empty');
- }
+function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
+{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) {
+ if (sourceValue === '') {
+ throw new Error('Base64 string is empty');
+ }
+
+ const defaultExtension = extension ?? 'txt';
+ const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue });
+ let base64String = sourceValue;
+ if (!mimeType) {
+ const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension);
+ base64String = `data:${targetMimeType};base64,${sourceValue}`;
+ }
+
+ const cleanExtension = extension ?? getFileExtensionFromMimeType(
+ { mimeType, defaultExtension });
+ let cleanFileName = filename ?? `file.${cleanExtension}`;
+ if (extension && !cleanFileName.endsWith(`.${extension}`)) {
+ cleanFileName = `${cleanFileName}.${cleanExtension}`;
+ }
 
- const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
- const base64String = mimeType
- ? source.value
- : `data:text/plain;base64,${source.value}`;
+ const a = document.createElement('a');
+ a.href = base64String;
+ a.download = cleanFileName;
+ a.click();
+}
 
- const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
+function useDownloadFileFromBase64(
+ { source, filename, extension, fileMimeType }:
+ { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
+ return {
+ download() {
+ downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
+ },
+ };
+}
 
- const a = document.createElement('a');
- a.href = base64String;
- a.download = cleanFileName;
- a.click();
+function useDownloadFileFromBase64Refs(
+ { source, filename, extension }:
+ { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+ return {
+ download() {
+ downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
  },
  };
 }

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
  number: {
@@ -33,3 +34,31 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
  },
  });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue?: T }) {
+ const type = typeof defaultValue;
+ const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+ const storageRef = useStorage(storageName, defaultValue);
+ const storageDefaultValue = storageRef.value ?? defaultValue;
+
+ const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
+
+ const ref = computed<T>({
+ get() {
+ return transformer.fromQuery(proxy.value) as unknown as T;
+ },
+ set(value) {
+ proxy.value = transformer.toQuery(value as never);
+ },
+ });
+
+ watch(
+ ref,
+ (newValue) => {
+ storageRef.value = newValue;
+ },
+ );
+
+ return ref;
+}

src/composable/validation.ts

@@ -3,9 +3,11 @@ import _ from 'lodash';
 import { type Ref, reactive, watch } from 'vue';
 
 type ValidatorReturnType = unknown;
+type GetErrorMessageReturnType = unknown;
 
 export interface UseValidationRule<T> {
  validator: (value: T) => ValidatorReturnType
+ getErrorMessage?: (value: T) => GetErrorMessageReturnType
  message: string
 }
 
@@ -24,6 +26,15 @@ export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
  }
 }
 
+export function getErrorMessageOrThrown(cb: () => GetErrorMessageReturnType): string {
+ try {
+ return cb() ?? '';
+ }
+ catch (e: any) {
+ return e.toString();
+ }
+}
+
 export interface ValidationAttrs {
  feedback: string
  validationStatus: string | undefined
@@ -61,7 +72,12 @@ export function useValidation<T>({
 
  for (const rule of get(rules)) {
  if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
- state.message = rule.message;
+ if (rule.getErrorMessage) {
+ state.message = rule.message.replace('{0}', getErrorMessageOrThrown(() => rule.getErrorMessage(source.value)));
+ }
+ else {
+ state.message = rule.message;
+ }
  state.status = 'error';
  }
  }