random-web-tools/src/views/StrNumeronym.vue

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