From f7fc779e6334af129e323ae6ec22d97059eb0363 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Mon, 15 May 2023 00:41:45 +0200 Subject: [PATCH 001/236] refactor(ui): replaced some n-input with c-input-text --- auto-imports.d.ts | 72 +++---------------- src/components/FormatTransformer.vue | 41 ++++++----- .../base64-file-converter.vue | 32 ++++----- .../base64-string-converter.vue | 71 +++++++++++------- .../date-time-converter.vue | 39 +++++----- .../ipv4-range-expander.vue | 25 ++++--- src/tools/json-diff/json-diff.vue | 67 +++++++---------- .../mac-address-lookup/mac-address-lookup.vue | 48 ++++++------- src/ui/c-input-text/c-input-text.vue | 4 ++ src/utils/macAddress.ts | 16 +++-- 10 files changed, 189 insertions(+), 226 deletions(-) diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 9dccb44a..2850890b 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -19,9 +19,7 @@ declare global { const createGlobalState: typeof import('@vueuse/core')['createGlobalState'] const createInjectionState: typeof import('@vueuse/core')['createInjectionState'] const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn'] - const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate'] const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable'] - const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise'] const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn'] const customRef: typeof import('vue')['customRef'] const debouncedRef: typeof import('@vueuse/core')['debouncedRef'] @@ -41,6 +39,9 @@ declare global { const isReactive: typeof import('vue')['isReactive'] const isReadonly: typeof import('vue')['isReadonly'] const isRef: typeof import('vue')['isRef'] + const logicAnd: typeof import('@vueuse/core')['logicAnd'] + const logicNot: typeof import('@vueuse/core')['logicNot'] + const logicOr: typeof import('@vueuse/core')['logicOr'] const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable'] const markRaw: typeof import('vue')['markRaw'] const nextTick: typeof import('vue')['nextTick'] @@ -91,9 +92,8 @@ declare global { const throttledWatch: typeof import('@vueuse/core')['throttledWatch'] const toRaw: typeof import('vue')['toRaw'] const toReactive: typeof import('@vueuse/core')['toReactive'] - const toRef: typeof import('@vueuse/core')['toRef'] + const toRef: typeof import('vue')['toRef'] const toRefs: typeof import('vue')['toRefs'] - const toValue: typeof import('@vueuse/core')['toValue'] const triggerRef: typeof import('vue')['triggerRef'] const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount'] const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount'] @@ -104,19 +104,6 @@ declare global { const unrefElement: typeof import('@vueuse/core')['unrefElement'] const until: typeof import('@vueuse/core')['until'] const useActiveElement: typeof import('@vueuse/core')['useActiveElement'] - const useAnimate: typeof import('@vueuse/core')['useAnimate'] - const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference'] - const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery'] - const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter'] - const useArrayFind: typeof import('@vueuse/core')['useArrayFind'] - const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex'] - const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast'] - const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes'] - const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin'] - const useArrayMap: typeof import('@vueuse/core')['useArrayMap'] - const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce'] - const useArraySome: typeof import('@vueuse/core')['useArraySome'] - const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique'] const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue'] const useAsyncState: typeof import('@vueuse/core')['useAsyncState'] const useAttrs: typeof import('vue')['useAttrs'] @@ -127,8 +114,8 @@ declare global { const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel'] const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation'] const useCached: typeof import('@vueuse/core')['useCached'] + const useClamp: typeof import('@vueuse/core')['useClamp'] const useClipboard: typeof import('@vueuse/core')['useClipboard'] - const useCloned: typeof import('@vueuse/core')['useCloned'] const useColorMode: typeof import('@vueuse/core')['useColorMode'] const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog'] const useCounter: typeof import('@vueuse/core')['useCounter'] @@ -202,18 +189,12 @@ declare global { const useOnline: typeof import('@vueuse/core')['useOnline'] const usePageLeave: typeof import('@vueuse/core')['usePageLeave'] const useParallax: typeof import('@vueuse/core')['useParallax'] - const useParentElement: typeof import('@vueuse/core')['useParentElement'] - const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver'] const usePermission: typeof import('@vueuse/core')['usePermission'] const usePointer: typeof import('@vueuse/core')['usePointer'] - const usePointerLock: typeof import('@vueuse/core')['usePointerLock'] const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe'] const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme'] - const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast'] const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark'] const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages'] - const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion'] - const usePrevious: typeof import('@vueuse/core')['usePrevious'] const useRafFn: typeof import('@vueuse/core')['useRafFn'] const useRefHistory: typeof import('@vueuse/core')['useRefHistory'] const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver'] @@ -227,17 +208,14 @@ declare global { const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage'] const useShare: typeof import('@vueuse/core')['useShare'] const useSlots: typeof import('vue')['useSlots'] - const useSorted: typeof import('@vueuse/core')['useSorted'] const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition'] const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis'] const useStepper: typeof import('@vueuse/core')['useStepper'] const useStorage: typeof import('@vueuse/core')['useStorage'] const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync'] const useStyleTag: typeof import('@vueuse/core')['useStyleTag'] - const useSupported: typeof import('@vueuse/core')['useSupported'] const useSwipe: typeof import('@vueuse/core')['useSwipe'] const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList'] - const useTextDirection: typeof import('@vueuse/core')['useTextDirection'] const useTextSelection: typeof import('@vueuse/core')['useTextSelection'] const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize'] const useThrottle: typeof import('@vueuse/core')['useThrottle'] @@ -249,8 +227,6 @@ declare global { const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll'] const useTimestamp: typeof import('@vueuse/core')['useTimestamp'] const useTitle: typeof import('@vueuse/core')['useTitle'] - const useToNumber: typeof import('@vueuse/core')['useToNumber'] - const useToString: typeof import('@vueuse/core')['useToString'] const useToggle: typeof import('@vueuse/core')['useToggle'] const useTransition: typeof import('@vueuse/core')['useTransition'] const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams'] @@ -271,10 +247,8 @@ declare global { const watchArray: typeof import('@vueuse/core')['watchArray'] const watchAtMost: typeof import('@vueuse/core')['watchAtMost'] const watchDebounced: typeof import('@vueuse/core')['watchDebounced'] - const watchDeep: typeof import('@vueuse/core')['watchDeep'] const watchEffect: typeof import('vue')['watchEffect'] const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable'] - const watchImmediate: typeof import('@vueuse/core')['watchImmediate'] const watchOnce: typeof import('@vueuse/core')['watchOnce'] const watchPausable: typeof import('@vueuse/core')['watchPausable'] const watchPostEffect: typeof import('vue')['watchPostEffect'] @@ -308,9 +282,7 @@ declare module 'vue' { readonly createGlobalState: UnwrapRef readonly createInjectionState: UnwrapRef readonly createReactiveFn: UnwrapRef - readonly createReusableTemplate: UnwrapRef readonly createSharedComposable: UnwrapRef - readonly createTemplatePromise: UnwrapRef readonly createUnrefFn: UnwrapRef readonly customRef: UnwrapRef readonly debouncedRef: UnwrapRef @@ -330,6 +302,9 @@ declare module 'vue' { readonly isReactive: UnwrapRef readonly isReadonly: UnwrapRef readonly isRef: UnwrapRef + readonly logicAnd: UnwrapRef + readonly logicNot: UnwrapRef + readonly logicOr: UnwrapRef readonly makeDestructurable: UnwrapRef readonly markRaw: UnwrapRef readonly nextTick: UnwrapRef @@ -380,9 +355,8 @@ declare module 'vue' { readonly throttledWatch: UnwrapRef readonly toRaw: UnwrapRef readonly toReactive: UnwrapRef - readonly toRef: UnwrapRef + readonly toRef: UnwrapRef readonly toRefs: UnwrapRef - readonly toValue: UnwrapRef readonly triggerRef: UnwrapRef readonly tryOnBeforeMount: UnwrapRef readonly tryOnBeforeUnmount: UnwrapRef @@ -393,19 +367,6 @@ declare module 'vue' { readonly unrefElement: UnwrapRef readonly until: UnwrapRef readonly useActiveElement: UnwrapRef - readonly useAnimate: UnwrapRef - readonly useArrayDifference: UnwrapRef - readonly useArrayEvery: UnwrapRef - readonly useArrayFilter: UnwrapRef - readonly useArrayFind: UnwrapRef - readonly useArrayFindIndex: UnwrapRef - readonly useArrayFindLast: UnwrapRef - readonly useArrayIncludes: UnwrapRef - readonly useArrayJoin: UnwrapRef - readonly useArrayMap: UnwrapRef - readonly useArrayReduce: UnwrapRef - readonly useArraySome: UnwrapRef - readonly useArrayUnique: UnwrapRef readonly useAsyncQueue: UnwrapRef readonly useAsyncState: UnwrapRef readonly useAttrs: UnwrapRef @@ -416,8 +377,8 @@ declare module 'vue' { readonly useBroadcastChannel: UnwrapRef readonly useBrowserLocation: UnwrapRef readonly useCached: UnwrapRef + readonly useClamp: UnwrapRef readonly useClipboard: UnwrapRef - readonly useCloned: UnwrapRef readonly useColorMode: UnwrapRef readonly useConfirmDialog: UnwrapRef readonly useCounter: UnwrapRef @@ -491,18 +452,12 @@ declare module 'vue' { readonly useOnline: UnwrapRef readonly usePageLeave: UnwrapRef readonly useParallax: UnwrapRef - readonly useParentElement: UnwrapRef - readonly usePerformanceObserver: UnwrapRef readonly usePermission: UnwrapRef readonly usePointer: UnwrapRef - readonly usePointerLock: UnwrapRef readonly usePointerSwipe: UnwrapRef readonly usePreferredColorScheme: UnwrapRef - readonly usePreferredContrast: UnwrapRef readonly usePreferredDark: UnwrapRef readonly usePreferredLanguages: UnwrapRef - readonly usePreferredReducedMotion: UnwrapRef - readonly usePrevious: UnwrapRef readonly useRafFn: UnwrapRef readonly useRefHistory: UnwrapRef readonly useResizeObserver: UnwrapRef @@ -516,17 +471,14 @@ declare module 'vue' { readonly useSessionStorage: UnwrapRef readonly useShare: UnwrapRef readonly useSlots: UnwrapRef - readonly useSorted: UnwrapRef readonly useSpeechRecognition: UnwrapRef readonly useSpeechSynthesis: UnwrapRef readonly useStepper: UnwrapRef readonly useStorage: UnwrapRef readonly useStorageAsync: UnwrapRef readonly useStyleTag: UnwrapRef - readonly useSupported: UnwrapRef readonly useSwipe: UnwrapRef readonly useTemplateRefsList: UnwrapRef - readonly useTextDirection: UnwrapRef readonly useTextSelection: UnwrapRef readonly useTextareaAutosize: UnwrapRef readonly useThrottle: UnwrapRef @@ -538,8 +490,6 @@ declare module 'vue' { readonly useTimeoutPoll: UnwrapRef readonly useTimestamp: UnwrapRef readonly useTitle: UnwrapRef - readonly useToNumber: UnwrapRef - readonly useToString: UnwrapRef readonly useToggle: UnwrapRef readonly useTransition: UnwrapRef readonly useUrlSearchParams: UnwrapRef @@ -560,10 +510,8 @@ declare module 'vue' { readonly watchArray: UnwrapRef readonly watchAtMost: UnwrapRef readonly watchDebounced: UnwrapRef - readonly watchDeep: UnwrapRef readonly watchEffect: UnwrapRef readonly watchIgnorable: UnwrapRef - readonly watchImmediate: UnwrapRef readonly watchOnce: UnwrapRef readonly watchPausable: UnwrapRef readonly watchPostEffect: UnwrapRef diff --git a/src/components/FormatTransformer.vue b/src/components/FormatTransformer.vue index d1876328..5b187b2b 100644 --- a/src/components/FormatTransformer.vue +++ b/src/components/FormatTransformer.vue @@ -1,26 +1,27 @@ diff --git a/src/tools/base64-file-converter/base64-file-converter.vue b/src/tools/base64-file-converter/base64-file-converter.vue index 55241096..de18ee3b 100644 --- a/src/tools/base64-file-converter/base64-file-converter.vue +++ b/src/tools/base64-file-converter/base64-file-converter.vue @@ -1,17 +1,19 @@ @@ -77,11 +80,6 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) { diff --git a/src/tools/camera-recorder/index.ts b/src/tools/camera-recorder/index.ts new file mode 100644 index 00000000..3c5d11bd --- /dev/null +++ b/src/tools/camera-recorder/index.ts @@ -0,0 +1,12 @@ +import { Camera } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'Camera recorder', + path: '/camera-recorder', + description: 'Take a picture or record a video from your webcam or camera.', + keywords: ['camera', 'recoder'], + component: () => import('./camera-recorder.vue'), + icon: Camera, + createdAt: new Date('2023-05-15'), +}); diff --git a/src/tools/camera-recorder/useMediaRecorder.ts b/src/tools/camera-recorder/useMediaRecorder.ts new file mode 100644 index 00000000..eed0edda --- /dev/null +++ b/src/tools/camera-recorder/useMediaRecorder.ts @@ -0,0 +1,88 @@ +import { computed, ref, type Ref } from 'vue'; + +export { useMediaRecorder }; + +function useMediaRecorder({ stream }: { stream: Ref }): { + isRecordingSupported: Ref; + recordingState: Ref<'stopped' | 'recording' | 'paused'>; + startRecording: () => void; + stopRecording: () => void; + pauseRecording: () => void; + resumeRecording: () => void; + onRecordAvailable: (cb: (url: string) => void) => void; +} { + const isRecordingSupported = computed(() => MediaRecorder.isTypeSupported('video/webm')); + const mediaRecorder = ref(null); + const recordedChunks = ref([]); + const recordAvailable = createEventHook(); + const recordingState = ref<'stopped' | 'recording' | 'paused'>('stopped'); + + const startRecording = () => { + if (!isRecordingSupported.value) return; + if (!stream.value) return; + if (recordingState.value !== 'stopped') return; + + mediaRecorder.value = new MediaRecorder(stream.value, { mimeType: 'video/webm' }); + + mediaRecorder.value.ondataavailable = (e) => { + if (e.data.size > 0) { + recordedChunks.value.push(e.data); + } + }; + + mediaRecorder.value.onstop = () => { + recordAvailable.trigger(createVideo()); + }; + + if (mediaRecorder.value.state !== 'inactive') return; + + mediaRecorder.value.start(); + recordingState.value = 'recording'; + }; + + const stopRecording = () => { + if (!isRecordingSupported.value) return; + if (!mediaRecorder.value) return; + if (recordingState.value === 'stopped') return; + + mediaRecorder.value.stop(); + recordingState.value = 'stopped'; + }; + + const pauseRecording = () => { + if (!isRecordingSupported.value) return; + if (!mediaRecorder.value) return; + if (recordingState.value !== 'recording') return; + + mediaRecorder.value.pause(); + recordingState.value = 'paused'; + }; + + const resumeRecording = () => { + if (!isRecordingSupported.value) return; + if (!mediaRecorder.value) return; + + if (recordingState.value !== 'paused') return; + + mediaRecorder.value.resume(); + recordingState.value = 'recording'; + }; + + const createVideo = () => { + const blob = new Blob(recordedChunks.value, { type: 'video/webm' }); + const url = URL.createObjectURL(blob); + recordedChunks.value = []; + return url; + }; + + return { + isRecordingSupported, + startRecording, + stopRecording, + pauseRecording, + resumeRecording, + recordingState, + + onRecordAvailable: recordAvailable.on, + }; +} diff --git a/src/tools/index.ts b/src/tools/index.ts index f5aacc4d..44ef8a3f 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,7 @@ import { tool as base64FileConverter } from './base64-file-converter'; import { tool as base64StringConverter } from './base64-string-converter'; import { tool as basicAuthGenerator } from './basic-auth-generator'; +import { tool as cameraRecorder } from './camera-recorder'; import { tool as listConverter } from './list-converter'; import { tool as phoneParserAndFormatter } from './phone-parser-and-formatter'; import { tool as jsonDiff } from './json-diff'; @@ -99,8 +100,8 @@ export const toolsByCategory: ToolCategory[] = [ ], }, { - name: 'Images', - components: [qrCodeGenerator, svgPlaceholderGenerator], + name: 'Images and videos', + components: [qrCodeGenerator, svgPlaceholderGenerator, cameraRecorder], }, { name: 'Development', diff --git a/src/ui/c-alert/c-alert.demo.vue b/src/ui/c-alert/c-alert.demo.vue new file mode 100644 index 00000000..5d8d1f2d --- /dev/null +++ b/src/ui/c-alert/c-alert.demo.vue @@ -0,0 +1,11 @@ + + + diff --git a/src/ui/c-alert/c-alert.theme.ts b/src/ui/c-alert/c-alert.theme.ts new file mode 100644 index 00000000..b974c374 --- /dev/null +++ b/src/ui/c-alert/c-alert.theme.ts @@ -0,0 +1,25 @@ +import { darken } from '../color/color.models'; +import { defineThemes } from '../theme/theme.models'; +import { appThemes } from '../theme/themes'; + +// eslint-disable-next-line +import WarningIcon from '~icons/mdi/alert-circle-outline'; + +export const { useTheme } = defineThemes({ + dark: { + warning: { + backgroundColor: appThemes.dark.warning.colorFaded, + borderColor: appThemes.dark.warning.color, + textColor: appThemes.dark.warning.color, + icon: WarningIcon, + }, + }, + light: { + warning: { + backgroundColor: appThemes.light.warning.colorFaded, + borderColor: appThemes.light.warning.color, + textColor: darken(appThemes.light.warning.color, 40), + icon: WarningIcon, + }, + }, +}); diff --git a/src/ui/c-alert/c-alert.vue b/src/ui/c-alert/c-alert.vue new file mode 100644 index 00000000..1fedbb0b --- /dev/null +++ b/src/ui/c-alert/c-alert.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/ui/c-button/c-button.demo.vue b/src/ui/c-button/c-button.demo.vue index ce339f5e..48576f6a 100644 --- a/src/ui/c-button/c-button.demo.vue +++ b/src/ui/c-button/c-button.demo.vue @@ -45,7 +45,7 @@ import _ from 'lodash'; const buttonVariants = ['basic', 'text'] as const; -const buttonTypes = ['default', 'primary', 'warning'] as const; +const buttonTypes = ['default', 'primary', 'warning', 'error'] as const; const buttonSizes = ['small', 'medium', 'large'] as const; diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts index 5b4c26f7..e2e1591f 100644 --- a/src/ui/c-button/c-button.theme.ts +++ b/src/ui/c-button/c-button.theme.ts @@ -61,6 +61,12 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => { hoverBackground: lighten(theme.warning.colorFaded, 30), pressedBackground: darken(theme.warning.colorFaded, 30), }), + error: createState({ + textColor: theme.error.color, + backgroundColor: theme.error.colorFaded, + hoverBackground: lighten(theme.error.colorFaded, 30), + pressedBackground: darken(theme.error.colorFaded, 30), + }), }, text: { default: createState({ @@ -81,6 +87,12 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => { hoverBackground: theme.warning.colorFaded, pressedBackground: darken(theme.warning.colorFaded, 30), }), + error: createState({ + textColor: darken(theme.error.color, 20), + backgroundColor: 'transparent', + hoverBackground: theme.error.colorFaded, + pressedBackground: darken(theme.error.colorFaded, 30), + }), }, }; }; diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue index 121a1e96..24b91b84 100644 --- a/src/ui/c-button/c-button.vue +++ b/src/ui/c-button/c-button.vue @@ -18,7 +18,7 @@ import { useAppTheme } from '../theme/themes'; const props = withDefaults( defineProps<{ - type?: 'default' | 'primary' | 'warning'; + type?: 'default' | 'primary' | 'warning' | 'error'; variant?: 'basic' | 'text'; disabled?: boolean; round?: boolean; From 4d2b037dbe4e78aa90a4a6d9c7315dcf0a51fed9 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Sat, 27 May 2023 17:36:15 +0200 Subject: [PATCH 007/236] refactor(ui): removed all n-space --- src/components/ColoredCard.vue | 4 +- src/components/TextareaCopyable.vue | 4 +- src/components/ToolCard.vue | 8 +- src/layouts/base.layout.vue | 4 +- src/layouts/tool.layout.vue | 4 +- .../basic-auth-generator.vue | 4 +- src/tools/bcrypt/bcrypt.vue | 4 +- .../benchmark-builder/benchmark-builder.vue | 16 +-- .../benchmark-builder/dynamic-values.vue | 4 +- src/tools/chronometer/chronometer.vue | 4 +- .../crontab-generator/crontab-generator.vue | 10 +- ...docker-run-to-docker-compose-converter.vue | 4 +- src/tools/encryption/encryption.vue | 20 ++-- src/tools/eta-calculator/eta-calculator.vue | 70 ++++++------ src/tools/hmac-generator/hmac-generator.vue | 12 +- src/tools/html-entities/html-entities.vue | 8 +- .../html-wysiwyg-editor/editor/menu-bar.vue | 4 +- .../http-status-codes/http-status-codes.vue | 6 +- .../ipv4-range-expander.vue | 103 +++++++++--------- .../ipv4-subnet-calculator.vue | 4 +- .../json-diff/diff-viewer/diff-viewer.vue | 4 +- src/tools/json-viewer/json-viewer.vue | 4 +- src/tools/jwt-parser/jwt-parser.vue | 16 +-- src/tools/list-converter/list-converter.vue | 4 +- .../lorem-ipsum-generator.vue | 4 +- .../otp-code-generator-and-validator.vue | 4 +- .../token-display.vue | 11 +- .../qr-code-generator/qr-code-generator.vue | 4 +- .../random-port-generator.vue | 4 +- .../roman-numeral-converter.vue | 8 +- .../rsa-key-pair-generator.vue | 4 +- src/tools/slugify-string/slugify-string.vue | 4 +- src/tools/sql-prettify/sql-prettify.vue | 10 +- .../svg-placeholder-generator.vue | 31 +++--- src/tools/text-statistics/text-statistics.vue | 12 +- .../text-to-nato-alphabet.vue | 10 +- .../token-generator/token-generator.tool.vue | 8 +- src/tools/url-encoder/url-encoder.vue | 8 +- .../user-agent-result-cards.vue | 8 +- src/tools/uuid-generator/uuid-generator.vue | 13 ++- 40 files changed, 222 insertions(+), 246 deletions(-) diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue index 911d1e0a..9aaf1676 100644 --- a/src/components/ColoredCard.vue +++ b/src/components/ColoredCard.vue @@ -1,8 +1,6 @@ diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue index 64dc113e..db679146 100644 --- a/src/components/ToolCard.vue +++ b/src/components/ToolCard.vue @@ -1,9 +1,9 @@ diff --git a/src/tools/bcrypt/bcrypt.vue b/src/tools/bcrypt/bcrypt.vue index c0c86f66..eb366fa7 100644 --- a/src/tools/bcrypt/bcrypt.vue +++ b/src/tools/bcrypt/bcrypt.vue @@ -15,9 +15,9 @@ - +
Copy hash - +
diff --git a/src/tools/benchmark-builder/benchmark-builder.vue b/src/tools/benchmark-builder/benchmark-builder.vue index 3a6182fe..be350f24 100644 --- a/src/tools/benchmark-builder/benchmark-builder.vue +++ b/src/tools/benchmark-builder/benchmark-builder.vue @@ -1,6 +1,6 @@ diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue index 189be9ea..5e349fc8 100644 --- a/src/tools/benchmark-builder/dynamic-values.vue +++ b/src/tools/benchmark-builder/dynamic-values.vue @@ -1,6 +1,6 @@ diff --git a/src/tools/crontab-generator/crontab-generator.vue b/src/tools/crontab-generator/crontab-generator.vue index 6f8572d8..d2559d72 100644 --- a/src/tools/crontab-generator/crontab-generator.vue +++ b/src/tools/crontab-generator/crontab-generator.vue @@ -16,7 +16,7 @@ - +
@@ -28,7 +28,7 @@ - + 
@@ -42,8 +42,8 @@
 * * * * * * command
- - +
+
Symbol: {{ symbol }}
@@ -60,7 +60,7 @@ Equivalent: {{ equivalent }}
- + diff --git a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue index e66e9206..ea6e242e 100644 --- a/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue +++ b/src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue @@ -14,9 +14,9 @@ - +
Download docker-compose.yml - +
diff --git a/src/tools/encryption/encryption.vue b/src/tools/encryption/encryption.vue index d4f6e34a..4da451cf 100644 --- a/src/tools/encryption/encryption.vue +++ b/src/tools/encryption/encryption.vue @@ -1,7 +1,7 @@ diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue index 46b0f1f3..f0fc2398 100644 --- a/src/tools/hmac-generator/hmac-generator.vue +++ b/src/tools/hmac-generator/hmac-generator.vue @@ -6,15 +6,15 @@ - - +
+ - + - +
- +
Copy HMAC - +
diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue index eb4a5f36..0c75975b 100644 --- a/src/tools/html-entities/html-entities.vue +++ b/src/tools/html-entities/html-entities.vue @@ -19,9 +19,9 @@ /> - +
Copy - +
@@ -43,9 +43,9 @@ /> - +
Copy - +
diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue index ff21b695..b54d97b6 100644 --- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue +++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue @@ -1,10 +1,10 @@ + - - diff --git a/src/components/InputCopyable.vue b/src/components/InputCopyable.vue index cf7a42a7..27c0657f 100644 --- a/src/components/InputCopyable.vue +++ b/src/components/InputCopyable.vue @@ -1,20 +1,5 @@ - - + + diff --git a/src/components/MenuIconItem.vue b/src/components/MenuIconItem.vue index a08fe241..ed1b8881 100644 --- a/src/components/MenuIconItem.vue +++ b/src/components/MenuIconItem.vue @@ -1,14 +1,7 @@ - - + + + diff --git a/src/tools/benchmark-builder/dynamic-values.vue b/src/tools/benchmark-builder/dynamic-values.vue index 5e349fc8..975a545c 100644 --- a/src/tools/benchmark-builder/dynamic-values.vue +++ b/src/tools/benchmark-builder/dynamic-values.vue @@ -1,7 +1,37 @@ + + - - - - diff --git a/src/tools/bip39-generator/bip39-generator.vue b/src/tools/bip39-generator/bip39-generator.vue index 1aaa6e9c..5f005edf 100644 --- a/src/tools/bip39-generator/bip39-generator.vue +++ b/src/tools/bip39-generator/bip39-generator.vue @@ -1,3 +1,85 @@ + + - - diff --git a/src/tools/camera-recorder/camera-recorder.vue b/src/tools/camera-recorder/camera-recorder.vue index 81fec42c..19fe30b4 100644 --- a/src/tools/camera-recorder/camera-recorder.vue +++ b/src/tools/camera-recorder/camera-recorder.vue @@ -1,111 +1,9 @@ - - - + diff --git a/src/tools/camera-recorder/useMediaRecorder.ts b/src/tools/camera-recorder/useMediaRecorder.ts index eed0edda..a21328c2 100644 --- a/src/tools/camera-recorder/useMediaRecorder.ts +++ b/src/tools/camera-recorder/useMediaRecorder.ts @@ -1,15 +1,15 @@ -import { computed, ref, type Ref } from 'vue'; +import { type Ref, computed, ref } from 'vue'; export { useMediaRecorder }; function useMediaRecorder({ stream }: { stream: Ref }): { - isRecordingSupported: Ref; - recordingState: Ref<'stopped' | 'recording' | 'paused'>; - startRecording: () => void; - stopRecording: () => void; - pauseRecording: () => void; - resumeRecording: () => void; - onRecordAvailable: (cb: (url: string) => void) => void; + isRecordingSupported: Ref + recordingState: Ref<'stopped' | 'recording' | 'paused'> + startRecording: () => void + stopRecording: () => void + pauseRecording: () => void + resumeRecording: () => void + onRecordAvailable: (cb: (url: string) => void) => void } { const isRecordingSupported = computed(() => MediaRecorder.isTypeSupported('video/webm')); const mediaRecorder = ref(null); @@ -17,10 +17,23 @@ function useMediaRecorder({ stream }: { stream: Ref }): const recordAvailable = createEventHook(); const recordingState = ref<'stopped' | 'recording' | 'paused'>('stopped'); + const createVideo = () => { + const blob = new Blob(recordedChunks.value, { type: 'video/webm' }); + const url = URL.createObjectURL(blob); + recordedChunks.value = []; + return url; + }; + const startRecording = () => { - if (!isRecordingSupported.value) return; - if (!stream.value) return; - if (recordingState.value !== 'stopped') return; + if (!isRecordingSupported.value) { + return; + } + if (!stream.value) { + return; + } + if (recordingState.value !== 'stopped') { + return; + } mediaRecorder.value = new MediaRecorder(stream.value, { mimeType: 'video/webm' }); @@ -34,47 +47,60 @@ function useMediaRecorder({ stream }: { stream: Ref }): recordAvailable.trigger(createVideo()); }; - if (mediaRecorder.value.state !== 'inactive') return; + if (mediaRecorder.value.state !== 'inactive') { + return; + } mediaRecorder.value.start(); recordingState.value = 'recording'; }; const stopRecording = () => { - if (!isRecordingSupported.value) return; - if (!mediaRecorder.value) return; - if (recordingState.value === 'stopped') return; + if (!isRecordingSupported.value) { + return; + } + if (!mediaRecorder.value) { + return; + } + if (recordingState.value === 'stopped') { + return; + } mediaRecorder.value.stop(); recordingState.value = 'stopped'; }; const pauseRecording = () => { - if (!isRecordingSupported.value) return; - if (!mediaRecorder.value) return; - if (recordingState.value !== 'recording') return; + if (!isRecordingSupported.value) { + return; + } + if (!mediaRecorder.value) { + return; + } + if (recordingState.value !== 'recording') { + return; + } mediaRecorder.value.pause(); recordingState.value = 'paused'; }; const resumeRecording = () => { - if (!isRecordingSupported.value) return; - if (!mediaRecorder.value) return; + if (!isRecordingSupported.value) { + return; + } + if (!mediaRecorder.value) { + return; + } - if (recordingState.value !== 'paused') return; + if (recordingState.value !== 'paused') { + return; + } mediaRecorder.value.resume(); recordingState.value = 'recording'; }; - const createVideo = () => { - const blob = new Blob(recordedChunks.value, { type: 'video/webm' }); - const url = URL.createObjectURL(blob); - recordedChunks.value = []; - return url; - }; - return { isRecordingSupported, startRecording, diff --git a/src/tools/case-converter/case-converter.vue b/src/tools/case-converter/case-converter.vue index 2ad36568..4cf6507d 100644 --- a/src/tools/case-converter/case-converter.vue +++ b/src/tools/case-converter/case-converter.vue @@ -1,55 +1,3 @@ - - + + diff --git a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue index b54d97b6..01ba9c70 100644 --- a/src/tools/html-wysiwyg-editor/editor/menu-bar.vue +++ b/src/tools/html-wysiwyg-editor/editor/menu-bar.vue @@ -1,12 +1,3 @@ - - - + diff --git a/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue b/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue index 7cd12566..69238215 100644 --- a/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue +++ b/src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue @@ -1,16 +1,14 @@ - - - + diff --git a/src/tools/http-status-codes/http-status-codes.constants.ts b/src/tools/http-status-codes/http-status-codes.constants.ts index c64bda06..279cd7ce 100644 --- a/src/tools/http-status-codes/http-status-codes.constants.ts +++ b/src/tools/http-status-codes/http-status-codes.constants.ts @@ -1,11 +1,11 @@ export const codesByCategories: { - category: string; + category: string codes: { - code: number; - name: string; - description: string; - type: 'HTTP' | 'WebDav'; - }[]; + code: number + name: string + description: string + type: 'HTTP' | 'WebDav' + }[] }[] = [ { category: '1xx informational response', @@ -286,7 +286,7 @@ export const codesByCategories: { }, { code: 418, - name: "I'm a teapot", + name: 'I\'m a teapot', description: 'The server refuses the attempt to brew coffee with a teapot.', type: 'HTTP', }, diff --git a/src/tools/http-status-codes/http-status-codes.e2e.spec.ts b/src/tools/http-status-codes/http-status-codes.e2e.spec.ts index 59979cd2..cf6eae9d 100644 --- a/src/tools/http-status-codes/http-status-codes.e2e.spec.ts +++ b/src/tools/http-status-codes/http-status-codes.e2e.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { expect, test } from '@playwright/test'; test.describe('Tool - Http status codes', () => { test.beforeEach(async ({ page }) => { diff --git a/src/tools/http-status-codes/http-status-codes.vue b/src/tools/http-status-codes/http-status-codes.vue index 9f827f5a..0fb11251 100644 --- a/src/tools/http-status-codes/http-status-codes.vue +++ b/src/tools/http-status-codes/http-status-codes.vue @@ -1,3 +1,27 @@ + + - - - - diff --git a/src/tools/index.ts b/src/tools/index.ts index 44ef8a3f..211a8a81 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -140,5 +140,5 @@ export const toolsByCategory: ToolCategory[] = [ export const tools = toolsByCategory.flatMap(({ components }) => components); export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) => - components.map((tool) => ({ category: name, ...tool })), + components.map(tool => ({ category: name, ...tool })), ); diff --git a/src/tools/integer-base-converter/integer-base-converter.model.test.ts b/src/tools/integer-base-converter/integer-base-converter.model.test.ts index e9d91f6f..d0387b64 100644 --- a/src/tools/integer-base-converter/integer-base-converter.model.test.ts +++ b/src/tools/integer-base-converter/integer-base-converter.model.test.ts @@ -1,4 +1,4 @@ -import { expect, describe, it } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { convertBase } from './integer-base-converter.model'; describe('integer-base-converter', () => { diff --git a/src/tools/integer-base-converter/integer-base-converter.model.ts b/src/tools/integer-base-converter/integer-base-converter.model.ts index cfe15bd1..b4470e57 100644 --- a/src/tools/integer-base-converter/integer-base-converter.model.ts +++ b/src/tools/integer-base-converter/integer-base-converter.model.ts @@ -7,9 +7,9 @@ export function convertBase({ value, fromBase, toBase }: { value: string; fromBa .reverse() .reduce((carry: number, digit: string, index: number) => { if (!fromRange.includes(digit)) { - throw new Error('Invalid digit "' + digit + '" for base ' + fromBase + '.'); + throw new Error(`Invalid digit "${digit}" for base ${fromBase}.`); } - return (carry += fromRange.indexOf(digit) * Math.pow(fromBase, index)); + return (carry += fromRange.indexOf(digit) * fromBase ** index); }, 0); let newValue = ''; while (decValue > 0) { diff --git a/src/tools/integer-base-converter/integer-base-converter.vue b/src/tools/integer-base-converter/integer-base-converter.vue index 058d8319..01f6401a 100644 --- a/src/tools/integer-base-converter/integer-base-converter.vue +++ b/src/tools/integer-base-converter/integer-base-converter.vue @@ -1,56 +1,103 @@ + + - - + diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts index b9198275..7d9a4a8f 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { expect, test } from '@playwright/test'; test.describe('Tool - IPv4 range expander', () => { test.beforeEach(async ({ page }) => { diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts index 6888ac12..51046232 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts @@ -1,4 +1,4 @@ -import { expect, describe, it } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { calculateCidr } from './ipv4-range-expander.service'; describe('ipv4RangeExpander', () => { diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts index 7dd2c644..78fbde5b 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.service.ts @@ -1,20 +1,25 @@ -import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types'; import { convertBase } from '../integer-base-converter/integer-base-converter.model'; import { ipv4ToInt } from '../ipv4-address-converter/ipv4-address-converter.service'; +import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types'; + export { calculateCidr }; function bits2ip(ipInt: number) { - return (ipInt >>> 24) + '.' + ((ipInt >> 16) & 255) + '.' + ((ipInt >> 8) & 255) + '.' + (ipInt & 255); + return `${ipInt >>> 24}.${(ipInt >> 16) & 255}.${(ipInt >> 8) & 255}.${ipInt & 255}`; } function getRangesize(start: string, end: string) { - if (start == null || end == null) return -1; + if (start == null || end == null) { + return -1; + } return 1 + parseInt(end, 2) - parseInt(start, 2); } function getCidr(start: string, end: string) { - if (start == null || end == null) return null; + if (start == null || end == null) { + return null; + } const range = getRangesize(start, end); if (range < 1) { @@ -32,7 +37,7 @@ function getCidr(start: string, end: string) { const newStart = start.substring(0, mask) + '0'.repeat(32 - mask); const newEnd = end.substring(0, mask) + '1'.repeat(32 - mask); - return { start: newStart, end: newEnd, mask: mask }; + return { start: newStart, end: newEnd, mask }; } function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) { @@ -52,7 +57,7 @@ function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) { const result: Ipv4RangeExpanderResult = {}; result.newEnd = bits2ip(parseInt(cidr.end, 2)); result.newStart = bits2ip(parseInt(cidr.start, 2)); - result.newCidr = result.newStart + '/' + cidr.mask; + result.newCidr = `${result.newStart}/${cidr.mask}`; result.newSize = getRangesize(cidr.start, cidr.end); result.oldSize = getRangesize(start, end); diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.types.ts b/src/tools/ipv4-range-expander/ipv4-range-expander.types.ts index 9172fed0..d5d2b45e 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.types.ts +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.types.ts @@ -1,7 +1,7 @@ -export type Ipv4RangeExpanderResult = { - oldSize?: number; - newStart?: string; - newEnd?: string; - newCidr?: string; - newSize?: number; -}; +export interface Ipv4RangeExpanderResult { + oldSize?: number + newStart?: string + newEnd?: string + newCidr?: string + newSize?: number +} diff --git a/src/tools/ipv4-range-expander/ipv4-range-expander.vue b/src/tools/ipv4-range-expander/ipv4-range-expander.vue index f1b8dc68..16ce62fb 100644 --- a/src/tools/ipv4-range-expander/ipv4-range-expander.vue +++ b/src/tools/ipv4-range-expander/ipv4-range-expander.vue @@ -1,3 +1,61 @@ + + - - - - diff --git a/src/tools/ipv4-range-expander/result-row.vue b/src/tools/ipv4-range-expander/result-row.vue index b1782fea..efa0b648 100644 --- a/src/tools/ipv4-range-expander/result-row.vue +++ b/src/tools/ipv4-range-expander/result-row.vue @@ -1,18 +1,6 @@ - - - + diff --git a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue index ca9f424f..d16e5573 100644 --- a/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue +++ b/src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue @@ -1,51 +1,12 @@ - - - + diff --git a/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue b/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue index 8f1b1302..66c69c6c 100644 --- a/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue +++ b/src/tools/ipv6-ula-generator/ipv6-ula-generator.vue @@ -1,36 +1,3 @@ - - - + diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx index 5a19febf..d2117dfb 100644 --- a/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx +++ b/src/tools/json-diff/diff-viewer/diff-viewer.models.tsx @@ -1,16 +1,16 @@ import _ from 'lodash'; +import type { ArrayDifference, Difference, ObjectDifference } from '../json-diff.types'; import { useCopy } from '@/composable/copy'; -import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types'; -export const DiffRootViewer = ({ diff }: { diff: Difference }) => { +export function DiffRootViewer({ diff }: { diff: Difference }) { return (
    {DiffViewer({ diff, showKeys: false })}
); -}; +} -const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => { +function DiffViewer({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) { const { type, status } = diff; if (status === 'updated') { @@ -26,9 +26,9 @@ const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: bo } return LineDiffViewer({ diff, showKeys }); -}; +} -const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { +function LineDiffViewer({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) { const { value, key, status, oldValue } = diff; const valueToDisplay = status === 'removed' ? oldValue : value; @@ -46,9 +46,9 @@ const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boole , ); -}; +} -const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => { +function ComparisonViewer({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) { const { value, key, oldValue } = diff; return ( @@ -63,21 +63,21 @@ const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boo {Value({ value, status: 'added' })}, ); -}; +} -const ChildrenViewer = ({ +function ChildrenViewer({ diff, openTag, closeTag, showKeys, showChildrenKeys = true, }: { - diff: ArrayDifference | ObjectDifference; - showKeys: boolean; - showChildrenKeys?: boolean; - openTag: string; - closeTag: string; -}) => { + diff: ArrayDifference | ObjectDifference + showKeys: boolean + showChildrenKeys?: boolean + openTag: string + closeTag: string +}) { const { children, key, status, type } = diff; return ( @@ -91,12 +91,12 @@ const ChildrenViewer = ({ )} {openTag} - {children.length > 0 &&
    {children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}
} - {closeTag + ','} + {children.length > 0 &&
    {children.map(diff => DiffViewer({ diff, showKeys: showChildrenKeys }))}
} + {`${closeTag},`} ); -}; +} function formatValue(value: unknown) { if (_.isNull(value)) { @@ -106,7 +106,7 @@ function formatValue(value: unknown) { return JSON.stringify(value); } -const Value = ({ value, status }: { value: unknown; status: string }) => { +function Value({ value, status }: { value: unknown; status: string }) { const formatedValue = formatValue(value); const { copy } = useCopy({ source: formatedValue }); @@ -116,4 +116,4 @@ const Value = ({ value, status }: { value: unknown; status: string }) => { {formatedValue} ); -}; +} diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue index 8d17e6bc..08c47848 100644 --- a/src/tools/json-diff/diff-viewer/diff-viewer.vue +++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue @@ -1,26 +1,11 @@ - - + + + diff --git a/src/tools/json-viewer/json-viewer.vue b/src/tools/json-viewer/json-viewer.vue index 7e95db1f..5fa3d361 100644 --- a/src/tools/json-viewer/json-viewer.vue +++ b/src/tools/json-viewer/json-viewer.vue @@ -1,3 +1,30 @@ + + - - + diff --git a/src/tools/list-converter/list-converter.e2e.spec.ts b/src/tools/list-converter/list-converter.e2e.spec.ts index a5ac8c6d..4accbf06 100644 --- a/src/tools/list-converter/list-converter.e2e.spec.ts +++ b/src/tools/list-converter/list-converter.e2e.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { expect, test } from '@playwright/test'; test.describe('Tool - List converter', () => { test.beforeEach(async ({ page }) => { @@ -30,10 +30,10 @@ test.describe('Tool - List converter', () => { 3 5`); await page.getByTestId('removeDuplicates').check(); - await page.getByTestId('itemPrefix').fill("'"); - await page.getByTestId('itemSuffix').fill("'"); + await page.getByTestId('itemPrefix').fill('\''); + await page.getByTestId('itemSuffix').fill('\''); const result = await page.getByTestId('area-content').innerText(); - expect(result.trim()).toEqual("'1', '2', '4', '3', '5'"); + expect(result.trim()).toEqual('\'1\', \'2\', \'4\', \'3\', \'5\''); }); }); diff --git a/src/tools/list-converter/list-converter.models.test.ts b/src/tools/list-converter/list-converter.models.test.ts index 944f0f3b..abbc43c2 100644 --- a/src/tools/list-converter/list-converter.models.test.ts +++ b/src/tools/list-converter/list-converter.models.test.ts @@ -1,4 +1,4 @@ -import { expect, describe, it } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { convert } from './list-converter.models'; import type { ConvertOptions } from './list-converter.types'; diff --git a/src/tools/list-converter/list-converter.models.ts b/src/tools/list-converter/list-converter.models.ts index 1df9b38a..548baa28 100644 --- a/src/tools/list-converter/list-converter.models.ts +++ b/src/tools/list-converter/list-converter.models.ts @@ -1,27 +1,27 @@ import _ from 'lodash'; -import { byOrder } from '@/utils/array'; import type { ConvertOptions } from './list-converter.types'; +import { byOrder } from '@/utils/array'; export { convert }; -const whenever = - (condition: boolean, fn: (value: T) => R) => - (value: T) => +function whenever(condition: boolean, fn: (value: T) => R) { + return (value: T) => condition ? fn(value) : value; +} function convert(list: string, options: ConvertOptions): string { const lineBreak = options.keepLineBreaks ? '\n' : ''; return _.chain(list) - .thru(whenever(options.lowerCase, (text) => text.toLowerCase())) + .thru(whenever(options.lowerCase, text => text.toLowerCase())) .split('\n') .thru(whenever(options.removeDuplicates, _.uniq)) .thru(whenever(options.reverseList, _.reverse)) - .thru(whenever(!_.isNull(options.sortList), (parts) => parts.sort(byOrder({ order: options.sortList })))) + .thru(whenever(!_.isNull(options.sortList), parts => parts.sort(byOrder({ order: options.sortList })))) .map(whenever(options.trimItems, _.trim)) .without('') - .map((p) => options.itemPrefix + p + options.itemSuffix) + .map(p => options.itemPrefix + p + options.itemSuffix) .join(options.separator + lineBreak) - .thru((text) => [options.listPrefix, text, options.listSuffix].join(lineBreak)) + .thru(text => [options.listPrefix, text, options.listSuffix].join(lineBreak)) .value(); } diff --git a/src/tools/list-converter/list-converter.types.ts b/src/tools/list-converter/list-converter.types.ts index cfcaeade..3f9ea3f8 100644 --- a/src/tools/list-converter/list-converter.types.ts +++ b/src/tools/list-converter/list-converter.types.ts @@ -1,15 +1,15 @@ export type SortOrder = 'asc' | 'desc' | null; -export type ConvertOptions = { - lowerCase: boolean; - trimItems: boolean; - itemPrefix: string; - itemSuffix: string; - listPrefix: string; - listSuffix: string; - reverseList: boolean; - sortList: SortOrder; - removeDuplicates: boolean; - separator: string; - keepLineBreaks: boolean; -}; +export interface ConvertOptions { + lowerCase: boolean + trimItems: boolean + itemPrefix: string + itemSuffix: string + listPrefix: string + listSuffix: string + reverseList: boolean + sortList: SortOrder + removeDuplicates: boolean + separator: string + keepLineBreaks: boolean +} diff --git a/src/tools/list-converter/list-converter.vue b/src/tools/list-converter/list-converter.vue index 7258dc36..2e6d2b3a 100644 --- a/src/tools/list-converter/list-converter.vue +++ b/src/tools/list-converter/list-converter.vue @@ -1,3 +1,40 @@ + + - - - - diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.service.ts b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.service.ts index 4122a7bb..b21a302b 100644 --- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.service.ts +++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.service.ts @@ -179,13 +179,13 @@ const vocabulary = [ ]; const firstSentence = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'; -const generateSentence = (length: number) => { +function generateSentence(length: number) { const sentence = Array.from({ length }) .map(() => randFromArray(vocabulary)) .join(' '); - return sentence.charAt(0).toUpperCase() + sentence.slice(1) + '.'; -}; + return `${sentence.charAt(0).toUpperCase() + sentence.slice(1)}.`; +} export function generateLoremIpsum({ paragraphCount = 1, @@ -194,11 +194,11 @@ export function generateLoremIpsum({ startWithLoremIpsum = true, asHTML = false, }: { - paragraphCount?: number; - sentencePerParagraph?: number; - wordCount?: number; - startWithLoremIpsum?: boolean; - asHTML?: boolean; + paragraphCount?: number + sentencePerParagraph?: number + wordCount?: number + startWithLoremIpsum?: boolean + asHTML?: boolean }) { const paragraphs = Array.from({ length: paragraphCount }).map(() => Array.from({ length: sentencePerParagraph }).map(() => generateSentence(wordCount)), @@ -209,8 +209,8 @@ export function generateLoremIpsum({ } if (asHTML) { - return `

${paragraphs.map((s) => s.join(' ')).join('

\n\n

')}

`; + return `

${paragraphs.map(s => s.join(' ')).join('

\n\n

')}

`; } - return paragraphs.map((s) => s.join(' ')).join('\n\n'); + return paragraphs.map(s => s.join(' ')).join('\n\n'); } diff --git a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue index 9e3b1866..4423eb4e 100644 --- a/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue +++ b/src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue @@ -1,3 +1,27 @@ + + - - diff --git a/src/tools/mac-address-lookup/mac-address-lookup.vue b/src/tools/mac-address-lookup/mac-address-lookup.vue index 095a0ee0..05382ebf 100644 --- a/src/tools/mac-address-lookup/mac-address-lookup.vue +++ b/src/tools/mac-address-lookup/mac-address-lookup.vue @@ -1,3 +1,16 @@ + + - - - - diff --git a/src/tools/math-evaluator/index.ts b/src/tools/math-evaluator/index.ts index ad783d25..3dc15f4f 100644 --- a/src/tools/math-evaluator/index.ts +++ b/src/tools/math-evaluator/index.ts @@ -4,7 +4,7 @@ import { defineTool } from '../tool'; export const tool = defineTool({ name: 'Math evaluator', path: '/math-evaluator', - description: `Evaluate math expression, like a calculator on steroid (you can use function like sqrt, cos, sin, abs, ...)`, + description: 'Evaluate math expression, like a calculator on steroid (you can use function like sqrt, cos, sin, abs, ...)', keywords: [ 'math', 'evaluator', diff --git a/src/tools/math-evaluator/math-evaluator.vue b/src/tools/math-evaluator/math-evaluator.vue index a8b359b4..0429e6eb 100644 --- a/src/tools/math-evaluator/math-evaluator.vue +++ b/src/tools/math-evaluator/math-evaluator.vue @@ -1,3 +1,13 @@ + + - - diff --git a/src/tools/meta-tag-generator/OGSchemaType.type.ts b/src/tools/meta-tag-generator/OGSchemaType.type.ts index 8d09013b..64387b8c 100644 --- a/src/tools/meta-tag-generator/OGSchemaType.type.ts +++ b/src/tools/meta-tag-generator/OGSchemaType.type.ts @@ -3,25 +3,25 @@ import type { SelectGroupOption, SelectOption } from 'naive-ui'; export type { OGSchemaType, OGSchemaTypeElementInput, OGSchemaTypeElementSelect, OGSchemaTypeElementInputMultiple }; interface OGSchemaTypeElementBase { - key: string; - label: string; - placeholder: string; + key: string + label: string + placeholder: string } interface OGSchemaTypeElementInput extends OGSchemaTypeElementBase { - type: 'input'; + type: 'input' } interface OGSchemaTypeElementInputMultiple extends OGSchemaTypeElementBase { - type: 'input-multiple'; + type: 'input-multiple' } interface OGSchemaTypeElementSelect extends OGSchemaTypeElementBase { - type: 'select'; - options: Array; + type: 'select' + options: Array } interface OGSchemaType { - name: string; - elements: (OGSchemaTypeElementSelect | OGSchemaTypeElementInput | OGSchemaTypeElementInputMultiple)[]; + name: string + elements: (OGSchemaTypeElementSelect | OGSchemaTypeElementInput | OGSchemaTypeElementInputMultiple)[] } diff --git a/src/tools/meta-tag-generator/meta-tag-generator.vue b/src/tools/meta-tag-generator/meta-tag-generator.vue index 73fad8b4..12e660e4 100644 --- a/src/tools/meta-tag-generator/meta-tag-generator.vue +++ b/src/tools/meta-tag-generator/meta-tag-generator.vue @@ -1,10 +1,65 @@ + + - - + diff --git a/src/tools/qr-code-generator/qr-code-generator.vue b/src/tools/qr-code-generator/qr-code-generator.vue index 12fcf113..f6ea7c8e 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 @@ + + - - diff --git a/src/tools/qr-code-generator/useQRCode.ts b/src/tools/qr-code-generator/useQRCode.ts index 64ee90a1..5aa54500 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; - color: { foreground: MaybeRef; background: MaybeRef }; - errorCorrectionLevel?: MaybeRef; - options?: QRCodeToDataURLOptions; + text: MaybeRef + color: { foreground: MaybeRef; background: MaybeRef } + errorCorrectionLevel?: MaybeRef + 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 }, ); diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue index 8e3ecb63..e4ac609c 100644 --- a/src/tools/random-port-generator/random-port-generator.vue +++ b/src/tools/random-port-generator/random-port-generator.vue @@ -1,25 +1,29 @@ + + - - + diff --git a/src/tools/slugify-string/slugify-string.vue b/src/tools/slugify-string/slugify-string.vue index c140e21e..0f5ddc2f 100644 --- a/src/tools/slugify-string/slugify-string.vue +++ b/src/tools/slugify-string/slugify-string.vue @@ -1,24 +1,3 @@ - - - + diff --git a/src/tools/sql-prettify/sql-prettify.vue b/src/tools/sql-prettify/sql-prettify.vue index b8d4aa4f..2ee93da8 100644 --- a/src/tools/sql-prettify/sql-prettify.vue +++ b/src/tools/sql-prettify/sql-prettify.vue @@ -1,3 +1,23 @@ + + - - + diff --git a/src/tools/text-statistics/index.ts b/src/tools/text-statistics/index.ts index def0b6d6..0e54b71b 100644 --- a/src/tools/text-statistics/index.ts +++ b/src/tools/text-statistics/index.ts @@ -4,7 +4,7 @@ import { defineTool } from '../tool'; export const tool = defineTool({ name: 'Text statistics', path: '/text-statistics', - description: "Get information about a text, the amount of characters, the amount of words, it's size, ...", + description: 'Get information about a text, the amount of characters, the amount of words, it\'s size, ...', keywords: ['text', 'statistics', 'length', 'characters', 'count', 'size', 'bytes'], component: () => import('./text-statistics.vue'), icon: FileText, diff --git a/src/tools/text-statistics/text-statistics.service.test.ts b/src/tools/text-statistics/text-statistics.service.test.ts index 52606834..18ffc399 100644 --- a/src/tools/text-statistics/text-statistics.service.test.ts +++ b/src/tools/text-statistics/text-statistics.service.test.ts @@ -1,4 +1,4 @@ -import { expect, describe, it } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { getStringSizeInBytes } from './text-statistics.service'; describe('text-statistics', () => { diff --git a/src/tools/text-statistics/text-statistics.vue b/src/tools/text-statistics/text-statistics.vue index a03915c7..ec543faf 100644 --- a/src/tools/text-statistics/text-statistics.vue +++ b/src/tools/text-statistics/text-statistics.vue @@ -1,3 +1,11 @@ + + - - diff --git a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue index 9ded4ff6..75b23344 100644 --- a/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue +++ b/src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue @@ -1,3 +1,13 @@ + + - - - - diff --git a/src/tools/token-generator/token-generator.e2e.spec.ts b/src/tools/token-generator/token-generator.e2e.spec.ts index 905a81cc..444c5384 100644 --- a/src/tools/token-generator/token-generator.e2e.spec.ts +++ b/src/tools/token-generator/token-generator.e2e.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { expect, test } from '@playwright/test'; test.describe('Tool - Token generator', () => { test.beforeEach(async ({ page }) => { diff --git a/src/tools/token-generator/token-generator.service.test.ts b/src/tools/token-generator/token-generator.service.test.ts index ed9dab31..604f5a89 100644 --- a/src/tools/token-generator/token-generator.service.test.ts +++ b/src/tools/token-generator/token-generator.service.test.ts @@ -1,4 +1,4 @@ -import { expect, describe, it } from 'vitest'; +import { describe, expect, it } from 'vitest'; import { createToken } from './token-generator.service'; describe('token-generator', () => { diff --git a/src/tools/token-generator/token-generator.service.ts b/src/tools/token-generator/token-generator.service.ts index f48a4deb..1885d249 100644 --- a/src/tools/token-generator/token-generator.service.ts +++ b/src/tools/token-generator/token-generator.service.ts @@ -8,16 +8,16 @@ export function createToken({ length = 64, alphabet, }: { - withUppercase?: boolean; - withLowercase?: boolean; - withNumbers?: boolean; - withSymbols?: boolean; - length?: number; - alphabet?: string; + withUppercase?: boolean + withLowercase?: boolean + withNumbers?: boolean + withSymbols?: boolean + length?: number + alphabet?: string }) { - const allAlphabet = - alphabet ?? - [ + const allAlphabet + = alphabet + ?? [ ...(withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : ''), ...(withLowercase ? 'abcdefghijklmopqrstuvwxyz' : ''), ...(withNumbers ? '0123456789' : ''), diff --git a/src/tools/token-generator/token-generator.tool.vue b/src/tools/token-generator/token-generator.tool.vue index bdfb4da2..81b7b583 100644 --- a/src/tools/token-generator/token-generator.tool.vue +++ b/src/tools/token-generator/token-generator.tool.vue @@ -1,3 +1,28 @@ + + - - diff --git a/src/tools/tools.store.ts b/src/tools/tools.store.ts index 2b0826c1..769b4d8b 100644 --- a/src/tools/tools.store.ts +++ b/src/tools/tools.store.ts @@ -1,8 +1,8 @@ -import { get, useStorage, type MaybeRef } from '@vueuse/core'; +import { type MaybeRef, get, useStorage } from '@vueuse/core'; import { defineStore } from 'pinia'; import type { Ref } from 'vue'; -import { toolsWithCategory } from './index'; import type { Tool, ToolWithCategory } from './tools.types'; +import { toolsWithCategory } from './index'; export const useToolStore = defineStore('tools', { state: () => ({ @@ -11,12 +11,12 @@ export const useToolStore = defineStore('tools', { getters: { favoriteTools(state) { return state.favoriteToolsName - .map((favoriteName) => toolsWithCategory.find(({ name }) => name === favoriteName)) + .map(favoriteName => toolsWithCategory.find(({ name }) => name === favoriteName)) .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type }, notFavoriteTools(state): ToolWithCategory[] { - return toolsWithCategory.filter((tool) => !state.favoriteToolsName.includes(tool.name)); + return toolsWithCategory.filter(tool => !state.favoriteToolsName.includes(tool.name)); }, tools(): ToolWithCategory[] { @@ -34,7 +34,7 @@ export const useToolStore = defineStore('tools', { }, removeToolFromFavorites({ tool }: { tool: MaybeRef }) { - this.favoriteToolsName = this.favoriteToolsName.filter((name) => get(tool).name !== name); + this.favoriteToolsName = this.favoriteToolsName.filter(name => get(tool).name !== name); }, isToolFavorite({ tool }: { tool: MaybeRef }) { diff --git a/src/tools/tools.types.ts b/src/tools/tools.types.ts index 48f60629..dcef8543 100644 --- a/src/tools/tools.types.ts +++ b/src/tools/tools.types.ts @@ -1,20 +1,20 @@ import type { Component } from 'vue'; -export type Tool = { - name: string; - path: string; - description: string; - keywords: string[]; - component: () => Promise; - icon: Component; - redirectFrom?: string[]; - isNew: boolean; - createdAt?: Date; -}; +export interface Tool { + name: string + path: string + description: string + keywords: string[] + component: () => Promise + icon: Component + redirectFrom?: string[] + isNew: boolean + createdAt?: Date +} -export type ToolCategory = { - name: string; - components: Tool[]; -}; +export interface ToolCategory { + name: string + components: Tool[] +} export type ToolWithCategory = Tool & { category: string }; diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index 4f89986a..5fdcade9 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -1,3 +1,41 @@ + + - - diff --git a/src/tools/url-parser/url-parser.vue b/src/tools/url-parser/url-parser.vue index 04ab9395..cadd07ef 100644 --- a/src/tools/url-parser/url-parser.vue +++ b/src/tools/url-parser/url-parser.vue @@ -1,49 +1,8 @@ - - + + diff --git a/src/tools/user-agent-parser/user-agent-result-cards.vue b/src/tools/user-agent-parser/user-agent-result-cards.vue index 20226c1d..b3901ac2 100644 --- a/src/tools/user-agent-parser/user-agent-result-cards.vue +++ b/src/tools/user-agent-parser/user-agent-result-cards.vue @@ -1,3 +1,15 @@ + + - - diff --git a/src/tools/uuid-generator/uuid-generator.vue b/src/tools/uuid-generator/uuid-generator.vue index de9cbf2f..f1265e15 100644 --- a/src/tools/uuid-generator/uuid-generator.vue +++ b/src/tools/uuid-generator/uuid-generator.vue @@ -1,3 +1,17 @@ + + - - diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts index 10db4495..7b2a2d18 100644 --- a/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts +++ b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/test'; +import { expect, test } from '@playwright/test'; test.describe('Tool - Yaml to json', () => { test.beforeEach(async ({ page }) => { diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.vue b/src/tools/yaml-to-json-converter/yaml-to-json.vue index c066bdd5..39c9297f 100644 --- a/src/tools/yaml-to-json-converter/yaml-to-json.vue +++ b/src/tools/yaml-to-json-converter/yaml-to-json.vue @@ -1,3 +1,24 @@ + + - - - - diff --git a/src/ui/c-alert/c-alert.demo.vue b/src/ui/c-alert/c-alert.demo.vue index 5d8d1f2d..546c7852 100644 --- a/src/ui/c-alert/c-alert.demo.vue +++ b/src/ui/c-alert/c-alert.demo.vue @@ -1,3 +1,7 @@ + + - - diff --git a/src/ui/c-alert/c-alert.theme.ts b/src/ui/c-alert/c-alert.theme.ts index b974c374..36d5d348 100644 --- a/src/ui/c-alert/c-alert.theme.ts +++ b/src/ui/c-alert/c-alert.theme.ts @@ -2,7 +2,6 @@ import { darken } from '../color/color.models'; import { defineThemes } from '../theme/theme.models'; import { appThemes } from '../theme/themes'; -// eslint-disable-next-line import WarningIcon from '~icons/mdi/alert-circle-outline'; export const { useTheme } = defineThemes({ diff --git a/src/ui/c-alert/c-alert.vue b/src/ui/c-alert/c-alert.vue index 1fedbb0b..607acb9f 100644 --- a/src/ui/c-alert/c-alert.vue +++ b/src/ui/c-alert/c-alert.vue @@ -1,3 +1,13 @@ + + - - diff --git a/src/ui/c-button/c-button.theme.ts b/src/ui/c-button/c-button.theme.ts index e2e1591f..926cd110 100644 --- a/src/ui/c-button/c-button.theme.ts +++ b/src/ui/c-button/c-button.theme.ts @@ -2,7 +2,7 @@ import { darken, lighten } from '../color/color.models'; import { defineThemes } from '../theme/theme.models'; import { appThemes } from '../theme/themes'; -const createState = ({ +function createState({ textColor, backgroundColor, hoverBackground, @@ -10,20 +10,22 @@ const createState = ({ pressedBackground, pressedTextColor = textColor, }: { - textColor: string; - backgroundColor: string; - hoverBackground: string; - hoveredTextColor?: string; - pressedBackground: string; - pressedTextColor?: string; -}) => ({ - textColor, - backgroundColor, - hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground }, - pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground }, -}); + textColor: string + backgroundColor: string + hoverBackground: string + hoveredTextColor?: string + pressedBackground: string + pressedTextColor?: string +}) { + return { + textColor, + backgroundColor, + hover: { textColor: hoveredTextColor, backgroundColor: hoverBackground }, + pressed: { textColor: pressedTextColor, backgroundColor: pressedBackground }, + }; +} -const createTheme = ({ style }: { style: 'light' | 'dark' }) => { +function createTheme({ style }: { style: 'light' | 'dark' }) { const theme = appThemes[style]; return { @@ -95,7 +97,7 @@ const createTheme = ({ style }: { style: 'light' | 'dark' }) => { }), }, }; -}; +} export const { useTheme } = defineThemes({ dark: createTheme({ style: 'dark' }), diff --git a/src/ui/c-button/c-button.vue b/src/ui/c-button/c-button.vue index 24b91b84..06a4786d 100644 --- a/src/ui/c-button/c-button.vue +++ b/src/ui/c-button/c-button.vue @@ -1,31 +1,18 @@ - - + + + diff --git a/src/ui/c-link/c-link.vue b/src/ui/c-link/c-link.vue index a7d1b831..828d56f1 100644 --- a/src/ui/c-link/c-link.vue +++ b/src/ui/c-link/c-link.vue @@ -1,16 +1,10 @@ - - + + diff --git a/src/utils/base64.ts b/src/utils/base64.ts index 44fda1ed..16912ee3 100644 --- a/src/utils/base64.ts +++ b/src/utils/base64.ts @@ -6,7 +6,7 @@ function textToBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: bool } function base64ToText(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boolean } = {}) { - if (!isValidBase64(str, { makeUrlSafe: makeUrlSafe })) { + if (!isValidBase64(str, { makeUrlSafe })) { throw new Error('Incorrect base64 string'); } @@ -17,7 +17,8 @@ function base64ToText(str: string, { makeUrlSafe = false }: { makeUrlSafe?: bool try { return window.atob(cleanStr); - } catch (_) { + } + catch (_) { throw new Error('Incorrect base64 string'); } } @@ -37,7 +38,8 @@ function isValidBase64(str: string, { makeUrlSafe = false }: { makeUrlSafe?: boo return removePotentialPadding(window.btoa(window.atob(cleanStr))) === cleanStr; } return window.btoa(window.atob(cleanStr)) === cleanStr; - } catch (err) { + } + catch (err) { return false; } } diff --git a/src/utils/boolean.test.ts b/src/utils/boolean.test.ts index 52bda9e2..07daa056 100644 --- a/src/utils/boolean.test.ts +++ b/src/utils/boolean.test.ts @@ -8,7 +8,7 @@ describe('boolean utils', () => { expect(isNotThrowing(_.noop)).to.eql(true); expect( isNotThrowing(() => { - throw new Error(); + throw new Error('message'); }), ).to.eql(false); }); diff --git a/src/utils/boolean.ts b/src/utils/boolean.ts index cf10b377..8dca5e9b 100644 --- a/src/utils/boolean.ts +++ b/src/utils/boolean.ts @@ -4,7 +4,8 @@ function isNotThrowing(cb: () => unknown): boolean { try { cb(); return true; - } catch (_) { + } + catch (_) { return false; } } diff --git a/src/utils/convert.ts b/src/utils/convert.ts index c8c325fe..c897543c 100644 --- a/src/utils/convert.ts +++ b/src/utils/convert.ts @@ -7,5 +7,5 @@ export function formatBytes(bytes: number, decimals = 2) { const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); - return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i]; + return `${parseFloat((bytes / k ** i).toFixed(decimals))} ${sizes[i]}`; } diff --git a/src/utils/defaults.test.ts b/src/utils/defaults.test.ts index b322968c..50017980 100644 --- a/src/utils/defaults.test.ts +++ b/src/utils/defaults.test.ts @@ -9,7 +9,7 @@ describe('defaults util', () => { expect( withDefaultOnError(() => { - throw ''; + throw new Error('message'); }, 'default'), ).to.eql('default'); }); diff --git a/src/utils/defaults.ts b/src/utils/defaults.ts index 1e52b495..c988af58 100644 --- a/src/utils/defaults.ts +++ b/src/utils/defaults.ts @@ -3,7 +3,8 @@ export { withDefaultOnError, withDefaultOnErrorAsync }; function withDefaultOnError(cb: () => A, defaultValue: B): A | B { try { return cb(); - } catch (_) { + } + catch (_) { return defaultValue; } } @@ -11,7 +12,8 @@ function withDefaultOnError(cb: () => A, defaultValue: B): A | B { async function withDefaultOnErrorAsync(cb: () => A, defaultValue: B): Promise | B> { try { return await cb(); - } catch (_) { + } + catch (_) { return defaultValue; } } diff --git a/src/utils/error.test.ts b/src/utils/error.test.ts index 02728049..62bf272e 100644 --- a/src/utils/error.test.ts +++ b/src/utils/error.test.ts @@ -6,6 +6,7 @@ describe('error util', () => { it('get an error message if the callback throws, undefined instead', () => { expect( getErrorMessageIfThrows(() => { + // eslint-disable-next-line no-throw-literal throw 'message'; }), ).to.equal('message'); @@ -18,11 +19,11 @@ describe('error util', () => { expect( getErrorMessageIfThrows(() => { + // eslint-disable-next-line no-throw-literal throw { message: 'message' }; }), ).to.equal('message'); - // eslint-disable-next-line @typescript-eslint/no-empty-function expect(getErrorMessageIfThrows(() => {})).to.equal(undefined); }); }); diff --git a/src/utils/error.ts b/src/utils/error.ts index 681db912..297edd98 100644 --- a/src/utils/error.ts +++ b/src/utils/error.ts @@ -6,7 +6,8 @@ function getErrorMessageIfThrows(cb: () => unknown) { try { cb(); return undefined; - } catch (err) { + } + catch (err) { if (_.isString(err)) { return err; } diff --git a/src/utils/macAddress.ts b/src/utils/macAddress.ts index 89f12d32..4488b329 100644 --- a/src/utils/macAddress.ts +++ b/src/utils/macAddress.ts @@ -1,5 +1,5 @@ -import { useValidation } from '@/composable/validation'; import type { Ref } from 'vue'; +import { useValidation } from '@/composable/validation'; const macAddressValidationRules = [ { diff --git a/src/utils/random.ts b/src/utils/random.ts index 3a13be50..02df9479 100644 --- a/src/utils/random.ts +++ b/src/utils/random.ts @@ -5,14 +5,14 @@ const randFromArray = (array: unknown[]) => array[Math.floor(random() * array.le const randIntFromInterval = (min: number, max: number) => Math.floor(random() * (max - min) + min); // Durstenfeld shuffle -const shuffleArrayMutate = (array: T[]): T[] => { +function shuffleArrayMutate(array: T[]): T[] { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; -}; +} const shuffleArray = (array: T[]): T[] => shuffleArrayMutate([...array]); From 105b21badc0dabfb36a857e77c716f6de2216cac Mon Sep 17 00:00:00 2001 From: DawnElixir Date: Thu, 1 Jun 2023 04:55:44 +0800 Subject: [PATCH 009/236] fix(readme): typo Fix readme typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2f8ee8c2..1d17dce1 100644 --- a/README.md +++ b/README.md @@ -84,7 +84,7 @@ To create a new tool, there is a script that generate the boilerplate of the new pnpm run script:create-new-tool my-tool-name ``` -It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the inported tool in the proper category and develop the tool. +It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the imported tool in the proper category and develop the tool. ## Credits From d2956b66fe12d9eb1ea19a2d1d4d2596db4c38b2 Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Sat, 10 Jun 2023 16:35:30 +0200 Subject: [PATCH 010/236] feat(phone-parser): searchable country code select --- .../phone-parser-and-formatter/phone-parser-and-formatter.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue index 647c3190..995050c0 100644 --- a/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue +++ b/src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue @@ -86,7 +86,7 @@ const countriesOptions = getCountries().map(code => ({