it-tools/src/tools/url-encoder/url-encoder.vue

<template>
  <div>
    <n-card title="Encode">
      <n-form-item
        label="Your string :"
        :feedback="encodedValidation.message"
        :validation-status="encodedValidation.status"
      >
        <n-input
          v-model:value="encodeInput"
          type="textarea"
          placeholder="The string to encode"
          :autosize="{ minRows: 2 }"
        />
      </n-form-item>

      <n-form-item label="Your string encoded :">
        <n-input
          :value="encodeOutput"
          type="textarea"
          readonly
          placeholder="Your string encoded"
          :autosize="{ minRows: 2 }"
        />
      </n-form-item>

      <n-space justify="center">
        <n-button
          secondary
          @click="copyEncoded"
        >
          Copy
        </n-button>
      </n-space>
    </n-card>
    <br>
    <n-card title="Decode">
      <n-form-item
        label="Your encoded string :"
        :feedback="decodeValidation.message"
        :validation-status="decodeValidation.status"
      >
        <n-input
          v-model:value="decodeInput"
          type="textarea"
          placeholder="The string to decode"
          :autosize="{ minRows: 2 }"
        />
      </n-form-item>

      <n-form-item label="Your string decoded :"> 
        <n-input
          :value="decodeOutput"
          type="textarea"
          readonly
          placeholder="Your string decoded"
          :autosize="{ minRows: 2 }"
        />
      </n-form-item>

      <n-space justify="center">
        <n-button
          secondary
          @click="copyDecoded"
        >
          Copy
        </n-button>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { useValidation } from '@/composable/validation';
import { computed, ref } from 'vue'

const encodeInput = ref('Hello world :)')
const encodeOutput = computed(() => {
  try {
    return encodeURIComponent(encodeInput.value)
  } catch (_) {
    return ''
  }
})

const encodedValidation = useValidation({
  source: encodeInput, rules: [{
    validator: (value) => {
      try {
        encodeURIComponent(value)
        return true
      } catch (_) {
        return false
      }
    },
    message: 'Impossible to parse this string'
  }]
})

const { copy: copyEncoded } = useCopy({ source: encodeOutput, text: 'Encoded string copied to the clipboard' })


const decodeInput = ref('Hello%20world%20%3A)')

const decodeOutput = computed(() => {
  try {
    return decodeURIComponent(decodeInput.value)
  } catch (_) {
    return ''
  }
})

const decodeValidation = useValidation({
  source: encodeInput, rules: [{
    validator: (value) => {
      try {
        decodeURIComponent(value)
        return true
      } catch (_) {
        return false
      }
    },
    message: 'Impossible to parse this string'
  }]
})

const { copy: copyDecoded } = useCopy({ source: decodeOutput, text: 'Decoded string copied to the clipboard' })



</script>