feat(new tool): Morse converter

Fix #1001

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as morseConverter } from './morse-converter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -100,6 +101,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      morseConverter,
     ],
   },
   {

src/tools/morse-converter/index.ts

@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Morse COde Converter',
+  path: '/morse-converter',
+  description: 'Encode/Decode to Morse code',
+  keywords: ['morse', 'converter'],
+  component: () => import('./morse-converter.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/morse-converter/morse-converter.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { decode, encode } from 'morsee';
+import { computedCatch } from '@/composable/computed/catchedComputed';
+
+const encodeInput = ref('');
+const encodeOutput = computed(() => encode(encodeInput.value));
+
+const decodeInput = ref('');
+const [decodeOutput, decodeError] = computedCatch(() => decode(decodeInput.value), {
+  defaultValue: '',
+  defaultErrorMessage: 'Unable to decode your text',
+});
+</script>
+
+<template>
+  <c-card title="Encode">
+    <div flex gap-3>
+      <c-input-text
+        v-model:value="encodeInput"
+        label="Your text:"
+        placeholder="The string to encode"
+        rows="4"
+        multiline raw-text monospace autosize flex-1
+      />
+    </div>
+    <c-input-text
+      label="Your text encoded to Morse code:"
+      :value="encodeOutput"
+      rows="3"
+      placeholder="Your string encoded"
+      multiline monospace readonly autosize mt-5
+    />
+  </c-card>
+  <c-card title="Decode">
+    <div flex gap-3>
+      <c-input-text
+        v-model:value="decodeInput"
+        label="Your Morse encoded text:"
+        placeholder="The string to decode"
+        rows="4"
+        multiline raw-text monospace autosize flex-1
+      />
+    </div>
+    <c-alert v-if="decodeError" type="error" mt-12 title="Error while decoding">
+      {{ decodeError }}
+    </c-alert>
+    <c-input-text
+      v-else
+      label="Your decoded text:"
+      :value="decodeOutput"
+      placeholder="Your string decoded"
+      rows="3"
+      multiline monospace readonly autosize mt-5
+    />
+  </c-card>
+</template>