random-web-tools/src/views/strings/UrlEncodeDecode.vue

<template>
  <h2 class="tool-title">URL encode/decode</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="encode_mode_encode"
        value="encode"
        name="encode_mode"
        v-model="toolData.encodeMode"
        v-on:change="result"
        type="radio"
      />
      <label for="encode_mode_encode"> encode</label><br />
      <input
        id="encode_mode_decode"
        value="decode"
        name="encode_mode"
        v-model="toolData.encodeMode"
        v-on:change="result"
        type="radio"
      />
      <label for="encode_mode_decode"> decode</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: "",
        encodeMode: "decode",
      },
      toolResult: "",
    };
  },
  methods: {
    result() {
      switch (this.toolData.encodeMode) {
        case "encode":
          this.toolResult = this.toolData.data
            .split("\n")
            .map(encodeURIComponent)
            .join("\n");
          break;
        case "decode":
          this.toolResult = this.toolData.data
            .split("\n")
            .map(decodeURIComponent)
            .join("\n");
          break;
      }
    },
  },
};
</script>

<style lang="scss"></style>