Merge branch 'feat/morse-converter' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -83,6 +83,7 @@
     "@tiptap/vue-3": "2.0.3",
     "@types/emscripten": "^1.39.10",
     "@types/big.js": "^6.2.2",
+    "@types/morsee": "^1.0.2",
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
     "@types/potrace": "^2.1.5",
@@ -244,6 +245,7 @@
     "md-editor-v3": "^4.13.5",
     "mime-types": "^2.1.35",
     "monaco-editor": "^0.43.0",
+    "morsee": "^1.0.9",
     "naive-ui": "^2.35.0",
     "netmask": "^2.0.2",
     "nginx-config-formatter": "^1.4.5",

pnpm-lock.yaml

@@ -64,6 +64,7 @@ import { tool as daysCalculator } from './days-calculator';
 import { tool as dateDurationCalculator } from './date-duration-calculator';
 import { tool as macAddressConverter } from './mac-address-converter';
 import { tool as dockerComposeToKubernetesConverter } from './docker-compose-to-kubernetes';
+import { tool as morseConverter } from './morse-converter';
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as certificateKeyParser } from './certificate-key-parser';
@@ -310,6 +311,7 @@ export const toolsByCategory: ToolCategory[] = [
       gzipConverter,
       htmlCleaner,
       mimeConverter,
+      morseConverter,
     ],
   },
   {

src/tools/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/index.ts

@@ -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>