chore(version): release 2023.05.14-77f2efc

* feat(list-converter): a small converter who deals with column based data and do some stuff with it

* Update src/tools/list-converter/index.ts

* Update src/tools/list-converter/index.ts

* Update src/tools/list-converter/index.ts

---------

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

fix(list-format): fix e2e

.github/ISSUE_TEMPLATE/new-tool-request.md

@@ -6,8 +6,8 @@ labels: new tool
 assignees: CorentinTh
 ---
 
-**Which tool is impacted?**
-Example: the token generator
+**What tool do you want?**
+Example: a token generator
 
 **Describe the solution you'd like**
 A clear and concise description of what you want to happen.

.github/workflows/ci.yml

@@ -27,5 +27,8 @@ jobs:
       - name: Run unit test
         run: pnpm test
 
+      - name: Type check
+        run: pnpm typecheck
+
       - name: Build the app
         run: pnpm build

CHANGELOG.md

@@ -2,6 +2,45 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## Version 2023.05.14-77f2efc
+
+### Features
+- **list-converter**: a small converter who deals with column based data and do some stuff with it (#387) (83a7b3b)
+- **new tool**: phone parser and normalizer (ce3150c)
+
+### Bug fixes
+- **phone-parser**: use default country code (a43c546)
+- **home**: prevent weird blue border on card (3f6c8f0)
+
+### Refactoring
+- **ui**: replaced some n-input with c-input-text (77f2efc)
+
+### Chores
+- **issues**: updated new tool request issue template (edae4c6)
+
+### Ui-lib
+- **new-component**: added text input component in the c-lib (aad8d84)
+- **button**: size variants (401f13f)
+
+## Version 2023.04.23-92bd835
+
+### Features
+- **ui-lib**: demo pages for c-lib components (92bd835)
+- **new-tool**: diff of two json objects (362f2fa)
+- **ipv4-range-expander**: expands a given IPv4 start and end address to a valid IPv4 subnet (#366) (df989e2)
+- **date converter**: auto focus main input (6d22025)
+
+### Bug fixes
+- **ts**: cleaned legacy typechecking warning (e88c1d5)
+- **mac-address-lookup**: added copy handler on button click (c311e38)
+
+### Refactoring
+- **ui-lib**: prevent c-button to shrink (61ece23)
+- **ui**: replaced naive ui cards with custom ones (f080933)
+- **clean**: removed unused lodash import (bb32513)
+- **clean**: removed useless br tags (74073f5)
+- **ui**: getting ride of naive ui buttons (c45bce3)
+
 ## Version 2023.04.14-dbad773
 
 ### Features

auto-imports.d.ts

@@ -19,7 +19,9 @@ 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']
@@ -39,9 +41,6 @@ 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']
@@ -92,8 +91,9 @@ 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('vue')['toRef']
+  const toRef: typeof import('@vueuse/core')['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,6 +104,19 @@ 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']
@@ -114,8 +127,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']
@@ -189,12 +202,18 @@ 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']
@@ -208,14 +227,17 @@ 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']
@@ -227,6 +249,8 @@ 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']
@@ -247,8 +271,10 @@ 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']
@@ -282,7 +308,9 @@ declare module 'vue' {
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@@ -302,9 +330,6 @@ declare module 'vue' {
     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
-    readonly logicAnd: UnwrapRef<typeof import('@vueuse/core')['logicAnd']>
-    readonly logicNot: UnwrapRef<typeof import('@vueuse/core')['logicNot']>
-    readonly logicOr: UnwrapRef<typeof import('@vueuse/core')['logicOr']>
     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
@@ -355,8 +380,9 @@ declare module 'vue' {
     readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
     readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
-    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRef: UnwrapRef<typeof import('@vueuse/core')['toRef']>
     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('@vueuse/core')['toValue']>
     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
@@ -367,6 +393,19 @@ declare module 'vue' {
     readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
+    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
@@ -377,8 +416,8 @@ declare module 'vue' {
     readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
-    readonly useClamp: UnwrapRef<typeof import('@vueuse/core')['useClamp']>
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
@@ -452,12 +491,18 @@ declare module 'vue' {
     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
+    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
     readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
@@ -471,14 +516,17 @@ declare module 'vue' {
     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
     readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
     readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
@@ -490,6 +538,8 @@ declare module 'vue' {
     readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
     readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
     readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
     readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
     readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
     readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
@@ -510,8 +560,10 @@ declare module 'vue' {
     readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
     readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
     readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
     readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
     readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
     readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>

components.d.ts

@@ -9,13 +9,81 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    '404.page': typeof import('./src/pages/404.page.vue')['default']
+    About: typeof import('./src/pages/About.vue')['default']
+    App: typeof import('./src/App.vue')['default']
+    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
+    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
+    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
+    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
+    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
+    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
+    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
+    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
+    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
+    'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
+    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
+    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
+    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
+    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
+    CInputText: typeof import('./src/ui/c-input-text/c-input-text.vue')['default']
+    'CInputText.demo': typeof import('./src/ui/c-input-text/c-input-text.demo.vue')['default']
+    'CInputText.theme': typeof import('./src/ui/c-input-text/c-input-text.theme.vue')['default']
+    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
+    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
     CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
+    copy: typeof import('./src/ui/c-input-text/c-input-text copy.vue')['default']
+    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
+    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
+    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
+    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
+    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
+    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
+    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
+    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
+    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
+    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
     FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
+    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
+    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
+    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
+    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
+    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
+    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
+    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiClose: typeof import('~icons/mdi/close')['default']
+    IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiEye: typeof import('~icons/mdi/eye')['default']
+    IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
+    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
+    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
+    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
+    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
+    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
+    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
+    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
+    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
+    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
+    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
+    ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
+    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
+    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
+    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
     MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
+    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
+    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NAutoComplete: typeof import('naive-ui')['NAutoComplete']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
@@ -32,12 +100,12 @@ declare module '@vue/runtime-core' {
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
+    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
-    NH4: typeof import('naive-ui')['NH4']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
@@ -50,7 +118,6 @@ declare module '@vue/runtime-core' {
     NP: typeof import('naive-ui')['NP']
     NPageHeader: typeof import('naive-ui')['NPageHeader']
     NProgress: typeof import('naive-ui')['NProgress']
-    NResult: typeof import('naive-ui')['NResult']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
@@ -63,11 +130,34 @@ declare module '@vue/runtime-core' {
     NTooltip: typeof import('naive-ui')['NTooltip']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
+    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
+    PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
+    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
+    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
+    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
+    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
     SearchBar: typeof import('./src/components/SearchBar.vue')['default']
     SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
+    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
+    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
+    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
+    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
+    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
     TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
+    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
+    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
+    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
     ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
+    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
+    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
+    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
+    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "2023.4.14-dbad773",
+  "version": "2023.5.14-77f2efc",
   "description": "Collection of handy online tools for developers, with great UX. ",
   "keywords": [
     "productivity",
@@ -48,6 +48,7 @@
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
+    "country-code-lookup": "^0.0.23",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",
@@ -57,6 +58,7 @@
     "highlight.js": "^11.7.0",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
+    "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
     "mathjs": "^10.6.4",
     "mime-types": "^2.1.35",
@@ -77,6 +79,7 @@
     "yaml": "^2.2.1"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.1.50",
     "@playwright/test": "^1.32.3",
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/bcryptjs": "^2.4.2",
@@ -96,8 +99,10 @@
     "@unocss/eslint-config": "^0.50.8",
     "@vitejs/plugin-vue": "^2.3.4",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/runtime-core": "^3.2.47",
     "@vue/test-utils": "^2.3.2",
     "@vue/tsconfig": "^0.1.3",
     "c8": "^7.13.0",
@@ -114,6 +119,7 @@
     "typescript": "~4.5.5",
     "unocss": "^0.50.8",
     "unplugin-auto-import": "^0.15.2",
+    "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^2.9.15",
     "vite-plugin-md": "^0.12.4",

pnpm-lock.yaml

@@ -46,6 +46,9 @@ dependencies:
   composerize-ts:
     specifier: ^0.6.2
     version: 0.6.2
+  country-code-lookup:
+    specifier: ^0.0.23
+    version: 0.0.23
   cron-validator:
     specifier: ^1.3.1
     version: 1.3.1
@@ -73,6 +76,9 @@ dependencies:
   jwt-decode:
     specifier: ^3.1.2
     version: 3.1.2
+  libphonenumber-js:
+    specifier: ^1.10.28
+    version: 1.10.28
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -129,6 +135,9 @@ dependencies:
     version: 2.2.1
 
 devDependencies:
+  '@iconify-json/mdi':
+    specifier: ^1.1.50
+    version: 1.1.50
   '@playwright/test':
     specifier: ^1.32.3
     version: 1.32.3
@@ -186,12 +195,18 @@ devDependencies:
   '@vitejs/plugin-vue-jsx':
     specifier: ^1.3.10
     version: 1.3.10
+  '@vue/compiler-sfc':
+    specifier: ^3.2.47
+    version: 3.2.47
   '@vue/eslint-config-prettier':
     specifier: ^7.1.0
     version: 7.1.0(eslint@8.38.0)(prettier@2.8.7)
   '@vue/eslint-config-typescript':
     specifier: ^10.0.0
     version: 10.0.0(eslint-plugin-vue@8.7.1)(eslint@8.38.0)(typescript@4.5.5)
+  '@vue/runtime-core':
+    specifier: ^3.2.47
+    version: 3.2.47
   '@vue/test-utils':
     specifier: ^2.3.2
     version: 2.3.2(vue@3.2.47)
@@ -240,6 +255,9 @@ devDependencies:
   unplugin-auto-import:
     specifier: ^0.15.2
     version: 0.15.2(@vueuse/core@8.9.4)(rollup@2.79.1)
+  unplugin-icons:
+    specifier: ^0.16.1
+    version: 0.16.1(@vue/compiler-sfc@3.2.47)
   unplugin-vue-components:
     specifier: ^0.24.1
     version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
@@ -1606,6 +1624,12 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify-json/mdi@1.1.50:
+    resolution: {integrity: sha512-SgbT5w5eHCdOG74ZWPz7HlTGk6VsifIJhNi6lAsxj/5Nlqt6Cz4LlQmSa9eecU9p075Jub2aAx/o7YI+GCahRQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
@@ -3604,6 +3628,10 @@ packages:
       browserslist: 4.21.5
     dev: true
 
+  /country-code-lookup@0.0.23:
+    resolution: {integrity: sha512-kxhIGcau9/X+tgPg9yO2q1OLu8jiYYsdwXuiXzHdsgNChd36xrJMlOba7ka9O1xShCVTiVQPQpq/tcuy4WiW+Q==}
+    dev: false
+
   /country-data@0.0.31:
     resolution: {integrity: sha512-YqlY/i6ikZwoBFfdjK+hJTGaBdTgDpXLI15MCj2UsXZ2cPBb+Kx86AXmDH7PRGt0LUleck0cCgNdWeIhfbcxkQ==}
     dependencies:
@@ -5665,6 +5693,10 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /libphonenumber-js@1.10.28:
+    resolution: {integrity: sha512-1eAgjLrZA0+2Wgw4hs+4Q/kEBycxQo8ZLYnmOvZ3AlM8ImAVAJgDPlZtISLEzD1vunc2q8s2Pn7XwB7I8U3Kzw==}
+    dev: false
+
   /linkify-it@3.0.3:
     resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
     dependencies:
@@ -7547,6 +7579,35 @@ packages:
       - rollup
     dev: true
 
+  /unplugin-icons@0.16.1(@vue/compiler-sfc@3.2.47):
+    resolution: {integrity: sha512-qTunFUkpAyDnwzwV7YV1ZgCWRYfLuURcCurhhXOWMy2ipY88qx1pADvral2hJu4Xymh0X0t3Zcll3BIru2AVLQ==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.2
+      '@iconify/utils': 2.1.5
+      '@vue/compiler-sfc': 3.2.47
+      debug: 4.3.4
+      kolorist: 1.7.0
+      local-pkg: 0.4.3
+      unplugin: 1.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /unplugin-vue-components@0.24.1(rollup@2.79.1)(vue@3.2.47):
     resolution: {integrity: sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==}
     engines: {node: '>=14'}

scripts/create-tool.mjs

@@ -29,9 +29,9 @@ createToolFile(
   `${toolName}.vue`,
   `
 <template>
-  <n-card>
+  <div>
     Lorem ipsum
-  </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">

src/components/ColoredCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card class="colored-card">
+  <c-card class="colored-card">
     <n-space justify="space-between" align="center">
       <n-icon class="icon" size="40" :component="icon" />
     </n-space>
@@ -12,7 +12,7 @@
         <slot />
       </n-ellipsis>
     </div>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/components/FavoriteButton.vue

@@ -1,11 +1,15 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="buttonType" :style="{ opacity: isFavorite ? 1 : 0.2 }" @click="toggleFavorite">
-        <template #icon>
-          <n-icon :component="FavoriteFilled" />
-        </template>
-      </n-button>
+      <c-button
+        variant="text"
+        circle
+        :type="buttonType"
+        :style="{ opacity: isFavorite ? 1 : 0.2 }"
+        @click="toggleFavorite"
+      >
+        <n-icon :component="FavoriteFilled" />
+      </c-button>
     </template>
     {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
   </n-tooltip>

src/components/FormatTransformer.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-form-item :label="inputLabel" v-bind="validationAttrs">
+  <n-form-item :label="inputLabel" v-bind="validationAttrs as any">
     <n-input
       ref="inputElement"
       v-model:value="input"
@@ -10,7 +10,7 @@
       autocorrect="off"
       autocapitalize="off"
       spellcheck="false"
-      :input-props="{ 'data-test-id': 'input' }"
+      :input-props="{ 'data-test-id': 'input' } as any"
     />
   </n-form-item>
   <n-form-item :label="outputLabel">

src/components/InputCopyable.vue

@@ -1,21 +1,20 @@
 <template>
-  <n-input v-model:value="value">
+  <c-input-text v-model:value="value">
     <template #suffix>
       <n-tooltip trigger="hover">
         <template #trigger>
-          <n-button quaternary circle @click="onCopyClicked">
-            <n-icon :component="ContentCopyFilled" />
-          </n-button>
+          <c-button circle variant="text" size="small" @click="onCopyClicked">
+            <icon-mdi-content-copy />
+          </c-button>
         </template>
         {{ tooltipText }}
       </n-tooltip>
     </template>
-  </n-input>
+  </c-input-text>
 </template>
 
 <script setup lang="ts">
 import { useVModel, useClipboard } from '@vueuse/core';
-import { ContentCopyFilled } from '@vicons/material';
 import { ref } from 'vue';
 
 const props = defineProps<{ value: string }>();
@@ -35,9 +34,3 @@ function onCopyClicked() {
   }, 2000);
 }
 </script>
-
-<style scoped>
-::v-deep(.n-input-wrapper) {
-  padding-right: 5px;
-}
-</style>

src/components/NavbarButtons.vue

@@ -1,56 +1,50 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
-        size="large"
+      <c-button
         circle
-        quaternary
-        tag="a"
+        variant="text"
         href="https://github.com/CorentinTh/it-tools"
-        rel="noopener"
         target="_blank"
+        rel="noopener noreferrer"
         aria-label="IT-Tools' GitHub repository"
       >
         <n-icon size="25" :component="BrandGithub" />
-      </n-button>
+      </c-button>
     </template>
     Github repository
   </n-tooltip>
 
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button
-        size="large"
+      <c-button
         circle
-        quaternary
-        tag="a"
+        variant="text"
         href="https://twitter.com/ittoolsdottech"
         rel="noopener"
         target="_blank"
         aria-label="IT Tools' Twitter account"
       >
         <n-icon size="25" :component="BrandTwitter" />
-      </n-button>
+      </c-button>
     </template>
     IT Tools' Twitter account
   </n-tooltip>
 
-  <router-link to="/about" #="{ navigate, href }" custom>
-    <n-tooltip trigger="hover">
-      <template #trigger>
-        <n-button tag="a" :href="href" circle quaternary size="large" aria-label="About" @click="navigate">
-          <n-icon size="25" :component="InfoCircle" />
-        </n-button>
-      </template>
-      About
-    </n-tooltip>
-  </router-link>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button size="large" circle quaternary aria-label="Toggle dark/light mode" @click="isDarkTheme = !isDarkTheme">
+      <c-button circle variant="text" to="/about" aria-label="About">
+        <n-icon size="25" :component="InfoCircle" />
+      </c-button>
+    </template>
+    About
+  </n-tooltip>
+  <n-tooltip trigger="hover">
+    <template #trigger>
+      <c-button circle variant="text" aria-label="Toggle dark/light mode" @click="toggleDarkTheme">
         <n-icon v-if="isDarkTheme" size="25" :component="Sun" />
         <n-icon v-else size="25" :component="Moon" />
-      </n-button>
+      </c-button>
     </template>
     <span v-if="isDarkTheme">Light mode</span>
     <span v-else>Dark mode</span>
@@ -59,11 +53,20 @@
 
 <script setup lang="ts">
 import { useStyleStore } from '@/stores/style.store';
+import { useThemeStore } from '@/ui/theme/theme.store';
 import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
 import { toRefs } from 'vue';
 
 const styleStore = useStyleStore();
 const { isDarkTheme } = toRefs(styleStore);
+
+const themeStore = useThemeStore();
+
+function toggleDarkTheme() {
+  isDarkTheme.value = !isDarkTheme.value;
+
+  themeStore.toggleTheme();
+}
 </script>
 
 <style lang="less" scoped>

src/components/SearchBar.vue

@@ -81,7 +81,7 @@ function onFocus() {
     <n-auto-complete
       v-model:value="queryString"
       :options="options"
-      :on-select="(value) => onSelect(String(value))"
+      :on-select="(value: string | number) => onSelect(String(value))"
       :render-label="renderOption"
       :default-value="'aa'"
       :get-show="() => displayDropDown"

src/components/SpanCopyable.vue

@@ -1,7 +1,7 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <span class="ip" @click="handleClick">{{ ip }}</span>
+      <span class="value" @click="handleClick">{{ value }}</span>
     </template>
     {{ tooltipText }}
   </n-tooltip>
@@ -11,13 +11,13 @@
 import { useClipboard } from '@vueuse/core';
 import { ref, toRefs } from 'vue';
 
-const props = withDefaults(defineProps<{ ip?: string }>(), { ip: '' });
-const { ip } = toRefs(props);
+const props = withDefaults(defineProps<{ value?: string }>(), { value: '' });
+const { value } = toRefs(props);
 
 const initialText = 'Copy to clipboard';
 const tooltipText = ref(initialText);
 
-const { copy } = useClipboard({ source: ip });
+const { copy } = useClipboard({ source: value });
 
 function handleClick() {
   copy();
@@ -28,8 +28,8 @@ function handleClick() {
 </script>
 
 <style scoped lang="less">
-.ip {
-  font-family: monospace;
+.value {
   cursor: pointer;
+  font-family: monospace;
 }
 </style>

src/components/TextareaCopyable.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="overflow-x: hidden; width: 100%">
-    <n-card class="result-card">
+    <c-card class="result-card">
       <n-scrollbar
         x-scrollable
         trigger="none"
@@ -13,16 +13,16 @@
       <n-tooltip v-if="value" trigger="hover">
         <template #trigger>
           <div class="copy-button" :class="[copyPlacement]">
-            <n-button circle secondary size="large" @click="onCopyClicked">
+            <c-button circle important:h-10 important:w-10 @click="onCopyClicked">
               <n-icon size="22" :component="Copy" />
-            </n-button>
+            </c-button>
           </div>
         </template>
         <span>{{ tooltipText }}</span>
       </n-tooltip>
-    </n-card>
+    </c-card>
     <n-space v-if="copyPlacement === 'outside'" justify="center" mt-4>
-      <n-button secondary @click="onCopyClicked"> {{ tooltipText }} </n-button>
+      <c-button @click="onCopyClicked"> {{ tooltipText }} </c-button>
     </n-space>
   </div>
 </template>

src/components/ToolCard.vue

@@ -1,6 +1,6 @@
 <template>
   <router-link :to="tool.path">
-    <n-card class="tool-card">
+    <c-card class="tool-card">
       <n-space justify="space-between" align="center">
         <n-icon class="icon" size="40" :component="tool.icon" />
         <n-space align="center">
@@ -29,7 +29,7 @@
           <br />&nbsp;
         </n-ellipsis>
       </div>
-    </n-card>
+    </c-card>
   </router-link>
 </template>
 
@@ -37,11 +37,14 @@
 import type { Tool } from '@/tools/tools.types';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
+import { useAppTheme } from '@/ui/theme/themes';
 import FavoriteButton from './FavoriteButton.vue';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
+
+const appTheme = useAppTheme();
 </script>
 
 <style lang="less" scoped>
@@ -50,8 +53,12 @@ a {
 }
 
 .tool-card {
+  transition: border-color ease 0.5s;
+  border-width: 2px !important;
+  color: transparent;
+
   &:hover {
-    border-color: var(--n-color-target);
+    border-color: v-bind('appTheme.primary.colorHover');
   }
 
   .icon {

src/composable/copy.ts

@@ -1,9 +1,8 @@
-import { useClipboard } from '@vueuse/core';
+import { useClipboard, type MaybeRef, get } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import type { Ref } from 'vue';
 
-export function useCopy({ source, text = 'Copied to the clipboard' }: { source: Ref; text?: string }) {
-  const { copy } = useClipboard({ source });
+export function useCopy({ source, text = 'Copied to the clipboard' }: { source: MaybeRef<unknown>; text?: string }) {
+  const { copy } = useClipboard({ source: computed(() => String(get(source))) });
   const message = useMessage();
 
   return {

src/composable/queryParams.ts

@@ -26,7 +26,7 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
 
   return computed<T>({
     get() {
-      return transformer.fromQuery(proxy.value) as T;
+      return transformer.fromQuery(proxy.value) as unknown as T;
     },
     set(value) {
       proxy.value = transformer.toQuery(value as never);

src/composable/validation.ts

@@ -1,3 +1,4 @@
+import { get, type MaybeRef } from '@vueuse/core';
 import _ from 'lodash';
 import { reactive, watch, type Ref } from 'vue';
 
@@ -31,7 +32,7 @@ export function useValidation<T>({
   watch: watchRefs = [],
 }: {
   source: Ref<T>;
-  rules: UseValidationRule<T>[];
+  rules: MaybeRef<UseValidationRule<T>[]>;
   watch?: Ref<unknown>[];
 }) {
   const state = reactive<{
@@ -55,7 +56,7 @@ export function useValidation<T>({
       state.message = '';
       state.status = undefined;
 
-      for (const rule of rules) {
+      for (const rule of get(rules)) {
         if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
           state.message = rule.message;
           state.status = 'error';

src/config.ts

@@ -23,9 +23,9 @@ export const config = figue({
     env: {
       doc: 'Application current env',
       format: 'enum',
-      values: ['production', 'development', 'test'],
+      values: ['production', 'development', 'preview', 'test'],
       default: 'development',
-      env: 'MODE',
+      env: 'VITE_VERCEL_ENV',
     },
   },
   plausible: {

src/layouts/base.layout.vue

@@ -53,38 +53,25 @@ const tools = computed<ToolCategory[]>(() => [
           <div>
             IT-Tools
 
-            <n-button
-              text
-              tag="a"
-              target="_blank"
-              rel="noopener"
-              type="primary"
-              depth="3"
-              :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`"
-            >
+            <c-link target="_blank" rel="noopener" :href="`https://github.com/CorentinTh/it-tools/tree/v${version}`">
               v{{ version }}
-            </n-button>
+            </c-link>
 
             <template v-if="commitSha && commitSha.length > 0">
               -
-              <n-button
-                text
-                tag="a"
+              <c-link
                 target="_blank"
                 rel="noopener"
                 type="primary"
-                depth="3"
                 :href="`https://github.com/CorentinTh/it-tools/tree/${commitSha}`"
               >
                 {{ commitSha }}
-              </n-button>
+              </c-link>
             </template>
           </div>
           <div>
             © {{ new Date().getFullYear() }}
-            <n-button text tag="a" target="_blank" rel="noopener" type="primary" href="https://github.com/CorentinTh">
-              Corentin Thomasset
-            </n-button>
+            <c-link target="_blank" rel="noopener" href="https://github.com/CorentinTh"> Corentin Thomasset </c-link>
           </div>
         </div>
       </div>
@@ -92,34 +79,24 @@ const tools = computed<ToolCategory[]>(() => [
 
     <template #content>
       <div class="navigation">
-        <n-button
+        <c-button
           :size="styleStore.isSmallScreen ? 'medium' : 'large'"
           circle
-          quaternary
+          variant="text"
           aria-label="Toggle menu"
           @click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
         >
           <n-icon size="25" :component="Menu2" />
-        </n-button>
+        </c-button>
 
-        <router-link to="/" #="{ navigate, href }" custom>
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <n-button
-                tag="a"
-                :href="href"
-                :size="styleStore.isSmallScreen ? 'medium' : 'large'"
-                circle
-                quaternary
-                aria-label="Home"
-                @click="navigate"
-              >
-                <n-icon size="25" :component="Home2" />
-              </n-button>
-            </template>
-            Home
-          </n-tooltip>
-        </router-link>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <c-button to="/" circle variant="text" aria-label="Home">
+              <n-icon size="25" :component="Home2" />
+            </c-button>
+          </template>
+          Home
+        </n-tooltip>
 
         <search-bar />
 
@@ -127,10 +104,8 @@ const tools = computed<ToolCategory[]>(() => [
 
         <n-tooltip trigger="hover">
           <template #trigger>
-            <n-button
+            <c-button
               round
-              type="primary"
-              tag="a"
               href="https://www.buymeacoffee.com/cthmsst"
               rel="noopener"
               target="_blank"
@@ -140,7 +115,7 @@ const tools = computed<ToolCategory[]>(() => [
             >
               Buy me a coffee
               <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
-            </n-button>
+            </c-button>
           </template>
           ❤ Support IT Tools development !
         </n-tooltip>
@@ -165,8 +140,8 @@ const tools = computed<ToolCategory[]>(() => [
 .support-button {
   background: rgb(37, 99, 108);
   background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
-  color: #fff;
-  transition: all ease 0.2s;
+  color: #fff !important;
+  transition: padding ease 0.2s !important;
 
   &:hover {
     color: #fff;

src/pages/404.page.vue

@@ -13,8 +13,6 @@ useHead({ title: 'Page not found - IT Tools' });
     <n-text mt-4 block depth="3">Sorry, this page does not seem to exist</n-text>
     <n-text mb-8 block depth="3">Maybe the cache is doing tricky things, try force-refreshing?</n-text>
 
-    <router-link to="/" #="{ navigate, href }" custom>
-      <n-button tag="a" :href="href" secondary @click="navigate"> Back home </n-button>
-    </router-link>
+    <c-button to="/"> Back home </c-button>
   </div>
 </template>

src/pages/About.vue

@@ -11,25 +11,21 @@ const { tracker } = useTracker();
     <n-h1>About</n-h1>
     <n-p>
       This wonderful website, made with ❤ by
-      <n-button text tag="a" href="https://github.com/CorentinTh" target="_blank" rel="noopener" type="primary">
-        Corentin Thomasset </n-button
-      >, aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to
-      share it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
+      <c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener"> Corentin Thomasset </c-link>,
+      aggregates useful tools for developer and people working in IT. If you find it useful, please fell free to share
+      it to people you think may find it useful too and don't forget to pin it in your shortcut bar !
     </n-p>
     <n-p>
       IT Tools is open-source (under the MIT license) and free, and will always be, but it cost me money to host and
       renew the domain name, if you want to support my work, and encourage me to add more tools, please consider
       supporting by
-      <n-button
-        type="primary"
-        tag="a"
-        text
+      <c-link
         href="https://www.buymeacoffee.com/cthmsst"
         rel="noopener"
         target="_blank"
         @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
       >
-        sponsoring me </n-button
+        sponsoring me </c-link
       >.
     </n-p>
 
@@ -37,16 +33,9 @@ const { tracker } = useTracker();
     <n-p>
       IT Tools is made in Vue JS (vue 3) with the the naive-ui component library and is hosted and continuously deployed
       by Vercel. Third party open-source libraries are used in some tools, you may find the complete list in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
-        href="https://github.com/CorentinTh/it-tools/blob/main/package.json"
-        rel="noopener"
-        target="_blank"
-      >
+      <c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
         package.json
-      </n-button>
+      </c-link>
       file of the repository.
     </n-p>
 
@@ -54,30 +43,24 @@ const { tracker } = useTracker();
     <n-p>
       If you need a tool that is currently not present here, and you think can be relevant, you are welcome to submit a
       feature request in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
+      <c-link
         href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=enhancement&template=feature_request.md&title=%5BFEAT%5D%20My%20feature"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
+      </c-link>
       in the GitHub repository.
     </n-p>
     <n-p>
       And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
-      <n-button
-        type="primary"
-        tag="a"
-        text
+      <c-link
         href="https://github.com/CorentinTh/it-tools/issues/new?assignees=CorentinTh&labels=bug&template=bug_report.md&title=%5BBUG%5D%20My%20bug"
         rel="noopener"
         target="_blank"
       >
         issues section
-      </n-button>
+      </c-link>
       in the GitHub repository.
     </n-p>
   </div>

src/router.ts

@@ -4,6 +4,7 @@ import HomePage from './pages/Home.page.vue';
 import NotFound from './pages/404.page.vue';
 import { tools } from './tools';
 import { config } from './config';
+import { routes as demoRoutes } from './ui/demo/demo.routes';
 
 const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({
   path,
@@ -32,6 +33,7 @@ const router = createRouter({
     },
     ...toolsRoutes,
     ...toolsRedirectRoutes,
+    ...(config.app.env === 'development' ? demoRoutes : []),
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
   ],
 });

src/tools/base64-file-converter/base64-file-converter.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Base64 to file">
+  <c-card title="Base64 to file">
     <n-form-item
       :feedback="base64InputValidation.message"
       :validation-status="base64InputValidation.status"
@@ -8,13 +8,13 @@
       <n-input v-model:value="base64Input" type="textarea" placeholder="Put your base64 file string here..." rows="5" />
     </n-form-item>
     <n-space justify="center">
-      <n-button :disabled="base64Input === '' || !base64InputValidation.isValid" secondary @click="downloadFile()">
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
-      </n-button>
+      </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 
-  <n-card title="File to base64">
+  <c-card title="File to base64">
     <n-upload v-model:file-list="fileList" :show-file-list="true" :on-before-upload="onUpload" list-type="image">
       <n-upload-dragger>
         <div mb-2>
@@ -26,9 +26,9 @@
 
     <n-input :value="fileBase64" type="textarea" readonly placeholder="File in base64 will be here" />
     <n-space justify="center">
-      <n-button secondary @click="copyFileBase64()"> Copy </n-button>
+      <c-button @click="copyFileBase64()"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/base64-string-converter/base64-string-converter.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="String to base64">
+  <c-card title="String to base64">
     <n-form-item label="String to encode">
       <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." rows="5" />
     </n-form-item>
@@ -15,12 +15,12 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyTextBase64()"> Copy base64 </n-button>
+      <c-button @click="copyTextBase64()"> Copy base64 </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 
-  <n-card title="Base64 to string">
-    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs">
+  <c-card title="Base64 to string">
+    <n-form-item label="Base64 string to decode" v-bind="b64Validation.attrs as any">
       <n-input v-model:value="base64Input" type="textarea" placeholder="Your base64 string..." rows="5" />
     </n-form-item>
 
@@ -29,9 +29,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyText()"> Copy decoded string </n-button>
+      <c-button @click="copyText()"> Copy decoded string </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/basic-auth-generator/basic-auth-generator.vue

@@ -1,29 +1,25 @@
 <template>
   <div>
-    <n-form-item label="Username">
-      <n-input v-model:value="username" placeholder="Your username..." clearable />
-    </n-form-item>
-    <n-form-item label="Password">
-      <n-input
-        v-model:value="password"
-        placeholder="Your password..."
-        type="password"
-        show-password-on="click"
-        clearable
-      />
-    </n-form-item>
+    <c-input-text v-model:value="username" label="Username" placeholder="Your username..." clearable raw-text mb-5 />
+    <c-input-text
+      v-model:value="password"
+      label="Password"
+      placeholder="Your password..."
+      clearable
+      raw-text
+      mb-2
+      type="password"
+    />
 
-    <br />
-    <n-card>
+    <c-card>
       <n-statistic label="Authorization header:" class="header">
         <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
           {{ header }}
         </n-scrollbar>
       </n-statistic>
-    </n-card>
-    <br />
-    <n-space justify="center">
-      <n-button secondary @click="copy">Copy header</n-button>
+    </c-card>
+    <n-space justify="center" mt-5>
+      <c-button @click="copy">Copy header</c-button>
     </n-space>
   </div>
 </template>

src/tools/bcrypt/bcrypt.vue

@@ -1,48 +1,32 @@
 <template>
-  <n-card title="Hash">
-    <n-form label-width="120">
-      <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="input"
-          placeholder="Your string to bcrypt..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
-      </n-form-item>
-      <n-form-item label="Salt count: " label-placement="left">
-        <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
-      </n-form-item>
-      <n-input :value="hashed" readonly style="text-align: center" />
-    </n-form>
-    <br />
-    <n-space justify="center">
-      <n-button secondary @click="copy"> Copy hash </n-button>
-    </n-space>
-  </n-card>
+  <c-card title="Hash">
+    <c-input-text
+      v-model:value="input"
+      placeholder="Your string to bcrypt..."
+      raw-text
+      label="Your string: "
+      label-position="left"
+      label-width="120px"
+      mb-2
+    />
+    <n-form-item label="Salt count: " label-placement="left" label-width="120">
+      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
+    </n-form-item>
 
-  <n-card title="Compare string with hash">
+    <c-input-text :value="hashed" readonly text-center />
+
+    <n-space justify="center" mt-5>
+      <c-button @click="copy"> Copy hash </c-button>
+    </n-space>
+  </c-card>
+
+  <c-card title="Compare string with hash">
     <n-form label-width="120">
       <n-form-item label="Your string: " label-placement="left">
-        <n-input
-          v-model:value="compareString"
-          placeholder="Your string to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
+        <c-input-text v-model:value="compareString" placeholder="Your string to compare..." raw-text />
       </n-form-item>
       <n-form-item label="Your hash: " label-placement="left">
-        <n-input
-          v-model:value="compareHash"
-          placeholder="Your hahs to compare..."
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
+        <c-input-text v-model:value="compareHash" placeholder="Your hahs to compare..." raw-text />
       </n-form-item>
       <n-form-item label="Do they match ? " label-placement="left" :show-feedback="false">
         <div class="compare-result" :class="{ positive: compareMatch }">
@@ -50,7 +34,7 @@
         </div>
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/benchmark-builder/benchmark-builder.vue

@@ -1,53 +1,52 @@
 <template>
   <n-scrollbar style="flex: 1" x-scrollable>
-    <n-space :wrap="false" style="flex: 1" justify="center" :size="0">
+    <n-space :wrap="false" style="flex: 1" justify="center" :size="12" mb-5>
       <div v-for="(suite, index) of suites" :key="index">
-        <n-card style="width: 292px; margin: 0 8px 5px">
-          <n-form-item label="Suite name:" :show-feedback="false" label-placement="left">
-            <n-input v-model:value="suite.title" placeholder="Suite name..." />
-          </n-form-item>
+        <c-card style="width: 294px">
+          <c-input-text
+            v-model:value="suite.title"
+            label-position="left"
+            label="Suite name"
+            placeholder="Suite name..."
+            clearable
+          />
 
           <n-divider></n-divider>
           <n-form-item label="Suite values" :show-feedback="false">
             <dynamic-values v-model:values="suite.data" />
           </n-form-item>
-        </n-card>
+        </c-card>
 
         <n-space justify="center">
-          <n-button v-if="suites.length > 1" quaternary @click="suites.splice(index, 1)">
-            <template #icon>
-              <n-icon :component="Trash" depth="3" />
-            </template>
+          <c-button v-if="suites.length > 1" variant="text" @click="suites.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" mr-2 size="18" />
             Delete suite
-          </n-button>
-          <n-button quaternary @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })">
-            <template #icon>
-              <n-icon :component="Plus" depth="3" />
-            </template>
+          </c-button>
+          <c-button
+            variant="text"
+            @click="suites.splice(index + 1, 0, { data: [0], title: `Suite ${suites.length + 1}` })"
+          >
+            <n-icon :component="Plus" depth="3" mr-2 size="18" />
             Add suite
-          </n-button>
+          </c-button>
         </n-space>
       </div>
     </n-space>
-    <br />
   </n-scrollbar>
 
   <div style="flex: 0 0 100%">
     <div style="max-width: 600px; margin: 0 auto">
       <n-space justify="center">
-        <n-form-item label="Unit:" label-placement="left">
-          <n-input v-model:value="unit" placeholder="Unit (eg: ms)" />
-        </n-form-item>
+        <c-input-text v-model:value="unit" placeholder="Unit (eg: ms)" label="Unit" label-position="left" mb-4 />
 
-        <n-button
-          tertiary
+        <c-button
           @click="
             suites = [
               { title: 'Suite 1', data: [] },
               { title: 'Suite 2', data: [] },
             ]
           "
-          >Reset suites</n-button
+          >Reset suites</c-button
         >
       </n-space>
 
@@ -71,10 +70,9 @@
           </tr>
         </tbody>
       </n-table>
-      <br />
-      <n-space justify="center">
-        <n-button tertiary @click="copyAsMarkdown">Copy as markdown table</n-button>
-        <n-button tertiary @click="copyAsBulletList">Copy as bullet list</n-button>
+      <n-space justify="center" mt-5>
+        <c-button @click="copyAsMarkdown">Copy as markdown table</c-button>
+        <c-button @click="copyAsBulletList">Copy as bullet list</c-button>
       </n-space>
     </div>
   </div>

src/tools/benchmark-builder/dynamic-values.vue

@@ -11,22 +11,18 @@
       />
       <n-tooltip>
         <template #trigger>
-          <n-button circle quaternary @click="values.splice(index, 1)">
-            <template #icon>
-              <n-icon :component="Trash" depth="3" />
-            </template>
-          </n-button>
+          <c-button circle variant="text" @click="values.splice(index, 1)">
+            <n-icon :component="Trash" depth="3" size="18" />
+          </c-button>
         </template>
         Delete value
       </n-tooltip>
     </n-space>
 
-    <n-button tertiary @click="addValue">
-      <template #icon>
-        <n-icon :component="Plus" />
-      </template>
+    <c-button @click="addValue">
+      <n-icon :component="Plus" depth="3" mr-2 size="18" />
       Add a measure
-    </n-button>
+    </c-button>
   </div>
 </template>
 

src/tools/bip39-generator/bip39-generator.vue

@@ -1,59 +1,50 @@
 <template>
   <div>
-    <n-card>
-      <n-grid cols="3" x-gap="12">
-        <n-gi span="1">
-          <n-form-item label="Language:">
-            <n-select
-              v-model:value="language"
-              :options="Object.keys(languages).map((label) => ({ label, value: label }))"
-            />
-          </n-form-item>
-        </n-gi>
-        <n-gi span="2">
-          <n-form-item
-            label="Entropy (seed):"
-            :feedback="entropyValidation.message"
-            :validation-status="entropyValidation.status"
-          >
-            <n-input-group>
-              <n-input v-model:value="entropy" placeholder="Your string..." />
-              <n-button @click="refreshEntropy">
-                <n-icon size="22">
-                  <Refresh />
-                </n-icon>
-              </n-button>
-              <n-button @click="copyEntropy">
-                <n-icon size="22">
-                  <Copy />
-                </n-icon>
-              </n-button>
-            </n-input-group>
-          </n-form-item>
-        </n-gi>
-      </n-grid>
-      <n-form-item
-        label="Passphrase (mnemonic):"
-        :feedback="mnemonicValidation.message"
-        :validation-status="mnemonicValidation.status"
-      >
-        <n-input-group>
-          <n-input
-            v-model:value="passphrase"
-            style="text-align: center; flex: 1"
-            placeholder="Your mnemonic..."
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
+    <n-grid cols="3" x-gap="12">
+      <n-gi span="1">
+        <n-form-item label="Language:">
+          <n-select
+            v-model:value="language"
+            :options="Object.keys(languages).map((label) => ({ label, value: label }))"
           />
+        </n-form-item>
+      </n-gi>
+      <n-gi span="2">
+        <n-form-item
+          label="Entropy (seed):"
+          :feedback="entropyValidation.message"
+          :validation-status="entropyValidation.status"
+        >
+          <n-input-group>
+            <c-input-text v-model:value="entropy" placeholder="Your string..." />
 
-          <n-button @click="copyPassphrase">
-            <n-icon size="22" :component="Copy" />
-          </n-button>
-        </n-input-group>
-      </n-form-item>
-    </n-card>
+            <c-button @click="refreshEntropy">
+              <n-icon size="22">
+                <Refresh />
+              </n-icon>
+            </c-button>
+            <c-button @click="copyEntropy">
+              <n-icon size="22">
+                <Copy />
+              </n-icon>
+            </c-button>
+          </n-input-group>
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+    <n-form-item
+      label="Passphrase (mnemonic):"
+      :feedback="mnemonicValidation.message"
+      :validation-status="mnemonicValidation.status"
+    >
+      <n-input-group>
+        <c-input-text v-model:value="passphrase" placeholder="Your mnemonic..." raw-text />
+
+        <c-button @click="copyPassphrase">
+          <n-icon size="22" :component="Copy" />
+        </c-button>
+      </n-input-group>
+    </n-form-item>
   </div>
 </template>
 

src/tools/case-converter/case-converter.vue

@@ -1,9 +1,15 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form label-width="120" label-placement="left" :show-feedback="false">
-      <n-form-item label="Your string:">
-        <n-input v-model:value="input" />
-      </n-form-item>
+      <c-input-text
+        v-model:value="input"
+        label="Your string"
+        label-position="left"
+        label-width="120px"
+        label-align="right"
+        placeholder="Your string..."
+        raw-text
+      />
 
       <n-divider />
 
@@ -41,7 +47,7 @@
         <input-copyable :value="snakeCase(input, baseConfig)" />
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/chronometer/chronometer.vue

@@ -1,14 +1,13 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <div class="duration">{{ formatMs(counter) }}</div>
-    </n-card>
-    <br />
-    <n-space justify="center">
-      <n-button v-if="!isRunning" secondary type="primary" @click="resume">Start</n-button>
-      <n-button v-else secondary type="warning" @click="pause">Stop</n-button>
+    </c-card>
+    <n-space justify="center" mt-5>
+      <c-button v-if="!isRunning" type="primary" @click="resume">Start</c-button>
+      <c-button v-else type="warning" @click="pause">Stop</c-button>
 
-      <n-button secondary @click="counter = 0">Reset</n-button>
+      <c-button @click="counter = 0">Reset</c-button>
     </n-space>
   </div>
 </template>

src/tools/color-converter/color-converter.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form label-width="100" label-placement="left">
       <n-form-item label="color picker:">
         <n-color-picker
@@ -9,28 +9,28 @@
         />
       </n-form-item>
       <n-form-item label="color name:">
-        <input-copyable v-model:value="name" :on-input="(v: string) => onInputUpdated(v, 'name')" />
+        <input-copyable v-model:value="name" @update:value="(v: string) => onInputUpdated(v, 'name')" />
       </n-form-item>
       <n-form-item label="hex:">
-        <input-copyable v-model:value="hex" :on-input="(v: string) => onInputUpdated(v, 'hex')" />
+        <input-copyable v-model:value="hex" @update:value="(v: string) => onInputUpdated(v, 'hex')" />
       </n-form-item>
       <n-form-item label="rgb:">
-        <input-copyable v-model:value="rgb" :on-input="(v: string) => onInputUpdated(v, 'rgb')" />
+        <input-copyable v-model:value="rgb" @update:value="(v: string) => onInputUpdated(v, 'rgb')" />
       </n-form-item>
       <n-form-item label="hsl:">
-        <input-copyable v-model:value="hsl" :on-input="(v: string) => onInputUpdated(v, 'hsl')" />
+        <input-copyable v-model:value="hsl" @update:value="(v: string) => onInputUpdated(v, 'hsl')" />
       </n-form-item>
       <n-form-item label="hwb:">
-        <input-copyable v-model:value="hwb" :on-input="(v: string) => onInputUpdated(v, 'hwb')" />
+        <input-copyable v-model:value="hwb" @update:value="(v: string) => onInputUpdated(v, 'hwb')" />
       </n-form-item>
       <n-form-item label="lch:">
-        <input-copyable v-model:value="lch" :on-input="(v: string) => onInputUpdated(v, 'lch')" />
+        <input-copyable v-model:value="lch" @update:value="(v: string) => onInputUpdated(v, 'lch')" />
       </n-form-item>
       <n-form-item label="cmyk:">
-        <input-copyable v-model:value="cmyk" :on-input="(v: string) => onInputUpdated(v, 'cmyk')" />
+        <input-copyable v-model:value="cmyk" @update:value="(v: string) => onInputUpdated(v, 'cmyk')" />
       </n-form-item>
     </n-form>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">
@@ -54,15 +54,19 @@ const cmyk = ref('');
 const lch = ref('');
 
 function onInputUpdated(value: string, omit: string) {
-  const color = colord(value);
+  try {
+    const color = colord(value);
 
-  if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
-  if (omit !== 'hex') hex.value = color.toHex();
-  if (omit !== 'rgb') rgb.value = color.toRgbString();
-  if (omit !== 'hsl') hsl.value = color.toHslString();
-  if (omit !== 'hwb') hwb.value = color.toHwbString();
-  if (omit !== 'cmyk') cmyk.value = color.toCmykString();
-  if (omit !== 'lch') lch.value = color.toLchString();
+    if (omit !== 'name') name.value = color.toName({ closest: true }) ?? '';
+    if (omit !== 'hex') hex.value = color.toHex();
+    if (omit !== 'rgb') rgb.value = color.toRgbString();
+    if (omit !== 'hsl') hsl.value = color.toHslString();
+    if (omit !== 'hwb') hwb.value = color.toHwbString();
+    if (omit !== 'cmyk') cmyk.value = color.toCmykString();
+    if (omit !== 'lch') lch.value = color.toLchString();
+  } catch {
+    //
+  }
 }
 
 onInputUpdated(hex.value, 'hex');

src/tools/crontab-generator/crontab-generator.vue

@@ -1,13 +1,15 @@
 <template>
-  <n-card>
-    <n-form-item
-      class="cron"
-      :show-label="false"
-      :feedback="cronValidation.message"
-      :validation-status="cronValidation.status"
-    >
-      <n-input v-model:value="cron" size="large" placeholder="* * * * *" />
-    </n-form-item>
+  <c-card>
+    <div mx-auto max-w-sm>
+      <c-input-text
+        v-model:value="cron"
+        size="large"
+        placeholder="* * * * *"
+        :validation-rules="cronValidationRules"
+        mb-3
+      />
+    </div>
+
     <div class="cron-string">
       {{ cronString }}
     </div>
@@ -27,8 +29,8 @@
         </n-form-item>
       </n-form>
     </n-space>
-  </n-card>
-  <n-card>
+  </c-card>
+  <c-card>
     <pre>
 ┌──────────── [optional] seconds (0 - 59)
 | ┌────────── minute (0 - 59)
@@ -41,7 +43,7 @@
     >
 
     <n-space v-if="styleStore.isSmallScreen" vertical>
-      <n-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" embedded :bordered="false">
+      <c-card v-for="{ symbol, meaning, example, equivalent } in helpers" :key="symbol" important:border-none>
         <div>
           Symbol: <strong>{{ symbol }}</strong>
         </div>
@@ -57,7 +59,7 @@
         <div>
           Equivalent: <strong>{{ equivalent }}</strong>
         </div>
-      </n-card>
+      </c-card>
     </n-space>
     <n-table v-else size="small">
       <thead>
@@ -79,14 +81,13 @@
         </tr>
       </tbody>
     </n-table>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">
 import cronstrue from 'cronstrue';
 import { isValidCron } from 'cron-validator';
 import { computed, reactive, ref } from 'vue';
-import { useValidation } from '@/composable/validation';
 import { useStyleStore } from '@/stores/style.store';
 
 function isCronValid(v: string) {
@@ -185,30 +186,20 @@ const cronString = computed(() => {
   return ' ';
 });
 
-const cronValidation = useValidation({
-  source: cron,
-  rules: [
-    {
-      validator: (value) => isCronValid(value),
-      message: 'This cron is invalid',
-    },
-  ],
-});
+const cronValidationRules = [
+  {
+    validator: (value: string) => isCronValid(value),
+    message: 'This cron is invalid',
+  },
+];
 </script>
 
 <style lang="less" scoped>
-.cron {
+::v-deep(input) {
+  font-size: 30px;
+  font-family: monospace;
+  padding: 5px;
   text-align: center;
-
-  margin: auto;
-  max-width: 400px;
-  display: block;
-
-  .n-input {
-    font-size: 30px;
-    font-family: monospace;
-    padding: 5px;
-  }
 }
 
 .cron-string {

src/tools/date-time-converter/date-time-converter.vue

@@ -1,13 +1,14 @@
 <template>
   <div>
-    <n-form-item :show-label="false" v-bind="validation.attrs">
+    <n-form-item :show-label="false" v-bind="validation.attrs as any">
       <n-input-group>
         <n-input
           v-model:value="inputDate"
+          autofocus
           :on-input="onDateInputChanged"
           placeholder="Put you date string here..."
           clearable
-          :input-props="{ 'data-test-id': 'date-time-converter-input' }"
+          :input-props="{ 'data-test-id': 'date-time-converter-input' } as any"
         />
 
         <n-select
@@ -19,16 +20,19 @@
       </n-input-group>
     </n-form-item>
     <n-divider style="margin-top: 0" />
-    <div v-for="{ name, fromDate } in formats" :key="name" mt-1>
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
-        <input-copyable
-          :value="formatDateUsingFormatter(fromDate, normalizedDate)"
-          placeholder="Invalid date..."
-          :input-props="{ 'data-test-id': name }"
-        />
-      </n-input-group>
-    </div>
+    <input-copyable
+      v-for="{ name, fromDate } in formats"
+      :key="name"
+      :label="name"
+      label-width="150px"
+      label-position="left"
+      label-align="right"
+      :value="formatDateUsingFormatter(fromDate, normalizedDate)"
+      placeholder="Invalid date..."
+      :test-id="name"
+      readonly
+      mt-2
+    />
   </div>
 </template>
 

src/tools/device-information/device-information.vue

@@ -1,22 +1,20 @@
 <template>
-  <n-card v-for="{ name, information } in sections" :key="name" :title="name">
+  <c-card v-for="{ name, information } in sections" :key="name" :title="name">
     <n-grid cols="1 400:2" x-gap="12" y-gap="12">
       <n-gi v-for="{ label, value: { value } } in information" :key="label" class="information">
-        <n-card :bordered="false" embedded>
-          <div class="label">
-            {{ label }}
-          </div>
+        <div class="label">
+          {{ label }}
+        </div>
 
-          <div class="value">
-            <n-ellipsis v-if="value">
-              {{ value }}
-            </n-ellipsis>
-            <div v-else class="undefined-value">unknown</div>
-          </div>
-        </n-card>
+        <div class="value">
+          <n-ellipsis v-if="value">
+            {{ value }}
+          </n-ellipsis>
+          <div v-else class="undefined-value">unknown</div>
+        </div>
       </n-gi>
     </n-grid>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">
@@ -81,6 +79,10 @@ const sections = [
 
 <style lang="less" scoped>
 .information {
+  padding: 14px 16px;
+  border-radius: 4px;
+  background-color: #aaaaaa11;
+
   .label {
     font-size: 14px;
     opacity: 0.8;

src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue

@@ -13,15 +13,13 @@
     <n-divider />
 
     <textarea-copyable :value="dockerCompose" language="yaml" />
-    <br />
-    <br />
-    <n-space justify="center">
-      <n-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </n-button>
+
+    <n-space justify="center" mt-5>
+      <c-button :disabled="dockerCompose === ''" secondary @click="download"> Download docker-compose.yml </c-button>
     </n-space>
 
     <div v-if="notComposable.length > 0">
-      <br />
-      <n-alert title="This options are not translatable to docker-compose" type="info">
+      <n-alert title="This options are not translatable to docker-compose" type="info" mt-5>
         <ul>
           <li v-for="(message, index) of notComposable" :key="index">{{ message }}</li>
         </ul>
@@ -29,10 +27,10 @@
     </div>
 
     <div v-if="notImplemented.length > 0">
-      <br />
       <n-alert
         title="This options are not yet implemented and therefore haven't been translated to docker-compose"
         type="warning"
+        mt-5
       >
         <ul>
           <li v-for="(message, index) of notImplemented" :key="index">{{ message }}</li>
@@ -41,8 +39,7 @@
     </div>
 
     <div v-if="errors.length > 0">
-      <br />
-      <n-alert title="The following errors occured" type="error">
+      <n-alert title="The following errors occured" type="error" mt-5>
         <ul>
           <li v-for="(message, index) of errors" :key="index">{{ message }}</li>
         </ul>

src/tools/encryption/encryption.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Encrypt">
+  <c-card title="Encrypt">
     <n-space item-style="flex: 1 1 0">
       <n-form-item label="Your text:" :show-feedback="false">
         <n-input
@@ -7,12 +7,15 @@
           type="textarea"
           placeholder="The string to cypher"
           :autosize="{ minRows: 4 }"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
         />
       </n-form-item>
       <n-space vertical>
-        <n-form-item label="Your secret key:" :show-feedback="false">
-          <n-input v-model:value="cypherSecret" />
-        </n-form-item>
+        <c-input-text v-model:value="cypherSecret" label="Your secret key:" clearable raw-text />
+
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
           <n-select
             v-model:value="cypherAlgo"
@@ -21,8 +24,7 @@
         </n-form-item>
       </n-space>
     </n-space>
-    <br />
-    <n-form-item label="Your text encrypted:" :show-feedback="false">
+    <n-form-item label="Your text encrypted:" :show-feedback="false" mt-5>
       <n-input
         :value="cypherOutput"
         type="textarea"
@@ -35,8 +37,8 @@
         spellcheck="false"
       />
     </n-form-item>
-  </n-card>
-  <n-card title="Decrypt">
+  </c-card>
+  <c-card title="Decrypt">
     <n-space item-style="flex: 1 1 0">
       <n-form-item label="Your encrypted text:" :show-feedback="false">
         <n-input
@@ -44,12 +46,15 @@
           type="textarea"
           placeholder="The string to cypher"
           :autosize="{ minRows: 4 }"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
         />
       </n-form-item>
       <n-space vertical>
-        <n-form-item label="Your secret key:" :show-feedback="false">
-          <n-input v-model:value="decryptSecret" />
-        </n-form-item>
+        <c-input-text v-model:value="decryptSecret" label="Your secret key:" clearable raw-text />
+
         <n-form-item label="Encryption algorithm:" :show-feedback="false">
           <n-select
             v-model:value="decryptAlgo"
@@ -58,8 +63,7 @@
         </n-form-item>
       </n-space>
     </n-space>
-    <br />
-    <n-form-item label="Your decrypted text:" :show-feedback="false">
+    <n-form-item label="Your decrypted text:" :show-feedback="false" mt-5>
       <n-input
         :value="decryptOutput"
         type="textarea"
@@ -72,7 +76,7 @@
         spellcheck="false"
       />
     </n-form-item>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/eta-calculator/eta-calculator.vue

@@ -5,7 +5,6 @@
       hours and 10 minutes to wash them all, and if you start now, you'll end
       {{ endAt }}.
     </n-text>
-    <br />
     <n-divider />
     <n-space item-style="flex:1 1 0">
       <div>
@@ -38,12 +37,12 @@
 
         <n-divider />
         <n-space vertical>
-          <n-card>
+          <c-card>
             <n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
-          </n-card>
-          <n-card>
+          </c-card>
+          <c-card>
             <n-statistic label="It will end ">{{ endAt }}</n-statistic>
-          </n-card>
+          </c-card>
         </n-space>
       </div>
     </n-space>

src/tools/hash-text/hash-text.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <n-input v-model:value="clearText" type="textarea" placeholder="Your string to hash..." rows="3" />
 
       <n-divider />
@@ -35,7 +35,7 @@
           <input-copyable :value="hashText(algo, clearText)" readonly />
         </n-input-group>
       </div>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/hmac-generator/hmac-generator.vue

@@ -43,7 +43,7 @@
       <n-input readonly :value="hmac" type="textarea" placeholder="The result of the HMAC..." />
     </n-form-item>
     <n-space justify="center">
-      <n-button secondary @click="copy()">Copy HMAC</n-button>
+      <c-button @click="copy()">Copy HMAC</c-button>
     </n-space>
   </div>
 </template>

src/tools/html-entities/html-entities.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Escape html entities">
+  <c-card title="Escape html entities">
     <n-form-item label="Your string :">
       <n-input
         v-model:value="escapeInput"
@@ -20,10 +20,10 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEscaped"> Copy </n-button>
+      <c-button @click="copyEscaped"> Copy </c-button>
     </n-space>
-  </n-card>
-  <n-card title="Unescape html entities">
+  </c-card>
+  <c-card title="Unescape html entities">
     <n-form-item label="Your escaped string :">
       <n-input
         v-model:value="unescapeInput"
@@ -44,9 +44,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyUnescaped"> Copy </n-button>
+      <c-button @click="copyUnescaped"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/html-wysiwyg-editor/editor/editor.vue

@@ -1,12 +1,12 @@
 <template>
-  <n-card v-if="editor" class="editor">
-    <template #header>
-      <menu-bar class="editor-header" :editor="editor" />
-      <n-divider style="margin-top: 0" />
-    </template>
+  <c-card v-if="editor" important:p0>
+    <menu-bar class="editor-header" :editor="editor" />
+    <n-divider style="margin-top: 0" />
 
-    <editor-content class="editor-content" :editor="editor" />
-  </n-card>
+    <div px8 pb6>
+      <editor-content class="editor-content" :editor="editor" />
+    </div>
+  </c-card>
 </template>
 
 <script setup lang="ts">
@@ -34,10 +34,6 @@ tryOnBeforeUnmount(() => {
 </script>
 
 <style scoped lang="less">
-::v-deep(.n-card-header) {
-  padding: 0;
-}
-
 ::v-deep(.ProseMirror-focused) {
   outline: none;
 }

src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue

@@ -1,11 +1,9 @@
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
-      <n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
-        <template #icon>
-          <n-icon :component="icon" />
-        </template>
-      </n-button>
+      <c-button circle variant="text" :type="isActive?.() ? 'primary' : 'default'" @click="action">
+        <n-icon :component="icon" />
+      </c-button>
     </template>
 
     {{ title }}

src/tools/http-status-codes/http-status-codes.vue

@@ -20,21 +20,18 @@
     <div v-for="{ codes, category } of codesByCategoryFiltered" :key="category" mb-8>
       <n-h2> {{ category }} </n-h2>
 
-      <n-space vertical :size="20">
-        <n-card v-for="{ code, description, name, type } of codes" :key="code">
-          <n-space align="center">
-            <n-text strong text-lg> {{ code }} {{ name }} </n-text>
-          </n-space>
-          <n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
-        </n-card>
-      </n-space>
+      <c-card v-for="{ code, description, name, type } of codes" :key="code" mb-2>
+        <n-space align="center">
+          <n-text strong text-lg> {{ code }} {{ name }} </n-text>
+        </n-space>
+        <n-text depth="3">{{ description }} {{ type !== 'HTTP' ? `For ${type}.` : '' }}</n-text>
+      </c-card>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useFuzzySearch } from '@/composable/fuzzySearch';
-import _ from 'lodash';
 import { SearchRound } from '@vicons/material';
 import { codesByCategories } from './http-status-codes.constants';
 

src/tools/index.ts

@@ -1,6 +1,10 @@
 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 listConverter } from './list-converter';
+import { tool as phoneParserAndFormatter } from './phone-parser-and-formatter';
+import { tool as jsonDiff } from './json-diff';
+import { tool as ipv4RangeExpander } from './ipv4-range-expander';
 import { tool as httpStatusCodes } from './http-status-codes';
 import { tool as yamlToJson } from './yaml-to-json-converter';
 import { tool as jsonToYaml } from './json-to-yaml-converter';
@@ -71,6 +75,7 @@ export const toolsByCategory: ToolCategory[] = [
       textToNatoAlphabet,
       yamlToJson,
       jsonToYaml,
+      listConverter,
     ],
   },
   {
@@ -90,6 +95,7 @@ export const toolsByCategory: ToolCategory[] = [
       htmlWysiwygEditor,
       userAgentParser,
       httpStatusCodes,
+      jsonDiff,
     ],
   },
   {
@@ -111,7 +117,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator],
+    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, ipv6UlaGenerator],
   },
   {
     name: 'Math',
@@ -125,6 +131,10 @@ export const toolsByCategory: ToolCategory[] = [
     name: 'Text',
     components: [loremIpsumGenerator, textStatistics],
   },
+  {
+    name: 'Data',
+    components: [phoneParserAndFormatter],
+  },
 ];
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);

src/tools/integer-base-converter/integer-base-converter.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <div v-if="styleStore.isSmallScreen">
         <n-input-group>
           <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
@@ -22,60 +22,55 @@
       <n-alert v-if="error" style="margin-top: 25px" type="error">{{ error }}</n-alert>
       <n-divider />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
-          readonly
-          placeholder="Binary version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Binary (2)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
+        placeholder="Binary version will be here..."
+      />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Octal (8): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
-          readonly
-          placeholder="Octal version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Octal (8)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
+        placeholder="Octal version will be here..."
+      />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
-          readonly
-          placeholder="Decimal version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Decimal (10)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
+        placeholder="Decimal version will be here..."
+      />
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
-          readonly
-          placeholder="Decimal version will be here..."
-        />
-      </n-input-group>
+      <input-copyable
+        label="Hexadecimal (16)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
+        placeholder="Hexadecimal version will be here..."
+      />
+
+      <input-copyable
+        label="Base64 (64)"
+        v-bind="inputProps"
+        :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
+        placeholder="Base64 version will be here..."
+      />
+
+      <div flex items-baseline>
+        <n-input-group style="width: 160px; margin-right: 10px">
+          <n-input-group-label> Custom: </n-input-group-label>
+          <n-input-number v-model:value="outputBase" max="64" min="2" />
+        </n-input-group>
 
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
-          readonly
-          placeholder="Base64 version will be here..."
-        />
-      </n-input-group>
-      <n-input-group>
-        <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
-        <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
         <input-copyable
+          flex-1
+          v-bind="inputProps"
           :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })"
-          readonly
           :placeholder="`Base ${outputBase} will be here...`"
         />
-      </n-input-group>
-    </n-card>
+      </div>
+    </c-card>
   </div>
 </template>
 
@@ -88,6 +83,14 @@ import InputCopyable from '../../components/InputCopyable.vue';
 
 const styleStore = useStyleStore();
 
+const inputProps = {
+  labelPosition: 'left',
+  labelWidth: '170px',
+  labelAlign: 'right',
+  readonly: true,
+  'mb-2': '',
+} as const;
+
 const input = ref('42');
 const inputBase = ref(10);
 const outputBase = ref(42);

src/tools/ipv4-address-converter/ipv4-address-converter.vue

@@ -1,23 +1,20 @@
 <template>
   <div>
-    <n-form-item label="An ipv4 address:" v-bind="validationAttrs">
-      <n-input v-model:value="rawIpAddress" placeholder="An ipv4 address..." />
-    </n-form-item>
+    <c-input-text v-model:value="rawIpAddress" label="The ipv4 address:" placeholder="The ipv4 address..." readonly />
 
-    <n-divider style="margin-top: 0" mt-0 />
+    <n-divider />
 
-    <n-form-item
+    <input-copyable
       v-for="{ label, value } of convertedSections"
       :key="label"
       :label="label"
-      label-placement="left"
-      label-width="100"
-    >
-      <input-copyable
-        :value="validationAttrs.validationStatus === 'error' ? '' : value"
-        placeholder="Set a correct ipv4 address"
-      />
-    </n-form-item>
+      label-position="left"
+      label-width="100px"
+      label-align="right"
+      mb-2
+      :value="validationAttrs.validationStatus === 'error' ? '' : value"
+      placeholder="Set a correct ipv4 address"
+    />
   </div>
 </template>
 
@@ -33,7 +30,7 @@ const convertedSections = computed(() => {
 
   return [
     {
-      label: 'Decimal : ',
+      label: 'Decimal: ',
       value: String(ipInDecimal),
     },
     {

src/tools/ipv4-range-expander/index.ts

@@ -0,0 +1,13 @@
+import { UnfoldMoreOutlined } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'IPv4 range expander',
+  path: '/ipv4-range-expander',
+  description:
+    'Given a start and an end IPv4 address this tool calculates a valid IPv4 network with its CIDR notation.',
+  keywords: ['ipv4', 'range', 'expander', 'subnet', 'creator', 'cidr'],
+  component: () => import('./ipv4-range-expander.vue'),
+  icon: UnfoldMoreOutlined,
+  createdAt: new Date('2023-04-19'),
+});

src/tools/ipv4-range-expander/ipv4-range-expander.e2e.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - IPv4 range expander', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/ipv4-range-expander');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('IPv4 range expander - IT Tools');
+  });
+
+  test('Calculates correct for valid input', async ({ page }) => {
+    await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1');
+    await page.getByPlaceholder('End IPv4 address...').fill('192.168.7.255');
+
+    expect(await page.getByTestId('start-address.old').textContent()).toEqual('192.168.1.1');
+    expect(await page.getByTestId('start-address.new').textContent()).toEqual('192.168.0.0');
+    expect(await page.getByTestId('end-address.old').textContent()).toEqual('192.168.7.255');
+    expect(await page.getByTestId('end-address.new').textContent()).toEqual('192.168.7.255');
+    expect(await page.getByTestId('addresses-in-range.old').textContent()).toEqual('1,791');
+    expect(await page.getByTestId('addresses-in-range.new').textContent()).toEqual('2,048');
+    expect(await page.getByTestId('cidr.old').textContent()).toEqual('');
+    expect(await page.getByTestId('cidr.new').textContent()).toEqual('192.168.0.0/21');
+  });
+
+  test('Hides result for invalid input', async ({ page }) => {
+    await page.getByPlaceholder('Start IPv4 address...').fill('192.168.1.1');
+    await page.getByPlaceholder('End IPv4 address...').fill('192.168.0.255');
+
+    await expect(page.getByTestId('result')).not.toBeVisible();
+  });
+});

src/tools/ipv4-range-expander/ipv4-range-expander.service.test.ts

@@ -0,0 +1,21 @@
+import { expect, describe, it } from 'vitest';
+import { calculateCidr } from './ipv4-range-expander.service';
+
+describe('ipv4RangeExpander', () => {
+  describe('when there are two valid ipv4 addresses given', () => {
+    it('should calculate valid cidr for given addresses', () => {
+      const result = calculateCidr({ startIp: '192.168.1.1', endIp: '192.168.7.255' });
+
+      expect(result).toBeDefined();
+      expect(result?.oldSize).toEqual(1791);
+      expect(result?.newSize).toEqual(2048);
+      expect(result?.newStart).toEqual('192.168.0.0');
+      expect(result?.newEnd).toEqual('192.168.7.255');
+      expect(result?.newCidr).toEqual('192.168.0.0/21');
+    });
+
+    it('should return empty result for invalid input', () => {
+      expect(calculateCidr({ startIp: '192.168.7.1', endIp: '192.168.6.255' })).not.toBeDefined();
+    });
+  });
+});

src/tools/ipv4-range-expander/ipv4-range-expander.service.ts

@@ -0,0 +1,63 @@
+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';
+export { calculateCidr };
+
+function bits2ip(ipInt: number) {
+  return (ipInt >>> 24) + '.' + ((ipInt >> 16) & 255) + '.' + ((ipInt >> 8) & 255) + '.' + (ipInt & 255);
+}
+
+function getRangesize(start: string, end: string) {
+  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;
+
+  const range = getRangesize(start, end);
+  if (range < 1) {
+    return null;
+  }
+
+  let mask = 32;
+  for (let i = 0; i < 32; i++) {
+    if (start[i] !== end[i]) {
+      mask = i;
+      break;
+    }
+  }
+
+  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 };
+}
+
+function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) {
+  const start = convertBase({
+    value: ipv4ToInt({ ip: startIp }).toString(),
+    fromBase: 10,
+    toBase: 2,
+  });
+  const end = convertBase({
+    value: ipv4ToInt({ ip: endIp }).toString(),
+    fromBase: 10,
+    toBase: 2,
+  });
+
+  const cidr = getCidr(start, end);
+  if (cidr != null) {
+    const result: Ipv4RangeExpanderResult = {};
+    result.newEnd = bits2ip(parseInt(cidr.end, 2));
+    result.newStart = bits2ip(parseInt(cidr.start, 2));
+    result.newCidr = result.newStart + '/' + cidr.mask;
+    result.newSize = getRangesize(cidr.start, cidr.end);
+
+    result.oldSize = getRangesize(start, end);
+    return result;
+  }
+
+  return undefined;
+}

src/tools/ipv4-range-expander/ipv4-range-expander.types.ts

@@ -0,0 +1,7 @@
+export type Ipv4RangeExpanderResult = {
+  oldSize?: number;
+  newStart?: string;
+  newEnd?: string;
+  newCidr?: string;
+  newSize?: number;
+};

src/tools/ipv4-range-expander/ipv4-range-expander.vue

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <n-space item-style="flex:1 1 0">
+      <div>
+        <n-space item-style="flex:1 1 0">
+          <n-form-item label="Start address" v-bind="startIpValidation.attrs as any">
+            <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
+          </n-form-item>
+          <n-form-item label="End address" v-bind="endIpValidation.attrs as any">
+            <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
+          </n-form-item>
+        </n-space>
+
+        <n-table v-if="showResult" data-test-id="result">
+          <thead>
+            <tr>
+              <th scope="col">&nbsp;</th>
+              <th scope="col">old value</th>
+              <th scope="col">new value</th>
+            </tr>
+          </thead>
+          <tbody>
+            <result-row
+              v-for="{ label, getOldValue, getNewValue } in calculatedValues"
+              :key="label"
+              :label="label"
+              :old-value="getOldValue(result)"
+              :new-value="getNewValue(result)"
+            />
+          </tbody>
+        </n-table>
+        <n-alert
+          v-else-if="startIpValidation.isValid && endIpValidation.isValid"
+          title="Invalid combination of start and end IPv4 address"
+          type="error"
+        >
+          <n-space vertical>
+            <n-text depth="3">
+              The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be
+              calculated. In the most cases the solution to solve this problem is to change start and end address.
+            </n-text>
+            <c-button @click="onSwitchStartEndClicked">
+              <n-icon mr-2 :component="Exchange" depth="3" size="22" />
+              Switch start and end IPv4 address
+            </c-button>
+          </n-space>
+        </n-alert>
+      </div>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+import { Exchange } from '@vicons/tabler';
+import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
+import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
+import { calculateCidr } from './ipv4-range-expander.service';
+import ResultRow from './result-row.vue';
+
+const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1');
+const rawEndAddress = useStorage('ipv4-range-expander:endAddress', '192.168.6.255');
+
+const result = computed(() => calculateCidr({ startIp: rawStartAddress.value, endIp: rawEndAddress.value }));
+
+const calculatedValues: {
+  label: string;
+  getOldValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined;
+  getNewValue: (result: Ipv4RangeExpanderResult | undefined) => string | undefined;
+}[] = [
+  {
+    label: 'Start address',
+    getOldValue: () => rawStartAddress.value,
+    getNewValue: (result) => result?.newStart,
+  },
+  {
+    label: 'End address',
+    getOldValue: () => rawEndAddress.value,
+    getNewValue: (result) => result?.newEnd,
+  },
+  {
+    label: 'Addresses in range',
+    getOldValue: (result) => result?.oldSize?.toLocaleString(),
+    getNewValue: (result) => result?.newSize?.toLocaleString(),
+  },
+  {
+    label: 'CIDR',
+    getOldValue: () => '',
+    getNewValue: (result) => result?.newCidr,
+  },
+];
+
+const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined);
+const startIpValidation = useValidation({
+  source: rawStartAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+const endIpValidation = useValidation({
+  source: rawEndAddress,
+  rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
+});
+
+function onSwitchStartEndClicked() {
+  const tmpStart = rawStartAddress.value;
+  rawStartAddress.value = rawEndAddress.value;
+  rawEndAddress.value = tmpStart;
+}
+</script>
+
+<style lang="less" scoped></style>

src/tools/ipv4-range-expander/result-row.vue

@@ -0,0 +1,27 @@
+<template>
+  <tr>
+    <td>
+      <n-text strong>{{ label }}</n-text>
+    </td>
+    <td :data-test-id="testId + '.old'"><span-copyable :value="oldValue" class="monospace" /></td>
+    <td :data-test-id="testId + '.new'">
+      <span-copyable :value="newValue"></span-copyable>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import SpanCopyable from '@/components/SpanCopyable.vue';
+import _ from 'lodash';
+
+const props = withDefaults(defineProps<{ label: string; oldValue?: string; newValue?: string }>(), {
+  label: '',
+  oldValue: '',
+  newValue: '',
+});
+const { label, oldValue, newValue } = toRefs(props);
+
+const testId = computed(() => _.kebabCase(label.value));
+</script>
+
+<style scoped lang="less"></style>

src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <n-form-item label="An IPv4 address with or without mask" v-bind="validationAttrs">
-      <n-input v-model:value="ip" />
-    </n-form-item>
+    <c-input-text
+      v-model:value="ip"
+      label="An IPv4 address with or without mask"
+      placeholder="The ipv4 address..."
+      :validation-rules="ipValidationRules"
+      mb-4
+    />
 
     <div v-if="networkInfo">
       <n-table>
@@ -12,7 +16,7 @@
               <n-text strong>{{ label }}</n-text>
             </td>
             <td>
-              <copyable-ip-like v-if="getValue(networkInfo)" :ip="getValue(networkInfo)"></copyable-ip-like>
+              <span-copyable v-if="getValue(networkInfo)" :value="getValue(networkInfo)"></span-copyable>
               <n-text v-else depth="3">{{ undefinedFallback }}</n-text>
             </td>
           </tr>
@@ -20,14 +24,14 @@
       </n-table>
 
       <n-space style="margin-top: 14px" justify="space-between">
-        <n-button tertiary @click="switchToBlock({ count: -1 })">
+        <c-button @click="switchToBlock({ count: -1 })">
           <n-icon :component="ArrowLeft" />
           Previous block
-        </n-button>
-        <n-button tertiary @click="switchToBlock({ count: 1 })">
+        </c-button>
+        <c-button @click="switchToBlock({ count: 1 })">
           Next block
           <n-icon :component="ArrowRight" />
-        </n-button>
+        </c-button>
       </n-space>
     </div>
   </div>
@@ -37,12 +41,11 @@
 import { computed } from 'vue';
 import { Netmask } from 'netmask';
 import { withDefaultOnError } from '@/utils/defaults';
-import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { useStorage } from '@vueuse/core';
 import { ArrowLeft, ArrowRight } from '@vicons/tabler';
+import SpanCopyable from '@/components/SpanCopyable.vue';
 import { getIPClass } from './ipv4-subnet-calculator.models';
-import CopyableIpLike from './copyable-ip-like.vue';
 
 const ip = useStorage('ipv4-subnet-calculator:ip', '192.168.0.1/24');
 
@@ -50,15 +53,12 @@ const getNetworkInfo = (address: string) => new Netmask(address.trim());
 
 const networkInfo = computed(() => withDefaultOnError(() => getNetworkInfo(ip.value), undefined));
 
-const { attrs: validationAttrs } = useValidation({
-  source: ip,
-  rules: [
-    {
-      message: 'We cannot parse this address, check the format',
-      validator: (value) => isNotThrowing(() => getNetworkInfo(value.trim())),
-    },
-  ],
-});
+const ipValidationRules = [
+  {
+    message: 'We cannot parse this address, check the format',
+    validator: (value: string) => isNotThrowing(() => getNetworkInfo(value.trim())),
+  },
+];
 
 const sections: {
   label: string;

src/tools/ipv6-ula-generator/ipv6-ula-generator.vue

@@ -1,30 +1,32 @@
 <template>
   <div>
-    <n-space vertical :size="50">
-      <n-alert title="Info" type="info">
-        This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed,
-        and the lower 40 bits to generate your random ULA.
-      </n-alert>
+    <n-alert title="Info" type="info">
+      This tool uses the first method suggested by IETF using the current timestamp plus the mac address, sha1 hashed,
+      and the lower 40 bits to generate your random ULA.
+    </n-alert>
 
-      <n-form-item label="MAC address:" v-bind="validationAttrs">
-        <n-input
-          v-model:value="macAddress"
-          size="large"
-          placeholder="Type a MAC address"
-          clearable
-          autocomplete="off"
-          autocorrect="off"
-          autocapitalize="off"
-          spellcheck="false"
-        />
-      </n-form-item>
-    </n-space>
+    <c-input-text
+      v-model:value="macAddress"
+      placeholder="Type a MAC address"
+      clearable
+      label="MAC address:"
+      raw-text
+      my-8
+      :validation="addressValidation"
+    />
 
-    <div v-if="validationAttrs.validationStatus !== 'error'">
-      <n-input-group v-for="{ label, value } in calculatedSections" :key="label" style="margin: 5px 0">
-        <n-input-group-label style="flex: 0 0 160px"> {{ label }} </n-input-group-label>
-        <input-copyable :value="value" readonly />
-      </n-input-group>
+    <div v-if="addressValidation.isValid">
+      <input-copyable
+        v-for="{ label, value } in calculatedSections"
+        :key="label"
+        :value="value"
+        :label="label"
+        label-width="160px"
+        label-align="right"
+        label-position="left"
+        readonly
+        mb-2
+      />
     </div>
   </div>
 </template>
@@ -59,7 +61,7 @@ const calculatedSections = computed(() => {
   ];
 });
 
-const { attrs: validationAttrs } = macAddressValidation(macAddress);
+const addressValidation = macAddressValidation(macAddress);
 </script>
 
 <style lang="less" scoped></style>

src/tools/json-diff/diff-viewer/diff-viewer.models.tsx

@@ -0,0 +1,119 @@
+import _ from 'lodash';
+import { useCopy } from '@/composable/copy';
+import type { Difference, ArrayDifference, ObjectDifference } from '../json-diff.types';
+
+export const DiffRootViewer = ({ diff }: { diff: Difference }) => {
+  return (
+    <div class={'diffs-viewer'}>
+      <ul>{DiffViewer({ diff, showKeys: false })}</ul>
+    </div>
+  );
+};
+
+const DiffViewer = ({ diff, showKeys = true }: { diff: Difference; showKeys?: boolean }) => {
+  const { type, status } = diff;
+
+  if (status === 'updated') {
+    return ComparisonViewer({ diff, showKeys });
+  }
+
+  if (type === 'array') {
+    return ChildrenViewer({ diff, showKeys, showChildrenKeys: false, openTag: '[', closeTag: ']' });
+  }
+
+  if (type === 'object') {
+    return ChildrenViewer({ diff, showKeys, openTag: '{', closeTag: '}' });
+  }
+
+  return LineDiffViewer({ diff, showKeys });
+};
+
+const LineDiffViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, status, oldValue } = diff;
+  const valueToDisplay = status === 'removed' ? oldValue : value;
+
+  return (
+    <li>
+      <span class={[status, 'result']}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+        {Value({ value: valueToDisplay, status })}
+      </span>
+      ,
+    </li>
+  );
+};
+
+const ComparisonViewer = ({ diff, showKeys }: { diff: Difference; showKeys?: boolean }) => {
+  const { value, key, oldValue } = diff;
+
+  return (
+    <li class={'updated-line'}>
+      {showKeys && (
+        <>
+          <span class={'key'}>{key}</span>
+          {': '}
+        </>
+      )}
+      {Value({ value: oldValue, status: 'removed' })}
+      {Value({ value, status: 'added' })},
+    </li>
+  );
+};
+
+const ChildrenViewer = ({
+  diff,
+  openTag,
+  closeTag,
+  showKeys,
+  showChildrenKeys = true,
+}: {
+  diff: ArrayDifference | ObjectDifference;
+  showKeys: boolean;
+  showChildrenKeys?: boolean;
+  openTag: string;
+  closeTag: string;
+}) => {
+  const { children, key, status, type } = diff;
+
+  return (
+    <li>
+      <div class={[type, status]} style={{ display: 'inline-block' }}>
+        {showKeys && (
+          <>
+            <span class={'key'}>{key}</span>
+            {': '}
+          </>
+        )}
+
+        {openTag}
+        {children.length > 0 && <ul>{children.map((diff) => DiffViewer({ diff, showKeys: showChildrenKeys }))}</ul>}
+        {closeTag + ','}
+      </div>
+    </li>
+  );
+};
+
+function formatValue(value: unknown) {
+  if (_.isNull(value)) {
+    return 'null';
+  }
+
+  return JSON.stringify(value);
+}
+
+const Value = ({ value, status }: { value: unknown; status: string }) => {
+  const formatedValue = formatValue(value);
+
+  const { copy } = useCopy({ source: formatedValue });
+
+  return (
+    <span class={['value', status]} onClick={copy}>
+      {formatedValue}
+    </span>
+  );
+};

src/tools/json-diff/diff-viewer/diff-viewer.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="showResults">
+    <n-space justify="center">
+      <n-form-item label="Only show differences" label-placement="left">
+        <n-switch v-model:value="onlyShowDifferences" />
+      </n-form-item>
+    </n-space>
+
+    <c-card data-test-id="diff-result">
+      <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
+      <diff-root-viewer v-else :diff="result" />
+    </c-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppTheme } from '@/ui/theme/themes';
+import _ from 'lodash';
+import { DiffRootViewer } from './diff-viewer.models';
+import { diff } from '../json-diff.models';
+
+const onlyShowDifferences = ref(false);
+const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const { leftJson, rightJson } = toRefs(props);
+const appTheme = useAppTheme();
+
+const result = computed(() =>
+  diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }),
+);
+
+const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value));
+const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
+</script>
+
+<style lang="less" scoped>
+::v-deep(.diffs-viewer) {
+  color: v-bind('appTheme.text.mutedColor');
+
+  & > ul {
+    padding-left: 0 !important;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 20px;
+    margin: 0;
+
+    li {
+      .updated-line {
+        padding: 3px 0;
+      }
+
+      .result,
+      .array,
+      .object,
+      .value {
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+
+        &.added {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.success.colorFaded');
+          color: v-bind('appTheme.success.color');
+          .key {
+            color: inherit;
+          }
+        }
+
+        &.removed {
+          padding: 3px 5px;
+          border-radius: 4px;
+          background-color: v-bind('appTheme.error.colorFaded');
+          color: v-bind('appTheme.error.color');
+
+          .key {
+            color: inherit;
+          }
+        }
+      }
+
+      .value {
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: border-color 0.2s ease-in-out;
+
+        &.added:hover {
+          border-color: v-bind('appTheme.success.color');
+        }
+
+        &.removed:hover {
+          border-color: v-bind('appTheme.error.color');
+        }
+      }
+
+      .added .added,
+      .removed .removed {
+        background-color: transparent;
+        color: inherit;
+      }
+
+      .key {
+        font-weight: 500;
+        color: v-bind('appTheme.text.baseColor');
+      }
+    }
+  }
+}
+</style>

src/tools/json-diff/index.ts

@@ -0,0 +1,12 @@
+import { CompareArrowsRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON diff',
+  path: '/json-diff',
+  description: 'Compare two JSON objects and get the differences between them.',
+  keywords: ['json', 'diff', 'compare', 'difference', 'object', 'data'],
+  component: () => import('./json-diff.vue'),
+  icon: CompareArrowsRound,
+  createdAt: new Date('2023-04-20'),
+});

src/tools/json-diff/json-diff.e2e.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - JSON diff', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/json-diff');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('JSON diff - IT Tools');
+  });
+
+  test('Identical JSONs have a custom result message', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{   "foo":  "bar" }  ');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain('The provided JSONs are the same');
+  });
+
+  test('Different JSONs have differences listed', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"buz","baz":"qux"}');
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nfoo: "bar""buz",\nbaz: "qux",\n},`);
+  });
+
+  test('Different JSONs have only differences listed when "Only show differences" is checked', async ({ page }) => {
+    await page.getByTestId('leftJson').fill('{"foo":"bar"}');
+    await page.getByTestId('rightJson').fill('{"foo":"bar","baz":"qux"}');
+    await page.getByRole('switch').click();
+
+    const result = await page.getByTestId('diff-result').innerText();
+
+    expect(result).toContain(`{\nbaz: "qux",\n},`);
+  });
+});

src/tools/json-diff/json-diff.models.test.ts

@@ -0,0 +1,80 @@
+import { expect, describe, it } from 'vitest';
+import { diff } from './json-diff.models';
+
+describe('json-diff models', () => {
+  describe('diff', () => {
+    it('list object differences', () => {
+      const obj = { a: 1, b: 2 };
+      const newObj = { a: 1, b: 2, c: 3 };
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'object',
+        children: [
+          {
+            key: 'a',
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 'b',
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 'c',
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: { a: 1, b: 2 },
+        value: { a: 1, b: 2, c: 3 },
+        status: 'children-updated',
+      });
+    });
+
+    it('list array differences', () => {
+      const obj = [1, 2];
+      const newObj = [1, 2, 3];
+      const result = diff(obj, newObj);
+
+      expect(result).toEqual({
+        key: '',
+        type: 'array',
+        children: [
+          {
+            key: 0,
+            type: 'value',
+            value: 1,
+            oldValue: 1,
+            status: 'unchanged',
+          },
+          {
+            key: 1,
+            type: 'value',
+            value: 2,
+            oldValue: 2,
+            status: 'unchanged',
+          },
+          {
+            key: 2,
+            type: 'value',
+            value: 3,
+            oldValue: undefined,
+            status: 'added',
+          },
+        ],
+        oldValue: [1, 2],
+        value: [1, 2, 3],
+        status: 'children-updated',
+      });
+    });
+  });
+});

src/tools/json-diff/json-diff.models.ts

@@ -0,0 +1,140 @@
+import _ from 'lodash';
+import type { Difference, DifferenceStatus } from './json-diff.types';
+
+export { diff };
+
+function diff(
+  obj: unknown,
+  newObj: unknown,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  if (_.isArray(obj) && _.isArray(newObj)) {
+    return {
+      key: '',
+      type: 'array',
+      children: diffArrays(obj, newObj, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  if (_.isObject(obj) && _.isObject(newObj)) {
+    return {
+      key: '',
+      type: 'object',
+      children: diffObjects(obj as Record<string, unknown>, newObj as Record<string, unknown>, { onlyShowDifferences }),
+      oldValue: obj,
+      value: newObj,
+      status: getStatus(obj, newObj),
+    };
+  }
+
+  return {
+    key: '',
+    type: 'value',
+    oldValue: obj,
+    value: newObj,
+    status: getStatus(obj, newObj),
+  };
+}
+
+function diffObjects(
+  obj: Record<string, unknown>,
+  newObj: Record<string, unknown>,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const keys = Object.keys({ ...obj, ...newObj });
+  return keys
+    .map((key) => createDifference(obj?.[key], newObj?.[key], key, { onlyShowDifferences }))
+    .filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function createDifference(
+  value: unknown,
+  newValue: unknown,
+  key: string | number,
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference {
+  const type = getType(value);
+
+  if (type === 'object') {
+    return {
+      key,
+      type,
+      children: diffObjects(value as Record<string, unknown>, newValue as Record<string, unknown>, {
+        onlyShowDifferences,
+      }),
+      oldValue: value,
+      value: newValue,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  if (type === 'array') {
+    return {
+      key,
+      type,
+      children: diffArrays(value as unknown[], newValue as unknown[], { onlyShowDifferences }),
+      value: newValue,
+      oldValue: value,
+      status: getStatus(value, newValue),
+    };
+  }
+
+  return {
+    key,
+    type,
+    value: newValue,
+    oldValue: value,
+    status: getStatus(value, newValue),
+  };
+}
+
+function diffArrays(
+  arr: unknown[],
+  newArr: unknown[],
+  { onlyShowDifferences = false }: { onlyShowDifferences?: boolean } = {},
+): Difference[] {
+  const maxLength = Math.max(0, arr?.length, newArr?.length);
+  return Array.from({ length: maxLength }, (_, i) =>
+    createDifference(arr?.[i], newArr?.[i], i, { onlyShowDifferences }),
+  ).filter((diff) => !onlyShowDifferences || diff.status !== 'unchanged');
+}
+
+function getType(value: unknown): 'object' | 'array' | 'value' {
+  if (value === null) {
+    return 'value';
+  }
+  if (Array.isArray(value)) {
+    return 'array';
+  }
+  if (typeof value === 'object') {
+    return 'object';
+  }
+  return 'value';
+}
+
+function getStatus(value: unknown, newValue: unknown): DifferenceStatus {
+  if (value === undefined) {
+    return 'added';
+  }
+
+  if (newValue === undefined) {
+    return 'removed';
+  }
+
+  const bothAreObjects = getType(value) === 'object' && getType(newValue) === 'object';
+  const bothAreArrays = getType(value) === 'array' && getType(newValue) === 'array';
+  const bothAreDeepEqual = _.isEqual(value, newValue);
+
+  if (bothAreDeepEqual) {
+    return 'unchanged';
+  }
+
+  if (bothAreObjects || bothAreArrays) {
+    return 'children-updated';
+  }
+
+  return 'updated';
+}

src/tools/json-diff/json-diff.types.ts

@@ -0,0 +1,29 @@
+export type DifferenceStatus = 'added' | 'removed' | 'updated' | 'unchanged' | 'children-updated';
+
+export type ObjectDifference = {
+  key: string | number;
+  type: 'object';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type ValueDifference = {
+  key: string | number;
+  type: 'value';
+  value: unknown;
+  oldValue: unknown;
+  status: DifferenceStatus;
+};
+
+export type ArrayDifference = {
+  key: number | string;
+  type: 'array';
+  children: Difference[];
+  status: DifferenceStatus;
+  oldValue: unknown;
+  value: unknown;
+};
+
+export type Difference = ObjectDifference | ValueDifference | ArrayDifference;

src/tools/json-diff/json-diff.vue

@@ -0,0 +1,59 @@
+<template>
+  <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs as any">
+    <n-input
+      v-model:value="rawLeftJson"
+      placeholder="Paste your first json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'leftJson' }  as any"
+    />
+  </n-form-item>
+  <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs as any">
+    <n-input
+      v-model:value="rawRightJson"
+      placeholder="Paste your json to compare here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :input-props="{ 'data-test-id': 'rightJson' }  as any"
+    />
+  </n-form-item>
+
+  <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
+</template>
+
+<script setup lang="ts">
+import JSON5 from 'json5';
+
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import DiffsViewer from './diff-viewer/diff-viewer.vue';
+
+const rawLeftJson = ref('');
+const rawRightJson = ref('');
+
+const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
+const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
+
+const createJsonValidation = (json: Ref) =>
+  useValidation({
+    source: json,
+    rules: [
+      {
+        validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+        message: 'Invalid JSON',
+      },
+    ],
+  });
+
+const leftJsonValidation = createJsonValidation(rawLeftJson);
+const rightJsonValidation = createJsonValidation(rawRightJson);
+</script>

src/tools/json-viewer/json.models.ts

@@ -9,7 +9,7 @@ function sortObjectKeys<T>(obj: T): T {
   }
 
   if (Array.isArray(obj)) {
-    return obj.map(sortObjectKeys) as T;
+    return obj.map(sortObjectKeys) as unknown as T;
   }
 
   return Object.keys(obj)

src/tools/jwt-parser/jwt-parser.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
       <n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
     </n-form-item>
@@ -29,7 +29,7 @@
         </template>
       </tbody>
     </n-table>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/keycode-info/keycode-info.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
+    <c-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
       <n-h2 v-if="event">{{ event.key }}</n-h2>
       <n-text strong depth="3">Press the key on your keyboard you want to get info about this key</n-text>
-    </n-card>
+    </c-card>
 
     <n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
       <n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>

src/tools/list-converter/index.ts

@@ -0,0 +1,13 @@
+import { List } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'List converter',
+  path: '/list-converter',
+  description:
+    'This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row.',
+  keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
+  component: () => import('./list-converter.vue'),
+  icon: List,
+  createdAt: new Date('2023-05-07'),
+});

src/tools/list-converter/list-converter.e2e.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - List converter', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/list-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('List converter - IT Tools');
+  });
+
+  test('Simple list should be converted with default settings', async ({ page }) => {
+    await page.getByTestId('input').fill(`1
+    2
+    3
+    4
+    5`);
+
+    const result = await page.getByTestId('area-content').innerText();
+
+    expect(result.trim()).toEqual('1, 2, 3, 4, 5');
+  });
+
+  test('Duplicates should be removed, list should be sorted and prefix and suffix list items', async ({ page }) => {
+    await page.getByTestId('input').fill(`1
+    2
+    2
+    4
+    4
+    3
+    5`);
+    await page.getByTestId('removeDuplicates').check();
+    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'");
+  });
+});

src/tools/list-converter/list-converter.models.test.ts

@@ -0,0 +1,76 @@
+import { expect, describe, it } from 'vitest';
+import { convert } from './list-converter.models';
+import type { ConvertOptions } from './list-converter.types';
+
+describe('list-converter', () => {
+  describe('convert', () => {
+    it('should convert a given list', () => {
+      const options: ConvertOptions = {
+        separator: ', ',
+        trimItems: true,
+        removeDuplicates: true,
+        itemPrefix: '"',
+        itemSuffix: '"',
+        listPrefix: '',
+        listSuffix: '',
+        reverseList: false,
+        sortList: null,
+        lowerCase: false,
+        keepLineBreaks: false,
+      };
+      const input = `
+        1
+        2
+        
+        3
+        3
+        4
+        `;
+      expect(convert(input, options)).toEqual('"1", "2", "3", "4"');
+    });
+
+    it('should return an empty value for an empty input', () => {
+      const options: ConvertOptions = {
+        separator: ', ',
+        trimItems: true,
+        removeDuplicates: true,
+        itemPrefix: '',
+        itemSuffix: '',
+        listPrefix: '',
+        listSuffix: '',
+        reverseList: false,
+        sortList: null,
+        lowerCase: false,
+        keepLineBreaks: false,
+      };
+      expect(convert('', options)).toEqual('');
+    });
+
+    it('should keep line breaks', () => {
+      const options: ConvertOptions = {
+        separator: '',
+        trimItems: true,
+        itemPrefix: '<li>',
+        itemSuffix: '</li>',
+        listPrefix: '<ul>',
+        listSuffix: '</ul>',
+        keepLineBreaks: true,
+        lowerCase: false,
+        removeDuplicates: false,
+        reverseList: false,
+        sortList: null,
+      };
+      const input = `
+        1
+        2
+        3
+        `;
+      const expected = `<ul>
+<li>1</li>
+<li>2</li>
+<li>3</li>
+</ul>`;
+      expect(convert(input, options)).toEqual(expected);
+    });
+  });
+});

src/tools/list-converter/list-converter.models.ts

@@ -0,0 +1,27 @@
+import _ from 'lodash';
+import { byOrder } from '@/utils/array';
+import type { ConvertOptions } from './list-converter.types';
+
+export { convert };
+
+const whenever =
+  <T, R>(condition: boolean, fn: (value: T) => R) =>
+  (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()))
+    .split('\n')
+    .thru(whenever(options.removeDuplicates, _.uniq))
+    .thru(whenever(options.reverseList, _.reverse))
+    .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)
+    .join(options.separator + lineBreak)
+    .thru((text) => [options.listPrefix, text, options.listSuffix].join(lineBreak))
+    .value();
+}

src/tools/list-converter/list-converter.types.ts

@@ -0,0 +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;
+};

src/tools/list-converter/list-converter.vue

@@ -0,0 +1,123 @@
+<template>
+  <div style="flex: 0 0 100%">
+    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+      <c-card>
+        <div flex>
+          <div>
+            <n-form-item label="Trim list items" label-placement="left" label-width="150" :show-feedback="false" mb-2>
+              <n-switch v-model:value="conversionConfig.trimItems" />
+            </n-form-item>
+            <n-form-item label="Remove duplicates" label-placement="left" label-width="150" :show-feedback="false" mb-2>
+              <n-switch v-model:value="conversionConfig.removeDuplicates" data-test-id="removeDuplicates" />
+            </n-form-item>
+            <n-form-item
+              label="Convert to lowercase"
+              label-placement="left"
+              label-width="150"
+              :show-feedback="false"
+              mb-2
+            >
+              <n-switch v-model:value="conversionConfig.lowerCase" />
+            </n-form-item>
+            <n-form-item label="Keep line breaks" label-placement="left" label-width="150" :show-feedback="false" mb-2>
+              <n-switch v-model:value="conversionConfig.keepLineBreaks" />
+            </n-form-item>
+          </div>
+          <div flex-1>
+            <n-form-item label="Sort list" label-placement="left" label-width="120" :show-feedback="false" mb-2>
+              <n-select
+                v-model:value="conversionConfig.sortList"
+                :options="sortOrderOptions"
+                clearable
+                w-full
+                :disabled="conversionConfig.reverseList"
+                data-test-id="sortList"
+                placeholder="Sort alphabetically"
+              />
+            </n-form-item>
+
+            <c-input-text
+              v-model:value="conversionConfig.separator"
+              label="Separator"
+              label-position="left"
+              label-width="120px"
+              label-align="right"
+              mb-2
+              placeholder=","
+            />
+
+            <n-form-item label="Wrap item" label-placement="left" label-width="120" :show-feedback="false" mb-2>
+              <c-input-text
+                v-model:value="conversionConfig.itemPrefix"
+                placeholder="Item prefix"
+                test-id="itemPrefix"
+              />
+              <c-input-text
+                v-model:value="conversionConfig.itemSuffix"
+                placeholder="Item suffix"
+                test-id="itemSuffix"
+              />
+            </n-form-item>
+            <n-form-item label="Wrap list" label-placement="left" label-width="120" :show-feedback="false" mb-2>
+              <c-input-text
+                v-model:value="conversionConfig.listPrefix"
+                placeholder="List prefix"
+                test-id="listPrefix"
+              />
+              <c-input-text
+                v-model:value="conversionConfig.listSuffix"
+                placeholder="List suffix"
+                test-id="listSuffix"
+              />
+            </n-form-item>
+          </div>
+        </div>
+      </c-card>
+    </n-space>
+  </div>
+  <format-transformer
+    input-label="Your input data"
+    input-placeholder="Paste your input data here..."
+    output-label="Your transformed data"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import { convert } from './list-converter.models';
+import type { ConvertOptions } from './list-converter.types';
+
+const sortOrderOptions = [
+  {
+    label: 'Sort ascending',
+    value: 'asc',
+    disabled: false,
+  },
+  {
+    label: 'Sort descending',
+    value: 'desc',
+    disabled: false,
+  },
+];
+
+const conversionConfig = useStorage<ConvertOptions>('list-converter:conversionConfig', {
+  lowerCase: false,
+  trimItems: true,
+  removeDuplicates: true,
+  keepLineBreaks: false,
+  itemPrefix: '',
+  itemSuffix: '',
+  listPrefix: '',
+  listSuffix: '',
+  reverseList: false,
+  sortList: null,
+  separator: ', ',
+});
+
+const transformer = (value: string) => {
+  return convert(value, conversionConfig.value);
+};
+</script>
+
+<style lang="less" scoped></style>

src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-form-item label="Paragraphs" :show-feedback="false" label-width="200" label-placement="left">
       <n-slider v-model:value="paragraphs" :step="1" :min="1" :max="20" />
     </n-form-item>
@@ -16,15 +16,12 @@
       <n-switch v-model:value="asHTML" />
     </n-form-item>
 
-    <br />
+    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize mt-5 />
 
-    <n-input :value="loremIpsumText" type="textarea" placeholder="Your lorem ipsum..." readonly autosize />
-    <br />
-    <br />
-    <n-space justify="center">
-      <n-button secondary autofocus @click="copy"> Copy </n-button>
+    <n-space justify="center" mt-5>
+      <c-button autofocus @click="copy"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-form-item label="MAC address:" v-bind="validationAttrs">
+    <n-form-item label="MAC address:" v-bind="validationAttrs as any">
       <n-input
         v-model:value="macAddress"
         size="large"
@@ -14,17 +14,17 @@
     </n-form-item>
 
     <n-form-item label="Vendor info:">
-      <n-card>
+      <c-card>
         <n-text v-if="details">
           <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
         </n-text>
 
         <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
-      </n-card>
+      </c-card>
     </n-form-item>
 
     <n-space justify="center">
-      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+      <c-button :disabled="!details" @click="copy"> Copy vendor info </c-button>
     </n-space>
   </div>
 </template>
@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import db from 'oui/oui.json';
 import { macAddressValidation } from '@/utils/macAddress';
+import { useCopy } from '@/composable/copy';
 
 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
 
@@ -39,6 +40,8 @@ const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
 
 const { attrs: validationAttrs } = macAddressValidation(macAddress);
+
+const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
 </script>
 
 <style lang="less" scoped></style>

src/tools/math-evaluator/math-evaluator.vue

@@ -11,12 +11,10 @@
       autocapitalize="off"
       spellcheck="false"
     />
-    <br />
-    <br />
 
-    <n-card v-if="result !== ''" title="Result ">
+    <c-card v-if="result !== ''" title="Result " mt-5>
       {{ result }}
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/meta-tag-generator/meta-tag-generator.vue

@@ -5,7 +5,7 @@
 
       <n-input-group v-for="{ key, type, label, placeholder, ...element } of elements" :key="key">
         <n-input-group-label style="flex: 0 0 110px">{{ label }}</n-input-group-label>
-        <n-input v-if="type === 'input'" v-model:value="metadata[key]" :placeholder="placeholder" />
+        <c-input-text v-if="type === 'input'" v-model:value="metadata[key]" :placeholder="placeholder" clearable />
         <n-dynamic-input
           v-else-if="type === 'input-multiple'"
           v-model:value="metadata[key]"

src/tools/mime-types/mime-types.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-h2 style="margin-bottom: 0">Mime type to extension</n-h2>
     <div style="opacity: 0.8">Now witch file extensions are associated to a mime-type</div>
     <n-form-item>
@@ -27,9 +27,9 @@
         </n-tag>
       </div>
     </div>
-  </n-card>
+  </c-card>
 
-  <n-card>
+  <c-card>
     <n-h2 style="margin-bottom: 0">File extension to mime type</n-h2>
     <div style="opacity: 0.8">Now witch mime type is associated to a file extension</div>
     <n-form-item>
@@ -51,7 +51,7 @@
         </n-tag>
       </div>
     </div>
-  </n-card>
+  </c-card>
 
   <div>
     <n-table>

src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue

@@ -1,19 +1,23 @@
 <template>
   <div style="max-width: 350px">
-    <n-form-item label="Secret" v-bind="secretValidationAttrs">
-      <n-input v-model:value="secret" placeholder="Paste your TOTP secret...">
-        <template #suffix>
-          <n-tooltip trigger="hover">
-            <template #trigger>
-              <n-button quaternary circle @click="refreshSecret">
-                <n-icon :component="Refresh" />
-              </n-button>
-            </template>
-            Generate secret token
-          </n-tooltip>
-        </template>
-      </n-input>
-    </n-form-item>
+    <c-input-text
+      v-model:value="secret"
+      label="Secret"
+      placeholder="Paste your TOTP secret..."
+      mb-5
+      :validation-rules="secretValidationRules"
+    >
+      <template #suffix>
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <c-button circle variant="text" size="small" @click="refreshSecret">
+              <icon-mdi-refresh />
+            </c-button>
+          </template>
+          Generate secret token
+        </n-tooltip>
+      </template>
+    </c-input-text>
 
     <div>
       <token-display :tokens="tokens" style="margin-top: 2px" />
@@ -23,53 +27,56 @@
     </div>
     <n-space justify="center" vertical align="center" style="margin-top: 10px">
       <n-image :src="qrcode"></n-image>
-      <n-button secondary tag="a" :href="keyUri" target="_blank">Open Key URI in new tab</n-button>
+      <c-button :href="keyUri" target="_blank">Open Key URI in new tab</c-button>
     </n-space>
   </div>
   <div style="max-width: 350px">
-    <n-form-item label="Secret in hexadecimal">
-      <input-copyable :value="base32toHex(secret)" readonly placeholder="Secret in hex will be displayed here" />
-    </n-form-item>
+    <input-copyable
+      label="Secret in hexadecimal"
+      :value="base32toHex(secret)"
+      readonly
+      placeholder="Secret in hex will be displayed here"
+      mb-5
+    />
 
-    <n-form-item label="Epoch">
-      <input-copyable
-        :value="Math.floor(now / 1000).toString()"
-        readonly
-        placeholder="Epoch in sec will be displayed here"
-      />
-    </n-form-item>
-    <n-form-item label="Iteration" :show-feedback="false">
-      <n-input-group>
-        <n-input-group-label style="width: 110px">Count:</n-input-group-label>
-        <input-copyable
-          :value="String(getCounterFromTime({ now, timeStep: 30 }))"
-          readonly
-          placeholder="Iteration count will be displayed here"
-        />
-      </n-input-group>
-    </n-form-item>
+    <input-copyable
+      label="Epoch"
+      :value="Math.floor(now / 1000).toString()"
+      readonly
+      mb-5
+      placeholder="Epoch in sec will be displayed here"
+    />
 
-    <n-form-item label="Iteration" :show-label="false" style="margin-top: 5px">
-      <n-input-group>
-        <n-input-group-label style="width: 110px">Padded hex:</n-input-group-label>
-        <input-copyable
-          :value="getCounterFromTime({ now, timeStep: 30 }).toString(16).padStart(16, '0')"
-          readonly
-          placeholder="Iteration count in hex will be displayed here"
-        />
-      </n-input-group>
-    </n-form-item>
+    <p>Iteration</p>
+
+    <input-copyable
+      :value="String(getCounterFromTime({ now, timeStep: 30 }))"
+      readonly
+      label="Count:"
+      label-position="left"
+      label-width="90px"
+      label-align="right"
+      placeholder="Iteration count will be displayed here"
+    />
+
+    <input-copyable
+      :value="getCounterFromTime({ now, timeStep: 30 }).toString(16).padStart(16, '0')"
+      readonly
+      placeholder="Iteration count in hex will be displayed here"
+      label-position="left"
+      label-width="90px"
+      label-align="right"
+      label="Padded hex:"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { Refresh } from '@vicons/tabler';
 import { useTimestamp } from '@vueuse/core';
 import { useThemeVars } from 'naive-ui';
 import { useStyleStore } from '@/stores/style.store';
 import InputCopyable from '@/components/InputCopyable.vue';
-import { useValidation } from '@/composable/validation';
 import { computedRefreshable } from '@/composable/computedRefreshable';
 import { generateTOTP, buildKeyUri, generateSecret, base32toHex, getCounterFromTime } from './otp.service';
 import { useQRCode } from '../qr-code-generator/useQRCode';
@@ -106,19 +113,16 @@ const { qrcode } = useQRCode({
   options: { width: 210 },
 });
 
-const { attrs: secretValidationAttrs } = useValidation({
-  source: secret,
-  rules: [
-    {
-      message: 'Secret should be a base32 string',
-      validator: (value) => value.toUpperCase().match(/^[A-Z234567]+$/),
-    },
-    {
-      message: 'Please set a secret',
-      validator: (value) => value !== '',
-    },
-  ],
-});
+const secretValidationRules = [
+  {
+    message: 'Secret should be a base32 string',
+    validator: (value: string) => value.toUpperCase().match(/^[A-Z234567]+$/),
+  },
+  {
+    message: 'Please set a secret',
+    validator: (value: string) => value !== '',
+  },
+];
 </script>
 
 <style lang="less" scoped>

src/tools/otp-code-generator-and-validator/token-display.vue

@@ -8,31 +8,30 @@
     <n-input-group>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button data-test-id="previous-otp" secondary @click.prevent="copyPrevious(tokens.previous)">{{
-            tokens.previous
-          }}</n-button>
+          <c-button important:h-12 data-test-id="previous-otp" @click.prevent="copyPrevious(tokens.previous)">
+            {{ tokens.previous }}
+          </c-button>
         </template>
         <div>{{ previousCopied ? 'Copied !' : 'Copy previous OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button
-            tertiary
-            type="primary"
+          <c-button
             data-test-id="current-otp"
             class="current-otp"
+            important:h-12
             @click.prevent="copyCurrent(tokens.current)"
           >
             {{ tokens.current }}
-          </n-button>
+          </c-button>
         </template>
         <div>{{ currentCopied ? 'Copied !' : 'Copy current OTP' }}</div>
       </n-tooltip>
       <n-tooltip trigger="hover" placement="bottom">
         <template #trigger>
-          <n-button secondary data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
+          <c-button important:h-12 data-test-id="next-otp" @click.prevent="copyNext(tokens.next)">{{
             tokens.next
-          }}</n-button>
+          }}</c-button>
         </template>
         <div>{{ nextCopied ? 'Copied !' : 'Copy next OTP' }}</div>
       </n-tooltip>

src/tools/phone-parser-and-formatter/index.ts

@@ -0,0 +1,25 @@
+import { Phone } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Phone parser and formatter',
+  path: '/phone-parser-and-formatter',
+  description:
+    'Parse, validate and format phone numbers. Get information about the phone number, like the country code, type, etc.',
+  keywords: [
+    'phone',
+    'parser',
+    'formatter',
+    'validate',
+    'format',
+    'number',
+    'telephone',
+    'mobile',
+    'cell',
+    'international',
+    'national',
+  ],
+  component: () => import('./phone-parser-and-formatter.vue'),
+  icon: Phone,
+  createdAt: new Date('2023-05-01'),
+});

src/tools/phone-parser-and-formatter/phone-parser-and-formatter.e2e.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - Phone parser and formatter', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/phone-parser-and-formatter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Phone parser and formatter - IT Tools');
+  });
+});

src/tools/phone-parser-and-formatter/phone-parser-and-formatter.models.ts

@@ -0,0 +1,41 @@
+import type { CountryCode, NumberType } from 'libphonenumber-js/types';
+import lookup from 'country-code-lookup';
+
+export { formatTypeToHumanReadable, getFullCountryName, getDefaultCountryCode };
+
+const typeToLabel: Record<NonNullable<NumberType>, string> = {
+  MOBILE: 'Mobile',
+  FIXED_LINE: 'Fixed line',
+  FIXED_LINE_OR_MOBILE: 'Fixed line or mobile',
+  PERSONAL_NUMBER: 'Personal number',
+  PREMIUM_RATE: 'Premium rate',
+  SHARED_COST: 'Shared cost',
+  TOLL_FREE: 'Toll free',
+  UAN: 'Universal access number',
+  VOICEMAIL: 'Voicemail',
+  VOIP: 'VoIP',
+  PAGER: 'Pager',
+};
+
+function formatTypeToHumanReadable(type: NumberType): string | undefined {
+  if (!type) return undefined;
+
+  return typeToLabel[type];
+}
+
+function getFullCountryName(countryCode: string | undefined) {
+  if (!countryCode) return undefined;
+
+  return lookup.byIso(countryCode)?.country;
+}
+
+function getDefaultCountryCode({
+  locale = window.navigator.language,
+  defaultCode = 'FR',
+}: { locale?: string; defaultCode?: CountryCode } = {}): CountryCode {
+  const countryCode = locale.split('-')[1]?.toUpperCase();
+
+  if (!countryCode) return defaultCode;
+
+  return (lookup.byIso(countryCode)?.iso2 ?? defaultCode) as CountryCode;
+}

src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <n-form-item label="Default country code:">
+      <n-select v-model:value="defaultCountryCode" :options="countriesOptions" />
+    </n-form-item>
+
+    <c-input-text
+      v-model:value="rawPhone"
+      placeholder="Enter a phone number"
+      label="Phone number:"
+      :validation="validation"
+      mb-5
+    />
+
+    <n-table v-if="parsedDetails">
+      <tbody>
+        <tr v-for="{ label, value } in parsedDetails" :key="label">
+          <td>
+            <n-text strong>{{ label }}</n-text>
+          </td>
+          <td>
+            <span-copyable v-if="value" :value="value"></span-copyable>
+            <n-text v-else depth="3" italic>Unknown</n-text>
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { withDefaultOnError } from '@/utils/defaults';
+import { parsePhoneNumber, getCountries, getCountryCallingCode } from 'libphonenumber-js/max';
+import { booleanToHumanReadable } from '@/utils/boolean';
+import { useValidation } from '@/composable/validation';
+import lookup from 'country-code-lookup';
+import {
+  formatTypeToHumanReadable,
+  getFullCountryName,
+  getDefaultCountryCode,
+} from './phone-parser-and-formatter.models';
+
+const rawPhone = ref('');
+const defaultCountryCode = ref(getDefaultCountryCode());
+const validation = useValidation({
+  source: rawPhone,
+  rules: [
+    {
+      validator: (value) => value === '' || /^[0-9 +\-()]+$/.test(value),
+      message: 'Invalid phone number',
+    },
+  ],
+});
+
+const parsedDetails = computed(() => {
+  if (!validation.isValid) return undefined;
+
+  const parsed = withDefaultOnError(() => parsePhoneNumber(rawPhone.value, defaultCountryCode.value), undefined);
+
+  if (!parsed) return undefined;
+
+  return [
+    {
+      label: 'Country',
+      value: parsed.country,
+    },
+    {
+      label: 'Country',
+      value: getFullCountryName(parsed.country),
+    },
+    {
+      label: 'Country calling code',
+      value: parsed.countryCallingCode,
+    },
+    {
+      label: 'Is valid?',
+      value: booleanToHumanReadable(parsed.isValid()),
+    },
+    {
+      label: 'Is possible?',
+      value: booleanToHumanReadable(parsed.isPossible()),
+    },
+    {
+      label: 'Type',
+      value: formatTypeToHumanReadable(parsed.getType()),
+    },
+    {
+      label: 'International format',
+      value: parsed.formatInternational(),
+    },
+    {
+      label: 'National format',
+      value: parsed.formatNational(),
+    },
+    {
+      label: 'E.164 format',
+      value: parsed.format('E.164'),
+    },
+    {
+      label: 'RFC3966 format',
+      value: parsed.format('RFC3966'),
+    },
+  ];
+});
+
+const countriesOptions = getCountries().map((code) => ({
+  label: `${lookup.byIso(code)?.country || code} (+${getCountryCallingCode(code)})`,
+  value: code,
+}));
+</script>
+
+<style lang="less" scoped></style>

src/tools/qr-code-generator/qr-code-generator.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card>
+  <c-card>
     <n-grid x-gap="12" y-gap="12" cols="1 600:3">
       <n-gi span="2">
         <n-form label-width="130" label-placement="left">
@@ -28,11 +28,11 @@
       <n-gi>
         <n-space justify="center" align="center" vertical>
           <n-image :src="qrcode" width="200" />
-          <n-button secondary @click="download"> Download qr-code </n-button>
+          <c-button @click="download"> Download qr-code </c-button>
         </n-space>
       </n-gi>
     </n-grid>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/random-port-generator/random-port-generator.vue

@@ -1,13 +1,13 @@
 <template>
-  <n-card>
+  <c-card>
     <div class="port">
       {{ port }}
     </div>
     <n-space justify="center">
-      <n-button secondary @click="copy"> Copy </n-button>
-      <n-button secondary @click="refreshPort"> Refresh </n-button>
+      <c-button @click="copy"> Copy </c-button>
+      <c-button @click="refreshPort"> Refresh </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/roman-numeral-converter/roman-numeral-converter.vue

@@ -1,32 +1,28 @@
 <template>
   <div>
-    <n-card title="Arabic to roman">
+    <c-card title="Arabic to roman">
       <n-space align="center" justify="space-between">
-        <n-form-item v-bind="validationNumeral">
+        <n-form-item v-bind="validationNumeral as any">
           <n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
         </n-form-item>
         <div class="result">
           {{ outputRoman }}
         </div>
-        <n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
+        <c-button autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
           Copy
-        </n-button>
+        </c-button>
       </n-space>
-    </n-card>
-    <br />
-    <n-card title="Roman to arabic">
+    </c-card>
+    <c-card title="Roman to arabic" mt-5>
       <n-space align="center" justify="space-between">
-        <n-form-item v-bind="validationRoman">
-          <n-input v-model:value="inputRoman" style="width: 200px" />
-        </n-form-item>
+        <c-input-text v-model:value="inputRoman" style="width: 200px" :validation="validationRoman" />
+
         <div class="result">
           {{ outputNumeral }}
         </div>
-        <n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
-          Copy
-        </n-button>
+        <c-button :disabled="!validationRoman.isValid" @click="copyArabic"> Copy </c-button>
       </n-space>
-    </n-card>
+    </c-card>
   </div>
 </template>
 
@@ -58,7 +54,7 @@ const { attrs: validationNumeral } = useValidation({
 const inputRoman = ref('XLII');
 const outputNumeral = computed(() => romanToArabic(inputRoman.value));
 
-const { attrs: validationRoman } = useValidation({
+const validationRoman = useValidation({
   source: inputRoman,
   rules: [
     {

src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue

@@ -1,11 +1,11 @@
 <template>
   <div style="flex: 0 0 100%">
     <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
-      <n-form-item label="Bits :" v-bind="bitsValidationAttrs" label-placement="left" label-width="100">
+      <n-form-item label="Bits :" v-bind="bitsValidationAttrs as any" label-placement="left" label-width="100">
         <n-input-number v-model:value="bits" min="256" max="16384" step="8" />
       </n-form-item>
 
-      <n-button tertiary @click="refreshCerts">Refresh key-pair</n-button>
+      <c-button @click="refreshCerts">Refresh key-pair</c-button>
     </n-space>
   </div>
 

src/tools/slugify-string/slugify-string.vue

@@ -14,7 +14,7 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
+      <c-button :disabled="slug.length === 0" @click="copy">Copy slug</c-button>
     </n-space>
   </div>
 </template>

src/tools/svg-placeholder-generator/svg-placeholder-generator.vue

@@ -21,9 +21,15 @@
         <n-form-item label="Font size">
           <n-input-number v-model:value="fontSize" placeholder="Font size..." min="1" />
         </n-form-item>
-        <n-form-item label="Custom text">
-          <n-input v-model:value="customText" :placeholder="`Default is ${width}x${height}`" />
-        </n-form-item>
+
+        <c-input-text
+          v-model:value="customText"
+          label="Custom text"
+          :placeholder="`Default is ${width}x${height}`"
+          label-position="left"
+          label-width="100px"
+          label-align="right"
+        />
       </n-space>
       <n-form-item label="Use exact size" label-placement="left">
         <n-switch v-model:value="useExactSize" />
@@ -38,9 +44,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copySVG()">Copy svg</n-button>
-      <n-button secondary @click="copyBase64()">Copy base64</n-button>
-      <n-button secondary @click="download()">Download svg</n-button>
+      <c-button @click="copySVG()">Copy svg</c-button>
+      <c-button @click="copyBase64()">Copy base64</c-button>
+      <c-button @click="download()">Download svg</c-button>
     </n-space>
   </div>
 

src/tools/text-statistics/text-statistics.vue

@@ -1,15 +1,14 @@
 <template>
-  <n-card>
+  <c-card>
     <n-input v-model:value="text" type="textarea" placeholder="Your text..." rows="5" />
-    <br />
-    <br />
-    <n-space justify="space-around">
+
+    <n-space justify="space-around" mt-5>
       <n-statistic label="Character count" :value="text.length" />
       <n-statistic label="Word count" :value="text === '' ? 0 : text.split(/\s+/).length" />
       <n-statistic label="Line count" :value="text === '' ? 0 : text.split(/\r\n|\r|\n/).length" />
       <n-statistic label="Byte size" :value="formatBytes(getStringSizeInBytes(text))" />
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue

@@ -1,17 +1,21 @@
 <template>
   <div>
-    <n-form-item label="Your text to convert to NATO phonetic alphabet">
-      <n-input v-model:value="input" placeholder="Put your text here..." clearable />
-    </n-form-item>
+    <c-input-text
+      v-model:value="input"
+      label="Your text to convert to NATO phonetic alphabet"
+      placeholder="Put your text here..."
+      clearable
+      mb-5
+    />
 
     <n-space v-if="natoText" vertical>
       <n-text>Your text in NATO phonetic alphabet</n-text>
-      <n-card>
+      <c-card>
         {{ natoText }}
-      </n-card>
+      </c-card>
 
       <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
+        <c-button autofocus @click="copy"> Copy NATO string </c-button>
       </n-space>
     </n-space>
   </div>

src/tools/token-generator/token-generator.tool.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <n-card>
+    <c-card>
       <n-form label-placement="left" label-width="140">
         <n-space justify="center" item-style="padding: 0" :size="0">
           <div>
@@ -41,13 +41,12 @@
         autocapitalize="off"
         spellcheck="false"
       />
-      <br />
-      <br />
-      <n-space justify="center">
-        <n-button secondary autofocus @click="copy"> Copy </n-button>
-        <n-button secondary @click="refreshToken"> Refresh </n-button>
+
+      <n-space justify="center" mt-5>
+        <c-button @click="copy"> Copy </c-button>
+        <c-button @click="refreshToken"> Refresh </c-button>
       </n-space>
-    </n-card>
+    </c-card>
   </div>
 </template>
 

src/tools/url-encoder/url-encoder.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-card title="Encode">
+  <c-card title="Encode">
     <n-form-item
       label="Your string :"
       :feedback="encodedValidation.message"
@@ -24,10 +24,10 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyEncoded"> Copy </n-button>
+      <c-button @click="copyEncoded"> Copy </c-button>
     </n-space>
-  </n-card>
-  <n-card title="Decode">
+  </c-card>
+  <c-card title="Decode">
     <n-form-item
       label="Your encoded string :"
       :feedback="decodeValidation.message"
@@ -52,9 +52,9 @@
     </n-form-item>
 
     <n-space justify="center">
-      <n-button secondary @click="copyDecoded"> Copy </n-button>
+      <c-button @click="copyDecoded"> Copy </c-button>
     </n-space>
-  </n-card>
+  </c-card>
 </template>
 
 <script setup lang="ts">

src/tools/url-parser/url-parser.vue

@@ -1,51 +1,59 @@
 <template>
-  <n-card>
-    <n-form-item label="Your url to parse:" :feedback="validation.message" :validation-status="validation.status">
-      <n-input v-model:value="urlToParse" placeholder="Your url to parse..." />
-    </n-form-item>
+  <c-card>
+    <c-input-text
+      v-model:value="urlToParse"
+      label="Your url to parse:"
+      placeholder="Your url to parse..."
+      raw-text
+      :validation-rules="urlValidationRules"
+    />
 
-    <n-divider style="margin-top: 0" />
+    <n-divider />
 
-    <n-form>
-      <n-input-group v-for="{ title, key } in properties" :key="key">
-        <n-input-group-label style="flex: 0 0 120px"> {{ title }}: </n-input-group-label>
-        <input-copyable :value="(urlParsed?.[key] as string) ?? ''" readonly placeholder=" " />
-      </n-input-group>
+    <input-copyable
+      v-for="{ title, key } in properties"
+      :key="key"
+      :label="title"
+      :value="(urlParsed?.[key] as string) ?? ''"
+      readonly
+      label-position="left"
+      label-width="110px"
+      mb-2
+      placeholder=" "
+    />
 
-      <n-input-group
-        v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
-        :key="k"
-      >
-        <n-input-group-label style="flex: 0 0 120px">
-          <n-icon :component="SubdirectoryArrowRightRound" />
-        </n-input-group-label>
-        <input-copyable :value="k" readonly />
-        <input-copyable :value="v" readonly />
-      </n-input-group>
-    </n-form>
-  </n-card>
+    <div
+      v-for="[k, v] in Object.entries(Object.fromEntries(urlParsed?.searchParams.entries() ?? []))"
+      :key="k"
+      mb-2
+      w-full
+      flex
+    >
+      <div style="flex: 1 0 110px">
+        <icon-mdi-arrow-right-bottom />
+      </div>
+
+      <input-copyable :value="k" readonly />
+      <input-copyable :value="v" readonly />
+    </div>
+  </c-card>
 </template>
 
 <script setup lang="ts">
-import { useValidation } from '@/composable/validation';
 import { isNotThrowing } from '@/utils/boolean';
 import { withDefaultOnError } from '@/utils/defaults';
-import { SubdirectoryArrowRightRound } from '@vicons/material';
 import { computed, ref } from 'vue';
 import InputCopyable from '../../components/InputCopyable.vue';
 
 const urlToParse = ref('https://me:pwd@it-tools.tech:3000/url-parser?key1=value&key2=value2#the-hash');
 
 const urlParsed = computed(() => withDefaultOnError(() => new URL(urlToParse.value), undefined));
-const validation = useValidation({
-  source: urlToParse,
-  rules: [
-    {
-      validator: (value) => isNotThrowing(() => new URL(value)),
-      message: 'Invalid url',
-    },
-  ],
-});
+const urlValidationRules = [
+  {
+    validator: (value: string) => isNotThrowing(() => new URL(value)),
+    message: 'Invalid url',
+  },
+];
 
 const properties: { title: string; key: keyof URL }[] = [
   { title: 'Protocol', key: 'protocol' },

src/tools/user-agent-parser/user-agent-parser.types.ts

@@ -6,7 +6,7 @@ export type UserAgentResultSection = {
   icon?: Component;
   content: {
     label: string;
-    getValue: (blocks: UAParser.IResult) => string | undefined;
+    getValue: (blocks?: UAParser.IResult) => string | undefined;
     undefinedFallback?: string;
   }[];
 };

src/tools/user-agent-parser/user-agent-parser.vue

@@ -40,12 +40,12 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Name',
-        getValue: (block) => block.browser.name,
+        getValue: (block) => block?.browser.name,
         undefinedFallback: 'No browser name available',
       },
       {
         label: 'Version',
-        getValue: (block) => block.browser.version,
+        getValue: (block) => block?.browser.version,
         undefinedFallback: 'No browser version available',
       },
     ],
@@ -56,12 +56,12 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Name',
-        getValue: (block) => block.engine.name,
+        getValue: (block) => block?.engine.name,
         undefinedFallback: 'No engine name available',
       },
       {
         label: 'Version',
-        getValue: (block) => block.engine.version,
+        getValue: (block) => block?.engine.version,
         undefinedFallback: 'No engine version available',
       },
     ],
@@ -72,12 +72,12 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Name',
-        getValue: (block) => block.os.name,
+        getValue: (block) => block?.os.name,
         undefinedFallback: 'No OS name available',
       },
       {
         label: 'Version',
-        getValue: (block) => block.os.version,
+        getValue: (block) => block?.os.version,
         undefinedFallback: 'No OS version available',
       },
     ],
@@ -88,17 +88,17 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Model',
-        getValue: (block) => block.device.model,
+        getValue: (block) => block?.device.model,
         undefinedFallback: 'No device model available',
       },
       {
         label: 'Type',
-        getValue: (block) => block.device.type,
+        getValue: (block) => block?.device.type,
         undefinedFallback: 'No device type available',
       },
       {
         label: 'Vendor',
-        getValue: (block) => block.device.vendor,
+        getValue: (block) => block?.device.vendor,
         undefinedFallback: 'No device vendor available',
       },
     ],
@@ -109,7 +109,7 @@ const sections: UserAgentResultSection[] = [
     content: [
       {
         label: 'Architecture',
-        getValue: (block) => block.cpu.architecture,
+        getValue: (block) => block?.cpu.architecture,
         undefinedFallback: 'No CPU architecture available',
       },
     ],