From 8e29a97404ea0aa9b9b576656358c8c276b6f992 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Fri, 22 Apr 2022 20:13:37 +0200
Subject: feat(new-tool): html entities escape/unescape

---
 src/tools/html-entities/html-entities.vue | 80 +++++++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 src/tools/html-entities/html-entities.vue

(limited to 'src/tools/html-entities/html-entities.vue')

diff --git a/src/tools/html-entities/html-entities.vue b/src/tools/html-entities/html-entities.vue
new file mode 100644
index 0000000..3fd3748
--- /dev/null
+++ b/src/tools/html-entities/html-entities.vue
@@ -0,0 +1,80 @@
+<template>
+  <n-card title="Escape html entities">
+    <n-form-item
+      label="Your string :"
+    >
+      <n-input
+        v-model:value="escapeInput"
+        type="textarea"
+        placeholder="The string to escape"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-form-item label="Your string escaped :">
+      <n-input
+        :value="escapeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string escaped"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button
+        secondary
+        @click="copyEscaped"
+      >
+        Copy
+      </n-button>
+    </n-space>
+  </n-card>
+  <br>
+  <n-card title="Unescape html entities">
+    <n-form-item
+      label="Your escaped string :"
+    >
+      <n-input
+        v-model:value="unescapeInput"
+        type="textarea"
+        placeholder="The string to unescape"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-form-item label="Your string unescaped :"> 
+      <n-input
+        :value="unescapeOutput"
+        type="textarea"
+        readonly
+        placeholder="Your string unescaped"
+        :autosize="{ minRows: 2 }"
+      />
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button
+        secondary
+        @click="copyUnescaped"
+      >
+        Copy
+      </n-button>
+    </n-space>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import {escape,unescape} from 'lodash'
+import { computed, ref } from 'vue';
+ import { useCopy } from '@/composable/copy';
+
+const escapeInput = ref('<title>IT Tool</title>')
+const escapeOutput = computed(() => escape(escapeInput.value))
+const {copy: copyEscaped} = useCopy({source: escapeOutput})
+
+const unescapeInput = ref('&lt;title&gt;IT Tool&lt;/title')
+const unescapeOutput = computed(() => unescape(unescapeInput.value))
+const {copy: copyUnescaped} = useCopy({source: unescapeOutput})
+</script> 
+ 
\ No newline at end of file
-- 
cgit v1.2.3

