feat(new tool): Morse converter

components.d.ts

@@ -126,6 +126,8 @@ declare module '@vue/runtime-core' {
     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']
+    MorseConverter: typeof import('./src/tools/morse-converter/morse-converter.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']

package.json

@@ -41,6 +41,7 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
+    "@types/morsee": "^1.0.2",
     "@types/figlet": "^1.5.8",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
@@ -72,6 +73,7 @@
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",
     "monaco-editor": "^0.43.0",
+    "morsee": "^1.0.9",
     "naive-ui": "^2.35.0",
     "netmask": "^2.0.2",
     "node-forge": "^1.3.1",

src/tools/index.ts

@@ -1,7 +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 asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
@@ -107,6 +107,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>