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

<template>
  <h2 class="tool-title">Str to lower/upper</h2>
  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="data">Data</label>
    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label>Mode</label>

    <div>
      <input id="case_mode_lower" value="lower" name="case_mode" v-model="toolData.caseMode" v-on:change="result" type="radio"> <label for="case_mode_lower">to lower</label><br>
      <input id="case_mode_upper" value="upper" name="case_mode" v-model="toolData.caseMode" v-on:change="result" type="radio"> <label for="case_mode_upper">to upper</label>
    </div>
  </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";

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      toolData: {
        data: '',
        caseMode: 'upper',
      },
      toolResult: '',
    };
  },
  methods: {
    result() {
      switch (this.toolData.caseMode) {
        case 'lower':
          this.toolResult = this.toolData.data.toLocaleLowerCase();
          break;
        case 'upper':
          this.toolResult = this.toolData.data.toLocaleUpperCase();
          break;
      }
    },
  },
}
</script>

<style lang="scss">

</style>