From 203b6a9d73dcb30182b130de59920534e18b76b4 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Thu, 14 Apr 2022 02:30:25 +0200
Subject: [PATCH] feat(tool): base64 string converter

---
 src/plugins/naive.plugin.ts                   |  2 +
 .../base64-converter.service.test.ts          |  6 ++
 .../base64-converter.service.ts               |  0
 .../base64-converter/base64-converter.vue     | 66 +++++++++++++++++++
 src/tools/base64-converter/index.ts           | 11 ++++
 src/tools/index.ts                            |  3 +-
 6 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/tools/base64-converter/base64-converter.service.test.ts
 create mode 100644 src/tools/base64-converter/base64-converter.service.ts
 create mode 100644 src/tools/base64-converter/base64-converter.vue
 create mode 100644 src/tools/base64-converter/index.ts

diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index 68d2036f..0896e51f 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -46,9 +46,11 @@ import {
   NDivider,
   NStatistic,
   NTable,
+  NUploadDragger,
 } from 'naive-ui';
 
 const components = [
+  NUploadDragger,
   NTable,
   NStatistic,
   NDivider,
diff --git a/src/tools/base64-converter/base64-converter.service.test.ts b/src/tools/base64-converter/base64-converter.service.test.ts
new file mode 100644
index 00000000..36ca080f
--- /dev/null
+++ b/src/tools/base64-converter/base64-converter.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './base64-converter.service';
+//
+// describe('base64-converter', () => {
+//
+// })
\ No newline at end of file
diff --git a/src/tools/base64-converter/base64-converter.service.ts b/src/tools/base64-converter/base64-converter.service.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/tools/base64-converter/base64-converter.vue b/src/tools/base64-converter/base64-converter.vue
new file mode 100644
index 00000000..3354cc40
--- /dev/null
+++ b/src/tools/base64-converter/base64-converter.vue
@@ -0,0 +1,66 @@
+<template>
+  <n-card title="Text to base64">
+    <n-input v-model:value="textInput" type="textarea" placeholder="Put your string here..." />
+    <n-input :value="textBase64" type="textarea" readonly />
+    <n-space justify="center">
+      <n-button @click="copyTextBase64()" secondary>Copy</n-button>
+    </n-space>
+  </n-card>
+
+  <n-card title="File to base64">
+    <n-upload :show-file-list="true" :on-before-upload="onUpload" list-type="image" v-model:file-list="fileList">
+      <n-upload-dragger>
+        <div style="margin-bottom: 12px">
+          <n-icon size="35" :depth="3" :component="Upload" />
+        </div>
+        <n-text style="font-size: 14px">
+          Click or drag a file to this area to upload
+        </n-text>
+      </n-upload-dragger>
+    </n-upload>
+
+    <n-input :value="fileBase64" type="textarea" readonly />
+    <n-space justify="center">
+      <n-button @click="copyFileBase64()" secondary>Copy</n-button>
+    </n-space>
+  </n-card>
+
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy'
+import { useBase64 } from '@vueuse/core'
+import { Upload } from '@vicons/tabler'
+import { ref, type Ref } from 'vue'
+import type { UploadFileInfo } from 'naive-ui';
+
+const textInput = ref('')
+const { base64: textBase64 } = useBase64(textInput)
+const { copy: copyTextBase64 } = useCopy({ source: textBase64, text: 'Base64 string copied to the clipboard' })
+
+const fileList = ref()
+const fileInput = ref() as Ref<File>
+const { base64: fileBase64 } = useBase64(fileInput)
+const { copy: copyFileBase64 } = useCopy({ source: fileBase64, text: 'Base64 string copied to the clipboard' })
+
+
+function onUpload({ file: { file }, }: { file: UploadFileInfo }) {
+  if (file) {
+    fileList.value = []
+    fileInput.value = file
+  }
+}
+
+</script>
+
+<style lang="less" scoped>
+.n-input,
+.n-upload,
+.n-card {
+  margin-bottom: 15px;
+}
+
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/tools/base64-converter/index.ts b/src/tools/base64-converter/index.ts
new file mode 100644
index 00000000..5f3021a0
--- /dev/null
+++ b/src/tools/base64-converter/index.ts
@@ -0,0 +1,11 @@
+import { FileDigit } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'Base64 converter',
+  path: '/base64-converter',
+  description: "Convert string, files or images into a it's base64 representation.",
+  keywords: ['base64', 'converter', 'upload', 'image', 'file', 'convertion', 'web', 'data', 'format'],
+  component: () => import('./base64-converter.vue'),
+  icon: FileDigit,
+};
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 17f73592..86116c64 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as base64Converter } from './base64-converter';
 import { tool as crontabGenerator } from './crontab-generator';
 import { tool as textStatistics } from './text-statistics';
 import { tool as tokenGenerator } from './token-generator';
@@ -25,7 +26,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Converter',
     icon: LockOpen,
-    components: [dateTimeConverter, baseConverter, romanNumeralConverter],
+    components: [dateTimeConverter, baseConverter, romanNumeralConverter, base64Converter],
   },
   {
     name: 'Web',