feat(tool): url encode/decode

src/tools/index.ts

@@ -10,6 +10,7 @@ import { tool as bip39 } from './bip39-generator';
 import { tool as dateTimeConverter } from './date-time-converter';
 import { tool as gitMemo } from './git-memo';
 import { tool as baseConverter } from './integer-base-converter';
+import { tool as urlEncoder } from './url-encoder';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -22,6 +23,11 @@ export const toolsByCategory: ToolCategory[] = [
     icon: LockOpen,
     components: [dateTimeConverter, baseConverter, romanNumeralConverter],
   },
+  {
+    name: 'Web',
+    icon: LockOpen,
+    components: [urlEncoder],
+  },
   {
     name: 'Development',
     icon: LockOpen,

src/tools/url-encoder/index.ts

@@ -0,0 +1,11 @@
+import { Link } from '@vicons/tabler';
+import type { ITool } from '../Tool';
+
+export const tool: ITool = {
+  name: 'Encode/decode url formatted strings',
+  path: '/url-encoder',
+  description: 'Encode to url-encoded format (also known as "percent-encoded") or decode from it.',
+  keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
+  component: () => import('./url-encoder.vue'),
+  icon: Link,
+};

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

@@ -0,0 +1,100 @@
+<template>
+    <n-space item-style="flex:1">
+        <n-card title="Encode">
+            <n-form-item label="Your string :" :feedback="encodedValidation.message"
+                :validation-status="encodedValidation.status">
+                <n-input v-model:value="encodeInput" type="textarea" placeholder="The string to encode"
+                    :autosize="{ minRows: 3 }" />
+            </n-form-item>
+
+            <n-form-item label="Your string encoded :">
+                <n-input :value="encodeOutput" type="textarea" readonly placeholder="Your string encoded"
+                    :autosize="{ minRows: 3 }" />
+            </n-form-item>
+
+            <n-space justify="center">
+                <n-button @click="copyEncoded" secondary>Copy</n-button>
+            </n-space>
+        </n-card>
+        <n-card title="Encode">
+            <n-form-item label="Your encode string :" :feedback="decodeValidation.message"
+                :validation-status="decodeValidation.status">
+                <n-input v-model:value="decodeInput" type="textarea" placeholder="The string to decode"
+                    :autosize="{ minRows: 3 }" />
+            </n-form-item>
+
+            <n-form-item label="Your string decoded :">
+                <n-input :value="decodeOutput" type="textarea" readonly placeholder="Your string decoded"
+                    :autosize="{ minRows: 3 }" />
+            </n-form-item>
+
+            <n-space justify="center">
+                <n-button @click="copyDecoded" secondary>Copy</n-button>
+            </n-space>
+        </n-card>
+    </n-space>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { useValidation } from '@/composable/validation';
+import { computed, ref } from 'vue'
+
+const encodeInput = ref('Hello world :)')
+const encodeOutput = computed(() => {
+    try {
+        return encodeURIComponent(encodeInput.value)
+    } catch (_) {
+        return ''
+    }
+})
+
+const encodedValidation = useValidation({
+    source: encodeInput, rules: [{
+        validator: (value) => {
+            try {
+                encodeURIComponent(value)
+                return true
+            } catch (_) {
+                return false
+            }
+        },
+        message: 'Impossible to parse this string'
+    }]
+})
+
+const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded string copied to the clipboard' })
+
+
+const decodeInput = ref('Hello%20world%20%3A)')
+
+const decodeOutput = computed(() => {
+    try {
+        return decodeURIComponent(decodeInput.value)
+    } catch (_) {
+        return ''
+    }
+})
+
+const decodeValidation = useValidation({
+    source: encodeInput, rules: [{
+        validator: (value) => {
+            try {
+                decodeURIComponent(value)
+                return true
+            } catch (_) {
+                return false
+            }
+        },
+        message: 'Impossible to parse this string'
+    }]
+})
+
+const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded string copied to the clipboard' })
+
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>