Refactor views structure

src/views/strings/Numeronym.vue

@@ -0,0 +1,55 @@
+<template>
+  <h2 class="tool-title">Str numeronym</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <input id="data" v-model="toolData.data" v-on:keyup="result" type="text">
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+import { unproxy } from "../../utils/unproxy";
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        data: ""
+      },
+      toolResult: ""
+    };
+  },
+  methods: {
+    result() {
+      const word = unproxy(this.toolData.data);
+
+      if (word.length <= 3) {
+        this.toolResult = word;
+        return;
+      }
+
+      const firstLetter = word[0];
+      const lastLetter = word[word.length - 1];
+      const numberOfLetters = word.length - 2;
+
+      this.toolResult = `${firstLetter}${numberOfLetters}${lastLetter}`;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>